Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating Responsive Websites with HTML5

In this article will be made an approach about the concepts that guide the development of the universe to responsive websites. Learn how to create responsive websites with HTML5


The MobileFirstis a development strategy that says all the planning of a web project should start by mobile devices and only then gradually to other devices until you get in notebooks and desktops.

In the recent past, the practice of planning and developing web projects for devices such as computers were common enough, even for historical reasons, to meet the demand of computers, and where concentrated the web so far.

Starting with mobile devices enables the activity ofcontent prioritization to be made more intuitively, since in a mobile device only key information and functionality of a web project will be made available because of the short available space and also by the different use and needs conditions.

In this article,we'll create a responsive website that will present four versions of different layouts. To know:

  • First version: It refers to devices considered small, with width to 480 pixels;
  • Second version: It refers to devices considered average, with width greater than 480 pixels and up to 1024 pixels;
  • Third version: It refers to devices considered great, with width greater than 1024 pixels;
  • Fourth version: It relates to printing devices.

All four versions possess specific characteristics. First, create an HTML document and name it "index.html", and add the content present in Listing 1, which refers to the initial structure of the page, containing only a few statements of the tags we saw earlier, as well as a title and an h1 tag in the page body.

Listing 1. Initial HTML markup.

01 <!DOCTYPE html>
02 <html lang="pt-br">
03   <head>
04 
05       <!-- META TAGS -->
06       <meta charset="utf-8">
07       <meta name="viewport" content="width=device-width, initial-scale=1.0">
08       <!-- end META TAGS -->
09 
10       <!-- begin DOCUMENT TITLE -->
11       <title>Test Responsive Layout</title>
12       <!-- end DOCUMENT TITLE -->
13 
14   </head>
15   <body>
16 
17       <!-- begin page title -->
18       <h1 class="titulo">Teste Layout Responsivo</h1>
19       <!-- end page title -->
20 
21   </body>
22 </html>
Note that we are using the settings for the new HTML5 specification to better fit the reality of the article.

After creating the file, as with the initial structure, we will include the specific content related to each version of the layout.

In Listing 2 is present the specific content related to the first version, which refers to devices considered small, with width to 480 pixels. Make the inclusion of content within the tag after the page title representing the h1 tag.

Listing 2. specific content of the first version.

01 <!-- begin first version content -->
02       <section class="small-device small">
03            <h2 class="type">Small Device</h2>
04            <p class="description">
05                 This text will be shown only in devices with width of 480 pixels.
06            </p>
07       </section>
08 <!-- end first version content -->
In the present content in Listing 3 we have the code of the second version, referred to the considered medium devices with a width greater than 480 and up to 1024 pixels. Add this index.hml the content file after the contents of the first version of the previous listing.

Listing 3. specific content of the second version.

01 <!-- begin second version content -->
02       <section class="mid-device mid">
03            <h2 class="type">Medium Device</h2>
04            <p class="description">
05                 This text will be shown only in devices with width of 480 pixels up to 1024 pixels.
06            </p>
07       </section>
08 <!-- end second version content -->
Then, we have Listing 4 that shows the specific contents in the third version, which addresses the devices considered large, with width greater than 1024 pixels.

Add this content in index.hml file right after the basics of the second version. Note that the contexts are similar to the text and tags created in the same section (section). Soon, we will finish with the explanation real-time execution later.

Listing 4. specific content of the third version.

01 <!-- begin third version content -->
02       <section class="large-device mid">
03            <h2 class="type">Large Device</h2>
04            <p class="description">
05                 This text will be shown only in devices with width greater than 1024 pixels.
06            </p>
07       </section>
08 <!-- end third version content -->
Finally, Listing 5 has the code for the fourth version cited, which refers to printing devices. Add this content in index.hml file right after the basics of the third version.

Listing 5. version specific content to print devices.

01 <!-- begin fourth version content -->
02       <section class="content-device print">
03            <h2 class="type">Printing Device</h2>
04            <p class="description">
05                 This text will be shown only in printing devices.
06            </p>
07       </section>
08 <!-- end fourth version content -->
The structure of the specific content presented respectively in the foregoing listing is the same, changing only the content of each of them. Inside each tag there are two elements, the first is related to the tag that has the task of describing what version of the layout is being presented and the other is the

tag that has a specific descriptive text for each version.

Now with the completed index.html file, we will create the CSS file to use. Name the file "stylesheet.css" and then add the CSS code snippet in Listing 6 present.

This stretch has common rules to be applied to all devices regardless of the version presented, such as general settings spacing, margins, text alignment and display components on the page.

Also note that because they are CSS rules, they will be applied in cascade, following the CSS3 inheritance model.

Listing 6. CSS rules common to all devices.


