Grant Rowley / Posted 5.11.2017
Responsive ≠ mobile optimization
Having a responsive website is an absolute must nowadays. Over 50% of website users start their search from a mobile device (phone or tablet) and websites need to be prepared to handle these devices with a great user experience. Having a responsive website means your website looks good and works well on smartphones, tablets, and laptops, no matter the screen size. Most websites are now built with responsive web design techniques, and they are considered the standard. However, responsive design is only one step on your journey towards a mobile-optimized site.
What is mobile optimization for a website?
Mobile optimization goes well beyond the customer’s usage and interaction with the site. It considers other factors such as the size of your pages and the speed at which they load. These factors directly affect your user and contribute to the overall experience they have on your website. Furthermore, search engines are now considering these factors when ranking a site, so a slow site will quickly do real harm to your bottom line.
It is also safe to assume that your mobile visitors will have slower connection speeds than computers with broadband connections. And while a typical computer user on Wi-Fi or broadband is not concerned about the amount of transfer a website will need, mobile users are. A mobile visitor’s ability to browse and load your website depends on his or her data plan. In the United States some data plans allow for unlimited data transfer, but many limit customers to as little as 500mb of transfer data in a 30 day period. With average sites being around 2mb a data plan can be gone before you know it.
What is data transfer?
When a visitor arrives at your website, the server begins to transfer your data to the visitor’s device. This data includes styles, scripts, and any images present on the page they are browsing. You may already see the issue: visitors with small data plans can easily use up most of their data transfer allowance visiting a single page that is heavy with full-size images and large graphics. Thankfully, the developers behind the popular speed-testing site https://www.webpagetest.org/ have rolled out a new tool to show you the approximate cost to load your website based on the smallest available data plan: https://whatdoesmysitecost.com/. If your site is costly to your visitors, they may feel frustrated after visiting your site, and may plan to avoid it all together. Neither of these results helps your company's online marketing efforts.
Where do you start with mobile optimization?
When optimizing your website, start with images. These tend to be the biggest culprit weighing down a large website. Even though images can be resized through code to appear smaller in dimension, this does not change the size of the file that was uploaded. Images should be as small as possible without loss of quality. A solid content management system (CMS) will have the ability to resize and optimize your images for you. Likewise, if your site uses videos, you may want to consider if it’s necessary to load these for every user. You can make use of a call-to-action button to display any videos on your page. Mobile is a perfect platform to try out some different, marketing strategies, find what is effective for you. You may even try to use some responsive techniques to load different images, video qualities, and layouts for different devices.
Don’t forget the user experience.
Lastly, consider the overall experience for a mobile user. Users tend to behave differently on a mobile site than they do on desktop sites. A new term being thrown around with mobile optimization is “thumb friendly.” Your mobile users don’t have the accuracy of a mouse, and this means targets need to be bigger, so they are easy to tap with a finger or thumb. Likewise, mobile users are quite likely to change devices throughout their interaction with a site. A process started on your mobile site might be finished later on the user’s home computer. Keep this in mind, so that your website transitions nicely between the two environments and users don’t get lost in the transfer.
Ask your developer:
- How large is your site’s average page load? According to http://httparchive.org/, the average site size for 2017 is around 2.5 MB (2,602 kB). Make sure your site is close to the average—or below—or your potential customers will find someone else to do business with the next time they’re browsing on mobile.
- Does your site make use of a Content Delivery Network (CDN)? Many popular scripts and styles developers use for the backbone of a website can be loaded from an online source, this not only make the contents of your site smaller and faster, it also is offloading the bandwidth to the CDN server.
- Are your custom scripts and styles minified? Most of your styles and scripts can be combined into a single style or script file. This cuts down on the number of requests your pages will need to load and as a result, speeds them up.
Front-end Developer and Designer
Grant Rowley is a front-end web designer and developer at Q Digital Studio. Grant is an expert in communication design, focused on websites and web application development. Though he’s never officially taken a CSS class, this self-taught self-starter can code his way across multiple platforms.