Most marketers think they’re hiring web designers to design an aesthetic.
But the savviest practitioners know they’re not.
They’re hiring experts to think through design interactions. The way people will arrive, hunt, look, and browse to ultimately find what they’re looking for in the most pleasing way possible. (Also, a few conversions along the way would be nice.)
As mobile users outnumber desktop, the importance of designing experiences on fluid surfaces becomes even more critical.
The trouble is that trying to transform an outdated, legacy website into a desirable mobile experience is problematic, if not impossible.
Compare that to a ‘mobile-first’ site which, from Day 1, is created to leverage the extra capabilities of mobile devices. But more importantly, also limit or mitigate the significant drawbacks of a smaller screen and limited processing power.
Here’s why that distinction is important, and how you can take advantage of it.
The legacy website conundrum
Recently I had a client who was approached by Google.
They offered to build them a completely new mobile site – gratis – because their legacy site wasn’t responsive. (Oh, almost forgot to mention, they’re a big AdWords advertiser too.)
The result was good. The work was clean and fast. Also, free.
But my client turned their offer down and hired us instead. Paying, well, much more than free.
Google’s emphasis on mobile-friendly design served as a catalyst for an increase in the number of mobile sites being added to legacy, outdated websites (built years before mobile usage was relevant).
The problem is that adding a mobile version to a legacy site doesn’t fix many of the underlying structural or architectural issues that are creating difficult mobile experiences in the first place.
Trying to ‘adapt’ an old infrastructure for new devices and technology is like jamming a square peg in a round hole. There are so many elements — design, IA, speed and other — that when formatted and compressed, get kinda… meh.
The challenges with mobile devices are well documented (seriously — it’s even in ‘Dummies‘). The screens are too damn small. Processing power is limited. Links and other important elements are too close together, making it difficult to select what you want while avoiding every other option.
In what now seems prescient, Bruce Lawson wrote in Smashing Magazine way back in 2012: “For a maintainable, future-friendly development methodology, I recommend that your default approach to mobile be to design one website that can adapt to different devices”.
Being on top of a fluid grid system allows for collapsable layouts, enabling a site’s content to have the best chance at success regardless of device. We’ve all been on sites that required intense left-to-right scrolling because the content or images haven’t adjusted. Or we’ve all seen when sites reach a breaking point on mobile that render them almost useless.
However beyond the surface, there’s a deeper rationale, again outlined years ago.
The first point, is that mobile requires focus. You simply don’t have room for all the extra crap that every single department head wants on the site. Starting with mobile creates a tremendous constraint that forces you to focus only on the essential, high-priority objectives.
The second is that mobile devices present an untapped opportunity to utilize extra functionality that’s unavailable for desktop users. The smallest examples including your real-time GPS or the advances being made with applications like Apple’s Health. Even the gestures you can use on mobile present a more dynamic world that leaves the mouse button behind.
All of this sounds great. Thanks for the history lesson.
But WTF does it have to do with SEO?
$$$.
There are many advantages to starting from scratch when building an optimized website. But two of the biggest that affect conversions and SEO — your information architecture and site speed — stand to gain the most from a ‘mobile-first’ approach.
Optimizing IA through mobile-first
According to UX Booth, information architecture (IA) is concerned with the movement and interaction between a user and a system, with the goal of inspiration, utility, and delight. It connects people to the content they are looking for in an interactive and pleasing way.
image source: User Allusion, Murray
Tip #1: Design for use
Are Halland, an Information Architect, came up with a term to help information architecture influence your content strategy and path: core model. The core model puts the focus on designing a website from the inside out, emphasizing where your business goals and what your users need to get out of your site overlap.
Practically this means mapping content based on what’s most important (business objectives) and relevant (user needs).
Start with determining your goal. How is site success measured? What are you hoping to gain?
Compare that with who you’re trying to reach (or your buyer personas). How you deliver information is largely dependent on audience type, so content mapping (and organization) is based on their goals.
After laying the groundwork, you can begin to assess and integrate the different ways users find content. According to Web Designer Depot, there are four ways users seek information:
1. Known Item: the user knows what they’re looking for and how to describe it. For these users, you’ll need well-organized and logical information. And a search function that offers relevant results.
2. Exploratory: the user has an idea of what they might need to know…but don’t know where to start. For these users you’ll need a search function that auto-suggests search terms (based on what the user is typing) and a search function that suggests related terms.
image source: etsy
3. Unknown: the user doesn’t know what they need – they are often simply browsing. For these users you’ll need to guide visitors through content and to give users options, helping them narrow down their search.
image source: New York Magazine
4. Re-finding: the user is looking for something they’ve already seen… but don’t know how to find it again. For these users, you’ll need to have a function that saves “recently viewed” items, as well as interactive tools for visitors to “save for later”.
image source: Anthropologie
Tip #2: Keep information organization simple (and flat)
Your primary IA goal is to create a structure that makes it easy for users to find what they’re looking for. Now that you know the four ways your users will be seeking information, here are a few tips on information organization.
Start with conventional (not clever) labeling. There’s a reason ‘About’ or ‘Contact’ is so prevalent: people are used to it, they know what it means, and they know where to look for it. Breaking convention by using a phrase like “Hit Us Up!” or “Get in Touch” may sound unique, but it will confuse most of your readers (especially on non-traditional mobile screens).
The more information you have, the greater your organizational structure needs to be. Storyboarding can help. You need to be able to visualize how your site will look, test driving its usability. Online tools like AWWAPP or RealTimeBoard can help.
A flat site architecture also makes sure the most important information is only a few clicks (or taps) away (within 2-3 ideally). Otherwise, you end up with fewer top level categories, requiring more clicks to reach subcategories.
(image source: ZoomHead)
A flat architecture makes information more easily accessible, easier for search engines to crawl and index, while also providing a better user experience.
(Caveat: The only time deep architecture works better is with very large sites that have a lot of subcategories. If you have a lot of information, creating a deep architecture will make all of the information easier to navigate and it will create a less cluttered landing page.)
(image source: Content Standard)
Last but not least, map out your hierarchy. Based on your core model, determine what elements need to be forefront, and what elements can hang out a click or two into your site.
Another SEO bonus comes from determining your website hierarchy ahead of time so that you can map out your keyword hierarchy.
Tip #3: Design for conversions
Everything done so far is focused on increasing conversions.
However, the final IA tip is that conversion rates tend to be higher when your mobile site is more easily digestible (i.e., simple, straightforward, and easy to navigate).
HubSpot tested this by conducting a free ebook giveaway experiment in July 2015. By switching to more straightforward layouts, they decreased bounce rates by an average of 27%.
‘Solve for the user’ sounds trite, but it pays.
That means straightforward, easy terminology. While also keeping your links, menus, search, and filter options simple. Information should be easily accessible. Less is more when streamlining menu options for quick navigation. Especially when you’re dealing with important elements, like selecting one link instead of the other with a fat thumb, which can pose usability challenges that simply don’t happen on desktop.
(image source: Inology)
And simplify number input. Ain’t nobody got time to enter a 16-digit credit card number. Make it easy for your users to convert by simply giving them the keypad to type their credit card numbers.
Mobile speed — the silent conversion killer
Speed has one of the biggest bearings on usability and conversions across devices.
But on mobile, it’s especially problematic.
Limited processing power, lower connection speed, and spotty service present unique challenges to mobile devices that most desktops don’t experience.
How that translates, is through decreasing mobile conversion rates on purchase, losing these visits to competitors, while also diminishing brand value in the process.
Of the 87% of US citizens who own mobile devices, 90% use their devices to go online. Most staggering though, 74% will leave your mobile website if it doesn’t load in 5 seconds.
(image source: Kinsta)
The best place to start to in order to speed things up is decreasing page loading times.
Tip #1: Clean up your code
Pardon the obvious, but get started by cutting out excess space, indentations, and line spaces will reduce the size of your site’s core and front-end files. Especially any gibberish created by your CMS.
Believe it or not, this includes 301 redirects to a point. While they’re the best SEO friendly option, excessive 301 redirects can still cause confusion. Hunt down your redirects with Screaming Frog to see how you can actually improve the site’s structure (see above) and do it properly to reduce your site’s avoidable redirects.
Another potential problem area happens on WordPress site’s with too many (or low quality) plugins. Using something like the Plugin Performance Profiler to determine if any of your plugins are slowing down your site can help. (Wait — add a plugin to see which plugins to remove? I know.)
Managed hosting, done properly, can also help WordPress sites (or more specifically, their owners) keep things running quickly by taking care of the heavy lifting. The best in the business (depending on locale and preference) are WP Engine, Kinsta, and Pagely.
Tip #2: Minify, cache and compress
Javascript files take much longer to load than most site content. They also selfishly insist on loading first, causing significantly lower page speed load times. Google suggests the removal or deferral of all Javascripts that get in the way of loading any above-the-fold content. By doing so, the rest of your web content will be able to load first and the files will only need to be loaded one time, making each return visit that much quicker.
Check out the Varvy’s Javascript Usage Tool to see how your site is currently utilizing javascript.
Unless your site is being updated significantly every five minutes, you should be using a content management system (CMS) that will cache your pages. “Caching” saves your web pages so they don’t have to be regenerated every time. WordPress offers some great cache plugins, including W3 Total Cache and WP Super Cache.
GZIP compression will cut your page load time significantly, especially benefiting mobile devices and desktops with poor internet connection. While it’s not the best compression method, it is the most compatible across servers, is quick, and the ratio is decent.
Head over to GIDNetwork to test the compression of your site. GIDNetwork will tell you if you’re site’s already been compressed, they type of compression, size and compression percent. They’ll also give you a list of ways to decrease page load time from most to least crucial.
Tip #3: Optimize images
While HTML may enable you to convert a large graphic into a much smaller graphic, it isn’t necessarily taking up less server space. And when it comes to page load time, server space is really what we care about. Make sure to optimize your images first. Then you can adjust the height and width.
Optimizing images can result in the largest byte-saving, performance improvements for your site, and as Google puts it, “The fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen”. There are a number of applications and graphic programs that can be used to optimize your images, including Photoshop, Fireworks, and SmushIt.
Next, you can deliver those images via a CDN, or content delivery network, that works by delivering web pages based on a user’s geographical location. By using a CDN such as CloudFare or Brightbox, you are ensuring quicker connection to a server near a user’s geographical area. This means that you have a better chance of your site loading faster.
Looking for even more tips on how to make your page load time faster? Check out Google Developer’s PageSpeed Tools and WebPageTest’s Analytical Review.
Conclusion
The best site improvements don’t come from checking off to-do list items from a tactical perspective based on artificial deadlines.
Yes, a mobile version of your legacy site is better than nothing. Obviously. But in most cases it doesn’t go far enough. At the end of the day, you’re still living with significant issues that are affecting mobile experiences (which in turn, impacts conversions).
A “mobile-first: approach is ideal, because it’s easier to address the most difficult aspects — like your information architecture and speed — going from mobile to desktop (rather than vice versa).
In an ideal world, the best investment of time and money is to fix the problem once instead of cobbling together band-aids as an afterthought.
