Category Archives: css

SEO: What I Learned as a Web Designer

One of the most important things for a site is for it to be seen by as many people that would be interested in it as possible.  Typically, there are two ways to facilitate this happening.  One is paid advertising – buying search engine terms in Google, Yahoo, or other search engines and/or buying space to promote your site on other sites that attract the same audience as you.  The second is Search Engine Optimization, SEO.  Even with paid advertising this is necessary because it is a free way to improve your natural rankings in search engine listings for the keywords you feel are important to your site.

What is SEO and how do you improve it for your site though?  Simply put, SEO is designing your site so that it is easier for search engines to read it – and so quicker for them to understand where you should go in their directory.  Ironically, by making it more search engine friendly you typically also make your site more compliant and easier to update and validate.

The first step to improving your SEO can be done by anyone – provide rich content.  If your site/post has the relevant keywords related to the topic you want to be listed in and contains content related to that subject that people will find interesting and want to read – then you’ve taken the first step.  This has nothing to do with XHTML, CSS, PHP or any web technology.  I’m talking about the simple text you place in between all those wonderful tags.

The second step is to understand the hierarchy of your site.  This varies slightly based on the search engine and some people will disagree with what I say about meta tags – but this is based upon reading many books and sites on SEO, as well as first hand experience.  In regards to meta tags – by all means fill them in.  But because of abuse, they are very low weight – i.e. lower in the hierarchy – and do not improve your ranking much.  The highest level is the title tag – what will appear in the bar at the top of the browser.  You should choose something that relates to the topic and, preferably, provides a 5-10 word summary of what your site/post is about.  Following that is the h tags – h1-h6 respectively – which are weighted accordingly – h1 is higher then h2 and so on.  Be careful not to abuse these by using them all over the page – as that can be considered “keyword stuffing” or other not nice words that mean search engines will not like you.  Finally, there is the rest of the stuff in the hierarchy – p, strong, ul, li and all the other wonderful tags.  They have some varying weights but not really enough to be worth talking about.  The easiest way to implement this step is to think of your site like an outline for a paper you’re doing in school.  You have a title, some subject and sub-subject headers (h1, h2, etc) and then the meat – paragraphs of content.  Only in this case, you’re not summarizing in the paragraphs, but placing rich content.

The final step is CSS.  One of the reasons CSS was proposed and implemented was that web pages had become bowls of “tag soup” – what you saw looked nice, but beneath that the HTML was loaded with misused tags, presentational information and other things that made it difficult to edit and bloated the page weight.  CSS is very simply a way to separate your presentation from your content.  Because of browser quirks this is not always possible – though the biggest perpetrator, Internet Explorer, is looking to correct this with IE7.  In an ideal world, the XHTML for your site would contain the basics – your plain text content, basic tags (p, h1-6, ul, li, etc), some id and class declarations and that’s it.  Only the things that describe your content – nothing dealing with presentation like colors, fonts, or even div/spans.  This is typically never possible because at a minimum you usually need a few div’s to mold your design – but it’s nice to dream.  Your CSS file would then hold the actual design of the site – where elements should reside on the page, what color and typeface fonts/headers should be, background graphics, etc.  You could then easily edit the look of your entire site simply by editing your CSS – potentially a single file in a simpler design.  This is the true power of CSS – not only will it allow more interested users to see your site (by helping your SEO) but it will also allow you to change your site quickly and easily whenever you want.

Once you understand the basics, you can start to see the potential.  One of the more powerful tools is to place your content first in the HTML because search engines only read the HTML and give more weight to what they read first – so you would rather have them see your content first then say your navigation or sometimes even your header.  The problem is most sites don’t want their content to display first – they want a header with site branding and usually some left navigation – though right navigation is typically better because the user’s mouse resides near the scroll bar, so having it on the right means they have to move the mouse less, improving their experience and making it more accessible for them.  With CSS you can have both.  I did this for the sites I used to work on – 2 mid-size employment sites – and have even created a few free templates on my site – feel free to steal them.

I hope that you got something out of this.  If you have any questions, comments, or criticisms feel free to leave a comment or, if you prefer, e-mail me.

Random Tidbit:  Want to have a neat Web 2.0 tool to track your competitors with?  Check out this article on Competitio.us.  The article is old, but the site still appears to be free to use.

Sites a Web Designer Should Know (or ‘I wish I had thought of this first’) Part 2

They say patience is a virtue and absence makes the heart grow fonder, but you just want your links, right? So here goes:

