Web Design for the iPad
What were a strong majority of savvy web designers and developers up to on Sunday, April 5th? Well, after an early morning waiting in line, mad rush past the Genius bar at the Apple Store, and hours of neglecting people (and personal hygiene, no doubt) I'd be willing to bet a good number of web geeks spent Sunday the 5th figuring out how pretty (or not) their website could be on their shiny new portal to the interwebs.
I don't have an iPad. Not saying I don't want one, just that so far I value my kids' nutrition more than that. I have gleaned much from many others who have written on this new development in the mobile web. The best news: if you've been doing things 'right' before the iPad, chances are you won't have to change much.
Here are My Top 3 Recommendations
1. Standards-Based Code.
Like I said, if you're doing things right not much has to change. In iPad (and iPhone) world, there is no IE6! This means you can use clean, valid CSS and HTML and things will look like they're supposed to. This is the perfect chance to try out those new CSS3 and HTML5 techniques. It also means you can leave third party proprietary plug-ins behind (more on that in a moment). Definitely my favorite part of iPad development.
Remember, there's no mouse so hover effects are out. This is important to keep in mind when designing your site. If you're designing one site for desktop/laptop/iPad use go ahead and use the hover effects for traditional mouse users. Just don't forget the tactile nature of the iPad interface. Do your links beg to be touched? Using the :active state for your links can give users the experience of 'pushing' buttons on your site.
2. Use a 960 Grid.
Ok, so it doesn't have to be 960 pixels wide. However, the 960 grid system has become extremely popular due to its ability to fit a large number of modern screen resolutions well. A good grid system will give your design a slick, organized, and clean look which enables your users to more easily process the information on your site.
If you've done this, congratulations! The iPad will automatically scale your site to fit the screen. And since the iPad has a 1024x768 screen resolution (the same as many desktop monitors), your site should look beautiful on the iPad.
I will say that when building the mobile version of this site (for iPhone, etc.), I designed it to fit within the viewport of an iPhone. But when I visited my site, it was not automatically scaled to fit the screen. Should this happen, you can insert this snippet into the head section of your page code. This tells the iPad to automatically set the viewport of the browser to the width of the device.
<meta name="viewport" content="width=device-width" />
3. Leave Flash Behind.
Everyone's taking sides in this debate. Adobe and Apple will be battling it out for a while. To me, being able to leave Flash behind means one less piece of software I have to buy. It means I can spend more time learning Open Standards and making the web a better place.
Flash certainly can do some pretty great things. Browser games and children's sites seem perfect places to make the most of Flash. However, for most websites Javascript can take care of the functionality we're looking for. In the next few years HTML5 will provide us with native video handling. No need for crufty embed/object code. As Javascript become more and more integral to web development, we'll see it become more and more crucial to the user experiences we're developing. Check out Spritely, for instance. Visit it on your iPad and you'll agree there's little need for flash in the future of web development.
What do you think? Certainly I haven't covered everything. I didn't even touch the world of developing specifically for the iPad. What have you learned? Leave a comment to share with the community.
For Further Reading:
Comments
Post new comment