Why You Don’t Want Michelangelo Working on Your Website

Everyone wants to live surrounded by beauty. Beauty soothes the soul, and lifts the spirit. It inspires us and keeps us healthy. We all want beauty.

Can you have beauty in your website? Sure you can, and it’s important to have your website be pleasing to the folks you want to help. Unfortunately, this desire to have beauty and to please folks means that you can spend a great deal of time creating a ‘unique and beautiful’ web design that people actually avoid. How can you spend so much time on beauty, sacrifice so much money with a designer, and still end up with a mess?

Do you do Frescoes?

No one would complain about the beauty of the Sistine Chapel in Rome.

Michelangelo spent four years, from July, 1508 through October, 1512, painting over 5,000 square feet of the Sistine Chapel’s ceiling.

Unfortunately, Michelangelo was a sculptor, and loved working in marble. Prior to the Sistine Chapel, he had only painted briefly as a student of Domenico Ghirlandaio in Florence – which means that he got off to a slow start as he learned how to paint frescoes.

Luckily for him, Michelangelo was already an accomplished artist. He wasn’t exactly doing the Sistine Chapel as a free promotional effort. Pope Julius II commissioned him for those four years, and didn’t seem to mind that it took Michelangelo a while to get in a groove.

History reports that one of the Pope’s motivations was to outdo Pope Alexander VI. So, the whole idea was to create an amazingly glorious ceiling that would stun everyone who saw it.

Are you trying to stun your visitors? Remember the purpose of your website: to create a relationship with the right people, connect with their hearts and needs, and to help them take the next step in relationship to what you provide. If you aren’t being commissioned to paint the ceiling of your website by a fabulously wealthy Pope, and if you aren’t trying to stun your visitors with beauty, I suggest you relax, just a little bit, any attachment you might have to beauty and uniqueness around your website.

Your visitor is waiting for dinner.

Imagine showing up at a fríend’s house to eat. You’ve worked all day, you’re hungry and you’ve been looking forward to dinner. Yet, once you arrive, they keep you waiting for three hours while they pull out family home movies, or their wedding album.

It’s not that you wouldn’t eventually like to see those things. But first, can we have dinner, please?

The Two Functions of Your Design

Absolutely prepare and present the food with love and beauty. But just remember that your visitor is looking for food, not frescoes. It’s been shown that when a visitor comes to a website, design plays two primary functions:

(1) to show that the website is solid and professional-looking enough that the business can be trusted, and

(2) to make sure that the visitor can find what he/she needs really easily without having to guess or hunt.

As long as you are meeting those two needs, your design is going to work.

So, where is it safe to bring forth beauty and inspiration on your site, and where will it keep you stuck to the ceiling for four years?

Keys to Website Design

* Things to avoid.

Avoid putting a pattern behind your text, or using a text color that isn’t very dark. In fact, I recommend that you stick with black text on a white background. Millions of novels of great variety, beauty and talent are written, all printed black text on a white background.

As a general rule, avoid animation and oversized photos and illustrations – anything that distracts from the food you want your visitor to eat.

Avoid unique design layouts. Many websites look the same structurally – and so do human beings. You don’t have to look at the back of someone’s knees to find their eyes. People know how to connect with each other more easily in part because of structural similarities.

Your visitor has been trained to expect certain conventions in web design, so they can find what they are looking for. Don’t play a guessing game with them by creating some outlandishly creative and confusing design.

* Things to do.

Keep your text front and center. Keep your navigation either across the top, or down one side, with clear labels. Don’t use more than two columns – one for the navigation or side text, and one for the main content of the page. Have a clear banner across the top with a simple message about your business.

* Things of beauty and inspiration

Make your banner beautiful and inspiring, without being cluttered. Use colors you love.

Use creative bullets rather than just the usual round variety.

Use color highlights around navigation buttons, and in the frame around your page.

* Above all, don’t agonize over it.

If you don’t have a website yet, or your website isn’t effective and you are upgrading it, bring in what creativity you have, but don’t agonize over the beauty aspects. Your visitors are waiting to be fed! Once you start having a lot of visitors coming to your website, and your business is humming, you can take the time and space to bring out the fine china for them.

My very best to you and your business.

