HTML5 responsive layout

Ivan Chichkov's picture

To answer few questions about how to address diferent screen sizes for devices on the market, I have prepared a simple example.
Normally, we see 3 categories of mobile devices:
1. phones with 480/800
2. phones with 640/960
3. tablets 1024/768
and the rest go to various sizes up the scale. so grouping these as standard, high resolution and tablet sizes.
Now, according to our training and guidelines, remember the content should stay same, so applications can be developed using simple HTML. When the information architecture and design is final, is the moment when you know what the content to display contains. Now, try to work out the best layout for it. Pay attention that you will need to mark up all (or most) of your html tags with id's or class'es in order be able to address them in our style sheets.
A simple html:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" type="text/css" href="../styles/flex.css">
<title>Untitled 1</title>
</head>

<body>
<h1 class="appHeader">AppHeader</h1>

<div class="navBar">
<a href="../demo/pageone.html">One</a>
<a href="../demo/pagetwo.html">Two</a>
<a href="../demo/pagethree.html">Three</a>
<a href="../demo/pagetwo.html">Four</a>
<a href="../demo/pagethree.html">Five</a>
</div>

<div class="appSpace">
<canvas class="appCanvas"></canvas>
</div>

<div class="appFooter">
Status bar
</div>

</body>
</html>
 that addresses an application simplified application layout can be formatted for different screen sizes using css:
//css start here ..
{
//first declare style for bigger than 1024/768 styles
}
//address the iPad style screens
@media screen and (max-width:1024px) {
//declair all elements styles here for 1024/768 resolution 
.navBar {
  background-color:aqua;
  color: white;
 }
}
//address high resolution
//address normal phone screens
@media screen and (max-width:640px) {
//declair all elements styles here for 640/960 resolution.
navBar {
background-color: darkgrey;
color: white;
}
}
 
//address normal phone screens
@media screen and (max-width:480px) {
 //declair all elements styles here for 480/640 resolution
.navBar {
  background-color: blueviolet;
  color: white;
 }
}
//css end here..
As the example shows, by using the @media query we can say to browser which resolution we target with following styles.
Also, inside style declaration use percentages no fixed values:
top:20%;
left:10%;
etc.
This way the UI layout stays consistent and small screen size differences will not affect the user exparience.

Taxonomy upgrade extras: