7 Proven Ways to Improve Mobile Web Design

Natalia Chrzanowska

Content marketing manager and author at Brand24. Social media and marketing freak. Occasional traveler and amateur photographer.

A brand can be defined as an entirety of all experiences related to a product or service delivered by this brand. Experience is a keyword here, as consumers pay more attention to the appearance, utility and satisfaction that derive from using a branded product or service. In response to that companies put more resources into departments that study people’s behaviors, attitudes, and emotions toward a particular brand and then adjust it to a user. UX has become a crucial element of a brand.

What is more, people are more active on mobile devices and they demand friendly and easy-in-use interface. Web design that is compatible across different devices is not an extra feature that distinguishes your brand from others – it’s a must. These trends have had an impact on a new approach which assumes that web design should aim at providing an optimal user experience across a wide range of devices. 

Even though many companies try to follow this approach, they still keep forgetting about few details that discourage users from their web sites. Very often by changing these small things they can gain a considerable bunch of clients.

Every Second Counts

According to KissMetrics, nearly half of the surveyed users claim that they would wait only up to 10 seconds for a site to load before abandonment. If you run an e-commerce business, 1 second of delay may cost you 7-percent reduction of conversions. It also decreases customer satisfaction and probability that he or she will revisit your site.

mobile websites problems

Moreover, mobile Internet users encounter plenty of problems while browsing on their devices. The most common they mentioned were: too slow website, errors while loading or difficulties in reading a page. Those problems are reasons enough to abandon a page and never come back. You can’t afford such losses.

Responsive  vs. Adaptive Web Design

Together with an extensive rise of mobile technologies, developers and users have argued about which approach would be better: responsive (RWD) or adaptive web design (AWD). Both aim at providing visitors with a better mobile user experience regardless of a type of mobile device and screen size. They share the same goal to enable effective and smooth navigation on a website on whatever device a visitor happens to be using, but differ in a way of delivering such design.

Put simply, responsive web design adjusts website layout to any viewing device using CSS media queries to change styles based on the target device such as display type, height, width etc. It provides fluid design that changes and responses to fit any screen size.

responcive_scheme3

Adaptive web design, on the other hand, utilizes static, predefined layouts based on device screen size. AWD adapts to a detected device size and do not respond once it is initially loaded. In general there are six common screen widths.

The vast majority of new websites are based on RWD, as it carries many unquestionable advantages. First of all, there is only one website with one URL. It means not only easier page building and management, but also easier social sharing from users’ perspective. What’s more, one URL for the same website across different devices positively influences SEO. On top of that, responsive design gives improved user experience.

Responsive web design has application in a great deal of new projects. However, adaptive design is commonly used for retrofits.

Details That Matter

We have been told many times about the importance of user experience, but theory is one thing, practice is another. There are still many mistakes that marketers and developers make when it comes to web design. Main reason for that is the fact that they do not look from visitors’ perspective and forget about a few details, which make huge difference. It especially concerns mobile devices. What are the major mistakes?

1. Slow load times

As I mentioned before, one of the most common reason for abandoning website is its extensive loading time. You cannot afford that a prospect leaves your website before you even get a chance to convince him or her to your products or services. It would be like loosing a customer in a retail store, just because of locked door.

2. Small active elements

5904590295719f72d68f5de9_640Another frustrating thing that people complain about when browsing on mobile is poor navigation, which results from too small buttons or too small spaces between buttons. You have probably experienced this irritation many times, when you tried to press one button with your finger and a link next to it opened instead.

3. Text not adjusted to small screens

Loads of text in 12-px font might be discouraging and may not catch visitor’s attention. And again, it might be a reason for abandoning a page in few seconds after entering.

4. Input type not adopted to a form type

mobile input typesIt is a small and easy-to-implement detail that can significantly improve mobile user experience. You do not need qwerty keyboard if you enter mobile number to the form. Thus, when designing a web form think about the most appropriate input type to implement. There are dozens to choose.

5. Inconsistency between desktop and mobile version

Mobile website is not a “lite” version. Visitors expect the same, full experience and high-quality content on every device they use. They often switch between devices when accomplishing their goals and a lack of a functionality on a mobile version can make them to switch to another website instead.

6. Annoying popups

I am not saying that all popups on mobile devices are bad, but users are much more sensitive to them on smaller screens, or more precisely they do not like them. Especially, when it is hard or impossible to close a box. Thus, make sure your pop-up window offers a value for your visitor and, what is more important, carries out a promise. Otherwise, I recommend to give popups a miss.

7. Faulty redirection

This still happens very often when there is a separate URL for desktop and mobile version. The script on your server needs to descry a type of a device on which a user is browsing and then redirects him or her to the equivalent page. However, wrong configuration might affect that a visitor will see mobile homepage instead the page he or she requested (e.g. contact page). Again best solution for this problem is responsive web design which guarantee the same URL and the same content regardless of a device.

Make It Work

Every activity and each experience of a website’s visitor is a process. Whether a user wants to buy something in an online store or sign up for a newsletter you should treat his or her behavior as a set of steps that constitute a process. Your main goal in web site design should be to make the process the easiest and the fastest possible.

97d9b28fcb7afc96fa35755d_640You can make a difference by testing, testing and testing. Put yourself into your customer’s shoes and see what’s working and what is not. Where else you can reduce time or effort that a visitor must put to reach his or her goal. Pay attention to every step of a process and always try to come up with solutions to improve user experience.

Finally, try to understand your client. Remember that if something is intuitive for you, it does not have to be that obvious for a user who visits your website. Thus, I will repeat myself – test and listen carefully to your audience, because it is the most valuable source for knowledge that you can ever have.

What irritates you the most in mobile web design? Leave us a comment!

TRY FOR FREE