This is a series of posts to help you and/or your business create a solid responsive design strategy. Whether you are working alone or with a web designer or agency, the questions posed in this series will prepare you for the responsive web design process.
Prepare to roll your sleeves up a bit. There are no prerequisites other than a desire to create a clear and compelling web presence that increases the value of your business.
Responsive Web Design Terms
Before jumping into the series, this introductory articles seeks to provide you with an overview of terms related to Responsive Design. This article will define terms such as responsive design, fluid design, adaptive design, mobile first and content first.
While these are all buzzwords, they are important concepts in understanding how to access the material found throughout this series.
This article will also lay the groundwork for understanding how responsive design can save you time, money and frustration while giving you a website that clearly and effectively communicates with your clients.
A Brief History of Responsive Web Design
Before Responsive Design, layout was one of the first things people thought about when designing for the web. Many web designers came from print backgrounds.
In print, the canvas was always a specific size. Whether it was a magazine spread, or the cover of a book, print designers knew the dimensions that they were designing for.
With the explosion of mobile phones and tablets, the canvas of the web now has infinite screen sizes and resolutions. Your website may be viewed on a high-definition television or a smartphone.
The point is, there is no longer a fixed canvas. People are seeking out your business information on all sorts of devices. Responsive Design came along a few years ago as a solution to this important problem.
In 2010 Ethan Marcotte wrote an article on A List Apart and effectively coined the term Responsive Web Design. Responsive Design, as coined in his article and book requires a design to have a fluid grid, flexible images and media queries.
Fixed Width Design
There are a few other terms that often get lumped together with Responsive Design, and it can help to understand the differences. Fixed width design allowed designers great amounts of control over layout, typography and other graphic elements. This allowed designers to think about web pages as static pages similar to pages found in a magazine. It led to some beautiful designs that looked great at very specific screen sizes.
Fixed width design values control over flexibility
Fluid Design was possible long before Responsive Design. There was a long standing debate in the web community between the benefits of fixed width vs. fluid designs.
Fixed width offered designers greater amounts of control, but fluid design was more flexible to the needs of the user’s experience.
Even before the onslaught of smartphones and tablets, advocates of fluid design believed all users would have a different experience of the web, depending on variables such as monitor size and browser window size.
The web, by nature, is fluid. HTML, without applied CSS, will flow to be 100% of the width of the page’s body. As a browser window shrinks, text adjusts. Fluid Design embraced this fluidity before Responsive Design was even a possibility.
HTML text on the web is fluid by nature. Fluid Design (and Responsive Design) embrace this fluidity.
Responsive Design wasn’t possible until media queries were fully supported by modern browsers. Media queries allowed web designers to change how content appears at different screen sizes.
Media queries made it possible to change CSS properties at different breakpoints (usually the size of the browser’s width). In short, fluid design evolved into responsive design with the help of Media Queries.
Is Adaptive Design the Same as Responsive Design?
Responsive Design and Adaptive Design often get lumped together too, but they have some major differences. Adaptive design sets fixed width breakpoints (often based on common devices).
Adaptive Design will serve different versions of the site to different devices based on common screen sizes and resolutions. This approach is considered less future-proof than responsive design because the screen sizes of common devices are constantly changing.
Responsive Design is built around a fluid grid vs. adaptive design’s fixed grid. Think of the difference like a light-switch. Responsive design is a fader switch that smoothly changes the mood lighting. Adaptive design is your standard on/off switch. If you’re on an iPhone you get one design, and if you’re on an iPad you get another.
The reason adaptive design is not future-proof is because screen sizes and resolutions of popular devices are constantly changing. The argument about responsive design vs. adaptive design, in many ways, mirrors the older debate around fixed width vs. flexible layouts.
Proponents of fixed width and adaptive designs like the control of knowing the size of the canvas they will be designing for. Proponents of fluid and responsive designs feel that any attempt at guessing the users viewing experience is illusory.
Advocates of Responsive Design believe the fluidity of our multi-device world must be accepted to achieve a future-proof website.
So, What is Responsive Design?
Rather than setting breakpoints at common screen sizes (like adaptive design), Responsive design makes decisions based on the needs of the content.
Web designers will often grow and shrink their browser windows to analyze type, margins, padding, line-height, and other layout considerations. When a line of text or an image is uncomfortably squished or has too much space, a breakpoint will be added via a CSS media query. The text, image or layout will change size based on the needs of the content.
Responsive design also uses flexible images so that images scale depending on the width of the browser window or device. There is actually a lot more to talk about in the world of responsive images as working groups are currently working out specifications for how to best handle image sizes, but that is for another blog post.
Fluid Grid + Flexible Images + Media Queries = Responsive Design
In short, responsive design is defined as having a fluid grid, flexible images and CSS media queries. Responsive Design has become the current industry standard for how a website should be built.
While not always the best or most practical solution, a responsive site is often the best solution to ensure you reach your customers, no matter their device. Responsive Design requires a new mindset for how to design for a web that constantly changes size and dimensions. Some of the following terms and concepts evolved to help re-envision how to think about the responsive design process.
Responsive Web Design: Content First
Content First is often part of a responsive design strategy. Design can no longer afford to be decoration. It needs to be information that quickly loads and gets users to reap the benefits of your business.
If your navigation menu or company message is not clear, concise, and fast-loading on a smartphone; you may be losing clients, trust, credibility and money. Having a content first strategy, respects your clients/users time and attention.
Having a content first strategy, respects your clients/users time and attention.
Content first helps you focus your messaging, navigation patterns, branding and site structure. It is all about directly communicating with your customers. Design decisions around typography, color and imagery are all meant to serve the needs of the content.
Responsive Web Design: Mobile First
Mobile First and Content First are related. Mobile First is about designing for the smallest sized device first. From a development perspective, mobile first means all of the initial CSS styling that gets coded will be targeting small screen devices first. Media queries and CSS properties are added as more space becomes available at larger breakpoints. (rather than starting with a desktop design and adding breakpoints as less space becomes available).
Mobile First is not just about how a site is developed. It is about prioritizing content so that important information reaches the people who seek it, no matter what device they use.
Mobile First requires a dedication to precise language, clear information architecture and a desire to have a lean highly usable website. This isn’t to say the site has to be minimal. As larger screen breakpoints are added, there is more room for larger images and varying layout possibilities. But even at these greater screen sizes, mobile first concepts can still help guide design decisions.
What information is vital to a design’s usability? What information and content does this site really need, no matter how small or big? Other posts in this series will help you begin to explore how to create a powerful and clear web presence that works on all devices.
What are your experiences with Responsive Web Design? Do you think all sites should be responsive? I’d be curious to hear your thoughts in the comments!