Designing for the Mobile Web: Some Observations
As more an more people are using smart phones to access the web, we designers are face with a new set of challenges. Not only do we have to consider other browsers and how they render our traditional designs for the laptop and desktop computers, but now we have to figure out how to translate to smaller screen sizes and a host of new browser compatability issues on the mobile front. So as I’ve pondered, reseachered, discussed, and experimented in this area in the last few months, I’ve made some observations.
1. Simplify the options
When I look at mobile website, the first thing I notice are the stripped-down options. Check out Webdesigner Depot for example. They offer a handful of links at the top to navigate and a list of posts. When it comes to mobile designs simplicity is key. Due to small screen sizes and often much slower internet connections,it’s important that visitors can access the crucial areas and not much else.
2. Lack of images
As Internet connections get increasingly faster, designers have taken more liberty with the amount and sizes of images used on traditional websites, not to mention bandwidth-hogging videos, and users want the media-rich experience. On a mobile site, that can be more harmful than good. As slow load times are an issue, users may also be concerned with their available resources. Because of this we see limited use of images on mobile designs. As screen sizes on mobile devices grow, there is increasing opportunities to use more images, but there are many that do not have those devices yet.
3. White Space
Every site presents the challenge of getting the most infomation in front of the user, but in a way that doesn’t confuse or overwhelm the eye. This is true for every design, but seems especially important for mobile designs. A jumbled website is not usually particularly user-friendly, which would only be amplified on the smaller screen of a mobile device.
4. Prioritize your content
Due to the simplicity of mobile sites and the stripped-down options content must be highly prioritized. Figure out what your main message is and cut the fluff. Mobile websites should be tailored to the average mobile visitor, not the company, though the company definitely benefits in the end by having a user-friendly website. If you’re concerned about not having all your information available to the user, you can always include a link back to the full site.
And last but not least,
5. Design specifically for mobile rather than adapting from the original site
I think this last point is key. While you want to maintain your branding, the mobile web is a whole different platform and needs to be treated as such. Spend the time planning out the site, do a wireframe on a post-it note. Use a sub-domain such m.example.com or example.com/mobile to create your site instead of just having a mobile stylesheet. Doing a completely seperate site will save you many headaches down the road. That I know from experience.