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.

ManMathsSite-Resp.png

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.png

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.

Advertisements

4 thoughts on “5 Tips For Starting Responsive Web Design

  1. My husband was offered a job to work for a web design company and I never thought about all that was put into being a website designer. “Style, layers, color, font and texture” are just a few of the things that a web designer has to think about. I guess it’s how the website runs as well as how it looks!

  2. hey,
    This is my first visit on your website And your 5 Tips For Starting Responsive Web Design is appreciated,This post is knowledgeable for me Every web designer should focus on the points that you put in this article.Every web designer should focus on the points that you put in this article.
    These are very small things to tell but very important for web design.
    Thanks a lot for sharing such a great peace of info with the online community,
    With Regards,
    Sarah.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s