Everybody’s talking about it and everybody wants it – mobile-friendly browsing.  It’s 2020, people! We’ve reached a point where the online community is looking for quick loading times, device-friendly navigation and easy scrolling on their phones and tablets.  Never before has web browsing on-the-go been more important.

Sure, I’m writing this on a laptop, but I can’t remember the last time I just “surfed the web” from a device with a physical keyboard.  If I can’t view it on my phone or tablet and literally thumb through the site or article on my touchscreen, then I probably won’t read it, to be honest.

I’m not alone.  Did you find yourself nodding your head as you read the above paragraph?  Probably so! We all want the world’s information to be readily available on any of our mobile devices.

How to Make Your Website Mobile Friendly

So we know readers demand it, but how do we supply it?  Mobile websites are all about accessibility. That means being able to access a site’s information and features wherever whenever.

There are several points that play into this.  However, nearly every one boils down to addressing one of these three aspects of mobile optimization:  responsive web design, streamlined navigation and site speed.

Responsive Web Design

Responsive navigation simply means having a user interface that is flexible and can adapt to different devices’ screen sizes.  I mean seriously, what’s worse than looking at a desktop site on a smartphone? The text is small and the buttons may be hard to tap on, as the site is expecting to be on a large monitor.  A tablet, with its larger screen, can get by with less optimized sites, but there’s always a way to make things easier for your viewers.

A responsive layout can be achieved via “fluid grids” set up in your site’s CSS, or flexible visuals via self-resizing media containers.  Many premade WordPress themes and website designs come with built-in mobile responsiveness through use of the Viewport meta tag.  These three options are building in necessity as time goes on.

Streamlined Navigation

Outside of general layout lies the concept of responsive navigation menus.  Some would argue that this falls under the umbrella of responsive web design, but I feel it deserves its own category as it involves its own solutions.

Instead of an upfront navigation bar that you’d see on desktop computers, perhaps you can opt for a hamburger menu.  For those who are not in the know, a hamburger menu is a site (and app) menu that folds in and out of view. It is hinted at with a button that displays three horizontal lines stacked on top of each other (a primitive depiction of a burger, I suppose).  Not everybody is a fan of this navigational phenomenon, but it definitely holds its weight in the mobile optimization game.

Alternatives include slide out menus you access by swiping, tabbed sections that float across the top or bottom of the screen, and navigation menu items that collapse out of view based on screen size.  UXPlanet.org goes into deeper detail about these alternatives that can really make your site’s mobile navigation menu a top notch solution to your readers’ mobile browsing woes.

Site Speed

Speed is a crucial element of your site.  This is true for mobile browsing, as well as browsing on desktop or laptop computers.  This has been true since the dawn of time (the world started August 6, 1991, right?).

Mobile browsing, however, has led to an “I need it now” culture.  We have grown increasingly impatient when it comes to consuming information.  Google has found that 53% of mobile visitors leave a site if it takes longer than three seconds to load.

You can take control of your site speed through various methods, but for the sake of this article, we’ll focus on a handful of common issues:  file compression, reduction of redirects, code minification, caching and content delivery networks (CDNs).

It’s no surprise that compressed files will be smaller and easier to load quickly.  This includes images, videos, audio files and the like. Less redirects on a site are also a seemingly obvious choice after consideration. Removing steps visitors have to go through to their final destination is always an ideal move for a developer.

Code minification is a big term that refers to reducing the amount of clutter in a site’s source code.  Reducing unnecessary characters means less data to be processed, leading to faster load times. If it’s easier on the machinery, it’s likely going to be easier for your viewers – unless they’re wanting to read your code manually, of course.

Caching has been a word on people’s tongues for a while.  Yes, browsers have caches. These caches help visitors through site navigation as they will have elements of frequently visited pages saved like memories for subsequent visits.  Though, something that isn’t talked about nearly as much outside of developer circles is the concept of server caches. Storing large or frequently accessed files in a cache on your server will keep them at the ready for visitors new and old.

Segueing out of server caching, comes the almighty content delivery network!  Instead of straining your own network with delivering content from server to user, think of CDNs as outsourced file delivery workhorses.  Multiple servers are distributed throughout a designated geographical space that cache your files and keep them at the ready for site visitors near them.

Check out some popular CDNs in use today to help lower load times.

Top Three Cases of Mobile Optimization

I’ve been digging and digging for what I think are some of the best cases of mobile optimization.  My journey focused on finding sites that clearly worked on their responsive web design, site speed and navigational ease.  Check out my findings below…

Evernote.com

