How to Create a Responsive HTML5 Website

Required knowledge level: intermediate

We will create an awesome responsive website in this responsive web design lesson. I wanted to include as many different features as possible, so we will be dealing with a variety of features. This part of the tutorial best website designer will show you how to use the required script. The second part will show you how to style it usingCSS3 features to create a stunning website.

Preview: Check out the result

Download: Get it from GitHub

For people who already have an intermediate level of knowledge, this is not a good idea. It is assumed that you know how to include aCSS file in the tutorial, so it will not be described in detail. I will try to help you if you have any questions.

Let s take a look at the basic structure of the website. To see how our website will be arranged, click on the image on the right. Before starting to build a website, I suggest drawing a layout. It will be easier to create the page if we have an overview of the structure.

Creating the head – Doctype and Meta Tags

The first thing we need to do is create a head section with the required files. The doctype declaration is easy to remember in the new version of the software.

The charset can be set to UTF-8 in our head section.

To create a responsive design that works on all devices and screen resolutions, we need to add the viewport meta tag which defines how the website should be displayed on a device. The initial scale was set to 1.0. The initial zoom level is set to 1.0 and the width of the screen is set to the device’s width. An image with a size of 350px on a screen with a width of 350px will fill out the whole screen width.

There are many different opinions about width and initial scale. Some people don’t use initial-scale at all because it might lead to incorrect behavior. A zoom bug can occur when rotating the device from a portrait to a landscape. Users have to manually zoom in on the page. The property initial-scale may be removed to fix the bug. There is a script that will allow the orientation change to occur properly if it does not happen.

Some people say to use initial-scale and not width. Goetter wrote in his post:

The initial-scale is a good idea because it fits the dimensions of the device regardless of its orientation. I would rather use initial-scale alone. The combination of the two is problematic.

There is no instruction on which properties to use inclustion. You could try to include both initial scale and device width. Try to remove either of the properties if that leads to problems in either device. Try using the script I mentioned above until your design is displayed correctly on all devices.

Creating the head – CSS files

There are four different files in the website. The first thing you’ll see is a reset. It resets the styling of the elements so that we can build our own styling without having to worry about browser differences. You can find Eric Meyer’sResetCSS 2.0 here.

All of our styling is contained in style.css. If you want to separate the basic layout styling from the rest of the stylesheet, you can divide the file into two.

If you click on one of the small images in the main content section, you will see a larger version of the image on the page. Lightbox2 is the script we use to achieve this and it is easy to use. You will need to download Lightbox2 and include the “lightbox.css” file for this.

We can use Open Sans and Baumans with the last stylesheet.

The amount of requests increases which results in a longer page loading time. For the live version of your website, you could combine all the files. This would be a good solution if you know that you are not going to change the code again. If you want to be able to change your files from time to time, I would recommend not combining the files manually, as this will make things more difficult to understand. A minifier script that automatically combines, minifies and cache all your Javascript andCSS files into a single file would be a better choice. minify.js can be found here.

Creating the head – Javascript / jQuery files

Now that we have included the files, let s add the required script. We need a lot of scripts to make the features visible in all browsers. Modernizr.js is the first script we will be using. You can easily detect if a browser supports a specific feature. The Modernizr.js comes with a feature that allows the use ofHTML5 in Internet Explorer. If you want to build Modernizr.js, you must click the large button in the top right corner. Next, click on the download button.

The second script we need is Respond.js, a script that allows responsive design in Internet Explorer and other browsers which don’t supportCSS Media Queries. You can download it from the website.

To be able to use lightbox.js we have to include the library. The best way to do this is to host your jQuery file and use a fallback in case the file is not loaded.

The lightbox.js is located inside the lightbox directory.

The use of different prefixes is required in all browsers to work with the features in this example. In order to not have to manually define the different prefixes each time we use aCSS3 feature, we will include the script Prefix Free, which will create the required prefixes and let us write the unprefixed properties. The script can be downloaded.

We need the last script for the responsive image slide. You can put the Plug-In into your “js” folder after you download it.

The file should now look like this. Further code will be added to our head section during the course of this lesson.

HTML5 responsive website tutorial

Creating the body – Introduction

There are new elements that help us create more structured and accessible websites. It is possible to structurize your web page and tell screen readers or search engine bots what is on a page which will help them to read only the parts they want.

Let s first look at the most important new sectioning elements.

The section defines a part of the website. It should not be used for styling purposes. Use a simple div.

The piece of content should be able to stand alone and still make sense.

A section or document has aheader.

A footer is a part of the footer.

The main navigation of your website should be a set of links.

There is a section with secondary content. The content of the article should be related to the aside. It should be related to the site as a whole if it is placed outside an article.

Each of the sectioning elements should have a heading. By giving each section a specific heading, you can create a new section. A proper outline improves accessibility and is also good for search engine ranking. You can use the Outliner tool to create an outline. If you see an Untitled Section, you might want to specify a heading for it. If you want to read more about the document outlining algorithm, be sure to check out the post by the man.

If you have a look at the website we will be creating, you will probably think that we need a heading for each sectioning element. I don't see any headings for the navigation, footer or some of the other sections. It doesn't make sense to display a heading for each of the elements.

To create a proper outline, we need to define headings for every section. The whole purpose of the document is destroyed if sections are not used.

Adding headings to your code will hide them withCSS. They should not be hidden with display, as this would remove them from the outline. The best way to hide headings from search engines is to use theCSS property clip. If you want to read more about it, check out this answer.

Creating the body – Building the website structure

If you click here to open the structure image in a second tab, you can switch between tabs while coding.

The first thing we need is a title The logo and navigation will be included. There is a main heading and a paragraph in the head. The main heading could be your website's name or logo and the paragraph about it. Depending on whether the mainKeywords is the mainKeywords or not, you might use a h2 instead of the mainKeywords. Let s put our navigation into the heading as well. There is an unordered list inside the navigation section. This should be the look of your code.

A responsive website tutorial

The next area on the website is calledSlider-Images. When you look at the preview of our website, you will see that the image is changed every six seconds. You should download the responsive slideshow plug-in now because we are going to use it in this lesson.

You can see in the example files that a new div called "slides" is needed to slide the images. When we show the content boxes on top of the images, we will add the content for each image into a separate article which we call "slider_content1" and "slider_content2". The reason why we used articles for the first three sections and then a simple div for the slides is that the articles contain our independent content, while the div only contains our three images and mainly has a styling purpose. If you want to use royalty-free images in your web project, please visit Open-Image.net.

Some alt text

When the image "slide1.jpg" is displayed, "slider_content" will be the content which is shown. There is a heading, some text and a read-more link in these articles. We add a heading with a class hidden into the section so that we can create a proper outline of the page. If you have problems deciding which heading to use on your website, my recommendation is to use a heading structure with elements of the appropriate rank. If you would like to learn more about proper use of headings, read this article. I added some blind text to headings and paragraphs to make it look like this.

Lorem Ipsum

Lorem ipsum dolor?

Weit hinte, hinter den Vokalien und Konsonantien. There is an der Kste des Semantik in the area.