Responsive webdesign has become a catch-all term for making your website work well at low resolutions.
Smartphones revolutionized the mobile web, and tablets are throwing another wrench into the gears with their growing popularity. With all things considered, a website today could be experienced on a low resolution smartphone, a medium resolution tablet, or a high resolution desktop or laptop. When you throw retina displays into the mix, the number of potential screen sizes is dizzying. Ideally, your website will look and function gracefully on all of the above, at any resolution.
Responsive webdesign in itself is the process of making a website work on very small screens, very large screens, and at any resolution in between.
Over the last few years, the industry has collectively developed a shortlist of common best practices. Many of these practices focus on retrofitting websites intended for high resolution down to lower sizes. Others start at mobile and work up to the larger viewports, optimizing as needed. All of these practices can generally be categorized as either responsive or adaptive layouts.
Responsive vs adaptive layouts
Responsive layouts generally perform better than adaptive layouts, but in some cases (complex webapps for example) an adaptive approach could serve users better. Either way, the goal is to make your website always look its best at the desired resolution.
Before, many webdesigners had minimal communication with developers until the handoff. Now though, designers and developers have to work together through both the design and development process in order for everything to go smoothly. From user analytics to what can or can’t be rearranged when changing viewports—designers and developers are closer than ever, if not the same person. If you’re looking for inspiration as to what responsive or adaptive layouts look like, MediaQueri.es is a popular webdesign gallery that displays four viewports of a website.
Adaptive layout design & development
When the idea of responsive webdesign first started gaining ground, adaptive techniques dominated for a while. It’s easier to transition into designing and developing for these layouts, although they require more work than their responsive conterparts. This is also the route many people take when retrofitting an existing website to be mobile friendly. Because of the nature of adaptive layouts, they give much more control over the design of the website. You only have to design for specific viewports, and browsers only display the highest one that will fit in it’s width. These layouts are the ones that “snap” when adjusting as you resize your browser window. In fact if you resize your window to be smaller than 1024 pixels, you’ll see this sudden change I’m talking about as the layout of this website adjusts to focus on a medium resolution viewport.
Adaptive design
When designing for an adaptive development approach, the work is fairly easy. Before responsive webdesign became a thing, you simply designed one layout and then developed it. Now, you’ll design for multiple viewports, and develop them. Generally, it’s easier to start at low resolution viewports and work your way up. If you start with high resolution viewports and go down, things could end up a little…compact. And by the time you reach mobile, cluttered.
The number of viewports you design for is entirely up to you and the developer, work out a battle plan based on your users. If current site analytics show users mostly using low and medium resolution viewports, plan for those. You want at least three: one for low resolution viewports (smartphones), medium resolution viewports (tablets), and one for high resolution viewports (desktops and laptops). Ideally, planning for six is the standard, having a high and low resolution layout for each of the three viewports listed above. However, having too many more than that will make the development and maintenance too much to handle, so be wary.
Adaptive development
Developing an adaptive layout is actually quite simple as well. Assuming you’ve worked with the designer (or are the designer) from the get-go it’s just like developing a traditional website. You’ll start by developing the site at a mobile low resolution viewport. Once you get that done, we’ll use media queries to expand the layout for higher resolution viewports. Below are low, medium, and high resolution viewport media queries:
@media (min-width: 320px) { ... } @media (min-width: 480px) { ... }
@media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }
@media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }
This is where the “snap” comes from in the adaptive approach. Since we’re targeting multiple common viewport resolutions, going from one to the other when resizing the window may cause the layout to jump. As I mentioned before, adaptive design & development is only highly useful for retrofitting or for complex webapps. Designing and developing for this many layouts for independent viewports is much more of a hassle if it isn’t needed.
Responsive layout design & development
As of today, responsive design and development is the de-facto approach to use. While it offers less control over the layout compared to an adaptive approach, it’s much less work to implement and maintain as you technically only have one layout. It’s also more customized for the website too, and this is the key selling point. You’ll be able to make your own breakpoints based upon when your design breaks or doesn’t look as intended.
Responsive layouts also include fluid layouts. Before responsive webdesign caught on, fluid systems were popular – layouts using percentages for widths. While they certainly worked well in most cases, that was before we had smartphones and tablets. Now, most fluid layouts are augmented by media queries at very low and very high resolutions. Otherwise you could end up with highly compact or immensely large layouts.
Responsive design
While you have a very simple guide to follow with adaptive design, responsive design isn’t so clear cut. There is heated debate that designing in the browser is the best way to go about it—designing and developing at the same time. Since you’re essentially going to take all viewportsinto consideration when designing, there is more work involved on the design side. Ideally, we want to keep the viewports in mind, but not design for any particular one. If possible, try to meet at a middle ground; Focus on mid resolution viewports while keeping in mind the layout will need to adjust for lower and higher resolutions later.
It’s exceedingly important to use existing user analytics if you have them. If your site already has analytics that demonstrate your audience primarily reads from low resolution viewports, design with a focus on those. Target your audience, even if that means ignoring some of the best practices out there. In the end, your website is going to be serving them, not the people aggregating these ‘best’ practices.
Responsive development
Once the design phase is complete, development is where the real fun begins. As mentioned before, if you have analytical data of your typical audience, start there. Once you get your layout developed, you’ll use media queries to make it responsive. Instead of defining set viewports though, you’ll instead manually resize your browser until the layout breaks. When that happens, that is your breakpoint width—add a media query to fix the break in design and continue on resizing. Ideally, you’ll be doing this from a high resolution device so you can see all viewports. Once you ensure you have support for low and high resolution viewports, move on to testing.
Custom or mixed layout types
Rarely, You may encounter a website that uses a custom solution, such as WebdesignerDepot. Generally speaking, the majority of the web falls into either the responsive or adaptive groups as outlined above, but sometimes people get creative and make their own solution. WebdesignerDepot does so by starting with the standard low, medium, and high breakpoints, then supplementing as needed inbetween when the layout breaks. On top of that, the layout is also fluid in nature up to a set max resolution. With this in mind, get creative and build something that breaks the norm!
Browser testing responsive and adaptive websites
Unfortunately, there really isn’t any good solution to browser testing these layouts yet. Thebest way to go about testing is to do it manually: loading up the page on your phone, tablet, laptop, and anything else around. You can also use a viewport spoofer in your browser if it supports such an extension. Ripple Emulator is an extension I use in chrome to test some low resolution viewports. While it’s certainly inconvenient to manually test on devices, it gives a more accurate impression of the functionality your site has. UI that looks alright on an emulator, may actually perform quite poorly on an actual device.
In conclusion
As extensive as this article is, this is simply a primer on the subject of layout types. There is a lot of information about responsive webdesign methods not included in this article; Optimizing UI elements & typography, responsive images & media, device pixel ratios, and much more isn’t explained here. However, there are plenty of sources for such knowledge, in much more information dense forms. Since the idea of responsive webdesign came around, we’ve contributed to an exceedingly vast wealth of knowledge on the subject. I hope by explaining the difference between layout types here, you’ll be able to better have a handle on the idea of a responsive web… without getting lost down the rabbit hole.
The community is constantly creating new techniques and constructing creative solutions to problems we’re only just starting to encounter. So while there is a vast wealth of information available about responsive webdesign out there, it’s a concept still in it’s infancy. While best practices and common use cases are easy to conform to, being creative and paving your own solution is always encouraged. If you have any tips or suggestions for those of us just getting into, or extending our knowledge of responsive webdesign and development, spark a discussion below!
--- Content Featured image/thumbnail used by webdesignerdepot
