Designing a Mobile Website – Best Practices
Heavy mobile data users are projected to triple to one billion by 2014. So the picture is clear; a large content from desktop would migrate to palm size mobiles. The real estate of mobile being entirely different from Desktop, UI/UX definitely plays a key role here. Designing for mobile does not mean we are designing for a particular small device, but a responsive one in all devices and platforms. Before starting any design with mobile in mind, consider these simple, yet important questions.
What is the main challenge?
The most challenging part is to squeeze a trillion bits of content into a small real estate. To ensure a common user experience and credibility, we may need to synchronize the extracted content from desktop to mobile devices. Therefore, it is more than a ‘Mobile First’ concept forcing us to think about user experience focused design.
What is User Experience Focused Design?
Mobile website users should not feel like they are browsing two different web sites. A user should get the exact feel of a desktop website while in mobile website. Therefore, we should preserve the branding of the websites in both platforms – Mobile & Desktop. The design should encourage a common user experience having same functionality but in a more optimized way.
What are the main roadblocks of common User Experience design?
1. Patience Level
2. Display Size
3. Low Bandwidth
4. Areas of Interaction ( gestures)
If we identify these critical parameters in advance, we can bring the same user experience to mobile website. Bringing same user experience does not mean we need to pull all content from desktop website. We need to identify the most important elements to display in mobile website and the least critical amongst the remaining content to hide. Therefore, after creating a basic flowchart, we need to start Wire framing.
What are the benefits of wire framing?
Just think if you have to rework and put in long hours on the design -doing same thing over and over again. How tedious and waste of time it would be? Here comes the role of wire framing. The basic idea of wire framing is to visualise our ideas and user flows into a piece of paper or into some online tools like balsamiq, mockflow etc.
Initial wireframing will help us to get an overall idea about the user flow and we can brainstorm on wireframes for better user experiences. And a proper wireframing will help to define how the content will stack and reorder itself going from desktop to mobile. We can conduct quick iterations with the wireframes to identify flaws in our design concepts. It will help us to resolve the UI/UX issues before doing a fine tuned skinned design. After finalizing the wireframes, then only we should move into User Interface designs.
What are the main points to look in UI design of a mobile web design?
Simplicity directly links to usability. Making a simple design is the main feature of a mobile website. While keeping simple we need to preserve the branding also. As we are aware that the display size and bandwidth are limited in mobile device, we need to keep the graphics as minimum as possible. The current flat UI trend plays a main role here. Its lesser cluttered and as it’s mainly vector graphics it really emphasises the speed & performance of a website. In mobile, simple design is more attractive and convenient to use.
2. Colours and Typography
The two key design elements that make up a clear brand are the logo and the colour scheme. Therefore, in a mobile web design we need to consider this as the main brand elements. We need to make the page content short. We can emphasise the main content by giving a much larger font and maybe moving images aside.
Typography is the backbone of a good mobile web design. Good typography will make your site easy to read, visually appealing and works in different user environments.
White space, if used in the right balance could enhance the readability on all the pages without the after effects of vertical scrolling. For effective mobile UI’s, all elements in the design (images, navigation, icons, text, buttons, etc) should be separated clearly and framed properly.
4. Image Optimization
To optimize images we can use some image replacement techniques like picture fill, php-adaptive-image etc. Using SVG for vector images and fontface image replacement for icons will also enhance the performance of mobile websites.
Navigation should be about the user action and a clear path to get the user there. Some useful tips:
- Know your audience and identify their navigation pattern
- The content and headline needs to be visible first to not get in the way of viewing the page content
- For dynamic content, keep your navigation below the major text area
- Collapsible navigation will help to keep your UI simple and clean
- Keep buttons large with extra padding and proper spacing.
- Keep navigation simple. Do not clutter a navigation bar with several options; instead choose appropriate ones, and create sub-navigation if necessary
- Use inbuilt functionality to leverage the device’s native capabilities for additional user experience
6. Animations and Gestures
On a desktop, user interaction is assisted with a mouse and keyboard but on a smart phone, users tap, flick and swipe their way around. Therefore, any content in a mobile website should assist a smooth user transition
7. Forms and Signup Process
Excessive user data entry could be avoided to a good extent and replace it with easy input controls like sliders, list, and radio buttons.
8. Device Orientation
Stick with Single Column – Single column designs are more manageable on smaller screens and convert from horizontal to vertical better. After creating an awesome design we need to test its responsiveness.
What is the importance of UI testing?
Mobile devices come in different sizes. Therefore, it will be a challenge to full-fill the design for each device size. So, it is better to test using online stimulators like Responsinator or Screenfly to identify UI issues.
In next few years, people will not discuss about wherever mobile or desktops, but it will be about users and experiences.
Before you start with any mobile website development, do consider these points. Do write to us about your thoughts on this topic.
Head of UX/UI Design team, RapidValue Solutions