HTML5 Responsive Design Guide and Skeleton

Responsive DesignHave you ever wondered how to do these websites which work on desktop computer, tablet and even on mobile phone.

This guide is all about Responsive Web Design in HTML5 which allows this extremely powerful design since you only do one website instead of three platform specific ones.

Responsive Design

Have a look at this web page. If you use your mouse to resize the window you’ll notice that the page changes according to the size of your window.

Maximum resize.
Responsive Design Desktop

Average resize.
Responsive Design Desktop

Minimum resize.
Responsive Design Mobile

Magic in the CSS

The answer how to do this is in the CSS code of the web page. If you dig to the code you’ll find these statements:

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 767px) { }
and
@media handheld and (max-width: 479px), screen and (max-device-width: 479px), screen and (max-width: 479px) { }

So what these basicly do are optimization for different handheld devices. And it works just by giving these statements in the CSS code and writing special code in them which will be used when the window size is in the required region.

The magic is that these statements override the normal CSS settings when window size is small enough. So you them with that logic.

Tablet structure

On this example code we give tablet version of the page some padding and give main-navigation margin. Which does the effect that page works better on tablets.

Mobile Phone structure

On this example we do alot of stuff to the optimization for the mobile phone. Largest change is the navigation which we give a whole new life with with completely new CSS codes. We also change alot of the heights and widths to go with phones screens.

Source

Here are the links to the HTML5 web page skeleton and CSS behind it. You can grab them and learn from them to your own needs.

HTML5 web page

Style.css

  • Drew Stimson

    Brendan White
    is incorrect, as the real problem is in the @media declaration
    for mobiles. You will notice you have two closing curly brackets on
    this, and the first one before the CSS rules start needs to be removed.
    Always test your code before putting it online is the philosophy I
    follow. Just say’n…
    Peace
    Epiphany