WHITE PAPER: RESPONSIVE WEBSITE DESIGN
Introduction: Why Responsive Design Is Essential for Your Website’s Success
Leading search engine research website Search Engine Watch cites a study by Telmetrics and xAd which notes 46% of all searchers now exclusively use a mobile device to perform internet research. Research by Nielsen shows 77% of all mobile searches happen at home or work – even when a desktop or laptop PC is readily available! A study by the U.N. recently revealed 6 billion of the 7 billion people on earth have access to mobile phones, giving the earth’s population more ready access to cellphones than toilets.
These statistics clearly show that it’s important for your business to have a website that is easily found and used by mobile browsers.
But here’s the catch – a mobile device’s screen, whether it be a smartphone or tablet PC, displays a website differently than a laptop or desktop PC. Additionally, users navigate with their fingers, which is a vastly different exercise from navigating precisely with a mouse.
At a high level, what this means to you is that your website has to be designed to provide a pleasant user experience for all people who visit – laptop, desktop, tablet PC, and smartphone users.
Past Solutions to this Conundrum
In the past, one solution many companies implemented was to design different versions of the same website for various user types. However, this practice leads to a couple of logistical issues:
• You have to pay for multiple web designs
• You’ll have to run separate SEO/internet marketing campaigns
• You end up spending much more time and money than is really necessary
From a business perspective, it makes very little sense to design multiple versions of the same website.
The Modern Solution: Responsive Web Design
“Responsive web design” sounds complex, but it’s very simple in nature. What it means is that yourwebsite is designed in such a way that it displays properly on all major types of devices, and is fairly easy to use on each. Instead of multiple web designs, many SEO campaigns, and time and money gone to waste, you have one simple website design to monitor. Most of the complexities must be left to your web designer and web developer.
Additionally, if Apple develops another innovative device everyone wants, or if something like Google Glass becomes used by mainstream society, your website will be fully prepared to accommodate right away.
Finally, if you’re not convinced responsive web design is the route to go, be aware Google itself recommends it. And “recommendation” may be a light term. Google also gives better search rankings to websites that use responsive web design than websites that don’t.
What to Expect Throughout the Rest of This Document
In this whitepaper, we’ll delve much further into responsive web design, why it works, how to make the best of it, and some things to consider before diving in head-first.
Top 8 Benefits Offered by Responsive Design
Now you know why responsive design is important for your company’s website to have. But what benefits does it really provide to you?
Let’s talk about eight of the most important ones:
1. Increased sales –This is the one you’re probably thinking about most. By accommodating all users on all major types of devices, you make it easy for your visitors to buy from you. In addition to the responsive factor, a new, sleek web design shows you care about your business and take your online marketing efforts seriously – and your visitors will notice. 2. Easier maintenance – The alternative - maintaining multiple websites for different devices
convolutes your design and maintenance processes. With a single design, updating content is much easier, and it’s simpler to coordinate your online marketing efforts.
3. Analytics are easier to track – Could you imagine tracking analytics for the three different visual versions of the same website? What a nightmare! If you use a single responsive design, you will have an easier time understanding visitor behavior.
4. Enhanced user experience – If you decide to just have a single version of your website optimized for desktop users, you seriously disappoint the mobile crowd. They need big text to read on their smaller screens, large buttons to more easily navigate with their fingers, and shorter pages because they don’t like to scroll.
5. You save money – This is a pretty easy one. By designing three versions of the same website, you greatly increase your design costs, which aren’t cheap in the first place. Plus, you have to also factor in changes or maintenance you need to perform down the road, times 3.
6. More visitors – We’ve already discussed the fact Google gives better search rankings to websites that feature a responsive design. The higher you rank, the more credible your target market finds you. Specifically, if you rank #1, you get about 36.5% of all clicks for that search term. If you fall to #2, that number plummets to 12.5% (source: promet
marketing). If you are pushed down past the bottom of page one, you basically don’t exist. 7. SEO is greatly simplified – SEO has many factors, but one of the most powerful factors
involves how many quality links point to your website. Imagine how much more work would have to be done if you had to attract links to three different websites!
8. Forces simple navigationusers love – Some websites like to make their navigation very complex or “unique” in order to stand out from others. However, this only aggravates
visitors. Because mobile users demand a simple layout requiring few clicks and big buttons, you are forced to create as simple of a method for navigating your website as possible.
There are many more benefits than you may have initially seen on the surface, but hopefully this helps you understand what’s in it for you with a responsive web design.
Tell-Tale Signs Your Website Needs a Redesign
In addition to the responsive factor and accommodating users of all device types we’ve talked about so extensively, a number of other indicators exist that make it clear it’s time to redesign your website. Here are some of those reasons:
1. 65% of users research online and purchase in-store – Think you don’t need to be present online because you sell a product people typically purchase in-person? Think again.
According to research by CISCO, 65% of in-store purchases begin with online research. This number is up from 57% in 2012. In addition, 78% of all shoppers use the internet to make purchases. Doesn’t it make sense to be present where your target market looks and make the best presentation of your products and services as is possible?
2. Your site loads slow – “Slow” means two seconds or more, and ideally every page on your site loads in less than a second. KISSmetrics, a leading internet marketing blog, found that about 5% of all users abandon a website that loads in one second, 10% abandon a site loading in two seconds, and about 20% leave a site loading in three seconds. Think about how much money losing that amount of traffic could cost your business.
3. The design looks old – There’s no hard-and-fast rule to this, but your design must look recent. Because most people search online first before purchasing, your digital storefront has now become more important than your physical storefront.
You have to care for your digital store just like you would your brick-and-mortar one, and while there’s an associated cost, it’s less costly than caring for a physical store. As a general rule, if your site’s design is 3 years old or older, it’s time to at least consider freshening it up a little.
4. Traffic/sales are down – These aren’t sure indicators that your site’s design needs some attention. Other factors such as Google algorithm changes or market demand may be playing a role. But, if you notice a significant dip in either, it’s worth considering whether or not your design needs an update.
5. Your conversion path confuses visitors – The graphic design may be all right, but if people aren’t visiting the pages you want, then something may be awry in your site architecture. You can easily check this in Google Analytics, which displays the precise path people take once they visit any given page on your website.
6. Your site has no clear call-to-action – You have to make it as simple as possible for visitors to your website to take your desired action. If it’s the slightest bit unclear, you will lose at least some sales.
Imagine that you own an e-commerce site selling lawn and garden implements. If you have a bunch of blue links floating all over the page, it’s hard to know what to do. However, if you include pictures of the main product categories which have big red buttons saying “learn more,” it’s much clearer to your visitors what they should do.
If any of these apply to your website, you may benefit strongly from a redesign. Important Decisions and Considerations for Your Responsive Design
Up to this point, we’ve been discussing why it’s important to have a responsive design in the digital marketplace. Now that you know why, let’s talk about some things you need to consider before you actually implement the design itself.
Here are some of the top factors:
• Budget – You probably already guessed this one. Fortunately, your responsive design will cost less than making three separate designs for smartphones, tablet PCs, and desktop computers.
But, what you do need to keep in mind is to keep a budgeted amount allocated for ongoing maintenance and testing. What’s interesting about websites is that every site is unique. Small changes, such as using a different color for your “Contact Us Now” button, can have a dramatic impact on your conversions.
• Time – Agree on a timeline with your web developer. Because you’re really implementing three different designs into one, more work is put into each phase. This means it takes much longer to design, test, and build your responsive website. Additionally, if you’re the type who thinks ahead, you may want to get the process moving even earlier, just to ensure that everything is completed on your schedule.
• Do different devices need different features? - You don’t need to offer various features on different devices, but you should evaluate whether or not your visitors expect this. Make sure your web designer has access to your analytics tool so they can conduct necessary research.
• How will you measure success? If you’re simply looking to improve the appearance of your website’s design, there’s no doubt it will be a success. But, there should be more to having a responsive web design than having a new look.
Metrics you might consider measuring include bounce rate, time spent on the site/each page, conversions, load time, and many other factors. It’s up to you to decide which measurements are the most important.
• It’s new, so prepare for change – Remember, responsive design has just recently emerged as an industry best practice, per Google’s recommendation. But, it’s far from a set science. Currently, there are 3 major horizontal screen widths:
1. iPhone 4 and 5 – 640 pixels 2. iPad 3 – 2048 pixels
3. Common laptop – 1366 pixels
And that’s just right now. Who knows how user behavior will change in the future? And further, will Apple, Microsoft, or Google create the next groundbreaking device, which has yet another different design? Responsive design can and will change in the future, so it’s best to mentally prepare now and be ready to update your web design in another three years or so.
Important Hurdles to Overcome with your Next Responsive Design
While responsive design is the industry best practice, it’s certainly not a perfect solution. Nothing is.
That being said, we do want to make sure you clearly understand some of the challenges
responsive design represents. But at the same time, don’t let these scare you into trying avoiding a responsive design:
Time
We already talked about this as something to consider when implementing your responsive design. You have to make sure you give your designer plenty of time to make the implementation happen. If you have an existing website, be aware that converting an existing site into a responsive design takes more time than building one from scratch. If you have business processes contingent upon the completion of your responsive design, make sure you communicate design deadlines with your developer first.
Older Browsers are Still Catching Up
Browsers such as Internet Explorer 8 and older don’t recognize media queries, which are the process that request a website to display in a certain size for a specific device. Very few viewers use older browsers, with the number falling each day. It’s something to keep on your radar, but nothing to lose sleep over.
Information Architecture
This one gets tougher as your site grows in size. The more people that search on a term, the easier it should be to find that page on your website. Big corporations like Starbucks, Disney, and Microsoft don’t do this well on their own sites.
Disney, for a time, even had their site disorganized to the point where mobile users would click to play a game, but then receive the message “This game needs a bigger screen.” Watch your own website carefully to make sure information architecture mistakes like these don’t happen.
Some Responsive Sites Load Slowly
Slow load speeds are not only harmful to your SEO, but they damage your user experience as well. As the client, you do have the final call over how your website is designed, but keep in mind that you should aim for as fast of a load time as possible. One of the key factors that slows your site’s load time is the graphics. The less of them you have, the better.
Responsive Web Design Satisfies Most Visitors
If an entirely different user interface is required for mobile visitors to your website, responsive web design isn’t the best solution. Mobile users don’t want to type, scroll, or fail at clicking on small buttons. If for some reason the vast majority of the visitors to your website are mobile users, a mobile design makes more sense.
No technology is perfect, including responsive web design. However, it does offer the best overall solution for satisfying most of the visitors to your website.
Most Vital Components of Your Responsive Design
Well, of course the actual design work is up to your designer, but while it is important to trust the person or company you choose to make your design, you also have to verify they adhere to industry best practices.
These 2 websites, both thought leaders in their own verticals, are great examples of responsive design in action:
• Hubspot • Copyblogger
As you read these best practices in this guide, make sure you view this website on a laptop or desktop PC, and then compare that view with what you see on your iPad or smartphone. While we discuss these points, however, we’ll be talking from the perspective of a laptop PC.
This is especially what we’d like to call attention to in regards to responsive design practices at these websites:
Anything you can click is big – On a PC, everything on both of these websites seems a bit oversized at first. For PC users, it makes the overall interface easy-to-use. If you view these same sites on an iPad or smartphone, notice how easy it is to click different menu buttons, sign up for newsletters, or click on a blog title. There’s virtually no chance you’ll press the wrong thing, even if you have larger fingers.
Large font size – The font used for the main blog text at both sites is 16-point. On a PC, this seems like a fairly reasonable size. On a mobile device, this font size is easy-to-read and won’t require most mobile users to squint when they do read.
Minimal use of graphics or flashy media – Examine both websites, and see where you find graphics, videos, or flash. Flash is rarely supported by mobile devices, so you don’t even see it on either website. You can’t find any videos, although if you dig a little through older blog posts, you might. The only graphics you do find are images for blog posts, and those images are compressed (This means image quality is reduced. Although it’s unnoticeable to your eye, you can significantly reduce the size of an image to improve download speed without visibly reducing its quality). Fast load speed – Because of their overall simplicity, these websites load fast, regardless of the connection type.
Plenty of white space – Do you notice how there’s a nice space between just about every object on both of these websites? That’s not an accident – that’s done on purpose.
It’s done for 2 reasons:
1. To make the site easy to navigate (as discussed earlier) 2. To make the viewing experience more user-friendly
Chances are you’ve stumbled across a website that feels very “crammed.” If you haven’t, check out this blog at Forbes for a good example of what we’re talking about. Notice how Forbes has very little white space anywhere – there are social icons on the left, long paragraphs with no spaces, ads at the top, ads on the right, more stories on the right and bottom, more ads at the bottom, and a window that pops up at the bottom to suggest even more hot topics you might like to read. On other pages, there are popups, and on still others, the font size changes!
Even some of the big guys violate industry best practices. Make sure you keep these points in mind as you design your site.
Important Responsive Design Techniques to Ensure Your Designer Implements
We’re now moving down to the real nitty-gritty of design here. Much like the overarching principles we just discussed, the responsibility for the following practices lies in the hand of your web
developer.
Here are a few things your designer/developer should implement when creating your design: • Minimal HTTP requests – In layman’s terms, this means “make the site load fast.” Tools
are available which allow your developer to compress CSS and Javascript resources. This ensures only the necessary resources are sent to user’s smartphones, which minimizes the time they must spend waiting for your site to download.
• Send the right images to the right devices – We just discussed how Copyblogger and Hubspot use as little media and graphics as possible, but that they do use graphics to a small extent. This is done to create a professional, credible feel, and it’s perfectly okay. To make downloading as minimal as possible for different devices, your designer can send high-resolution versions of images to PC users, which typically has the fastest internet connection of your devices. At the same time, lower-resolution images can be sent to smartphone users. Ask your designer or developer how they would go about this. • Minification – Every character in which your designer codes has to be downloaded and
results in a slightly longer download time for your website. Make sure your designer engages in this responsive design practice, which focuses on using as few characters as possible for coding, by asking them how they minify your site’s code.
• Make sure you target max and minimum widths, not devices – Devices are changing so quickly, you don’t want to target many different ones because they could greatly complicate the design process and increase costs now and in the future.
By targeting max and minimum screen widths, your site stays scalable and fluid,
functioning well with all device types now and in the future. To learn more about this, ask your designer about media queries.
• Use drop-down menus when necessary – Sometimes you have an extensive menu on your website. That’s okay, but for mobile users, it may not properly display on their screen. In this case, check with your web designer to see if it makes more sense to create drop-down menu with bigger buttons.
• Start small – Whatever is the smallest screen size you’re trying to accommodate, make sure your designer starts there. It’s easier to start small and expand with design objects that scale than it is to start big.
These are just some of the specific techniques your designer should employ during the design process.
Responsive Web Design vs Mobile App Development: Which Makes Sense?
One of the most common situations we encounter is customers who prefer to have a mobile app developed instead of a responsive web design. Mobile applications are appropriate, but they work better in some situations than others, and they certainly are not a replacement for a responsive design.
The primary reasons it generally works better to have a responsive design than a mobile app are: 1. Functionality
Mobile apps are typically much, much simpler to use and navigate than a responsive design and are developed to take advantage specifically of a mobile device’s hardware. If you have a very complex website design in the first place, simplifying to a mobile app may make sense.
But for the vast majority of websites, especially for the simple sites most local businesses use, a responsive design makes more sense than a mobile app because such sites don’t require simplification to justify the additional cost of creating an app separate from the standard web design.
2. Bandwidth Use
Since mobile apps are designed specifically for mobile devices, they are generally created to be as lightweight as possible. In other words, they download fast. Responsive designs are intended to download fast as well, but because they’re not exclusively for mobile devices, they generally don’t download quite as fast as a specialized app.
That being said, responsive designs still make more sense for the average business because they accommodate all devices. In addition, your website shouldn’t require so much bandwidth that it downloads slowly on mobile devices in the first place – this is one of the primary rules you should follow to create the best user experience. Finally, if you have a mobile app, you’re going to have to do marketing for that site, as well as the design you have for desktop computers.
3. Business Model
In some cases, a mobile app makes more sense. Of all the cases where you might use one, developing an app around your business model is the best reason. But, for most businesses, this still won’t make sense.
Facebook, for example, has a separate mobile website. But for them, it makes sense because they have a large website that serves a number of different functions.
The vast majority of websites don’t have a business model requiring that much functionality. Local businesses especially only need what are comparatively simple websites that don’t require a separate mobile app.
Mobile apps should only be used under fairly rare circumstances. Only a small percentage of businesses have websites that actually require a mobile app.
Unless your site is unusually complicated, it’s best to keep it simple for your users (and yourself) and go with a responsive design.
Tips to Increase Sales with Your Responsive Web Design
Once you have your website design completed, everything’s done and you’re ready to watch the profits roll in, right?
Wrong!
When you have an attractive, functional responsive web design in place, that’s just the beginning of maximizing your sales.
Take a look at a few of these tips to see what we mean:
• A/B test everything. A/B testing is a simple process in theory, but complex in practice. In theory, what you do is randomly direct visitors to two variations of a page on your website. The first version of the page is the master version, while the second version contains a single minor change such as using the word “free” instead of “trial.” This seems small, but can hugely increase or decrease your conversions. The same idea applies to the color of your call-to-action button.
User behavior varies markedly by website, though, so there is no objective rule as to which is better – you have to test. It takes months before you see an impact on your bottom line, but it’s well worth the effort.
• Make the call-to-action clear. Every website should have at least one call-to-action “above the fold.” This means it should be easily visible when you first visit the website, and it shouldn’t require any scrolling down. A call-to-action could be a phone number, signing up for a newsletter, or downloading a short report.
Techniques for making the call-to-action clear could include making the font of the phone number bold and large in size or using a bright, noticeable color to show visitors to your website where to download the short report. You may think it’s obvious as to what action should be taken, but visitors to your website are less likely to take your desired action unless you make it very, very easy.
• Focus on data, not your feelings. QuickSprout blog author Neil Patel, a leading authority on conversion optimization, advises to always focus on data when making decisions. It’s okay to start with what you think may work best, but listen to the data and not your gut. If your website ends up looking a little different than you wanted, but it turns more visitors into customers, then listen to the data and keep the changes.
• Use trust symbols – “Trust symbols” are the logos of respected, credible organizations many people know. For example, if you belong to the BBB, use the symbol on your
website, preferably near where someone first enters (to immediately establish credibility) or where you want them to make a download or purchase (to show you are a legitimate business who engages in respectable practices). You could link to your listing at the BBB, or use an icon which displays your rating.
Other ways to use trust symbols include:
• Using client logos, with their permission
• Showing symbols of insurance companies whose insurance you accept
• Displaying the logos of leading industry associations of which you are a member • Showing logos of certifications you have
This isn’t a complete list of ways to maximize sales with your design, but it gives you some examples you can implement and provides a starting point for generating additional ideas. With the web, creativity is limited only by your own (or your consultant’s) imagination.
How the Future of Responsive Web Design Could Help Your Business
The web changes faster than you can imagine, and just 2.4 billion of our 7 billion people here on earth have internet access. One way to look at this statement is to realize that when it comes to innovation, we’re probably only seeing the tip of the iceberg.
With additional time spent in the digital world and a potentially dramatic increase of intelligent minds on the horizon, many changes could occur. As far as we can see it however, you can probably count on the following changes occurring in the not-so-distant future:
Responsive Design Gets Standardized with W3C
“The World Wide Web Consortium” is the main international standards maker for the web. Google already recommends responsive design as a best practice. However, W3C gets much more precise with its standards.
For CSS, the most commonly used coding approach for displaying HTML, W3C specifically defines the best methods for writing the code so it functions across all browsers. The same will happen with responsive web design.
It Gets Tied More Strongly to Content Consumption
People don’t visit websites to see their design. They visit websites to read their content or make a purchase. In the future, designers and content producers will work together more closely to create web designs that provide an optimal content consumption experience for website visitors.
More Creativity and Innovation will be Seen
Content is everywhere on the internet. But what makes some content more interesting and read than other types? Part of it is the depth of the content, but another major part is the presentation of the content. Websites that develop unique ways of presenting the same content to visitors will see more growth than others who cling to the standard convention.
Sites that Encourage Interaction will Gain Popularity
It’s pretty clear touch-screen laptops, smartphones, and tablet PCs will continue to proliferate in the future. Websites who make their designs best accommodate users’ desire for physical interaction will find themselves ahead of the competition.
Conclusion: Find a Web Design Firm You can Trust
If there’s one thing to take away from this whitepaper, it’s this: you must constantly fine-tune your responsive web design until it provides the exact experience your visitors want.
Because web design companies operate as contractors, it’s important to work with one you can trust. You can literally work with any company across the globe, but if they’re thousands of miles away in the UK or India (a mistake some businesses make), what do you do if they don’t hold up to their end of the contract?
Fortunately, web design companies are plentiful in the US, and especially so in every major metropolitan area. At i5 web works, we are local to the Dallas/Fort Worth Metroplex, and serve clients across the nation.
If you would like to learn more about responsive web design and how we work, contact us at 855-367-4599 or shoot us an e-mail at [email protected]
