Mobile Ready Website Design

Send to friend

Mobile ready website design is a hot topic among website designers. Guest speaker Patrick Rhone of Machine Methods spoke today at TC Web Pros on Designing Websites for Multiple Devices. Patrick's presentation was fairly short and to the point. And his approach was that simplicity is key to keeping all the phones happy.

He started out explaining that there are 150+ million web capable phones in the US alone. That should give plenty of web designers plenty to think about.

The question is: Are you practicing mobile ready website design?

Super simple HTML and CSS websites are already set for smart phones. Especially if you avoided complex graphics or lots of graphics. Flash is only a problem is you don't have some code that tells the smart phone to "see a graphic." If you don't give the smart phone an alternative graphic, it just shows nothing where the Flash is. And it's Patrick's belief that Apple will never show Flash. Period.

Many WordPress websites are already smart phone ready. And if your template isn't, there are WordPress plugins designed to make it smart phone ready. Other CMS systems may require plugins to work with smart phones. Patrick recommends always using a plugin or module designed to make your CMS site smart phone ready.

Absolute versus fixed width. Not a problem for the ‘Droid and iPhone browsers. However, other so-called smart phones may have an issue. Padding and margins are flexible. And go easy on scripts. You really should get smart phone emulators or borrow some smart phones from friends and family to check your website.
Make copy readable

It has always been a problem with some websites who favor image over substance. Tiny fonts or close packed text or white text on a black background or weird colored text. You can't afford to do that sort of thing anymore.

You have to make sure your copy is readable on a smart phone. Stick with the safe sanserif fonts like Verdana, Arial and a handful of others that are easy to read. Line spacing and font size have pretty much always been 12 point fonts and 1 em line spacing. That has to change. The new smart phone-ready standard should be 14 point font and 1.5 em.

TEST your website on a smart phone

Lastly, make your website easy to navigate. It's much harder to navigate a website on a smart phone than on a computer screen. TEST TEST TEST! Have people try navigating your website on a smart phone. Ask them to find certain pages and information.