About The Author
Mark Silver is the author of Unveiling the Heart of Your Business: How Money, Marketing and Sales can Deepen Your Heart, Heal the World, and Still Add to Your Bottom Line. He has helped hundreds of small business owners around the globe succeed in business without losing their hearts. Get three free chapters of the book online: http://www.heartofbusiness.com

Edited: July 18th, 2008

CSS Drop Shadows II: Fuzzy Shadows

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it.

We thought wrong.

The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. Most notable among the latter was Phil Baines’ method for keeping the markup simple when dealing with paragraph drop shadows. We are indebted to him.

The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow). Given that the shadow image is effectively clipped at those points, we felt this was an unavoidable inconvenience, chiefly due to Internet Explorer’s inability to display PNG’s transparency natively.

Then Jan pointed out a technique for making Internet Explorer render PNG’s alpha channel correctly. It works by activating Explorer’s AlphaImageLoader filter (previously discussed in this ALA article), but does so in an inobtrusive way which requires no extra javascript code. We think it’s a godsend. Combining this technique, some image trickery and our “fake shadow offset” method, we’ll be able to make properly fuzzy shadows that work across browsers.

In this article we’ll learn how to:

• Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.
• Coerce IE5.5/IE6 into displaying PNG transparency correctly.
• Use the above to create fuzzy shadow edges for our Drop Shadow effect.

First, we’ll fabricate our fuzzy shadow edge. To do this, we must create an inverse shadow in our image editing program. Usually we’d use a black shadow over a background color. For this effect, we’ll need a colored shadow. It must be the same color as the background over which we’ll apply the effect.

Start with an image like the “fake shadow offset” we described in the previous article. This one should be thinner than before (about 3px thickness for a 6px shadow has worked out well for us). Our examples will use white as background color. When reproducing this technique, adjust for yours.

We’ll apply a “Drop Shadow” effect to this image, taking care to specify white for the shadow color. A strong shadow is desirable — the stronger it is, the faster your shadow will seem to fade. We should now have something that looks like this:

Save this image as a PNG with full transparency. We’ll use this file for IE5.5, IE6 and standards compliant browsers. Make a regular version sans shadow with thicker offset (as seen in the previous article) and save that as a GIF file. We’ll feed this one to IE 5 (which does not support the AlphaImageLoader filter). Here are sample files for your perusal: PNG/GIF (Check them on an image editing program, since they will look like white on white in your browser).

Since we now have a solid color at the edge of our offset, we’ve effectively given up on the possibility of having a transparent shadow, so we’ll use a simple GIF for it. Make sure you apply the effect over the background color you’ll use. Here’s our example shadow: GIF.

The markup for this effect will be two

’s around our image/block element.

The basic technique is still the same: We’ll set up the fake offset (with its inverse shadow) as background of the innermost

, and the shadow as background of the outermost one. When overlapped, the transparency of the PNG will seem to gradually dissolve the shadow image until it becomes the solid background color. The tricky part is making this work in Explorer.

Our CSS is pretty much what we had seen in the previous article:

.alpha-shadow {float: left;background: url(img/shadow1.gif) »no-repeat bottom right;margin: 10px 0 0 10px !important;margin: 10px 0 0 5px;}

.alpha-shadow div {background: url(img/shadow2.png) »no-repeat left top !important;background: url(img/shadow2.gif) »no-repeat left top;padding: 0px 5px 5px 0px;}

.alpha-shadow img {background-color: #fff;border: 1px solid #a9a9a9;

padding: 4px;}

If you look closely you’ll notice we’re still including the non-fuzzy GIF offset (shadow2.gif) as background of the inner

. This is for the benefit of Internet Explorer 5.0, which doesn’t support the AlphaImageLoader filter. As it stands, this code will apply to all versions of Explorer. To make adjustments for IE 5.5/6, we’ll create an extra CSS file.

ie.css

To activate the AlphaImageLoader filter in a simple and reliable way, we’ll first include it in its own CSS file and name it ie.css. We know this is shameful and will probably make the Standards Squad put a price on our head, but we’ll hide this file from other browsers later, so it’s ok. Kind of.

Our ie.css stylesheet will look like this:

.alpha-shadow div {filter:progid:DXImageTransform.Microsoft».AlphaImageLoader(src='img/shadow2.png', »sizingMethod='crop');background: none;}

