1140px grid system. Time to scrap 960px?
cssgrid.net
cssgrid.net
In terms of typographic design and readability - that can be a problem - not sure what the solution is, but I do find it to be an issue.
However, there is a point when you shrink the page where the number of words is about twice, but probably few devices actually have that width.
Not a good practice!
http://code.google.com/speed/page-speed/docs/rendering.html#...
For MS Windows users, I think "Maximise Everything" is ingrained at this point, which gets increasingly ridiculous on high res screens since we don't have resolution independence.
However, the English language's z pattern is inherently vertical, meaning that a page should naturally have space on either side; forcing a window to fullscreen just to have a 33% column of text is asinine, and shows that the designer is a prick for thinking strictly for XP and Windows' maximize button.
You're right about Windows' "Maximize Everything" being weird, it seems more and more like it was a good stopgap for people switching over from DOS and needing all the pixels possible on a tiny screen. OS X's natural flow for page windows may get confused from time-to-time, but it's a much better solution for dealing with vertically-biased windows in a widescreen environment.
Weird, I had no problem reading your comment even though HN is formatting it for me at around 180 chars.
I use Multiple Monitors/UltraMon and the support for doing this with the mouse is lost (not sure if multiple monitors or b/c of Ultramon).
I guess I should have know there was a hot key.
There are dual problems here. Window Managers are designed to give a "comforting intuitive interface" rather than an interface which lets you do things quickly. But also, manufacturers pump out wide screens intended for video viewing rather than long screens which are suited for text viewing. This also means a good portion of web pages use fixed-width pages to keep from being stretched to unreadability. But these also keep the text from being read from a narrow screen (sure, they could set a max width with CSS but fixed-width also lets the designer guarantee their design looks exactly as they wish).
(terminals and emacs through, more like 1/3)
The vast majority of websites are no problem (text columns are usually no more than 700 pixels wide for readability reasons, I don’t care when I have to scroll horizontally to access other columns because my trackpad supports two-finger scrolling), some inherently need more pixels (The Big Picture wants to display big pictures and there is nothing wrong with that) and some just break (i.e. text becomes completely unreadable). I would be very happy if someone would fix those tiny minority of sometimes otherwise very fancy websites.
Yes, the idea that you would using multi, non-maximized windows at one time is behind the design of window managers.
Now, this model of interacting with a computer has been a success in the sense that it's how most computers are now organized today. However, this model has been a complete failure in the sense that few people ever use non-maximized windows because they coordinate so badly.
This is the reason browser tabs have replaced browser windows and indeed why the browser as an interface is easier to understand than the desktop interface ("just get me to a browser window and then I'll know where to go...").
I usually develop for three main sizes. The standard 960, the iPad, and smart phones. And typically only have to tweak specific elements.
I don't mean to be curt, but using an existing grid saves you half an hour at best and might not even be a good match for your needs. The solutions that let you dial in a width and column count are better, but there's so many kinds of grids that it seems like prematurely restricting your solution.
The headline is misleading. The point of this layout is that we can go ahead and take advantage of large screen sizes without leaving behind smaller screens.
For more information read: http://www.alistapart.com/articles/responsive-web-design/
Good design can't just be "resized". You essentially have to redesign it from the ground up. It takes a significant amount of work. I would rather just use 1024 and have it work on tablets + notebooks + desktops, and then do something separate for mobile. Mobile is such a radically different experience compared to a typical computer you almost have to do it.
Now try and apply this design restriction to something other than a blog where actual interaction is required and it will fall apart fast.
On bigger screens, users don't want a wider browser window. Instead, they want room on the sides of the page to do other things, either sidebars within the browser or other apps outside the browser window.
960px is the perfect width so you don't get a horizontal scrollbar at the bottom of the window. It's also consistent with most other sites.
Finally, 960px looks appropriate on ipad and other tablets.
The stats for our website are roughly:
25% 800x600 50% 1024x768
and a wide assortment for all the rest.
If you know any I would love to see them, thanks.
*Edit: The gutters also scale with viewport size and the nested elements can be fluid too.
And the big gutters are a nice touch.
-webkit-text-size-adjust: none; /* Stops the iPhone scalling type up */
which has the unfortunate side-effect of preventing text resize in webkit browsers.
40 px gutters? Are you serious? Gutters should be 10 px minimum and 16 maximum.
10-16px sounds completely arbitrary to me.