Evernote.com was a pleasant experience.  At first, I wouldn’t have thought to look at this site.  As they’re a software company, my interaction with them would primarily be handled through their iOS app.  However, I decided to check them out when I saw that it was in the top five mobile-friendly sites according to MockPlus.com and HubSpot.com.  HubSpot, specifically, is a service I have grown to know and trust when it comes to learning about web development best practices.

Sure enough, the site is easily accessible with its hamburger menu that floats at the top of the screen.  The menu button disappears as I scroll through a page, allowing me to utilize my whole screen to see the content Evernote wants me to see.  While the minimalistic user interface definitely helped my ability to ingest the site’s content, it received strong reinforcement through its simple aesthetic – nothing too flashy and no cluttered sections of the site.

The one complaint I have (I’m not a UX designer, so you may have more) was the slightly slow loading time, but it wasn’t anything to complain about.  I was able to get where I wanted to go; just had the chance to take a sip of seltzer water before I arrived. That being said, it still passed Google’s mobile speed test of loading in three seconds or less.

Etsy.com

The beloved artisan-heavy marketplace Etsy.com is by far one of the best mobile sites I reviewed while creating this list.  This site loads quickly, relies on a discrete hamburger menu to aid in navigation and uses a smooth swipeable carousel to show off product photos.  Quick load times surely reinforce this site’s position among the best. It’s reactive to your screen size and works to give you the best experience it can, regardless of your device.

This site is also featured on the similar, but longer, list of top mobile-friendly site lists compiled by our friends over at HubSpot.com.  Etsy.com appears on several other services’ lists including CrazyEgg.com and SEOPressor.com.  These companies were built to help in the managing of your site from search engine optimization to content management system solutions.  It’s safe to say they’re probably on the right track when it comes to naming sites that are knocking it out of the mobile optimization park.

Airbnb.com

This site takes the cake and the throne to eat it on.  Airbnb.com blew me away with its navigation, load time and phone-friendly functionality.  It was brought to my attention by lists of mobile optimized sites written for MockPlus.com and SEOPressor.com.

As I journeyed through the site and took a scroll through its pages, I actually forgot I was on Safari.  Granted, I don’t spend a lot of time on the Airbnb mobile app (my girlfriend plans most of our lodging for trips while I find the bars and food), I genuinely began to think I was sifting through the standalone app.

I suppose creating a site with mobile friendly design could mean imitating app experience and feel…  I mean, it won me over, but not everyone’s the same. Surely, there are those out there who would prefer to keep it all geese and ducks, online and in apps, respectively (you know what I mean).

Notable Mentions

Zappos.com

Zappos.com was expectedly nice on my phone.  The site loads quickly and is well organized.  It’s easily navigable through its product filters and large icons/buttons.  The buttons are a bit of a double-edged sword, however, as the site seemed cluttered and displayed a lot of options in a relatively small area on some pages.  The swipeable carousel to show off products was clunky and not as smooth as other retailer sites I’ve checked out in my research.

Typeform.com

I was blown away by Typeform.com and enjoyed the site.  I actually enjoyed just being on the site… just looking at it.  However, when I was looking at templates they offer, I discovered the hamburger menu doesn’t load correctly on every page.  As the main navigation tool of the site, I was expecting it to load the same way globally, but was caught off guard when I found it occasionally struggling to display every link.  Other than that, the site was flashy, smooth and minimalistic. I was into it.

Takeaways

Let’s go behind the scenes now that we’ve gone through what goes into optimizing a site for mobile devices and my survey’s results.

First off, needless to say, there are a lot of websites out there.  To narrow down my search and create a place to start, I first Googled other lists that were created with the same goal in mind.  Plenty of compilations were discovered, but I wanted to find the best of the best.

I brought my collection down to five survivors.  You’ll find a majority of them referenced throughout this article, but I built off of the work done by fellow mobile web sleuths at NeatDesigns.net, MockPlus.com, SEOPressor.com, CrazyEgg.com and HubSpot.com.

From there, I took the sites that appeared in multiple lists and prioritized them to review first.  Now keep in mind that I’m not a web developer with decades of experience in coding, nor am I well versed in the labor of creating responsive designs for mobile devices.  I work in marketing for a web development and inbound marketing agency. I also consider myself a denizen of the web (probably much to my parents’ chagrin).

To that point, I think that makes my views more relatable to you than those of anyone who works as a web developer.  I think my findings are solid, but you may not, and that’s natural. The key takeaway here is that mobile users look for three key elements on the mobile version of your site: responsive web design, fast load times and intuitive navigation.

If you’d like to reach out to me in regards to this article or just to chat about mobile optimization, hit me up on Twitter at @DCDevShop.