The AlphaImageLoader filter supports two sizing methods: crop and scale. We’ll use crop for our offset (scale fits the full image into the block, and is not what we’re looking for). Since the filter is somewhat limited and does not support CSS-like image positioning, we’re stuck with shadows that drop down and to the right (the image on its default position is all the way to the left and top).

We should note that, since the filter places the image in the foreground of the block element rather than as its background, this technique could be set up to show fuzzy shadows in Explorer with only one

surrounding the image, and show the hard edge shadow for other browsers. Not being ones to reward bad browser behavior, we’ll stick to the technique with the extra

, which gives us a fuzzy shadow in almost every browser under the sun.

The second line, where we set the

’s background to none, is there in order to remove the GIF offset we specified in the CSS before. Since we’ll only feed this file to IE5.5 and IE6, IE5 keeps the GIF offset (and thus displays a hard edge shadow). The rest of the browsers ignore that GIF file by the !important method we specified in the previous article.

Conditional Comments

To hide the ie.css stylesheet from all browsers that don’t need it, we’ll use Conditional Comments, a Microsoft provided technique to serve content to specific versions of Internet Explorer. They are included in the html document and look like standard html comments, so browsers other than IE5+ ignore them (and so does the w3c Validator, which is convenient). We’ll insert this in the of our document, after the CSS for the drop shadow:

What that does is specify that the enclosed bit of code should be used by versions Greater Than or Equal (the gte part) to Internet Explorer 5.5 (it must be specified as 5.5000 because of Version Vectors), thus feeding IE5.5 and IE6 the special stylesheet.

That completes the technique. This may seem overly complicated just to achieve a fuzzy shadow, but then again, they say that God is in the details. As a plus, the mentioned techniques can be used to achieve all sorts of different effects.

Here, have a cat:

Edited: August 29th, 2007

CSS Drop Shadows

They’re the corkscrew in every graphic designer’s Swiss Army knife. Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design. On the web, adaptability and ease of use dictate trends — and static images with a fixed background effect are not very adaptable.

But what if we had a technique to build flexible CSS drop shadows that can be applied to arbitrary block elements? That can expand as the content of the block changes shape? Compatible with most modern browsers? With better results for standards-compliant browsers? If you’re not sold yet, we can also tell you that it requires minimal markup.

Interested? Well, first off, we wouldn’t want to take credit for something we didn’t invent, but merely improved upon. This particular technique was conceived and demonstrated by Dunstan Orchard, of 1976 design fame (hats off to you, Dunstan). We found it was easy, intuitive, and worked like a charm. However, after closer examination, we saw room for improvement and set to work on it.

Here’s how it works: you need to make a drop shadow image in the image editor of your choice. It should be only the shadow, without a visible border (an easy way to do this is by applying the effect to an empty selection). Make sure your image is big enough to cover the maximum expected size of the block elements that will use it. In practice, we’ve found that 800 x 800 is a respectable enough size. Save it as a GIF, making sure you use the color of the background you’ll apply the effect over. Additionally, save the same shadow with full alpha transparency (no background color) as PNG. This will be used to feed a better shadow to browsers capable of displaying it. These are some sample files: GIF file/PNG file.

We’ll start by giving a shadow to an image and then move on to other block elements. In a moment of ingenuity, we decided to name our class “img-shadow”. Our test subject shall be this cute cat:

And its corresponding markup (one div is the only extra markup we’ll need):

The following illustration shows how the technique works:

First, our previously prepared shadow file will be set as background for the div.

background: url(shadow.gif) no-repeat bottom right;

Then we’ll give the image negative top and left margins to make the “drop” that gives us the shadow. Our shadow is six pixels wide, so that’s our magic value.

margin: -6px 6px 6px -6px;

We float the div to avoid having to specify its size (otherwise it will take up all available horizontal space).

Remember we said that we’d provide better shadows for better browsers? This line will do the trick:

background: url(shadowAlpha.png) no-repeat right bottom !important;

That “!important” bit tells the browser that the declaration is to take precedence over normal declarations for the same element (see the spec). It also happens to be unsupported in all versions of Internet Explorer, which also lack native support for transparent PNG’s. It’s almost too convenient. By specifying controversial declarations twice, we get the desired behavior (IE takes the second one, most other browsers the first one). The end result is that, were the background color to change, browsers that support PNG would maintain a perfectly transparent shadow. Sadly, Explorer’s shadow will stay with its original background color.

