Best Practices for Mobile Friendly Web Design

It’s this simple: ignore mobile, lose visitors. If your website doesn’t function and look professional on more than just a desktop screen, not only do you risk frustrating mobile visitors and turning them away, but Google’s recent search algorithm update means your site might not even show up in mobile search results. This makes mobile friendly web design a must for every business. Google reports that 58% of Americans accessed the Internet at least as often via a smartphone as a computer and this number keeps increasing. That’s why Google released a mobile friendly update to its search algorithm; this update will boost the ranking of sites designed for mobile, while effectively decreasing the ranking of unoptimized sites in mobile search results.

"Google recently updated its search algorithm to boost the ranking of mobile friendly pages in mobile search results."

Thinking in terms of just mobile is still too limited, however. The same Google study shows that 35% of Americans are now using tablets and 32% of Americans are using at least two screens to access the Internet. In addition, a comScore report from July 2014 shows that smartphone and tablets combine to account for 60 percent of digital media time spent in the US, up from 50% the year prior. This data tells us websites need to be more than just mobile friendly; they need to be prepared to function and look professional on screens of all sizes. This isn’t exactly news to most web developers, however there are many different ways to approach mobile friendly web design. Ensure you’re using best practices for your clients is important to keep their websites modern and competitive.

Using Responsive Design Over A Separate Site

Mobile best practices recommend using responsive design rather than creating a separate mobile site. Responsive design creates flexible layouts, images, and cascading style sheets for a website. A responsively designed website comes with these advantages:

• Flexible layout that detects user screen size and orientation
• Consistent and familiar user experience across browsers and devices
• Only requires one URL for all versions of the site
• No need for redirects in code

There exists a passionate community of web designers and developers who actively disapprove of creating separate websites for mobile and tablet devices. Karen McGrane, for example, an author and advocate for user experience and content strategies for web and mobile, has written about the disadvantages of forking content into two different sites.

“Whether you’re talking about content or code, what you want to guard against is creating multiple versions of your website. It’s called forking, and it’s a forking nightmare from a maintenance perspective.” - Karen McGrane

Separate mobile sites create twice the work for your agency, forcing you to update two websites with every change. In addition, creating a separate mobile website with a subset of your client’s content targeted at mobile users makes the wrong assumptions about user intent and creates the wrong user experience. Responsive design is the ideal solution - and the recommended practice by Google for mobile friendly web design.

Writing Your Content With Responsive In Mind - Not As An Afterthought

Given the statistics we presented earlier in this blog, there is no doubt that your client’s website will be seen on a variety of screen sizes - and with the smaller size of

mobile and tablet screens, space is at a premium. However, a common misstep in the content portion of a website design (or redesign) is to attempt to “squish” content meant for the desktop down to the mobile screen. As Mike Finch, a product designer and proponent of responsive design for Facebook, said in an episode of the Responsive Web Design podcast, your content in one place should be your content everywhere, just presented appropriately for its context.

What responsive design does, is it forces you to evaluate the content on your site, on your page, and say, “Is this really necessary?”

To develop mobile-friendly content, you need to consider a user’s many different screens right from the start. It should be basically the same across devices, but emphasized in different ways as needed. Developing such a content strategy should ideally go hand in hand with designing the site. In the case of a website redesign, existing content should be re-evaluated for usefulness on all screens. First, narrow down what content is essential to display on your client’s website, how much of it can be easily digested on all screen sizes, and use that information to craft concise and to-the-point content.

Creating A “Touch Friendly” Design

Make sure your design is “touch friendly”! It’s not enough for a mobile friendly website to feature concise content and scale down for screen sizes … it is also important to ensure the design can be navigated with a person’s fingers. Instead of using a deft and precise mouse, your client’s users will now be using their larger and clumsier fingers.
Consider how well your design can be navigated and clicked with a user’s fingers and thumbs.

To alleviate potential frustration, make sure to design your client’s site with those clumsy fingers in mind. A few things to keep in mind include:

• Large and descriptive buttons allow users to easily click and select options they need. Standards set by Apple suggest a “hit target” of 44 x 44 points.
• Bumping up font sizes to at least 16px and increasing the line height to 1.5 will make it easier for users to read and navigate your client’s site.
• Avoid effects that can’t be easily translated to mobile devices. Eliminating effects like mouseovers and hover effects can help make a user’s visit that much more effective.
• Pop-up messages, while often considered annoying in normal circumstances, are especially cumbersome on mobile devices. On mobile devices pop-up boxes completely interrupt the user’s natural use of the page and should be avoided.

