A quick guide to responsive design

 

So our office has been doing a lot of work with responsive web design, and while I’m by no means an expert on the subject, I thought I’d give a brief tutorial on what I’ve picked up.

 

What is it?

So the first thing we need to cover is what exactly is Responsive Web Design. Well, it’s a technique that we can use to have one website be rendered no matter what device is viewing it. So whether its a smart phone, a tablet, a desktop, or a futuristic toaster, the page will be displayed correctly.

 

Why use it?

Now, at this point you may be thinking, “But I already have my main site and my mobile site, why should I bother with this?” Well, for one, you don’t have to update content in two places. For another, there are more devices with web capabilities other than just desktops and phones. Video game consoles for example. We as web professionals need a method of providing our content across all devices.

First things first, size matters.

Your site needs to be as light as possible. A mobile device with horrible connection should still be able to download it within 30 seconds.

Here are some hints:

• Try to keep the entire page be between 500 KB and 1 MB
• Limit your images to about half of your total size.
• When possible, use CSS styling over images. You’d be surprised what you can do.
• Create a CSS sprite sheet to limit HTML calls.
• Have your server optimized with GZIP compression.
• Compress your images to be web optimized.
• Minify your CSS and JS files into one file when possible. (YUI Compressor, Minify)

Fluid Grids

Fixed sizes are your enemy. If you have an element that is 500 pixels across, and you try to see it on a device with a max width of 300 pixels, it will bleed off to the side. So you need to figure out what the equivalent percentage should be.

Example

• Your original layout had maximum of 1000 pixels across and you had an element that was 400 pixels wide.
• Instead of having the maximum layout be 1000 pixels, make it 100%
• Have the 400 pixel element become (400/1000) * 100 = 40%
• Badaboom, no matter the width of the browser, the element will be to scale.

Media Queries

CSS3 has a great little new feature called Media Queries. The style sheet basically receives information about the browser and it allows it to change the layout of the page accordingly.

For example:

@media screen and (min-width: 480px ) {

.someClass { display:none;}

}

You can do multiple media queries to completely change the layout of the page depending on the variables of the browser. Here’s some reading for Media Queries.

Adaptive Images

A nice large image may look nice on a nice wide monitor but it is wasted on a smaller screen, so why download the huge image if you don’t need to?

My recommendation, use a little library I wrote here in the office that, depending on the device, return a smaller image that is more appropriate for that device.

Adaptive Scripts

You may be used to using Javascript or CSS libraries to help you code some pretty nifty websites. However on lower end devices, such as mobile phones, those scripts are eating up the precious little processing power they have, slowing down your site!

So I’d recommend that little script I mentioned earlier to only load those libraries on appropriate devices. They won’t slow you down if they’re never loaded, saving both on processing power and download time.

Build up

My last bit of advice for you, my responsive newbies, is begin your design from the lowest end up. Start by imagining what your website will look like on a phone. When that design is done, change the layout in steps.

And that’s it, hopefully this will help you make an elegant responsive design.

FIU Web Communications is a full service web team that provides support and consulting for departments at FIU. If you need help in implementing any of your web needs, please contact us.

If you enjoyed this post, please consider leaving a comment or subscribing via rss feed or email to have future articles delivered to you.