The new iPad truly has an amazing screen resolution. So much so, it has started to make our polished web application look a bit rough around the edges. Here's what we are doing to get our web application iPad 'retina' ready.
1. Using icon fonts instead of icon images
Throughout Airsquare we use icons to simplify & enhance the design. Unfortunately the image icons we use don't scale, which make them look pretty average at higher resolutions. One solution is to double the height & width of the images, then restrict them to the correct size using CSS. The downside is a larger file to download. Long term this also means you will need to keep recreating images as the resolution war heats up. Icon fonts are now hitting the main stream, with a little help from Twitter Bootstrap. They have some great advantages:
- They allow for infinite scaling, always looking sharp.
- They 'sit' better when using them, behaving like text
- They can be coloured to suit your brand/design. One thing we've always struggled with is the fine line between professional looking icons and clip art.
2. Use CSS3
If you are using gradients, shadows, opacity, rounded corners ... use CSS3 instead. The browser will ensure it renders crisply. Just make sure your website degrades nicely for people who don't update their browser.
3. Doubling the height and width of images
When you have to use an image, just double the image size. Then restrict them to the correct size using CSS.
4. Don't use images for text
A big no-no, but we still see it around the interwebs. They won't scale, and won't do you any favours for your SEO juice. If you have to, then use the above method.
You'll see these improvements rolling out over the coming weeks to the Websuite. We know there's quite a few of you who are using iPads; please let us know how things are looking.