Making A Responsive Website

Share This:

On my last blog post I spoke about how to make a redirect script for your website. So your website would redirect to a different site if it was viewed on a mobile device. Let’s assume you don’t want to have to worry about remaking a whole site just for mobile devices. Yeah I know some people don’t like to have any fun.

Here I will talk about making a responsive website. This means it will adjust to the screen it is being viewed on. One thing I think everyone in the world hates is have to scroll all the way to the right on a website. If the site is responsive this will never happen to your website viewers.




Make The Website

The first thing we will do is make the website as we usually would do.

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Website Title</title>
</head>

<body>
<h1>Hello World</h1>
</body>
</html>

As you can see the above HTML code is your usual HTML5 coding. Nothing new their. And obviously a site that basic doesn’t need to be responsive. But lets say we have images and a lot more text as well as video. This is where problems may occur. All of that may cause our browser to make us scroll to the right in order to view all the content. This can get annoying to the viewer. So lets fix it.




In between <head> </head> tags we will place some extra meta tags.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />

Images and other media

The above code should fix most of our problems. But lets adjust images and video content as well just to be safe. We will do this using CSS.


img { max-width: 100%; }

As you can see with the above CSS code. We are targeting all of the <img> tags. It is worth mentioning that the above method wont work on older web browsers, such as Microsuck’s Internet Exploder 6.




Because we do have limitations with the above method, we will use the Nicolas Gallagher technique. To do this we will find all of the <img> tags and we will add the data-src-600px= and the data-src-800px= so all of our <img> tags should look like the following.


<img src="image.png" data-src-600px="image-600px.png" data-src-800px="image-800px.png" alt="" />

Now lets get our hands dirty with CSS again. Lets add the following to our CSS file.


@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}

@media (min-device-width:800px) {
08.
img[data-src-800px] {
09.
content: attr(data-src-800px, url);
}
}

Great now we’ve got something extremely sexy. But we’re not going for just sexy. We want orgasmic. And we want our visitors to stay. Since the above only deals with images. And we will most likely be adding video. We will need to make some responsive code for our video.

Most sites use YouTube or Vimeo. So we will use the Elastic video technique.

Vimeo


<div class="video-container">
<iframe src="http://player.vimeo.com/video/XXXXXXX?title=0&;byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

YouTube


<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/XXXXXXXXX" frameborder="0" allowfullscreen></iframe>
</div>

And once again in order to get the above videos to be responsive properly we will need to add some code to our CSS file.


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Great. Now we should have something that is freaken orgasmic. So lets save our work and fire it up in a web browser. Now if all goes well when we resize our browser everything should auto adjust itself.




Finishing Touches

We may want to adjust the text if we feel that we need to. We can easily do this just adding some code to our CSS file.


html { font-size:100%; }
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }