How to Test Responsive Web Design?
Author : John Prabhu 11th Nov 2020
While designing your webpage using HTML, the texts and containers expand vertically and horizontally to make use of the available space. This kind of fluidity makes it difficult to design a complex structure. Also, mobile devices started playing a huge role in the technology world and many brands adopted fixed-width based designs to serve all popular screen sizes.
The design process continued as display sizes kept increasing from 800×600 to 1024×768 and beyond. Later, after the advent of iPhones in 2007 and the rise of smartphones, more than half of the internet users started accessing webpages from smaller devices.
In reality, smartphones have higher resolution display than desktop/laptop monitor displays. As a result, individual pixels become invisible. When it comes to iPhone 11 Pro Max, it translates the 2688×1242 display resolution to 896×414 logical resolution. Here, reach logical pixel maps to a 3×3 real pixels grid and thus, enables increased image detail and smoother fonts.
Initially, businesses created two websites – one for mobile devices and desktop. Since a variety of devices with different display resolution grew rapidly, the above process seemed impractical and eventually went out of fashion. Later in 2010, the responsive web design method was devised by Ethan Marcotte. This method allowed the website to adjust itself to work on any device irrespective of the viewport dimensions or display size.
How Does Responsive Web Design Work?
There are a number of ways to implement responsive web design. Firstly, you need to understand how a website design will respond to different display sizes. Initially, businesses built a website on a desktop layout and removed certain sections as the display sizes reduced.
Instead of doing this, mobile-first technique was introduced. In this method, a linear mobile view is achieved that works on all devices and rearranges itself or adapts the content as the display size increases and certain browser features become available.
Implementation of hamburger menu is responsive web design in action. Users having smaller displays can click on this hamburger icon to view navigation links, and users with larger screens can see all the navigation links in a horizontal list. We will be discussing a number of technical implementation options in the coming sections.
HTML viewport Meta Tag
No matter which responsive web design technique you are using, you must include the below tag in your HTML <head> tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here, the width=device-width setting enables browsers to scale logical CSS pixels to the width of the screen. If you don’t use this setting, the browser will render a desktop site and scale it accordingly, which makes the website difficult to use for website.
Media Queries
Media queries were initially used to design responsive websites. They instruct CSS to target specific ranges of viewport dimensions. Below is an example.
/* styles applied to all views */ | |
p { | |
font-size: 12px; | |
} | |
/* styles applied to viewports | |
with a width between 600px and 900px */ | |
@media (min-width: 600px) and (max-width: 900px) { | |
p { | |
font-size: 18px; | |
} | |
} |
Though media queries are still in practice, comparatively fewer options are available in this method.
<picture> Elements
Using the HTML <picture> element, you can implement media query syntax to choose which image is displayed form a choice of <source> option. This helps in displaying a suitable image for corresponding device viewport.
<picture> | |
<!-- image shown when viewport | |
width is greater than the height --> | |
<source srcset="landscape.png" | |
media="(min-aspect-ratio:1/1)" | |
alt="landscape" /> | |
<!-- default image --> | |
<img src="portrait.png" alt="portrait" /> | |
</picture> |
CSS Viewport Units
The viewport’s width and height are represented by the CSS units vw and vh respectively. The vw and vh CSS units represent 1% of viewport’s width and height. vmin is 1% of the smallest dimension and vmax is 1% of largest dimension. These CSS units offer flexibility and help to achieve responsive web design. For example
/* font size increases with viewport width */ | |
p { | |
font-size: 1rem + 0.5vw; | |
} |
CSS Columns
CSS multi-column layouts enable you to create multiple text columns as the dimensions of a container increase. For example, let’s assume you need columns with a minimum width of 10rem with a gap of 2rem between each.
*/ | |
.container { | |
columns: 10rem auto; | |
column-gap: 2rem; | |
} |
CSS Flexbox and Grid
You can use CSS Flexbox and CSS Grid to lay out child elements depending on the content and space available. The difference between Flexbox and Grid is Flexbox is used for one-dimensional layouts where elements can wrap to the next line. Therefore, columns may not line up. On the other hand, Grid is for two-dimensional layouts with distinct columns and rows.
You can create an intrinsic layout using both Flexbox and Grid. Additionally, the elements will be sized according to the viewport dimensions even during the absence of media queries.
/* | |
Child elements will be at least 10rem and fill the row. | |
Displays smaller than 10rem will have elements sized to 1fr | |
(100% of the available width). | |
A .5rem gap will always surround elements. | |
*/ | |
.grid-container { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); | |
grid-gap: .5rem; | |
} |
JavaScript RWD Options
You can use JavaScript to measure the viewport dimensions and instruct to react accordingly. Here’s an example.
const | |
element = document.getElementById('myelement'), | |
rect = element.getBoundingClientRect(), | |
ew = rect.width, | |
eh = rect.height; |
When a device is rotated or a browser window is resized, the window and element dimensions change. The matchMedia API helps you parse CSS media queries and initiate change events.
// media query | |
const mQuery = window.matchMedia('(min-width: 360px)'); | |
// initial check | |
mqTest(mQuery); | |
// call mqTest when media query changes | |
mQuery.addListener(mqTest); | |
// media query testing function | |
function mqTest(e) { | |
if (e.matches) { | |
console.log('viewport is at least 360px width'); | |
} | |
else { | |
console.log('viewport is less than 360px width'); | |
} | |
} |
Browser Support
The above mentioned responsive web design technologies offer great browser support. Also, the CSS Grid option is supported by almost 95% of modern browsers. Again, it is recommended to always test your site across a variety of devices, resolutions, and browsers.
In-browser Testing
You can resize your browser window to test your website initially, but overtime it becomes inaccurate and tedious in no time. Majority of modern browsers enable you to enter responsive design mode where you can select a device and user agent, choose a resolution, rotate it, alter the pixel density, emulate touch, take screenshots and throttle bandwidth.
In Firefox, you can enter responsive design mode by pressing Ctrl (or) Cmd + Shift + M.
You can enter the responsive design mode by clicking Developer tools from More tools menu or press Ctrl (or) Cmd + Shift + I. Now click on the Toggle device toolbar icon.
In Safari browser, you have to enable the Show Develop menu in menu bar option from the “Advanced” tab of browser preferences. Now, load a web page and select Enter Responsive Design Mode from your Develop menu.
You must note that you can only imitate a device’s screen dimensions and user agent using these tools. You cannot emulate the following accurately:
Rendering capabilities
Your browser will use its own rendering engine and not the emulated device. Using a CSS feature, Firefox can render an emulated iPhone view even without actual support. On Chrome desktop, you can view an approximate Android Chrome render, and on macOS Safari, you can view an approximate iPhone render. It is because they’re based on the same rendering engines.
Older devices
The problem with older devices is, when you’re testing iPhone browser view on the latest Safari browser, you cannot accurately render older devices that are running on legacy operating systems and software.
High-density displays
Since you’re rendering/testing on your PC monitor, your site may look better or worse on the actual device.
Touch
A mouse or trackpad has finer control than a touch-screen with a small display. As a result, you may not be able to view hover effects on touch screen devices.
Processing speed
Your PC might have a faster network and processing speed than a mobile device.
Mobile OS Emulators
With the help of Android or iOS virtual machines, you can install and run respective mobile browsers and use native rendering engines.
Android emulators include:
Genymotion: free and commercial cloud options, all Android versions for Windows, macOS, and Linux
Android Studio (and Emulator): free, Windows, macOS, and Linux
Visual Studio Xamarin (and Emulators): commercial, Windows and macOS
Bliss OS: free, Android 9 for Windows, Linux, and Chrome OS
Phoenix OS: free, Android 7.1 or 5.1 for Windows and macOS
Android-x86: free Android ISOs for any virtual machine platform.
Though Chrome is the most used browser choice for Android, you can also install Opera Mini on lower-powered feature phones.
Options for iOS are more limited:
Apple Xcode (and Emulator): commercial, macOS
Electric Mobile Studio: commercial, Windows
iPadian simulator: commercial, Windows
These emulators still have downsides:
The software demands some technical expertise and utilizes considerable system resources.
Many iOS emulators are simulators. They take help from another rendering engine and expecting accuracy is a little difficult.
Online Testing Services
There are a lot of online services that lets you test responsive pages on mobile browsers over the web. Here, you rent time on a real device and view its screen in your browser. You don’t have to set up or maintain software. Also, some of the services include automated testing APIs that lets you run scripts and check for broken UIs or checking styling regressions.
Here are some of the live and automated mobile testing services:
Browserstack
Sauce Labs
CrossBrowserTesting
LambdaTest
Real Device Testing
No matter what, there’s no substitute for testing your website on real devices. Testing your website on a real device is the best way to measure the actual processing speed, touch control, and responsive web design.
For better results, you should test as many devices as possible. But your latest smartphone may not have average hardware. So, during these times, try testing your website on mid-range devices that a year or two old.
Devices connected on same can access your PC’s server by giving the IP address in the browser. You can obtain this by using ifconfig on macOS and Linux & ipconfig on Windows.
Also, you can connect a smartphone to your PC using a USB cable. By doing this, you can remotely control the device and easily access developer tool panels for debugging. The technique differs from platform to platform but, to debug Android Chrome on desktop edition follow the below steps.
On the Android device, select Developer options from the Settings and enable USB debugging.
Connect the device to your computer using an appropriate USB cable. The first time you attempt this, you may be prompted to confirm actions on one or both devices.
Launch Chrome on your PC and open in new tab. Ensure Discover USB devices are enabled.
Optionally, set Port forwarding — for example, port 8888 on the remote device can be forwarded to localhost:8888.
Your device should appear in the list. You can now inspect a new or existing tab which opens the device’s developer tools:
To debug Safari for iPhone, do the following:
Connect your phone to your Apple computer.
Open the web page you want to debug in Safari on your iPhone.
Launch Safari on your computer.
In Safari on the computer, go to Develop > [your iPhone] > [website to inspect]. This will open Safari’s developer tools on your computer, allowing you to debug the site on your iPhone.
Final Thoughts
Responsive web design technologies enable you to develop a website that is device-agnostic and breaks the technical barriers and offers a great user experience. On the other hand, the range and capabilities of testing tools continue to improve.
We, at TechAffinity, have expert web design, development and testing teams that have successfully launched hundreds of web projects. For website design and testing related queries, feel free to shoot them to media@techaffinity.com or schedule a meeting with our experts.