eHarmony Engineering logo

Responsive Design in the Real World

Kaanon MacFarlane

June 26, 2014

At eHarmony, we’ve been using responsive design techniques to ensure that each type of user gets the most relevant User Experience for their platform. Along the way, I’ve picked up a few tips that I’d like to share. Designing for a content sites, like our Dating Advice or our eHarmony Blog is pretty straight forward. The main point is change the relevant elements to NOT float, and to set them to fill the full width of the screen. It’s also a good idea to decide what elements of the page you’d like to hide (or show) when a user is viewing the page on a small site. Those details are not the focus of this article.  I will be sharing my experience in designing responsively for web applications and direct marketing,  where pages are far more complicated than a simple content layout of header, body, sidebar and footer.

1. Progressive enhancement refers to CSS, too.

Currently, our most common browser resolutions are 1366×768, 1280×800 and 1400×900. This comprises about 40% of the visits to our corporate site. Initially, I implemented the design of pages at one resolution and used CSS media queries to deal with sizes higher and lower. As time has gone, I’ve found this is not necessarily the best approach. Some older browsers (you can probably guess which ones) don’t support media queries, so the experience in one of these browsers will be strange when visitors see a page designed for 1400px wide in their 1280px browser. They’ll see the dreaded horizontal scroll bar and important elements of the design might not be on the screen. Instead, I’ve decided to follow the principle of Progressive Enhancement and design the initial implementation for the lowest common denominator of desktop browsers, which is typically 1024 pixels wide. Not coincidentally, this size often corresponds to those older browsers that don’t support the media queries. After this “base” CSS implementation is done, use media queries to your hearts content to size elements up or down. You might say, “Hey, what about mobile browsers? Wouldn’t they have the smallest resolution?” Mobile browsers are also some of the newest browsers, so they do support those media queries. You should be able to target their sizes in media queries and then make your changes for them, as well.

header.content{width:920px; }
@media screen and (min-width:1340px){
  header.content { width: 1024px;}
}
@media screen and (min-width:1580px){
  header.content { width: 1124px; }
}

2. Image tags scale more easily than background images

Our designers often spec for Full Bleed Backgrounds, where the image is huge and goes from edge to edge. This can be accomplished in a few different ways. The first is to use the background-image property in CSS3 along with the background-size property. This works really nicely – when it’s supported. As with before, not all browsers are CSS3 compliant, so background scaling isn’t always the same. The other option is the old standby, the image tag. By setting the image to have a max-width of 100%, you’ll ensure that the image won’t be larger than it’s container element. But that’s beginner responsive design. Images can also have min-width of 100%, to ensure that it’s always the full width. Setting the min-height will make the image as big as it can be as well. You can then decide to hide part of the image by giving the container element a fixed height. Alternatively, you can let the image act as a background image that is not always fully visible. The implementation you choose will depend on your design, but both will work in all browsers, even those older ones. If you want to get REALLY fancy, you can use background-size and use Javascript to detect if  it’s not supported. If it’s not supported, you can load normal images using the technique above.

img.full {
  min-height: 100%;
  min-width: 100%;
  top:0;
  right:0;
  bottom: 0;
  left: 0;
  position:absolute;
  margin: auto;
}

marriage

3. Don’t forget about larger screens.

When I first encountered Responsive Design I mainly thought of it’s strength for showing content properly on smaller screens like mobile phones and tablets. However, we discovered just as useful for showing MORE content if the browser is big enough. For a version of the registration page, we had a set of cards on the page. We targeted browsers 1920px wide and larger (which is an increasingly large percentage) and showed more cards when the page is wider. This is not always optimal because the image may download to the browser even if it’s not visible. In another iteration, we will use sprites, and only load the larger assets when appropriate. As with all techniques there is a trade-off between the visual experience and the time it takes to download the page. Take a look at the overall page load time and the elements on your page, to decide whether this is a good idea or not.

#cards .pillar1.hidden,#cards .pillar2.hidden{display:none;}

matchcards

@media screen and (min-width:1600px){
  #cards .pillar1.hidden,#cards .pillar2.hidden{ display:block;}
}

1920px wide