If you really think that designing for a mobile website is completely different from that of a desktop one then you are badly mistaken. Just like desktop based websites, similar considerations need to be made while going for a mobile website design. We might always think that the screen of a mobile website is smaller in comparison to the desktop website & so the principles of designing could be way different. But in reality most of the designing principles remain the same. I have listed down in particular five most important parameters that are very much necessary while going for a mobile website design:
Navigation should be Absolutely Meaningful
Switching between the web pages or screens could be real fun. But the whole scenario is entertaining only when it is meaningfully done. Navigation should help a user in discovering a clear path of moving between the pages smoothly. Just simply eliminating the taps or clicks won’t help.
Make sure that the navigation is easily clickable. Put labels wherever necessary & keep it as simple as possible. For e.g., having a back button to go back to the previous page. Make sure that there shouldn’t be too less navigation as well. Always add an extra button for “Passwords” or “My Profiles”. Graphic representations are always good when it comes to communicating in a much easier way. Sometimes text could be pretty much hard to read then you can expect. Hence well created icons always provide a wonderful navigation path to the user.
Content should be User Focused
Content shouldn’t be simple removed in order to make things easier with the mobile website. By removing all the unnecessary content, you can sometimes lose on to the content that the user actually might want to see. Replace the not so important content by modifying it for a different purpose altogether. You might want to eliminate large chunks of data present on the desktop website in order to make it easily readable on the mobile website.
Instead you can break them into smaller paragraphs. Breaking up the data such as design elements, lines, or quotes can actually make things more interesting when smaller bites are viewed on a mobile screen. Consider using the following visual elements in parallel to the text elements:
- Title icons should be used to support the text present in the header.
- Use date elements available in a graphical manner rather than actually have the dates being listed.
- Info-graphics should be used to explain text in a much effective manner.
- Different colors should be used for highlighting the header or text rather than making a distinction through the varied size of the fonts.
- Background color used should be light enough in order to distinguish different elements.
- Important areas should be highlighted.
- Negative space as well as padding should be used to emphasize certain text.
- Large data should be broken into smaller ones using different views.
Appropriate Feedback From Web Components
User feedback is important when a browser is involved. A right kind of feedback should be provided when something is touched upon. For e.g., When you tap upon an ATM machine, multiple feedback’s are received accompanied by various sounds & vibrations which is a signal of machine acknowledging the ATM user. But on most mobile platforms only visual reaction is provided in the form of a feedback. Henceforth in order to communicate different actions from the user following things should be included:
- Activated or selected areas should be highlighted with several different colors.
- Fade animation should be used so that it gets on when somebody touches an element & it gets off when somebody moves cursor from that element.
- Gradients & colors with subtle borders should be used when something is touched upon.
- Different text colors or buttons should be used to symbolize a change in the selection.
- Use a turning arrow when a drop down box is selected.
Branding should be Absolutely Clear
Branding on a website purely depends on the use of proper small screen space in depicting company logo or other company branding elements or components. Here two major sources of branding elements that can be efficiently used are – color represents the company identity & company logo. Positioning may differ on the mobile view. But both the elements are mandatory for branding throughout the website. Another thing that has to be noted here is mobile browsers do not come with a URL or title bar. So a favicon & the site title can help a user to make out what a website is all about & which company does it represents.
Whitespace is a Key Element
Small screens of Smartphones can fool you but it is very important to understand that white space is a vital part of a good website design even if you want to accommodate an appropriate number of elements for a Smartphone website. White space is even more crucial when it comes to the mobile website as the design elements should be readable & usable with everything being differentiated properly whether being text, icons, navigation, buttons, etc. User experience gets enhanced not by filling up the white space with more content. It also doesn’t mean using pretty large fonts or avoiding padding to utilize the limited screen size. Instead things should be accordingly planned so as to reap the maximum benefit of an effective user experience. This can be done in the following ways.
- Small fonts for text should be used with a good amount of space in between.
- Padding should be included around all the box elements in order to have icons or text blocks framed.
- Elements should be separated by a clear grid containing abundant white space.
- Padding should be used throughout the website in order to have all the components wrapped up so as to restrain them from floating into the untouchable or unreachable areas.