Responsive Web Design with CSS Tips and Tricks

1. Content that responds to the size of your screen (BostonGlobe.com)

Boston Globe has one of the most remarkable responsive websites. Launched in 2011, it set the bar very high for all responsive sites to follow. While there are many aspects of the site that are done exceptionally well, I’d like to focus on a small detail that is done in a simple and efficient manner.

The weather is displayed in the top left of the menu at all times, and the amount of information you see is dependent on the width of your screen. At the max-width of 1232px you see the temperature in a large (39px) serif font, with the weather description and an illustration to represent the description. The weather <div> is float:left, and the illustration of the weather is cropped with the combination of overflow:hidden and bottom:-50px. All pretty standard stuff that most users wouldn’t bat an eyelash at.

@media only screen and (min-width: 810px) {

.weather { float:left; height:7em; width:55%; overflow:hidden; }

.weather img { left:0; bottom:-50px; max-width:181px;  }

.weather-temp { float:left; font-family:Georgia, serif; font-size:3.9em; }

.weather nav { float:left; }

}

As you resize your screen and get to a width of 809px, the Boston Globe logo gets a little too close to the weather illustration, and the site begins to respond. The illustration shrinks (max-width:120px). The large serif temperature font becomes a small sans-serif font (11px) in line with the weather description. Also, the weather <nav> gets a position:absolute and slides to the top of the header.

@media only screen and (min-width: 620px) {

.weather { position:static; }

.weather img { left:1%; max-width:120px; top:auto; }

.weather-temp { font-size:1.1em; }

.weather nav { position:absolute; top:1em; }

}

As you continue to scale down your browser to a width of 619px, the logo slides to the left, the weather illustration gets bigger (max-width:45.833% of container) and it moves to the top of the header (position:absolute; top:1em;).

@media only screen and (min-width: 480px) {

.weather { position:absolute; top:1em; }

.weather img { left:-10%; top:-40px; max-width:45.833%; }

.weather nav { position:relative; float:left; }

}

Shrinking your screen even smaller to 479px centers the logo and reduces the weather to just a slightly larger illustration (width:75% of container) and the temperature. The weather description disappears with a negative left value.

@media only screen and (min-width: 380px) {

.weather { width:75%; }

.weather-cond { left:-1000em; }

}

This example of responsive design is nicely straightforward and efficient. It is all accomplished with media queries, some simple css, and high attention to detail.

2. Smart Menus (FutureOfWebDesign.com)

The Future of Web Design website is built on a solid responsive grid. With thorough and precise code, the website lives up to its name. The menu at tablet and mobile sizes is what really impresses me. As you scale your browser down, the menu disappears and is replaced with a small menu icon in the top left. The menu then slides in and out from the left side of the screen.

The menu options are in <li>s within a <ul class=’nav nav-list’>. The <ul> is positioned absolute to remain at the top of the page. The <li>s are all display:inline-block and they float:left to make a simple inline menu that has a flexible system for the responsive changes going forward at smaller sizes.

@media only screen and (min-width: 48em) {

.nav-list { position:absolute; }

.nav-list li { display:inline-block; float:left; }

}

At a width of 767px the menu collapses so it can hide and show from the left side of the screen. This is done with a value of left:-80% that is equal to the width:80% of the menu container. The menus <li>s also stack with the display:block attribute and the <a> tags within get some color changes and a background-image of an arrow.

@media only screen and (min-width: 20em) {

.nav-list { left:-80%; width:80%; }

.nav-list li { display:block; }

}

When the menu icon is clicked, they use the new CSS3 transition technique transform: translate(80%,0). The 80% is the x-value that’s equal to the left:-80% of the menu container. The body also gets the attribute overflow-x:hidden so that the main content area can slide over without adding a horizontal scrollbar.

@media screen and (max-width:20em) {

.js-menu-open body { overflow-x:hidden; }

.js-menu-open .wrapper {

-webkit-transform:translate(80%,0);

-moz-transform:translate(80%,0);

-ms-transform:translate(80%,0);

-o-transform:translate(80%,0);

transform:translate(80%,0);

-webkit-transform:translate3d(80%,0,0);

-moz-transform:translate3d(80%,0,0);

-ms-transform:translate3d(80%,0,0);

-o-transform:translate3d(80%,0,0);

transform:translate3d(80%,0,0);

}

}

This transition actually occurs because of a little bit of jQuery that adds the class .js-menu-open to the <html> tag when the menu icon is clicked.

$(“.nav-menu”).toggle(

function () {

$(‘html’).addClass(“js-menu-open”);

}, function () {

$(‘html’).removeClass(“js-menu-open”);

}

}

Overall, it’s a rather simple and nifty solution to a seemingly complex piece of functionality. While I do really enjoy the effect, the usability nerd in me has a slight issue with hiding the main navigation from the tablet or mobile user. Regardless, the website in general is a great responsive design example.

3. Images and videos that respond properly (ChengCrowns.com)

Responsive design is all about serving up the right content for the right screen size. Too often, I see videos and images that don’t resize properly to tablet or mobile screen sizes. At Brolik, we recently completed a responsive ecommerce website for the company Cheng Crowns where we implemented a few solutions to fix these problems.

We developed a jQuery plugin called Responsive Img that swaps out an image’s src attribute based on its container’s width. In layman’s terms, the site shows an appropriately sized image based on the size of the browser. With the use of a PHP file, Responsive Img creates new images at different sizes the first time they’re needed and puts them on your server. Therefore, you can add Responsive Img to any site, without creating new images at different sizes.

On Cheng Crowns, at the full width of 1400px, the banners have a lot of horizontal space to work with and the text is sized appropriately. But as you shrink the screen, the description text in the banner becomes too small to read. When the banner image gets to a width of 767px, we serve up a smaller banner image with Responsive Img and one line of jQuery:

Overall, it’s a simple solution to a common problem that most web designers encounter when designing responsive websites. This way, a mobile or tablet user will see images sized specifically for their size screen. This allows you to serve up the right content to the right users with minimal effort and setup.

We also used a simple solution for making videos responsive on Cheng Crowns. I’m always disappointed when I’m on my phone and videos don’t scale down properly. So here’s our solution, and it’s as simple as these three lines of jQuery:

$(window).on(“ready load resize”,function() {

var videoWidth = $(“#videoPlayer”).parent().width();

var videoHeight = videoWidth*.5625;

$(“#videoPlayer”).width(videoWidth).height(videoHeight);

});

Basically, on window ready, load, or resize, this function grabs the width of the video container <div>. It then multiplies that by 0.5625 to get the correct aspect ratio for the height and resizes the video appropriately. It’s worth noting that when the video is played it expands to full screen. Very simple and totally seamless.