Introduction to Responsive Web Design

With the rise in the use of mobile devices, such as tablets and smart phones, there has also been a rise in awareness that the web needs to be more accessible, regardless of where you are or what device you are using. As a result, responsive web design has become a buzz word that everyone wants to use for their next project. Although this new CSS3 feature is powerful and flexible enough to work for companies, it is not always the right choice for every website.

Responsive web starts with the design. No longer are we creating static pages that will only be viewed in one way under all scenarios; considering how your designs will adapt to different environments is crucial for success. How will your navigation adapt to a smaller screen size? Will your content be too long? Is your font size appropriate for a smartphone? What about images?

Using a grid system is a very popular solution for solving layout problems when working with responsive web. Breaking your site down into ‘blocks’ of information makes it easy to imagine how content can shift to fit within a wide or narrow screen size. Simple adjustments such as font size and changing content dimensions can also help fine tune a design to fit the needs of the end-user.

designpattern

(More design pattern examples)

Responsive web gives us the power to define the size, position, and style of elements under specific scenarios; pictures can be dynamically scaled and repositioned to fit the environment, entire sections of content can move, font sizes can change. This technique allows us to consider all of the usability needs from screen to screen and meet them with clever coding and unique CSS.

Compared to building a standalone web application, responsive web recycles your existing website, making the implementation fairly straight forward. Using the new media queries feature in CSS3, we are able to identify the current dimensions of the browser and load special pieces of CSS to accommodate the viewport.

To get started using responsive web, all you need is an HTML site structure and CSS. Within the head of your HTML, you will need a viewport meta tag (see image for an example). This meta tag tells the browser to scale your site to the device width instead of using the widescreen standard scale; allowing your site to accommodate narrow smartphone screens. Supporting older browsers is as simple as using one of the legacy support libraries.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Responsive Web Design Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!--[if lt IE 9]>
			<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<![endif]-->
		<link href="test.css" rel="stylesheet" />
		<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300&subset=latin,cyrillic-ext,latin-ext,cyrillic" rel="stylesheet" type="text/css" />
	</head>
	...
</html>

You will still need a basic CSS structure for your website to define all the styles that will be used throughout the site (font, style, color, etc.) as well as all the styles for your site when viewed in a standard browser environment. You can then add unique pieces of CSS that will only be used if the browser size meets the predefined width requirements.

In the example, when the view port is 980px wide or less, all CSS styles contained within that media query will be applied to the site. In this case, the ‘container’ ID (which holds the main structure of the site) will become a fluid value (90% of the screen width) instead of a fixed value (originally set at 950px). The main content section (‘section’) and navigation sidebar (‘aside’) will also take on a fluid value instead of their original fixed width. As you can see, this adds a whole level of flexibility to web design, making mobile compatibility a reality for many web projects.

/*--------MEDIA QUERIES--------*/
/* These are the screen specific styles*/

/*For 980px or less*/
@media screen and (max-width:980px) {
	#container{
		width: 90%;
	}
	section{
		width: 60%;
	}
	aside{
		width: 30%;
	}
}

/*For 760px or less*/
@media screen and (max-width:760px) {
	section, aside {
		width: auto;
		float: none;
	}
}

/*For 480px (mobile) or less*/
@media screen and (max-width:480px) {
	h1 {
		font-size:20px;
	}
	h3 {
		font-size:16px;
	}
	p, ul {
		font-size:14px;
	}
}

(View Example) | ( View full code) | (Learn more about the code)

Before committing to responsive web as your mobile strategy, you need to consider what content you will have on your site, how people use the information and what resource limitations you may have. Responsive web adds flexibility to your existing HTML structure to help it adapt to many environments; it is limited, however, by how much it can offer you a completely unique mobile solution.

Considering how accessible this web development technique is, it is no wonder that responsive web has gained traction lately. It is easier to implement than building an independent web application, it only requires you to build one website, making it easy to maintain content and branding, and it only takes a bit of UI and modern coding know-how to get it up and running. All of this makes it a very appealing option to individuals and small companies looking to make their products and services more accessible to everyone.

Content driven sites like blogs, product pages and news sites can thrive with responsive web design. Their contents often lend themselves to be easily adjusted and shuffled with little impact to usability or functionality (responsive web examples). When we start to consider websites that are more in line with being a ‘web application’, rely on complex functionality, or contain vast amounts of information, responsive web becomes a less realistic option.

Any website that would require serious changes to structure or content to work for a mobile environment is not good candidates for responsive web. It is important to remember that, with this technique, you are essentially just re-skinning your existing website to be more adaptable to different screen sizes; if you have very long articles, lots of features or tools, javascript features that are not touch screen friendly or simply have any kind of site or service that would not easily translate, as is, to a mobile environment — your project will likely not benefit from responsive web (Why Responsive Web is not the Holy Grail for mobile).

Creating a separate application is how many websites handle these problems. Facebook, for example, has both a mobile web and mobile application for their service. If you go to facebook.com on your mobile device, you may notice that the URL automatically changes to ‘m.facebook.com‘; this is the same approach we use for our search solution. When accessing the site, the service detects you are on a mobile device and forces you into a separate ‘mobile website’ specially designed to work for this environment — instead of just loading up a stylesheet that matches your screen size. Often times, these applications will have slightly limited functionality or special features to meet the common goals and usage styles of people on a mobile device (view the Responsive Web v. Mobile Optimized Infographic).

mobileapplication

A mobile application is another solution for popular services like Facebook, Tumblr or Google Maps. Much like the mobile web version, these applications often have specially tailored functionality to meet the most common tasks and objectives by their mobile user base. They also rely heavily on the fact that people depend on their service enough to download their product onto their phone and possibly pay a small fee for it. The benefit of this type of mobile solution is access to more of the device’s built in functionality (GPS, Bluetooth, camera, etc), whereas mobile websites are somewhat limited in what features they have access to.

For Facebook’s mobile application, this means the ability to upload photos as you take them with your camera, for Google Maps, it is the ability to give voice directions over your car’s Bluetooth. Although a powerful alternative, it is not plausible for most web companies; not only is it expensive to build, but it is also a completely separate entity from your website, resulting in more cost for maintenance and content control (Learn more about alternative mobile methods).

Luckily, many modern smartphones and mobile devices will compensate for a website that does not fit their device. Many full sized sites will ‘zoom-out’ on phones to allow users some ability to still navigate through the site. There are, however, many standard web elements that simply do not translate to a mobile environment; objects that require you to hover over, drop downs, popup windows, and flash or other applications that require plugs are just a few examples. If responsive web is not a realistic solution, leaving your site as is could get you by in the short term — but it is often difficult enough for people to use that they will not do so unless they absolutely need to. One can imagine how, if a competitor offers some type of mobile solution, people will tend to gravitate towards those solutions for sake of simplicity and accessibility.

Responsive web, in many ways, is the hero for mobile web. It is easier to implement than building a mobile website or mobile application and, because it is built on your original website, it makes maintaining and updating content and branding simple. It is a great solution for blogs and company websites; but can fall short with large web services with tons of functionality or massive amounts of content. It is important to consider how your customer base uses your website and how you can best optimize your product experience across the many different device platforms. Jumping on a web trend without considering the true intentions or needs of your product can set you up for disaster — but, like all things, responsive web design can be a very powerful tool when used correctly.

Additional Reading:

The following two tabs change content below.

Lacey Kobriger

UI/UX Designer at WolfNet Technologies
I am a UI/UX Designer currently working in the Twin Cities. I also have experience in Illustration, Graphic Design, Front-End Development, and Game Design.

Latest posts by Lacey Kobriger (see all)

Comments are closed.