.net technique css
Adjust layout By adding a lot of extra space on the right I’ve been able to bring content up from below. Here’s the new, adjusted layout, which is making good use of the extra screen real estate. I’ve gone ahead and removed the grid
In depth ‘A’ – As there’s now room, I’ve added another bucket of visual navigation. ‘B’ – The image has increased inside; this could be handled by div masking using the overflow: hidden; attribute. ‘C’ and ‘D’ – to balance the grid, the header and footer moved over
The 960px grid
I think the grid itself should remain fixed; the number of columns and layout, however, should increase as the width of the viewport increases. Let’s say we’re using a six-column grid: 145px columns and 13px gutters. For a horizontal screen resolution of 1024, things look pretty good. But at any resolution wider, we have the opportunity for a much nicer and more functional layout. Being that the majority of people online have a resolution greater than 1024, it might be a good idea. At a horizontal screen resolution of 1440, we have room for three more columns. That’s a lot of extra space to bring content up from below while adjusting the content on screen to better the horizontal flow. At the end of the day, the layout should respond to the width of the viewport. The term “Responsive Web Design” has been used to describe an adaptive approach to web design in targeting different devices (see Ethan Marcotte’s feature in issue 206). I think it fits nicely here too. So how do you toggle rules based on viewport size? Here are three techniques to do just that.
Fast-forward again: 2007ish – the dawn of the 960px grid. Grids are a central discussion point in the interactive community. It seems that all of a sudden interactive designers are, for the first time in their careers, looking at print design and graphic theory for inspiration. A new, albeit digital, grid-based movement had begun, built on the fundamentals defined by Tschichold, Müller-Brockmann, Hofmann and Ruder 60 years earlier. Downloadable templates flourished. Grid generators took off.
Mostly, liquid layouts look terrible. Columns are too wide and text becomes hard to read Grid-based designs were everywhere. People were happy (I know I was). But with the “automation” and the “copy+paste” nature of the web grew a problem – people stopped thinking. People sought to automate a process that shouldn’t be automated. Apathetic complacency took root. It went two ways: one, grids were an end to a means; two, people sought a grid design, NOT a design built on a grid. The automation took the ‘semantic’ and ‘syntactic’ side of the design process out – the ‘why’ and ‘what for’. Worse yet, people began to justify bad design because it “didn’t break the grid”. They forgot that ugly is still … ugly. Josef Müller-Brockmann wrote: “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” All right, history lesson over. To set this up, I think it’s fair to let you know a couple of things: a) I like print-inspired/editorial-esqe layouts: I think it’s the future of interactive design. b) Horizontal flow is a good thing. c) Wider is better. d) I don’t like page refreshes. Okay, now let’s get to it.
Rethinking the liquid column
For the most part, liquid layouts look terrible. Columns are too wide, text becomes hard to read, the layout is sloppy. People (myself included) have played with proportional liquid layouts but I find you’re left with an overweight and plumpy design. Content from below the fold may or may not move up; nothing really beneficial is gained; design integrity is out the window.
Using the @media tag: /* default rules */ #lorem{ background-color: #ccc; } /* rules that should be applied only if the viewport size is equal or larger than 1440px */ @media screen and (min-width: 1440px) { #lorem{ background-color: red; } } Loading a different CSS file based on the media query: <link rel=”stylesheet” type=”text/css” media=”screen” href=”default.css” /> <link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 1440px)” href=”wide_screen.css” /> Use JavaScript to detect the viewport size and then set a className to the body element: //get crossbrowser window inner size function getInnerWidth(){ return (window.innerWidth)? window.innerWidth : ((document.document Element.clientWidth)? document.documentElement.clientWidth : document.body.clientWidth);
.net october 2010
85
next>