So I just finished watching this video about setting up a responsive grid for designing a webpage in figma
In this video it is suggested that you could use a vertical grid with each row being 8px high for making your vertical alignment more structured and consistent.
That means that the different elements in your grid will all have a height that is divisible by 8
Now I am just a bit confused because I usually just have the default height:auto set on my elements which as far as I know is the recommended way (since it is more responsive), but in order to make this work properly I would need to set fixed heights on my elements? Or am I misunderstanding something?
It certainly seems like that's what the video is showing. Designing with strict control over element heights isn't realistic though. A user could increase their font size (vision impaired) or even overwrite the font (dyslexic). Plus, there aren't just 3 screen sizes - there are potentially thousands. There's no way to be pixel-perfect in the element heights.
Rather, concern yourself with consistent padding & margins, and ensuring sibling components are sized the same. That will create visual consistency.
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
I'm looking for a fluid CSS grid generator that's based a percentage width like 100%. Everything I've found so far requires a specified pixel width or min/max pixel width.
These grid generators are all pixel based: http://www.gridsystemgenerator.com/
If you want to make a grid based on a percentage width, you don't need a generator.
Just count.
If you want a column that is half of the body, make it width:50%;. Quarter? width:25%;
I made a demo for you.
However, making a design entirely depended on percentages to leads to some problems. While a paragraph might look fine with width:50%; on your screen, someone with a huge monitor might see that entire paragraph on one line, which would be obnoxious to read.
I would recommend The 1140 Grid. It's based on pixels, but is also fluid, and may suit your needs. Also, by using max-width everything will remain easy to read for everyone.
Foundation has a percentage-based grid system: http://foundation.zurb.com/
I have a question regarding fixed layout. It has two parts, closely related, so I'm putting in one question.
Part (a)
Why 960px is suggested for the website layout? I understand that it is optimized for the most common screen resolution (1024px). But why exactly 960px? Won't the 1000px be as good?
Part (b)
What exactly is Grid system? I did check 960.gs but didnt get the idea of columns. Is it better to use grid system (using the template from 960.gs, which looks so messy) or should i stick with traditional way, like:
<div id="wrap">
<div id = "left-column">..</div>
<div id = "center-column">..</div>
<div id = "right-column">..</div>
</div>
1024px is the max screen width it's aiming at. We need to allow some window chrome, so it needs to be less. We'd ideally like it to have lots of factors, allowing us to split it into equal size columns with integer widths.
960 has lots of factors:
echo factors(960);
1 2 3 4 5 6 8 10 12 15 16 20 24 30 32 40 48 60 64 80 96 120 160 192 240 320 480 960
1000 doesn't have as many
echo factors(1000);
1 2 4 5 8 10 20 25 40 50 100 125 200 250 500 1000
Specifically, you can easily split 960 into 2,3,4,5,6 and 8 columns.
Why 960px is suggested for the website layout?
960 pixels is a common width for web layouts because 1024 x 768 was the most common resolution for many years and designers were forced to design for the lowest common denominator. When designing to a fixed width, it's wise to design so most people don't see a horizontal scrollbar. If your design is 1024 pixels wide, a page that is higher than the viewport (say 768 pixels for simplicity), will suddenly introduce a vertical scrollbar, eating away the available horizontal space which suddenly is less than 1024 pixels (1024 minus the width of the vertical scrollbar).
So you need a width less than 1024 minus the width of the vertical scrollbar. The width of a scrollbar isn't much more than 20 pixels, but to take into account non-maximized windows and end up with a number that's easily divisible into as many factors as possible, since that makes designing fixed-size boxes or columns easier. As 960 has more factors than 1000, 960 was chosen.
It's a partially false safety net to base the design on a fixed width of 960 pixels, though, since many people won't maximize their windows or even re-size them properly, so even with resolutions higher than 1024, their browser window might not fit 960 pixels. That's why responsive web design is beginning to take off, where designs are more fluid and responsive to the user's device settings (like screen resolution).
What exactly is Grid system?
A grid system is just a set of predefined CSS class names that you can use in your HTML documents to align the different boxes in your design into a "grid" that matches one or more common layouts for web design. A grid system is good if you're unfamiliar with CSS and find it difficult to align the boxes (in both width and height) your design is composed of.
If you find CSS simple enough to write yourself, I recommend you write it yourself. I also recommend not to use strictly fixed width columns, but instead more responsive web design (like mentioned above) to accommodate different screen sizes better than a fixed-width design is capable of.
960px is used because it is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16... - allowing designers to have a huge variety of different column widths and possible layouts. There are probably other "magic" numbers in this respect.
Also as pointed out, a width of 960px fits the majority of resolutions "nicely".
I think the divisibility reason is the primary reason.
{ 2^6 , 3 , 5 } allows for (7*2*2)=28 scaling factors
using six twos and the next two smallest primes
Also 960 = 1920/2
It also double to guard another use case : wherein user tile 2 windows side-by-side
like browser on left side, and word processor on right.
A grid system is used to have elements line out on the same vertical lines. This gives your layout a better look because all text/headers/images are left aligned the same way.
960 is as others said a based on 12 or 16 colums because it can be devided by the most amouont of numbers. This way you can have a row of lets say 8 elements and one of 4 and have the same space between your elements. If you look at the link you can see the white margins between the elements are the same wheter you make a 2-8-2 cell layout or a 4-4-4 cell layout(12 col based)
960px has a huge amount of factors, meaning layouts can have full-pixel, sane values with a lot of different dimensions.
960px is used because the most common and is the smallest screen resolution used regularly. You'll get mobile devices and a few 800x600 screens, but there are few and far between. The extra space on the side(s) of the page allows for window borders and scroll bars, while not obscuring the content.
Here is a different way of thinking about grids. What I offer here is a working solution to create accurate layouts needed for the width independence of responsive design. I make the assumption that all good web design should be responsive and accurate at all scaled sizes.
Having designed/built hundreds of responsive landing pages over the past three years I discovered an issue with the 960 pixel grid early on. Since responsive designs use percentages for widths instead of pixels, the number 100 becomes all important. The second important aspect of this issue is to avoid the use of fractional percentages. The final essential part is to make sure the image widths are in exact proportion to the percentage they occupy. Given these three constraints there is only one grid that makes sense: the 1000 pixel grid.
Before adopting this approach, we used the 960 pixel grid with the associated fractional percentages for our responsive designs. As a result we found different results from one browser to the next. The variance is subtle, a pixel this way or that, and due to round-off errors. There are some who find such nuances to be an acceptable trade off for the ease of dividing columns exactly equal using fractional percentages. If you are interested in a thoughtful alternative I invite you to read on.
For those familiar with U.S. currency, specifically the dollar, you already understand how whole number percentages work. You know the dollar can be sub-divided using pennies, nickels, dimes, quarters and fifty cent pieces. Anytime you have to split a dollar three ways someone will end up with the extra penny. In your layout, using whole numbers, this means three columns could be set up as 33%:34%:33%. Your image sizes would be 330px, 340px & 330px. The differences in width are virtually imperceptible because our perception is far more attuned to the alignment of elements rather than the comparing of widths. The 100 percent grid and the 1000 pixel grid correlate as a simple 1:10 ratio. This method is simple, accurate and easy to remember.
Building your layouts using percentages is a tremendous time saver. Our main container does get a fixed pixel width set using a single CSS class. When you change the fixed max width the layout scales. When a mobile device such as a table or phone requests your page, your layout will scale accordingly. I would, however, limit the upward scale to be no more than 125% to avoid noticeable softening of the images. For example, our new upcoming view port of 1230 pixels falls within this constraint.
In conclusion, it is best to remember we are craftsmen who, at our best, create true art. History provides us with wonderful analog examples created before computers existed. We have all seen the beautiful mosaics created with broken pieces of glass or tile; their beauty comes not from machine-cut, equal size pieces but rather, the carefully crafted pieces assembled by the hands of an artist. Established historic methods provide insight to solving similar problems found in web design.
Until now I was using layout patterns with fixed arrangements, targeted for 1024-pixel width monitors. I think it's fixed to something like 980 pixels with some extra space on the left and right sides. Lately I was thinking about non-fixed solutions, where I can widen the frame to the width of the monitor. But there are also some very high monitor resolutions, which will make the page look too wide and too ugly. So it would be nice to set a maximum width as well and maybe minimum width too.
Firstly, what is it called when you don't use fixed layout? Is there a name for this?
Are there any disadvantages which I have to consider when going for this style?
I want to apply this style to a portal site, where I use a 3-column design with many boxes inside of each column.
Here are some notable "fluid" design examples:
http://addons.mozilla.org/
http://en.wikipedia.org/
I tend to call it "fixed width" or "fluid width" but "elastic" seems a popular term as well.
The cons are that getting a fluid/elastic design to look great on all monitors is tough, you mention larger monitors/resolutions, in my job I have to consider smaller monitors too.
Recommended reading:
http://www.alistapart.com/articles/elastic/
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
(the other articles on these sites are generally worth a read as well)
You will notice that the first example has got a limit. I often set a maximum width and then set alot of things inside that with percentage. So a sort of half way house if you like. It really depends on the site, what you wish to acheive and which screen res your users will use(available using market research)