The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’
— John Allsopp, “A Dao of Web Design”
What is a responsive website design?
Responsive website design is a well-noted approach for website design that caters optimal viewing experience to the users while browsing with easy reading, navigation, simple scrolling, minimal browser resizing and cross-device compatibility. Responsiveness of the website has become a transcendent search engine ranking factor and is significantly influencing the Google search results. The primary goal of building responsive web design is to cater a consistent browsing experience to everyone and no matter what sort of device is being used. It fluidly adapts almost all the resolutions & screen sizes and works smoothly on each device. With seamless experience, content & media are easily digestible while browsing on multiple devices including iPhone, smartphone, laptop, desktop, etc.
A site designed with Responsive Web Design adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
- The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
Why Responsive Design is Better Than Separate Mobile Website?
With the soaring adoption rate of tablet, smartphones and other smart handheld devices, the significance of the mobile website is also spreading its wings. According to the recent Google update, cross-device/platform compatible websites are the best-ranking signal and these are being focused more over the search engines. Now, the question is which one is a better decision either responsive or separate mobile site. To comprehend it deeply, let’s delve into below-mentioned factors:
- Maintenance Cost:
If you update the content of the responsive web page, it automatically gets reflected on the responsive site, but doing the same thing on mobile & desktop website is a little time-taking and expensive affair. Hence, the maintenance cost of the responsive sites is quite lower than desktop and mobile design.
Responsive web design is a quite flexible solution that adjusts automatically according to the orientation and screen width of the device whereas separate mobile site is appropriate only for smaller screens.
- Search & Domain Prevention:
Mobile sites are not a good way for search as they use separate domains. On the other hand, responsive sites are becoming the future of website design as there is no need to have multiple designs for desktop, mobile & tablets. In terms of SEO aspects, responsive websites are more capable to remove the SEO complication than mobile sites.
Reworking on mobile sites requires much more expenses and maintenance cost rather than on responsive sites. Responsive design is the best option, thus it is considered as the future of website design. According to the survey of Google Webmaster Team, 81% of people have responded in favor of responsive websites.
Main Components of Responsive Website Design:
Responsive Web Design has three main components:
- Flexible Layouts: Building a website with a flexible grid that can be easily resized to any width dynamically. One can use Grid Layouts to achieve this.
- Media Queries: Provide various styles for the browsers and devices based on the context, such as the orientation of the device, viewport, etc. Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width). Media queries are used for the following:
1. To conditionally apply styles with the CSS @media and @import at-rules.
2. To target specific media for the <link>, <source>, and other HTML elements.
- Flexible Media: As the size of the viewports changes, the media (images, videos etc.) also need to change their size or resolution according to the requirement.
Note: “Viewport” is the area of the browser where the actual content of the website is displayed. Viewport does not include the toolbars, tabs etc.
Challenges in testing responsive web design
Many people nowadays use their mobile phones or tablets to access websites, so testing a responsive web design is important because the user experience on mobile devices is quite different from desktops.
Possibly the most challenging part of testing a responsive website is making sure the website works as expected on multiple devices and platforms, but actual testing on all the mobile devices in the market isn’t practical for most of us.
Many testers who start testing responsive web design, they usually start by resizing the browser window to fit the viewport or breakpoints sizes of a mobile phone, tablet, and desktop.
This technique is usually adequate for a quick visual check of the website in different viewports and helps us to identify major rendering issues as we shrink or enlarge the browser window.
However, testing on real mobile devices is a totally different experience as you now have gestures like finger swipes, tapping, pinch-to-zoom, portrait or landscape. Likewise, on desktops, you have hovering, right-clicking, mouse scrolls, etc.
Responsive design should take into consideration all these variances.
Some General Rules for Testing Responsive Web Design
- Text, controls, and images are aligned properly
- Hover and selection states highlight and color changes
- Suitable clickable area
- Color, shading, and gradient are consistent
- Check for correct padding around the edges
- Text, images, controls, and frames do not run into the edges of the screen
- Font size, style, and color are consistent for each type of text
- Typed text (data entry) scrolls and displays properly
- Pages should be readable on all resolutions
- Never visualize the horizontal bar on the page
- Content deﬁned ‘important’ needs to be visible for all breakpoints
Breakpoints are the point at which the content of your site will respond to provide the user with the best possible layout to consume the information.
Each breakpoint requires an adaptation of the layout, with modules that change their position and rules. Another possibility is to have a ﬂuid layout, with text and images that ﬁt proportionately in relation to the width of the page.
Check for location of modules as you shrink and expand the browser window or as you rotate a mobile device. Different modules may disappear as you go from desktop to mobile, but make sure you know exactly which modules should be displayed in which viewport.
Sample Test scenarios for responsive website testing:
The responsive web design tester should make sure that a responsive design is satisfying all the below-mentioned test scenarios to ensure it is a bug-free responsive design.
- Scenario 1
Responsive website link or URL should be the same for all browsers in each and every device irrespective of the screen resolution.
Suppose www.abc.com is a responsive website. If we open it on a laptop and in a mobile phone then the URL should be the same on both the devices. The website opened in the mobile browser should not start with www.m.abc.com or www.mobile.abc.com
- Scenario 2
The display location of the content (images, sub-links, menus etc.) of a responsive website should change dynamically as per the change in the screen resolution. That is, if we change the screen resolution from the size of the laptop to mobile then the display of menu options should change dynamically.
- Scenario 3
URLs of a responsive website should also be resolution specific.
Prerequisite to test this scenario: Ask the developer to insert any sub-link into the Responsive testing website where the sublink is not responsive.
For example, the developer can insert link www.snapdeal.com to our testing website.
Now, open the responsive testing website from a mobile and click on the sub-link mentioned in the prerequisite. Then the URL of the sublink should change to https://m.snapdeal.com.
- Scenario 4
The same scenario can be tested from a laptop too. Open the responsive website from a desktop or laptop and click on the sub-link (mentioned in the pre-requisite of test scenario three) that is not responsive. The URL of the sublink should not change (as we are testing this scenario from the laptop the URL should remain the same).
- Scenario 5
Pre-requisite to test this scenario: Ask the developer to insert any sub-link, for example, www.paytm.com into the testing site. The mobile device in which you are going to execute this scenario should have the respective application of Paytm installed in the mobile.
Now open our testing responsive website from a mobile and click on the “Paytm” sub-link. Then the Paytm application which is installed in the mobile should be opened. (The user should not be redirected to the website in the browser or another window; only the app should be open.)
- Scenario 6
The images on the responsive website are resolution specific. It means that the resolution of the image inserted in the code of responsive website designed for mobile compatibility is different from that of a desktop or tablet. Each screen size should have its specific image in the design.
- Scenario 7
Click randomly anywhere on the web page and check if any data or text which is not hyperlinked gets initiated and redirected to any other page or content. This tests whether any word or text is marked as the hyperlink in the backend.
Note: In few projects, the requirements talk about the pixel size and resolution of the screen for particular devices. (For example, a tablet view for their responsive website should be at 15×15 pixel and for a mobile, it should be at 10×10 etc.)
Testing for the dynamic changes that should happen for the responsive website display when we change the pixel size is the main scenario.
- Scenario 8
Open our testing responsive website in a browser and view the contents and display of main images. Now resize the window till the breakpoint of the tablet size and verify the changes that should happen to the image resolution and any other content. At breakpoints, the changes should happen dynamically (sometimes the changes will not happen at the breakpoints and may change at some other pixel size which is a defect).
Sample Test cases for testing responsive website
- Does the page load properly? Surprised? Don’t be. Sometimes, when you test the responsiveness of your page on different screen sizes, you would find the page doesn’t load properly on some device.
- What is the image placement and size? This is the most common problem encountered when you go from one screen size to another if the application is not responsive. Make sure all images are rendered properly and do not overlap with the text regardless of screen sizes.
- Verify that text and headings on the web page are properly aligned.
- Verify that all the clickable links on the web page are readable and work as expected. Is the tappable area suitable and responsive? There’s nothing more irritating than tapping the tappable area or clicking on hyperlinks and nothing happens. Target this aspect and make sure the device responds accordingly. A good responsive web design should have a padding of at least 48px between two tap/click elements. Developers can achieve this by setting min-height and min-width.
- Verify that scrolling of the web page works as expected.
- Verify that there are input boxes and text areas to enter data; then we need to make sure that the text entered is displayed properly on the web page and they are aligned as expected.
- How do the font size and type respond to other devices? Fonts bring a whole new world of problems. Make sure every word is easily readable on all devices.
- Verify that the contents of the page are displayed consistently on all resolutions.
- Verify that the color changes after hovering over the elements and that it doesn’t persist after having hovered away.
- Verify that the consistency of color combination on different resolutions.
- Verify that images, text, different controls are not going beyond the screen border.
- Verify that horizontal scroll bar is not present since everything should be fit according to the size (width) of the screen.
- Verify that on rotating your mobile device, all the content is rotated and displayed as expected without any technical glitch.
- Verify that the user is able to click/tap on the clickable area.
- Verify the padding of elements on the edges.
- A typical mobile-optimized site contains something like the following:
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
- Element width should be relative and not absolute.
- max-width for elements like img, embed, object, video should be set to 100% (i.e. relative).
- Multi-line truncation with ellipsis should be used if there is too much text to be displayed on mobile resolutions.
Decide how your web application is used. You can get a great wealth of information from the Google Analytics tool to see which devices your customers use to reach your website
From the analytics, narrow down your choice of device testing to target the majority, i.e. make sure your website works for a majority of people as there is no practical way to test on every device combination.
Know exactly the breakpoints and what should appear as you go from one breakpoint to another
Utilize automated tools and emulators to do the basic checks and high-level functional testing and combine that with real device manual testing
- Material Design: Google is now offering Material Design guidance around breakpoints, responsive grids, surface behaviors, and user interface patterns.
- Responsive Web Design Fundamentals: A free course by Udacity, for both developers and designers.
Tools useful for testing a responsive web design
- Responsive Web Design Tester: This is a chrome extension providing a wide range of mobile device emulators — Open Source
- Lambda Test: This is a cross-browser testing tool which allows users to test more than 22,000 browser, mobile, and OS combinations. You get a separate tab for Responsive testing under Visual UI Test, where you can see the responsiveness of your site on varied devices and screen sizes.
- Google DevTools Device Mode: Google provides one of the simplest ways to simulate mobile devices within Chrome. Using this tool, you can see how your website appears across various screen sizes.
- Google Mobile test: This testing tool isn’t really a previewer and it doesn’t help you spot UI bugs. Instead, it’s a dedicated mobile tool for pinpointing issues within your site on mobile. Once the test runs you’ll either pass or fail as a mobile-friendly site. This is a little too generic for designers but Google offers tips based on problem areas & page elements that could use improvement.
- Emulators: Emulator is software or program that is provided within the browser which makes the host system (current browser) behave like the guest system (browser of the desired device that is to be tested for the screen size desired). Even though the emulators cannot give you the exact environment needed for testing, they are a cost-effective solution to test a responsive website at a high-level.
- BrowserStack: BrowserStack is a cloud web and mobile testing platform that enables developers to test their websites and mobile applications across on-demand browsers, operating systems, and real mobile devices, without requiring users to install or maintain an internal lab of virtual machines, devices or emulators.