Responsive Web Design – Easy Steps To A Responsive Website!

Browsing the internet today is not limited to the desktop screen alone. Users are increasingly switching to web browsing through mobile phones, tablets or small notebooks, with screen resolutions varying from 320 pixels (for iPhones) to 2,560 pixels (for larger monitor screens). Thanks to HTML5 and CSS3 media queries, creating a cross-browser responsive web design is no more an impossible feat.

res

Let’s take you through 10 easy steps for designing a responsive website, this is just one approach out of the many that can be applied for getting a responsive web site, depending on the needs and nature of the site and other considerations.

1. Define The Viewport Meta Tag

The viewport meta tag modifies the browser viewing area. Therefore, the first step for responsive website design is to define the particular viewport meta tag. The default scale will be disabled and the tag will tell the browser to use the device width as the viewport width. You can include the following meta tag in your :

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

2. Create The HTML Structure

The next part is to define the structure of your website. This includes setting the page layout by defining the header height, the width of the content container, and of the side bar and the footer in terms of columns. You will also include any navigation elements and supporting images in your HTML structure if required.

3. Set The Features Of Your Style Sheet

Because you’d want your responsive website to have some basic features the same across all screen sizes, determine style features such as typeface, color, icons to be used, etc.

4. Start With Media Queries For The Smallest Screen

Now we move on to CSS3 media queries – the magic behind responsive web designs. It’s a good idea to start with smaller widths – about 320-480 pixels – as this will require you to only include the very essential content. Set the media query to a max width of 480px or less, and set the header height and font size accordingly.

5. Move On To Media Queries For A Relatively Large Screen

By a relatively large screen, we mean the screen of a tablet. So now you set the media query for a relatively larger screen with a minimum width of about 480px:

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

}

You can add more columns for the tablet screen to be able to display more content.

6. Define Media Queries For The Large Screen

Finally, you’ll write the media queries for the desktop screen. Set a maximum width of something like 769px or 1100px:

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

}

7. Add Content

Once you’ve defined the relevant commands, it’s time to add the meat to your website with the content. Add good content, including the most relevant ones for the small screen and more matter for the larger screens.

8. Make The Images Flexible

While you’ll be at it, don’t forget to make the images for your website flexible. Define the height and width of the image according to the media query for the relevant screen size.

9. Go For Flexible Embedded Videos

Using the same techniques mentioned above, you’ll also need to define the command for videos to make them flexible.

10. View The Final Demo

Finally, after all the things have been taken care of, you can view the final demo of your website. View it by resizing your browser, then check again on the iPhone, iPad, Blackberry, and other android phones.

Advertisements

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