Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Responsive Web Development Theory
1744
single,single-post,postid-1744,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
A div sits within its parent div, 72px from the top and left.

Responsive Web Development Theory

In the past few months I’ve built two fully responsive sites and have learned many things because of it. The main being to adapt a change in mindset. For many reasons, the whole concept of responsive design forces pages to be constructed in a way that was new to me. It is true that everybody builds web pages differently now, and always will. There is no definite “right way” to go about it but I’ve learned some things I find to be worth sharing. I’m not pretending these techniques are best practices and am I’m fully open to the fact that better ways to achieve the same results may exist.

Constructing responsive pages adds behavior to the list of things to pay attention to when marking up and styling the elements of a web page. Controlling the way things respond to screen size requires a shift from fixed, pixel value based, layout to percentages. It can also be advantageous to rearrange and even remove content when the size and orientation of screen real estate changes.

When diving in I found that it takes some thought but isn’t really that difficult to accomplish. Positioning and sizing things can present some difficulties, albeit they’re usually fairly straightforward. For instance, imagine (it might be a stretch) receiving this design from a creative director. It’s basically a baby div inside it’s mommy:

A div sits within its parent div, 72px from the top and left.

72 / 500 = .144% - Converting the pixels to percentages (margin-top:14.4%, margin-left:14.4%) would force the distance from the child’s edges and its parent’s to scale together.

Converting the pixel distance to a percentage is simple and quite useful. In another, slightly more complicated example, #baby is an image. You don’t want the image to scale up beyond its original size and become blurry. Applying a max-width prevents this when the percentage doesn’t line up with an exact pixel.

 

A 200 pixel wide image sits within it's 500 pixel wide parent.

Combining the two alterations would maintain both the distance and the size relation between child and parent at any size.

Media Queries

There’s a whole slew of features you can check using CSS3′s updated Media Queries. Visit here for a list of options and syntax. Of course, many don’t work in IE 8 or below.

Implementing media queries is SUPER easy. If you wanted to apply a set of styles to some elements in your page only when the browser width is 350px or less, you could this right in your stylesheet:

@media screen and (max-width: 350px){

// Styles in here would only be applied if the width of the browser is 350px or less.

}

… or specify the max-width when you link the file to keep things separated. I recommend this method because CSS files get more and more strenuous to look at the longer they get:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Imagine the possibilities! When a screen gets smaller you can make four columns into two, and two into one, retain hierarchy by rearranging elements, make buttons bigger when fat fingers replace nimble cursors. There’s certainly strategy to this dance, the movement of things takes planning. Trent Walton talks about his dabbling, some good thought food, on the topic.

 

Utilizing JavaScript

JavaScript can be a time saver for certain things and sometimes even necessary. When room runs out for navigation at the top of your site, you may want to store those elements in a “menu” or “navigation” dropdown which may or may not animate between open and close using JavaScript.

In some cases it can be easier to position things using JavaScript. Say you have a logo in the top left using absolute positioning while the browser is 600 or more pixels wide. However you need it to always remain centered horizontally when it drops below 600px. Changing the position to relative and setting the margin to  something like “10px auto 0px auto” is a common, all CSS solution. This could unexpectedly screw with your layout though. You can minimize the headache of reworking a bunch of CSS by keeping the logo absolutely positioned and centering it with some fairly simple JavaScript instead.

 

Conclusion

Responsive design is useful, logical, and fun to do. Lots of time and brainpower are to be saved by building a website this way. It consolidates the building and updating processes of managing a website. Plus, nobody wants to scroll up, down, AND sideways to read stuff anymore!