Since mobile devices have become the most popular platform for browsing the internet, it has become necessary to create websites that are mobile friendly. If your website is not optimized for mobile, then the consequences could be increased bounce rate, low avg. session duration and low conversion rate. Low conversion rate means that your business will be affected in the long run unless you do something to fix.
To make your website mobile friendly, before starting with any technical stuff, you must start with the design. UI design is at the core of creating a website that is optimized for mobile users. Here are some tips to get you started.
Mobile First Design
If you are designing a new website or giving your existing website a completely new look, then the mobile first approach is the best way to do it. Mobile first approach, as it implies, is designing the website for mobile devices first then making your way up to bigger screen sizes. Starting designing with the small screen sizes ensure that you will only use the design elements that are essential to the site, which is also good for UX.
Minimal Approach
When designing for mobile, it is best to stay with a bare minimum. What it means is that using necessary graphical elements, like stock or hero images, full drop-down navigation or live chat icon should be avoided, hidden or collapsible. For navigation, it is best to use a slide in or collapsible navigation menu. Images should only be used where necessary. Since display area is limited, it is best to keep enough distance between each design element, especially clickable text or buttons so it is easy for users to click them.
Typography Design
Since mobile screen size is small, the content area on the website should be designed with that in mind. This means font size, line height, and line length might not be designed same as for desktop. The font size should be big enough so the user doesn’t have to zoom the text to read it. Recommended line height and line length for mobile devices are 1.25em and 35-40 characters respectively for body text. These numbers will be different for headings and caption text.
Iteration Till The End
Once you have implemented the mobile design on your website and made it live, the role of a designer doesn’t end there. Carry out usability testing on your website to check or allow users to report the flaws. Iterate UI design based on these feedbacks to continually improve the design of your website for better UX.