Responsive Web Design and HTML5 Semantic Tags

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

Any web developer will have noticed the increase in traffic from mobile devices of late. Over the past year many key sites have seen a significant percentage of new pageviews from smartphones and tablets. These represent large numbers of visitors, with sophisticated browsers that support the latest HTML, CSS, and JavaScript, but which also have limited screen space with widths as narrow as 320 pixels.

A commitment to accessibility means you must strive to provide a good browsing experience for all your users. You face a choice between creating mobile specific websites, or adapting existing sites and new launches to render well on both desktop and mobile. Creating two sites would allow you to better target specific hardware, but maintaining a single shared site preserves a canonical URL, avoids complicated redirects, and simplifies the sharing of web addresses. With a mind towards maintainability you would want to lean towards using the same pages for both. Some guidelines:

Your pages should render legibly at any screen resolution
You want to  mark up one set of content, making it viewable on any device
You should never show a horizontal scrollbar, whatever the window size

Implementation

As a starting point, simple, semantic markup gives us pages that are more flexible and easier to reflow if the layout needs to be changed. By ensuring the stylesheet enables a liquid layout, we're already on the road to mobile-friendliness. Instead of specifying width for container elements, we start using max-width instead. In place of height we use min-height, so larger fonts or multi-line text don’t break the container’s boundaries. To prevent fixed width images from "propping open" liquid columns, we apply the following CSS rule:

img {
  max-width: 100%;
}

You can also use the "em" attribute to determine sizes of fonts, etc. based on the default font size for the particular display. This allows the device's browser to set the correct sizes, instead of you having to guess and use "px" for widths, etc.   To do this, you simply take the target font size from your design, and divide it by the font-size of its containing element. In other words, its context. The result is your desired font-size expressed in relative,  flexible ems instead of px.

Assuming that your base font-size: 100% on the body element equates to 16px, you can plug those values in. So if you need to express an h1’s target font size (24px) relative to its context (16px), you get: 24 ÷ 16 = 1.5.

So your font-size for the h1 is 1.5em: h1 { font-size: 1.5em; font-style: italic; font-weight: normal; }
This will now scale appropriately for any device.

Liquid layout is a good start. One of the most common liquid layouts is provided by the Twitter Bootstrap set - a javascript and a CSS file. Bootstrap uses a 12 column CSS "Grid" that is table-less.

Media queries are now well-supported in modern browsers including IE9+ and most mobile devices. These can make the difference between a site that degrades well on a mobile browser, vs. one that is enhanced to take advantage of the streamlined UI. But first we have to take into account how smartphones represent themselves to web servers.

Viewports

When it’s on a smartphone, a pixel is not always "a pixel". By default, smartphone browsers pretend to be high-resolution desktop browsers, and lay out a page as if you were viewing it on a desktop monitor. This is why you get a small text “overview mode” that’s impossible to read before zooming in. The default viewport width for the default Android browser is 800px, and 980px for iOS, regardless of the number of actual physical pixels on the screen.

In order to trigger the browser to render your page at a more readable scale, you need to use the viewport meta element:

<meta name="viewport" content="width=device-width, initial-scale=1">


Mobile screen resolutions vary widely, but most modern smartphone browsers currently report a standard device-width in the region of 320px. If your mobile device actually has a width of 640 physical pixels, then a 320px wide image would be sized to the full width of the screen, using double the number of pixels in the process. This is also the reason why text looks so much crisper on the small screen – double the pixel density as compared to a standard desktop monitor.

The useful thing about setting the width to device-width in the viewport meta tag is that it updates when the user changes the orientation of their smartphone or tablet. Combining this with media queries allows you to tweak the layout as the user rotates their device:

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}


In reality you may find you need to use different breakpoints depending on how your site flows and looks on various devices. You can also use the orientation media query to target specific orientations without referencing pixel dimensions, where supported.


@media all and (orientation: landscape) {
  /* Target device in landscape mode */
}

@media all and (orientation: portrait) {
  /* Target device in portrait mode */
}


Media queries example

Instead of targeting specific device resolutions you go with a relatively broad set of breakpoints. For a screen resolution wider than 1024 pixels,  render the page as it was originally designed, according to the 12-column grid. Between 801px and 1024px, you get to see a slightly squished version thanks to the liquid layout.

Only if the screen resolution drops to 800 pixels will content that’s not considered core content be sent to the bottom of the page:


