Last weekend I gave a presentation at WordCamp Montreal 2011 on developing for the mobile Web. The talk covered some easy online tools, and WordPress-specific themes and plugins that require no coding. Then I offered my own solution.
Designing for mobile can be tough because you are designing for so many different devices, screen sizes, screen resolutions, operating devices, and functionality sets. Your design needs to be really flexible in order to work on the majority of mobile devices.
And it needs to be attractive. Most of the mobile web is not especially functional, and what is functional is a bit plain vanilla. It’s quite easy at this point to build a standout site, if you put in the effort.
Some Basics
Quite a few things need to change in a mobile design, in order for it to be functional. It needs to fit a variety of small, narrow screens. File sizes need to be small so the site doesn’t require a lot of bandwidth. The font-size should be big so that it’s easy to read in non-optimal conditions. It’s often a phone that’s being used to view the site, so it should take advantage of special phone functions, like click to call. And there are some things that just won’t reliably work like Flash, mouseover states and floated elements.
Getting Started
Basically, I work with the existing desktop design. In other words, I don’t design for mobile first. I know it’s what the experts recommend, but I find that my way is more efficient.
Instead I start by creating two new stylesheets for an existing site, one for mobile and one for tablets.
I copy the contents of my regular stylesheet into the first one. Then I remove all the floats.
I also set all the widths on elements, images and video to 100%. If there’s padding, I also switch that to percentages. What I do, essentially, is create a completely fluid design that’s tall and skinny with each element stacked on top of each other. This way the design works with a variety of devices.
Then I touch up a few visual elements and remove all the extraneous tags from my mobile stylesheet.
Then I repeat for tablets in portrait mode, in a tablet stylesheet (generally tablets in landscape mode look good already).
Images
Images need to be both high resolution do they don’t appear blurry, but also small in size to compensate for caching limits. Some tricks:
- I try to avoid using images in my stylesheets as much as possible by using CSS3.
- I use an icon that is 114 pixels by 114 pixels, the maximum for the iPhone 4 and the minimum for Opera browser.
- Make your images double the size you need, then reduce them in your desktop stylesheet by exactly half. This will keep images crisp when shown on high-resolution screens.
Content
Not everything in the desktop site needs to be in the mobile version. Mobile users are often in a hurry and have different needs and expectations.
Some things to remove:
- Social media buttons. Many people will access social media through a dedicated app and won’t be able to easily use these.
- Extraneous navigation, like category lists and tag clouds.
- Javascript sliders.
- Everything that uses flash, including flash slideshows and flash media players. If these are important, you’ll have to find another way to deliver this content.
Fancy Fonts
Many developers are using @font-face to deliver fancy fonts. This is great, but iOS devices, like iPhones, need a special file format, for this to work called SVG. If the font licence permits, Font Squirrel has a great @font-face Generator that will give you all the font formats you need and the CSS to use them. There are other generators as well.
Google Web Fonts also provides free embeddable fonts for @font-face use, but the SVG format isn’t part of what they serve on the web. That means that Google fonts won’t work on iPhones.
There is also a bulletproof font use syntax developed by Ethan Dunham of FontSpring.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Coming up in Part II
In part two, I’ll cover SEO, how to serve your mobile style sheet, some server side tweaks, dealing with javascript and more.
Slideshow
See the slideshow.
[slideshare id=8555528&doc=thefutureismobile-110710063610-phpapp01]
Free WordPress Theme
Get the free WordPress theme.
