Some may recall a study that was published by Jacob Neilson back in 2006 that analyzes how people view websites.  When Neilson asked people to view websites, it was noticed that many would read them in a similar manner.  Heatmaps were used to express now visitors would view the content on the page, and when the map was studied, a clear pattern was noticed.  This pattern became known as the “F Pattern” because of the resemblance to the letter “F”.

The areas viewed most are red; yellow is less and blue shows the least amount of views.  What you will notice, is that as the reader continues to scan the page, the lower section and the right rail of the page receives less views.  This supports that most viewers are reading left to right and top to bottom, and that they tend not to read all of your content.  You will notice a distinct “blue color” toward the bottom of the page meaning that people are abandoning it.  The same can be said about content that is on the right side of the page.

What does this mean for web design?  When designing your site, it is crucial to have the most important elements in the top, left section of the site.  When creating navigation, feature your most important sections on the left side. 

As you start to create your content, it is important that you recognize this F Pattern and organize your content accordingly.  Make sure the most important information is in the first two paragraphs of the text, and make it easy to read.  Incorporate bulleted or numbered lists so it is easier for readers to pick out important pieces of information.  Understanding that you don’t have much time to grab your readers attention will be an integral part of creating text that is both compelling and optimized.

Many junior SEOs or web developers may think they know SEO, but the truth is they actually don’t. Here are 10 rookie SEO mistakes that seem to be quite frequent:

1. Inaccurate Keyword Targeting: This can be a big slip-up for most people that are new to SEO. They forget to do the proper research or any at all!
2. Duplicate Content: Comes in many forms (other domains owned by website with exact content, lack of canonicalization, URL parameter changes etc.).
3. Poor Title Tags: Title tags are the most important of the meta tags (they are weighted highly by the search engines). They are either too long, too short, duplicated or are missing completely.
4. Navigation isn’t Crawlable: JavaScript or Flash based navigation is problematic to search engines.
5. Robots.txt File. Simple text file placed at the root of the domain, it tells the search engine spiders which parts of the site to index and which to skip. Sometimes incorrectly implemented or omitted completely.
6. URL Structure. Generally speaking, a good URL consists of as few parameters as possible, along with good keyword elements.
7. Lazy Link Building: Too few backlinks from “hub” or authority sites and too many outbound links to low quality or irrelevant websites.
8. Internal Site Map: Important for two reasons; for the spiders to find pages they wouldn’t be able to get to otherwise and for user experience.
9. Fresh Content. This is often overlooked. New content added to a site will get the spiders to return and index more often (it’s good for user experience too!).
10. Footer Navigation: Gives the spider another place to get to the important pages on the site and, again, is good for user experience.

 

Mozilla Firefox is a browser that provides a lot of Add-ons for its users, and you can find a lot of useful extensions for website developers. Below are a couple extensions explained to help you make the best use of Firefox.

One of the most important parts of developing a website is cross browser checking, for example making sure that the site looks the same in multiple browsers. Firefox provides an extension called user agent switcher, which can be customized with the user agents you need such as Internet Explorer and even mobile user agents. This extension can save you a lot of time when it comes to cross browser testing.

Another great extension is called Firebug which helps you make real time changes on a website’s css, html structure, and also has a net feature that allows you to check the status of elements on a page, the domain, size of files and the timeline. This feature can come in handy especially now with Google making load time of pages part of their ranking criteria. You can check what you can change to improve a pages load time. What I like the most about this feature is that you can divide the calls the page makes by images, css, Flash, JavaScript or show everything at once.

One feature that can save you a lot of time is called GA?, which checks the site to see if it has Google Analytics installed and displays either a color image in the bottom bar of the browser or an uncolored graph to show that it has no GA coding. You can use Firebug to check the GA coding currently on the page quickly, instead of having to view the page source.

A great extension for finding the color value in a part of an image or any part of a site is ColorZilla, this extension will display a little eyedropper on the bottom right bar of the browser and will give you the name of the color, RGB and hex value. This feature combined with Firebug can help you change the color styles of your site in real time without having to make changes to the live css file directly.

After making changes to a site in real time in your browser, you might want to save the look and feel of the new changes made. There is an extension called FireShot that can help you take an image of the whole page or just the part that shows on the browser. This can come in handy if you need to show it to a client or coworker and get their feedback, without actually making the changes to the live site.

Development of sites using Firefox can be a lot easier and faster when using the tools described above. This can help your site load time improve as well as design without having to make any changes to the live site; just making changes in your own browser.