There are various ways to layout content on websites. Ultimately what is best is determined by many factors, but the most important one is good legibility and reliability that responds without error in a multitude of devices.
Building a Foundation
In order to successfully deploy a working grid system, you must understand the basics of HTML5 and CSS3. And you must also build a skill-set through experience. If you are using code generators to do the labor of your bidding, you are loosing out on several key advantages. These advantages include having a foundation of HTML and CSS for quicker solution development, to prevent formatting errors, for better SEO, and to reduce styling repairs and various bugs. Having a foundation of how HTML and CSS works and responds in various browsers and mediums is key. It takes time, but it’s not overly difficult. There is an endless supply of knowledge that is free and easy to use. I suggest some of the following tools to jumpstart your learning:
Recommended Foundational Tools
- pluralsight.com – View various videos about web development, design and more.
- codecademy.com – Learn the basics of HTML5, CSS3, Javascript and more.
- codepen.io – Execute code through a single web interface.
Suggested Grid Solutions
Ultimately, what’s best for you will be based off your design, your understanding of code, and how comfortable you are with troubleshooting websites.
The Gold Standard
Using div based girds using CSS classes is without a doubt one of the most commonly used techniques in our industry today. I say today because techniques are rapidly changing and I will explain more on this in the next paragraph. These girds are a bit like excel if you think of its use of tables and columns. Typically you have a row and inside you have a gird of (typically) twelve columns. This website, for example, uses a twelve column grid. Go ahead and inspect the source.
Examples and Tools
The Lazy Way
- Bootstrap – Developers and designers alike like this solution for rapid development of custom themes. It’s lazy because users didn’t develop their own framework (this website uses a custom framework I employed), and quite possibly most don’t know what all the frameworkis capable of. Bootstrap one is feature rich, probably way too much so.
- Foundation – Much like bootstrap, developers and designers alike like this solution for rapid development of custom themes. It’s also lazy because, like Bootstrap, users are not developing their own framework, and quite possibly most don’t know what all the framework is capable of. Bootstrap one is feature rich, probably way too much so.
The Better Way
Build your own grid. There are generators out there that will help you build the grid to your liking. You can also code your own gird to your liking. This website uses a twelve column grid capable of limitless combinations. Typically websites use an eight-column grid for themain content and a four column grid for the sidebar next to it. This website is also able to push columns for more interesting grid layouts. More on that in another blog post.
- Grid Calculator – Use a grid calculator and build your own grid that best suits your needs.
The Future is Bright
A lot of progress has been made with CSS3 to improve how grids are made and to simplify the process. A standout in this field is Flexbox. Flexbox will very shortly replace the gold standard of rows with floated DIVs that I explained earlier. Flexbox now is fairly supported across all major browsers, Flexbox will provide developers with tools to allow for rapid creation of complex, flexible layouts. This website will shortly be updated to utilize the new Flexbox standard. I’ve used it a few times and it’s incredible. It’s complex too so expect and upcoming blog post about how to use it!
Comments