WHAT IS RESPONSIVE WEB DESIGN?

Responsive web design is an overall approach to building websites that encompasses web specification standards and flexible design models. The philosophy behind it stems from the desire to make the web accessible to as many devices as possible.

Responsive design ensures that a website displays properly on desktops and mobile devices like smartphones and tablets. This relatively simple idea has spawned an entire generation of frameworks and tools like Bootstrap that automate much of the grunt work involved in designing responsive sites.

WHAT IS RESPONSIVE DESIGN?

Around the late 2000s, web designers faced some new challenges when smartphones started to dominate. An explosion of different devices hit the market, with the first-generation iPhone leading the way. Web designers were walking through a digital minefield of cross-compatibility problems when it came time to building websites. They had to deal with inconsistencies with window width, screen resolution, different input devices, and numerous other idiosyncrasies that took forever to fix.

In response to this problem, the open source community of software engineers and designers got together to create a set of standards to achieve better cross compatibility. Those standards helped shaped best industry practices, which include responsive design. Collectively, these methods and specifications are known as responsive web design.

DO I NEED TO USE JAVASCRIPT IN A RESPONSIVE WEB DESIGN?

You don’t need JavaScript to create a responsive design website. Clean, functional responsive design is possible with nothing more than HTML and CSS. That said, JavaScript will make everything a lot nicer, simpler, and more user-friendly.

There’s no shortage of experts on discussion boards who’ll tell you to avoid using JavaScript with your responsive site because not everyone has it enabled. The truth is, however, that only about 1% of all users disable JavaScript in their browsers.

HOW RESPONSIVE DESIGN WORKS

Responsive design enables us to optimize the presentation of a web page for many devices with a single piece of source code.

This allows you to create similar experiences across different devices, or tailor a web page for a specific device.

There are three main technical aspects of responsive web design:

1. Fluid Grids

2. Flexible Media

3. Media Queries

FLUID GRIDS

Fluid grids enable your design to adapt based on the user’s hardware and software. The main concept behind a fluid (responsive) grid is that the layout adjusts according to the client’s browsing environment.

Methods used to create a fluid grid involve sizing content with relative (i.e. percentage) units coupled with the use of CSS media queries. Fixed grids, on the other hand, use absolute units such as pixels or centimeters.

• Fluid Grids: Ethan Marcotte explains the fluid grid, and shows tricks to calculate the dimensions.

• Using Fluid Grid Layouts: A tutorial on creating fluid grids in Adobe’s Dreamweaver.

• Basic Responsive Grid and Media Query Reporter: An easy-to-follow tutorial on how to build a pixel-perfect responsive grid.

• 
  

FLEXIBLE MEDIA

Part of responsive web design is getting the media to adapt to the browsing environment. Some of the elements on the page may need to be resized, or removed from the display completely for certain devices. The resources below show you how to use tags and relative units for responsive media elements.

• CSS Box Model: Understanding the CSS box model is essential to placing content. This is the official documentation of the box model.

• Fluid Images: A very helpful method for creating images that automatically resize based on context.

• W3Cs CSS Units: The official reference on units.

• CSS Units from Mozilla: A good introduction to values and units in CSS from the Mozilla Foundation.

• Viewport Meta Tag: learn how to use the viewport meta tag to optimize the display for mobile devices.

• Responsive Typography: get more control over the typography with this type of configuration.

MEDIA QUERIES

Fluid grids don’t address all of the problems posed by the growing number of different screen sizes:

• On smaller screens, the layout may appear crowded

• On wider screens, the layout may appear distorted.

In response, the W3C introduced the media query as a component of CSS3 to help fill in the gaps. Today most browsers support media queries.

Media queries determine information about the browsing environment, such as the device, screen resolution, and viewport size. The media query makes it possible to do things like adapt the typography based on device and screen resolution.

• Using Media Queries: Mozilla Foundation’s docs on using media queries.

• CSS3 Media Queries: The official CSS3 docs on media queries.

• Standard Device Media Queries: Useful cheat sheet of media queries for the most popular tablets, phones, laptops, and wearables.

• Media Query Example: Media query example from W3C docs

RESOURCES

TUTORIALS

• Responsive Design in 3 Steps: The simplest and clearest responsive design tutorial on the web. It’s the one to read if you’re just looking to see the bare bones of what responsive design is all about and how it works.

• Responsive Web Design for Beginners: Helpful, free articles. You will find many other tutorials on this site as well.

• Guidelines for Responsive Design: A great set of design guidelines that are as relevant today as they were when they were written.

• Sizing Images with Responsive Web Design: Another simple tutorial on sizing images with an interactive demo.

• A Guide to Flexbox: A very easy to understand guide to flexbox, a CSS layout module that enables you to build responsive layouts.

• Progressive Enhancement: Progressive enhancement is about enriching the experience with features that are specific to a given user interface (phone, desktop, etc).

• HTML5 & CSS3 Tools: A live HTML5 and CSS3 playground. Have fun!

• Responsive Web Design: This tutorial from Yello VP Shay Howe is long, clear, and comprehensive. It’s the lesson you want if you understand the basics of responsive design and want to learn it fully.

TOOLS

Below are tools that will make development a lot easier. We provide responsive grid frameworks as well as testing tools. With them, you should be on your way.

Responsive Grid Frameworks

• Bootstrap: An extremely popular framework in HTML, CSS, and JavaScript for building mobile first, responsive design websites.

• Foundation By Zurb: Billed as the most advanced responsive framework in the world. They’ve got an impressive portfolio and great, simple documentation.

• Skeleton: An extremely simple responsive boilerplate you can either download or copy/paste straight into your project. It’s great for small projects.

• Pure: A single responsive grid or framework, but a sort of library of CSS modules developers can sample and use in their web projects. It’s built around minimal CSS with a mobile-first bent.

• Montage: Responsive template for photography websites.

• Susy and Breakpoint: When used with Breakpoint, Susy can help you build a responsive site fast, with very little coding and a whole lot of design options.