@media screen and (max-width: 800px) {
  /* specific CSS */
}


With a final media query you enter smartphone territory:


@media screen and (max-width: 479px) {
  /* specific CSS */
}


At this point, you’re not loading the large image anymore and you stack the content blocks. You also add additional whitespace between the content items so they are more easily identified as different sections.

With these simple measures you can  make sure the site is usable on a wide range of devices.

HTML5 Semantic Markup and SEO

HTML5 provides semantic elements to improve the way you structure a page. Search engines already look for these tags, and they can help you get your pages indexed better and with more relevance. All these tags can and should be styled with CSS, just as you would formerly use with the <div> tag.

<article> specifies an independent block of content. The contents of an article tags should be self-contained. A blog post or new article could be wrapped in an <article> tag, for example.
<section> specifies a subsection of a block of content, like an <article>. If a blog post was broken into several sections by subheaders, each section could be wrapped with a <section> tag. Just as books have chapters, blocks of content can have sections.
<header> can serve two purposes:  1. to specify the header of a page or  2. to indicate the header section of a self-contained block of content ( <article>, for example). <header> tags might contain navigation, branding or the document headline.
<hgroup> is used to wrap a section of headings (<h1> through <h6>). A great example would be an article with both a headline and subheadline at the top:

<hgroup>
     <h1>Main Headline</h1>
     <h2>Article tagline or subheading</h2>
</hgroup>

<footer> is similar to the <header> tag. It can specify the <footer> of an entire HTML document or the footer of an <article>. This can contain elements like footer navigation or metadata about an article (author, etc.)

<nav> is intended to enclose site navigation. This can be used anywhere: main site navigation, previous/next article links, or pagination.

<aside> is for content related to the parent element in which is resides, but not strictly part of the main document. In other words, it could be used on a website sidebar or within an <article> for special call outs.

<video> is for video content. Its purpose is to provide a cross-browser compatible way to display video.

An example of a page structured with header, section and footer elements:

<body>
<header>
   <h1>The Eggheadcafe News</h1>
</header>
<section>
<p>Welcome to the Eggheadcafe News. We have some great new content for developers this summer</p>
</section>
<footer>
   <p>@copy; Copyright 2012 Eggheadcafe.com</p>
</footer>
</body>


Using the Bootstrap 12 column grid and fluid layout

Bootstrap css features a bootstrap-responsive.css file that uses the fluid design principles. It consists of a set of classes called span1 through span12 to define the layout, as well as classes called "row" and other control and label -specific classes to define a fluid layout that will automatically resize and redisplay depending on the type of device, using media queries like:

       @media (min-width: 768px) and (max-width: 979px) {
  .row {
    margin-left: -20px;
    *zoom: 1;
  }......

Using Bootstrap, you can achieve your goal of designing once and having the design work for all devices.

Here is some sample markup using the bootstrap-responsive CSS:

<div>
<fieldset><legend>Location Information</legend>
<div class="row">
<div class="span12">
<div class="row">
<div class="span4">
<div class="control-group">
<label class="control-label" for="input01">Location</label>
<div class="controls">
@Html.TextBoxFor(x => x.Location)
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Site</label>
<div class="controls">
       @Html.TextBoxFor(x => x.Site)
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Building</label>
<div class="controls">
@Html.TextBoxFor(x => x.Building)
</div>
</div>
</div>
<div class="span3">
<div class="control-group">
<label class="control-label" for="input01">Floor</label>
<div class="controls">
@Html.TextBoxFor(x => x.Floor, new { @class = "input-small" })
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Room</label>
<div class="controls">
@Html.TextBoxFor(x => x.Room, new { @class = "input-small" })
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Rack</label>
<div class="controls">
@Html.TextBoxFor(x => x.Rack, new { @class = "input-small" })
</div>
</div>
</div>     
</div>
</div>
</div>
</fieldset>
</div>


You can download bootstrap here. http://twitter.github.com/bootstrap/    Bootstrap plays well with jQuery, Modernizr, and all the other tools you have probably used.

Responsive Design is the way to go in this new environment of multiple devices. It makes it easier to design your web pages, provides better SEO from the major search engines, and adapts to the screen size and characteristics of multiple browsers and devices with a single page design using HTML5 semantic tags.

By Peter Bromberg   Popularity  (9022 Views)