RedGage

HTML5 and CSS3 are two of the most revolutionary technologies that have taken web design and development to the next level. Today there is a huge demand for responsive websites. By responsive design we mean websites that react to a viewer’s environment. In short you build a single website and that caters to your visitors on desktops, smartphones and tablets all of which have different screen sizes. Responsive design is all about getting three things right. They are :

1.Flexible gird based structure
2.Media queries and media query readers
3.Flexible images and media, dynamic resizing or CSS

To get a responsive website you will need to make the right use of technology. Let us now understand the advantages of using HTML5 and CSS3 for responsive web designing. HTML has acted as the building block for web development since the infancy of the Internet. The latest version HTML5 has come out with many interesting tools and features that are helping developers build robust websites. It allows you to build a responsive website from scratch. If you are not interested in doing so you can make use of the HTML5 responsive templates for building a responsive website.

On a similar note CSS3 makes the process of designing a responsive site easy. With CSS3 media queries you can make use of fluid proportion-based grids that can easily adapt the layout to the viewing environment. Along with flexible images this allows you to cater to a range of devices and browsers which access a single source of content. This makes the content easy to read and navigate with a minimum of need of resizing, panning, and scrolling.

Application of HTML5 and CSS3

Since we have spoken a lot about the flexible grid let us take a look at how we apply this in a responsive website. The purpose of building a flexible grid is to allow it to dynamically resize to any width. Thus we will be using relative length units, most commonly percentages or em units. These relative lengths declare common grid property values such as width, margin, or padding.

Let us take a look at an example of a two column website where one will be the Body and another Aside. Here we shall encapsulate the header, content, widget and footer in a page-wrap container. This allows the container size to be customized by the style sheet for different devices.

HTML Code

CSS Code
.container {
max-width: 660px;
}
section {
float: left;
margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
width: 63.63636363%; /* 420px ÷ 660px = .63636363 */
}
aside {
float: right;
margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
width: 30.30303030%; /* 200px ÷ 660px = .30303030 */
}

Here you can clearly see that all the units of length have been defined in percentages. Here no matter what the size of the container is the Body and Aside elements would resize themselves proportionally to offer the viewer great browsing experience irrespective of the device they are using.

This post is shared by MarkupBox, a specialized PSD to HTML Conversion Company, backed with years of experience and diligent professionals. MarkupBox offers PSD to CSS , PSD to HTML5 and conversion services services like PSD to WordPress, PSD to Joomla, to PSD to Drupal, PSD to Email and much more.