Build for Four Corners, No Matter the Size

The team behind the world's most advanced responsive front-end framework, Foundation, bring you tips, resources, and best practices for successfully launching websites into the responsive future.



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.

Four corners

The Perks of Designing Responsively

There are many benefits to responsive design. Here are a few of them:
  • Icon iterate

    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.


  • Icon multi device

    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.


  • Icon future

    Future Friendly

    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.
Grid sketch

Fluid Grid

A flexible, fluid grid that isn't fixed and is easily adaptable to any screen size.

Flexible images sketch

Flexible Media

Media that isn't fixed-width pixels and can be proportionally resized by the browser.

Media queries sketch

Media Queries

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.

Building zurbian

Benefits of Building With The Grid

Build with the grid puts your design at a huge advantage:
Uniform

Uniformity

A grid ensures consistency between webpages, reducing CSS coding errors. It also helps with reliable HTML placement.

Less

Less Code

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.

Structure

Structural Control

A grid not only allows us to organize elements, but also offers control over the visual and structure of the page.


Grid Concepts

Here are a few concepts that you should be familiar with when it comes to a responsive grid.
  • Icon box

    Box Model

    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.


  • Icon ordering

    Source Ordering

    Source ordering allows you to have the order of your mobile site and your markup be different from the grid on your page.


  • Icon semantic

    Semantic Grids

    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.


  • Icon nesting

    Nesting

    A fluid grid allows for sub-grids within the existing grid — or nesting. This allows for more complex and visually interesting layouts.


  • Icon offset

    Offsets

    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


Don't just take our word for it, take a look at these responsive fluid grid layouts.

For the HTML code for these layout and more, head over to our HTML Layouts page.

Grid

So Boxy


Workspace

More on Fluid Grids

  • 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.
Images sketch

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.
  • Fluid Images
    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.

Adapting sketch

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

Mobile first
Luke Wroblewski
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.

Ie rip sketchA 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

  • 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

    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.

  • Tables

    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.


Back to the Imminent Responsive Future


There are a few good tools out there when it comes to responsive design. Of course, we prefer Foundation (shameless plug). But no matter the tool you use or whether you create a responsive framework out of scratch, designing responsively is how we race toward the future.
After all, friends don't let friends design in 960px.
Score an awesome product engineering or design job:
via ZURBjobs
Stay on top of what's happening in responsive design with Responsive Reading.

Curious? Read Last Month's Edition »

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×