Responsive web design, or adaptive web design, means that you build a website that automatically adapts to the visitor’s screen resolution. This is particularly important nowadays, when your visitors are surfing both in computer, mobile phone and tablet.
For those who never tried to build a responsive website allows this safe sick advanced, but believe me, it is not! Here you will learn how simple it is to build yourself a website or blog so that it works just as well on the computer on your mobile!
What is responsive web design?
A common website for the computer are typically too large, for example, an iPhone and you are forced to visitors zoom in and out all the time to read the text. Responsive web design automatically scales down the website and adapts it for the smaller screen.
I recently rebuilt Webbhjälp.se to make it adaptable. You can try out how it works by changing the width of your browser window, or go to Webbhjälp.se in your phone. Since I only recently made those changes so I am happy to receive feedback on improvements and any errors you find!
Is Wizard difficult?
If you use WordPress and think that this guide is a premium for you, so I can also tell you about the post customize your WordPress blog for mobile. Where you will learn how to use a plugin to automatically get a mobile version of your website or blog. The advantage is that you do not have to do the job yourself, the disadvantage that the appearance of your blog is not preserved for those who surf mobile.
Enough talking, now let’s get started! In this example we will build a website that is most 960px wide. If the screen is smaller than that, as adjusted max-width automatically to fit the screen.
We are starting to build up our website in the traditional way. We choose to have a wrapper around the entire side of 960px, a header is 200px high, the actual content of the box is 600px wide and our sidebar 300px wide. We finish it with a footer. The code would then look like this:
#pagewrap {
width: 960px;
margin: 0 auto;
}
#header {
height: 180px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
Width becomes maximum width
But if we want to make this design with responsive, how do we do then? The key here is relative values, which means that instead of fixed pixels using relative percent. Sounds difficult? It’s not nearly as complicated as it sounds!
We begin by setting a maximum width instead of a fixed width on our wrapper. This means that if the browser window is smaller than the maximum width, then our wrapper reduced to window size.
#pagewrap {
max-width:960px;
margin:0 auto;
}
Pixels are percent
Since we also want our content box and sidebar will adapt to the window so we must count on their pixel values to percent. We accomplish this by taking the width and divide it by the width of our wrapper. Do we eg figure out the content of the width in percent taking we do the following equation:
600 px / 960 px = 0625. Multiply by 100 (0.625 x 100 = 62.5%) and you will get your percentage.
When we made the same with our sidebar (300/960 x 100 = 31.25%), we replace our fixed pixels with relative percentages instead:
#content {
width: 62.5%;
float: left;
}
#sidebar {
width: 31.25%;
float: right;
}
Now we have a layout that adapts to the window size and our relative values ensures that the aspect ratio is maintained regardless of how small the screen is.
Time for Media Queries
Smaller screen means less space and it is important to use the space available. Here are the absolute best in responsive web design in, namely media queries. With the help of media queries, we can detect what your visitors have for screen size and example make use of a different stylesheet for the screen size is smaller than a certain value.
In our example, we decide that the screen width 700px or less should our content box use the entire screen and the side bar will instead end up in the content itself. We accomplish this by adding a media query in our CSS file, where we first check if the screen is smaller than 700px. If so, we give our sidebar and content box value float: none, and even change the width of the respective items to 100%.
/* --- För skärmar med bredden 700px eller mindre --- */
@media screen and (max-width: 700px) {
#content {
width: 100%;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}You can use as many media queries you want. Do you want to eg remove your sidebar altogether when the screen width is less than 480px, you can do as follows:
/* --- För skärmar med bredden 480px eller mindre --- */
@media screen and (max-width: 480px) {
#sidebar {
display:none;
}
}
![iphone responsive problem]()
iPhone problem
iPhone problemIf you ever surfed in an iPhone, you know that websites scaled to fit on the screen. You can then zoom in and out to navigate and read the text on the page. The problem is that although we have built a customisable page, so it will still be scaled, which we obviously do not want. To prevent this from happening, we add the following code between our tags:
< meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Internet Explorer problem
Internet Explorer, paper balls Traditions are there to be followed. No web projects without any problem with Internet Explorer, we have learned by now. Internet Explorer 8 and earlier do not support media queries, which of course is a problem. We can, however, using javascript ensure media queries also works in IE. Add the following code just before the tag on your website:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->Customisable Images
It is important that even your photos on the website adapts in size, otherwise you may find that they break your design. This we avoid easily with these small code that ensures that the images can never be greater than the container they are surrounded by. The last line is for it to work even in Internet Explorer 8, which does not support this
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Custom frame / border on your images
If you use frames / borders to your images, you may wish that these will be customisable. Unfortunately it does not work to enter the border-size percentage, but there is a really smart trick from the CSS wizardry that we can take:
img{
max-width:98%;
padding:1%; /* Padding som dubblerad och ihop med bredden ovan tillsammans blir 100%. */
background-color:#fff; /* Färg på vår fejkade border. */
}Customisable videos
Videos are one of the more difficult things to do customisable. I myself use this Web Help, the following code, which so far has worked well.
embed, object, iframe {
max-width: 100%;
}S T A R T !
I told you it was simple! Follow these steps and you have quickly built a website that works equally well in the computer in the mobile. Do you have any questions or comments, and I’ll take more than happy to receive them in the comment field below. Good luck with your customised design!
The post Custom Responsive web design – easier than you think! appeared first on Tekmark.
