A Primer on Responsive Web Design & HTML 5


As technology gets more and more advanced, webmasters are finding it harder and harder to keep up with all the different platforms that are emerging. Once upon a time, web pages just needed to be viewed on computers. Then they needed to be viewed on phones. Then on gaming devices, like the XBOX or the PS3. Then we add the tablet. Let’s not forget browsers on televisions.

The list of electronic devices that a webpage could be loaded on is expanding every year. Google has already released an “in the works” video of their reality-overlay glasses, designed to give people a browsing experience right over their eyes.

The reality is, keeping up and designing for each and every one of these devices individually is almost impossible. Yet, if you don’t take the time to design different pages for different devices, you’ll be leaving behind a vast portion of your potential audience.

The Old Solutions, The New Solutions

The old solution was for people to create a mobile site. Typically this mobile site resided on a subdomain or subfolder – for example, m.example.com or example.com/mobile/.

There are many downsides for this approach. First of all, you’re still really only designing for two platforms, not the myriad of platforms that permeate today’s market. Second, you’re losing a lot of SEO value. When someone links to your subdomain, the link juice doesn’t get passed to your primary domain.

In short, the old approach of creating a mobile version on a subdomain is simply outdated. It doesn’t work on all devices and costs you real traffic.

Introducing Responsive Web Design

Responsive web design is the practice of using media queries to figure out a screen’s size and potentially the device itself. Then the browser will load up the appropriate stylesheet for that device and display the page accordingly.

There are three primary elements that make responsive web design work:

  • Scalable images
  • Adjusting layouts
  • Media queries

Scalable images allow you to either shrink or crop images on the go. Adjusting layouts allows you swap CSS stylesheets in and out, depending on the device you’re using.

Media queries allow you to choose which stylesheet to use, according to the device, the device resolution or the screen size. The query itself looks like this:

<link rel=”stylesheet” type=”text/css”  media=”screen and (max-device-width: 960px”  href=”basicstylesheet.css” />

The “media” field can be treated like a conditional operator. You type in the conditions the device needs to meet to trigger the stylesheet. If the device fits the conditions, the stylesheet specified in the “href” tag is used. If not, the whole line of code is ignored.

Using these kinds of media queries, you can build a wide range of different websites for different browsing devices.

Bringing HTML 5 into the Equation

There are many ways that HTML 5 can add to responsive web design.

First of all, you have offline browsing. You can use media queries to determine when you’re dealing with a mobile device, then deliberately use offline browsing features with those devices.

Mobile devices tend to load much slower than computers and may also have bandwidth costs. By saving parts of your website to your user’s phone, you can drastically reduce load time and bandwidth and improve your overall browsing experience.

Another way HTML 5 can jumpstart your responsive web designs is through the <canvas> tag. Canvas allows you to add images dynamically, as well as create images on the fly. Images can be very difficult to work with on smaller devices, so the <canvas> tag can give you a lot of leeway to bring out some creativity.

The async tag will allow you to load larger scripts separately from the rest of your site. In other words, you can load your whole website first, then load your script. This prevents the script from slowing down your website’s overall load time.

There are many elements in HTML 5 that can improve the overall mobile and non-PC device’s browsing experience.

Planning Ahead: 2015, 2020 and Beyond

Using responsive web design might seem like overkill for today’s market. But smart business people know to look not just at the present, but at the likely future.

And the likely future is clear: Mobile phones are likely to overtake PC usage in just a few years. More and more devices with more and more screen sizes are coming into production.

If you want to stay competitive and ahead of the curve in this ever-changing industry, now is the time to adapt. With artificial intelligence being the future, it makes sense to create a website that’s friendly for not just mobile devices, but for all devices. Responsive web design and HTML 5 make this a reality.

The following two tabs change content below.

Beth Greene

Latest posts by Beth Greene (see all)