But why do this you ask? The reasons are twofold:

• We can: This is a painless, effortless and automatic hack that yields great results in the browsers that support it.
• It may fix itself: If the new version of Internet Explorer (shipping with Longhorn) supports both of these standards, we won’t have to fix a thing to get pixel-perfect, truly transparent shadows in it.

The finished CSS code looks like this:

.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

Differences in margin size account for IE’s box model, and that last padding value gives us a nice frame around the image. Sadly, it is lost in IE 5.5 and 5.0. The drop shadow effect stays, though.

Our shadow will blend seamlessly with its background in standards-compliant browsers. In Explorer, the shadow will clash with the background unless you’ve stuck with the background color you used for your shadow. You can see the results here:

For the next part, we’ll apply the drop shadow effect to a paragraph.

Logic dictates that the same technique should yield similar results when working with a paragraph, which can be treated as another block element. And indeed, with most browsers, it works like a charm. Care to guess which one doesn’t get it right?

While developing this technique, we found that when working with a block element other than an image, in bold defiance of common sense, Explorer decided to clip the left and top parts of the block — the ones that “jump” out of the shadow — regardless of what we tried. Amusingly enough, the only version of Explorer that gets this right is 5.0. No amount of hacks, overflow settings, or gentle suggestions seemed to help (and yes, righteous cursing was tried). We gave up and decided that a different approach was called for.

The method we came up with is partly based on Douglas Bowman’s Sliding Doors methodology, and calls for an extra bit of markup (another div), so our paragraph will look like this:

The rain in Spain …

Instead of giving the paragraph negative top and left margins, we’ll give it positive right and bottom padding. This will expose the shadow (set as background for the outermost div). Then we’ll fake the shadow offset by using a partly transparent GIF as background for the inner div, which will overlap the shadow. Make sure that the visible part of this image is the same color as the background over which you use the drop shadow effect. Name the image “shadow2.gif”. It should be constructed as follows:

Here’s an example GIF file (this image will most likely look as white on white on your browser, so you may want to save it and take a look at it in your image editing program).

This illustration shows what we’re going to do:

The following are the styles needed to accomplish the effect. Notice that the extraneous image and padding are used only by Internet Explorer. Most other browers effectively ignore the inner div, and stick with the method we used for the drop shadow of the image.

