5 Tips For Starting Responsive Web Design

According to recent analysis by ComScore the number of mobile users will surpass the number of desktop users this year. This means it is becoming vital that your website is smartphone friendly.

I’ve recently redesigned my website to make it easy to use on desktops, tablets, and smartphones by using responsive web design (RWD): the website layout changes depending on your screen size. In this post I’m going to share a few of the tips I found helpful.

Responsive webite for the Manchester University Maths Dept. Left: Desktop. Right: Mobile.

1. Choose your design carefully

Before you even start coding your website you need a good idea of what it will look like. If, like me, your artistic skills never developed beyond fingerpainting then you’ll want to look at some of the great examples here, here, and here.

Some of the things to consider are the

• Style: some recent trends are flat design and minimalism but some of the examples above are of “retro” websites too.
• Layout: columns/grids, menu and sidebar placement.
• Colours: good examples at colorcombos.com.
• Font: lots of free fonts from Google.
• Texture: a subtle (or bold!) texture can make your site come alive (examples).

Personally I like clean, minimalistic designs with bold colour schemes to keep the attention of the reader without obfuscating the content. My website content is displayed in a single column with a sidebar on the right (which disappears on the mobile version).

2. Create a mock-up page in HTML

Start by creating a single page to work on your design before creating your full website content. This has two benefits: firstly you can test everything on one page (images, table, lists, videos, etc.) and secondly it minimizes the amount of you may have to change to get your design working. Here is an example of a test page.

It is recommended to use the HTML5 main tag to contain all your content, seperated by section tags, whilst your sidebar could go in an aside tag. Remember to add id and class attributes to your content so you can style it in CSS, don’t add any style attributes in the HTML itself.

3. Responsive CSS

Start by applying the basic styling elements like fonts, colours, and the layout to your test page. A starter guide to CSS can be found here.

Now it’s time to make it responsive! The key to this is CSS media queries to change the style based upon the screen size. Here is an example that makes a picture float in the center when the device is less than 500 pixels across.

@media screen and (max-width: 500px),
       screen and (max-device-width: 500px) {
        #mypic {
        float: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        }
}

We use multiple media queries for a range of screen sizes to change the layout of the page.

This page has some tips on picking the correct pixel numbers (or ideally em values) for your website. The main points are:

• Design for a mobile first, work up to a desktop.
• Let your content determine the values (if it looks bad then change the layout now).

4. Hide your mobile menu without Javascript!

Once you’ve styled your menu for mobiles it will probably look something like the following.

Mobile menu from my website.

This is fine but we’d like to hide the menu when we press the word “Menu” at the top. We can do this using Javascript but some people don’t like to run Javascript in their browser for security reasons.

Luckily we can do this purely in CSS using the checkbox hack! We use an invisible (or off screen) checkbox to control the display attribute of the menu. You can find a working example here. There are also a number of other ideas for using the checkbox hack on css-tricks.com.

5. Further resources

Here are some other resources you might find useful.

• Social media icons in vector graphic format
• How to make a sticky footer
• Get a twitter widget for your sidebar
• Even more website examples
• 7 Modern Web Design Trends
• CSS hover effects for images