Featured Responsive Website Design Work
How Toptal® Works
Trending Articles in Responsive Design
Responsive websites are websites that adapt to all screen sizes and resolutions, not only on desktop, but on mobile, tablet, and sometimes even TV as well.
According to Statista, mobile traffic was responsible for 52.64% of all global traffic in 2017, meaning that a website not well-optimized for mobile devices is losing out on approximately half of its traffic. By the end of 2018, it’s expected that the global traffic share for mobile devices will grow to 79%, which is an exceptional increase.
Businesses without a mobile website are falling behind at an alarming rate, because 8 in 10 visitors will stop engaging with a website that doesn’t display well on their device. It’s way too easy for users to hit the back button and try a rival business instead, and Google even ranks websites that are not responsive lower in their search.
You can take Google’s mobile-friendly test here.
Does any of this mean that mobile is more important than desktop? No. 83% of mobile users say that they should be able to continue the experience on desktop if they wish.
Take a look at this mobile-optimized version of eBay vs. what it would look like if it weren’t mobile-optimized. Would you even consider the non-optimized version?
Of course you wouldn’t; everything is small and cut off.
Web designers must be experts at responsive web design (RWD) in order to design websites that can compete on today’s internet. But… Where should they start?
A Mobile-first Approach to Responsive Web Design
A mobile-first approach means to design the mobile website first and then work up the desktop version. There are a number of reasons why this approach works well.
- Mobile websites have more usability concerns (mostly due to the lack of screen real estate), so the primary focus should be on mobile design.
- It’s easier to scale up the mobile version than it is to scale down the desktop version (again, because of the lack of space on mobile websites).
- Mobile-first design helps to reevaluate what’s visually and functionally necessary.
Designing a website as a mobile-first responsive site forces businesses and designers to ask a number of important questions because there is less screen real estate to work with. Here are the questions that need to be asked:
- Is this feature/function really necessary?
- How can we design something minimalist for mobile first that will scale up well for desktops later?
- Is this visual effect worth the time that it takes to load on mobile?
- What’s the primary objective, and what visual elements help users achieve it?
We’ll take a look at some examples in a moment. For now, let’s talk about what devices, screen sizes, and web browsers are relevant today.
What Screen Resolutions Are Relevant for Responsive Web Design?
Here are the most common screen resolutions across mobile, tablet, and desktop users worldwide. As you can see, there are a wide range of resolutions, so neither mobile, tablet or desktop is dominating the market share right now, and what this tells us is that designers should consider all of them when thinking about responsive web design.
- 360x640 (small mobile): 22.64%
- 1366x768 (average laptop): 11.98%
- 1920x1080 (large desktop): 7.35%
- 375x667 (average mobile): 5%
- 1440x900 (average desktop): 3.17%
- 720x1280 (large mobile): 2.74%
Just like with device breakdown, we should segment the data by location to match the user demographics (or anticipated user demographics) of our target audience. It’s also worth catering for resolutions that are gaining popularity, because while some screen sizes are not so common right now, they might be in the future. This will help web designers craft futureproof UX that will work even when the market share changes.
For example, 360x640 resolutions (which correspond mostly with Samsung devices using Android) have risen by 5.43% in the last year. Designers can use valuable insights like these to decide on key responsive breakpoints before starting a website design.
What Web Browsers Are Popular Today?
Responsive web design is about offering a seamless experience on any device, and since different web browsers render web pages in different ways, websites must be tested to ensure that they’re compatible with a variety of mobile and desktop web browsers.
Even though making a website scale to the correct responsive breakpoints is primarily the responsibility of a web developer, it’s the web designer that decides how exactly a responsive website will adapt to various screen sizes in order to create an optimal user experience.
Here’s a worldwide breakdown of web browser market share for mobile and desktop.
- Chrome: 55.04%
- Safari: 14.86%
- UC Browser: 8.69%
- Firefox: 5.72%
- Opera: 4.03%
- Internet Explorer: 3.35%
Responsive design isn’t just about “making everything fit”; it’s also about adapting to the capabilities of the device hardware and web browser as well as the device resolution. One example of this could be, that while Google Chrome supports the CSS property
overscroll-behavior: (which defines what happens when the user scrolls too hard towards the edge of the viewport), it’s not supported in any other web browser.
Practical Responsive Web Design Tips and Best Practices
As mentioned earlier, a mobile-first approach to responsive web design will help businesses evaluate what’s really necessary in order for the user to achieve their main objective.
As we build up to the tablet version (and later desktop version), we can then begin to think about secondary objectives and the microinteractions, user flows, and CTAs (calls to action) that make those user objectives achievable. What’s more important is that we focus on the primary objectives of the user first and eliminate any unnecessary friction that doesn’t aid either primary or secondary objectives.
A primary objective could be the purchasing of a product, whereas the secondary objective could be signing up to a newsletter (which could lead to a purchase later).
Here’s a terrific example in eliminating friction: Since mobile user interfaces are typically harder to navigate, it would be best to switch to a one-page checkout for mobile eCommerce stores and only enable multi-step checkout for desktop eCommerce stores.
Design for Thumbs
Responsive web design is tricky in the sense that users will interact with the desktop website via clicks but the mobile version via taps and swipes. There are physical differences as well. Desktop users typically have their computers on a surface, whereas mobile users hold their devices in their hands. These differences significantly change the way mobile UI designers design tap targets and other important UI elements with which users interact.
Let’s take a look at some examples:
- People typically expect the main desktop navigation to be at the top; however, on mobile, it should be at the bottom. Thumbs don’t reach the top comfortably.
- Other interactive elements should be easy to reach as well. This means keeping them in the center of the screen because it’s more difficult for thumbs to reach the sides and corners of device screens.
- Important links and CTAs should have a height of at least 44px so that they can be tapped with ease (because smaller tap targets are bad for usability).
Recommended reading: The Fundamental Guide to Mobile Usability.
Take Advantage of Mobile Devices’ Native Hardware
Mobile hardware (like the device camera or GPS services) isn’t specifically reserved for native apps and, as mentioned earlier, responsive web design isn’t just about “making everything fit.” It’s about adapting to the capabilities of the device as well. In the case of mobile web design, since mobile devices have easy to use cameras, some microinteractions—such as data input—are actually easier on smaller screens as long as websites are taking advantage of the available native hardware.
Let’s take a look at some examples:
- Credit/top-up card scanning (because forms are often tricky on mobile)
- Photo-sharing on social media, because the media is already on your device
- Two-factor authentication (because you’re already on your mobile device)
- Quickly checking stocks/analytics (because mobile apps simplify information)
- Performing a web search with voice (because hands-free is easier than typing)
Don’t Forget about Landscape Orientation
We talked about specific responsive breakpoints earlier, but we also need to consider that those mobile viewports can be displayed in landscape orientation as well. While implementing a fluid layout will technically make the content adaptive, losing a fair chunk of the portrait viewport can be a hindrance to the usability and accessibility.
Navigations are usually safe (sometimes they’re better, actually, since users typically navigate landscape orientation with two thumbs), but scrolling becomes significantly harder, which is less than optimal since the user is required to scroll more on landscape.
Designers may want to consider designing for landscape breakpoints as well; for instance, gridded elements that stack vertically on mobile could be displayed as a slider with left and right navigation buttons, meaning the user doesn’t have to scroll.
Apart from the fact that it’s universally accepted as a best practice when designing websites, it’s not hard to see why prior user research can help businesses create a responsive web design strategy. It results in a better user experience, increased engagement, but more importantly, mobile eCommerce was responsible for approximately 50% of total eCommerce revenue in the United States.
Implementing an effective responsive web design strategy can ensure that businesses are on the winning side of that statistic.