.p-shadow {
width: 90%;
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.p-shadow div {
background: none !important;
background: url(shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}

.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}


The same considerations for background color mentioned in the image example apply for paragraphs. Here’s the end result. (Try resizing the text on your browser to see the box change size and watch the shadow adjust.)

The rain in Spain falls mainly on the plain.

Additional notes

In this article, the styles for image and paragraph have been broken up for clarity, but both could be specified in one fell swoop with minor adjustments.

This technique has been tested with Gecko-based browsers, Safari, Opera and IE 5.0+. Apart from the differences noted, no problems were observed. It should work well with most of the stuff out there (no, not Netscape 4.x).

Edited: August 29th, 2007

How to Build a Better Website Without Building a Website

The most important thing to consider, when first thinking about any website, is the user. Like so much marketing, websites are, unfortunately, too often developed ‘inside out’ (company focused) rather than ‘outside in’ (customer focused).

All website users have their own reasons and objectives for visiting a site. No matter how targeted, any website has to communicate with a wide range of individual users.

To be successful, therefore, every site has to give each and every user a thorough but simple presentation of the site’s content so that the site achieves your objectives e.g. registrations, leads, sales.

To do this successfully, users want:

Simple Navigation

Navigation that is clear and consistent.

Probably the worst issue is ‘lost visitors’ – those who are in a maze and don’t know where they are in the site.

The site should always allow users to easily return to the home page and preferably get to any page with one clíck.

Studies have shown that users want to find things fast, and this means that they prefer menus with intuitive ranking, organization and multiple choices to many layers of simplified menus. The menu links should be placed in a consistent position on every page.

Clarity

Users do not appreciate an over-designed site.

A website should be consistent and predictable. For maximum clarity, your site design should be built on a consistent pattern of modular units that all share the same basic layout, graphics etc.

Designing Websites That Meet Their Objectives

Everything above is pretty simple, but how do you ensure that you can achieve it?

The answer is website architecture – an approach to the design and content that brings together not just design and hostíng but all aspects of function, design, technical solutions and, most importantly, usability.

The distinction may seem academic but imagine trying to publish a magazine using just graphic design and printing whilst ignoring content and editing. It just would not work yet that’s what too many people still try to do.

Website Architecture

Defining a website using web architecture requires:

• Site maps
• Flow charts
• Wireframes
• Storyboards
• Templates
• Style guide
• Prototypes

This planning saves you (the client) money. The better the site map, flow chart, wireframe, storyboard, templates, style guide and prototype the more time and money you save because it gives the designer who has to do the graphics and the developer who has to do the programming a blueprint.

We are constantly amazed that people who wouldn’t think about building a house, car, ship or whatever will still build a website without an architectural plan.

The benefits include:

• Meeting business goals
• Improved usability
• Reducing unnecessary features
• Faster delivery

Site Maps

Many people are familiar with site maps on web sites which are generally a cluster of links.

An architectural site map is more of a visual model (blueprint) of the pages of a web site.

The representation helps everyone to understand what the site is about and the links required as well as the different page templates that will be needed.

Flow Charts

A flowchart is another pictorial or visual representation to help visualize the content and find flaws in the process from say merchandise selection to final payment.

It’s a pictorial summary that shows with symbols and words the steps, sequence, and relationship of the various operations involved and how they are linked so that the flow of visitors and information through the site is optimized.

Wireframes

Wireframes take their name from the skeletal wire structures that underlie a sculpture. Without this foundation, there is no support for the fleshing-out that creates the finished piece.

Wireframes are a basic visual guide to suggest the layout and placement of fundamental design elements on any page. A wireframe shows every clíck through possibility on your site. It’s a “text only” model to allow for the development of variations before any expensive graphic design and programming, but one that also helps to maintain design consistency throughout the site.

Creating wireframes allows everyone on the client and developer side to see the site and whether it’s ‘right’ or needs changes without expensive programming. The goal of a wireframe is to ensure your visitors’ needs will be met in the website. If you meet their needs, you will meet your objectives.

To create a wireframe requires dialogue. You and your developers talk, to translate your business successfully into a website. Nobody knows your business better than you and your developers should listen to ensure the resulting wireframe accurately represents your business. You, however, must answer the questíons; questíons such as:

• What does a visitor do at this point?
• Where can a visitor go from here?

and ignore questíons about what your visitor sees at this point. Sounds easy, but!

Storyboards

Storyboards were first used by Walt Disney to produce cartoons. A storyboard is a “comic” produced to help everyone visualize the scenes and find potential problems before they occur. When creating a film, a storyboard provides a visual layout of events as they are to be seen through the camera. In the case of a website, it is the layout and sequence in which the user or viewer sees the content or information.

However, the wireframe provides the outline for your storyboard. Developers and designers don’t need to work in a vacuum – the wireframe guides every design, information architecture, navigation, usability and content consideration. Wireframes define “what is there” while the storyboards define “how it looks”.

Templates and Style Guide

Templates are standard layouts containing basic details of a page type that separates the business (follow the $) logic from the presentation (graphics etc) logic so that there can be maximum flexibility in presentation while disrupting the underlying business infrastructure as little as possible.

Style guides document the design requirements for a site. They define font classes and other design conventions (line spacing, font sizes, underlining, bullet types etc.) to be followed in the Cascading Style Sheets (CSS) used to provide a library of styles that are used in the various page types in a web site.

Prototypes

A prototype is working model that is not yet finished. It demonstrates the major technical, design, and content features of the site.

A prototype does not have the same testing and documentation as the final product, but allows client and developers to make sure, once again, that the final product works in the way that is wanted and meets the business objectives.

Once you have built your virtual site, it’s a lot quicker, easier and cheaper to build the real one.

About The Author
Richard Hill is a director of E-CRM Solutions and has spent many years in senior direct and interactive marketing roles. E-CRM provides EBusiness, ECommerce and Emarketing and ECRM.
http://www.e-crm.co.uk/profile/message170807.html

Edited: August 27th, 2007