Website Design Blog | Graticle.com

Archive for the ‘Web Design Tools’ category

Three Firefox Plugins for Web Developers

July 8th, 2009

Using plug-in’s for Firefox is a necessity and a gift that the Mozilla team has given us the freedom of having. There are a lot out there, and we want to share with you our top three.

1. SEO Fox

SEO Fox is a great tool for search engine optimization specialists. It gives you quick information on a websites Page Rank, Alexa Rank, and even the age of the website you are currently viewing. The entire feature list is listed below.

Features:

PR: (Google PageRank) an estimated measure of global link authority
Age: age pulled from Archive.org, shows the first time a page was indexed by Archive.org’s spider. The theory is that if Archive.org found a page so did many of the major search engines.
Links: (Yahoo! linkdomain) shows a rough estimate of the total number of links pointing at a domain
.edu Link: (Yahoo! .edu linkdomain ) shows a rough estimate of the total number of .edu links pointing at a domain
.edu Page Link: (Yahoo! .edu link ) shows a rough estimate of the total number of .edu links pointing at a specific page
.gov Link: (Yahoo! .gov linkdomain ) shows a rough estimate of the total number of .gov links pointing at a domain
Page Links: (Yahoo! link) shows a rough estimate of the total number of links pointing at a page
del.icio.us: number of times a URL has been bookmarked on Del.icio.us. Heavily skewed toward techy / Web 2.0 stuff.
Technorati: an estimate of the total number of links to a site from blogs
Alexa: rank based on website traffic . Heavily skewed toward internet marketing and webmaster related resources.
Cached: (Google site:) shows how many pages from a site are indexed in Google
dmoz: searches the Google Directory to count the total number of pages from a site that are listed in DMOZ, and the total number of pages listed in DMOZ that reference that URL.
Bloglines: shows you how many people are subscribed to a particular blog via Bloglines.
dir.yahoo.com: is a site listed in the Yahoo! Directory or not.
WhoIs: makes it easy to look up the whois data for any site.

2. Google Global

Google Global Plugin

This plugin is a great feature for an SEO expert. It allows you to view search results on Google from other countries such as the United States, United Kingdom, Ireland, Canada, and Australia. This tool can open your eyes on your search results — allowing you to see how well you are optimizing your website globally.

3. Firebug

Firebug-Firefox

Firebug is a great all around tool for web programming allowing you to view code on the fly. If you would like to see a specific DIV on the style sheet and HTML, it’s as simple as clicking a button.

2 comments »

Posted in Web Design Tools

Tags: Bloglines Dmoz Feature List Firefox Fox Global Link Google Google Directory Link Yahoo Linkdomain Major Search Engines Mozilla Team Optimization Specialists Page Rank Related Resources Rough Estimate search engine optimization Search Optimization Web Developers Yahoo Directory

Website Accessibility

July 6th, 2009

Accessibility is something that is rarely taken seriously and something most business owners are unaware of. By accessibility we mean your website being displayed properly to anyone and everyone that comes across your website, including the disabled. The FAE (Functional Accessibility Evaluator) is a great online validation tool that combines the validation from the W3C (World Wide Web Consortium) Guidelines, the United States Federal Government Electronic and Information Technology Accessibility Standards (Section 508), and the Illinois Information Technology Accessibility Act (IITAA).

Some people would argue that it “takes too much time,” or “something they will do later” — but the fact of the matter is, your website should not ignore anyone. By creating a website that is completely accessible to anyone, you are entering into Universal Design. Last time you walked into a supermarket, did you realize the doors (most likely) opened up automatically for you? That function was originally designed to assist those in wheelchairs to enter the store more easily, while also helped anyone that was not disabled to enter the store easily too (while also reducing germs etc).

When you create a website that is accessible to the entire population, you are also enabling your website to be more search engine friendly, while also helping you become a better programmer / designer (three birds + , one stone).

Sources:

FAE (Functional Accessibility Evaluator)

