A Guide to the Basics of Responsive Web – The Trick Relies on Containers

Well, it is actually all about viewports, media queries, and containers. But yeah the trick is with organizing your design into sections then use containers.

What is a Viewport?

In technical theory, it is the viewing region in computer graphics. While in layman’s terms, it is the actual display area of the device that you are using.

What is a Media Query?

It is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).

What containers are you pertaining to?

The containers declared here are the HTML tags that would “wrap” sections of your web page or even the whole site itself.

Now that we have that all cleared up, let me begin this guide by saying that, basing from my experience as a developer, there are two approaches when it comes to responsive websites. One is to use a fluid measurement system using percentages or fixed measurements then override these and create conditions in the media queries. It is actually easier to use percentage measurements for your containers then partner them with some more settings in the media queries. Just to answer some doubts arising from you, my dear reader, there are some instances that fixed width is much more preferred especially when we want to achieve pixel-perfect precision.

The Demonstration

First off, let’s create a very basic semantic HTML layout to demonstrate a fixed measurement system.

<div class="container">
  <header>
    <h1>Basic Responsive Web Demo</h1>
    <h2>Header</h2>
  </header>
</div>

<div class="container">
  <section>Section</section>
  <aside>Aside</aside>
</div>

<div class="container">
  <h2>Footer</h2>
</div>

Without the styles.css, the HTML output would look like this: basic-responsive-web-demo-result

Now let us create the styles.css using the code below:

body {
	font-family: "Open Sans", Arial, Sans-serif;
	color: #fff;
	margin: 0px;
}

.container:before,
.container:after {
	content: "";
	display: table;
}

.container:after {
	clear: both;
}

.container {
	background-color: #777;
	width: 960px; /* fixed width */
	margin: 10px auto; /* auto center */
	/*zoom: 1; 
	/*non-standard and originally implemented only in Internet Explorer */
}

.container,
section,
aside {
	border-radius: 6px;
	text-align: center;
}

section,
aside {
	background-color: #555;
	margin: 10px; /* fixed */
	padding: 20px 0px;
	text-align: center;
}

section {
	float: left;
	width: 540px; /* fixed */
}

aside {
	float: right;
	width: 380px; /* fixed width */
}

 

Now the output would be styled now and appear like this:

basic-responsive-result
As you can notice, all units of measurements are in pixels and have a fixed value. This layout is fixed and scroll bars would appear in case the screen size is smaller than the specified height or width of the layout. Now, we take this fixed layout and convert the measurements into something relative like em or % units. We can modify the existing css code or use it in our media queries which I will show you later on in this demonstration.

Media queries are a powerful tool in which it will allow your website to adapt to whatever device it would be viewed in. For you to better understand that, let us add a bit of media query code in to the existing css that we have already done. Just a note: there are three ways to initialize media queries. To initialize a media query we can use the @media rule inside the existing style sheet (which is what we are going to do). Another way is by importing a new style sheet using the @import rule. And lastly, we can link to a separate style sheet from within the HTML document. It is generally recommended though to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

So let us continue and add this bit of code. The background color of the <body> will change every time a specified max-width is reached.

When the max-width of 1023px is reached, the <body> background-color changes to red, when 960px is reached it changes to blue, and so on shown in the following images below. basic-responsive-red basic-responsive-blue2 basic-responsive-green basic-responsive-yellow basic-responsive-lightblue basic-responsive-gray Notice that a horizontal scrollbar appeared at the bottom, this is due to the fact that we are using a fixed layout. Now we would want to make this layout follow whenever the browser or screen resizes. This leads us to making our layout flexible using the em measurement unit or by percentages. So we modify our code like so:

We substituted all measurements from pixels to percentages and declared that the .container has a maximum width of 960 pixels and minimum width of 200 pixels. The containers width, as declared, will adjust to 100% of the screen.

basic-responsive-result-white

basic-responsive-result-red

basic-responsive-result-blue

basic-responsive-result-green

basic-responsive-result-yellow

basic-responsive-result-lightblue

basic-responsive-result-gray

There will be circumstances where the content is not effectively displayed by a container. We will then have to make additional adjustments in our media query. Take for example when the screen reaches the 480px mark for max-width, the <section> and the <aside> will be squeezed together. A solution would be for both to take full width and the <aside> be displayed after the <section>.

Adding this code will have the section and aside adjust when the screen reaches 480px.

responsive-web-yellow

And with 200px:

responsive-web-gray

So there we have it! This concludes our guide to the basics of responsive websites. Media queries are powerful and this is not the only use for it. Responsive design targets to have websites become suitable for every device and ever screen size, no matter what becomes available in the modern market. Responsive design focuses on providing users an intuitive and gratifying experience whether they are faithful desktop users or on-the-go people that rely on portable devices. For an advanced tutorial for responsive web, we have a video tutorial for responsive websites using the 960 fluid grid.

Watch “How to Create Responsive Website – Responsive Web – Online Training” by the HTML Guys.
в записьПавелко федерация футбола украины

One thought on “A Guide to the Basics of Responsive Web – The Trick Relies on Containers

  1. Patricia Barth

    Thank you for this tutorial. I’ve been using tables to define everything up to now. Hopefully, after I view your next tutorial, I will be able to convert my sites properly. I need to use a table within a table to have 1 background on top of another. I also have to be able to insert my All Web Menus into my sites. I think I can do that with a div id. Will give it a try. I was using the WYSIWYG software, but that is still pretty complicated for me. I like to be in control of my own coding. My parrot website will be needing some major changes to convert: http://www.plannedparrothood.com.

    Best Regards,
    Patricia Barth

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

BACK TO TOP