Today one of the biggest area of change is the amount of internet users accessing the web and websites through mobile phones. So Mobile Website Design (MWD) requires a strategic approach from both Designers and Developers.
A strategic approach for Mobile website Design means to achieve a proper product which is good looking and well functioning as well. I am not here to tell you how to develop a mobile website, but to tell you about few things you should keep in mind while designing for a Mobile.
1. Different Screen Sizes: Although being a web designer you must be aware of this and might have dealt with such an issue of various screen resolutions while designing for desktop monitors, mobile screens are totally different as compare to desktop monitors. Both mobile technology and screen sizes are changing everyday. Although latest mobiles are coming with large screens, but still there are older phones in use.
A standard size which you should follow for MWD's is 240 x 320. But its better to design in percentage. Obviously when you design you work on a desktop/laptop monitor. So its better to use the width of the DIV's in percentage. Give it 100% width so that whatever be the size of screen the content will fit in there. You
can check how its going to look by resizing the browser window in different sizes.
2. Prioritize Your Content: Because of less space on the mobile screen and very often slower internet connections we should display most important data or links on the screen relevant to the website. Its better to prioritize your content, crucial content and content with highest priority should be displayed properly. Important links should be easily accessible to the visitors. Stuffs like banners ads etc should not be used for MWD, these are of less interest to the users. The ads may be important for the company in terms of earning money, but at the end of the day the content is the one going to bring business to the company. So the content relevant to website should be prioritized first.
3. Minimal Use Of Images: In Mobile Website Design one should use least images compare to Desktop Website Designs. Ofcourse people are moving to smart phones with larger screens and better Internet connections with 3G and all which brings more possibilities for designers to use images in MWD. However there are still a large percentage of users who are not using these devices. So atleast for this year or two avoid images for MWD.
4. Single Column Layout: This works best for Mobile Website Designs. Layout of the website should be in vertical hierarchy. You can try Accordion style for navigations. If your navigation is loaded with sub menu items, vertical hierarchy is best.
5. Clicks To Taps: Desktop Website Designs works well with small and precise and active i.e. clickable areas, whereas the Mobile Website Deisgns requires larger buttons or we can say clickable areas. Coz in Mobiles the links should be enough big to be easily pressed with the thumb.
6. Proper Interaction: If a button is clicked the state should be changed and properly visible to the user. Suppose a link (in white color) when clicked turned to blue. This thing gives a proper feedback to the user that han! I have triggered an action.
Another good practice is to use loading gif (animated ) images for everything which you think can take time to load. This gives a clear feedback to his/her action to wait and users can clearly see that its in progress.
7. Design Considerations: Few areas which you should consider for MWD's.
a) Clean and Semantic Markup: Its very important to have clean and semantic, it will ensure the browser to properly display the website.
b) Alt Tags: There can be situations when users will not be able to see the images on the website, that time alt tags are very important for usability.
c) Label form Fields: The form fields should be properly labelled.
d) H tags: Use of heading tags texts are very important, with less styling in the layout H tags can bring big difference, this makes certain texts standout and gives users a better perspective of the website.
e) Reduce Margins and Paddings: Less use of margins and paddings for MWDs
f) Proper Color Contrast: Always make sure the background and text colors provide adequate contrast so that the content can be read easily.
7. Test Your Mobile Websites: Every project need to be tested but what about MWD's you cant buy all possible devices to test your website. In my suggestion easiest way of testing your website is to resize your browser window to different sizes and test. But that isnt a full proof solution right. I read few articles and came through the following links where you can test your MWD's
It involves a combination of installing the developer SDK for the platform like the
iPhone SDK= developer.apple.com/devcenter/ios/index.action
Android SDK= developer.android.com/sdk/index.html
Here's another link of an article which provides a thorough breakdown of how to test your MWD across all possible most popular platforms = mikebrittain.com/blog/2010/01/31/browser-testing-for-mobile-web-applications/
Following is a single column layout of Handspick.com mobile version developed by BlueHorse Software.
Share Your Solutions
A strategic approach for Mobile website Design means to achieve a proper product which is good looking and well functioning as well. I am not here to tell you how to develop a mobile website, but to tell you about few things you should keep in mind while designing for a Mobile.
1. Different Screen Sizes: Although being a web designer you must be aware of this and might have dealt with such an issue of various screen resolutions while designing for desktop monitors, mobile screens are totally different as compare to desktop monitors. Both mobile technology and screen sizes are changing everyday. Although latest mobiles are coming with large screens, but still there are older phones in use.
A standard size which you should follow for MWD's is 240 x 320. But its better to design in percentage. Obviously when you design you work on a desktop/laptop monitor. So its better to use the width of the DIV's in percentage. Give it 100% width so that whatever be the size of screen the content will fit in there. You
can check how its going to look by resizing the browser window in different sizes.
2. Prioritize Your Content: Because of less space on the mobile screen and very often slower internet connections we should display most important data or links on the screen relevant to the website. Its better to prioritize your content, crucial content and content with highest priority should be displayed properly. Important links should be easily accessible to the visitors. Stuffs like banners ads etc should not be used for MWD, these are of less interest to the users. The ads may be important for the company in terms of earning money, but at the end of the day the content is the one going to bring business to the company. So the content relevant to website should be prioritized first.
3. Minimal Use Of Images: In Mobile Website Design one should use least images compare to Desktop Website Designs. Ofcourse people are moving to smart phones with larger screens and better Internet connections with 3G and all which brings more possibilities for designers to use images in MWD. However there are still a large percentage of users who are not using these devices. So atleast for this year or two avoid images for MWD.
4. Single Column Layout: This works best for Mobile Website Designs. Layout of the website should be in vertical hierarchy. You can try Accordion style for navigations. If your navigation is loaded with sub menu items, vertical hierarchy is best.
6. Proper Interaction: If a button is clicked the state should be changed and properly visible to the user. Suppose a link (in white color) when clicked turned to blue. This thing gives a proper feedback to the user that han! I have triggered an action.
Another good practice is to use loading gif (animated ) images for everything which you think can take time to load. This gives a clear feedback to his/her action to wait and users can clearly see that its in progress.
7. Design Considerations: Few areas which you should consider for MWD's.
a) Clean and Semantic Markup: Its very important to have clean and semantic, it will ensure the browser to properly display the website.
b) Alt Tags: There can be situations when users will not be able to see the images on the website, that time alt tags are very important for usability.
c) Label form Fields: The form fields should be properly labelled.
d) H tags: Use of heading tags texts are very important, with less styling in the layout H tags can bring big difference, this makes certain texts standout and gives users a better perspective of the website.
e) Reduce Margins and Paddings: Less use of margins and paddings for MWDs
f) Proper Color Contrast: Always make sure the background and text colors provide adequate contrast so that the content can be read easily.
7. Test Your Mobile Websites: Every project need to be tested but what about MWD's you cant buy all possible devices to test your website. In my suggestion easiest way of testing your website is to resize your browser window to different sizes and test. But that isnt a full proof solution right. I read few articles and came through the following links where you can test your MWD's
It involves a combination of installing the developer SDK for the platform like the
iPhone SDK= developer.apple.com/devcenter/ios/index.action
Android SDK= developer.android.com/sdk/index.html
Here's another link of an article which provides a thorough breakdown of how to test your MWD across all possible most popular platforms = mikebrittain.com/blog/2010/01/31/browser-testing-for-mobile-web-applications/
Following is a single column layout of Handspick.com mobile version developed by BlueHorse Software.
Share Your Solutions
