Preface
In January of 2014, I began an endeavor that would change my perception of web design forever. Being a web designer for more than fifteen years, I have seen many changes come and go. I eventually realized that there were only two types of web sites; sites that provide you value, and sites which you provide value to. My experience has been in mostly making commercial sites for small to mid-size businesses. I needed a change. I wanted to create something for other web designers, who pour their heart and souls into every web site they create. I wasn’t yet sure what the answer would be.
I thought long and hard about what to offer them. After all, what does the new breed of web designers need the most of in order to speed up their prototyping and turnaround time. Could they use another blog article discussion? Perhaps some type of free mobile template for website graphics? Maybe even some free backgrounds or free images? I did some snooping and realized that was no shortage of these free resources on the internet. Then, it hit me like a bolt of lightning. The answer was simple; a responsive grid system with html5. I was determined to make this responsive grid system more useful and less complicated to learn than any other responsive grid system on the internet today.
What is a Grid System?
Simply put, a grid system is a method of organizing content and graphics onto a grid to create content that is easy to read and locate, while maintaining a balance between order and chaos. A grid system ensures that any design has a layout that functions to organize the wealth of information, while maintaining beauty and consistency throughout. Most of us lay people have been in contact with a grid without even realizing it, and probably even used one for a work report, invitation, or any printed materials. Such programs in Microsoft office, like Excel or Word even, in which a table might be used to organize data, have popularized the grid even before the inception of the internet. This responsive grid system is designed using HTML 5.
A Brief History
Oddly enough, when I began to design websites in the 1990’s all web design was table based. This was because most of us were already familiar with the idea of what a table was. A table is a grid system in which you choose the amount of rows and columns and their widths and heights. Tables are still very much in existence in programs like Excel and other spreadsheet programs. You can add tables to MS Word to line up your data, and even invoices. In the design world we don’t really call this a table, we call it a grid.
Another huge difference between web sites today and those or yesterday is that now they need to perform on hundreds of different devices all containing different screen sizes, pixel densities, and screen resolution. These devices include hundreds of different mobile phones, tablets, and HD Television sets. When these mobile devices first erupted with the iPhone, web designers decided the best approach was to make more than one version of a website to work on the different size screens on the new devices. This is why sometimes you still see a clickable link for a desktop or mobile version.
Alas, the future has finally arrived and technology has adopted a more efficient approach. This approach is called a responsive grid system with html5. Today, the most common approach is now to design only one website. Then, include all the layout information in conditional statements called media queries. Within these media queries are breakpoints. This is where you specify if a condition is true then apply these design properties to the page. This is the magic of The Friendliest Grid.
The Epiphany
And there it was, the answer was as clear as day to me now. I would endeavor to create the greatest grid system that the world has ever seen. Many grueling hours were spent deciding on the best way to approach mobile design. I used many resources such as lynda.com (The best site to learn anything quickly). I have finally completed this grid system. Of course I am still making minor improvements, as new users share there needs with me.
So, Who’s it for?
The Friendliest Grid System is a responsive grid system in HTML5, designed for coders that would like to skip having to deal with media queries and browser compatibility issues that come with new technology. Whether your new to the world of HTML or you have need searching for an amazing responsive and lightweight HTML5 grid system, The Friendliest Grid will work on every device. It will even work on devices that are older, like older mobile phones and tablets with few resources. It is the Friendliest Grid on earth.
The Friendliest Grids System’s Philosophy
Please feel free to download and use the Friendliest Grid System in any way shape or form. For newer web designers its an amazing tool to aid you in your web design and learning projects. The project is designed with simplicity and has an extremely small footprint. It also incorporates “Progressive Enhancements.” This means, that in its most basic form, on a machine with the least possible resources, your content will be readable and organized. No other grid system can say that. The friendliest grid is in a class by itself. It is a responsive grid system that uses HTML5 to assist you in making your turnaround time quicker, enables rapid prototyping, and ensures your client’s satisfaction.
Features of the Friendliest Grid
- Its total file size zipped is only a mere 260 KB. That’s truly lightweight.
- Its completely cross-browser compatible
- It’s responsive to all devices, screen sizes, pixel dimensions, and resolution independent.
- You won’t have to learn anything new, like SASS or javascript
- It’s designed in ems – this ensures true control over typography, layout and aesthetics.
- Uses the Icomoon Font library for social media icons and symbols.
- Its a responsive grid system that uses html5
- Its totally free and has no strings attached
Download the Friendliest Grid System at your convenience and get started on your new website today!!