Content-Aware Responsive Banner Tutorial

CallyAnn Hamilton
Inspired by http://www.isu.edu/magazine/ & http://alistapart.com/article/responsive-web-design

s more and more of the world goes digital, photographers and designers are facing increasing opportunities and challenges in showcasing their work. Ensuring that designs maintain their integrity from one device to another is the spirit of responsive design. In this tutorial, Ill show you how to use CSS3 media queries to create a banner for your photo-design blog that will look good on everything from a tiny smart-phone screen to a massive monitor.

Youll need: 1 large, blurry image cropped to banner size 1+ cut-out photo with crisp edges A basic understanding of HTML and CSS A browser that can support CSS3 (IE9, Opera 10+, Firefox 3.5+, Chrome, or Safari 3+) 1. Choose/create your images. One image should be large and either very blurry or abstract enough that it doesnt matter if parts get cut off. Title it background and save it as a .png. Mine will have a size of 960 x 250, since this is the width of the content area on my blog.

#responsive_banner{ background-image: url(background.png); background-repeat: no-repeat; position: relative; height: 250px; } #content-aware{ margin-left: 20px; }

The second should be a tidy cut-out with good focus and crisp edges. Title it cut_out and save it as .png with a transparent background. It should be smaller than your background. Mine is 267 x 250.

4. Determine the screen resolution breaks. These are the sizes at which your banner layout will change to preserve the integrity of your focal point, the cut-out. Well style the banner for 1024 x 768 and 768 x 1024 (iPads and similar tabletsnotice that sizes are inverted because tablets can be used horizontally or vertically), and 320 x 480 (most smart-phones). In your CSS, add these queries: @media (max-width: 1024px) { } @media (max-width: 768px) { } @media (max-width: 320px) { } @media (min-width: 1025px) { }

2. Create your HTML. In the body tag, add: <div id=responsive_banner> <img src=cut-out.png alt=plant id=content- aware/> </div>

3. Add some basic styling with CSS to put the banner together. The cut-out will sit on top of the background.

Notice that the last query is the largest resolution that we will be working with, and it is written as a minimum. This will accommodate those users with 1280 x 800 screens (the most common screen size) and larger, since the banner doesnt need as much formatting for big screens.

5. Control the size of the full banner as the screen shrinks and stretches. Edit your 1024px query as follows: @media (max-width: 1024px) { #responsive_banner{ width: 90%; margin: 0 auto; } } View your HTML file in a browser window, and try stretching the window in and out. Notice that the background image stretches and shrinks in width so that it always stays within the window, but the cut-out does not. Unfortunately, once you stretch the window out past 1024px, the banner wont stay centered. Lets fix it!

8. Last but not Least... We could feasibly leave the last break (320px) alone since the cut-out is left nice and prominent, but if we do that, the cut-out becomes centered. At its smallest size, we also wont have any room for anything else (like text or a logo) on the banner. So, lets adjust the size one last time for a layout thats smart-phone friendly AND aesthetic. Were going to change it up quite a bit by making more room on top of the cut-out for text. The banner height change will carry over. @media (max-width: 320px) { #content-aware{ height: 150px; position:absolute; bottom: 0px; margin-left: 10px; } }

Youve just completed the basic framework for a contentaware, responsive web banner! To better understand the purpose of all of this coding, observe the difference:

6. Add the following code to the 1025px query. @media (min-width: 1025px) { #responsive_banner{ width: 960px; margin: 0 auto; } }

7. We have two more breaks to edit. Lets work on the 768px resolution query. For this resolution, were going to change the size of the cut-out AND the banner so that we can maintain a good composition even as the space gets tight. In the 768px query, start by changing the height of the banner: @media (max-width: 768px) { #responsive_banner{ height: 200px; } } #content-aware{ height: 190px; position: absolute; bottom: 0px; margin-left: 10px; } }

1. Before. See the scroll bar? If your banner isnt responsive, your content gets cut off on small screens. 2. Responsive. This banner has been coded to respond to changing screen sizes, but it just resizes proportionally. The important elements of your banner end up tiny, so your users may have to zoom and scroll anyway. 3. Responsive AND Content-Aware. Thanks to all our coding, the banner changes sizes to suit the screen resolution, but also keeps the crucial elements prominent. Unlike the before image, theres still room on this banner for text or a logo, and the composition is more aesthetic. The world (-wide-web) is your oyster with responsive, content-aware design!