Home » Tutorials » HTML5/CSS3 » Creating responsive web design

Creating responsive web design

responsive webdesign

In this tutorial I will show you how to code your website in a way that it automatically conforms itself to multiple screen sizes. No matter if you open your website from laptop, tablet or smartphone, it will still look good.

What is responsive design?

To see it in action, just open this article on a desktop pc browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser.

Using HTML5 and CSS3, Future Tutorials will show you how to make your website responsive.

Required skills

Basic HTML and CSS knowledge.

Let’s write some code

First you need to insert this meta tag in the head section of your html.

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
It is crucial for getting the responsive technique to work on smartphones.

You can also insert some IE9 support:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Building your website

You should build your website in a standard way, using HTML5 and CSS3.

Make the images auto resize by using max-width:100% and height:auto.

img {
max-width: 100%;
height: auto;
}

Advertisement

It’s also good to use percentages than pixels for all of the elements in the page.

Min-width makes an exception. It’s the opposite of max-width, but we use pixels for it. It is used to prevent the element of getting too small.

min-width: 80px;

Responsive Design

The main philosophy of the responsive design is that you write different CSS styles for the different resolutions. We achieve that by using media queries.

You can write your responsive CSS in your main style.css file, or create a new file – for example responsive.css. Of course you must add your responsive.css styles as the other styles in your html:

<link rel="stylesheet" type="text/css" href="responsive.css">

Now in your responsive.css file we make the separation for the different screen resolutions.

/*  TABLET  : 1024px */
@media only screen and ( max-width: 1024px ){
/* <strong>The styles for 1024px width tablet</strong> */
}

/* TABLET  : 768px */
@media only screen and (max-width: 985px) and (min-width: 768px){
/* <strong>The styles for 768px width tablet</strong> */
}

/*  Phone  : 480px */
@media only screen and (max-width: 767px) and (min-width: 480px){
/* <strong>The styles for 480px width Phone</strong> */
}

/* Phone  : 320px */
@media only screen and (max-width: 479px){
}

That’s it. It’s not that complicated, isn’t it? All you have to do is to write your CSS code between the {} for each device. Then just resize your browser window and enjoy seeing your website change from one resolution to another.

In this tutorial I will show you how to code your website in a way that it automatically conforms itself to multiple screen sizes. No matter if you open your website from laptop, tablet or smartphone, it will still look good. What is responsive design? To see it in action,&hellip;

Review Overview

Useful tutorial - 68%

68%

User Rating: 3.99 ( 11 votes)
68

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Check Also

Change placeholder color

Style HTML5 Placeholder with CSS

In the previous tutorial, I showed you how to create a responsive HTML5 Mail Form. ...

One comment

  1. Great concerns permanently, you just acquired your emblem fresh readers. What exactly might you highly recommend regarding your current publish you built some days back? Any kind of specified?

Leave a Reply

Your email address will not be published. Required fields are marked *


Loading Facebook Comments ...