Caffeine Kitty: Designing for SEO and Other Thoughts.:
Designing for SEO and Other Thoughts.
03.03.2007 Source: http://caffeinekitty.com/DesignSEO.html
Understanding Search Engine Optimization
* SEO is manipulating elements on the internet to give a particular element broader exposure.
* Designers can influence SEO when creating a website through clean and logical coding practices.
* SEO works hand in hand with HTML, CSS, GUI, Content and server-side scripting. Remember, design is just part of a greater whole.
Can you do it all? I can’t – that’s the first step.
It is becoming more and more common for clients to demand more from digital designers. Clients either have no time or lack the patience to fully understand what we do. That’s not to say a client is lacking in any given area, it just means that more often than not they’re busy with the day-to-day practices of their business and don’t have the need-to-know what it takes get recognized on the web. This isn’t a bad thing, but it will take some of your time to explain to a client what is needed to propel their online identity. By doing so, you will place yourself in a stronger position with them.
Value, Relationship, and the Bottom Line.
Business is business. Clients may like you, but if they don’t understand what you do, it’s a lost cause. That doesn’t mean you have to explain each variable of cross-browser compatibility or teach them to code in your favourite web scripting language (HTML and CSS – right?), it simply implies that you have to outline the value of your services, as well as the time it takes to get their online identity on the internet. Some common values include:
- Search Engine Optimization – Fancy term for helping to make your website seen on the web.
- Coding practices – Adhering to uniform web standards such as colours, coding and proper SEO tactics.
- Timeline – how long the website will take.
- Responsibility – who does what? Employee #1 will provide content; employee #2 will email you the logo, etc.
- Communication – when emailing, always make sure the project leader is CC’d on important issues (no need to CC them on the little things unless requested).
Just Don’t.
Don’t focus so much on your design that you forget the “behind-the-scenes” practices. Sliced PSD files are fine for mockups and so forth… just don’t forget to clean up your code when you use them for the live site! There’s nothing more annoying for another designer than sloppy seconds – pregenerated code adds a lot of HTML comments and unneeded java code. Practice your clean up web coding in notepad… it’s good practice.
Templates – the Saviour of Design.
I’ll be the first to admit that I use templates. I know it’s a mortal design sin… but I’m ok with sinning if it pays the bills. Templates are your best friend. A good HTML/CSS template will already contain all the SEO elements that you need. Fill in the blanks, change the graphics, and add the body copy. Done. Simple. Just remember to be honest about it to your clients. Let them know that you can save them $400 in service fees for a (less then) $100 template that you can change to suit their needs. Do the searching for them, submit the 3 templates that work for the client, purchase the chosen design, alter, and done. This method will save you at least 4 hours of coding – that’s 4 hours of your life spent in Notepad that you can’t get back.
Please note that this method is great for bread-and-butter work. You can always do everything from scratch for the customers that don’t mind spending more on a personal design.
Template creators appreciate the money and notoriety. Granted, you can’t put the template design in your portfolio without proper credit to the authors, but it puts food on your plate.
Templates are innovation, not creation. Stop being a design snob – get over it.
Now that I’ve lost half of the designers who read the above, let’s get on with the real details… in point form since (I’m too lazy to type it all out. -M.) my little girl is waiting to play “ponies” with her daddy… Get used to putting everything in hourly terms… you’ll stop wasting time and start making money.
Like Reader’s Digest – Points to Ponder
- Be conscious of code as well as design and interfacing. Knowing HTML and CSS is just as important, if not more so when it comes to SEO.
- JavaScript and flash files cannot be picked up by search engines. Avoid if possible.
- Search Engine spiders consider JavaScript to be the “White Noise” of the internet.
- Flash files are invisible to search engines. They just register the SWF file, not the content.
- Updating the website is key, at least 2-3 updates or comments a week, no matter how minor.
- Meta tags – keep it simple, and don’t go overboard.
- Learn to use .htaccess files when in a non-Microsoft environment. (for clarification of .htaccess files, click here)
- Stay away from FrontPage. Period. (Note - Frontpage is dead. The latest Microsoft web editor(s) are called Sharepoint Designer and Expression Web) My personal preference is Dreamweaver, Notepad, Photoshop, and Illustrator.
- Use HTML/CSS when you can – it’s your lifeline in the SEO world.
- Try to use external CSS – Search engines get bored with reading inline CSS tags.
- Search Spiders read code like we do – from left to right. This is important when using frames, tables, or CSS floats – keep it logical.
- Repeat words in meta tags, but do not stuff your Metas – 12-18 words max
- Research key words and target specifically - try to focus on the websites owner and/or company name.
- Use hidden HTML and CSS comments to OCASSIONALLY repeat your Meta words. Use it too much, and you’ll get blacklisted by Search Engines and reported as a “spam site”
- Get a Gmail account and sign up for Google site maps.
- Make use of SEO technologies such as ROR (Resource of a Resource)… it does the same thing as a sitemap web page will, but with more detail.
- Keep things simple and logical – If people can understand your code, so will Search Engines.
That’s the main gist of the basics. I’m sure there are a few things I’ve missed. Wouldn’t be human if I didn’t. Which actually brings me to another point to leave with you in regards to client-designer relationships… it may seem like a common piece of advice, but I’ll repeat it anyway:
Admit that you’ve made a mistake, but have a solution to offer before you contact your client.
Easy. Don’t bury your mistake in confusion and/or code… it will always bite you in the behind.
With that thought, I’ll leave you all be for the moment. Questions and comments are always welcome – hate mail usually gets posted and ridiculed. Now if you'll excuse me, I have a little girl that needs her “pony”.
Happy Designing.
Questions and/or comments can be directed to: mike@caffeinekitty.com
Unconstructive hate-mail can be sent to: spam@caffeinekitty.com
Resources to get you started on SEO & design:
Google Sitemaps: www.google.com/webmasters/sitemaps
RoR (Resource of a Resource): www.rorweb.com
SEOchat: www.seochat.com
Andreas Viklund: http://andreasviklund.com
Pixel2Life Tutorials: www.pixel2life.com
