It's no secret that mobile web traffic will soon leave desktop traffic in the dust — sooner than you think. In the US alone, mobile accounts for 20% of web traffic. More than half of all traffic in Asia and Africa comes from mobile. On top of that, there are thousands upon thousands of devices that can be used to access the Web. Designing responsive websites that work across all devices is how we can rise to meet this challenge.
Responsive Design, a term coined by Ethan Marcotte, allows you to build one fluid site that can shrink or stretch to fit any screen size on any device. With fluid grids, flexible images and media queries, we don't have to whip up a separate, mobile-dedicated website. We only have to build one, which is a time saver. We can rapidly prototype and move quickly into production code.
Designing responsively enables us to build for four corners, no matter the size, rather than one specific device.
The Perks of Designing Responsively
There are many benefits to responsive design. Here are a few of them:
Rapid Prototyping and Iteration
With a responsive framework, you can rapidly prototype and iterate on your designs, cutting down significantly on the development of your product. You can create coded wireframes that allow you to see how your designs might function on a desktop, a phone or a tablet.
Works Across All Devices
A responsive framework allows for your designs to nicely nest on smaller devices and expand fully on larger ones. By designing responsively, you don't have to worry about your designs not working across all devices.
Designing responsive sites allows you to be prepared for devices that don't even exist yet because you've already ensured that your product will scale to any four corners.
The Three Tenets of Responsive Design
When Ethan Marcotte coined the term Responsive Design, he also come up with three tenets that hold true to this day.
A flexible, fluid grid that isn't fixed and is easily adaptable to any screen size.
Media that isn't fixed-width pixels and can be proportionally resized by the browser.
Allows us to select specific styles based on certain device characteristics and classes.
Getting Fluid with the Grid
It's the foundation for your responsive designs.
The term grid brings to mind rigidity, an inflexible and stagnant system that doesn't bend or move. However, grid systems have a variety of helpful benefits.
Yet, when it comes to responsive design, we aren't talking about an old school 960px-locked grid. What we need is a fluid grid, one that is flexible and based upon percentages rather than pixels. Columns determine the width of where content is placed, whereas the content will determine the height. This type of grid can scale up or down, depending on the screen size of the device it's being displayed on.
As Ethan Marcotte has put it, a flexible foundation is crucial for responsive design to be effective.
Benefits of Building With The Grid
Build with the grid puts your design at a huge advantage:
A grid ensures consistency between webpages, reducing CSS coding errors. It also helps with reliable HTML placement.
With a grid system, you're not coding from scratch, which saves a lot of time. Another boon is that the grid makes iterating faster and easier.
A grid not only allows us to organize elements, but also offers control over the visual and structure of the page.
Here are a few concepts that you should be familiar with when it comes to a responsive grid.
A box model is part of a browser. We recommend using box-sizing to change the type of box model a browser uses. This allows for backwards compatibility with older browsers.
Source ordering allows you to have the order of your mobile site and your markup be different from the grid on your page.
With a semantic grid, you can attach grid properties to elements in your markup that are semantically correct. A semantic grid requires a preprocessor, such as Sass or Less.
A fluid grid allows for sub-grids within the existing grid — or nesting. This allows for more complex and visually interesting layouts.
Offsets allow for additional space between columns in a row. Offsets are essential to ensure consistent legibility and that coveted breathing room.
Examples of Some Heavy Griding
More on Fluid Grids
Ethan Marcotte's original article arguing for the use of fluid grids.
Building A Modern Grid System
ZURB's Design Lead and Partner Jonathan Smiley delves deep into what it takes to build a modern grid system.
Rethinking CSS Grids
British designer Mark Boulton makes the case for why we must rethink CSS grids.
Taking Responsive Design Beyond The (Fluid) Grid
Webmonkey makes the case for breaking beyond the fluid grid when it comes to content-driven responsive design.
One Flexible Image to Rule Them All
Flexible images aren't locked in fixed pixels.
What we mean to say, of course, is flexible media, which includes images and videos, that can adapt depending on the screen size. This type of media doesn't depend on static pixels or fixed sizing.
Flexible images are responsive in HTML to the width and height of a screen, as well as every pixel density from low res to retina displays. To make this happen, images are set at their max-width of 100% so that they can can rest in the grid, adjusting accordingly to a variety of screen sizes.
However, this is easy to do partway and hard to do right. Flexible images are simplest with just CSS and scaling with the grid. Harder is loading the right resources for the right device. It's possible to use hidden-classes to swap larger images for smaller ones on mobile. But both images will still load, which can muck up the performance of a page. This is something that we still have to work on to perfect.
More On Flexible Images
The Road To Responsive Images
.net Magazine goes in-depth on responsive images and what they hope to achieve.
Which Responsive Images Solution Should You Use?
CSS Tricks examines the various solutions you can use to get your responsive images working.
Responsive Images For HTML 5
A few responsive image solutions for HTML 5.
Ethan Marcotte delves into fluid images and what they mean for responsive design.
Desktops, Tablets and Smartphones, Oh My!
Adjust page elements to your preference with media queries.
Sometimes we have to adapt to our environment or we have to make our environments adapt to suit our needs.
That's basically, in a nutshell, what media queries accomplish since they are specific styles based on certain device characteristics, such as screen size, orientation or pixel density. In other words, they allow you to adjust page elements however you want.
By setting specified attributes, you can control whether an element on the page appears larger or smaller. Or you can omit the element altogether for smaller or larger devices. The possibilities are practically endless.
When it comes to responsive design, media queries are the dilithium crystals that ensure we achieve warp speed. They are a crucial element in ensuring that we optimize our pages across multiple devices.
Mobile First vs. Desktop First
Luke Wroblewski, or LukeW, first coined the term Mobile First after seeing the explosion of mobile web traffic. The main tenets of a mobile-first approach:
- Mobile is exploding across the globe
- Mobile keeps you focused on important data and actions
- Mobile extends your capabilities
Founder, LukeW Ideation & Design
When a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites.— Luke Wroblewski, Founder, LukeW Ideation & Design
More importantly, designing mobile first means we're not building sites starting with the desktop view and gracefully degrading down to smaller devices. Going from the desktop to the mobile, we may find that not all of our content will neatly shrink down and fit. With mobile first, we can progressively enhance from a smaller screen to larger ones.
A huge boon for a mobile-first approach is that it takes account that some devices and browsers, like IE7, don't fully support media queries.
Developing With Media Queries
With media queries you can make your page adapt in big or small ways to a variety of criteria. Media queries are what make it possible to have a great experience, no matter what the physical hardware is like.
Media Queries and the Navigation
One common use for media queries is to make changes to your navigation. Consider a simple horizontal nav like you might find on a marketing site: Products, Team, Experience, Contact, etc. On a larger display that might work fine, but a wide nav on a smartphone will not. With media queries that check against the display width of the device, we can have a horizontal nav become vertical, for example.
This is a very simple example, but the key component is the media query. We’re stating that this applies to screens (this is pretty standard and there are some other options but not widely used) and that we want the following styles to apply if the screen has a max width of 767px, basically anything less than 768px.
Media Queries and the Grid
Perhaps the most common use of media queries in responsive designs is to make changes to a typographic layout grid. Most grids are built to be desktop first — they start by creating rows and columns, sometimes that are a fixed pixel size and sometimes percentages. On small devices those columns become unreasonably slim, so the simplest solution is to abandon them on small devices and have the content simply flow down the page. A simple example might be:
Very simple, but very effective. Many frameworks that support responsive design do something like this by default, though some follow a mobile-first philosophy and use media queries to add the column sizes back in, rather than removing them.
Media Queries and Content Length
A final common use for media queries (and don’t get us wrong, there are a lot of uses for media queries) is to manage the readability of your content. Using media queries to increase or decrease font size, and thus increase or decrease the content length of a line, is a common practice that can really help users have a better experience with your site.
Try using media queries to change your header and paragraph sizes, line heights or even typeface. There are some interesting and handy things that can be done by experimenting in this area that we won’t get into right here.
More On Media Queries
The W3C recommendations on media queries.
Responsive Design: Harnessing The Power Of Media Queries
Google's Webmaster Central Blog dives deep into using media queries to create responsive sites.
Responsive Web Design: Media Queries and Layouts
Onextrapixel examines the relationship between media queries and responsive layouts.
Breaking Down Media Queries For Responsive Design
Here's the lowdown on media queries and how you can use them for responsive design.
Still Room for Improvement
We're just beginning to solve a lot of the problems with living in a multi-device world. That being said there is still plenty of room for improvement when it comes to responsive design.
Traditionally, navigation has run horizontal to a page. But with responsive web design, navigation has to collapse vertically and not overpower the page. It also has to scale, so tons of links and nesting won't work either.
Images have to be able to scale for different devices and still be large enough to handle big displays. But high-pixel images even if it's hidden can muck up a page's load since it will still load. But better solutions are on the horizon.
Making large data tables work in a responsive design can be a pain in the butt. They can't overflow and can break a responsive layout. That means you won't get to see all the data or be able to compare rows with a key column. Although, there are some solutions out there, like this one.