How to Design the Web in a High-Def World

Aug 26 2009 by Arley McBlain | 29 Comments

One of the first design considerations a web designer has to make is the resolution that the project is going to be built in. Will the site be optimized for 800×600 systems? 1024? Will the width be fluid or fixed? Will it work for mobile devices? There are certainly a lot more screen resolutions to consider now than there were just a few years ago.

There are quite a lot of articles written about designing small for mobile devices, but what about the largest common resolution; High Definition (commonly referred to as HD or High-Def)?

This article is going to show you a process for making your site work for multiple resolutions by using a real-world case study: Debut Creative. Granted, you can use this without dealing with HD resolutions, but why not go extreme?

Debut Creative was recently designed to work in HDDebut Creative was recently designed to work in HD.

Introduction

HD has been getting more consumer use over the last couple of years with the ever-decreasing price points of Hi-Def television sets. They are not only easy to hook up to HD-capable computers, but also, modern gaming devices like the Wii, Playstation 3, and Xbox 360 also have internet-enabled browsers which can be used to browse the web. The time has come to consider designing for this popular format.

As over-the-top as HD web design seems, I recently designed my site, Debut Creative, for 1920×1080 viewing (currently the site layout is actually optimized for 1024, but the background frames it nicely for HD). There are a few serious considerations to make before building a site for 1920 screen resolutions, even if it is just the background.

Some Issues with supporting HD

File sizes is a major consideration. By the very definition of an HD site, any background image that spans the full 1920×1080 will be massive (two megapixels by definition). By extension, unless properly addressed, these large sizes could lead to needless bandwidth consumption for users who don’t need the full HD experience.

From a design perspective, I wanted my background gradient to frame the content nicely with the darkest edges coming in around the edge of the full-screen browser. Having one background that frames it in this way for HD would be inadequate for any smaller browser.

In Photoshop: All that is visible is the gradient layer that we want sized to the edges of different resolutions. In Photoshop, all that is visible is the gradient layer that we want sized to the edges of different resolutions. Click on the image to see full-scale version.

The solution is simple; a JavaScript resolution sniffer with dynamic background image calls. Before we get to that, let’s talk about preparing images for HD.

The Image

The first step is preparing your background image in Photoshop (or an equivalently capable image editor). I began with an HD background (1920x1080px). In addition to my framing gradient, I added a layer of a heavily feathered brush stroke to make certain the background pattern faded to solid nicely so my pages background color can take over where this image ends.

When you have your background ready for HD: save it (and maybe make a backup copy). We’ll soon be cropping and removing lots from it!

caption HD Resolution 1920x1080pxHD Resolution at 1920x1080px. Click on image to see full-scale version.

To save web and mobile device optimized images, Photoshop has a feature called Save for Web & Devices (Ctrl+Alt+Shift+S). I played with the settings here to optimize this huge image as best as I can. I settled on saving it as an optimized JPG with quality at 53%, and I was able to get the image down to 111KB. This would be a painful 21-second download for a typical dial-up connection (for just the background image), but a manageable 5 seconds for the average DSL user. I’m OK with that.  Give your file a meaningful name like bg1920.jpg.

Save for Web & Devices optimization allows you to compare compression sizesSave for Web & Devices optimization allows you to compare compression sizes. Click image to see full-scale version.

Now we’re going to repeat the steps for the other common resolutions. This is a great time to get into some keyboard shortcuts to blaze through the process. Here’s my play-by-play sequence for Photoshop for this example (some of the more ingenious designers out there may consider recording Photoshop Actions to streamline this process).

You’ll note I use Canvas Size to alter only the width. Changing the height as well would cause my navigation bar to become too short. Depending on your layout you maybe want to do Image Size which scales the image entirely (Ctrl+Alt+I).

First, I click on my gradient layer (the layer I’ll need to adjust with every resolution size).

Then it’s a simple process of:

#1 – Ctrl+Alt+C to open the Canvas Size option box

#2 – Tab twice to get into the Width field

#3 – Enter the width (widths the resolution sniffer will use include 1920, 1600, 1440, 1280, 1152, 1024, 800, 640. For common mobile resolutions, check out the List of common resolutions on Wikipedia.

#4 – Press the Enter key twice to confirm cropping and close the Canvas option box

#5 – Ctrl+T to activate the Free Transform feature for the active layer.

#6 – Hold down Alt and horizontally resize the edge of the gradient in to the new edge: Holding Alt makes the resize mirrored. It should snap to the edge of the document.

#7 – Press the Enter key to finish and render the transformation.

#8 – Ctrl+Alt+Shift+S to open the Save for Web & Devices option

#9 – Press the Enter key (the settings should be the same as last time) to save.

