MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

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

[Close]

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

How to Create Responsive Websites With HTML and CSS

The article will help developers to gain knowledge on how to come up with a responsive website with the help of HTML and CSS.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Here in we will be setting up the homepage structure and then incorporate a few of the media queries. This will assist in loading the site quicker, also helps in better navigation and maintaining the appearance of the website as desired across multiple devices, platforms, and resolutions.

Before going in to real stuff, let’s cover the “viewport” meta tag. Many of us may know that the Apple iPhone and iPod touch are basically programmed so as to automatically scale down websites in the iOS version of Safari that would permit the end user to view the website in the intended mode thereby scaling it down so that the same can be fit in the screen of a smaller size. For the reason that we will be creating a media query specifically for the screen, we won’t be requiring the iPhone to scale it. The viewport meta tag will permit to set parameters as well in order to ensure the attribute to which a viewer is able to zoom in or out. Also it would allow verifying what scale your site should initially load in. This tutorial will help you to learn on how to create a responsive website without being scaling it down at all.

The below code will reflect the very basic HTML5 stuff that includes the exception of our viewport meta tag and our main background div.

Listing 1: Defining the view meta tag and background div

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="mainBG" class="homeContent" data-type="background">
    </div><!--end div "mainBG"-->
</body>
</html>

We will now create a CSS file when we already have HTML in place, let’s create our CSS file for which we would reset our CSS settings first that would be done by getting rid of unwanted margins, padding, and borders with this basic bit of code to start off my CSS file.

Listing 2: Creating a CSS File

Body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea {
    margin: 0; padding: 0; border: 0;
}
sh1, h2, h3, h4, h5, h6, p {
    margin: 0 0 1em 0;
}
h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}

We can now open up our body tag and incorporate some style to the same. Here in we are setting background colour to white and a dark gray for my text colouring. Making use of a white background with black text often results in too sharp contrast. This can also put a strain to the viewer eyes thereby going with a dark gray helps avoid that issue.

html, body { height: 100%; }

It may also be noticed that we used font size making use of em that is regarded as a crucial step particularly when responsive websites are being developed. This is for the reason that it is based on percentage that will dynamically adjust itself on the fly. Had it been the requirement that you were to set your font to a specific pixel size, then in that case once your site was scaled down to mobile phone dimensions, the same won’t flow as nicely with the rest of your design. Also it may fill the entire screen, or the letters may overlap each other.

The style can be incorporated to our .homeContent class and also to our #mainBG id. We have defined the height of the page, also set the width to 100% and finally centered the content within the .homeContent class. We have also set the background-size property to “cover”, that will actually scale the image to fill the screen. This will permit the background image to maintain proper proportions in larger resolutions. The size of the “big.jpg” background image is 1920 x 1189.

Listing 3: Defining .homeContent class and #mainBG

.homeContent {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

#mainBG {
   background: url(images/big.jpg) no-repeat scroll;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

Let us write the media queries now since we have the basics entered. The first two to be set are for tablets. We’re going to call in medium sized background image. This is just for the reason that you may found some tablet viewers that could heavily rely on their network to load the site and there’s no need for them to waste the data or time to load an image twice the size of their display. Here we have the size of “medium.jpg” background image as 1024 x 770. It will also be positioned in such a way that it will still display properly across various tablets.

Listing 4: Writing media queries for the tablet

@media only screen and (max-width: 1024px) and (orientation:landscape) {
   #mainBG { background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#mainBG { background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
}

Let us write the last media query that would be for mobile phones where in we’re going to pull in our “small.jpg” background image and for the same reasons that were noted with the tablet query. We have a “small.jpg” background image as 767 x 475.

Listing 5: Writing media queries for the mobile phone

@media only screen and (min-width: 0px) and (max-width: 767px) {
	#mainBG { background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
}

Time to preview your work in a browser where in you need to start with your browser window full screen followed by squeezing the same and then watch as the image immediately begins adjusting to the new dimensions. Review if you can spot where your media queries occur and your background image changes to a smaller version.

Sample Output:

Illustrating the Responsive Website in Computer, Tablet and a Mobile Phone

Figure 1: Illustrating the Responsive Website in Computer, Tablet and a Mobile Phone

Conclusion

We learned how to create responsive websites with the help of HTML without being scaling it down to adjust to the windows screen.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[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