I have a confession. I resist concepts that I don’t understand. A lot of us do, right?
Grid design was one of those things.
I built my first website on a free hosting platform called, Angelfire over 20 years ago hand coded in pure HTML using Notepad. I’ve always loved the instant gratification of putting code brackets around text, pushing to the web and seeing the result online in seconds. As nerdy as this sounds, it makes my heart flutter and my inner self jump for joy!
As web development has evolved, so has design aesthetic and methods for developing templates. I began customizing templates in WordPress in 2008 and have never turned back.
Years ago I began to notice premium templates that integrate a new form of layout, Grid Design. My first impression of it was that it makes things complicated. I’d have to learn new shortcodes, explore bootstrap style sheets and implement special z-index codes so I can lay graphics over the grid structure… PLUS figure out how to make it responsive for mobile devices?? To be honest, it was something that was more of an annoyance than a benefit.
Since our team has grown and the selection WordPress templates available and bootstrap theme development with grids has progressed, I’ve learned embrace it, in fact – now I prefer it.
Here are 3 reasons why I stopped resisting grids:
1) Uniformity
Grid Design was created way before the internet. A perfect example is in magazines. Ya know that uniform layout?
When you design based on a grid system you make decisions about where content will and won’t be located.
Your grid becomes a blueprint for the design that others can quickly follow.
2) Flexibility
Grids give the graphic design & web development team parameters to work from. The designers understand the bounds by which they can design within and the web development team can easily assess how the designs fit into or do not fit into the grid.
3) Responsiveness
When you work from a grid, it’s easier to stack content / images in mobile responsive views.
For example, in desktop view – let’s say you have 3 horizontal squares with images or content. A grid setup makes it easy to stack them depending on the device.
(Super Rough) example that shows views on desktop, tablet and cell phone…
In conclusion, why did I start using grids? The main reason is because as a web developer, I got tired of figuring out how to get everything to fit into various devices. Setting 5 million @media queries in a stylesheet just to find out you need to make another for a new device that came out is not the business.
Grids save you from the time and headache of figuring things out.
If you’re a web developer that would like a tutorial on how to implement grids into your template design.