Optimizing Images For Responsiveness (And Speed)

Images on mobile friendly websites need to quickly scale to the size of the user’s screen without slowing down the site’s loading time (mobile visitors expect a site to load in 4 seconds). There are two main methods for optimizing images for responsive design.

• The first, and older, method of scaling images is through code - forcing the image to scale with the screen size and remain in its container. This method is acceptable, but still requires the browser to download an image larger than it may need and might affect load times.
• The second method for scaling images uses new HTML markup - allowing developers to declare multiple sources for an image, preventing the browser from downloading images larger than it needs. This new markup, described in more detail in our optimizing images for responsive design blog post, is not yet supported across all browsers but can help alleviate the problem of slowly loading pages.

Of course, in addition to ensuring your images can scale across screen sizes, you should also optimize them for page speed on mobile. A common cause of slow websites is large images that need to be downloaded to mobile devices. You should carefully consider the right format, keep an eye on file size, think about resolution, and use relevant file names. Of course, don’t forget to think about whether using CSS instead of an image file is possible. You can read more about these tips in our blog detailing how to optimize images for your client’s website.

Reducing HTTP Requests & Increasing Site Speed

Another factor affecting page load times, especially on sites that are mobile friendly, is the number of HTTP requests made by your client’s site. An HTTP request occurs when a user lands on the site - the browser sends a request to the server for the files needed to load the site. The more files the browser needs to ask for, the slower the page load time, which can lead to a worse user experience and a higher bounce rate.

However, resist the urge to reduce the number of HTTP requests down to only one. Inevitably reducing a website’s HTTP requests to only one file will make that one request incredibly large and noticeably slow down your client’s site’s load time. Reducing HTTP requests is difficult to do, especially if your site relies on a lot of third parties. Based on data from HTTP Archive, the total number of requests for a single website averages 101 at last count. That number is very large and demonstrates how difficult it is to reduce HTTP requests. Despite the difficulty, it should still be a goal to reduce them as much as possible.

Minimize HTTP requests, but don’t combine all of your client’s HTTP requests into one large request. This will only further slow down page load times.

You can reduce HTTP requests by reducing the number of files (and file sizes) the browser needs to ask for. A few things you can do to help this along include the below tips. You can find additional tips for minimizing files and scripts in our Website Launch Checklist blog.

• Reduce image file size
• Minify and concatenate HTML, javascript, and CSS files. On Liquid Web’s site, for example, we inline our images in the CSS, so each image is pulled in as a part of our CSS files.

Extensively Testing Functionality & Performance

Testing is arguably the most important part of any web design process, especially for responsively designed and mobile friendly sites - and you’re probably not testing enough. Mobile devices add a level of unpredictability to site performance and you should be sure to test all aspects of your client’s site on as many devices and browsers as possible. Check out our Website Launch Checklist blog for a number of excellent browser and device testing tools, including Browserstack and Web Developer. These tools will help you view your client’s site on a variety of devices and browsers to make sure it looks and functions as it should across the board. To be even more thorough, however, you should also test the site in person on as many devices as you can get your hands on.

You should do more than just test your client’s site across devices - you should also be testing the site’s performance. At Liquid Web we use Rigor, a web performance and monitoring tool, to generate a waterfall chart of our website’s performance. Waterfall charts pinpoint which portions of your client’s site are slowing it down, allowing you to make adjustments and speed up the site.

Developing and designing a website in today’s world of mobile Internet usage demands that websites be capable of responding to a variety of screen sizes. Responsive design has been around for a few years and it’s clear that it’s changed the way websites are built. However, there are a lot of factors at play when building responsive sites! Keep the above web design best practices in mind and you’ll be sure to create websites for your client’s that will benefit both their business and their customers.

Host Your Website with Liquid Web

If you're struggling with mobile speed, Liquid Web can help. Take a look at our range of speed-optimized hosting products that maximize your load times, like Managed WordPress Hosting, Dedicated Servers, or Cloud VPS starting at $5/mo.