Laddawn.com : Thoughts on page width

(The “dummy” is me; in the past, I relied on team members or business partners to explain this stuff to me…  )

I’ve done some research – it’s not exhaustive, but seemed good enough to draw some conclusions for Laddawn. I haven’t expended a lot of effort packaging or polishing this. Let me know if it’s too verbose for Ladd and Jim and I can boil it down further.

++++

Conclusion: Designing to a 1024 width, with a fixed 960 pixel grid, is probably just fine; it’s not going to be obsolete soon.  Nevertheless, before we settle on it, we should ask CMN whether a 970 grid would work equally as well, or mess up the balance and symmetry of the current modular elements. We should definitely explore reclaiming the left and right margins within this grid, that are now being used for little floating icons, to give the primary design elements more breathing room and allow them to look less crowded, or to squeeze in another column.

Why do designers and developers use grids?

A grid is a consistent system for placing objects. It works on two levels: At the unit level of cells (e.g. 20×20 pixels) and at the column level (e.g. 4 columns). A grid enables designers to lay out elements from page to page in a consistent manner, without having to reinvent the dimensions over, and over to preserve balance and symmetry.

Why are the grids that designers work with narrower than the monitor width being designed to, and how are those widths determined? 

If you’re designing to say, a 1024 monitor width, then the page width itself needs to be narrower to allow for browser “chrome” (scrollbars, borders), (and a little extra padding the content or design elements don’t bump right up against the edge of the window, which looks cheesy).  So why not subtract just 40-50 pixels to arrive at an ideal width of 974-984?  Seems like a comfortable margin, right? The problem is that designers work in a basic unit of measurement, the pixel, not fractions of pixels; to maximize grid possibilities (number of columns of varying widths), the width needs to be divisible by as many numbers as possible.  The magic number is 960; it’s only slightly smaller than the max possible, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16.  Nevertheless, some designers debate the way the 960 grid is sliced up (gutters too wide, and no need for left and right gutters), and advocate a width of 970 with narrower gutters and no left and right gutter.  This grid style is not as versatile as 960, but may be versatile enough for certain designs. (Mass.Gov was redesigned with a 970 px grid.)

Why continue to design to a 1024 monitor width if over 80% of the world is using monitors of 1280 or wider?

1. Versatility: Desktop monitors may be getting wider and wider, and most laptops are at 1280 or over, but more and more users are visiting sites with mobile devices which are much smaller than 1024.  A fixed width of 1024 works as well on a small laptop or tablet as it does on a regular monitor; it’s “less bad” on smaller devices like smart phones (assuming the site doesn’t have a mobile version or app).
2. Usability: Even if monitors can display pages wider than 960/1024, should they? The wider the page, the harder it becomes to read wrapping text (for less text heavy sites, I am guessing similar principles apply – wider and wider horizontal scanning is tiresome or overwhelming, filled with large or small graphical elements). And for most users, extra wide monitors are used for multitasking with multiple windows open; 1024 is perfectly readable in that context, text heavy or not.
3. Until responsive design techniques mature (and we understand where they make sense and where they don’t…), it’s the least risky approach. Given that web browsing hardware (dimensions, orientations and input methods –typing, touchpad, etc.) is moving in every direction simultaneously… Designers are starting to start think in terms of infinitely variable “viewports” for some situations.  They are adopting “fluid” designs, based on “responsive” or “adaptive” design approaches – using these approaches (as with recent Boston Globe redesign) page widths will gracefully expand and contract based on user-selected or hardware-determined window width. But these techniques aren’t considered mature yet, and in any case, may not make sense for Laddawn.

Great info – I’d like to learn more about variable widths. Should they apply to our work?

Agreed. However, keep in mind ....

... I would not say 90% of your users have resolution > 1024; it’s at least ~30% and up to ~45% depending on what falls into “other” (data copied below). What is “other” you ask? Because my source data from GA is actually broken this down into browser types AND vertical dimensions, I had to do manual tabulation to get width totals.  Because there are 283 rows of screen res data points, to simplify my tabulations, I just looked at the first 25 rows to get at what accounts for over 80% of traffic. “Other” is the long tail – the 258 rows I didn’t include.  If you design a wider screen, and it is fixed width, it could annoy 30% or more of your current users.

… I’ve been reading up on this, and some designers seem to suggest that even if 100% of users have screen res above 1024, widths perhaps should not continue to grow for a couple of reasons: 1. Content isn’t as readable beyond a certain horizontal width (granted, you can chunk it up into more columns, but then the wider you go, the more clutter, etc.); 2. User preferences and behavior with really big monitors – just because you have the screen real estate, doesn’t mean you devote it all to your browser. Look at Wikipedia on a huge monitor with your browser maximized.

And yet… Anecdotally at least, it does seem that many sites (that one would think would be concerned about annoying users) are a little wider than the 960/1024 standard. Not sure if they are variable or fixed widths; will continue to check around. I suspect that they are variable though.

I would not give up on this just yet,  As we discussed a few moments ago, the forward and respond, tag, and add icon/circles took up some of that width.  Further, if 90% or more have higher resolution that 1024, there may be room yet to expand.  I’m looking forward to getting our “new” designer’s take at CMN.

O.

Hi guys – sorry to have gotten your hopes up; I think the page width CMN is using is standard (I misjudged the screen resolution of the mockup from Basecamp).  I think the 1024 standard will soon be supplanted by 1280, but that day is not here.

Based on a snapshot from Google Analytics for the last month, at least 50% of Laddawn.com’s users use screen res of 1280 or higher. 34% use screen res below 1280 (lion’s share being 1024). 16% use “other”; I would need to do further digging in Google Analytics to see which side of 1280 they fall on, but it wouldn’t exceed the tipping point for widening the page.

Ah, I see; and now when I take another, more careful look at the original .png, I can see that it isn’t full size.