One of the main challenges that development and QA teams face today involves screen resolution. Depending on the device from which a user connects, screen resolutions could range from a mere 320 pixels wide (the screen width on the iPhone 5, which has the smallest resolution of modern devices) to 4K desktop displays with resolutions of 3840 by 2160 pixels or more.
How can developers and QA engineers ensure that a website or application provides a reliable user experience across the full range of possible screen resolutions? The answer is responsive website design and responsive design testing. As this article explains, these methodologies allow teams to ensure a great user experience across a wide range of screen sizes and configurations.
What Is Responsive Website Design?
Responsive website design is an approach that prioritizes making sure that the content users see within an app looks good at every possible screen resolution. Software that is designed using a responsive approach can automatically change the way it displays content depending on the screen size of the device on which the software operates.
Responsive website design is so-called because of the idea that website designers should be "responsive" to the needs of their users. Rather than expecting or requiring users to have a certain screen resolution in order to enjoy a positive experience, responsive website design ensures that applications can respond to whichever screen configuration users choose to run or whichever device they happen to be using.
Note, by the way, that responsive website design isn't strictly limited to websites. It can be applied to virtually any type of software, including native applications, as opposed to websites.
Responsive Design vs. Adaptive Design
Responsive design is similar in many ways to adaptive design, but it's important not to conflate these two methodologies.
Under adaptive design, teams create different versions of an application or website – one for each screen resolution. For example, adaptive design might result in one version of an app that is designed for mobile phones, another for tablets (which have somewhat larger screens than most phones), and a third for PCs. When an app or website loads, it determines which kind of device the user is running, then displays the appropriate version of the software.
In contrast, with responsive design, applications are designed to adjust content automatically to fit different screen sizes. This means that responsive design results in more flexible content displays that are able to adjust in a more granular fashion to varying screen sizes.
Responsive design also offers the advantage of being simpler in many ways because there is no need to build, test, deploy, and maintain multiple versions of a website or application. Instead, teams create and test just one version and rely on it to respond automatically to various screen sizes. That said, responsive design does require an especially rigorous testing strategy, since that is the only way to ensure that software adjusts properly to fit a varying range of screen resolutions.
The Importance of Responsive Design
Responsive website design is important mainly because it ensures that users have a positive experience on whichever device or screen configuration they happen to be using. In turn, responsive design keeps users more engaged and satisfied, and it can help to reduce rates of application abandonment.
Responsive design is valuable for building any type of application or website. However, it tends to be especially important when building mobile apps and websites, or apps and websites that need to support both desktop and mobile users. That's because there is more variation in native screen resolution for mobile devices than there is for desktop computers.
In addition, on a desktop with a larger screen, it's usually feasible to display an application on only part of the screen if the screen's resolution is larger than the app was designed to support. That's not realistic on most mobile devices. Mobile applications and websites usually run by default in full-screen mode, and mobile operating systems don't offer windowing options that make it possible to adjust the size of an app in the way that users can on a desktop. For that reason, it's especially critical to use responsive website design as a means of ensuring that mobile content looks good by default across multiple screen sizes – without requiring users to modify their screen settings or expecting them to zoom in or out within the app.
What is Mobile-First Design and Responsive Design?
Partly because desktop apps are easier to adapt to varying screen resolutions than mobile apps, responsive website design often goes hand-in-hand with mobile-first design.
Mobile-first design is the practice of designing websites or applications for mobile devices first, then adapting them to support desktop computers if needed. For software that needs to support a wide range of screen resolutions, mobile-first design is often a simpler and faster way to build quality software than starting with a desktop app and trying to scale the interface down to work well on mobile devices.
4 Steps To Use Responsive Web Design
The process for putting responsive design into practice can be broken down into the following key steps.
1. Determine which screen thresholds to support
First, developers need to decide the minimum and maximum screen resolutions they will support. Although the resolutions of devices vary quite widely, it's not always necessary – or realistic – to support every possible resolution.
Instead, developers should determine which types of devices most of their users have, and which screen sizes those devices use by default. For example, if the majority of your users have iPhones, you can target the native resolutions of iPhones, which will be different from those on Android devices.
You should also, of course, decide whether you need to support desktop resolutions in addition to tablet and smartphone resolutions. Responsive design is simpler if you only need to support mobile devices.
2. Create a fluid grid
In most cases, the next step in responsive design is to create a fluid grid. A fluid grid is a visual plan for a website or application that breaks the screen into different sections. The main sections on a fluid grid are designed to be flexible. That means they can appear smaller or larger (within a range of minimum and maximum values) depending on the overall screen size. Fluid grids also usually include some elements of fixed size, such as a margin that separates content from the edge of the screen.
Within the fluid grid, the minimum and maximum values that you set for flexible portions of the screen should reflect the range of screens that you need to support. Your goal is to ensure that content that may appear in each section of the grid will look good at both the minimum and maximum pixel sizes that you set. You should also ensure that the horizontal and vertical edges of each section are properly proportioned to avoid distorting or pixelating content.
3. Code your site
A fluid grid is just a design resource; it's not actual software. So, to turn your fluid grid into an application, you need to write code that translates the fluid grid design into HTML and CSS.
As you do this, you'll want to take advantage of a few key attributes and properties:
Min-width, which sets a minimum width while otherwise letting your content scale dynamically in proportion to the screen size.
Max-width, which does the same, but within a maximum range.
Position: relative, which allows the site or app to place content on the screen based on its relationship to other content rather than fixing it in a certain place.
Other responsive design coding strategies will vary depending on exactly how you're writing your app or site and which framework you are using. But in general, your goal should be to define dynamic, flexible configurations that allow content to adjust automatically to different screen sizes, as opposed to the traditional approach of defining fixed sizes and positions for elements. Learn more about how to combine breakpoints and media queries to create your own responsive designs.
4. Test Your Design
Finally, test your website or app to ensure it displays properly at various screen resolutions.
You can run visual tests manually, of course, which means that you go in and review the content at different screen resolutions. But a much more efficient and scalable approach is to automate visual and user interface tests so that you can identify display issues automatically across a wide range of resolutions.
Automated testing not only saves your team a lot of effort, but also allows you to catch nuanced display issues (such as content that overlaps by just a few pixels) that humans might overlook if they are performing manual tests of a large number of configurations.
In addition to automating responsive design tests, another way to optimize testing is to consider testing on real devices rather than using emulators. Real device testing guarantees that your apps are tested on devices that represent real-world devices with full accuracy, eliminating the risk that misconfigured screen resolutions within emulators could lead to inconsistencies between your test results and the experience of your actual users.
Conclusion: Build Better Apps with Responsive Design
In short, you don’t strictly need to adopt responsive design and responsive testing to build websites and applications today. But unless you can count on all of your users accessing your software under the same screen resolution – which is rarely the case – responsive design is a smart means of delivering a great user experience across many device configurations and display sizes. It's also easy enough to implement, given the flexibility of modern software frameworks and the availability of automated testing solutions like Sauce Labs that let you validate content displays in a fast and efficient way.
Start testing your website or mobile app today with a Sauce Labs free trial.
