Hello, I am fairly new here as I generally don't ask questions on forums unless Google has failed me or I cannot find the answers I am looking for so hate me for being a lurker. My question is, what grid system is currently the most versatile in YOUR opinion and please let me know the reasoning. I am a beginner in web design with strong knowledge in Photoshop but designing for the modern web is still a foreign concept to me. I have heard of primarily 960 grid system and the 1200 grid system as mathematically versatile grid systems but 960 has been out before the commodity of high resolutions, 1920 by 1xxx and so forth makes me wonder if it is still a strongly adaptive suite. The 1200 grid system is not as popular but I cannot find enough information to accept or disregard it. I greatly appreciate knowledgeable, detailed, and experienced answers as I am still a beginner eager to pursue web design/development. You may tell me I should find what suits me however I would like some place to start and grow/adapt as I hone my skills. Sorry for the long post and the lie about "A" question but I genuinely appreciate your time.
Grids on the whole -- being based on the concept of fixed layout mechanisms like fixed widths and non-elastic design -- are mouth-breathing idiotic bull, and anyone telling you otherwise doesn't know enough about modern accessible web design to be flapping their gums on the subject. They are by their very nature the antitheses of accessibility and now that concepts like responsive design are in the mix, have no place on any website other than as a showcase of developer ineptitude. It's one of those things that ignorant pixel-pushing PSD jockey artsy fartsy types came up with in their ignorance of what HTML is, what CSS is, user interface design, accessibility, or any of the dozen other things they should have learned before calling their cute, but ultimately useless "pictures" a "design". Do not even BOTHER with ANY of that nonsense. It's nothing more than the road to failure. By extension it's why a lot of the layout "frameworks" out there are nonsense as well. There are THREE things a good layout should be: 1) Elastic. That means that your measurements for everything is done in EM's (or % is interchangeable on font-size and line-height, but not for much else). EM allegedly means 'the current width of the letter "M"' but that's 100% bull since computer font systems don't report that number to base it on. :/ -- but it does mean "based on the current font size" -- meaning that from the start of your document it will be based on the default font size for the browser or OS. While MOST systems start out with 1EM == 16 pixels, on this laptop I'm typing on now it means 20px, on my media center it means 24px -- it's a value that scales to the users preference; use it so that your fonts AND your layout adjusts to the users preference. It's simple, it's easy, and it's why "px for font sizes" is most always inaccessible rubbish. 2) Semi-fluid. Basically this just means putting a max-width on the layout so that long lines of text do not get hard to follow, while still allowing the layout to contract when the screen is narrower. A min-width may also be added for pre-CSS3 browsers that cannot handle the next step. 3) Responsive -- this is the new kid, but is in most ways simply the next logical step after the first two; the reason so many people use halfwit dumbass bloated framework garbage and have so much difficulty doing this step is they skip those previous two I mentioned -- well, alongside failing to practice things like separation of presentation from content, semantic markup, progressive enhancement, and all the other stepping stones to sane and rational web development. All responsive means is using media queries to re-adjust the layout (doing things like stripping off or adding columns) to best fit the available display space. The decisions for where to set your semi-fluid max-width, column widths, and responsive break-points shouldn't be some arbitrary pixel metric grid; it should be based on the needs of the content you are putting on the page. Don't waste time making some goofy fixed grid nonsense that your content may or may not fit into. That's why the design process I advocate starts out by putting my content or a reasonable facsimile of future content into a flat text editor in a logical order as if HTML and CSS never even existed. You then apply your semantic tags to say what things ARE, NOT what they are going to look like. That right there is where 90%+ of people writing HTML screw up. Since we're talking applying tags with semantic meanings, tags like DIV and SPAN which are "semantically neutral" have no business being added at this point. (and if you understand how to use numbered headings and horizontal rules for what they MEAN, HTML 5''s new "structural tags" are just pointless code bloat.) Then and only then do I start working on the layout building it with CSS based on the needs of the content. How much space does the content need to be shown? It's that simple. You build the layout adding those DIV and SPAN only when, where and as needed as hooks and parent wrappers. Then and ONLY then, once you have a working layout, do you start your process of adding colours and any images (if any)... or any scripting enhancements (if any). It's called the "content first" approach, and it is based on one of the most simple principles of what a website is for; people visit websites for the content, NOT the goofy graphics, convoluted scripttardery, and artsy-fartsy bull you hang around it. Which is NOT to say you can't have all that stuff -- you just add it later once you have what's important -- THE CONTENT -- working. It's called progressive enhancement, you start with what's important, and then you enhance it in steps -- the benefit of said approach being "graceful degradation" -- should any of your fancy bits be unavailable or broken, the page will "degrade" while still remaining useful. ... and really, that was NOT a long post on your part; but I suffer from a nasty case of TSDR -- "Too short, didn't read". IMHO the TLDR crowd can go plow themselves.
Thank you deathshadow for your detailed response. My biggest struggle and the reason why I had hoped for grids to fix was to have some sort of guidelines so I can create some sort of uniformity within my designs; primarily when I insert sample text which often does not look uniform with the site or does not scale properly when increased in text quantity from bad pixel division. My expectations from the grid systems were to have restrictions/guidelines on eligible pixel min and maxes for text/images allowing me to easily create uniformity from my lack of experience. I am currently focusing on the photoshop layout and designs and will consider the html/css/js down the line as I am not as savvy enough with programming as I go. To be honest I am more lost than confused when it comes to where to start when attempting to fit everything I want and make it look the way I want at a certain resolution. Understanding various screen scaling feels like my greatest weakness when trying to lay it out on photoshop with no guidelines or strong experience and when I do attempt it often looses uniformity. I guess I will do more research and practice what I can.
A bit offtopic to your original question but I thought I would give my input. What are you using to code your designs? It's best to hand code things (without any software - I don't know if its still around but photoshop used to have a slicing option that codes the website for you). Another option for you aside from grid systems would be to use http://csslayoutgenerator.com/ to get your basic layout and than create your own grids. You can assign the pixel width/height to your wrapper, header, footer, left or right sidebar(or both) to get the general layout of your design and you can work from there. Do you code with DIV's or tables? I assume your not coding responsively since your relatively new so I think the 960 grid would work good for you, thats if your designing websites inside 960px, if not 1200px could work for you as well. I personally design all my websites in 1100-1200px because I think the days of the 1024x768 resolution should have been 'un-standardized' (is that a word? lol) years ago - almost all new monitors support up to 1920x1080 and it makes everything so much nicer. But I also code websites responsively if the client is willing to pay for it, and I always ask if theres a preferred resolution if not. So my suggestion to you: - Learn coding by hand if your using a 'slicer'. - Use the css layout generator to get your websites base layout. It really is great, I used to use it as an experienced coder just to get the basic layout started and ready to go. That or you can use a grid system, up to you. - Use DIVS, and a calculator. If your sidebar is 300px, and your content section is 640px, than add right padding to the content area of 60px (just an e.g). DIV's always flow, the only way they will screw up the design is if your math is off somewhere in the CSS. You can also use percentages, if you want 3 columns at 1/3rd each use 33%. If you want some padding inside those 3 columns use "box-sizing: border-box;" and add some padding (e.g - width:33%;padding:1.5%;box-sizing: border-box. Box-sizing:border-box makes it so you don't need to calculate and subtract how much padding your using inside the element. - You also need to design websites that are fit to be scaled. Check out https://dribbble.com/ and behance.net for inspiration ! Web design has changed alot over the years. - Get a good text editor, like brackets. I may have gone extremely off topic and assuming that your new to coding and are using some third party program to code but thats the only reason I can think of "text not fitting/scaling". If my post is useless to you, I aplogize - but I thought it may be of some help if your as new to coding as I think you may be.