01 /* CSS rules for all devices */
02 .titulo {
03   margin: 20px 0 80px;
04   text-align: center;
05 }
06 
07 .conteudo-dispositivo {
08   display: none;
09   text-align: center;
10 }
In Listing 7 we have the Media Queries responsible for the detection and application of CSS rules relating to versions from one to four. Enter this content in stylesheet.css file after the common CSS rules for all devices.

The same rules, in turn, are responsible for assigning only simple characteristics such as color, background color and display of components, to facilitate understanding in general.

Listing 7. CSS rules relating to the first, second, third and fourth versions.

01 /* CSS for first version */
02 @media only screen and (max-width: 480px) {
03 
04   body {
05       background-color: #D46A6A;
06       color: #FFF;
07   }
08 
09   .content-device.small {
10       display: block;
11   }
12 
13 }
14 /* CSS for second version */
15 @media only screen and (min-width: 481px) and (max-width: 1024px) {
16 
17   body {
18       background-color: #758AA8;
19       color: #FFF;
20   }
21 
22   .content-device.mid {
23       display: block;
24   }
25 
26 }
27 /* CSS for third version */
28 @media only screen and (min-width: 1025px) {
29 
30   body {
31       background-color: #D4CE6A;
32       color: #000;
33   }
34 
35   .content-device.large {
36       display: block;
37   }
38 
39 }
40 /* CSS for fourth version */
41 @media print {
42 
43   .titulo {
44       margin: 0 0 50px;
45       text-align: left;
46   }
47 
48   .content-device {
49       text-align: left;
50   }
51 
52   body {
53       background-color: #FFF;
54       color: #000;
55   }
56 
57   .content-device.print {
58       display: block;
59   }
60 
61 }
We note that the rules relating to each version are quite similar. All are composed of a Media Query and their rules that correspond to how the content is presented in a set of versions.
She is due in large part to the similarity also implemented in HTML structure.

In version specific to printing devices, we have a slightly different from the other situation. As well as have a Media Query responsible for the detection and application of CSS rules to printing devices, this version also has some rules with the function to cancel the common CSS rules for all devices listed above.

This is due to the fact that because it is a printing device, the rules regarding the distribution and color of elements on the page no longer make sense.

Now stylesheet.css file is complete and we need to include in the index.html file to call for the same, thus enabling us to see in practice the operation of Media Queries.

Check in Listing 8content to make the call to stylesheet.css file to be inserted into the tag after the tag.

Listing 8. Call for stylesheet.css file.
<link type="text/css" rel="stylesheet" href="stylesheet.css"&>
Now we can see the result of running the HTML file. In Figure 1 we present the result to be displayed on devices with width to 480 pixels, referenced by the first version.



Figure 1. Results presented for the first version.

Creating a responsive navigation


In this second example, we are trying to explore how the concepts they have learned so far can be applied to build a responsive navigation menu, this represents a major component of websites nowadays, present in most of them when it comes to responsive sites.

For this, we begin by creating a new HTML page in the same previous directory, and name it "menu.html". After this, make sure you create it with all the initial content tags and viewport we spoke previously, as shown in Listing 9.

Listing 9. Home of menu.html
01<!DOCTYPE html>
02<html>
03<head>
04   <title>Responsive menu example</title>
05   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
06</head>
07<body>
08   <nav class="menu-nav">
09       <ul class="menu-nav">
10            <li><a href="#">Home</a></li>
11            <li><a href="#">Who we are</a></li>
12            <li><a href="#">Clients</a></li>
13            <li><a href="#">Mission</a></li>
14            <li><a href="#">Products</a></li>
15            <li><a href="#">Contact</a></li> 
16       </ul>
17       <a href="#" id="menu">Menu</a>
18   </nav>
19</body>
20</html>
Note that this type of structure is very similar to how other frameworks deal for creating responsive menus, like the Bootstrap and jQuery. As you can see, we have six main menu links and add a link after them.

This extra link will be used to pull the navigation menu when it is hidden in a small screen.

Now create a style.css file in the same height as the HTML file, it is used to contain the CSS rules of our example. Let's start adding some rules in the form How we view content, as well as the type of set zoom, as shown in Listing 10.

Listing 10. Clearing the values before and after the menu.
.menu-nav:before,
.menu-nav:after {
  content: " ";
  display: table;
}
.menu-nav:after {
  clear: both;
}
.menu-nav {
  *zoom: 1;
}
Then also add the contents of Listing 11. In it, the nav tag that defines the navigation will be worth 100% of the total width of the browser window while the ul containing our links from the main menu, you will have 600px wide .

So let's float (float) the left menu links, so that they are displayed horizontally side by side. Remember that a floating element will also cause its parent element so.

