Retina images for the iPad using CSS3

Yesterday I was at a bar when ‘a guy’ entered with a plastic Media Markt bag containing two New iPads. The weird thing, it was 00:30PM and he just bought the iPad’s 10 minutes earlier. And if people start walking into bars with Retina iPads past midnight, I guess it’s really time to think about the impact of the high-res screens on our daily work as web developers.

Because websites look pretty bad on the 3th gen iPad. Images get blown-up.

When the iPhone 4 introduced the Retina screen in 2010, we had to update the graphics in native apps with images that are two times the original size. Apple quickly introduced a solution for iOS developers with the @2x format. If you’re not familiar with it: when you use an image, for example AwesomeLogo.png, adding a larger AwesomeLogo@2x.png is enough. You can still refer to AwesomeLogo.png.

This could be a great solution for mobile Safari on the new iPad (and iPhone4/s) as well, if the browser would check for a @2x image. As this isn’t the case, and we’re not sure if it will ever be, we have to come up with new solutions. 

Read More

Naconf: Trent Walton

Naconf: Trent Walton

We’re just back from Nottingham, for the New Adventures in Web Design Conference. One of the speakers we really wanted to see was Trent Walton. If you’re not familiar with Trent, his personal blog is a great showcase of both fonts and responsive design. He’s also well-known for his work for Lost World’s Fair, a website to show the capabilities of fonts and CSS3, working together with great designers like Jason Santa Maria and Frank Chimero.

To improve you have to break rules.

Trent pushed the possibilities of web design. In his great talk he explained how: to improve you have to break rules.

Trent Walton's Blog
Pure CSS3 used for amazing titles

This accounts especially for the work he has done with fonts. To create these layouts, Trent had to add html, like loads of <spans> and classes to every character. To make this process easier, they created Lettering.js, a script that injects spans with classes around the characters. So you get something like<span class=”char1”>T</span> <span class=”char2”>H</span><span class=”char3”>I</span><span class=”char4”>S</span><span class=”char5”>!</span>. Semantic and codewise it’s crappy, but Trent’s tip: don’t think about compatibility but about what you want.

That might not be preferable, but because of examples like this, CSS3 changes like ::nth (to select child elements) get proposed or implemented faster. Pushing possibilities on the web forward.

Responsive Web Design

Trent also had his struggles with Responsive Web Design. According to Trent this is difficult to learn because it isn’t bolt-on, a new CSS3 trick can be implemented in projects, but to build responsive websites, you’ll have to completely change the way you work and think. From the start. And when going responsive, the flexible grids, fluid images and media queries are the ‘easiest part’. The difficult part: “can fine control of web type coexist with responsive web design?”.

FitText
FitText

In web design, we choose the size of fonts and placement of elements, to correspond with what we want to communicate. With responsive design, this is difficult because because you have several states. One website feels like 1000 PSD’s instead of one. “To think about the web responsively is to think in proportions instead of pixels”. To make text and video scalable, Trent’s company created FitText.js and FitVids.js.

To help you even more: Erskine Design, who also organised a great bowling event at Naconf, just launched Gridpak, a Responsive Grid generator. Elliot Jay Stocks tweeted after the event that he created a Photoshop grid for responsive web design.

This post was published on the Mangrove blog.