Responsive web design is the art of creating a website that conforms to different devices and allows people to see and interact with websites on phones, tablets, and computers easily. The first variable width browser website was Audi.com in 2001, Cameron Adams created this in 2004 that demonstrates the early stages of responsive design as it started to be a real possibility for more browsers, ‘Responsive web design’ was coined and further pioneered by Ethan Marcotte, in an article in 2010 and subsequent book in 2011.
Responsive web design has come along way in the last 5-6 years, becoming super important to web design and most web designer’s modern process. If you’re a CMO or marketer who’s companies site isn’t responsive yet, welcome to the modern age and get on that. Most of you are aware and are looking to the future though, so here are frameworks and trends!
Choosing Between Responsive & Adaptive Design
One thing you know for sure — if you want your service to cover as many people as possible, go online. It’s the Internet where your potential clients are looking for the service you can provide. The next truth is that if you want to cover even more users, go mobile. So, you have probably considered creating a website with dedicated web design, and iOS / Android apps with dedicated mobile app design. It seems pretty costly.
However, we have a better option for you. Instead of creating both above-said products: a website and apps, make your website accessible to anyone and here is how. The website that is responsive (or adaptive, depending on what you choose by the end of the article) can generate more loyal users than a website and mobile apps together, and save your money.
What is Responsive Web Design (RWD)
According to the most credible source on the topic, the book written by E. Marcotte “Responsive web design”, the concept of RWD is to create a single website for all possible devices and browsers. The design adjusts to the screen size and looks as though it was created just for this particular device, no matter whether it is a desktop or mobile browser. Let’s now see how designers achieve this.
Components of the Responsive Design
To meet the requirements of the responsiveness, the website should have at least one of the following features:
- Grid-based layout, also known as a flexible layout. The website layout changes in proportion to the screen size. It is possible due to percent-based sizing. The main unit of measure is percent and em (for fonts), not pixels. This means if you have a table on the page and the column takes 30% of the screen, it will be so for any screen.
Note! Keep in mind small mobile screens and huge TV screens. Set a minimum and maximum width in order not to make your responsiveness look weird.
- Flexible media. Images, videos, and any other media content should change proportionally to the size of blocks where they are placed. Take into account that media files also may require minimum and maximum values.
- Media queries. Being a part of CSS standard, they let the page get optimized according to the screen resolution of a particular device.
Mobile responsive website
How to know if the website is responsive? Just drag the browser’s corner changing its size. If the content looks good on different screen sizes, it means creators took care of users, making the website automatically conform to changes. Summing up the main properties of the responsive web design, we can conclude that it doesn’t actually care about a device it’s going to be opened on. Mobile responsive sites are a bit longer to design and develop, however, the benefit of much longer survival is worth waiting.
What is Adaptive Web Design (AWD)
Unlike responsive web design, adaptive design is grounded on creating design for pre-specified screen resolutions of different devices. Let’s say you can create a website optimized to the most popular screen widths (320px, 480px, 760px, 960px, 1200px, 1600px) or analyze your target audience to know for sure what devices they might use working with your website and create all necessary layouts.
Adaptive design strategies and techniques
Progressive enhancement and graceful degradation are the two main strategies used within adaptive design approach. Let’s find out the essence of each.
Progressive enhancement strategy implies creating versions of your website from the oldest of browsers in use. And then gradually website versions are created for more contemporary browsers. The main benefit of such approach is that you get a working product very early. That you make your website with static content more complex and dynamic.
Graceful degradation strategy follows the same principles but in an opposite way — you create a website for the most modern browsers and then adapt it to the older versions of browsers.
Another principle you can adhere when creating a website is a Mobile First prinсiple аfirst mentioned in L. Wroblewski’s book. The Mobile first principle is very similar to the progressive enhancement strategy. Everything is simple here — the design is created for a mobile look (the content usually has a concise and simplified view). Then, the mobile website is enhanced, getting more content and dynamics.
Adaptive design summary
Adaptive design is characterized with multiple design layouts for certain groups of devices. So the web design that is created following adaptiveness may have these features:
- Website design may be different on different devices.
- Website content may vary on different devices.
Comparing the design strategies
Let’s sum up and try to fetch out pros and cons of both Responsive and Adaptive web designs.
Responsive web development
- Single URL which simplifies website promotion.
- Google regards RWD as a mobile-friendly strategy and improves website SEO rates.
- Easier and cheaper maintenance.
- Overloaded screen for mobile devices.
- Unified product for all devices (lack of customizability).
Adaptive web development
- Improved targeting. You can specify the content of your website according to the device.
- Customized design.
- Costly and complicated development.
- Complex maintenance.
Responsive or Adaptive: How to make the final decision
It’s worth mentioning that there’s no definite opinion which one is better. That depends on your objectives. However, let’s try to draw a line with a few recommendations.
The Responsive website is suitable when:
- You are limited in time and money.
- You strive to create a simple and clean website design.
- You want to simplify the process of updating and maintenance.
The Adaptive website is suitable when:
- You are sure about devices your target audience uses.
- You are not limited with time and money resources.
About the author
Nataliia Kharchenko is a Marketing Copywriter at Cleveroad Mobile and Web development company. We are focused on helping startups, small, and medium businesses create competitive and winning software.
So I’ve been wanting to write about Responsive grid options out there and what to use for some time. Before we get into the list of what’s available, I need to point out that this list is ANYTHING but exhaustive. There is an infinite number of good responsive grid options out there on the internet, and with the advancement of Flexbox and CSS Grid, you don’t really need to always even integrate a premade responsive grid.
However, I build a lot of sites (something like 60+ in the last few years), and I can say that having a starting point that takes the math of out it is priceless in terms of what it saves you on time and sanity. Yes, there are going to be times where it doesn’t make sense to use a framework – there will also be times it doesn’t make sense to code your own grid. These just happen to be a few options that I know of and have come across before, so take my opinion and this list at face value.
At the end of the day, it’s up to you, dear developer, which you’d like to use. 🙂
Unsurprisingly enough, this list is going to start with the most popular responsive framework out there. Twitter Bootstrap boasts itself to be the most widely used and downloadable responsive UI framework on the internet today, and it’s rightly so. The framework comes with everything you need to build even the most basic static HTML website & UI in record time.
Alternatively, I would also argue that the size of the library and the amount of components Bootstrap boasts can also be a bad thing. If you’re working on a highly customized lightweight project, I would stray from using Bootstrap simply because you’re gonna pull your hair out fighting pre-set styles that don’t align with the style of your project. This is probably the biggest problem I run into when using bootstrap. Resetting some of the typography and button styles to fit can be a massive pain in the arse.
Skeleton CSS is one of my favorite, fun little frameworks to use. Although it doesn’t really call itself a framework. It’s a boilerplate. Is there a difference? I haven’t really dug deep enough on the internet to find out. What’s more important is that Skeleton CSS is super easy to use and incredibly lightweight.
The benefits of Skeleton revolve around the fact that it clocks in under 400 lines of code and provides a solid responsive grid for your project. It also includes a variety of typographic, button, and form input styles. It even has some grid utilities to help push and pull some grid columns. Skeleton is perfect to use if you need a lightweight starting point for your project and intend to design and build more customized styles.
Skeleton also uses Raleway as it’s default font which is a major plus in my book (Bootstraps Roboto can SUCK IT).
However, I’d say that the ultimate drawback about Skeleton CSS is that if you aren’t comfortable with building out more advanced CSS styles and layouts into your project, then you might have a hard time getting started. Skeleton often leaves me wanting more if I need a bigger jump start. It also needs to be downloaded and loaded directly into your project as it does not come with its own hosted CDN for integration.
I need to admit that I’ve never used the Zurb framework, but that doesn’t mean you shouldn’t. The thing about Zurb is that it offers a TON of functionality and has a big community of people who like to use it. The documentation is rock solid as well. It calls itself, “The most advanced responsive front-end framework in the world”, and that’s quite the tall order. However, after taking a stroll through the site and documentation, I’d have to likely agree despite the fact that it might not be the most popular.
The pros of the Zurb are that it has everything you need to build your project (like Bootstrap). It comes with button styles, grids, cards, layouts, navigations, backward-ass floats (if you need to build stuff for IE), accordions, and probably cooks you breakfast in the morning too.
The documentation is endless, so you shouldn’t have any trouble getting this loaded into your site. I think my favorite thing about Zurb though is that it allows you to choose the type of Zurb framework that you need. You can pick CSS or SASS and then hand select every component you need. You can then download the exact version you desire and start building. That way you aren’t fighting a bunch of pesky pre-determined styles (like Bootstrap) for your project.
Oh, and it also comes with an email Zurb counterpart (if you design and develop custom emails). I actually think I may give Zurb a try after writing this….
The cons of Zurb – well it’s hard to find some because it pretty much offers everything Bootstrap does and is more customizable. However, if I had to pick a drawback, it’s that there since it’s the most advanced responsive front-end framework, it comes with a ton of documentation on how to get started. All of that documentation and framework options can be quite overwhelming especially if you aren’t advanced enough to be able to dig through all of that and make sense of it. That alone would have pushed me away from the beginning in terms of getting started. So make of it what you will and if that doesn’t scare you, then give Zurb a shot.
Like Skeleton CSS, Flexbox Grid is lightweight. Flexbox Grid is actually more lightweight because that’s exactly what it is. It’s just a good old responsive grid based on flexbox. There are no bells and whistles when it comes to this. There are no utilities, no styles you have to fight, NOTHING else. And in a way that’s the pure joy of it. I’m not even going to write a major pros and cons list for it because there’s not much else to say.
I’ve personally used this one in a variety of projects because it integrates well with old sites. I’ve had a number of clients with massive, complicated sites running 3-4 years ago who need new landing pages built. Instead of haphazardly wading through their website and figuring out how the heck it works, I just drop in a little Flexbox Grid and BOOM I’m off the races.
Okay, there’s generally more work than that like setting up new Wordpress templates and making sure I pull in the right header/footers, but that’s a horse of a different color entirely.
My only gripe with Flexbox Grid is that it’s a few years old. But you know what they say — Do it right the first time and you’ll never have to do it again. Flexbox Grid is literally what you get and to me, there’s a beauty in that. Use this and be at peace with the fact that you do the rest of what you need from scratch.
Material Design Lite
Unless you’ve lived under a very large rock, you’ll have heard of Google’s design standard called Material Design. Material design is what Google’s entire product UI is based on. It’s a major guide on how to implement typography, spacing, content blocks, cards, images, and colors. Well, you can thank the internet for turning that into a usable and downloadable framework for you to build your UI with. I haven’t used this personally (actually I might’ve tried in a past personal project, but can’t really remember).
The pros of Material Design Lite is that it offers a lot of the stuff that Bootstrap and Zurb do. You can pull it in via CDN and be off to the races. At this point, it’s kind of expected for something of this caliber. It even offers some more advanced integration for building with BOWER and NPM (that stuff is above my paygrade). Something I really really like about Material Design Lite are the micro-animations that come with it — like what happens when you click the buttons. I also seem like Google’s aesthetic more than I like Bootstraps. It’s more modern looking in my opinion.
The con about MDL is that the framework and documentation aren’t really geared towards designing websites. It is, but it isn’t. What I mean by that is while you certainly can build a website with it because it offers the HTML to do so, it doesn’t explicitly offer a basic HTML template get started. It’s really meant for dynamic web apps and highly dynamic websites where the database is driving repeatable styles and content.
It also assumes that you have a pretty good understanding of what you’re doing. That may make it too advanced for some of y’all (which is fine, I’m not hating). While I’m pretty sure someone out there made a Frankenstein of Bootstrap and MDL, I’m not even going to try and post that here. Those abominations shouldn’t exist. So at the end of the day, you can make your own assumption if this is the right thing for you.
Responsive Web Design Trends
1. Content first design
2. Mobile-first design
3. User-oriented everything, more user testing on mobile devices
4. A/B Testing and data specifically for mobile
5. Evolution of Flat Design, but balanced with more clues as to the function of buttons and tools as to be very clear on what something does.
Let’s get into why these trends will be important and a little about how you might be able to utilize them over this next year.
1. Content First Design
Jeffrey Zeldman once said “Content precedes design. Design in the absence of content is not design, it’s decoration.” I’ve gotten a lot better at educating my web design clients, and have started educating them that design is best when I have as much of the real content as possible. But I remember years ago I would be attempting to design something with such little content that the design had to change entirely when I got the content. The headlines were way more words than I planned for, the body text was too little or too much and the photos weren’t the same size or laid-out in the same way as my filler content. Designing in the absence of content is decorating – so this next year, resolve to make design all about the content and nothing more or less.
[bctt tweet=”“Designing in the absence of content is decorating.””]
‘Content first design’ is the commitment to education of clients that working with them to get the content to be the best it can be, whether with a copywriter or photographer or both simultaneously and as a high priority while designing. It’s an understanding that designer’s don’t just make things pretty, we’re trying to share the content first and foremost and present it in the most compelling and visually striking way to catch people’s attention. If the design is standing out, separate from the content – it may not actually be a great thing after all – unless of course the website is selling design. But not every website is an agency site – design accordingly.
[bctt tweet=”“Not every website is an agency site – design accordingly.””]
Content first design also is a commitment to advise a client on what kind of content they should have on their site. Don’t take a passive role and cringe when they include horrible pictures of their mom and cat- be the change you want to see on the internet and play the broader – marketing advisor role in the process. You’re clients – and your portfolio – will thank you.
2. Mobile-first design
Mobile traffic is up to 47.9% ! My God. Gone are the days of tacking on mobile design at the end of a process, now it needs to directly in the center of the process – and mobile-first design is a great way to prioritize it. This needs little explanation, but I will share some of the benefits from my perspective;
Mobile-first design helps you simplify things down to the most crucial elements first and foremost
If you subtract things on the mobile design, do they really need to be added on desktop?
You don’t end up with functions (like really involved hover functionality) that possibly shouldn’t be used anyways because it won’t work on mobile and will need some backup functionality.
Here’s Google’s traffic on mobile from this past year:
3. User-oriented everything, More user testing on mobile devices
Where were you when it became hip to say ‘User Experience’ every 10 minutes in a client meeting? Well I still feel like 2016 will be a climax to the real meat and potatoes of the thinking behind User Testing becoming even more popular. You can get started with User Testing by reading a couple amazing books on the subject; “Don’t Make Me Think,” “Lean UX,” “Rocket Surgery Made Easy,” and “The Design of Everyday Things,” or you can just go down to your local coffee shop, buy a couple of gift cards and ask a couple people to try out the website you’re designing (on a prototyping tool or a basic coded version.)
The books will help provide the context for this practice, but the idea is that User Testing is simple, and doesn’t need to be made that complicated. Here is a basic script, and remember that you’re always testing the site or application and not the person who’s trying it out. If they don’t get something or you see them struggling, take note. It’s that empathy that’s becoming so important in web design and it’s the same for responsive web design – you need to be aware of how people are looking at the site on their phones. A way to test online remotely is UserTesting.com. If you’re already using user-testing to amp up your design process, congrats you’re ahead of the pack – but are you testing enough on mobile devices?
Sometimes super simple things that would otherwise go unnoticed get uncovered and become super obvious with just some really basic mobile user testing. A really comprehensive responsive web design process this next year should be enhanced by regular mobile user testing.
4. A/B Testing and data specifically for mobile
Designers sometimes seem to think they don’t need to be involved in the ‘marketer’s tools.’ Things like Unbounce, Optimizely, LeadPages, and Inspectlet. But just like User Testing, ways to see what the real patterns are for people using the site are extremely important for making measurable changes. With a combination of Analytics, User Testing, and A/B Testing, designers can not only make better, higher converting websites, but they can speak more authoritatively on what works and what doesn’t.
It’s important to note, that A/B testing requires good guesses (and a solid amount of traffic) and so you should research what is likely to move the needle as far as getting more contact form submissions, selling more product or sustaining traffic and any other types of conversion you’ve set up as a key performance indicator on the site. Designer’s who implement landing pages and get data back from those efforts and who A/B test their and other’s designs with services like Optimizely are 10x more likely to be able to say with any degree of certainty what design patterns do and don’t work out in the wild. Test your assumptions. And watch your designs get more and more effective.
I love the tool Optimizely, and you can get started with a basic package for free. (Not an ad, Optimizely is just a really cool service that you don’t have to be super-programmer to implement.)
5. Evolution of Flat Design, but balanced with more clues as to the function of buttons and tools as to be very clear on what something does.
I predict that many designers will start using a little bit more ‘affordance’,’skeuomorphism’ or visual similarity to physical objects to clue people in as their function, but without sacrificing the progression we’ve made with flat design and the simplification and white space that’s has been ushered in with the rise of flat design. A middle ground so to speak.
I see this the forward-thinking iconography I’m seeing on Dribbble, Pinterest and Behance, and the rise of material design from Google that mixes the two together to create a common visual language that is becoming pervasive for both responsive design and mobile apps.