8 Essential Markups for Good SEO
I recently attended the “An Event Apart” web design conference in New Orleans. One of my favorite speakers talked to us about essential markups for SEO. I compiled a list which I think every web developer should know. One of the most common requests from clients is that they want their page to “show up in Google.” These markups should help you.
- URL - Key words within a URL may be the single most relevant way to “show up in Google.” Say someone is searching for “chicago web design.” The site www.chicagowebdesign.com is going to have a higher ranking than www.websoulationschicago.com. Google puts high priority to keywords contained in the URL.
- Headings - Heading tags (h1, h2, h3, h4, h5, h6) play an important rule in SEO. Make sure any section titles are in heading tags. On top of that the lower the heading number, the more relevant it is to search engines. So, and h1 will carry more weight than an h3 tag.
- <strong> & <em> - Beleive it or not, search engine spider put more weight on keywords that are within <strong> and/or <em> tags.
- Meta Description - A meta description can have significant impact on your search engine ranking. After all it is what shows up as your description when someone is viewing search results. One thing to note is that meta keywords are not scanned by search spiders.
- Alt & Title Attributes - Make sure your images have alt and title tags. Search engines can’t see images, but they can read alt and title tags. On top of that, it makes your site more accessible to the visually impared. This is an absolute must do. Dreamweaver has a helpful featgure that requries you enter an alt tag when inserting an image.
- Table elements:
,
, and summary - These 3 tags are in the same boat as the alt and title tag, only these apply to tables. These tags can help your ranking and improve the efficiency in which search engines crawl your page - Stylesheet - Include keywords in your stylesheet. Believe it or not this can help your ranking. Having a stylesheet named webdesignchicago.css can help your ranking more than using a stylesheet named styles.css
- Logo image name - Since your logo is often the first thing crawled on a page by search engine, it is important to have a filename for that logo that includes keywords.
The New Zappos Site - Hmmmmm
I recently attended the “An Event Apart” conference in New Orleans. Besides getting a case of some knarly heartburn from all the Poboys I ate, I got a sneak peak of the new Zappos site. To be honest, it was not what I was expecting. Zappos, who has had generally the same design for the greater part of the last decade, has decide it to mix it up a little bit.
Take a look for yourself:
Personally I think they are going away from their bread and butter. Zappos current site has a personality. And while it might not be the cleanest site out there, they are raking in the money. To me this site feels like another Amazon. They are however, trying to branch out from shoes into other tyes of merchandise such as sporting goods and housewares. It will be interesting to monitor the growth of this company when the new site launches. For now you can check it out at http://zeta.zappos.com
Freelance Advice from the Front Lines
I’ve been freelancing for a solid year now and have learned a few things. There are going to be trials and tribulations but like anything else it will get easier with time. As you work with more clients and build more web sites you will start to develop a system that works for you. Sometimes you will have to learn the hard way. Here are some pointers that may help you avoid some of the situations I found myself in:
- Absolutely, Positively, Get a 50% Deposit up Front - One of the most benificial things you can do when working with a client is get a 50% deposit up front. For one, this covers some basic costs you may encounter for this project such as web hosting, stock photo purchases, and domain names to name a few. This also ties the client to the project. Without a deposit there is nothing that holds the client to the project financially. Unless you have a contract that is
- Make a Design Contract - Another crucial step to take is creating a design contract that will be signed by both you and your client. This contract will specify some of the logistics of the project such as financials, due dates, what is expected of them, etc. Be as detailed as possible but try to keep it in lamens terms so you don’t confuse the hell out of them. Having a contract is a sure way to keep the client commited.
- Charging for Future Work AKA Websie Maintanence - It is very important to specify your rate for future work on a completed web site. This is usually done in the contract. Most people specify an hourly rate for future work. This way you don’t have a client running back to you when something needs to be changed. Depending on how much you are charging you can include a certain amount of free maintance or have a window of time that you will offer free support.
Hopefully these pointers will help you avoid some of the situations I got myself into when first freelancing. Once you get a system down you will be amazed at how smooth and quick you can complete a project. Stay tuned for some more advice. Happy Freelancing.
3 Inspirational Web Design Quotes from Industry Leaders
I recently attended the “An Event Apart” web design conference in Seattle and came back with some inspirational quotes from some industry leaders including Eric Meyer, Jefferey Zeldman, and Jeff Veen. If you are a web designer and don’t know who these people are, you should. They have made huge contributions to the web design world and constantly strive for standards. Here are three memorable quotes that give me inspiration when working on a design project. Hopefully they will inspire you.
“Writing for the web is important, it is an oportunity to establish our brand and help create a positive user experience”. - Jefferey Zeldman
One of the biggest mistakes we can make as a designer is not to take into account the copy, or writing and text, that is used in our websites. The wordage that we use on our sites can be just as important, if not more important, than the design itself. Take for example Flickr. A minimalist, simple design with large personable wordage that really connects to a user. There are dozens of photo sites up there, but more people choose to use Flickr.
“By zeroing out syles, you can get a more consistent design. Your force yourself to set styles”. -Eric Meyer
Meyer is referring to the practice of resetting your styles at the beginning of a design project. Most people do this by including a style sheet called “reset.css” which set’s many values to 0 (e.g. margin: 0; padding: 0;). A CSS reset is a way to start from scratch. Keep in mind that all CSS attributes, even though they are not in your style sheet, are in fact styled. By resetting them you get a clean slate and can give you peace of mind when styling your site. Check out Eric Meyers page on the CSS reset for more details and good practice.
“We have the power to make people enjoy life”. - Andy Budd
As web designers we can have an impact in a persons happiness. People choose to use the internet for a variety of reasons, but mostly to get enjoyment. By designing sites in a way that engages the user, we can bring enjoyment to their experience and keep them coming back. You can see this happening in the Web 2.0 era through design and utilizing newer technologies such as blogs and ajax which make sites more interactive and engaging. By using these techniques and technologies you can take your site to the next level.
Check back soon for 3 more inspirational quotes.
3 Techniques to Take Your Site to the Next Level
With the web evolving to the next level, many more tools have become available. Many of these tools are relatively easy to install but will set your site apart from those alike. Here are 3 techniques which we use and we feel will help you elevate your sites:
1. CSS Dropshadows - 1976Design has developed a way to apply css dropshadows to block elements. This is most commonly used for images but can be used for any block element. This effect requires no background images and will give your images a three dimensional look and feel. It’s really the small subtleties that make the difference. CSS Dropshadows
2. Lightbox - Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers. It was developed by Lokesh Dhakar as to display images in an overlayed window using visual effects. It is very simple to install and looks extremely professional. There are variations of Lightbox out there which even allow you to open web pages in the overlayed window. Lightbox
3. Fancy Forms - Forms, although although somewhat rudimentary, can be tweaked to give the user a more enjoyable experience. One thing you can do is change the properties of the input boxes currently selected such as border color, background color, and font color. This article by Senthil Karuppaiah gives an easy explanation of how to change these properies using javascript. Subtle things like this will set your web site apart from the rest. Fancy Forms
Stay tuned for more techniques.
Search
Archives
Categories
