The mobile web revolution is growing stronger by the day with every new mobile device that hits the market. Screen widths and resolutions vary greatly now compared to a few years ago, making it increasingly difficult for web designers and developers to cater to the delicate needs of the mobile user.
However, we cannot forget that sixty (60) percent of internet access is mostly mobile. This means you must be prepared to design for the mobile user if you’re not doing it already. The following tips will point you in the right direction as far as creating mobile-friendly sites goes. Enjoy to the end and bring the conversation to the comment box!
Simplicity
Keeping your site simple goes a long way in creating a great experience for the mobile user. Mobile devices come with smaller screens and slower internet compared to desktop computers. Overloading a mobile site (or even a desktop site) with content will slow down your website, which if you’re wondering, translates to poor user experience.
Remove unnecessary content, links, sidebar items and consider optimizing images for a simpler, faster and mobile-friendly website. Place your most important content first. In fact, trying putting your CTAs first (or at the top) or make sure the process of purchasing your offer is as simple as ABC. Keep. It. Simple.
Streamline Your Site Layout
This goes with our numero uno point above. Mobile users don’t have the time and the bandwidth to go several pages deep on your website. Instead of building a cluttered website with confusing options, endeavor to create a mobile site that limits your prospects to the items they are most likely looking for.
Eliminate fixed grids (in favor of fluid grids), frames, tables and heavy formatting, so your users can move around your site easily and quickly. You wouldn’t want to subject your web visitors to horizontal scrolling, now would you?
If a screen can be skipped, skip it – there must be nothing excessive in a mobile website. – Oleg Lola, CEO at MobiDev
Minimize Instances Requiring Text Entry
If you suffer from the fat-finger syndrome as Jamie Turner puts it, you will have a challenging time typing on tiny smartphone keyboards.
As it were, most (if not all) mobile users are not fond of typing text into form fields, and if you can provide alternative ways of collecting information, your visitors as well as mobile site can benefit greatly.
Instead of text areas and such like fields, use checklists (checkboxes), radios, drop-down menus and pre-populated fields to gather user input. That 10-field inquiry form you had in mind is a definite no!
Use White Space
Now that we’ve eliminated the need to enter text, mobile users who visit your mobile site will be doing a whole lot of clicking, tapping and swiping. You want to add some white space around your buttons and links to ensure “…that users can easily click the button they are aiming for.”
Other than that, white space make for a cleaner and more elegant design. It is something you must replicate on your standard desktop sites as well. Use plenty of white space.
Brand Your Mobile Website
If you use responsive web design techniques, you don’t have to worry about branding since your mobile site is essentially a minimized version of your desktop site. If you’re building a separate mobile site though, use the same branding elements used on your standard site. Can you guess why?
Firstly, your mobile site just like any other online property affiliated to your company should work hard to strengthen your brand image. Secondly, you don’t want to throw off returning customers with a mobile site that looks starkly different from the site they’re used to.
Responsive Web Design
Responsive web design uses a mobile-first approach to create fully responsive (adjusts automatically to screen width) that look amazing and perform well on multiple devices. Responsive web design eliminates the need for separate mobile sites while still catering to the mobile user on the go.
Provide Link to Your Full Site
When building your mobile site, you will most probably program your desktop site to redirect mobile users to the mobile site. Why then would you go ahead and link back to your full site?
Well, an interested prospect who need information not available on the mobile site can click through to your full site, which is a big win for everybody.
Eliminate Java and Flash
Mobile browsers are not as dynamic and robust as desktop browsers. As such, a majority of mobile devices don’t support Java, and those that do usually have slow responsive time meaning a mobile site that uses Java will take ages to load.
Did you know Apple mobile devices do not support Flash at all? This means about thirty percent (30%) of smartphone users won’t see your content if you use Flash on your mobile site. Both instances mean poor experience for the mobile user, and we don’t want that.
Avoid Pop-ups and Auto-reload
Using pop-ups on a mobile site means navigating between multiple windows and tabs. This is hard on mobile devices and will lead to a slower site. If your pop-ups utilize JavaScript or such, the site might fail to load entirely or hang on loading should something break. Same goes for pages designed to reload automatically.
Test Your Mobile Site
Not having a mobile site is much better than releasing one to the market without first testing it. The last thing you want is visiting your mobile site on a different device a week later and realizing major incompatibility issues.
Testing is an important part of web development projects. It might seem daunting at first, but you should just get it over and done with. After all, it is worth the effort. Test for compatibility with various devices, screen resolutions and operating systems.
Over to You…
As seen in my crystal ball (hehe), the future web will experience an upsurge in mobile usage. As a web designer, you should make an effort to learn more about designing for the mobile user. My only hope is that this post just gave you the kick – the inspiration – you need to conquer the world of the mobile web now and in the future. Adios!
