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.
This approach takes into consideration the proximity of the user from the device, their interaction with the screen and the context of their user journey.
In simple terms, no matter which device or screen you choose to access a website from, RWD ensures you will be presented with the same result and experience.
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.
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.”
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.
Unlike the fluid grid example, images are not fluid by nature. They have fixed sizing proportions. That would obviously 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 them 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?
When working with a design agency, their process usually involves the provision of two UX designs: desktop and mobile.
Here’s an example of how 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 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.
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.
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 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 from 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 favour 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 minimal design that includes the absolute necessities.
The result is a leaner 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 how you present it.
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
- 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 #2: 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.
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