Responsive design turns 8 this year, and to celebrate, we asked experts from across the web industry a simple question: what does responsive design mean to you and your work, in 2018?
I’m fascinated by their answers. As many state, the technical aspects of responsive design – flexible grids, flexible media, and media queries – are more-or-less well understood, eight years in. But those simple-sounding ideas about CSS are still having far-reaching effects, which extend far beyond code. Below, you’ll read about responsive design’s impact on how individuals, teams, and entire organizations work and think. How should we model our content, now that it is responsively adapting to fit new and different contexts? How in the heck should we be prototyping and testing responsive designs? How can our teams and workflows be structured to better accomplish this new kind of work?
Most importantly, though, is the focus on users that’s present throughout. Whether they’re talking about touch-friendly target sizes, responsively designing without width rules or media queries for legacy email clients, or (a constant refrain) the importance of optimizing large resources like images for responsive delivery, the goals here are all about user needs. When we design responsively, our focus shifts: from working on a fixed set of pixels on a screen, to building flexible systems that adapt to meet as many different users’ needs, in as many different contexts as possible.
I hope you enjoy reading these as much as I did. Here’s to the next eight years of thinking responsively.
This is part of a series of articles about Responsive Images.
Orde Saunders, consultant webmaster, Decade City
The goal of responsive design has always been adapting to the media that renders it. So to have a successful responsive website, you need to keep that in mind at every stage of development.
The strength of the web is its reach and diversity – your users can be anyone, viewing your site from anywhere and a variety of devices. To ensure the best user experience, you must provide your content in a way that suits their unique needs. Since trying to anticipate every possible use case isn’t practical, we define a set of rules that the browser can query to see how it should respond in a given situation.
Let’s take a look at a simplified example of how this works in practice. In this case, we’ve set a sensible default baseline and added media queries to define how we want to respond to both large and monochrome displays:
/* Baseline. */
body {
font-size: 100%;
color: dimgrey;
background-color: whitesmoke;
}
/* Large displays. */
@media (min-width: 48em) {
body {
font-size: 125%;
}
}
/* Monochrome displays. */
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
We can now serve this set of rules to any user, and their browser can respond in the way it deems most suitable. By building a modular system centered around outcomes, we’re able to cater for the wide diversity of situations in which our website will be accessed.
Like all good design, responsive design is user-focused design.
Marko Prelec, front-end developer at ProteusThemes
Websites we create today can be accessed using very different devices – from small screens on mobile phones and tablets, to increasingly larger ones on laptops to TVs. It would be overwhelming to think how could one website work on all those devices and look good at the same time. Responsive web design solves that problem.
I always recommend to start thinking about responsive web design from the smallest devices to the largest, in what is known as a “mobile-first approach.” There is not much space on a mobile display, so this approach forces you to only add your most important content. It is a great process to avoid a bloated design and ensure your website runs smoother and faster.
Once your design is completed, test it on all the devices you have at home. The most common mistake is that the mobile fonts are too small, and this is something you can see only when you test with real devices. CSS media queries are your best friend in that case since you can control which styles to use for specific screen widths. You can easily increase font for smaller devices and still keep the same size on all the other devices.
Fluid images and videos are also important for responsive web design. You don’t want to see only a part of the image on your mobile screen. The image should scale down according to a user’s available viewport. Last but not least, don’t forget to optimize those images since you can reduce bandwidth usages and save a lot of money for users on mobile data plans.
Justin Avdich, head of Production at Cheeky Monkey Media
Responsive web development is rarely an afterthought for modern websites; it’s a necessity. In today’s age of mobile-first development, having a responsive website is both good for user experience and for SEO. With changes to Google’s search algorithms, having a mobile-friendly website can actually give your site a rankings boost. However, some people are still doing it wrong.
I’ve seen some websites that look great on larger desktop screens, but when scaled down to mobile, they could definitely use some work. Just because a three-column desktop design flows neatly into one column layout on mobile, that doesn’t make it perfect.
Page speed (yet another SEO ranking signal) is another important factor for responsive development. Research points to slow loading times that lead to increased user drop off and higher bounce rates. Thankfully, there are some nice tools and techniques out there that can help.
You can use a combination of caching, global CDN, lazy loading and serving responsive images. Looking specifically at responsive images, these enable us to serve up the proper image size for different device/screen sizes. This way, when the user visits the page on a mobile or tablet, a larger image is now a much smaller file size, which increases page load speed. Doing this for one image might not make a huge difference, but when you have more than a dozen images, you can see some noticeable gains.
There are a few different ways to implement responsive images, but using the HTML5
Richard Hammond, partner and lead developer at Upanup
While responsive web design front-end views may pass User Accepted Testing (UAT) with your boss and clients, under the hood there are three shortcomings that we see too often:
-
Content Model Neglect – Content remains king in responsive web design. It is less of an issue than it was two or three years ago; however, there continues to exist a responsive design approach of declaring media query breakpoints that match the resolutions of popular devices (1024px, 800px, 768px, 568px, etc.) and then uniformly stacking or resizing columns at the same breakpoints project-to-project. Not all content within a 50 percent column should be stretched 100 percent at 800px, for example. Treating each content component with added care, beyond global grid rules set to match specific devices, will result in a thoughtful and more engaging user experience across platforms.
-
CSS Preprocessor Bloat – Performance is nothing new to front-end developers, with page weight being an important factor in this regard. In addition to minimizing server requests and getting your images “sprite-ed” or squeezed for file size, CSS paint, position and formatting rules continue to contribute to weight. CSS preprocessors have been collectively welcomed by designers and developers with open arms. While these language extensions, such as SASS and LESS, solve many of the code design and stylesheet maintenance conundrums that once stressed the community, they also have been used as an automatic assault weapon on page weight. The fundamental basics of CSS concision no longer reigns, Instead CSS creators are happy to nest and write additional rules to override other unnecessary rules because inheritance was forgotten long ago. Granted, any page weight savings from an elegant and efficient stylesheet can be nuked by one giant image, but CSS authors should remain committed to doing their part when working with preprocessors.
-
Stripped Mobile – Lastly, there is a school of thought that believes display content (i.e. the written word) is the most effective mobile render. To achieve this, a library of hidden elements are written into lower-end media query breakpoints. This runs counter to a mobile-first design and should be a red flag for poor design. With the advanced state of smartphones and tablets, interaction and digestion of “desktop-only” features and functionality should be a mindset of the past. Bring the rich content and functionality to all devices where possible. Users are accustomed to and often expect the same level of functionality as if they were on a laptop or desktop machine. If you remove it on mobile, there’s a good chance your desktop view doesn’t need it either.
Nataliya Kharchenko, chief editor at Cleveroad
On the web, the reality is that one size doesn’t fit all devices, needs and data requirements. Therefore, there is a growing need for layouts and content that work well across devices. Ignoring this fact leads to losing users’ trust, so we need to create responsive web designs.
You can easily have a website adapt to any size or to any device by making its elements and content sizable. So instead of using elements with fixed sizes, you may use relative measurement units, EM, REM or percentages. This is the basic idea. However, responsiveness isn’t limited to relative sizing.
By solely following a relative sizing concept, you won’t get the straightforward result you expect. The site elements may be too complicated on small screens and have gaps on large screens. That’s why media queries are necessary. The concept of media queries is simple – different CSS are used for different sized viewports based on width. For example, a single column layout fits a mobile, two column layout is suitable for tablets and three column is fine for desktop.
Summing up, there are certain requirements for website components to ensure responsiveness of any website. They are: grid-based or flexible layout, flexible media and media queries.
Finally here are a few tips from Cleveroad designers:
- Plan carefully
- Use prototyping software to refine your product
- Start with the mobile version
- Mind the navigation
- Limit the text usage
Dennis Gaebel Jr., writer and founder of GRAY GHOST, a web development and design business.
Responsive design has matured since we were first introduced to its seed via John Allsopp and Ethan Marcotte. At first, it began as an easy formula: flexible media, fluid grids and finally media queries. But that formula no longer holds true. It is much more than just three simple rules. Now responsive design relies on a plethora of factors, such as lazy loading, flexible typography, conditionally loaded assets, elements that react to themselves rather than screen dimensions, image resolutions that adjust to their context, and even images that crop depending on the size of the screen. To be frank, it is rather tedious and exhausting to take all this into account among the multitude of disciplines expected from developers.
When approaching responsive web design these days, one must really think about context. The term “mobile” no longer means a phone as far as I’m concerned. It all comes down to experience and performance. We need to take into account overall page load times, asset loading and order, image optimization, content strategy, progressive enhancement, accessibility and much more.
My suggestions are to find a workflow that fits your needs to achieve the best possible result with the previously mentioned facets. Don’t assume everyone will load your site fast: make sure the components on your page are there for a reason. I also suggest a more agile process where designers and developers work together vs. the waterfall approach where a designer makes a static comp in Photoshop and waterfalls it to a developer. The discussion must happen earlier and designers must embrace the flexibility of the web and be open and available to discussions about details that could improve, change, adjust, or tweak the course of the design.
Kerry Pivovar, web project manager at Red Branch Media
Responsive web design is so much more than stacking columns as viewports shrink. As real estate becomes more limited, content and user interaction has to be prioritized. This means showing the most important content first and cutting superfluous content better suited for larger viewports. Cut your hover transitions for touch devices, be aware of text sizes, and enlarge target links for those ‘fat thumbs.’
Creating a stress-free, functional and beautiful user experience at each viewport size is one of the most challenging – but also the most fun – aspects of web design and development. One of our favorite elements to include in a mobile design is an expandable accordion, which allows a lot of content to be shown in a limited amount of space with the option of user interaction.
Our motto at Red Branch Media is “test, test ,test.” We rely on BrowserStack to test a multitude of operating systems and devices without having physical access to them. A responsive design in the end is only a pretty picture if it doesn’t WORK!
Mihály Sáróy, developer at EDMdesigner.
The Non-Standard Field of Email
Have you ever heard of responsive email development challenges? Email is a special field without standards:
- You can’t use external CSS
- Can’t use JavaScript at all
- There are limitations in the supported CSS
- Images are often blocked by default
- There’s a restriction for recommended email width and size
- Top-quality content is required to get your message through to users, otherwise, the email gets deleted
- You must use layout methods perfectly displaying in email clients regardless of poor HTML and CSS support
The huge differences can be best examined by comparing layout methods of email and web development.
Most notable layout techniques of responsive web design use a fluid approach, media queries or CSS3 properties. In email, you have limitations with all of the above:
- You have poor support for width and height in desktop Outlook clients
- You can’t use media queries in clients where styles are not supported like some webmails and older versions of Gmail App
- You can’t apply CSS3 properties in most clients
- You often need to use attributes instead of CSS properties
- Table elements are the most robust way for many use cases, including background images to defining layout structure
- The email clients often change the received code by adding custom elements and attributes
- To top it all off the clients can remove the entire style tag
Broad client coverage requires creativity and determination.You need to know supported HTML attributes and CSS properties by each client and develop clever techniques to exploit the support differences.
First, you need to reset any property that email clients may add distorting the rendered view code sample. You should design different view for mobile and desktop with the rendering differences in mind. You also need to use table elements as structural elements (if you want to support different Outlook versions).
Drop Calc is a new technique that considers the imperfections of various email clients.
You define the calc() function as an inline style for modern desktop clients. It’s only supported by the most advanced email clients. You need to use media queries for modern mobile devices.
You’ll have fallbacks for legacy clients. Fortunately old desktop clients support classes while old mobile email clients can apply attributes. It also uses respects the rule of thumb of CSS rule priority order from the previous section.
Typical examples for modern clients with calc() support are Apple Mail and Thunderbird and the media query is applied in newer mobile apps.
A fallback class is applied in Outlook, while older Android devices will use the width attribute.
And that’s that – a round-up of expert opinions on what it means to design responsively in 2018. If you’re interested in reading more about responsive design, let me recommend:
- The article and the book that started it all, by Ethan Marcotte.
- Cloudinary’s general-purpose Responsive Images Guide, and our documentation on how to leverage Cloudinary to best use images in responsive designs.
