In This Issue...

Introduction

Welcome to Design View #7.

I like March. After the meanderings of January and February, everybody seems to hit their stride again in March.

And so it has been at SitePoint where we've welcomed six new contributors to the SitePoint blogging space. If you haven't caught up with them --

1. Stuart Langridge is sharing our CSS/DHTML blog with Simon. Stuart is long renowned for his DOM-centric work on Kryogenix.org and has just completed our forth-coming 'DHTML Utopia' book. There are probably not more than a handful of guys anywhere that know this subject matter better than these two. Keep a close eye on their stuff.

2. Dan Thies has started up a new offering - SitePoint's first search engine marketing blog called Key Words. While not strictly design advice, Dan has much to say about the structure and markup of your front-end code, and how that impacts SEO performance. In short, if you write any HTML, this is likely important stuff for you.

3. And lastly for the more technically-minded among you, our PHP blog is now being shared in-house by our four SitePoint coders - Thomas Rutter, Julian Szemere, Lachlan Donald and Lucas Chan.

That one could get quite snipey and competitive.

Fingers crossed, anyway.

Alex Walker,
Editor
design@sitepoint.com

Creating Creativity

How do you measure creativity?

You can use benchmarking and load testing to judge the efficiency and structure of coding. Usability testing can evaluate the success of information achitecture and interface design. However, when it comes to decisions like color, pattern, gradient and font, it's more difficult to settle on 'carved-in-granite' rules. In fact, many of the most famous designers in history got that way by deliberately breaking what were seen, at the time, as unbreakable design rules.

So if you can't measure raw creativity, how can you learn it? Hugh Macleod from gapingvoid.com has some pearls of wisdom to get you thinking -- 30 in fact.

The four that resonated the most with me were:

• Put the hours in. Doing anything worthwhile takes forever. 90% of what separates successful people and failed people is time, effort and stamina.
• Don't try to stand out from the crowd; avoid crowds altogether. There's no point trying to do the same thing as 250,000 other young hopefuls, waiting for a miracle.
• The best way to get approval is not to need it. This is equally true in art and business.
• The hardest part of being creative is getting used to it. If you have the creative urge, it isn't going to go away. But sometimes it takes a while before you accept the fact.

Hugh is speaking from his perspective as an illustrator/creative director but these tips (not to mention the 26 others) apply equally to web design. Consider printing this out for re-reading on those tough days.

Our other cool recent find is the amazing 'Drawn.ca' -- a multi-poster, blog showcasing illustrators, cartoonists and other assorted doodlers from around the globe.

Drawn.ca only sprang to life in early March but it has already got me hooked. Check it out when you get a chance.

Read the blog entry:

Design Blog: Pixel Perfect by Alex Walker Hung, Drawn and Quoted

DOM Text Shadows (*Experiment)

Everybody loves a neat visual effect. The harder bit is making it easy to implement.

A few weeks ago I stumbled across this page and it got me thinking. While I was quietly impressed with the look of the heading text, the markup is not exactly pretty and there is really no viable way to roll this effect out across a whole site.

Current Markup

<div id="cast">CAST<span class="of">of</span> </div>
<div id="castb">CAST<span class="of">of</span> </div>
<div id="castc">CAST<span class="of">of</span> </div>

<div id="shadows"> SHADOWS </div>
<div id="shadowsb"> SHADOWS </div>
<div id="shadowsc"> SHADOWS </div>

Certainly not breathtakingly elegant.

Of course, there are a plethora of shadow effects available via CSS (or CSS-like entities). In fact, Neil Crosby has done a great job documenting the current state of play on his blog. The problem is consistency. One of the things I liked about the 'Cast of Shadows' effect was that it rendered in the same way across all modern browsers.

The following method is a DOM experiment at this stage. Note: It does have accessibility issues that I haven't been able to squash (yet, anyway). However, it might at least give you some ideas for solving other problems in the future.

Text Shadows using the DOM & CSS

My goal here was to try to get the same visual effect without the nasty markup. I'm going to cheat and show the final result so you know where we're heading.

The core idea is to send a simple H1, and then let the browser build up the shadow -- if it can. Simple non-JavaScript devices will leave the header untouched.

Once the structure is in place, we can use CSS to target, position and color each layer.

The HTML

First, let's hone down the HTML. We can't get any more succinct than:

