HTML5 Tutorial: How to Create a Responsive Web Design with HTML5

This is a robust HTML5 tutorial to create a responsive website design including Less Framework 3. In this post you will be fully acquainted about responsive web design what actually is this, its great feature and advantage where it automatically adjust the resolution of screen according to the devices including PC, laptop, tablet, iPad, smartphones etc.

Today, in this post we are going to discuss about responsive web design with HTML5. But before we proceed, many among us would like to know about what the Responsive web-design is all about? Though almost each and every web-developer and web-designers put their best efforts to make their web project something very distinct and unique look. Therefore, myriad of methods are there they used to opt to go with their project. But in the mean time it leads to various new method and techniques to open it eyes. Out of which one amongst them is Responsive Web-design about which we are going to discuss in coming section of this post.

Here, one more question may strike to your mind as mine, when lot of methods and techniques are available then why Responsive web-design. Let me clarify it. In today highly revolutionized era of technology rather than computer system lot of other devices are sporting in the market which are capable to access internet. Therefore, in order to make a site or web-page compatible to both PC and mobile devices like iPad, tablet, smartphones etc, we feel necessity of responsive web design. In other words “It is a concept of developing a website design in such a manner that the design layout can automatically transformed according to the screen resolution of the user’s device. Hence, a responsive web-design is compatible with both computer system i.e. laptop and PC as well as mobile devices including tablet and smartphones.

However, today in this tutorial post I would take you through a simple page design and transform it into a responsive by employing Less Framework 3. Towards this direction we will simply designate some reset styles, some defaults sensible typography, four media queries including concerned body widths for four distinct common resolution. However, in the case if you have never attempted for responsive design or media queries, ‘Less’ is a best platform to get initiated with and get results exponentially. It will be appear just like you want to manage the accurate details of media queries like wise your design progresses, and will be supposed to be easy as there’s no ‘framework’ that will make you to hold down. Thus ‘Less’ is very simple and helpful beginning point. So, let’s start this:

Less Framework 3

Here, this website in itself is a perfect instance which show the power of responsive design, so just resize your browser of distinct and sizes that will show how it will respond to distinct viewport sizes. After accomplishing, go to the end of page bottom, where you will found some text areas that incorporates the output CSS and HTML skeleton and other customization options available.

In context of an instance, you can let remained all default options checked. Now, you are required to copy the HTML and CSS into appropriate file name and opt to upgrade the style tag’s source in the file of HTML to which winks towards CSS file.

Now, you can directly open the HTML file in your favorite browser, where a big blue box will appear on the page. Next, attempt to resize your browser where in the mean time you will see that it is adjusting its dimensions just like you imagine. Now, you are required to work on your own layout of responsive website design.

The Layout

For our page, we are required to constitute a main block that incorporates the ingredients of recipe and instructions, two blocks of sidebar with pictures and a list of concerned recipes respectively, as well as a footer which attribute the content source.

The Less Framework convey four distinct recommended grids for each and every body width. These grids are created by 24 pixel gutters with 60 pixels columns. The narrowest layout is basically designed for mobile devices with 320px width which is three column wide in portrait design. Next, for high resolution mobile, mobile devices in landscape orientation or narrow browser, you will get a layout of five column which targets towards 480px widths. However, the layout of default eight-column that will also caters to browser which lack for media support queries and targets the good old 768px screen width that would also valuable for netbooks and tablets. Eventually, we have a 13 column layout pointed towards 1280px wide screens including the latest laptops and desktop with brilliant browsers.

In case of our layout design, we will attempt to keep it very simple. We will congregate a single-column design for two narrower layouts as well as double-column design for two wider layouts. The width of the widest layout is thirteen columns of 60 pixels each therefore, it we can split this in 8 to 5 among the sidebar and content. Eight columns is the next widest layout, which will be split in 5-3.

The Markup

As this is a pure illustrative example as well as the readers of SitePoint used to access the Web with latest and sophisticated browsers, here, I will attempt to employ the semantic element of HTML5 for recipe’s markup. It is a very nice and cool way to be well-versed with them by pending their domination of eventual world.

Now the recipe has been designated ad an article, which incorporate a header, two asides for image and the concerned recipes list, a footer and a div for recipe itself. There are distinct sections incorporated within recipe div, which points out towards each set of ingredients and the instructions. The Styles Now, let’s get started with eight-column layout which is default. Now, you are required to scroll down the stylesheet to the respective section that sits just underneath the typography defaults and the reset styles. Now, our primary goal will be to define the widths of main content div as well as the asides. Also you are required to put a little bit efforts to make them float in opposite to each other.

Here, you may see that, I am employing the child selector (>). And no doubt, it works for the example, but you are supposed to believe on more traditional selectors relying on the browsers that you should support, in those cases where you would required to include some id and class attributes to the markup.

Take a look over this math directly; the main div has five columns which includes 4 gutters among those columns Therefore (5 x 60) + (4 x 24) = 396. On either side, the padding of 24px, leaves 348px as the div width. The math of asides is (3 x 60) + (2 x 24) = 228. Therefore, the complete layout’s width is then formed by 24 pixels of margin on the div content.

Which eventually provide a robust two-column design layout, even though some issues are supposed to be present? First of all the picture is too large to sits in the column.

Here, I have also designated some styles for the headers, lists and paragraphs which sits here by default, but as they doesn’t concern with our design layout, you are required to skip over them. In order to see them you are required to check out the original source code of the final example.

Now, we have get our default design layout, so again you are required to scroll down your stylesheet. The next design layout which appears is called as super-wide due to 1280px one. However, in your own responsive web design, you might wish to transform a two-column design layout to a three or four-column design layout, as well as cultivate your entire design layout to render it more better by utilizing all available space perfectly.

Now, go through to syntax of @media declaration: This says that the incorporate rules of CSS should be implemented to the screen, and later only those which comprises minimum 1212 pixels of width. However, in accordance to those rules, you can now stretch your browser window and observe for the design which pop-up to the larger size in the case while your pass 1212 pixels.

After this, you are required to look after towards single-column displays or narrower layout for small screen sizes and mobile devices. However, both these tells that we have overwrite float+ declarations to pull all things like content etc. in one column. In case of smallest layout of 320 pixels we will attempt to reduce the size of fonts as well as opt to make the line lengths readable:

Now, you have done it. You are owning a absolute responsive design which is capable to adapt the widths of screen size varies from your widescreen monitor to smartphone.

To see this amazing action, take a look over the demo of responsive web design on CSSChopper .

Williams Heilmann

Williams Heilmann has been associated with PSDtoWordPressExpert for many years. He has extensive experience as a web developer and works with this company to offer the best WordPress solutions to suit the specific needs of the clients. Also, he has got a flair for writing which he consumes in writing the informational blogs for submission on different websites.