Category Archives: web design

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.

So you wanna live forever (or Opera is the best browser no one’s heard of)

So scientists, at least I’m assuming he’s a scientist – which could be dangerous, are not reporting that someday we may be able to use nanotechnology to gain immortality. Basically we could use tiny nanobots to do what our body naturally does, except better. It would enable us to avoid “transcription errors” in our DNA – which brings to mind the glitches you get on your computer when you leave mozilla running too long – thereby keeping us young forever as well as fighting most common diseases. It’s a pretty neat idea and I’m in as long as Microsoft and Sony aren’t. Last thing I need is some legacy code or DRM messing with my motor skills and I start spastically slapping myself.

As for Opera, I found a recent article that talks about how designers can edit their pages in real time and see the results using Opera 9.0. I haven’t had a lot of time to use Opera, but from what I have I’m fairly impressed. It has all the good features of Mozilla – including some additional ones built in that are extensions in Mozilla – as well as neat features like zooming and the ability to render the page you’re viewing as a text browser would – great for improving the accessibility of the site you’re designing and/or improving the SEO. The best part is of the 3 major browsers, it’s the fastest I’ve seen. Unfortunately there’s 2 problems. One is probably user error – some of the pages I’ve designed come out a little funky. I believe this to be because Opera renders the box model correctly but also reads some of the IE hacks I use – or vice versa. I did upgrade to 9 and most of this went away, so that’s a good sign. Two is the bigger problem. Only about 2% of the web users out there use it. That’s on average, and if your site or blog is about the web, especially cutting edge web technology, it’s likely much higher. But it’s still disappointing. With IE7 not looking like it’s going to fix many of the major bugs – and no real explanation why not – I almost wish they would just use all that money they’re raking in, buy Opera and plug it into Vista. But that will never happen.

Another interesting stat on that is that 5% of users still use IE5. Which leads me to believe they either can’t afford to upgrade their computer or they live in a cave. I’m hoping for a day that all users will have a CSS2 (or 3) compliant browser and designing will be a lot easier. But, not too easy, sometimes I feel I’m one good copy of Dreamweaver from being obsolete.

Random Tidbit: An interesting story about the PS3 being make or break for Sony. I had a blog recently about my thoughts on this matter. The more I hear about PS3 the more I think I’m not going to buy one. I think I’ve become an Xbox man. Which is very, very depressing when you think about it. I think I’ll just lie and say I own only the Wii…

Viral Marketing and Link Baiting

Found an interesting article about viral marketing and link baiting, which is a term I had not heard before.  Viral marketing is something that I have been thinking a lot about lately as I try to not only provide content, but also to get people to actually see the content I have provided.  Nothing worse then a good idea that no one knows about.

Basically, the two ideas are ways in which to use the new web – mainly web 2.0, community content driven sites – in order to introduce your site to the masses for free.  Essentially, word of mouth advertising meets the web.  The benefit is that it, hopefully, has a snowball effect.  As people find out about your content and find value in it, they link to it from their sites, blogs, myspace’s, etc.  This grows your linked-to rating, which helps in SEO, especially for Google.

The article also has a beginner’s guide to SEO.  If you don’t know what SEO, Search Engine Optimization, is – it’s basically a way to get your side indexed, preferably indexed high, under the searches that your content matches.  So when someone is looking for widget toolboxes and you have the site 1001widgettoolboxes.com then they can find your site easily.  This is especially important for smaller businesses since they do not have the funds to use conventional advertising – tv, radio, newspapers – or to become a sponsored link for those searches – paying per click.  It again goes back to word of mouth advertising on the web – and ask any salesmen, word of mouth advertising is the strongest kind.

So besides using CSS and good XHTML to design your site, you should also keep in mind what you need to add – keywords, metatags, etc – in order to give yourself the best chance of getting your content in front of your audience.  And using sites like technorati, digg, slashdot, etc to create buzz is even better.

Random Tidbit: I can’t believe Boston is 7 games back of the Yankees.  The Yankees have no pitching and usually when I can’t watch them, which I haven’t been able to lately, the Red Sox do well.  At least the Pats are 2-1.  Although having a good preseason is rarely a good thing.  I don’t have any solid stats, but I remember hearing something along the lines of more 0-4 preseason teams have gone on to the Super Bowl then 4-0.  Not sure what finishing 3-1 or 2-2 does for you.  Time will tell.