Is your web page mobile–friendly? Does your design look good on a 5K studio monitor? What about an iPad 10.2? Or an Amazon Fire HD8 Tablet? A MacBook Air? Being mobile-friendly does not cut it – you need Responsive Web Design.
Because most users use mobile devices to browse the internet most of the time, search engines prioritise results for mobile-friendly websites. This means that if you want your site to perform well in search engines, your site needs to be mobile-friendly. But an iPhone6 screen is 750 pixels across (there are still a few out there), and an iPhone15 ProMax has a 1290-pixel screen. A traditional 17″ monitor has a screen of 1024 pixels across (again, there are still some out there). For web pages, there is no longer a clear distinction between ‘mobile’ and ‘desktop’ screen sizes.
A mobile-friendly web page is not enough – you need a fully responsive web page.
Table of Contents
What is a Responsive Web Page?
Responsive Web Design (RWD) is a design approach that transforms how web pages are displayed. Better than mobile-friendly or mobile-first design, responsive web design seeks the best experience to all your users.
So for Little Fire as an agency, responsive website design is more important than mobile-first design. We take time to find out what your users are using to view your website and, if it’s not mobile, we target both as part of the design process. Sometimes a client will need to target a specific device as well as a screen size – we can use Browserstack to aid the design if we don’t have that device in house.
Little Fire Digital are a business-to-business agency and many of our clients are too. If you are a building services company or a supplier of industrial goods, it’s more likely that most potential clients will be browsing your site from their desktop at work. That is when their purchasing decisions will be made and so, despite the demands of SEO, your website may need to be customer-first.
Understanding Responsive Web Design
The aim of Responsive Web Design is to ensure that a website’s layout and content adapt gracefully to different screen sizes and resolutions. It is technical, of necessity. The entire intent is that the background design process be invisible to the end user, which means a great deal of work needs to be undertaken in the background.
Key Techniques for Achieving a Web Page with Responsive Design
Rather than focus on a single screen size, responsive web page design works in terms of rules based on ranges of sizes. Often, screen orientation matters more than pixel size. Modern CSS units (vh, vw, em, rem) all help keep elements in proportion with the screen and other elements on the page.
- Fluid Grids
Central to responsive web design is the concept of fluid grids. Unlike traditional fixed layouts, where elements are defined in pixels, fluid grids use relative units like percentages. This allows for a flexible and proportional resizing of elements based on the screen size. As a result, the layout adapts seamlessly to different devices, providing a consistent and user-friendly experience. - Flexible Images
Images play a significant role in web design, and responsive design ensures they scale appropriately across devices. Using relative units for image sizes and employing CSS properties such as max-width: 100%, designers prevent images from overflowing their containers and maintain a visually pleasing layout on screens of various sizes. Further, because speed and network overheads are paramount, images need to be supplied at the best size for your users screen sizes. - Media Queries
Responsive web design harnesses the power of CSS3 media queries to apply styles based on the device’s characteristics. Media queries allow developers to tailor the design to specific screen widths, heights and device orientations. For example, a website might have different styles for large desktop screens and smaller smartphone screens. This ensures an optimal user experience across the board. - Viewport Meta Tag
The viewport meta tag is a crucial component of responsive design. Placed in the head of the HTML document, this tag controls the width and scaling of the viewport. It enables developers to set the initial scale to prevent the automatic zooming on some mobile devices. This ensures that the website looks and functions as intended.
Implementing Responsive Web Design in Practice
To illustrate how responsive web design works in practice, consider a simple example using CSS media queries:
@media only screen and (max-width: 600px) {
/* Styles for screens with a maximum width of 600 pixels */
body {
font-size: 14px;
}
}Code language: CSS (css)
In this scenario, the font size adjusts when the screen width is 600 pixels or less. Because the screen itself is physically smaller, a mobile variant of a web page often needs a larger typeface. Using this technique, a developer can tailor the user experience based on the device’s characteristics.
Increasingly, web developers and designers are moving away from referencing a single image thus:
<img src="example.jpg" alt="Example Image">Code language: HTML, XML (xml)With an embedded query and a srcset parameter like this:
<img srcset="example-480w.jpg 480w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 800px) 800px, 1200px"
src="example-800w.jpg" alt="Example Image">Code language: HTML, XML (xml)This ensures images are supplied at an appropriate size for your device,
Potential Drawbacks
Responsive Web Page Design Is Harder to Develop Well
As the examples illustrate above, the code required to implement a fully responsive website is much more complicated than traditional web design. Complicated code is always more prone to error, costs more to develop and is harder to maintain.
Typically, media queries rely on overwriting rules defined elsewhere (in the example above, type should be this this big unless the screen width is less than 600 pixels). This is harder to read than a single set of rules. If not carefully managed, media queries can make CSS files extremely complex – rapidly building technical debt into your web development.
As screen sizes proliferate, you need more rules, and it gets harder to identify the intent of the underlying code. This makes site less interoperable. For example: ”Why don’t we use the srcset attribute on this website? Because of the CDN we use.” These design decisions and this lack of clarity can cost money, which another development team might consider better spent elsewhere.
Without Care, Design Can Suffer
Because there is more than one design, there is always going to be an ugly duckling. The more variations of screen size you need to support, the more likely it is that one or more will, most likely, work less well than the others. Modern design frameworks help a lot but creating two or more great designs is always going to cost more than one.
Managing images becomes trickier. A mobile screen is massively portrait format (much taller than it is wide) and a desktop display is almost always landscape (wider than it is tall). The trend is for the difference in screen sizes to become ever greater. There is often a trade-off between preserving the clarity of the image and maintaining the crop (and hence the design intent) of the image.
Again, modern developer toolsets can help with this. But it means additional design decisions need to be made and maintained.
Conclusion
Back in the days when design was ink applied to battered, pressed wood pulp, it was so easy. As devices and screen sizes proliferate, keeping your web page looking perfect is an ever greater challenge.
But design has always been a challenge: with an awareness of what you need to convey, using responsive design can help you represent your company with a coherent brand and a functional web page. Web design, like all page design, is a matter of establishing rules which result in consistent, good-looking and functional pages. There’s no denying that Responsive Web Design is a lot more complicated, but the principles are the same, and more important than ever.
By embracing fluid grids, flexible images, media queries, and viewport meta tags, developers should be able to design web pages that look they were desgined for your user’s screen – regardless of the users device. Responsive design is not just a trend. It is necessary for delivering an optimal user experience and ensuring the success of websites in today’s dynamic environment. As technology advances, responsive web design will remain a cornerstone of modern web development.