Category Archives: webstandards

Merits of Good Web Design

Good web design is about reaching the widest possible audience. To reach the widest possible audience you must design with two thoughts in mind web standards and accessibility.

Accessible designs allow users to resize text even non-compliant browsers like Internet Explorer 6. They provide alt tags for images, in case someone is using a text browser, and those alt tags are descriptive of the images so that those users can gain value from them. They offer a design in which the user can skip navigation and get right to the content both for ease of use and for someone using a text browser. Many people don’t realize when they’re designing a site that the source code is how text browsers will read their site so if you have the header, navigation ads and all other non-content related items before the content in the source code than people using those browsers will have to navigate through that on each and every page. Offering them an alternative to that is one of the keys to accessibility.

What many people don’t realize is that is also how search engines read their sites. So by making your site more accessible you are making it easier for search engines to decipher what exactly is important on your site increasing your rankings and making it easier for them to understand the keywords that your site should rank for.

Web standard based designs function in much the same manner. Designing with web standards means separating content from appearance. Anything that does not deal directly with the content or present some semantic value to your site should be relocated to the CSS. You place all your non-semantic images backgrounds, bullets, etc, colors, font sizes and faces into the CSS. Then your (X)HTML contains only the relevant markup in semantically correct tags H elements for headers, strong for important text, p for paragraphs, em for text you want emphasized, ul/ol for lists, li for list items, dd/dl for definition lists and items, etc. You can then use additional classes and ids on those elements to style your site and match almost any design you can come up with typically with additional div and span tags used sparingly to help provide additional hooks for your CSS.

Designing with web standards also allows you to optimize your site for search engines since you are now declaring to them what your header elements are including hierarchy, what the title of each individual page should be using the title tag, one of the highest ranking SEO tags; and laying out the content with semantic tags so it is able to electronically “read” your content and make keyword associations like the human eyes does naturally.

So by practicing good design you are not only naturally increasing your audience by allowing the largest number of users to view your site but also helping to improve your rankings in search engines for terms relevant to your content. In addition, by separating content from appearance you can easily update the look of your site by changing the CSS and potentially adding a few more hooks cutting redesign time drastically.

In conclusion, good design means using accessible designs and standards compliant code. This brings you the largest possible audience, the lowest possible redesign time for future updates, lower bandwidth (because CSS is cached), and search engine optimized code.

Random Tidbit: The Google maps flight sim is pretty cool.  Though I wish they had more cities.

Is IE7 the Solution or More of the Same?

I had high hopes as I began to read the early beta versions reviews of IE7 and the numerous fixes they had over IE6.  I had seen some of my work in IE7 and was pleasantly surprised that it worked.  Then I began to dig deeper.

The problems began when you have used hacks or filters to feed specific CSS to IE6.   Now those who use these knew they would potentially cause future problems and that Microsoft approved conditional statements would be the better choice.   However in some cases – particularly in the instances where you inherit code or time is of the essence and you simply do not have the time to separate them all out – a designer would opt for the quicker and dirtier solution of a hack.

The problem is that, essentially, not all of the problems from 6 have been fixed in 7.  So you now have the new star hack – a version of the underscore hack where you can use *property: values to feed a separate CSS to only IE.  Unfortunately, 6 picks up on these as well and typically does not break in the same way – normally on heights and the box model – so you must follow with either an underscore hack or the * html property filter – called the tan and/or holly hack I believe – to fix 6.  So now you have an extra filter in addition to one you shouldn’t have/need in the first place.

Again, the short and simple solution is to use the conditional statements.  While semantically they are very inelegant, they will make your life as a designer much easier.  Hopefully IE8, or future updates of 7, will fix these issues.  It is a vast improvement so I am hopeful.  The fact that they copied many of the good elements from the other browsers out there – including add-ons, a variation of the extensions from firefox – is a good sign.  I don’t typically say this, but my hat is off to the Internet Explorer team.

Random Tidbit: Blog writer Robert Accettura had some interesting Secrets in Websites.  Very interesting and conspiratorial.

10 Best Templates to Borrow (i.e. Steal) Ideas From

I will soon, hopefully, be undergoing a new project for a relative of a very close friend of mine.  In doing so – since the potential clients are not well versed on the Internet, web 2.0 and the cutting edge – I decided to find a series of templates that would outline several different ideas and concepts.  It also gave me the idea for this post.  Basically the following list outlines 10 well done templates(or in the case of Zen Garden entries, simply designs) that you, potentially even as an experienced designer, should look to for inspiration, ideas and thievery.  Enjoy.

10.    Nautica01 – a simple, clean design.  Smaller width but one of the things I like most about this is the left navigation and the rollovers they do using CSS.

9.    The Holy Grail – basically just a wire-frame but a design I’ve stolen heavily from.  Not only clean and compliant – but SEO friendly as well since your content comes first in the markup.

8.    Deep Thought – a Zen Garden design.  A good example of disjointed design in that the containers don’t line up.  A good concept not utilized enough in web design.

7.   Pret-a-porter – another Zen Garden design.  The only example of a horizontal design.  This looks and works awesome in complaint browsers and degrades well in IE.  Horizontal design is not used much in web design – but when done right it can be very powerful.

6.     Ballade – a final Zen Garden design.  The way they make the graphics – the steps, bridge, etc – flow from container to container – simply brilliant.  A side mention for Zunflower since we’re talking about graphics – the shading gives the containers depth, making it a very powerful visual design.

5.    Plain 1.0 – a Six Shooter Media design.  I actually modified this for one of my first home page designs and learned a lot from the skills of this designer.  Very talented.

4.    Andreas01 – an Andreas Viklund design.  Now hosts his templates on OpenDesigns.org, but since I didn’t see this one on there it’s from OSWD.  Simple, clean, elegant – great dropdowns and rollovers, excellent use of a header graphic, nice use of background graphic to give depth and could easily be adapted with the holy grail techniques to shoot the SEO up.  So, by combining concepts from the two, you’d have an standards compliant, search engine optimized and graphically beautiful site.

3.    Andreas09 – another Andreas Viklund.  If you’ve looked through the WordPress themes, you might recognize this one.  Not only does it change from a 2 column to 3 but it’s also preloaded with 6 color schemes – my personal favorite being black.

2.     Plain 2.0 – another Six Shooter Media design.  An update/revision on 1.0.  Bolder graphics, excellent graphics use on the containers, excellent rollovers on the side navigation, and good font and font color choices.  Some web 2.0 flavor and methods as well as a bonus in a skip to content accessibility link.

1.    Thin Green Line – a final Six Shooter design.   This and Plain 2.0 could switch everyday depending on what mood I’m in with this currently being my favorite of his templates.  Overall, it’s not as nice a design as 2.0 but the top navigation with the animated gifs has just got me hooked right now.  As with the other 2 Six Shooter designs this could use some holy grail combination to push the content first and improve the SEO.  I would love to see what he could come up with just stealing the navigation from this and replacing only that part of the design on 2.0.  I just might have to try that in the future.

For more free templates, check out my del.icio.us.

Random Tidbit: Found this awhile back.  Apparently web2.0 is catching on since even some religious sites have used methods from it.  Very interesting.