#10 – Name the file in the same convention used for your first file.

#11 – Press the Enter key to finish saving the file

Repeat!

You should now have a snazzy folder full of images. Since my web layout is set for 1024, I’m not going to use the smaller files; however, I am going to make a bg0.jpg that is a gradient-less and tile-ready version of my background that is a few hundred pixels square. This may be useful for mobile surfers.

When finished, you should have a folder of well named images of various size.When finished, you should have a folder of well named images of various size.

The JavaScript

Now that we have all of our images, we are ready to call them dynamically into our site. The following script works well with multiple monitor systems as well. Usually when it gets the screen.width value, it is detecting the width of your primary browser, not the resolution of your entire desktop. Some browsers may detect the screen that it is in.

Place the following call to the JS file after the <body> tag (placing it in the head will call the background before your CSS which may cause it not to render).

<script src="http://yourdomain.com/scripts/sniffer.js" 
  type="text/javascript"></script>

Or if you’re using a theme like WordPress:

<script src="http://yourdomain.com/wp-content/themes/themename/sniffer.js"
  type="text/javascript"></script>

Now, naturally you’ll need the JavaScript. What the JavaScript resolution sniffer does is detect the screen.width and apply the appropriate CSS image backgrounds.

Some notes

I use "greater than or equal to" (>=) conditional operator to cover strange resolutions that might come across the site/

There is a "less than or equal to" (<=) operator for resolutions less than 799px. This should cover some netbooks and mobiles with smaller resolution.

This example just switches the HD background for my 1024px ready site – however, you could modify the code to call completely different stylesheets to change even the layout to work in different resolutions.

The code

/* Resolution Sniffer / Dynamic CSS Loader - HD | 
via Arley McBlain http://debutcreative.com */

/* Common Computer Screens: 640,800,1024,1152,1280,1440,1600,and HD 1920 */

// File path to background images folder
var bgFolder = 'http://yourdomain.com/wp-content/themes/yourtheme/images/';

if (screen.width>=1920){
 document['body'].style.backgroundImage='url('+bgFolder+'bg1920.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1600){
 document['body'].style.background='url('+bgFolder+'bg1600.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1440){
 document['body'].style.background='url('+bgFolder+'bg1440.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1280){
 document['body'].style.background='url('+bgFolder+'bg1280.jpg)';
 document['body'].style.backgroundRepeat='repeat-x'; 
}
else if (screen.width>=1152){
 document['body'].style.background='url('+bgFolder+'bg1152.jpg)';
 document['body'].style.backgroundRepeat='repeat-x'; 
}
else if (screen.width>=1024){
 document['body'].style.background='url('+bgFolder+'bg1024.jpg)';
 document['body'].style.backgroundRepeat='repeat-x'; 
}
// Optional
/* else if (screen.width>=800){
 document['body'].style.background='url('+bgFolder+'bg800.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
} */
else if (screen.width<=799){
document['body'].style.backgroundImage='url('+bgFolder+'bg0.jpg)';
document['body'].style.backgroundRepeat='repeat';
}
else {
 document['body'].style.backgroundImage='url('+bgFolder+'bg1024.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}

The CSS

Finally, you might need to tweak your CSS. Simply forcing the background image to change might make your background color change to white automatically. Adding !important to your background classes that you don’t want to include in your JS file will force them to work.

body {
 background-color: #1a1c1c !important;
 background-position: center 0 !important;
}

Testing

So is it working? Change your desktop resolution and refresh your site. If you have a multiple monitor system you’ll only have to change the resolution of the primary monitor to test, regardless of what monitor the browser is in. If you want to test it on an HD set that is hooked up to your computer you may have to set this as your primary monitor.

Download

Download the script used in this article below and feel free to use on your own sites (you’ll have to modify it).

Summary

We certainly have some time before HD websites become something in demand. It’s kind of rewarding being on the bleeding edge though right?

Related Content

About the Author

Arley McBlain is a web designer, web developer, and Founder/Creative Director of Debut Creative based in Ontario, Canada. If you’d like to keep in touch with the author, check out his personal site, ArleyM, and follow him on Twitter as @ArleyM.

29 Comments

Morgan Roderick

August 26th, 2009

Instead of writing a lot of styles with CSS, I would recommend just setting a class on the body element, ex: w1920, and then define the background images in the CSS file instead.

Morgan Roderick

August 26th, 2009

Oh, and great post btw :-)

Elena

August 26th, 2009

This is a terrific article Arley. One always debates what size to optimize sites for and it’s nice that there’s a solution for that. I also like that your javascript is straightforward. So many times, it’s more complicated. Great job!