Templates

  • Intensivstation – XHTML and CSS 2 templates that start you off in pretty much any basic design you would want to use.
  • Mollio – another set of basic templates that you can download and play around with. A good learning tool if you’re new to CSS and XHTML.
  • Layout Gala – the best of the three, especially if you have a grasp of CSS. Takes the same markup and applies different CSS similar to the CSS Zen Garden. Excellent for setting up how you want content and links to appear for SEO purposes.

Inspiration

  • CSS Beauty – excellent design of the site itself, lists of CSS sites, CSS jobs and news as well.
  • Stylegala – similar to CSS beauty.
  • CSS Vault
  • CSS Tux – labeled as the “best dressed” sites on the web, some nice designs – including the site itself
  • W3C Sites – sites that conform to the W3C standards – beauty and standards compliance hand in hand.

CSS

  • Ten CSS Tricks You May Not Know – some cool stuff that I hadn’t heard of at the time for simply didn’t use enough.
  • CSS Navigation Techniques – besides allowing users to navigate your site and improving your SEO, navigation can be a strong aesthetic part of your site.
  • Max Design – list of resources, including Listamatic.
  • Learn CSS Positioning in Ten Steps – everything you need to know about positioning
  • Position is Everything – for when everything you know about positioning doesn’t work. Hopefully, IE7 will make this site obsolete.
  • CSS Tools – another list of CSS tools, much longer then mine. Some redundancy but some really cool stuff I didn’t list.
  • css/edge – Eric Meyer doing CSS. Do I need to say more?
  • Stu Nicholls | CSS Play – I have mentioned I have a love/hate relationship with this site. It has dozens of cool ideas that I borrow (steal) and that cause me to expand my understanding and abilities with CSS. I hate it though because everytime I think I’ve come up with a new idea in CSS… I find he’s already thought of it and 3 offshoots. Highly recommended

I hope you found something you didn’t know before and something that inspires you to make the web a more beautiful, CSS enabled, standards compliant and semantically correct place. Comments, constructive criticisms and flames welcome. Spam can be directed here.

Random Tidbit: WordPress does not like Opera at all. Something in the Ajax or Javascript just hates it. I’ve tried identifying and masking as Firefox and even Explorer, still no go. Someone should work on that since it’s rather annoying. I like Firefox and it’s not that hard to switch over I guess, but I would think that it wouldn’t be that hard to get it to work in Opera compared to say Explorer. But it could be I’m just not that smart.

Sites a Web Designer Should Know (or ‘I wish I had thought of this first’)

Awhile back I did a post on my personal top ten sites. It was dugg and relabeled as sites a web developer should know. This was not my intention since there were many sites on it that have nothing to do with web design, CSS or SEO. But it was one of my most popular posts – probably not for my superb writing skills, more likely interest from the digg post.

I am still relatively new at web design but I thought I would share some of the sites I use regularly in the hopes that experienced designers might find something new and new designers might start out correctly – that is, building CSS based, SEO friendly and standard compliant sites. Since there is a relatively large number of things I want to list, this will probably be broken up over several posts.

SEO

  • See how your site looks to search engines – input your site, choose your paramaters and it will show you what order your content shows up in, your keywords and keyword density, as well as headers, title, meta tags and other SEO elements of your page. A good way to make sure your page is being read the way you want it to.
  • Getting your site indexed before you launch – this article brings up a good point. Many sites talk about how to improve your SEO after the fact, but as many designers know – by doing things right from the beginning, it’ll make your life and job a lot easier. This offers several simple ideas to be indexed before you’re even done.
  • Basics of SEO – 456 Berea St. offers an excellent list of things to do – keep your title (the most important SEO element) in mind and utilize it correclty, use real headings, write good content (and keep it fresh), use good (semantic and lean) markup, and keep in mind there are no shortcuts. It includes more information and ideas then I mention here – I highely recommend it even if you know a lot about SEO, you might learn something new.
  • Beginner’s Guide to SEOSEOmoz is an entire site dedicated to SEO and this beginner’s guide is actually pretty comprehensive.

Markup

  • W3Schools – a free online school of the basics of HTML, CSS, JavaScript and other web languages. Very basic, but a good resource.
  • Complete Guide to Web Design – An excellent, complete guide to building web pages. Easy to read and well written. Highetly recommended.

Web Standards

  • W3c Validator – the official validator. You can’t have standard compliant code unless it’s valid (ad servers, CMS, etc. aside).
  • 9 Ways to Misunderstand Web Standards – Some common misunderstandings that still go on today.
  • Why Tables for Layouts is Stupid – An online slide show from Seybold 2003. Simple and easy to understand. A great list of resources near the end. Included because it’s amazing to me how many table based layouts there still are out there – including many of those free template sites or page builders you find. Tables have their uses – but bloating markup and killing SEO is not one of them.
  • Designing with Web Standards – another great 456 Berea St. article. A comprehensive guide to designing standard compliant sites. A little hard to understand for beginners, but a source I highely recommend.