W3C (World Wide Web Consortium) Guidelines

the United States Federal Government Electronic and Information Technology Accessibility Standards (Section 508)

Illinois Information Technology Accessibility Act (IITAA)

Great book for anyone wanting to expand their knowledge on Web Standards or Accessibility:

Designing With Web Standards – Jeffrey Zeldman

4 comments »

Posted in Accessibility, Validation

Tags: accessbility FAE IITAA Section 508 Validation w3c Web Standards website design website standards

Horizontal Layouts

June 24th, 2009

A fairly new design that has been making its way around, is the horizontal layout. Although gaining popularity, you haven’t seen it on any of your major websites. A horizontal layout is one where you scroll through a website left to right, rather than scrolling down to read more information. The Urban Outfitters blog is a great example of this.

Once you get the hang of using the website, it’s not all that bad — it makes sense. But that’s the catch, people have to figure out how to navigate your website, and with the amount of information that we have at our finger tips, I don’t know if we have the time to learn a new way to browse a website.

The last thing you want your visitors to do is think, especially when looking for information on your website. The ultimate goal is allowing your visitors to find the information they are looking for without a battle. Once they become challenged, they may leave and never return.

One thing is for certain, once you browse a horizontal site it does feel natural. Everything we read is left to right so it makes sense. It is a step that your competitors most likely aren’t making, but then again — there might be a reason for that.

What do you think?

1 comment »

Posted in Web Design Tools

Tags: horizontal layouts layouts Web Design website design

Validating Your Website

June 14th, 2009

I know this is an old concept to some out there, but many are still not validating their websites. Validation doesn’t exactly lend towards helping finish your client’s website in time, but it has many benefits that can help in the long run.

1. Cross Browser Compatibility

By validating your website, it gives you the confidence that it will look the same in all browsers. It’s actually simple compared to going to Browser Shots every time to see how your website looks, just to dial it in. Or even downloading a ton of browsers, and then testing them individually. My point, by validating you don’t have to do this – saving you time.

2. Search Engine Optimization

With search engine robots becoming increasingly smarter every day, it is very important to create complaint code throughout your website. Reason being, if your website confuses a robot while it’s crawling, it will see this as a beginner level website, and will lower your ranking on Google. Since the validation service will make sure you have certain attributes such as an alt tag with an image, this will also double as making your website search engine friendly, user friendly, and also able to be used by the visually impaired.

3. A Validating Conclusion

Although it might take you more time to validate than not- once you understand the validation systems, you will have taught yourself the right way to code, and therefore giving you a better understanding of back-end web design in general. It will not only help the website that you are working on become more accessible, but will also act as a benefit to the programmer in the long run.

1. Cross Browser Compatibility

By validating your website, it gives you the confidence that it will look the same in all browsers. It’s actually simple compared to going to Browser Shots every time to see how your website looks, just to dial it in. Or even downloading a ton of browsers, and then testing them individually. My point, by validating you don’t have to do this – saving you time.

2. Search Engine Optimization

With search engine robots becoming increasingly smarter every day, it is very important to create complaint code throughout your website. Reason being, if your website confuses a robot while it’s crawling, it will see this as a beginner level website, and will lower your ranking on Google. Since the validation service will make sure you have certain attributes such as an alt tag with an image, this will also double as making your website search engine friendly, user friendly, and also able to be used by the visually impaired.

3. A Validating Conclusion

Although it might take you more time to validate than not- once you understand the validation systems, you will have taught yourself the right way to code, and therefore giving you a better understanding of back-end web design in general. It will not only help the website that you are working on become more accessible, but will also act as a benefit to the programmer in the long run.

Validate your HTML / XHTML

Validate your CSS stylesheet

No comments »

Posted in Validation

Tags: Attributes Beginner Level Benefit Conclusion Confidence Cross Browser Compatibility Google Programmer Reason Robot search engine optimization Search Engine Robots Time 2 Validation Service Web Design Website Search Engine