November 4th, 2011
If you make iOS app icons, you’ll want a quick way to view them on your iPhone or other device. This is an easy method:
- Export your iOS icon as a 114×114 PNG with the file name “apple-touch-icon-precomposed.png”.
- Make a new web page on any site you have access to and write the HTML like so:
<html>
<head>
<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon-precomposed.png”>
</head>
<body>
</body>
</html>
- Upload your PNG file to the same directory and load the page in Safari on your iOS device.
- Tap the actions button and hit “Add to Home Screen.” Ignore the bookmark name and hit “Add.”
- Check out the icon on your home screen.
Any time you want to preview a new icon, just export it as a 114×114 PNG with the file name “apple-touch-icon-precomposed.png” and upload it to the same place.
If you want to see how your icon looks with the iOS gloss effect applied, you can leave off “-precomposed” in the file name and in the HTML.
Tags: ios
October 10th, 2011
As more of my browsing shifts to the iPhone, I find myself increasingly dissatisfied with sites that don’t optimize their layouts for mobile screens. Of course, Mobile Safari can display even complex web pages “just fine” — but pinching and panning to navigate them isn’t always fun.
The answer is a trendy new school of thought in web design, called “responsive design.” But it’s not just trendy; it solves a real problem. Designers coding responsively create sites that reflow to fit the size of the screen. Text and images shrink or grow; sidebars become sections below the fold; items laid out horizontally shift to a vertical flow.
At least at the most basic level, responsive design is not terribly hard to do. Working from a template posted on Onextrapixel, I was able to convert my landing page to a responsive design with roughly two afternoons and an evening of work.
I’m not done — linked pages still need to be updated with the new design; there are some CSS3 issues with Firefox that I mean to fix. But I like how it’s coming along.
Tags: web design