Designing A Page Output For Mobile Devices
Thursday, March 17th, 2011 at 10:00am -- Rahul Bhagnari
With the ever-increasing popularity of mobile devices, many of our clients have already implemented or are designing mobile outputs of their websites. Creating the additional output within Cascade Server is very easy and is based off a template designed specifically for mobile devices. Therefore, the majority of the work lies in the actual design of the template prior to the integration into Cascade. I thought this might be a good time to talk about some of the design considerations when creating a mobile output.
When designing your mobile site, it’s important to note the functionality and purpose of the template. Simplicity is key. Keep in mind the following when creating your template:
- Available real estate - mobile sites have a limited display to show all content
- Slower download speed
- Use of images - you could keep the types of images restricted to jpgs and gifs or remove them altogether
- The Flash, JavaScript, or other “special” sections of your page as not all mobile devices support these types of functionality (and are therefore, unnecessary).
- This includes all flyover and popout menus and tags.
- User experience - including “home”, “back” and other links to various points of interests on your page
- While the mobile site offers a simplified version of your current site, an option to view your actual site on a mobile device would also be useful.
Keep in mind the following when implementing the mobile site version of your page:
- The content should be straightforward
- Try replacing text fields, such as radio buttons and checkboxes, whenever possible.
- All of the content on your main page doesn’t necessarily have to display on your mobile site. You want the most important pages and the most crucial information from those pages.
- The content and structure should be restricted in width size so as to avoid horizontal scrolling
- This is especially true for a navigation menu. Personally, I would recommend a maximum of four fields in the navigation and to keep its placement either at the top or bottom of the display.
- The domain name for your mobile site should be relevant and simplified
- For example, useful examples would be maindomain-mobile.com, m.maindomain.com, or maindomain.mobi. Owning all possible domains could also hep in redirecting users to the original site.
Here are some examples that show very effective designs for mobile devices
http://m.cnn.com/
http://m.espn.com
http://iphone.facebook.com/
http://m.alistapart.com
http://m.google.com
http://m.flickr.com
If you have any questions or if you’re interested in engaging our Services Team, please feel free to contact us.
Category
- News