How to Create a Responsive HTML5 Website

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

Some alt text

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 dolor?

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

Mehr lesen

p>Ein kleines Bchlein namens Duden. Es ist in the land of paradiesmatisches.

Mehr lesen

The Blindtexte beherrscht, is a geradezu unorthographisches Leben.

Mehr lesen

Some alt text

Some alt text

Some alt text

Let s move on to the next element on the structure image now that we have the structure of the image. The next thing you should do is the spacer. Although it is not a spacer, it is an orange part below the image and has a search field. A new section is used for the spacer. I would like to be able to directly link to a specific part of the website if I used an ID instead of a class. A short sentence is put into a new paragraph and another div with the class "search", which contains our search form.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit?

We have almost half of the whole code we need. Take a look at the structure again. From now on, we only have articles that are wrapped inside containers.

The next section has three articles with headings and an icon next to them. The icons I used in my video are from a different company. Adding a heading h3 and a paragraph p with some text to the articles The br class is used to clear the floating of the three articles which we will add into ourCSS file in the next part of the lesson.

alt text

Name war Lorem Ipsum, aber beschlo.

alt text

Da es dort wimmele von bsen Kommata.

alt text

Dolor sit amet

Es packte in den Grtel and machte in den Weg.

Our next section should have a h2 heading and four articles. Inside the articles is a hidden heading and a new element called figure. The figure element can be moved away from the main flow of the document if it is used in conjunction with the figcaption element. An image and a figcaption can be added to a figure element.

The images in the website preview will become dark if you move your mouse over them. Lightbox2 will open the image in a larger version if you click on it. Lightbox2 was included in our head part. We need to create an anchor around our image and give it a lightbox attribute to enable image resizing.

The effect with the magnifier icon on mouse hover is created with the help ofCSS3. A span element is wrapped inside the anchor and used to create a half transparent black layer. We will make the span invisible by default and only show it on mouse hover in the second part of the video.

This should be the code for the section.

Some alt text

Photo by: Some Name

Als es die ersten Hgel desKursivgebirges erklommen.

Some alt text

Photo by: Some Name

warf ist die letzten Blick von Heimatstadt.

Some alt text

Photo by: Some Name

The Headline von Alphabetdorf and the Subline are captioned.

Some alt text

Photo by: Some Name

Wehmtig lief in die Wange.

We need another section with a hidden heading, an article and another section. There is a hidden heading in the second section of the articles. The outer section should have an ID fortext_columns and each of the columns as a class. We could not directly address the article and section. The reason I like to use classes is that it makes it easier to change the code later on without having to change theCSS code.

The heading h3 and paragraph p were put inside the first column. If the content is relevant or not, we will put two articles in the second column. There is a paragraph p and an image in each of the two wrappers. The images need a class called "rocket" and "clock" and will be animated later on in the second part.

Dolor sit amet

p>Unterwegs are a copy. The Copy warnte das Blindtextchen, da, wo ihm zigmal umgeschrieben worden und alles.

p>Doch alles Gutzureden ist, so dauerte es.

Some alt text

p>Und wen es, benutzen Sie esimmernoch.

Some alt text

Doch alles Gutzureden ist, so dauerte es./p>/section>

In the footer, we are going to put a hidden heading and a section with three articles for the upper three columns of the footer, as well as another section with the ID "copyright", which we are going to position at the bottom of the footer later in the second part of the In the "copyright" section we add a div with the class "wrapper" which will make sure that the content is centered and not over the maximum width. The reason we are using a div instead of an article is that there is no related or independent content inside the container. The div with the class "social" contains all the social links and the div with the copyright note is blank.

The section which we just created at the beginning of the footer has a hidden heading and three articles. We need to assign another class to the second and third articles so that we can separate them. Add the class "midlist" to the second article and the class "rightlist" to the third. Simply add a blank space after column and put the other class behind it. Let s put a heading and a text into the first article to add some content. The one in the middle and the one in the right have the same heading and unordered list. The images should be wrapped around each link. Our text is contained in the span. We are using a span to be able to position the text and display it as a block element.

google plus

tumblr

youtube

bebo

xing

Copyright 2012 bylingulo.com /section>

It is a copy. The Copy warnte das Blindtextchen, da, wo ihm zigmal umgeschrieben worden und alles.

  • Die Copy warnte das Blindtextchen
  • Unterwegs traf es eine Copy
  • Doch alles Gutzureden konnte
  • Als es die ersten Hügel
  • Dolor sit amet

    Unterwegs traf es a copy. The Copy warnte.

    Doch alles Gutzureden Konnte es.

    Und is in the Agentur schleppten.

    The basic structure of our website can be found by closing the body tag and the html tag. Click here to see the entire code.

    We are going to style our website to make it look like in the preview but we are also going to add more code to make it responsive.

    Please tell me how you liked the first part in the comment section if you liked it. Click here to continue with the second part of the lesson.


    Leave a Reply

    Your email address will not be published.