LeRoy Lee

August 26th, 2009

First off, the xbox360 does not have a browser (yes I am kinda bitter about that). I appreciate the walk-through.

The problem with this is you have a script blocking your background image. Your traffic is going to look something like this. Request page, request script, run script (blocking render), script requests image, download and render. Lets say you place the script at the bottom of your page, at the very least you are looking at a redraw. My point is your 5-21 seconds is going to be more than that when you include the network latency and render/redraw. I already feel that 5 sec is too long, and for what, a background image that frames a 800-1024px body. It just doesn’t seem to address the full issue. The real dev issue is between mobile, desktop (with a wide range of resolutions), and now HD we have three very disparate user groups. My desire would be to have resolution (or at the very least device info) in the request object so we can serve up the correct stuff right from the get go.

Jesse Kaufman

August 26th, 2009

Don’t forget to use apps like pngout for extra lossless PNG compression and Google’s Page Speed extension for Firefox, which helps you pinpoint less-than-optimal JPEG and other image files (and can even give you optimized versions) …

Mohamed Jama

August 26th, 2009

Thats an interesting attempt and it works very well, but realistically you catering for the very minority on the expense of everyone else and never mind the extra production time.

Thanks for the tutorial though just my two cents.

I modified your sniffer a bit

August 26th, 2009

I usually use a container div within my body tag to make layered backgrounds easier. This allows me to do some pretty neat things….

Anyway, here is a modified version of your script that is based on the window size. It can also be called with window.onresize to detect the user resizing their browser window.

It’s just a quick hack. I plan to make it better with image pre-loads for the window resize function.

window.onload=function () {
var bgFolder = ‘images/’;
var screenwidth = document.body.clientWidth;

if (screenwidth>=1900){
document.getElementById(“main”).style.backgroundImage=’url(‘+bgFolder+’bg1920.jpg)’;
document.getElementById(“main”).style.height=’1440px’;
} else if (screenwidth>=1500){
document.getElementById(“main”).style.background=’url(‘+bgFolder+’bg1600.jpg)’;
document.getElementById(“main”).style.height=’1200px’;
} else if (screenwidth>=1400){
document.getElementById(“main”).style.background=’url(‘+bgFolder+’bg1440.jpg)’;
document.getElementById(“main”).style.height=’1080px’;
} else if (screenwidth>=1200){
document.getElementById(“main”).style.background=’url(‘+bgFolder+’bg1280.jpg)’;
document.getElementById(“main”).style.height=’960px’;
} else if (screenwidth>=1100){
document.getElementById(“main”).style.background=’url(‘+bgFolder+’bg1152.jpg)’;
document.getElementById(“main”).style.height=’864px’;
} else if (screenwidth>=1000){
document.getElementById(“main”).style.background=’url(‘+bgFolder+’bg1024.jpg)’;
document.getElementById(“main”).style.height=’768px’;
} else if (screenwidth>=800){
document.getElementById(“main”).style.background=’url(‘+bgFolder+’bg800.jpg)’;
document.getElementById(“main”).style.height=’600px’;
} else if (screenwidth<=799){
document.getElementById(“main”).style.backgroundImage=’url(‘+bgFolder+’bg800.jpg)’;
document.getElementById(“main”).style.height=’600px’;
} else {
document.getElementById(“main”).style.backgroundImage=’url(‘+bgFolder+’bg1024.jpg)’;
document.getElementById(“main”).style.height=’768px’;
}
document.getElementById(“main”).style.backgroundRepeat=’no-repeat’;
}

Roberto

August 26th, 2009

Very interesting. Will give it a try. Thanks!

Mr. Fussyfont

August 26th, 2009

Hi Arley, nice job on Debut Creative. Just a quick optimization tip (not that you need it for such a small chunk of code, but it’s the principle). I would put the default background rule in the CSS file, including the repeat-x (then you only need to change the image), and then do a loop, like this:

var i,
res = [1920,1600,1440,1280,1152,1024];
for (i=0; i<res.length; i++) {
   if (screen.width >= res[i]) {
    document.body.style.backgroundImage = 'url(http://yourdomain.com/images/bg' + res[i] + '.jpg)';
    break;
  }
}

Down to 4 lines!

ArleyM

August 26th, 2009

Great feedback, thanks guys.

@Morgan; great idea

@Jesse, I’m going to look into this!

@Mohamed and @LeRoy: You’re right there are a bunch of issues with making a site in HD. It’s not for every site, or even many sites! It’s one of those “good” vs. “cool” debates. Color TV, Cell phones and walkmans got scoffed at too though. Maybe one day this could be a lot more common.

@Mr. FussyFont; I salute you sir! That is some tight JS.

