M S Forest Gets A New Look

No, not the forest, it's lovely just as it is, although as a designer, I could tweak it a bit...LOL

M S Forest has been a huge community supporter for a long time and they wanted to promote themselves as the good stewards that they are. They are very good at getting pictures of projects so I decided to go heavy on the graphics in this website redesign mockup, even using images for the navigation links backgrounds using CSS.

I think the images portray, better than words, just how environmentally conscious the company is, and it does help to promote product as well.

Keep watching msforest.com in the next few weeks for the live version.

SEO and CSS for Hip Designers

Back again at the Canon Coffee Cafe. The baristas are very sweet and they let me work here as long as I want. It's not the same as sitting at home working in my underwear, but hey, I DO need to get out more.

Since I fried my modem on Monday, I've had time to write a little and got another newsletter/article/podcast done on SEO and CSS.

I found an article by James Kendal at webdesign.org about the subject and he says: "Hip designers and developers use CSS extensively to create beautiful, fully standards compliant sites."

It's true I do create beautiful web sites and it's true that they are fully standards compliant, but "Hip"? Moi? Wow.

And all this time I thought I was a pasty-faced computer geek.

Oh, yeah the article/podcast. Wanna read/listen? Here's the article. Here's the podcast. Enjoy and as always, your feedback is welcome.

That's it from the Canon Coffee Cafe. My modem is due in later today and I'll be back in my office working in my underwear - with any luck!

Debugging CSS

I rescued myself from spending god-only-knows how long trying to find a very small alignment problem on a new site that was causing me major frustration.

Ok, I didn't do all the rescuing, I found a website with a couple helpful hints for debugging CSS. Since there is no software, online or off, that will find all the bugs for you, you have to commit yourself to becoming a problem-solver.

I used to use the border property on divs that were out of alignment, but now I'm using the background-color property to highlight the element I'm working on. The other suggestions were:

• set margins to 0
• adjust values from tiny to huge and see if you've got the right element and what happens
• hide selective elements - you never know what might be causing the problem until it's gone (just comment out your code, as you'll probably need it later)
• get rid of unneeded elements - take it down to the bare minimum and start over, adding a single element at a time
• validate your (X)HTML - make sure it's square before proceeding with style

MY problem was none of the above, but using BG color did help me narrow it down to the right element. I was using an H1 tag without setting a font-size, and the height was too much for the background image until I reduced it to fit! You just never know...

Adhering to Web Standards to Improve Business

Taking web standards into account when designing a website may
not be a primary concern for many site owners, but when it
comes to finding an extra edge to improve their business, they
are more than willing to do anything required to increase
revenues. Let's see how complying with Web standards can
help a business website.

What are the Standards?

On the Web, the main standards are the languages used when
creating websites. The most wide-spread ones are HTML, XHTML and
CSS. HTML or XHTML are used to create the backbone of websites -
the structure. (The difference between HTML and XHTML is that
XHTML was formed from XML and is forward compatible.) CSS, in
turn, is used to style, format and position the structure and
content.

What is Web Standards Compliance?

Put simply, web standards compliance is using web languages
correctly. This involves using HTML tags properly and the way
they were and are intended to be used. For instance, one of the
most common felonies against the web standards is using table
tags for layout, while the correct usage is to use them only for
tabular data (information to be put in tables).

Benefits of Standards Compliance

Creating quality, standards compliant code has a number of
benefits:

* website forward compatibility
* increased site download speed
* browser compatibility
* easier site maintenance
* broader target audience

How Can This Help Business?

Perhaps every entrepreneur is asking himself right now, "And
where is the money here?" Probably every benefit can either
increase revenues or save expenses. Let's look at them in
detail.

Site Forward Compatibility

Web standards, such as XHTML and CSS, are designed to work
forever. They will also be supported for an almost unlimited
period of time. Designing a site according to web standards will
ensure the website backbone will not need to be redone any time
soon, which reduces the amount of work on the site and the
expenses of the site owner.

Increased Download Speed

When using XHTML for content and structure and CSS for styling
and formating, page size is reduced when compared to a page,
designed with tables for layout. For instance, a site with a
relatively small number of images is 50% smaller than a
table-based website. Because users enjoy fast-loading websites
(they start leaving after eight (8) seconds beyond clicking on
a link), they will be more likely to become a clients of a web
standards compliant website.

Browser Compatibility

A web standards compliant site is displayed correctly (and looks
the same) in all standards compliant browsers. Adjusting the
site to suit a less helpful browser (Internet Explorer, for
instance) is much easier with CSS than with tables. This saves
enormous amounts of time for a web designer.

Easier Site Maintenance

When separating content and styling with XHTML and CSS, it is
much easier to edit any of those, because they are located in
different files. Should one need to adjust the look of the main
page heading (h1), he/she will just need to change a line or
two in a style sheet to change the appearance of all headings on
the website. Editing content is easier as well, because no
styling and formatting is in the way and it is easy to spot the
content in clean and semantically correct code markup.

Broader Target Audience

Furthermore, web standards are used not only on computers, but
also by PDAs (hand held devices, palm computers), phones and
other devices. A site, adhering to web standards, will be
displayed correctly either without editing or will require very
little work to be displayed correctly on a platform other
than a computer. Such easy availability will make the company
site easily accessible for a wider range of potential customers,
increasing the chances of business success as well.

So What To Do?

Naturally, there may be several choices for a business site
owner:

* do nothing and wait till something more noticeable becomes
obvious about the web standards.

* wait, research the topic, get more proof and then redesign
with web standards and visitors in mind.

* redesign the site right now, either with the help of an
in-house web designer or a professional, specialized
company.

Any of the choices above solely depend on the situation of the
business site. Most probably, making a site web standards
compliant will be most beneficial to starting or young websites,
which will reduce the amount of work needed in the future.
Mature websites can consider adjusting their websites to improve
the quality of their visitor experience. Those, whose sites are
barely important can live as they are, provided the site works.
Thus, it all depends on the site owner and the situation the
business is in.

================================================================
The article is contributed by Yuri Filimonov, a usability consultant for
MyNeatSite. MyNeatSite specializes in improving overall website usability
(http://www.myneatsite.com/services/redesign-web-site-design.php).
================================================================

Link