“Google’s mission is to organize the world’s information and make it universally accessible and useful.”
Accessibility doesn’t just mean that we make sites screen-reader compatible. It means that regardless of which software people use to access our information, we should give it to them in as useful a format as possible.
A few years ago, if you were told that your most technically savvy, and affluent users would be predominantly accessing your pages using browsers with poor JavaScript support, no flash plugins and a 320px wide viewport, you would scarcely have believed it? But in the last two years, Google’s mobile search traffic has increased five-fold. Internet-enabled smart phones are now outselling desktop PCs and 15% of Google’s Swiss Street View pageviews were from mobile devices. As Eric Schmidt likes to remind us, now is the time to commit to mobile first.
Simple, semantic markup with a minimum of DIVs and SPANs and CLASSes. This will give you a page which is search engine friendly, and easier to reflow if your design direction changes.
NEVER use the width property on a container element.
max-width will do exactly what you need. If you must add width for IE6 then do it with a syntax hack: * html div {width:960px;}
The same goes for height - specify a min-height instead, so if your site is localized to German, words don’t start breaking out of your boxouts.
Don’t use tables for layout purposes. You bake a grid onto the page layout which you can’t reflow later. If you need some gridded elements, achieve them with floated blocks, and you can specify widths for these elements if need be.
It’s also worth implementing images as CSS backgrounds, or at least include the following line:
img {max-width:100%;}
You can do some pretty amazing things with CSS3 transitions, don’t feel like you have to go running to jQuery if you want to spice up your user experience. An accordion interface can be achieved in around 10 lines of CSS3, and if structured correctly, will degrade gracefully.
You can trigger blocks of CSS statments by wrapping them in media queries. It’s probably best to avoid column based layouts, so adding float:none linearizes content well.
@media screen and (max-width: 510px) {}
One problem, IE8 and below do not support media queries, so only use them to enhance pages, don’t use them for core layout purposes.
When you are using a high-resolution Android or iPhone 4. Mobile browsers will often pretend to be regular desktop browsers and try to render your webpage with the full-width layout (using sub-pixels). You can zoom in to a specific area to see it in detail and so a 200px wide box might actually be rendered at 300 or 400 device pixels. However, media queries trigger incorrectly.
In order to play well with high resolution displays, you should add a viewport element for safety.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
Now you should have a site that renders well at narrow widths, but don’t forget the particulars of the mobile browsing experience. Hover states are out, so be wary of only revealing information on hover. Downloading a Doc isn’t particularly useful on a mobile device, but a vCard may be a good alternative, as it can be automatically imported into the phone’s contacts.
The narrower column widths on a phone screen can actually improve reading speed, so you could stand to drop the line-height a little, but you may also want to increase the spacing between paragraphs, so they are easy to see when you swipe to scroll.
Remember that mobile users are often surfing using an expensive data plan. If you can swap to smaller images on the fly with media queries then you can save our users money, and speed up page loading over low bandwidth connections.
iPads are currently the dominant tablet device, and as such are worth a little extra effort. Specifically they do not support :hover well and currently do not render scroll bars on any elements with the overflow:auto CSS rule applied. You can target iPads with the following media query and should consider linearising CSS dropdown menus if you want to avoid JS on your page, and perhaps applying a visual affordance to scrollable elements to highlight the fact you can in fact scroll the contents with a two finger swipe.
@media only screen and (device-width: 768px) {}
If you are planning to embed Maps or Street View on your pages, please use the latest Google Maps API v3 which is mobile compatible.
If you need a YouTube video, make sure to take 30px off the player height, as the iPad uses an overlay for video controls in place of the timeline bar being present constantly. It's also best to use the latest YouTube embed code for maximum playback compatibility, with or without Flash.
<iframe src="http://www.youtube.com/embed/vNSAG7PC9vk"></iframe>