Listing 11. Initial Style settings for the menu.
body {
   background-color: #ccc123;
}
nav {
   height: 40px;
   width: 100%;
   background: #255461;
   font-size: 11pt;
   font-family: 'PT Sans', Arial, sans-serif;
   font-weight: bold;
   position: relative;
   border-bottom: 2px solid #283744;
}
nav ul {
   padding: 0;
   margin: 0 auto;
   width: 600px;
   height: 40px;
}
nav li {
   display: inline;
   float: left;
}
Note that with the HTML markup used to date, has added the clearfix in the class attribute for both nav and for the ul, specifically to clarify things around when we floated elements within themselves using this CSS trick. So let's now add the rules of Listing 12 in the stylesheet.

Listing 12. Style Rules for menu link elements.
nav a {
   color: #fff;
   display: inline-block;
   width: 100px;
   text-align: center;
   text-decoration: none;
   line-height: 40px;
   text-shadow: 1px 1px 0px #233144;
}
nav li a {
   border-right: 1px solid #576979;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}
nav li:last-child a {
   border-right: 0;
}
nav a:hover, nav a:active {
   background-color: #8a99e3;
}
nav a#pull {
   display: none;
}
Since we have six menu links and also set the container to 600px, each menu link will have 100px wide. The menu links are divided by a trailing edge of 1px wide, except for the last.

Remember that the width of the menu will expand to 1px making the total size is 101px, with the addition of edge. So here we changed the box-sizing model for boder-box in order to keep the menu with 100px.

Finally, we add the model change properties when in the states of: active and: hover.

With all this implemented, the page view in the browser will be similar to shown in Figure 2.



Figure 2. Menu Screen Display.

Since our navigation is initially fixed at 600px wide, let's first define the style when she is seen in 600px or smaller screen, so that in practical terms, this is our first breakpoint.

In this screen size, each of the two links from the menu will be displayed side by side so that the width of ul here will be 100% of the browser window, while the menu links have 50% of the width. To this add the contents of Listing 13 to the CSS file.

Listing 13. Menu resizing code.
@media screen and (max-width: 600px) {
	nav { 
		  height: auto;
	}
	nav ul {
		  width: 100%;
		  display: block;
		  height: auto;
	}
	nav li {
		  width: 50%;
		  float: left;
		  position: relative;
	}
	nav li a {
		  border-bottom: 1px solid #576979;
		  border-right: 1px solid #576979;
	}
	nav a {
		  text-align: left;
		  width: 100%;
		  text-indent: 25px;
	}
}

@media only screen and (max-width : 480px) {
	nav {
		  border-bottom: 0;
	}
	nav ul {
		  display: none;
		  height: auto;
	}
	nav a#pull {
		  display: block;
		  background-color: #255461;
		  width: 100%;
		  position: relative;
	}
	nav a#pull:after {
		  content:"";
		  background: url('nav-icon.png') no-repeat;
		  width: 30px;
		  height: 30px;
		  display: inline-block;
		  position: absolute;
		  right: 15px;
		  top: 10px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		  display: block;
		  float: none;
		  width: 100%;
	}
	nav li a {
		  border-bottom: 1px solid #576979;
	}
}
So then we also define as the navigation is displayed when the screen is smaller than 480px (so this is our second breakpoint).

In this screen size, the extra link that we added before start visible. We also give the link a "Menu" icon on the right side using pseudo: after, while the main menu links will be hidden to save more vertical space on the screen.

Finally, when the screen is smaller than 320px the menu is displayed vertically from top to bottom. Now you can try resizing your browser and see the results for each view.

At this point, the menu is still hidden and will only be visible when needed, touching or clicking on the "Menu" link. We can achieve this effect by using the slideToggle () function of jQuery. To do this, create a new script tag within the head tag of your HTML file and add the function represented by Listing 14.

Listing 14. JavaScript function to display the toggle menu.
  <script>
       $(function() {
           var pull      = $('#pull');
                menu          = $('nav ul');
                menuHeight    = menu.height();
                $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
           });
                $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 amp;amp; menu.is(':hidden')) {
                     menu.removeAttr('style');
                }
           });
       });
  </script>
Do not forget to add references to jQuery files as well as the normalize.js that came with the download package of sources in this article.

That's basically what we need to make this example work. The end result of running on a smartphone can be seen in Figure 3.



Figure 3. Menu Display on a smartphone.

Through these examples we can see that to make use of the Media Queries can present a single site with totally different and in many ways content, according to the device used, properly exploiting its characteristics in order to improve the user experience without the need to change the contents, and very easily.

After reading this post, the reader will have acquired knowledge of techniques and concepts important and extremely necessary for the proper planning of the development of responsive sites. In addition to the practical examples that can maximize the impact on learning as a whole.


Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login