Full width web design (with Twitter bootstrap)

Question

I have not done much web design previously and wanted to get an understanding of full-width layouts and responsive design.

Specifically, my question is this - is it considered bad practice to use full-width layouts? I have google'd, and a lot of the feedback is to avoid full width (sticking to the standard 960px width) - however, a lot of the articles I have read were a few years old.

I was thinking about a design for a site that uses full width, using Twitter bootstrap (obviously TB provides the mechanism to go full width, which makes me think it may not be all bad?) - With the TB layout system and responsive design settings, are the drawbacks of using full-width layout as significant?

I have also read about the optimal number of characters per-line issue, that would obviously effect a single column (or even two-column) full width layout - but I was planning to have a full-width three column design. Have people got around this issue?

Answer 1

Twitter Bootstrap uses a responsive grid layout that should have a max width for content, so it should limit the main content sections to a certain width by default.

However, the growing popularity of XD (eXtreme Definition) displays that are 2560px wide or more (e.g. WQUXGA like the IBM T221 family of displays or even 4000px+ wide monitors) means that most max widths you set are going to leave lots of unused space in the margins on a growing number of displays.

So some designers have taken to a design framework/ideology based on frameless grids. The idea being that, instead of focusing on screen sizes (via transition points and media-queries) and using fluid grids to adapt content to the screen, you focus solely on your content. You determine what column widths your content looks best in, and then use something like SASS to auto generate the media queries that will either float another column of content up or drop the content to the next row.

If you extend this concept to its ultimate conclusion, you get an infinite grid—where your layout can consist of an infinite number of columns or rows. How many of each are displayed just depends on the viewport dimensions. Thus there's no need for a max width.

---

If you're not comfortable with a fully frameless grid, then you can use a hybrid layout. So, for example, you let your column width be fluid/elastic below 320px. Above that, you switch to fixed width columns. So, you might require 25em for each column, and the wider the viewport is, the more columns get floated up, but if there's room, expand the middle column to 50em, etc.

Answer 2

Well, put it this way: You face many different browsers on Pcs, mobile devices, tablets, OS, so naturally, as much as you try to have a seamless look, differences will happen.

If you set your main div width for example, to a percentage (50%, 70%, 100% etc.), it'll definitely look different always. With different systems and monitor resolutions, you're bound to differences. So setting a fixed width eliminates most of that. Nevertheless, it is very important to have responsive web design.

Test your website with a couple of different resolutions. In the end in my belief there's no right or wrong for this, its a matter of deciding which way to go and sticking with it.

I always go for the fixed width. Mobile devices tend to stretch a page, or shrink it to fit on full width.