Responsive Web Design using HTML and CSS

Posted on Aug 22, 2013 in Web, Web Designing

Responsive Web Design using HTML and CSS

Responsive web design is like a new shiny toy for designers and developers. It is hard to overestimate the importance of responsive design because it guarantees that any website will look good in different screen resolutions. I think everyone will agree with me that the first thing that every self-respecting designer should do is to familiarize oneself with responsive web design.

With the growth in mobile Internet usage comes the question of how to build websites suitable for all users. The industry response to this question has become responsive web design, also known as RWD.

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Using HTML and CSS we achieve what we want.

Food Sense Responsive Layout

Food Sense has a beautiful website, responsive to all different viewport sizes. No matter how large or small the viewport may be the Food Sense website adjust, creating a natural user experience.

Responsive vs. Adaptive vs. Mobile

Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change, while Adaptive websites are built to a groups of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites.

Mobile, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users usually build using JQuery Platform.

Currently the most popular technique lies within responsive web design, favoring design that dynamically adapts to different browser and device viewports, changing layout and content along the way. This solution has the benefits of being all three, responsive, adaptive, and mobile.

The  Three main components of Responsive web design are: flexible layouts, media queries, and flexible media.

1. Flexible Layouts

- is the practice of building the layout of a website with a flexible grid, capable of dynamically re-sizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as widthmargin, or padding.

Relative Viewport Lengths

CSS3 introduced some new relative length units, specifically related to the viewport size of the browser or device. These new units include vwvhvmin, and vmax. Overall support for these new units isn’t great, but it is growing. In time they are useful in building responsive websites.

vwViewports width
vhViewports height
vminMinimum of the viewport’s height and width
vmaxMaximum of the viewport’s height and width

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. Reason being, the viewport height and width continually change from device to device. Website layouts need to adapt to this change and fixed values have too many constraints. Fortunately, Ethan pointed out an easy formula to help identify the proportions of a flexible layout using relative values.

The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element.

  1. target ÷ context = result

Flexible Grid

- will work in a column based layout. Below we have a parent division with the class ofcontainer wrapping both the section and aside elements. The goal is to have have the section on the left and the aside on the right, with equal margins between the two. HTML and CSS for this layout would look a bit like the following.

HTML

     <div class="container">

       <section>...</section>

       <aside>...</aside>

    </div>

CSS

     .container {
     width: 660px;
     }
     section {
     float: left;
     margin: 10px;
    width: 420px;
    }
    aside {
    float: right;
    margin: 10px;
    width: 200px;
    }

Fixed Grid Demo

fixed grid

 

Using the flexible grid formula we can take all of the fixed units of length and turn them into relative units. In this example we’ll use percentages but em units would work equally as well. Notice, no matter how wide the parentcontainer becomes, the section and aside margins and widths scale proportionally.

     .container {
     max-width: 660px;
     }
     section {
     float: left;
     margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
     width: 63.63636363%; /* 420px ÷ 660px = .63636363 */
     }
     aside {
     float: right;
     margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
     width: 30.30303030%; /* 200px ÷ 660px = .30303030 */
     }

Flexible Grid Demo

fixed grid2

Taking the flexible layout concept, and formula, and reapplying it to all parts of a grid will create a completely dynamic website, scaling to every viewport size. For even more control within a flexible layout, you can also leverage the min-width, max-width, min-height, and max-height properties, as done with the parent container above.

The flexible layout approach alone isn’t enough. At times the width of a browser viewport may be so small that even scaling the the layout proportionally will create columns that are too small to effectively display content. Specifically, when the layout gets too small, or too large, text may become illegible and the layout may begin to break. In this event, media queries can be used to help build a better experience.

2. Media Queries

Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive web design.

Initializing Media Queries

There are a couple different ways to use media queries, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document. Generally speaking it is recommend to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

For the Complete Guide of Responsive Web Design using HTML and CSS please visit the URL: Advanced Guide to HTML and CSS

Post a Reply

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


3 + = five

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>