Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 10th, 2016
Website responsiveness

Why should we make a website responsive?

A responsive website, is a website that changes it the styling (sizes and placing of DOM elements) according to the size of the users device.
This has multiple advantages like:

  • Making the site more user and device friendly,

  • A responsive website renders a alternative mobile page useless, which means less code.

Example of a responsive page

Images make things easier to explain. This example is taken from my portfolio. Later we will get into coding. The first image (left) is a screenshot of my portfolio in a relatively large window, and the second image (right) is in a somewhat smaller window.

These two examples above share the same HTML code, only the media query’s made it possible to change the position and sizing of the elements. The same information is shown in both situations, but a mobile user doesn’t need to zoom in and out the page.

How to use media query’s

As in the example, we are going to create a little .html file and css in the same file for demonstration purposes. To make this responsive, we are going to use media query’s. With media query’s it’s possible to style a element according to a maximum or minimum screen width.

    < !DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8"/>
            <title>Voorbeeld</title>
            <style>
                body{
                    width: 720px;
                    margin: 0 auto;
                    text-align: center;
                }

                h1{
                    font-size: 48px;
                }
                h2{
                    font-size: 32px;
                }
                h3{
                    font-size 24px;
                }
                p{
                    font-size: 14px;
                }
            </style>
        </head>
        <body>
            <h1>Example h1</h1>
            <h2>Example h2</h2>
            <h3>Example h3</h3>
            <p>
                Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Maecenas ut nibh quis tortor varius faucibus et et nibh.
            </p>
            <img src="img/exampleImg.png"/>
        </body>
    </html>

This is just a regular .html file with some styling. Now we are gonna change the layout and font-sizes according to a set screen size.

We are now going to add the media query, this is done by writing this code between the existing style tags:
<style>
@media (max-width: 720px){
body{
width: 500px;
text-align: center;
}
h1{
font-size: 32px;
}
h2{
font-size: 20px;
}
h3,p{
font-size: 14px;
}
img{
float: none;
}
}
</style>

When you add this to the page styling, every element described in the media query. Will get this styling when the screen width is equal or less then 720px. It will look like this:

This is just a simple example of what media queries can do. In the most responsive sites, there are a lot more then just one media query. The possibility’s are endless.

Posted by Stefan Streur

Leave a Reply

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