Did you know that responsive web design (RWD) can add up to 188% in revenue to your company?
Photography equipment brand Think Tank Photo experienced it first hand.
After noticing that most of their traffic was being generated from mobile, they deployed RWD in the hope of converting mobile traffic.
The result was staggering.
- Increased transactions 96% from smartphones and tablet users
- Increased page views by 224%
Before showing you how you can get similar results, let’s break down what RWD is and how it works.
What Is Responsive Web Design?
Responsive web design is a method of designing websites that makes them functional, appealing and seamless across a variety of devices and their respective screen sizes.
The purpose of responsive web design is to translate the same on-site experience across all devices the user may be accessing your website from, including desktop, tablet and mobile.
Before responsive web design, most websites were static, which meant that mobile users would see the exact replica of the desktop website in miniature. Tiny text and call-to-action buttons (CTAs) made reading and interacting with the website on a mobile device extremely difficult, resulting in a poor user experience.
Unlike static, responsive websites redistribute the elements as the surface of your browser changes to maintain the optimum size of text, multimedia, CTAs and other elements.
Designing responsive websites can literally transform your brand and digital presence, and we’ll tell you exactly how that can happen, later on in the article.
For now, let’s focus on how RWD works.
How Does Responsive Web Design Work?
RWD is based on three main principles.
Principle #1: Fluid Grids
Think of your screen as a container separated in content areas that form a grid. Once the size of the screen changes, the content areas will adjust accordingly in order to stay within the container.
The grid will end up with a different shape but the content will still be there. The ability of the content areas to move is characterized as “fluid.”
Principle #2: Media Queries
Media queries are filters that help your website adapt to the proper width and height. These filters will change the layout of the page in order to meet the requirements of the device rendering the content.
Principle #3: Fluid Images
Unlike the fluid grid example, images are not fluid by nature. They have fixed sizing proportions, which can cause inconsistent presentation problems across multiple screen sizes.
On mobile, the user would have to zoom into different parts of the page in order to read the copy and in other cases, images could take up the entire screen, causing the need to scroll.
By applying a CSS/ HTML command, images acquire the necessary fluidity and automatically adjust to the relevant screen.
Now, let’s put the technicalities behind us and see why having a responsive website is a no brainer.
What Does Responsive Web Design Look Like?
Here’s an example of responsive web design:
The designers will start with the desktop version and then scale it down to mobile.
The grayscale versions you see on the left are the Digital Silk website’s UX design. UX design is clean, image and color-free, as its main purpose is to map out the conversion funnel and content both on desktop and on mobile views.
Once the UX designs are confirmed between client and agency, the designers can proceed with user interface (UI) design which applies color, images and other details onto the approved UX structure.
Responsive Web Design Examples From Renowned Brands
To put UX/UI design into perspective, let’s take a look at some of the best examples of websites built on a responsive design principle.
These examples will show you the difference between desktop and mobile versions of websites and demonstrate the importance of having fluid grids and flexible images that adapt to different screen sizes.
Example #1: QuickBooks
With a lot of white space in both the desktop and mobile version of its website, QuickBooks offers a clean page layout, a clear value proposition right up front and distinctive color for CTA buttons.
The desktop version features a complete navigation bar in the website header, as well as additional information about the special offers in the hero section.
On the other hand, the above-the-fold area on the mobile version shows just the right amount of information with a hamburger menu and to-the-point CTAs.
Example #2: Harvard Business Review
As a media company, Harvard Business Review has a desktop website with more headlines and stories in the hero section than on its mobile counterpart.
However, both website layouts present one article with a large featured image, while other headlines are text-only.
Another important difference between the desktop and the mobile version is that the larger screen holds a capacity for showing the navigation bar with main categories, while the whole menu is visible only after clicking on the menu icon on smaller screens.
Example #3: Converse
Similar to the previous example, Converse offers a category page menu in the desktop website header, as well as options to sign in, set a user profile, search the site and see the wish list and shopping cart.
The mobile version header is reduced to a hamburger menu, shopping cart and search icons.
The information displayed in the hero section on both versions is the same, as well as the slider with different products. But the desktop version shows an additional image and a distinctive CTA button, while the same call to action on the mobile version isn’t visible until visitors scroll down.
Example #4: The New York Times
The New York Times is a great example of a responsive website for a daily newspaper and a news portal.
The desktop version offers much more information, ranging from the news categories in the navigation bar and the choice between local and international issues to additional featured stories and even the current temperature in New York.
The mobile version of the website is much more streamlined, featuring only a date and Subscription and Sign In buttons in the header, followed by a single news story above the fold.
Example #5: Shopify
Shopify has done a great job when it comes to responsive design.
The key points that make its website elegant and easily accessible in both versions are:
- Clear and concise copy
- Original, high-quality video
- Attractive CTA encouraging visitors to start a free trial
The navigation menu with drop-down options in the desktop version adapts to a smaller screen in the form of a hamburger menu. Besides that, the desktop header leads to “Pricing” and “Learn” pages, while the mobile version is reduced to a single “Log in” button.
Have you noticed how each of these examples showcases a simplified, decluttered and on-brand layout that naturally fits into smaller screens, while the desktop versions offer more information, larger images and various CTA buttons?
That’s the essence of responsive web design.
What else is important for you to know?
Read on to learn why is responsive design so important for your business website and which valuable design facts you should know about.
Why Do You Need a Responsive Website?
- According to Statista, more than half the people that will land on your website will come from mobile. Your website needs to operate, function and respond at the same clip, if not better than the desktop version.
- Brand consistency and uniform user experience (UX) are key. Global brands have the distinct ability to translate their message, feel and energy no matter the context. Your website should do the same. Desktop, mobile or tablet, the user should have a seamless, uniform experience.
- Google flat out recommends it. Easier to share URLs, help with indexing, less engineering time involved and saving resources when Googlebot crawls your site, are just some of the reasons outlined by the very engine you’re trying to rank on.
- To take it a step further, Google recently announced that it will employ mobile-first indexing. What does that mean? It will predominantly crawl, index and rank the mobile version of the website.
- Following the announcement came the mobile-first indexing best practices. It’s quickly becoming apparent that a responsive website is not a nice thing to have. It’s a must-have.
#Google Prefers #ResponsiveWebDesign: Google prefers responsive #WebDesign because content that lives on one website & one URL is much easier for users to share & link to than content that lives on a separate mobile site. #WebsiteDesigning https://t.co/SJwmEoO9Zu pic.twitter.com/4kh3elbYU4
— Auxano Designs (@auxanodesigns) September 30, 2020
Responsive Web Design Fact #1: There Is The Right Way Of Doing It & These Leading Brands Are Smashing It [Examples]
Here is a selection of the best responsive websites that currently grace the world wide web. Let’s see what they do right and what we can learn from them.
When moving from desktop to mobile, the Dropbox website adjusts beautifully.
- Fonts change the size to assist the background
- Images become smaller but never lose meaning or obstruct the user experience
It’s all about the details when it comes to a responsive website and let’s just say that Dropbox did not drop the ball.
This is the best example of applying the flexible grid. Depending on the device, the rows of visual content vary from 5 to 1 in order to help the audience digest what’s in front of them. On mobile, the site sheds unnecessary content for a cleaner user experience
- No search button
- Hamburger menu
Slack is known for its easy-to-use, intuitive interface so it comes as no surprise that their website would make our list. Images, columns and text perfectly adjust to all platforms but what’s notable is how CTAs change on mobile.
The CTAs cover the entire length of the screen, becoming more prominent and easier to interact with.
Responsive Web Design Fact #2: There Is a Screen Resolution Standard & Here Is The Rationale Behind It
There’s not a singular screen size to design for. The whole notion of RWD is that it ticks all the screen size boxes.
What there is though, is information on the most commonly used screen sizes. That’s a great resource for prioritizing your screen design pipeline.
Here are the worldwide screen resolution stats for June 2019 – June 2020, as provided by Statcounter.
These are the most commonly used screen sizes:
- 360×640 – 16.87%
- 1366×769 – 9.09%
- 1920×1080 – 7.62%
Now that you know where to start in terms of size, here’s what you should consider about the content.
Curate Your Content
How much of your content will you show on smaller screens? Trying to fit everything might get crowded. Audit your content, trim the fat and include whatever is necessary for smaller screens.
Evaluate The Readability of Your Copy
Sentence/Paragraph length is a key consideration when designing for different screen sizes. Large chunks of text look clunky on smaller screens. Make your copy skimmable.
Assess The Aesthetics
Much like interior design, different spaces work with different colors and elements. Do your elements line up properly on all screens? Keep an eye out for font size, CTA placement and image captions.
Responsive Web Design Fact #3: It Too Has Challenges & Alternatives
Responsive design technology comes with its own set of challenges. Before diving into it, it would be sensible to address them and be aware of alternatives.
Development Takes Longer
This is important when managing your planning and resources. A responsive website takes longer to develop and fine-tune which means you need to hire more people or extend delivery deadlines.
Banner Ad Responsiveness Is Not Up To Par
The slot for ad displays has traditionally been fixed. That means that on a mobile screen, the ad would be pushed down, losing its prominence.
This has been the case for quite some time but the banner ad tech is finally catching up. Now you can build responsive banner ads with HTML5.
Keep Loading Speed In Mind
According to Cloudflare, website loading speed directly affects conversions.
Pages that loaded in:
- 2.4 seconds had a 1.9% conversion rate
- At 3.3 seconds, the conversion rate was 1.5%
- At 4.2 seconds, the conversion rate was less than 1%
- At 5.7+ seconds, the conversion rate was 0.6%
A website’s loading speed matters to Google, too. The popular search engine clearly states that “page speed will be a ranking factor for mobile searches.”
RWD makes speed optimization an even tougher challenge. A few tips to deal with this are compressing images, removing unnecessary content and deleting dead pages.
Alternative: Mobile-First Design
The mobile-first vs RWD debate has been going strong for years. Mobile-first promotes the idea that design should start from mobile and scale up to bigger screens, whereas RWD advocates for the desktop-to-mobile sequence.
Here’s the argument in favor of mobile-first design.
A recent Statista survey showed that the number of mobile users worldwide is set to grow to 7.26 billion. Why wouldn’t you start your design for the device with the most market potential?
Then there’s the design reasoning that comes into play.
Designing for a smaller screen urges you to be frugal with content. The absence of screen real estate is a driving factor for a minimal design that includes the absolute necessities.
The result is a cleaner user experience with faster downloading speeds.
Responsive Web Design Fact #4: Content Layout Can Make Or Break Your Responsive UX
Creating content for your website has many dimensions.
First and foremost, what you say needs to be insightful, and valuable for the reader. Secondly, the way you say it needs to be captivating.
What most people fail to consider though, is the presentation.
Your layout plays a crucial role in how the user consumes the content. Where is your CTA? Can they see it clearly? Can they access it easily? Let’s break it down.
Place Your Value Proposition Center-Left
An eye-tracking study by Eyequant, sheds some light on how people consume content from a screen. The study concluded that the majority of people look at the middle of the screen, and slightly to the left.
That’s exactly where your value proposition should be placed.
This notion is also backed by a study from Yahoo.
Consequently, when designing for different screen sizes you should always ensure that the most important part of your content ends up center-left.
People Scroll More But Top of The Page Still Gets The Most Attention
Scrolling has become an inseparable part of the way people consume content on mobile and tablets. Even though people do scroll more, research shows that the top of the page still gets the most attention.
A study by Nielsen Norman Group revealed that users spent about 57% of their page-viewing time on the top part of the website.
The message is clear: save the top of the page for the high-value, high-priority content. Make your points fast and be concise.
Responsive Web Design Fact #5: It Boosts Mobile Conversions
What’s the ultimate goal for a website of any industry? Convert visitors into paying customers. RWD can play a huge role in that process and that’s not something you should take lightly.
The stats in favor of a flawless mobile experience are overwhelming:
- According to Google, 46% of people say they would not purchase from a brand again if they had an interruptive mobile experience
- According to Smart Insights, 61% of users will have a more positive opinion about your business if you have a responsive website
More specifically, Skinny Ties, a … skinny ties company, saw a 13% conversion growth (71% for iPhone alone) since the introduction of responsive design to their proposition, according to WebEngage.
The reasons for such an impact are obvious.
- People don’t have to zoom and pinch their mobile screen to consume content
- The user experience is smooth
- Value proposition and CTAs are clear and accessible
Responsive Web Design Best Practices
Our 5 facts are a great resource to use going forward but nothing is more helpful when you dive into a project like this one than a best practice list. Here’s our own.
Best Practice #1: Pay Attention to CTA Placement & Frequency
CTAs are the holy grail of website elements. That’s where you direct the attention, that’s what every word and image try to point to.
Amidst the hustle and bustle of adjusting content to fit the relevant screen sizes, never neglect the importance of your CTA.
- You shouldn’t have to scroll or navigate to find a CTA. It should appear upon landing.
- Include more than one throughout the page
- Be imaginative with words, make it stand out
- The size of the CTA is crucial on smaller screens
Best Practice #2: Choose Your Fonts Carefully
In 2012, American film director Errol Morris wrote a piece for the New York Times titled “Are You an Optimist or a Pessimist?” What people reading the article didn’t know was that Morris was conducting an experiment on the effect of typefaces in changing people’s opinions.
Six typefaces were used in this experiment: Baskerville, Helvetica, Comic Sans, Computer Modern, Georgia, and Trebuchet. In a follow-up article, he shared the results.
- Comic Sans caused the most disagreement
- Baskerville had the most positive responses
Choosing a font type might seem tedious to most, but history and data tell us otherwise. Fonts can make or break your website. As iA very aptly puts it in a recent article, “web design is 95% typography.”
Here are a few font-specific details you need to be mindful of:
- Type – legibility on all screen sizes is critical
- Size – fonts should be proportionate with the device
- Spacing – spacing between letters can aid/hinder the reading speed
- Width of text block – chunky content blocks are lees inviting to read
- Keep minimal selection – more than 1-2 fonts make the website too “noisy”
- Alignment – always align copy for an optimal reading experience
Best Practice #3: User Interaction (UI) Is Key
Designing for specific screen sizes is not just about the dimensions. Your thinking and reasoning has to always incorporate the way a user interacts with a specific device. Here are a few things to consider:
- For desktops, we use a cursor
- For tablets, we (mainly use) our index finger
- For mobiles, we use our thumb
These facts have certain implications:
- Bigger screens have width and accessing the content is easier
- The thumb can’t reach the corners of the screen with the same ease
Taking into consideration that 49% of people use their mobile phone using one hand, the thumb suddenly becomes a focal point. Critical content and CTAs should be within reach of the thumb when considering mobile screens.
Responsive Web Design vs Mobile-First Design: What Is The Difference?
The mobile-first website design approach provides a faster user experience because it reduces website page loading times and also uses various UX and UI considerations such as larger font size, white space and more.
Mobile-first differs from RWD in:
- Design process: With the mobile-first design, web designers begin with designing a website that fits the mobile device first, before adapting it for desktop computers. By scaling from mobile to desktop layout, they ensure a good user experience characterized by fast download speeds, rich media content and easy navigation. RWD begins with the maximum required screen resolution and by narrowing it down to smaller screens, the content and layout fit different devices.
- Purpose: Although both B2B and B2C sectors use both mobile-first and RWD design, RWD is more common among B2B businesses because the content of their website needs to signal authoritativeness and needs to be informative. Most B2B business’s clients access their website via laptop or desktop computers which makes this type of design a priority. For B2C businesses, mobile-first is ideal because their customers are on the go and use smartphones in growing numbers.
- UX: Since the majority of internet traffic is now happening on smartphones, mobile-first looks to provide excellent and fast UX to smartphone users. RWD provides a satisfying alternative to the desktop version of the website for all devices of any screen size but doesn’t fully optimize the user experience for this dominant segment – the mobile users.
- SEO: Responsive design is applicable to both desktop and mobile devices and one single version of a website boosts Google page rankings. With the mobile-first design, a website is only optimized for mobile devices and you effectively get two websites, one for mobile and one for desktop, which can be a disadvantage from the standpoint of SEO.
Key Takeaways On Responsive Web Design
Here you have it. A breakdown of responsive web design, why it matters & and 5 valuable facts you need to know about.
As you might have noticed by now, RWD has many facets and intricacies you should consider before diving into it.
Here are the key takeaways:
- RWD is a website design process that ensures a uniform result across different screen sizes and mediums
- Your websites should be responsive because Google recommends it and more than half the people that will land on your website will come from mobile
- Some of the world’s leading brand is using it with impressive results
- There is a correct RWD process/protocol
- It has its own challenges like longer development and loading time
- The way you place your content should take screen dimensions into consideration
- User interaction with the screen should spearhead design plans
Tomas McKannie is a digital marketing specialist and a freelance blogger. He is focused on new web tech trends and digital voice distribution accross different channels.