Designing for the Mobile ‘Net: 3 Quick Steps to Better Looking, Faster Mobile Designs

With the increased popularity of smart phones that feature wi-fi and 3G network capabilities, it’s becoming more important to design for these devices. Most of them have screen resolutions similar to the iPhone, which is 320×240 pixels. That makes for a lot of pixels crammed into those 3-3.5 inch screens, and the way they handle websites (showing the whole site first and allowing for zoom) can make them difficult to work with. So here are three quick things you can do to make your mobile site more practical and cleaner looking.

Use large Font Sizes. This seems like a pretty straight forward suggestion; regular font sizes simply look too small on these devices. Using larger fonts will make the site more manageable on small, high resolution screens. Making the site fit the screen resolution will help with this too, as it will prevent the device from utilizing its zoom effect to fit the whole page to the screen. Plus, big fonts allow you to get your point across quickly and concisely without making the user squint to see what you’re talking about.

Use few or no Images. These devices are currently very limited in the amount of data they can handle in web pages, not to mention the ridiculous bandwidth caps most providers have on 3G network connections. Leaving out images or using simple/smaller images makes the page load faster and look cleaner, typically improving the look of the page. At this point in time, mobile sites should be more about functionality than style and images. Plus a good choice in fonts, colors, and correct use of blank space will more than make up for the lack of images. If you have to have images for a gallery, present them in a slideshow style, shrunk for the smaller screen sizes.

Javascript and Flash are out of the Question. Unfortunately these two technologies have not been implemented in a variety of different touch phones(and other smart phones). Hopefully this will change with the possible creation of a Mozilla/Firefox based mobile browser, as well as Android; the open platform from Google. Until these technologies have been implemented in the majority of devices they are best to be avoided. Otherwise you are cutting yourself off from the majority of mobile users, and that just doesn’t make sense.

The mobile web has just begun, and over the next few years we should see a steady growth in the flexibility and potential of this platform. These three steps should help to make your mobile sites more efficient and user friendly, but keep in mind that mobile sites should only be used for sites with static content or small amounts of content; trying to do a mobile blog would be tedious and difficult, at least right now. It is still very frustrating that Apple has not implemented Flash on their mobile browser and have done such a mediocre job with javascript. I believe the Android platform will help the developers at Adobe demonstrate their ability to effectively produce a mobile flash environment, and hopefully Apple catches on and works with Adobe to implement flash on the iPhone.


Tags: , , , ,

This entry was posted on Saturday, October 18th, 2008 at 1:00 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Designing for the Mobile ‘Net: 3 Quick Steps to Better Looking, Faster Mobile Designs”

  1. Paul Sanderson Says:

    October 19th, 2008 at 2:48 pm

    Hi my name is Paul Sanderson an in feb this year I started this http://www.wscoop.com its a digg style site but dedicated to web design and development.

    You are more than welcome to promote your own sites, projects, comments and all… at the moment the posts go straight to the font page to it is good exposer and at least some sweet backlinks

    A mention or two about wscoop in you blog would do wonders too.

    Thanks

    Paul

Leave a Reply




XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>