In a previous blog post we talked about why ensuring that your website is mobile-friendly is mission-critical. If you haven’t read that blog post yet, you can find it here. But now that we’ve proved that mobile-friendly is vital to your success online, we need to understand what it means to actually make your site mobile-friendly.
A Quick Introduction to Responsive Design
If you ask a dozen web professionals what it takes to make a website mobile-friendly the most common answer is “responsive design.” Simply stated, responsive web design is the proposition that a website’s display of layout, positioning, and user experience should be flexible to change depending on the kind of device the visitor is using and the size and orientation of the display of that device.
Said another way, responsive design means that web content shifts position and scales differently and navigation menus are changed depending on whether the visitor is accessing the site on a computer, tablet, smartphone, or any other kind of device being imagined in the future engineering labs of Silicon Valley.
This is important because people use devices in different ways and for different reasons. And sometimes they hold their devices vertically (portrait) and sometimes they hold their devices horizontally (landscape). Doing your best to ensure that all your site users have the best experience possible means that they will stay on your lite longer and visit more frequently.
Fortunately, this web design philosophy has been around long enough now that the principles responsiveness are built into nearly all modern website platforms and Content Management Systems (CMS). You still need to ensure that responsiveness is implemented properly. But if your developer is a professional, they should know what to do from the start.
Responsive Is Not Enough
Once you have a responsive business website, you are only half-way done. To ensure that your site is mobile-friendly you need to think about mobile every time you make content to put on your website. By always “thinking mobile” you will change the way you choose and edit images, it will influence the way you write, and it will naturally limit the complexity and number of widgets and apps that you use.
Keep Mobile Website Visitors Top-of-Mind
There are a several things that every website owner should always keep in mind when considering your mobile website visitors.
Customer Mobile Data Plans
When your customers visit your website on mobile devices, they are using a combination of WiFi and cellular data plans. Networking giant Cisco released recent statistics suggesting that users are accessing via cellular data connections ~40% of the time. That means that every kilobyte of bandwidth required to access a website costs money.
Users quickly learn to manage their data usage by limiting the sites and services that take up too much bandwidth. Since social media sites and apps live and die by mobile devices, and they have become incredibly good and at optimizing their services for mobile platforms. We can take a lesson from their experience.
Logos and line art are usually vector images that are very efficient. But one of the biggest drivers of data consumption on web sites and apps is photo image file size. It’s a bit of a Catch-22 since modern cell phones and other mobile devices have high resolution screens that show incredible detail and color, they make big, high-resolution images look amazing.
But those high-res images can take up megabytes of bandwidth each time they load. Twitter has addressed this by limiting image sizes by default to 1MB or less and other social networks automatically “step-down” the size and resolution of images to save bandwidth.
What You Can Do
The good news is that you can optimize images for both quality and size. A good rule of thumb is to make the “native resolution” of your header images nine inches wide at 150 dpi resolution. For product and other images, use the same settings and make the native width five inches wide.
Your images will look great on all mobile devices and still have a good punch on all but the largest computer screens. The best part is that each image will only consume a few hundred kilobytes of bandwidth each. You will also get the side benefit of increased page-load speed, which is also vital for mobile devices. So let’s spend a minute talking about that.
Page-load Speed
When someone is using a computer to access your website, they are usually plugged in to a home or business network. These days, most home and business websites are fast enough to handle complex websites fairly well. But as we said before, mobile devices are mobile. Your users will be accessing your site from coffee shops, commuter trains, restaurants, hotels, and even their backyard over a wide variety of WiFi connections and cell towers. Sometimes the connection will be fast and strong, other times it can feel like 1990’s dial up.
This is problematic because modern internet users are remarkably unforgiving. According to industry benchmarks provided by Kissmetrics, 40% of users will abandon a website that takes longer than 3 seconds to load no matter what the reason or what device they are using. There is no getting around it – everyone should worry about page-load speed and it matters most on mobile.
What You Can Do
The five most common issues affecting page-load speed are code, widgets & services, advertising, and delivery. Let’s talk briefly about all of them.
Delete Unneeded Code
Your website looks great on the screen. But if you saw the HTML, Javascript, and programming that makes it look that way you would see hundreds of lines of text and symbols. This are the basic instructions that browsers follow in order to display your website. The fewer lines in that computer code – more efficient – the faster your page will load. But believe it or not, bad code is not the most common problem these days. It’s complexity and add-ons.
Remove Idle Widgets and Services
If a website is loading too slowly due to code, it is most often because there are simply too many things going on. Each widget, plugin, module, analytics service, and tracking service added to a page adds time to the page load. This is another Catch-22 because widgets and plugins add functionality and modern eCommerce and digital marketing team use analytics and tracking tools that can be vital to success.
The key is to be extremely disciplined in limiting the number of these kinds of add-ons and services that you have installed on your website. And if you want to use a new analytics package, then remove the previous one. That seems logical, but I have seen websites that have actively running analytics, widgets, and plugins that haven’t been used by anyone in a long time. But because they’re installed on the site, they take up valuable time and slow-down page load even if no one sees the results.
- Consider these rules of thumb:
- If a widget or plugin is not being used by visitors or is no longer visible, it is probably costing you money. Take the time to remove it from the pages where it is not effective.
- If an analytics service has not delivered an actionable statistic in 90-days, you probably don’t need it. Remove the related code from affected pages.
- If a tracking service isn’t delivering a positive ROI, it is just taking up resources and time. Discontinue the service and reevaluate your marketing flow.
People are quick to add new code to websites to try out new things. This should not be discouraged. But I’ve seen hundreds of companies that forget that when an experiment does not yield results, your aren’t done until you remove the code from the pages in your next publish.
Important note: Sometimes widgets and JavaScript interoperates with other services on your site. We always recommend that all additions and deletions of code follow website admin best practices, include established backup and restore procedures. If you need more information, just let us know.
Is Advertising Worth It?
There fourth huge driver of slow page-loads is one we’ve all experienced – ads. Contextual ad services try to be super-efficient, but they have to do a lot of heavy lifting. When a visitor arrives at a website they’re identified via IP address or website cookie, the service calls the tracking database to find relevant ads, then it calls the ad server for an ad to display. This process can add 30% or more to page-load times. If a user is on a mobile device in a low-bandwidth service area it can make for a VERY poor experience.
If your business depends on ad revenue, this might be unavoidable. But we have often discovered that business think that ads are going to make them a fortune in extra revenue, only to discover that it generates pennies. If you can remove ads from your site, we say do so. If you truly need the ad revenue, limit the number and size with your ad delivery service so that your core business is not impacted.
Use a Content Delivery Network
There are some exceptions, but most professional hosting services deliver good connectivity these days. The web hosting business is very competitive and serving up websites quickly and reliably is vital for them to survive. So we are going to set aside speed-testing individual hosting companies and platforms for the moment.
But remember that we are taking about making your website “mobile-friendly.” And – as we discussed – the trouble with mobile users is that they’re mobile. Even if you’re a local business, your customers might want to access your website or services from just about anywhere. I do a lot of traveling for work. I have made restaurant reservations in my hometown in the US from Germany, I have paid my local bills from a hotel in Thailand, and I have ordered flowers for my mother’s birthday from an airplane over the Atlantic Ocean. All online.
So once you’ve taken care of images and code, I always recommend that business websites use a Content Deliver Network (CDN). A CDN “remembers” your website and pushes a version of it out to servers located in strategic locations across the country and around the world (the technical term is “caching”). When a remote or mobile user goes to your website, they are rerouted to the nearest cached version of your site, greatly speeding up page-load. It’s pretty slick.
CDNs used to be expensive and only for big companies. But now there are super inexpensive CDN services that are exceptionally easy to set up. Some even have free versions for small business sites and don’t charge anything at all until you grow and need more sophisticated services. My favorite of the moment is CloudFlare, but there are several options. The point is that it if you are a small business you can have world-wide page-load speeds that rival the largest companies for little or no cost.
Why wouldn’t you do it?
A Brief Word About Words
When you are reading large amounts of text online, it can make the eyes blur and the mind go numb – especially if a block of text takes up the entire screen while you are scrolling. It seems like a simple thing, but if you are a business owner, you might have a lot to say about the business because you are passionate about it.
That’s OK. Say what you need to say. But say it as succinctly as possible and keep the paragraphs short and sweet. We think that the optimal paragraph size for mobile viewing is between 50 and 70 words on average, with no paragraphs longer than 100 words. If you are reading this article on a mobile device, you might notice we followed our own advice.
If you follow this advice too, your website visitors will not have to face a wall of text and they might read more of what you have to say.
The Basics of Mobile Friendly Websites
These are the basics that will make your website mobile-friendly. Following these simple rules will not only increase traffic and time spent on your site, it will reduce your bounce rate and yield more engagement and sales.
If you have any questions about making your website mobile-friendly, are interested in more advanced techniques to improve the mobile user experience, or need help implementing things, just let us know. We are always happy to help.
Thanks for reading.