Tips for Planning and Structuring a Responsive Website Layout

This page may contain links from our sponsors. Here’s how we make money.

The process of building a naturally responsive layout takes quite a bit of practice. You'll need to spend time studying other responsive websites to see how they behave. Then with a visual library of responsive elements you can put together a design that best suits your project.

Once you've built a few responsive websites the entire process melds together quite nicely. I'd like to a few share tips on building responsive layouts and what you need to know. After a bit of time you'll get much more comfortable with layouts expanding & contracting based on the browser window. Since more people are online with their smartphones, responsive design offers the most accessible websites reaching the widest possible audience.

Going Responsive

The best alternative solution for responsive web design is to create a separate mobile website apart from the main layout. And this could work… frankly it was the only solution back in 1999. But we also didn't have iPhones and tablets back in '99. So it's fair to say that times have changed and designers have moved on with the times.

Responsive websites work by targeting specific pixel values for the browser width. You then write new CSS rules to rearrange the layout once the browser is above or below that pixel width. So for example when a browser drops down to 500px you might remove the floating navigation menu to make it a blockline element instead.

The traits of a responsive website are very simple to learn. It gets difficult when you're new to the idea and you need to translate an existing layout to be responsive. This is why it helps to check out responsive websites for inspiration – I'd recommend Media Queries since they include multiple screenshots at varying sizes.

rwd responsive media queries homepage

The Crucial Elements

Websites are not very complicated but they can appear to be. When resizing down from a larger window you often need to rearrange or remove entire pieces of the design. This is especially true for aesthetic items like icons or fullscreen slideshows. Anything which isn't necessary for the main content should be hidden or updated on smaller screens.

But also think about the items which are absolutely essential and cannot be removed. Page headers & body content, navigation, input forms, these things need to be resized but kept in working order. The best way to learn is by trial and error to see what size paragraphs are best. How big is “too big”? That question will have different answers for each website.

Think of the smaller responsive layout as a more compact version. You need to get across all the vital information but in a smaller window of space. This is why off-screen navigation becomes popular because it can stay hidden until it's needed.

Setting up the Document

Standard HTML includes header elements called meta tags which add extra details about the webpage. A while ago I wrote a post about mobile meta tags which explains how to setup your document for mobile support. Smartphone browsers like Mobile Safari will force an entire website to fit into the smaller window – then users are forced to pinch and zoom in closer.

The specific meta tag is viewport and it sets up the required scale for responsive websites. This will stop the browser's default zoom setting and force the responsive layout to be 100% width. Here's the code snippet you need placed in the header:

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

There are other meta tags you might consider but this is all you really need. Other than this code you'll want to learn about CSS3 media queries to create the responsive layout changes.

Basic Media Queries

This process doesn't exactly require a full tutorial, but many have been written on the subject. My favorite guide is from CSS Tricks which explains all the basics you'd need to know. The post even has sample code snippets you can copy and edit as needed.

Generally speaking, you will wrap updated CSS styles into a media query which only activates beyond a certain threshold. This threshold is usually set in pixels using either min-width or max-width values. Minimum width works for any widths at or above that value. Maximum width targets anything equal to or below the value.

I typically use max-width because it will setup new CSS properties as the browser gets smaller. So a max-width media query of 800px will look normal in a browser window of 801px, but immediately updates at 800px. If we need the layout to update again just set another max width(perhaps 480px for iPhones). CSS properties will cascade based on the selector position, so it's easy to overwrite certain properties for smaller screens.

Related Tutorials

If you want to learn more about responsive CSS or jQuery then check out the tutorials listed below. Each one features a useful design technique for creating responsive website layouts. jQuery is great for building animated menus and responsive slideshows, plus CSS3 includes properties for media queries targeting any screen size – even HiDPI phones and tablets.

CSS-Only Menu

css only navigation menu tutorial

Responsive Image Slider

responsive image slider tutorial with jquery

Fluid Images

fully responsive fluid images css

3-Line Dropdown Menu

bars hamburger menu dropdown nav responsive

Sliding Drawer Menu

responsive css jquery sliding drawer tutorial

CSS3 Media Queries

css3 media queries responsive web design tutorial

Responsive Videos

elastic youtube videos responsive tutorial

Responsive Audio Player

touch friendly responsive audio player jquery tutorial

Designing for a Responsive Web

howto design for a responsive website guide

Mobile-First Responsive Menu

responsive navigation menu mobile first tutorial

Closing

I promise that with enough practice you'll start to see RWD as the clearest and easiest solution for each project. These days it is best to consider every UI solution regarding responsive websites. A naturally-adapting page can work on every device with a single set of HTML/CSS code. Keep studying eventually you'll pick out which responsive trends seem most popular with online users and web designers.