Martin Sanders

August 26th, 2009

Interesting article, is there an alternative jQuery js plugin? I use jQuery within my sites so would like to keep all js code within the same framework.

gus

August 27th, 2009

havent you ppl heard of patters? tiles? PNG24?

geesh…

Shane

August 27th, 2009

Hey Mr. Fussyfont,
I was just coding up nearly the exact same thing. Something about being a coder and seeing that series of ifs/else-ifs made me cringe in much the same way as any graphic designer would while looking at some of my designs. ;)

Ryan Eade

August 27th, 2009

This is a great idea, I recently revamped my website and I’m using a 1920px wide background to extend the theme on larger monitors. I was just starting to look into a solution to keep users with smaller displays from having to download the nearly 200k image when I read this article. Great work!

Jason

August 27th, 2009

Great post, it’s definitely time to start kicking static resolutions to the curb. have to give this a try.

Nick Morss

August 27th, 2009

Really interesting concept. I have come across ‘HD’ backgrounds a lot recently and this method shows a great way to Progressively Enhance your site for those wide-screen visitors. Nice!

Russell Bishop

August 27th, 2009

Surely all you did here is design a website that works in 1024* and up.. I thought this was for “HD”…

Luisa

August 27th, 2009

Well, if the right and left side are the same, is possible to make a background 50%/50% each side repeatig different patterns. And then, you make the bottom to repeat the last color. I dont know how to explain better, but you can see this site I developed in HTML/CSS/PHP as exemple: http://diegorangel.com – It works in any resolution full 100% width and the background images are very very tiny

Cory Mathews

August 27th, 2009

I do not understand why you would want to do this? Why not just put a css background on your body tag with the image? Then you do not have to create so many different images, or rely on javascript.

Marcel Muller

August 27th, 2009

Very interesting. Thanks for sharing!

Jay Carlson

August 28th, 2009

great tutorial and ideas. I think some people aren’t paying attention to your original bg image. you don’t want to repeat the glowing effect if it’s on a bigger screen, guys. that’s why he doesn’t just “set the bg in CSS and repeat”…I might have to give this a try on one of my own projects.

J.

Wiz

August 28th, 2009

@Russell

Yay! (clap clap clap) Nice constructive criticism, you did a great job of making your point by adding an ellipsis to the end of your sentence.

Perhaps you should just re-read the article and see the point was using different images so people on smaller resolutions don’t have to wait for high-res images to load. Just because the title used the term “high-def” world doesn’t mean the tutorial is completely about high-def.

Sergio de la Garza

August 31st, 2009

what a great tutorial and feedbacks btw i guess will follow this for my page

regards

Bobin

September 3rd, 2009

very good , thanks for sharing and all the cooments

Zync

September 21st, 2009

Love the tute,

Thanks heaps for this. I also use smart image resizer to dynamically create the backgrounds for different resolutions on the fly. That was just upload 1 and let php take care of the rest.

http://shiftingpixel.com/2008/03/03/smart-image-resizer/

Lee

October 16th, 2009

Idont want use it as web home page i just thowt that having a good browser would help with size of media player and homepage to big sites when starts to grow so support on this one so any ideas great thankyou.

Randy

October 24th, 2009

Glad I found this. I am not really interested in the background image size but more about applying this to optimizing a website for widescreen. As a designer, I realize the importance of making a website viewable to everyone but frankly I am sick of making sites fit 1024 wide resolutions and then having tons of negative space on other monitors. Google Analytics shows 70% of my clients visitors have at least 1200px wide screens. There is just so much wasted space and then still having to scroll.

I have a number high def TVs at home and I get so annoyed with the lack of HD programming, can you even buy a non-hd tv anymore? Anyway, I guess if i am making 1024 sites, I am no better. So the challenge is making widescreen optimized sites that can still be viewed on 1024.

I am going to try using the concepts here to define my css divs, I am thinking making my main content fit 1024 and then have a block that on widescreens will appear on the right and on 1024 will become a footer. and yes, i could do a fluid width but frankly the lack of control of layout really sucks with that unless maybe there is a ton of text which I wont likely have.

Fredrik

March 2nd, 2011

I’m trying to implement this on a local website at the moment. I’m having a problem though…

When I change my screen resolution to 1344×840, it loads the 1280 bakground, and i get whitespace on the sides of my background.

Shouldn’t it load 1440 instead? So we never get whitespace?

Thanks!
// Fredrik.

ArleyM

March 17th, 2011

@Fredrik – this method is a bit dated now; you should check out Responsive design! It’s a method that will change the background based on the browser width in real time. Check out http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/

Leave a Comment

Subscribe to the comments on this article.