How to Design a Mobile Friendly Website
Capital-Place-Responsive-Website

How to Design a Mobile Friendly Website

November 11th, 2015 Posted by Website Design

Designing for Mobile

With Google reporting that the number of mobile users has surpassed desktop users in the United States and nine other major countries, having a mobile friendly website is more important than ever. The mobile browsing experience is very different than that on a laptop or desktop computer. Understanding these differences will help you design a superior site and accomplish your website goals.

Responsive versus Mobile

When designing and developing a mobile friendly website there are two main ways to go about it: 1) You can build a separate smaller mobile website or 2) You can code your full desktop website to be responsive. A responsive website is a website that is built on a fluid grid to resize based on the size of the screen it’s being viewed on. You must know your business and identify which option is best for your target users.

Examples of successful separate mobile websites:

Examples of successful TJA designed responsive websites:

There are pros and cons to mobile and responsive websites. For most sites, The James Agency recommends building a responsive website. Responsive websites’ fluid grid systems make them more “future proof” for the ever-changing technology and screen sizes. With the rise in the number of mobile users, many expect to be able to view all content on their mobile device and are frustrated by smaller mobile sites. From a company and time management prospective, responsive websites are easier to maintain. Instead of updating content on two websites (the mobile site and desktop site) you only need to make edits in one place and it will display for all website visitors.

Tips for a well-designed mobile site:

1. Know your audience and their browsing behavior patterns

There are two main types of mobile users: users looking for specific information and users that are casually browsing. The users looking for information have a task in mind and want to get from point A to B as quickly as possible. Creating a pathway for them to get to the information as fast as possible helps this type of user to complete their task. Calls to action are important with this demographic since “80 percent of online shoppers admit that mobile purchases are impulse-driven and that they’re more likely to purchase from and interact with a brand that offers an engaging mobile experience.” (Huffington post)

The other main type of mobile user is an information gatherer. Information gatherers are often casually browsing through the Internet looking for information on a given topic. This user wants to be able to access the information as easily as possible and will leave your site quickly if they cannot find what they are looking for.

Identifying what type of website visitor your website is catering to will help you map out your website content and navigation to create the best mobile browsing experience.

2. Keep the design simple

Cut the clutter on mobile design. Trade small detailed design elements for larger simple features and easily digestible bites of information. Mobile websites have much less space to work with and simplified sites can better utilize the space available without sacrificing legibility. Simple designs load faster and help the user accomplish their website goals fast and easily by using the least amount of data.

With responsive websites, not all functionality needs to be accessible on the mobile version of the website. When designing how the site will look on mobile screens look through every element and ask yourself these three questions:

  1. Is this necessary?
  2. Does this enhance the design of the page?
  3. Does this function on a touch screen?

If you answer no to more than two of the questions above, hide or remove it from your mobile layout. Some common website functionalities, including pop-ups and hover elements, do no work well on mobile. Pop-ups are successful on desktop computers because they have space to open an element larger on the screen. With a small screen there is no room to open an enlarged element. Often with the pop-up border, the content within the pop-up is the same size or smaller than before it was opened. Without a mouse, all hover states must be accessed differently.

organos mobile website

 3. Font size

Content on a mobile website should be simple and easy to read. Ensuring all the text is large enough to read on a small screen, and has enough contrast, can make a significant difference in how the website visitor interacts with your website. All fonts vary in “x” height but Google recommends the base font size for mobile text to be at least 16px.

4. Large buttons / Click space

Easy to click buttons and links are key in a mobile website. Don’t frustrate users by making links and buttons small and hard to click on you mobile website. Plan for people to have make mistakes when trying to click on specific links and buttons. Mobile and tablet users do not have a mouse that can click on small spaces. Having multiple small text links close together is difficult to click and can cause the user to move on to an easier site to accomplish their goals.

 5. Navigation

There are two common mobile navigation styles typically used in mobile web design. The first is a dropdown menu. When using dropdown navigation, you need to make sure you have large enough click space allowing for ease of use. We recommend dropdown navigations with only one to two levels in the vertical dropdown menu. The second is “hamburger” navigation. This is the small three-line icon that opens a menu on click. Hamburger navigation is a great option for larger websites with multiple levels of page navigation. Either method is successful when implemented correctly.

[ezcol_1half]TW Lewis Dropdown Navigation Example[/ezcol_1half][ezcol_1half_end]

Capital Place Hamburger Navigation Example[/ezcol_1half_end]

6. Load time

Mobile users are mobile. They may be connected to a free low-speed WiFi or cellular service. Users get frustrated by slow loading pages and will likely go to a faster site. Every second counts when it comes to website load time. Kissmetrics reports that 47% of mobile web browsers expect a website to load in less than two seconds. 40% of users will abandon a site if it takes more than three seconds to load.

Designing a mobile friendly website is more important than ever. Take your time to think about how you interact with websites on your phone and design your website with that in mind.

 

Megan Leese | Senior Web Developer

megan leese

megan leese

Megan is director of web strategy & development, responsible for the strategy and coding of websites, emails and anything else digital that gets thrown at her. If she wasn’t a web developer, she’d probably be running an animal sanctuary.
megan leese

Latest posts by megan leese (see all)

Tags: , , , , , , ,

2 comments on “How to Design a Mobile Friendly Website”

[…] OF EFFECTIVE WEB DESIGN (Web Design)free download html templates for education websiteHow to Design a Mobile Friendly WebsiteMy WordPress WebsiteA Website Creation Guide For Creating Spectacular Compelling WebsitesPRINCIPLES […]

In the age of technology, it seems like a lot of businesses are drifting towards mobile phones. I had no idea that large buttons and links are key in mobile website design. I always assumed that you tried your hardest to make it fit on that tiny screen.

Leave a Reply

Your email address will not be published.This is a required field!

<small>You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:<br> <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Get Our Monthly Marketing Munchies!

The latest in marketing news delivered in a bite-size monthly email.
  • This field is for validation purposes and should be left unchanged.

Follow Us