What Is Mobile-Friendly Web Design?

Charlie R. Claywell
Woman searching web using tablet

According to the PewResearch Internet Project, nearly two-thirds of adult cell phone owners use their phones to go online and for one-third of them it's their preferred way of getting there. With so many users going mobile, understanding mobile-friendly web design is critical for web developers and business owners alike.

Elements of Effective Mobile Websites

Simply put, in order to be mobile-friendly, websites need to be fast, lean and finger friendly. Users who access your site from a phone or tablet will not wait on slow-loading images or even stick around if they cannot easily navigate with their thumbs and fingers. To keep visitors on your mobile site, eight attributes must be incorporated into your design.

  1. Streamlined design. It is not realistic to think that you can cram everything from your full web site - which is viewed on a large monitor - into your mobile site. Since a mobile device has only a fraction of the screen space of a computer monitor, you need to plan accordingly. Real estate is at a premium, so make every word count.
  2. Post all your products. This may seem to be contradictory to the previous statement, but it's not. If all your products are not available on the mobile site, a user may presume you do not offer the product. Keep all the products, just streamline the content by writing concise descriptions and reducing the number of images.
  3. Fast loading. This task is fairly easily to accomplish once the written content has been pared down to the bare essentials. Just optimize all images, icons or other graphics to be lightweight and fast-loading.
  4. Easy-to-use. Take advantage of the growing list of common tasks associated with icons to simplify using your mobile site. For example, using an icon for your navigation menu saves precious real estate and removes the needs for dozens of words. Since mobile users have smaller screens, though, all the links and navigational buttons must be large enough not only to see, but also to accommodate fingers or thumbs.
  5. Responsive. A best practice for mobile websites is to use a grid to layout the various elements so the site is responsive. The grid, and its corresponding commands and styles, allows the page to adjust to accommodate whatever device is being used. These flexible layouts often remove photos, or display smaller ones, when the site is viewed on a smaller screen. The page may also be rendered vertically.
  6. Shareable. With the use of standardized icons for social media sites, you can make content on a mobile site easier to share. Set up your site so that when user click on their favorite social media icon, a share option will appear. This allows visitors to your mobile site easily share the content with their followers and friends.
  7. Incorporate mobile-specific features. Mobile devices have some really powerful and useful features which should be used when building mobile-friendly websites. One common phone feature simplifies phone calls to your business by letting the user call you by clicking a button on your site. Another key feature is geolocation which can be used to deliver location-specific content to the user.
  8. Loads automatically. When a user visits your site on a mobile device, the mobile website should be served to them automatically. A link to the full site may be provided as an option, but the user should never have to seek out the mobile version of your site.

What a Mobile Site Is Not

Part of understanding what is a mobile website involves understanding what one is not. A mobile website is one designed specifically to serve key information about your business to mobile device users. For your design to be effective, you must realize that mobile sites aren't just shrunken down versions of your full website, nor are they the same as apps.

  • Not an app. An app has to be downloaded to the users phone or tablet, while a mobile site is viewed from inside a browser. Business owners may want to offer an app - that way you own a 'corner' of the user's machine and can push notifications to them, but creating and promoting an app is an entirely different process from designing and developing a mobile-friendly website.
  • Not a condensed version of the full website. Creating a mobile website requires a thoughtful approach to what your users will be doing on your site when accessing it via a mobile device. Consider what they will need to accomplish when visiting your mobile site and let that drive your design. Rather than trying to include everything that is on your full site, create a mobile-friendly site that meets customer needs by creating simple, intuitive ways for them to accomplish their tasks while supplying them with the required content.

Don't Forget The Big Three

In the rush to get a mobile site out to users, it can be easy to overlook your three most important pieces of information: (1) location, (2) phone number and (3) contact information. Although including this information is an important practice for full websites, it is imperative for mobile sites since users may be using their phone to browse your site to find out how they can contact you.

What Is Mobile-Friendly Web Design?