The number of users accessing the Internet with mobile devices, such as smartphones and tablets, is skyrocketing. As more users come to your site via mobile, it’s vital to optimize your display for smaller screens to create a mobile responsive website. While mobile-friendly sites were once a novelty, such designs are essentially mandatory today.
Search engines are requiring mobile optimization. Google is famous for penalizing sites that aren’t mobile-friendly by lowering their PageRanks. Therefore, it is crucial for your site to perform well on mobile. Digital growth comes almost exclusively from mobile devices at a rate of 31% per year globally. With desktop computers becoming secondary points-of-contact for many users, you absolutely cannot afford to neglect your mobile audience.
The Importance of Mobile-Friendliness
There are several issues facing the user when accessing a site that is optimized only for desktop/laptop computers:
- Slower response times: Desktop sites tend to be larger in size than mobile sites. This, combined with the fact that most mobile devices run on slower networks, results in longer page load times. Many users are impatient. If a page takes too long to load, they will navigate elsewhere. If your site takes even Desktop sites tend to be larger in size than mobile sites. This, combined with the fact that most mobile devices run on slower networks, results in longer page load times. Many users are impatient. If a page takes too long to load, they will navigate elsewhere. If your site takes even four seconds to load, you will have lost 25% of your viewers.
- Difficulty in using and viewing the site: Displaying a large site on a small screen can result in the whole page being shrunken significantly. In order for the user to view all of your content, he or she has to zoom/pinch and scroll sideways. These are actions that frustrate many users. Conversely, mobile sites are immediately readable and usable for the user, which leads to lower levels of page abandonment.
Given these two issues, implementing a site optimized for mobile audiences should improve web performance. In addition to your site being easy to use on smaller screens, the simplicity of your page should also improve load times.
Implementing a Mobile-Friendly Site
There are three ways to ensure that your page is optimized for mobile devices:
- Implementing responsive design: Your server delivers the same set of HTML code on the same URL regardless of the user’s device type (desktop, tablet, mobile, and so on). However, the site will render differently depending on the device’s screen size. The design of your site may change based off the device a visitor is using (all content remains identical). This is done using changes to your CSS, especially with media queries, which are conditional statements that indicate to the browser which sections of your CSS apply with which size viewports.
- Utilizing dynamic servicing: Depending on what information your web server receives about your user’s browser and device, your web server delivers a different version of HTML. However, your site would use the same URL regardless of the user’s device type. The user’s experience with your site may differ depending on the device he or she is using. For example, your desktop-sized site might include a large video on your splash page, whereas mobile users will be directed straight to your home page. To implement dynamic servicing, you would have to host several sets of HTML on your web server/CDN, with each file corresponding to a different size viewport.
- Using mobile templates: Using separate URLs, your web server delivers a different set of code based on the user’s device size. Based on what the web server knows about the user’s browser/device, this happens using HTTP redirection.
Google recommends mobile-first responsive design (as opposed to mobile adaptive design) as the best practice, since it prefers to index one site over many. As such, this article will focus primarily on this option. This is because serving your site from a single domain builds brand loyalty (which is not the case with dynamic servicing) and eliminates the lag time due to redirection (which occurs when using mobile templates).
Considerations for Building a Mobile Responsive Website
When designing for a mobile audience, there are additional things to consider on top of general web design best practices. Despite the growing size of mobile devices (compare the iPhone 5 with its 4” screen to the iPhone 7, with a screen size of 4.7”, or the iPhone 7 Plus, with a 5.5” screen) and its corresponding increase in screen resolution, these devices do not compare to laptops and desktops in terms of display size and quality. As such, mobile-friendly pages are typically simpler and have fewer features than their larger counterparts.
Rather squeezing all of the content on your desktop site onto your mobile site, customize what you display to your mobile users. There may be instances where you can’t include absolutely every piece of information, but consider the essentials to present to your users. For example, if your user can sign up and perform a particular action on your desktop site, the user should be able to do the same thing with your mobile site.
Additionally, take care to implement features specific to improving the mobile user’s experience. Consider using buttons and links large enough for the user to click on without accidentally tapping something else. Create forms that are easy to use with small “keyboards,” and use fonts large enough to be readable for all viewport sizes.
Page Load Speed
Mobile devices typically run on slower networks, so speed is of the essence. Some ways to improve your site’s load times include:
- Reducing the number of HTTP requests required. While mobile users tend to behave as they would on a laptop/desktop, their mobile devices and networks typically cannot handle the same volume of work. As such, you should attempt to reduce the number of HTTP requests required for your site. Reducing the number of requests will provide the requisite amount of information for your user to accomplish his or her goal.
- Optimizing the images you use. While you may be tempted to increase the size and number of images you display, this might not be such a great idea. Bandwidth is still limited for many users, so you should compress and provide the smallest images possible.
With today’s ever-connected user base, your site must cater to viewers utilizing devices with screens of all size. Doing so is no longer optional like it once was. Mobile responsive sites are a critical part of a user’s web experience. Your mobile site and its web performance can influence whether or not you get repeat visits.
To determine what steps you should take to improve your user’s experience, on both desktop and mobile,
E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online. However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...Read More
Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design for an...Read More
Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...Read More
Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...Read More