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 were initially used to design responsive websites. They instruct CSS to target specific ranges of viewport dimensions. Below is an example.
Though media queries are still in practice, comparatively fewer options are available in this method.
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.
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
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.
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.
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.
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.
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:
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.
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.
Since you’re rendering/testing on your PC monitor, your site may look better or worse on the actual device.
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.
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:
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.
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 firstname.lastname@example.org or schedule a meeting with our experts.