<h1>..The Shadow Knows!!!</h1>

The JavaScript

I've decided not to get into a blow-by-blow breakdown of the JavaScript in this newsletter and instead talk in broad terms about what the script does. If you're interested though, the source code is very well-commented.

The script will:

1. Create a new function called funkyshadow()
2. Find each instance of a H1 on the page and copy it to our 'working' array for later use.
3. Start a new loop to work through our array of H1s
4. Each time it finds one, it will created two new 'virtual' H1s (called 'outerh1' and 'middleh1')
5. It will then replace the original H1 with 'outerh1'
6. Next it will nest 'middleh1' inside 'outerh1, and, in turn, nest our original H1 inside that.
7. Finally the outer H1 needs to be made 'shadow colored' -- it's dark by default.

If everything has gone to plan, the browser should have taken our plain, old H1, and reconstructed it to appear like this:

Of course, if you wanted to target H2s, H3s or even P tags, you would only need to make minor changes to this script.

The CSS

Now we have the right structure in place, let's have a look at the CSS. Although we don't have ids or classes to use, we can still target each H1 separately by using 'descendant selector' notation. Although all three headings match the simple h1{}rule, the more precise h1 h1{} and even more precise h1 h1 h1{} will always overrule the simpler rule in a showdown.

We're going to position the outermost H1 relatively, and then position the two inner H1s as 'absolute', allowing us to offset them against the outer H1. Here's the code.

h1{
color:#990000;
font:bold 60px/50px Georgia,Sans-Serif;
letter-spacing:1.2px;
position:relative;
padding:0;
margin:0;
width:480px;
}

h1 h1{
position:absolute;
top:-2px;
left:1px;
color: #F1F1D5;
}

h1 h1 h1{
position:absolute;
top:-1px;
left:1px;
color:#990000;
}

So, there you have it. Adjusting the top and left will give you complete control over the positioning of the shadow. Fonts and colors choices are no different to standard CSS selection criteria. I've used three layers here, but there's nothing stopping you using more or less.

The advantages are mainly consistency and flexibility. Any device that reads HTML and understands JavaScript can render the effect. Non-JS devices are never aware it even exists.

The key disadvantage is an accessibility issue. Most screen readers rely on Internet Explorer's rendering engine to interpret what they will read back to the user. Since IE will render this effect before Jaws reads it out, we have the problem of Jaws reading out two extra copies of our heading. I imagine this could get irritating quite quickly.

Hey, I never said it was perfect ;)

As I said, it's an experiment, but if you have a workaround in mind, I'd love to hear it.

Meanwhile, Stuart has been taking us on a tour of some of Stu Nicholls' more mind-boggling CSS experiments. Although there are some comments on 'inappropriate use of CSS', I tend to think 'out-there' stuff like this is valuable on two levels.

Firstly, it can be a great education aid. Taking a normal behaviour (for instance, ':hover') out of its conventional setting is often a great way of getting a clearer understanding of exactly how it works.

Secondly, it isn't always possible to envisage the final commercial application of a technique until after the pure R&D lab work has been completed. Often it's a case of "Y'know what that thing you invented would be really great for?!"

You never know when the next failed hearing-aid experiment ends up giving you the telephone.

Read the blog entry:

Design Blog: Stylish Scripting by Stuart Langridge The power of pure CSS (16 comments)

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Help Your Friends Out

• Is a Good Looking Design Important for Sales?
  iAdvertising Sales & Affiliate Programs
  
  
• Choosing Color
  Just Starting Your Design
  
  
• How do you define 'creativity'?
  Graphics and Multimedia
  
  
• Why Consistency is Critical
  Accessibility and Usability
  
  

Design Blog:
Pixel Perfect

• The Zen of the Eyeball
  6 comments
  
  
• Simple Clearing of Floats
  21 comments
  
  
• Designer's Wishlist:Touch Senstive LCD Display
  8 comments
  
  
• When is a list not a list?
  9 comments
  
  

Search Engine Marketing Blog:
Key Words

• Is This Microphone On?
  19 comments
  
  

DHTML & CSS Blog:
Stylish Scripting

• Customising GMail with GreaseMonkey
  26 comments
  
  
• JavaScript and domain specific languages
  4 comments
  
  
• The power of pure CSS
  16 comments