Step One The Layout
After you have decided that your website project must use responsive design, it is important to take time to think about the layout.
Designers are generally accustomed to building websites that apply to an all around best width (1024768, 320480). When you are developing a responsive website, you have to think a little differently.
Thinking in Style Tiles
For some inspiration you might take a look at using style tiles, a newer way designers are thinking about responsive design.
You also might think about using adaptive images in responsive design. By using images that are also responsive you add to the user experience!
I highly recommend beginning with thinking about your mobile layout first, and build progressively upward. If you are using responsive, you had mobile in mind, so begin with that!
Step Two coding for responsive design
First things first
Familiarize yourself with using css media queries. This is the first step in building a responsive website. Using media queries is not the only way to create a responsive website, but it is probably the most efficient. It is a good idea to use some other resources as well to bootstrap for older browsers and different operating systems which I will detail a bit more below.
Use this tag in the head section of your code:
This will inform the browser to set the window width to the device’s width without overriding any user needs.
Then in your CSS, add this brand new at-rule:
This is an in-progress W3C spec written to move this viewport information over to CSS. IE10 and Opera browsers support this. Go ahead and start rolling this into production sites.
- don’t use px units, use em units
- Use liquid layouts
- dont try to be perfect
Try a responsive grid system
If you are familiar with using css grid layouts, here is one I recommend for responsive design: 1140 Grid.
Tools for older browsers
Using media queries (@media) is great but remember that this alone isn’t really responsive design. You may have to add other tools to make older browsers work as well. Here are a few tools that can be helpful with this:
- CSS3-Mediaqueries.js CSS3-Mediaqueries.js, by Wouter van der Graaf, enables older versions of IE and other browsers to effectively test and apply all kinds of media queries.
- Adapt.js Nathan Smith, author of the original 960.gs grid system, has written Adapt.js, a script which detects browser dimensions and serves only the required stylesheets – like media queries but without media queries, meaning it works in older browsers too.
- Respond.js The one issue with responsive design is that browsers that can’t read media queries get left behind. This may not be an issue with your target audience, but it is still a good practice to accommodate users on older browsers. Respond.js, by Scott Jehl, only supports properties min-width and max-width.
Step Three Testing
There are some really great tools out there for testing. You cant test enough when it comes to responsive design, and below I am including some very helpful ones:
- The Responsinator a tool that will show you many different layouts in one page
- Adobe Shadow a tool that will allow you to test on multiple live devices simultaneously while developing.
- Shim Shim is a node.js app that enables simultaneous, synced web surfing across a variety of devices and browsers.
Now that you have had a chance to review some hints, tips, tricks and tools to build a responsive site, it is time to get started!