The Friendliest responsive Grid System (On Earth) 2.0 Released – HTML5

The Friendliest Grid

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 Grid

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.

The Friendliest Grid

Features of the Friendliest Grid

  1. Its total file size zipped is only a mere 260 KB. That’s truly lightweight.
  2. Its completely cross-browser compatible
  3. It’s responsive to all devices, screen sizes, pixel dimensions, and resolution independent.
  4. You won’t have to learn anything new, like SASS or javascript
  5. It’s designed in ems – this ensures true control over typography, layout and aesthetics.
  6. Uses the Icomoon Font library for social media icons and symbols.
  7. Its a responsive grid system that uses html5
  8. Its totally free and has no strings attached

 

Download the Friendliest Grid System at your convenience and get started on your new website today!!

Readability: Does your reader understand your writing?

Persons reading

Ever wondered why people misunderstand your Facebook posts? Perhaps your text messages or tweets get confused as well. Everything that is written can be tested for readability. This is not to be confused with Readability in the field of typography. Maybe you write content for the web and you want to make sure that your readers can understand what you have written. We all know the importance of a crystal clear message communicated through writing. Here is how you can determine if you are you writing for high school students or doctors.

Usually people with at least some college experience are writing content for website’s these days. Unfortunately, this means that not everyone will understand your website’s textual content. What if your target audience are in their teen years. Wouldn’t like to know if your audience who comes to your site can understand your choice of words? A web developer is sometimes responsible for web content creation depending on the project’s budget.

This article includes resources and information that will help you develop content that is appropriate for your target audience’s, education level, age level, and average reading comprehension level. There are about five systems that have been created over the last sixty years by people who study these types of science. Below will a brief introduction of what they are and how you can use them while developing your writing for whatever medium you choose.

Firstly, the [Flesch-Kincaid] Reading Grade level assessment will score your content from zero to one-hundred. The lower the score number the higher the average grade level will have to be to understand your writing. The Flesch-Kincaid test uses a sophisticated formula based on a calculation of total words, total sentences, and syllables in each word. So, if your writing a website for a teen pregnancy website such as [http://tristatepregnancycenter.org] you would not want this particular score to be lower than about 60. This means, unless the 16 year old has a college degree there will be little to know chance they will be able to understand your website’s content. Obviously, one can see the malady caused here.

 Readability Formula Of The Previous Paragraph 

  • Flesch-Kincaid Grade Level   8.7
  • Gunning-Fog Score   10.9
  • Coleman-Liau Index   11.9
  • SMOG Index   7.7
  • Automated Readability Index   9.4

Average Grade Level   9.7

The next test is the Gunning-Fog index. Instead of using a complex formula based loosely on the ratio of syllables to words, this one focuses more or the word numbers in each sentence. It also weighs in the number of complex words to the algorithm. This test was designed to guess-timate the number of years of formal education one might need to understand the english in the piece of writing. For the widest audience it is recommended that your score be less than a score of twelve. For an all around universal understanding of the writing a score of eight or less is suggested.

Readability Formula Of The Previous Paragraph 

  • Flesch-Kincaid Grade Level 8.3
  • Gunning-Fog Score 11.2
  • Coleman-Liau Index 10.1
  • SMOG Index 8
  • Automated Readability Index 8.2

Average Grade Level 9.2

This next score takes an interesting new spin from the aforementioned scoring systems. It is called the Coleman-Liau index. This test would be amazing if you wanted to compose “The Perfect Tweet” because its score is based on the total number of letters or characters within a sentence. This result is loosely based on the minimum grade level needed to understand the sentences. For example, if your score is a ten, it would be hoped that at least a tenth grader could read and understand the text. A score of 16 or higher may require a graduate level college student to understand the content and its meaning.

This next index has received it’ acronym by a scientist; Simple Measure Of Gobbledygook. I wonder if that scientist had read Lewis Carrol’s Jabberwocky. I digress. So this readability test is most useful in the field of message creation in the health field. Like a public service health announcement about a particular food being recalled or an Ebola virus breakout. This test has much in common with the Flesch-Kincaid test because it relies on the relationship between words and their contained syllables. Unfortunately, results will be invalidated with any piece of writing with fewer than thirty sentences. A score of 13 -16 indicate the need for some college. A score of nineteen or above denotes that only expert such as an Md or Phd in that field should be consuming that written content.

Readability Formula Grade For Previous Paragraph

  • Flesch-Kincaid Grade Level 8.6
  • Gunning-Fog Score 9.2
  • Coleman-Liau Index 12.5
  • SMOG Index 7.4
  • Automated Readability Index 8.7

Average Grade Level 9.3

The last readability test that will be examined is the Automated Readablity Index (ARI). The information found for this article has come mostly from research gathered by the armed services such as US Air Force, Navy, and Army. This correlation is out of the scope of this article, but was worth mentioning. This test was originally created for use on a modified electric typewriter around 1970 and was developed by Smith and Senter (George R. Klare). This test was translated for other languages as well as US English. The results of this test will indicate the suggested minimum grade for satisfactory comprehension.

I wonder how askew this test would be if they used poetry, such as one of my favorite poems written by Lewis Carrol: Jabberwocky. Let’s see shall we.

Grade for Lewis Carrol’s Jabberwocky  

Average Grade Level 4.8

This result is humorous at best and these tests will be invalidated if used with poetry. I would be willing to say that neither a fourth grader nor a doctor would have any clue as to what the author was trying to convey other than his wit and technical ability to control the measure, timing, and rhyme scheme of this poem. It is vague at best to even experts in the field. This score should have been a 16 or better, but it only scored a 4.8 .

There are countless other readability tests available for anyone to use. From this article, we can safely determine a few things;

  • Keep your words short, longer is not better for web content
  • Keep your sentences short, avoid run ons and restate your subject as much as possible
  • Keep your audience wide by not complicating or trying to get fancy with your writing. (this is my worst offender)
  • Know your audience, don’t write content they cannot grasp because of their education level

This list, by no means, is intended to be a complete comprehensive list of all the methods to test your content. There are many others; the Dale-Chall formula, the Ride Scale, the Mugford Readability Chart to mention a few. The tests listed here are only based on U.S. english and will not work for any other versions of English or any other language.

Here are some links for free online website readability testing. I can not personally vouch for the accuracy of this external link, but they seem legit.

http://read-able.com
http://www.readability-score.com
Gunning-Fog Score
Coleman-Liau Index
SMOG Index
Automated Readability Index

Sources Cited


http://webpages.charter.net/ghal/SMOG_Readability_Formula_G._Harry_McLaughlin_(1969).pdf

George R. Klare
Reading Research Quarterly , Vol. 10, No. 1 (1974 – 1975) , pp. 62-102
Published by: International Reading Association
Article Stable URL: http://www.jstor.org/stable/747086