Responsive Web Design (RWD) is a term that was defined by Ethan Marcotte in 2010 according to which, design and development of web pages should be responsive to different screen sizes, platforms, and orientations. The idea was to create web pages that look good on all devices and screens.
Responsive web design is a term that means that the design of the web pages should be molded according to different screen sizes, resolution and aspect ratio of the screen on which they are displayed. The aim is to create web pages that are responsive and look good on all platforms.
More than 50 percent of Web Pages are viewed on phones which means it is more than essential for companies to build responsive pages to survive in the market.
This article will explore how you can test responsive web design cross browser compatibility.
Why Are Responsive Web Pages Useful?
Since the functionality and applications of languages keep on changing, so does the way a web page is displayed on different platforms. This technology has evolved over the years but the core of the philosophy remains the same. Responsive web design uses HTML, CSS, and JavaScript to render different types of content on the webpage. All of that is incorporated in a single set so that it can be rendered on any platform similarly.
This detailed post will list down different kinds of tools and considerations that you must take into account for adequate responsive design testing.
Here are some of the few considerations you need to take into account to be able to create responsive web applications. This checklist encompasses the various elements that you need to assess while testing your webpage.
To start with, here are the three main components that you need to consider when testing for responsive web design .
Layout
The way the face of your website is designed is the first thing you need to take into consideration so you can easily resize the webpage with any kind of dimensions.
Media
The next thing to check is the media. Check if the media displayed on the webpage is alright for example images and videos. Video especially needs to be resized otherwise some players may not support the default resolutions and the video may not play at all.
Typography
This is the area that is almost all the time ignored by the developers. Font size and other attributes like width, height and font placement are of utmost importance, and they should be made as adaptable as possible.
How To Test Responsive Web Design?
Responsive Web Design is crucial for enterprises to stay relevant and competitive within the industry. It is equally important to verify the visual operation of your web applications across different browsers.
Here are a few things to keep in mind while testing your web page or applications under different browser environments:
● HTML validation
● Ajax and Jquery functionality
● Page and Font size validations
● CSS validation
● Page layout in different resolutions
● Date formats
● Image and page content alignment
● Header and footer sections
For software testers and quality assurance teams, it can be a challenge to test the website across multiple browsers. These challenges may include:
1. No provision to test on actual devices
2. Implementation of Vendor-Specific functions
3. HTML/CSS Validation issues
4. Rendering issues
5. Layout compatibility issues across various platforms
HTML language is a very simple yet extremely adaptive language. The containers of HTML can expand as you like them to. They expand horizontally as well as vertically, but this property has made it hard for the HTML to deal with more complex designs especially considering that screen sizes keep on changes with each passing day.
However, even though smartphones have much more resolution than most everyday monitors, the pixels become almost invisible. For example, a 2k resolution will translate into a logical resolution of 800x600. So we can assume that the logical pixels are mapped to a grid of 3x3 real pixels. This results in overall smoother detail.
The discrepancies in two vastly different display sizes caused the developers to make two separate versions of their websites for desktop as well as phones. This however became impractical soon as it involved unnecessary work for the developers. Nowadays, websites are largely displayed on mobile phones that is why the need for RWD to make the websites fit all sizes and screens with any resolution and aspect ratio.
RWD Testing Strategies
There is no one unified strategy to implement RWD in your technology. No one technology can produce the results intended from RWD.
A good strategy for starters would be the mobile-first strategy which adapts and rearranges content according to the content that is displayed. Many sites are using these kinds of layouts which give a similar experience on both mobile and desktops.
Another example would be the hamburger menu where someone viewing the website on the phone can touch an icon to bring out another detailed menu, but desktop users can see the same in a horizontal arrangement.
Here are a few implementations of RWD in real-world scenarios.
Viewport Meta Tag
The first step to implementing any RWD strategy to your website is to put the viewport meta tag in your head code like this.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">When you put the width equal to the device width, the mobile browsers will scale the logical pixels to the width of the output screen. If you don’t put this setting, the browser will assume by default that the site should be rendered in desktop mode and will create a mess on a smaller display and as a result, the user may have to use pan and zoom.
Media Queries
Media queries are used to target specific ranges of viewport dimensions as demonstrated in the following example.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
/* universal styles */
p {
font-size: 1rem;
}
/* viewport styles with a width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
p {
font-size:1.5rem;
}
}
The Picture Element
The picture element can choose which image will be displayed from a list of sources. The element uses media queries to control the images. The elements are used majorly to display suitable images for device viewport as shown in this example.
<picture>
<!-- image shown when viewport width is greater than the height -->
<source srcset = "landscape.jpg"
media = "(min-aspect-ratio:1/1)"
alt = "landscape"/>
<!-- default image -->
<img src = "portrait.jpg" alt = "portrait"/>
</picture>
Viewport Units
The viewport units of height and width represent 1 percent of the height and width. The vmin attribute is the smallest dimension and the vmax here is the largest one. When using it with the calc function, it helps to make your RWD implementation more flexible.
CSS Columns
CSS supports multi-column layouts. As the dimensions of a text container increases, multiple text columns will be created.
Observe for instance:
/*
For columns of 12rem
with a gap of 2rem between each following code should suffice
*/
.container {
columns: 12rem auto;
column-gap: 2rem;
}
CSS Flexbox And Grid
CSS flexbox and Grid are two tools used to perform layout management of child elements and allocate space accordingly. The only difference is that flexbox is used for content set out in a one-dimensional layout while Grid is used for two-dimensional content with well-defined rows and columns. What this essentially means is that you can size the content according to the viewport dimensions.
Observe
This will display child elements that will span over 20 rem and will fill all the rows. However, if the displays are smaller than 20 rem, the elements will have to be sized to 1 fr which means that they will be spanned to their maximum width.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 1rem;
}
Using JavaScript
You can also use JavaScript to determine what viewport dimensions will be applicable on your webpage. For instance, you can determine the height and width by implementing the following script:
// get viewport width and height
const
vw = window.innerWidth,
vh = window.innerHeight;You can also examine the offset width and height by using the width and height tools, but a more viable choice would be to use the getBouncingClientRect tool to have more information on pixels.
const
element = document.getElementById('myelement'),
rect = element.getBoundingClientRect(),
ew = rect.width,
eh = rect.height;
In cases where the browser window is resized or a device changes the aspect ratio, you can use the matchMedia API to parse media queries and trigger and analyze the changing events.
Observe This Code
// media query
const mql = window.matchMedia('(min-width: 600px)');
// initial check
mqTest(mql);
// call mqTest when media query changes
mql.addListener(mqTest);
// media query testing function
functionmqTest(e){
if(e.matches){
console.log('viewport is at least 600px width');
} else {
console.log('viewport is less than 600px width');
}
}
Using In-Browser Testing
In-browser testing is also another way of testing RWD, but it may work only for that particular browser and may often be inaccurate. Thankfully most browsers offer RWD mode for testing cross-browser support. It allows you to select a particular resolution, a user agent, options to alter pixel density and aspect ratio.
In Firefox, you can switch to RWD mode by Ctrl/CMD+Shift+M and in chrome, you can simply select the option from developer tools. In Safari, you can go to the advanced tab from the preferences, load a page and enter the RWD mode.
The downside of using inbuilt RWD mode is that while they do imitate the device’s screen, they don’t properly emulate the engine of a specific device since the browser uses its own engine to display the web page.
So if you are trying to test a feature on Firefox that may not be supported on a particular version of an Android phone, Firefox may still render it even though the target device doesn't support it. Testing the same on the Apple safari for a targeted iPhone may yield different results as they have almost the same browsers.
Depending on the actual pixels on your monitor, a site may look better or worse than it will on the target device. Furthermore, if you are testing your website on a browser running on a faster PC, you may not get the same speed on the target device. Also, you will have to manually emulate and select each device to test your site’s compatibility with it.
Conclusion
Not all browsers render the websites the same way. That is why cross-browser testing is essential to create an adaptive website that works as intended on all platforms, screen sizes and resolutions. The only correct way to do that is to make RWD a part of your website.
To ensure that the implemented code and your design stays consistent on all platforms, and doesn’t negatively interfere with the user experience, cross-browser RWD is essential for your web design strategy.
Soft Tech delivers responsive web design and makes sure each web project is compatible with all browsers. Please feel free to Contact us for your web development work.