That’s it for today. Next time: CSS, Inspiration and Template sites and color/graphics sites (most likely – subject to change). A great, and much more extensive, resource list can be found at the web developer’s handbook – some of the sites listed here are on there and I have mentioned this site before. My only complaint would be that no descriptions are provided. However, on a list that large, descriptions would make it almost unreadable.

Random Tidbit: Sticking with the list theme – here are three great del.icio.us links:

Stylish – the best Mozilla Extension

So I know I’ve been harping on Opera a lot lately, but I figured I would devote some time to what has recently and quickly become my favorite Mozilla extension – Stylish. Now I make regular use of – and highly recommend – both the web developer’s toolbar and the IE tab extensions. If you don’t already have those and you do any sort of web designing at all – get them. The IE tab lets you open an Explorer tab in Mozilla for testing – so less windows open in your system – and the web developer’s toolbar has all kinds of neat tools, only some of which I’ve mastered, including outlining elements, giving image information and a built in ruler.

Going back to Stylish though, it is an extension that allows you to create page specific style sheets for sites you visit a lot. Why would you want to do something like that? Well, for one, you can find styles that remove the ads from Digg – allowing you to browse ad free. Another allows you to modify del.icio.us – which, though one of my favorite sites, is kind of plain. I have posted my stylesheet – feel free to steal, modify, claim credit, etc.  You will have to open it and save it as a .css to use it in Stylish since WordPress does not allow uploading of that file type.  Mine is just a modified version I found on a site dedicated to user styles. There are some nice MySpace and Slashdot ones I have yet to try. I’d like to find/make a decent one for diggdot.us.

Random Tidbit: Going back to Opera for a moment I found a Wiki that talks about a built in feature similar to Stylish. I have tried and failed to make it work but I think that’s more user error then anything. The page also mentions userstyles and another page where you can get page styles – just remember to remove the Mozilla encoding from the posts on userstyles.

My Top Ten Sites

So I’m going away for a couple of days and won’t be able to post and I came up with the idea of sort of listing my top 10.5 sites. Not necessarily the best on the web but the ones I use the most frequently and find the most useful. Perhaps you might find something you like.

10.5: BogeyWebDesign.com – not even rating a full number, but I’m always updating my site. I’d be surprised if the number of (non me) page views was over a dozen a week, but maybe you’ll find a template or idea you can steal.

10: Smedlock.com – I’m a geek, I admit it. I play Magic the Gathering. And this is one of the best sites to pick up cards on the net and I have never had any problems from them.

9: MySpace – I almost hate to put this one up here. I probably use WordPress more, but I like the fact that you can share information easily with you friends. Not many of my friends have/read blogs or are into CSS and web design. But most of them have a MySpace.

8: Open Source Web Design – A huge, free collection of open source templates from beginners to experts. Stick to XHTML with CSS and you’ll find tons of great designs you can just plug your information to and have an amazing site. For free.

7: Web Developer’s Handbook – A huge collection of resources from Web 2.0 sites, to CSS and HTML tools and all the way down to color pallette generators and free stock photography. Awesome tool for designers.

6: CSSPlay – One of the best collections of CSS on the web. Anytime I need something neat, I look here first. The only problem is that anytime I think I’ve done something original, I usually find that he’s already done it.

5: MeyerWeb – The King of CSS. Enough said.

4: DilbertBlog – Scott Adams’ Dilbert is one of the funniest comic strips out there, especially if you’ve ever worked in a cubicle. The only thing funnier is Scott Adams himself.

3: CssZenGarden.com – The single greatest collection of CSS on the net in my opinion. If I had half the skill of some of the people that have designs on here I’d be all right. Hopefully, one day, I’ll make one and have it accepted.

2: Del.icio.us – This is my new obsession. I love the fact that I can store all my bookmarks in one place, categorize them easily and even share them with my friends. Awesome.

1: Digg.com – I am constantly checking this site for interesting stories, great deals or even some useful CSS and web design stuff. I have yet to post or get an account, but I may yet when I have more time.

Hopefully you found something interesting that you had not seen. I just realized most were design sites, but that has been my main focus the last year or so – so I guess that makes sense. I’m sure I’ll have a revision down the road. What is your top 10.5 sites?

Random Tidbit: Want to get to know me a little more? Of course you don’t. But I’m gonna toss my MySpace up here anyways. Logon and check out my weasel – my ferret Mugsy. She gets top billing because she’s cuter and works for Skittles.