Smarter ideas worth writing about.

Considering Responsive Design within Fixed-width Layouts

 
When someone designs a site with a fixed-width layout, responsive design generally doesn't come to mind. In the web design community, the term "responsive" triggers thoughts of fluid layouts and viewing sites on mobile devices. The term "responsive" is tightly coupled with creating sites that display well in different viewport widths and devices. The width (and height) of layout elements matter within fixed-width layouts as well.

What is responsive web design?

Responsive web design is a concept in which a web design's layout responds to the width of the web browser window or device it's being viewed in. The layout is fluid, and it's responsive in that the elements of the page resize and shift around to accommodate the available space. A responsive design will display equally well on a large desktop monitor and a 2.4-inch-wide smart phone. As more people access the internet with mobile devices, it becomes increasingly important for this concept to be considered and utilized.

A prime example of a responsive design is BostonGlobe.com. When you visit the website in a maximized web browser window, its layout includes three columns. However, when you resize the browser window and make it slimmer, the page layout changes: The sections of the page shift around, the three columns become two (then one), and the text and images get smaller. The page still displays properly. Essentially, the website responds to its current viewport. This is incredibly valuable when maintaining a site that must display properly in an array of screen widths.

 

Web designer/developer Ethan Marcotte coined the term in 2010 in his article "Responsive Web Design," and wrote a book with the same title. Both are great starting points when diving into the subject. For more examples of responsive design, visit mediaqueri.es.

What are fixed-width layouts?

In web design terminology, a fixed-width layout is a web design with an explicit width, no matter the width of the browser window or viewport. Fixed-width and fluid layouts are different in that a fixed-width layout doesn't change when the browser window is resized. A fixed-width layout looks the same on all devices. When viewed on a smart phone, a fixed-width layout will generally require zooming in to make it legible.

Many sites that have a fixed-width layouts  are coupled with a mobile-friendly layout. It's worth noting that most of the world's most popular websites (Facebook, Yahoo!, MSN, CNN) use fixed-width layouts. For mobile devices, these companies have separate websites and apps to deliver content, so responsive design is generally not a concern.

Responsive Web Design within Fixed-width Layouts

While responsive web design is generally related to fluid layouts, some of its core concepts should also be considered when designing fixed-width layouts. The most important aspect of any website is its content, obviously, and the way in which it's displayed is paramount in the design process. If content changes, the layout needs to adapt.

Consider this example: A web design includes a sidebar with a block of text. The box is 100 pixels tall and has rounded corners. A developer's first urge may be to simply slice the box from the design, place it on the webpage and include some dummy text to fill it up. Rounded corners are visually appealing, but can be tricky to pull off in an actual web page. In modern browsers like Chrome and Firefox, rounded corners can be added programmatically. However, the same can't be done with older versions of Internet Explorer. What happens if the amount of text changes? Will the box automatically respond? It won't, at least not by default.

The full-proof way of displaying those rounded corners would be use a set of images – one for the top left, top right, bottom left, and bottom right. Using separate images for the corners will allow more flexibility when the box increases or decreases in height. The box becomes responsive and adapts to its content.

 

 

Other design element may have rounded corners too, such as search and other form fields, and navigation bars. A similar fluidity exploration should happen with these elements as well.

These issues become increasingly important when a website is managed with a content management system. The length of page titles, subtitles, and paragraphs are no longer under the designer's control. The way page elements respond and adapt to its content must be considered well before a user updates a chunk of text.

When designing a new website, whether responsive or fixed-width, any element in the layout that could change due to content updates should be scrutinized. It will take more effort during the design process, but the payoff is worth it. The site will be more flexible and future proof, and the final product will have greater quality.

Share:

About The Author

UI Developer
Brendan is a UI Developer in Cardinal’s Cincinnati office, where his primary responsibility is converting designs into functional, interactive web sites.