The thing that always bugs me about fluid layouts is line-lengths for pieces of text. In that example, the line length of the main text varies between about 280px (when the window is around 800px wide) and about 720px when the window gets smaller. That's quite a range.
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.
I recently tried to switch to using non-fullsize browser windows, which is pretty much the reason for windows I think, but so many sites force huge page widths that it becomes unusable.
I always use a ~1024w browser window on a 1920w screen and have no problems.
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.
There's diminishing returns on increasing column width; the human eye starts to get strained if reading columns wider than ~60 characters. If the increased page width is applied to design elements and increasing font size, sure. That's not so bad of an application.
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.
It's not necessarily something you notice. It gradually gets a bit more difficult once you start getting past that point. And you won't necessarily think "oh, this is so hard to read" either (at least at large-but-still-reasonable widths). It'll just end up being a factor you weigh (if not consciously) when deciding "okay, I've had enough with reading this" and go on to the next thing.
Hope for the future: Windows 7 introduced a new hotkey that resizes windows to take up either the left or right half of the screen: WIN+LEFTARROW or WIN+RIGHTARROW.
There are also drag cues: drag to the top to maximize, to the left or right to maximize 100% vertically and 50% horizontally on the current screen, or when resizing a window drag to an edge to maximize in that dimension.
I'd love to understand why someone would mod down my comment. I believe it's my first time, it's insightful so there was no reason to mod it down is it?
The problem is that if you don't maximize everything, you'll wind-up with a series of windows which overlap in a less than useful fashion - menus, scrollbars and headlines get obscured and you need to mouse-around-the-screen to do anything.
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).
No, the netbook is usually maximized (ubuntu netbook remix), but back when I had a PowerBook duo, the end of the 030era, I was running windows about 400px wide on a 640 px screen. Screens have gotten bigger, but for desktops, vie generally been at about 1/2 the screen, and laptops at 1/2-2/3 or so. I've gotten into some epic... Discussions of fluid layouts and how just because my browser was reporting lots a pixels, the layout wasn't getting them.
Usually my browser windows are about 700 pixels wide. That’s half of my horizontal pixels.
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.
I recently tried to switch to using non-fullsize browser windows, which is pretty much the reason for windows I think
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...").
Our new app is designed fluid with a min-width of 728px, which means it will fit inside iPad, while stretch out on desktop. With "Responsive Design"¹ you could also show/hide features depending on the screen estate.
That article sums it up nicely. If you have employ a flexible design from the start, it is really simple to use media queries to automatically adapt your site to the user's browser.
I usually develop for three main sizes. The standard 960, the iPad, and smart phones. And typically only have to tweak specific elements.
I'm sad that fluid designs are not more common. This is how HTML was intended. I like to play with the size of my windows to fit whatever I'm doing side by side. The only thing I think is acceptable is a maximum text width for those with the "maximize" disease, but please, no minimum...
How about just choose a grid that best fulfills the needs of the project?
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.
I'd like to use fluid more but unfortunately for us I don't think it would ever work because my boss is too anal over appearance. It's hard not use absolute heights and widths with the designs he comes up with. I think 1140 to 960 fluid would be great thing to try though. Still gotta optimize for 960px so you look good on tablets and other smaller screens. I think trying to be fluid below 960px is just stupid. Right now mobile sites need to be fast and efficient and you can't speed things up enough by just changing your CSS, the underlying HTML must also be compact.
Many netbook screens come in 1024x600, so I wouldn't plan for everyone to have 1280 columns just yet. TFA talks about mobile versions degrading gracefully, but not about desktop browsers on small screens.
You can get the exact same experience of a small screen desktop browser by shrinking your browser window, which it handles quite nicely.
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.
Terrible idea. 1024 works very well with the iPad. Unless your app is specifically designed to display large amounts of data I think improving the tablet's browsing experience is too important.
This is not a tech problem. It is a design problem.
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.
It's not necessarily the fact that site is designed to be resized or not it's more about the careful consideration of how a site will look at various sizes. Take http://hicksdesign.co.uk/ for an example. You can tell that the site was designed for various resolutions but uses the same codebase to support them. I don't think the two problems are mutually exclusive.
That is an incredibly simple website. It is possible to get away with it when you have such a simplistic website where the secondary content is almost irrelevant as far as importance go.
Now try and apply this design restriction to something other than a blog where actual interaction is required and it will fall apart fast.
The problem with this is that it assumes users want a bigger browser, which they generally don't. I browse full-screen on a 1024x768 screen because that seems consistent with the width of a standard printed magazine page.
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.
I still _regularly_ visit customers who have CRT monitors running at 800x600. I would say that the vast majority of users are still running at 800x600 on xp or lower.
Amazon's new layout shows more or fewer suhcategory/recommended products based on the width of the viewport (at least on the home page). Presumably it is more valuable/meaningful to show more products if possible and it isn't just for the sake of filling up space.
LessFramework only works properly for IE9, whereas the original framework above cites IE7 and IE8 compatibility. It's an unfortunate fact of web development that those browsers are important.
Asking whether or not we should "scrap" a certain resolution is missing the point. Media queries are far more exciting than "whoa, I can make my page super wide now" will ever be.
I'm glad someone pointed this out. The inability to zoom the text sure makes that web page unfriendly to those of us that have trouble reading the little tiny microscopic fonts that are so popular on web pages these days.
Regardless of the CSS, any time I try to enlarge text in any browser and it doesn't do it, I get frustrated with the browser, not the website. Their is no reason I can fathom why a browser would not do this. So yeah, I'd take it as a bug in Chrome. If it's giving you the option to enlarge text, and Chrome isn't enlarging, or zooming, then it's a bug.
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.