Wednesday, March 26, 2008

Understanding Web Design

We get better design when we understand our medium. Yet even at this late cultural hour, many people don’t understand web design. Among them can be found some of our most distinguished business and cultural leaders, including a few who possess a profound grasp of design—except as it relates to the web.
Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.
If we want better sites, better work, and better-informed clients, the need to educate begins with us.
Preferring real estate to architecture
It’s hard to understand web design when you don’t understand the web. And it’s hard to understand the web when those who are paid to explain it either don’t get it themselves, or are obliged for commercial reasons to suppress some of what they know, emphasizing the Barnumesque over the brilliant.
The news media too often gets it wrong. Too much internet journalism follows the money; too little covers art and ideas. Driven by editors pressured by publishers worried about vanishing advertisers, even journalists who understand the web spend most of their time writing about deals and quoting dealmakers. Many do this even when the statement they’re quoting is patently self-serving and ludicrous—like Zuckerberg’s Law.
It’s not that Zuckerberg’s not news; and it’s not that business isn’t some journalists’ beat. But focusing on business to the exclusion of all else is like reporting on real estate deals while ignoring architecture.
And one tires of the news narrative’s one-dimensionalism. In 1994, the web was weird and wild, they told us. In ‘99 it was a kingmaker; in ‘01, a bust. In ‘02, news folk discovered blogs; in ‘04, perspiring guest bloggers on CNN explained how citizen journalists were reinventing news and democracy and would determine who won that year’s presidential election. I forget how that one turned out.
When absurd predictions die ridiculous deaths, nobody resigns from the newsroom, they just throw a new line into the water—like marketers replacing a slogan that tanked. After decades of news commoditization, what’s amazing is how many good reporters there still are, and how hard many try to lay accurate information before the public. Sometimes you can almost hear it beneath the roar of the grotesque and the exceptional.
The sustainable circle of self-regard
News media are not the only ones getting it wrong. Professional associations get it wrong every day, and commemorate their wrongness with an annual festival. Each year, advertising and design magazines and professional organizations hold contests for “new media design” judged by the winners of last year’s competitions. That they call it “new media design” tells them nothing and you and me everything.
Although there are exceptions, for the most part the creators of winning entries see the web as a vehicle for advertising and marketing campaigns in which the user passively experiences Flash and video content. For the active user, there is gaming—but what you and I think of as active web use is limited to clicking a “Digg this page” button.
The winning sites look fabulous as screen shots in glossy design annuals. When the winners become judges, they reward work like their own. Thus sites that behave like TV and look good between covers continue to be created, and a generation of clients and art directors thinks that stuff is the cream of web design.
Design critics get it wrong, too
People who are smart about print can be less bright about the web. Their critical faculties, honed to perfection during the Kerning Wars, smash to bits against the barricades of our profession.
The less sophisticated lament on our behalf that we are stuck with ugly fonts. They wonder aloud how we can enjoy working in a medium that offers us less than absolute control over every atom of the visual experience. What they are secretly asking is whether or not we are real designers. (They suspect that we are not.) But these are the juniors, the design students and future critics. Their opinions are chiefly of interest to their professors, and one prays they have good ones.
More sophisticated critics understand that the web is not print and that limitations are part of every design discipline. Yet even these eggheads will sometimes succumb to fallacious comparatives. (I’ve done it myself, although long ago and strictly for giggles.) Where are the masterpieces of web design, these critics cry. That Google Maps might be as representative of our age as the Mona Lisa was of Leonardo’s—and as brilliant, in its way—satisfies many of us as an answer, but might not satisfy the design critic in search of a direct parallel to, oh, I don’t know, let’s say Milton Glaser’s iconic Bob Dylan poster.
Typography, architecture, and web design
The trouble is, web design, although it employs elements of graphic design and illustration, does not map to them. If one must compare the web to other media, typography would be a better choice. For a web design, like a typeface, is an environment for someone else’s expression. Stick around and I’ll tell you which site design is like Helvetica.
Architecture (the kind that uses steel and glass and stone) is also an apt comparison—or at least, more apt than poster design. The architect creates planes and grids that facilitate the dynamic behavior of people. Having designed, the architect relinquishes control. Over time, the people who use the building bring out and add to the meaning of the architect’s design.
Of course, all comparisons are gnarly by nature. What is the “London Calling” of television? Who is the Jane Austen of automotive design? Madame Butterfly is not less beautiful for having no car chase sequence, peanut butter no less tasty because it cannot dance.
So what is web design?
Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?
Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
Let’s repeat that, with emphasis:
Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
She walks in beauty
Great web designs are like great typefaces: some, like Rosewood, impose a personality on whatever content is applied to them. Others, like Helvetica, fade into the background (or try to), magically supporting whatever tone the content provides. (We can argue tomorrow whether Helvetica is really as neutral as water.)
Which web design is like that? For one, Douglas Bowman’s white “Minima” layout for Blogger, used by literally millions of writers—and it feels like it was designed for each of them individually. That is great design.
Great web designs are like great buildings. All office buildings, however distinctive, have lobbies and bathrooms and staircases. Websites, too, share commonalities.
Although a great site design is completely individual, it is also a great deal like other site designs that perform similar functions. The same is true of great magazine and newspaper layouts, which differ from banal magazine and newspaper layouts in a hundred subtle details. Few celebrate great magazine layouts, yet millions consciously or unconsciously appreciate them, and nobody laments that they are not posters.
The inexperienced or insufficiently thoughtful designer complains that too many websites use grids, too many sites use columns, too many sites are “boxy.” Efforts to avoid boxiness have been around since 1995; while occasionally successful, they have most often produced aesthetically wretched and needlessly unusable designs.
The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging.
If she achieves all that and sweats the details, her work will be beautiful. If not everyone appreciates this beauty—if not everyone understands web design—then let us not cry for web design, but for those who cannot see

Findability, Orphan of the Web Design Industry

Findability is to Search Engine Optimization (SEO) as “web standards” is to “table layouts.” In a web whose vastness exceeds comprehension, sites with findable content win. The good news is that everyone on your team can help make your site findable. Get a taste for this essential discipline from Aarron Walter, author of Building Findable.

Websites: Web Standards, SEO, and Beyond.

Labels: , ,

Silverlight XAML

Overview
Extensible Application Markup Language (XAML) is an XML based declarative language that is used in the Windows Presentation Foundation (WPF) and Silverlight to define the user interface and animations. Silverlight implements a subset of features that are available in the .NET Framework 3.0. Thus, certain features used with WPF, such as markup extensions using the curly braces ({ and }), are not available in Silverlight.
The goal of this document is to highlight the main differences from other XML formats you may be familiar with and the syntax you will need to understand to read and create XAML files.
Syntax
Namespaces
The following table lists the namespaces used by Silverlight XAML.
Namespace
Description
http://schemas.microsoft.com/winfx/2006/xaml
The general XAML namespace, usually prefixed with "x".
http://schemas.microsoft.com/client/2007
The Silverlight specific namespace. Note that this is different from WPF even though they share some of the same elements.
Silverlight 1.0 requires that the root node of the document be a element. The following example shows a minimal XAML document.
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">



Property Element Syntax
Standard XML lets you set values of elements using attributes or by using the content of an element. Property element syntax is a way to let you specify complex values for object properties. For example, setting a gradient with multiple color stops as a plain string would require specialized formatting that would not easily map to the underlying gradient object. It would also be extremely difficult to extend this format in the future while maintaining backwards compatibility. Property element syntax gives us an easy way to read values and an extensible mechanism that also maps to the actual objects used when manipulating the object in code.
The basic syntax is demonstrated below.


...



...



Thus our gradient example would look similar to the following. Note the use of property element syntax for both Rectangle.Fill and LinearGradientBrush.GradientStops. Rectangle.Fill contains a LinearGradientBrush object and its GradientStops property contains a collection of GradientStop objects.





















While the resulting code required tends to be verbose, it is much more readable for humans than attempting to shrink all of the information above into a simple string. It also leaves the content of the element free to hold the actual visual children that it may contain.
Attached Properties
Attached properties are a way to specify properties on any element, even if element does not natively have that property. Most often you'll see this used to set properties that are related to the parent of the element.






...







...



For example, setting Top and Left properties are actually dependent on the container in which the element is placed. In the following example, Top and Left are a feature of the parent where the resides.
If the was placed within a different type of layout container, such as a (not supported in Silverlight 1.0), the Top and Left properties would have no meaning as the placement of the object would be based on the Column and Row of the parent grid.

Height="50" Width="50" Fill="Maroon" />

Height="50" Width="50" Fill="Maroon" />


Another example is often seen with animations. A needs to know the target object and property of an . Note the use of parentheses to target an attached property.

To="300" Duration="0:0:1"/>

To="300" Duration="0:0:1"/>


Events
Events are defined in XAML using attributes in a similar fashion to HTML. The following example attaches the MyCanvas_Loaded() event handler function to the Loaded event of the element.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">

It is important to note that in Silverlight 1.0 the event handler functions must be in the JavaScript global scope. As this will make it impossible to create object oriented applications, it is usually better to hook up event handlers in code to achieve better encapsulation.
Triggers are also a way to start an animation purely in XAML without the need for event handler code. See Animation Basics for details including limitations.

Labels: , ,

Silverlight : Overview

Overview
Silverlight is a cross-browser, cross-platform browser plug-in to create Rich Internet Applications with support for vector and bitmap graphics, animation, and media playback. Silverlight applications consist of two main parts, the UI declaration using XAML and the program code. Silverlight is a subset of the Windows Presentation Foundation available in the .NET Framework 3.0.
Programming Prerequisites
Silverlight 1.0
Working knowledge of JavaScript
XML basics
Silverlight 2.0
Working knowledge of .NET and a managed language of choice
XML basics
Supported Client Platforms
Windows 2003/XP/Vista
Internet Explorer 6/7
Firefox 1.5/2
Windows 2000. Silverlight 2.0 only.
Internet Explorer 6
Firefox 1.5/2
Macintosh OS X 10.4.8+. Note! Silverlight 2.0 only runs on Intel processors.
Firefox 1.5/2
Safari
Linux, Project Moonlight (announced)
Firefox
Konqueror, WebKit, Opera (planned)
Mobile support has also been announced, but currently Microsoft hasn't released any specifics.
Supported Server Platforms
Supported web servers must be able to deliver .html, .js, .xaml, .zip and .dll (Silverlight 2.0) files along with any desired media assets. This includes Apache, Microsoft IIS, and other web servers.
Silverlight 1.0 and Silverlight 2.0
Silverlight 1.0 and the next release, currently numbered 2.0, share similarities in terms of using XAML as the declarative markup language, but differ vastly in their programming model.
Silverlight 1.0
Uses the browser's JavaScript engine for all code execution.
Is essentially a rendering and media playback engine.
Silverlight 2.0
Programmed using managed code running on the .NET managed Common Language Runtime (CLR).
Many languages to choose from: Ruby, Python, C#, Visual Basic, JavaScript, and more.
Client application level performance.
Expanded feature set.
Design & Development Tools
The minimum requirement to develop Silverlight 1.0 applications is a text editor. Silverlight 2.0 runs managed code which must first be compiled. Free .NET compilers are available in the .NET Framework SDK. However, there are many tools for both designers and developers available on the Windows platform.
Microsoft Silverlight 1.0 SDK
Microsoft Expression Suite
Microsoft Visual Studio
XamlPad, which is part of the .NET 3.0 Framework SDK, and similar tools
Adobe Illustrator to XAML export plug-in. This plug-in can create XAML for both the Windows Presentation Foundation and Silverlight.
Silverlight 1.0 and Case-Sensitivity
Please note that while XAML is case-sensitive, JavaScript used to script Silverlight 1.0 is not. This means you will have to make the decision whether to use JavaScript style camel-casing on method and property names (object.theMethod) or .NET style Pascal-casing (object.TheMethod). If you intend to port your Silverlight 1.0 application to 2.0, you may wish to use Pascal-casing to remove one extra step.
Our samples use Pascal-casing as this is the format used in the Silverlight SDK documentation method signatures (but not examples!) and this is what you'll see in Silverlight 2.0.
Further reading
Related information on the web is listed below.
Silverlight on Microsoft.com
Microsoft Expression Suite
Silverlight Reference on the Microsoft Developer Network
Moonlight, the Silverlight implementation for Linux
How to create Silverlight 2.0 Applications with Notepad
Sessions from MIX07

Tuesday, March 25, 2008

How to structure large CSS files

Many methods exist to structure your CSS. This article tries to describe the method I use. I call it the “Tree method”, since it structures the CSS like… that’s right, a tree structure. I want to stress that it isn’t my invention; I just describe and give reasons for its rules.

Everyone that has built a bigger site has had to deal with the mess CSS so easily become. There are ids and classes all over the place, and to find where a certain class is defined you usually need to use some search feature in your editor. Matching the other way, from the CSS to the HTML is even harder; you don’t even know what file a certain class is defined in. It’s a mess.

The Tree method tries to structure the CSS into logical blocks; blocks taken from the HTML. It also aims to be easy to understand for anyone. No secret codes or difficult ordering schemes.

Order your selectors like the HTML
Always use the “full path” to elements
Indent your code cleverly
Each declaration on its own line
… in alphabetic order
Order your selectors like the HTML
One of the problems of mapping between the HTML and the CSS is that they usually differ in structure. The HTML is (if you’re lucky) structured like a convenient semantical tree while the CSS often is ordered by something random like fonts, colors, and positioning.

To make moving between the two worlds easier we want to make them as similar as possible. Is the HTML divided into header, content, and footer? Then make sure that’s the three major parts of your CSS as well. Have you put the navigation above your header in the HTML? Then order it like that in the CSS as well! Any other structure makes moving from the HTML to the CSS much harder. You might be able to find all font manipulations in one part of the CSS, but only if you know that this particular developer uses that exact scheme. No, let’s keep it simple.

Here’s a simple example where we just order the selectors:

#header { ... }
h1 { ... }
h2 { ... }
#content { ... }
p { ... }
em { ... }
strong { ... }When grouping several styles into one definition I just put the group above both of their specific styles. #header, #content comes before both #header and #content.

Always use the “full path” to elements
The above is very easy to get an overview of, but the experienced developer knows that very few sites are that easy. Something you often want is a way to define different styles to different parts of a page. Let’s say you want green links in the navigation, but want to keep them blue everywhere else.

For this we use sub selectors. The selector #navigation a lets you give all links inside your navigation another look. But let’s take that further. Why not always write the full path to your elements? Why not use #navigation ul li a instead? Doing this gives a developer looking at your code a lot of information about how the HTML and CSS belongs together.

Lets add that to the previous example:

#header { ... }
#header h1 { ... }
#header h2 { ... }
#content { ... }
#content p { ... }
#content p em { ... }
#content p strong { ... }This does change the meaning from before. Before we selected all the level two headers; now we only select headers inside of the header division. Extending each selector with a “path” has made our CSS rules more specific, and specific means more control for you.

This also makes for fewer new ids and classes; just specify the path to an element instead of adding a class for it. Don’t add a new class or id unless you really need to.

We still have the issue of “common styles”; styles that we want to apply to elements in different parts of the tree. Since they should be applied to all elements they don’t fit in the tree structure we’ve built. Instead we make a section in the beginning of the file (or a separate) with just “general styles”. Don’t add rules to this section if you only use them once in the document, you want as much of your code to be in “the tree” as possible.

Indent your code cleverly
To make the code even easier to understand I always add indentation (for those that don’t know that word: it means spacing in front of blocks of text). Indenting makes the tree structure we’re trying to build even clearer, you can easily find the major sections and dig down from there.

Lets add indention to you our example too:

#header { ... }
#header h1 { ... }
#header h2 { ... }
#content { ... }
#content p { ... }
#content p em { ... }
#content p strong { ... }Don’t take indentation too far. If you’re styling tables and using thead in the markup, but don’t change the style of it, you can skip that indentation level. Double indention just for the sake of it is just a waste of space.

Special case: Templating
We also need to deal with rules that only appear on some of our pages. Perhaps we want the home page to look somewhat different than the sub pages? We solve this by giving an id or class to the body element. Doing this lets me specify styles for just one specific page, and setting the id or class on body makes me able to change anything in the document based on that.

These page specific styles need a place in the tree too. Here I tend to break from the above scheme and put them together with the style they change. So body#page_home #header h1 is one step below #header h1 in the tree. That makes it easier to see all styles for a certain element, instead of scrolling back and fourth (like you need to do if you don’t remember your general styles). Keep your templates together with the style they change instead of completely separate.

If you want bigger changes, perhaps a totally different look on some pages, there’s no reason to group things according to the scheme above. Move them to a separate file instead.

Each declaration on its own line
Indentation combined with full paths makes some lines rather long. This means that putting all declarations on one line will force you to scroll horizontally, something we already avoid on our sites. The simplest way to prevent horizontal scrolling is to use one declaration per line, so that’s what the tree method uses.

… in alphabetic order
Grouping of properties is another issue. I’ve seen grouping schemes based on all sorts of things; from splitting things into “positioning”, colors, and fonts, to people adding their properties completely randomly. I’ve chosen to just order them alphabetically. It’s one of the few methods that bring some order while still being simple enough. I’ve seen total beginners do this by themselves; something I believe is a good argument for it. It’s intuitive.

A simple example to illustrate:

#content {
color: Blue;
font: 3.4em Arial, sans-serif;
margin: 0.5em;
}One complaint I’ve heard on this method is that it splits up things that belong together. People tend to keep position: absolute and left: 0 together, just to name one such pairing. It annoyed me at first too, but declaration blocks rarely contain more than 10 declarations, and the alphabetic order still makes them easy to find. Also, why handle position different than float and margin?



That’s it! By following a few simple rules you can get a CSS-file that’s easier to overview, a file that you proudly can give away to the next developer. I can praise its existence all day, but you’re the judge of whether it works or not. Why not give it a try in your next project?

Labels: ,

Cross browser CSS for your site

This article will go through some useful cross-browser CSS techniques I use to get my sites to look the same in several modern browsers. It’s fairly easy to send out different versions of your site to different browsers. This should be avoided though since it will end up with you having to maintain the site as if it was in fact several. That defeats the whole purpose with standards, why are they even needed if you are adapting to the browsers instead? My opinion is that good cross-browser coding is to find the set of standards that are supported and then use them.
Validate your site
Validation is a much debated area and many Level 2 bosses doubt that this procedure really helps. It does help though. It ensures that you didn’t do any simple spelling errors, things that could be incredibly hard to find manually. A validator also checks for nesting errors (did you put a
inside of an anchor?) and other strange things like your character encoding. Information about each of the errors is available as links when they appear, just click on one and you’re on your way to learn something new.
Validation is the simplest of my tricks to check. There are validators available for both (X)HTML and CSS. Use them! Any errors that show up on those lists could be a potential cross-browser breaker so if you decide to ignore any of them you should be really sure about what you are doing. There are reasons why each one of all of the errors on the validation page show up, so validate, fix, validate, fix, validate.
Stay in standards mode
The next trick is not as obvious. Modern browsers have two rendering modes they use to display websites with: Standards mode and Quirks mode. Standards mode is a rendering mode that is made to work according to the W3C specifications as closely as possible and Quirks mode is a bug ridden mode made for older sites. Why have a mode with bugs you ask? It’s a way for browser makers to keep their users happy. When you do big changes to your rendering engine a lot of old sites relying on browser bugs will break. Some might think that this is a good thing, why should sites still work when they are poorly coded? If you think like that you have forgot about who the web is for. It’s not a place for experts only, it’s made for regular users, that is, anyone with a browser. Those people need to see a working site if that’s possible.
So a new browser is released with a more standards compliant rendering mode and pages start to break. This is a bad thing for users so browser makers decided to first identify pages that tried to follow the standards, and if they did, switch to the new and improved rendering mode. You will probably see why I recommend standards mode now. All browsers are trying to render things as similar to the specs as possible when in standards mode, while in quirks mode they keep all their old bugs just to help regular users.
So how do the browsers identify who’s trying to follow standards and who’s not? They use the doctype. If you’re not familiar with doctypes, don’t worry, they are easy to learn. A doctype is a tag on first line of your site file telling the browser what markup language you will be using. There are basically two doctypes you should select among:
HTML 4.01 Strict (what I recommend):

XHTML 1.0 Strict (without on the line before)

Using any of these make sure the browser switches to standards mode and your design not fail because of that. Using a strict doctype means that you will do your best to separate structure from design and the validator will give you errors in those areas. It’s very useful. (Worth a small note is that the XHTML Transitional doctype also triggers standards mode, but while using transitional you don’t get as many good validation checks so don’t use that one anyways.)
There is one last catch one needs to talk about when dealing with doctypes and standards mode - the doctype needs to be the first tag in the document. If you put any HTML comments or strange characters before it IE will go crazy and switch to quirks mode. This has cause many developers countless hours of trying to fix things. Just don’t do it!
Remove default styling of elements
Another cause of many web developers screaming in the night is the default CSS that is applied to elements. If you don’t use any CSS at all on your page elements will still have a certain look. Headers will be larger than text paragraphs and blockquotes will have padding. Sizes of text is something that is pretty similar across browsers but something that’s not is padding and margins. Let me give you an example: With no styling an "ul" gets a padding in Firefox but a margin in IE. Solution? Set either the margin or padding to zero and set the other one to the indentation you want. You need to somehow remove the default browset styles.
These kinds of problems take up a lot of development time if not handled nicely. “Do definition lists in Opera have padding or margin?”. “What about second level headers in IE 6?”. Two schools of thought have evolved to handling this. The first one tells you to start by resetting all margins to their defaults at the top of you CSS file. This can easily be done by typing in * { margin: 0; padding: 0; }, * being a universal selector that applies the same rules to all elements.
Problem solved right? That’s where the second school of thought comes in. They argue that too many default margins are reset. Why should we mess with users form fields, rendering them hard to use unless they are set to good values again? Instead you could just reset those elements that have differences, and leave the rest untouched. This is quite a lot of work to get right so Faruk Ateş built a “starting css” template that you can easily include in your head. Personally I prefer the *-method, but try both and decide for yourself.
Browser bugs
This is the area where CSS gets hard. Even though browser makers work their asses off to follow standards they sometimes don’t reach their goals. This leaves us webmasters with bugs that when fixed triggers new bugs, either in the same or another browser. It can easily get real dirty.
One of the worst browsers (that is widely in use) is Microsoft’s Internet Explorer, version 6. Some claim they have about 80% of the browser market so it’s not a browser you can just ignore. IE was a good browser when it was first released but by today’s standards it’s certainly not. No other browser caused me more pain while building the design of this page. Its shortcomings get painfully clear when it comes to rendering complex CSS layouts.
How do you handle these bugs then? The easiest (and fastest) way is not solving it yourself but reading up on someone else’s solution. “Holly ‘n John” have gathered the most frequent bugs on their page Explorer Exposed!. They give you examples of how to detect the bug, how it works and why (sometimes) and most importantly how to solve it. Sometimes the solution is just setting position: relative; or display: inline; on some element and sometimes you have to resort to strange code. The point here is that if your bug is on that page; don’t waste time trying to figure it out yourself. Learn that list by heart.
So what do you do if your bug isn’t on the list? You start by googling for a solution of course. Googling takes a few minutes compared to the hour you probably need to hunt it down. Don’t underestimate this step.
If you don’t find it somewhere you need to hunt it down yourself. Do this by making a copy of your page and then removing as much code as you can while keeping the bug. Then find out exactly what line (or lines) of code that causes it and finally try to find another way of doing what triggers it. This is much better than just throwing in hacks, you keep your code maintainable and you learn a lot more useful stuff than if you were throwing in nonsense code from the beginning.
If you for some reason do not manage to solve the bug with the above technique you either rethink what you are doing (not likely) or you go get your arsenal of hacks. Make sure the hacks are valid code. The one I use for IE when nothing else works is the “* html” hack. You use it but writing like this: * html #element { code; }. That selector selects all tags that have the child html that have the child #element. But “html” is the topmost element in the hierarchy so nothing is selected, unless IE can choose of course. The code gets applied in IE only. Note that it is perfectly valid CSS, it just doesn’t select anything. Remember: hacks are your last resort when nothing else works.

I hope you found something useful in this article that you can use when you get cross-browser CSS problems. I have now told you what steps I use, did I miss something? Do you do something differently?

Labels: , , , , ,

Monday, March 24, 2008

Microsite Means

A microsite, also known as a minisite or weblet, is an Internet web design term referring to an individual web page or cluster of pages which are meant to function as an auxiliary supplement to a primary website. The microsite's main landing page most likely has its own URL.
They are typically used to add a specialized group of information either editorial or commercial. Such sites may be linked in to a main site or not or taken completely off a site's server when the site is used for a temporary purpose. The main distinction of a microsite versus its parent site is its purpose and specific cohesiveness as compared to the microsite's broader overall parent website.
Microsites used for editorial purposes may be a page or group of pages that, for example, might contain information about a holiday, an event or similar item which gives more detailed information than a site's general content area may provide. A community organization may have its main site with all of the organization's basic information, but creates a separate, temporary microsite to inform about a particular activity, event or similar.
Often, microsites will be used for editorial purposes by a commercial business to add editorial value. For example, a retailer of party goods may create a microsite with editorial content about the history of Halloween or some other holiday or event. The commercial purpose of such editorial microsites, (beyond driving product sales), may include adding value to the site's visitors for branding purposes as well as providing editorial content and keywords allowing for greater chances of search engine inclusion.
Microsites may be used for purely commercial purposes to create in-depth information about a particular product or service or as editorial support towards a specific product, such as describing a new technology. A car manufacturer, for example, may present a new hybrid vehicle and support the sales presentation with a microsite specific to explaining hybrid technology.
With the prevalence of keyword contextual advertising, (more commonly referred to as Pay per click or PPC), microsites may be created specifically to carry such contextual advertising. Or along a similar tactic, they're created in order to specifically carry topic-specific keyword-rich content with the goal of having search engines rank them highly when search engine users seek such content topics.
See also minisite.

12 Steps to Creating a Professional Web Design

Before we share some of the necessary steps used to create a professional web design and website, the following question must be addressed: What constitutes a “professional web design”? More often than not, a web designer or web design company claims to offer professional web design services for their clients. However, should they be promoting “web design services” rather than “professional web design services”? When measuring the professionalism of a web design and website, one must take into consideration a number of factors/steps:
Multi-stage web design process
Project collaboration tools (if project has more than one person involved)
High-quality design
Attention to detail
Current web design technology (CSS)
Well written, interesting, grammatically-correct content
Usability
XHTML and CSS validation (clean code)
Standards-compliant
Optimization
SEO (Search Engine Optimization) friendly
Abuse of Flash, Javascript, and sound effects
To put it simply, what separates professional web design from web design is whether or not a designer or web design company takes into consideration the above items when designing and building a website. Other than paying for a respected companies name and reputation, the items listed above are why professional web design services tend to cost more than regular web design services - you’re getting a lot more than a website - you’re getting the total package of web design professionalism that will surely shine through once the website is completed and released to the public.
The good news is, you don’t need to hire a professional web design company or professional web designer if you want a professional web design and website. Although there is a great deal of work involved, if you’d like to attempt to do the heavy lifting on your own, then the following professional web design tips will help you create a professional web design and website.
Note: You might be wondering why a professional web design company would give away their process and professional web design “checklist” for free. The answer is quite simple: there is only so much time in the day, and unfortunately we can’t professionally design every website in the world. The more high-quality, professional websites there are in cyberspace, the happier we as professional web designers and lovers of websites will be. To be blunt, there is just way too much junk out there. Lets get started.
Step 1: Multi-stage web design process
We’ve already written an extensive article on the basics of a professional web design process, so we’re just going to list some of the article’s key points for the sake of avoiding redundancy.
Stage 1: Conceptualization and planning (flowcharts)
When designing a website, one should not begin the process inside of a text editor (BBedit) or website builder application (Dreamweaver, GoLive, etc). Instead, the process should begin on a piece of paper or within flowchart software. According to Wikipedia, a flowchart is:
a schematic representation of an algorithm or a process.
In layman’s terms, a flowchart provides a visual chart illustrating the structure of your website. How many main navigational items will your website contain? What will these items be called? Will there be any pages contained within the main pages? What will they be called? By planning out your website using a flowchart, you get a head start on:
Information organization
Usability
Determining the volume of content required
Stage 2: Modeling (wireframes)
In the modeling stage, static “wireframe” mockups are created for each unique web page. To create wireframes, one may use either:
paper and pencil
mockup software such as Adobe Photoshop or our personal choice, OmniGraffle Professional
These wireframes contain a bare-bones skeleton which illustrate the layout of a particular web page. Where will the logo go? Where will the content be located? Will there be breadcrumbs? Will you have a login box? Each of these questions (and many more) are answered in the modeling stage. A few things one should take into consideration when creating wireframes:
be sure to include all important elements that will be used (logo, navigation, content placement, images/video placement, login box, search, breadcrumbs, etc)
reference the flowchart which you created in Stage 1
don’t use graphics - wireframes are meant to be bare-bones: boxes/circles/ovals which illustrate the placement of objects
only use text to label the elements, don’t use body text (thats for the third stage)
focus on clean, well-organized, user-friendly layout; avoid cluttered layouts
Stage 3: Execution
The third stage in our professional web design process includes:
Creating the graphical user interface (GUI), also known as the design
Creating the content
Converting the web designs from images into code (markup) which web browsers use to present your website on the Internet
In the final stage, reference both the flowcharts created in Stage 1 and the wireframe mockups created in Stage 2 to create the final page layouts and designs. The design should be finalized in Photoshop or whatever image editing software you choose to use because it is a pain to make changes to the design once it has been converted into markup (code).
Trust us, process makes perfect
Following a well-structured web design process is by far one of the most importance steps that many web designers choose to neglect. By following a web design process such as the one we’ve just described, you increase the likelihood that your website will be well-organized, easily navigable, and user-friendly. If you’re going to skip any of the items in our professional web design checklist, make sure that the web design process is not one of them.
Step 2: Project collaboration tools
Note: If you are the only one working on your project, then you can skip this step. Project collaboration tools are only recommended for projects which have two or more people involved.
Communication is one of the most important elements in a project. When multiple people are building a website, there usually are quite a few e-mails sent back and forth between one another. The more e-mails exchanged, the longer it can take to find a certain e-mail and the easier it can be to misplace important bits of information. This was one of the biggest problems that our professional web design company faced when we first began - there wasn’t an easy way to organize the e-mails, attachments, milestones, etc.
Thankfully, after a little bit of research, we discovered a project collaboration tool called Basecamp. Taken directly from the Basecamp website:
Projects don’t fail from a lack of charts, graphs, stats, or reports, they fail from a lack of clear communication. Basecamp solves this problem by providing tools tailored to improve the communication between people working together on a project.
Basecamp (and project collaboration tools like it) allows multiple users to access a website which stores all of the messages, milestones, file uploads, to-do lists, time it takes to complete parts of the project, etc. that are associated with a project. No more sending e-mails. Everything is securely stored on the Basecamp servers. The only e-mails you will ever receive are notifications whenever something is contributed or changed within a project.
Basecamp has packages available that can be tailored to suit your needs. If you only need to use Basecamp for one project at a time, then you can signup for free. Unfortunately with the free version, there are no file uploads allowed. However, for a measly $12/month, you can control up to 3 projects at once, have 250 megabytes of file upload space, have unlimited people and clients, have a real-time chat that can easily be integrated into Basecamp, and much more.
When it comes to project collaboration and communication, nothing beats a web application like Basecamp. If you’re serious about your project and want to have the best communication possible, then you must try Basecamp. A project collaboration tool such as Basecamp is especially useful for a professional web design company which handles a number of projects and clients at any given time. For project collaboration, there is simply no better way to communicate.
Plug over.
Step 3: High-quality design
Who and what determines a “high-quality design”? There isn’t one answer. Often times something that is appealing to one person may be extremely unappealing to another. Despite this fact, there are several things that a high-quality design should have:
Balance. Balance refers to the equal distribution of the heavy and the light elements on a single page.
Unity. Unity keeps all of the similar elements in the website alike and those that are diverse further apart; everything should be pulled into one integrated whole.
Emphasis. Emphasis involves the main points where the eye is drawn into the design; also known as “focal points”.
Contrast. Not just color contrast, but also contrasting shapes, sizes, textures, and even typography.
Rhythm. Also known as repetition, rhythm brings internal consistency into your web design.
Since this is a broad topic and cannot be fully covered in this article, you can read more about the five basic elements of web design.
In addition to these five basic elements of web design, information overload is often times one of the biggest killers of a website design. Designers sometimes forget the saying “less is more” and somehow seem to believe that the more information that is stuffed onto one page, the better it will be. Don’t become a victim of information overload. Keep your layout as clean as possible. Give different topics their own dedicated web pages. One of the biggest causes for information overload is not successfully planning out your website layout through the use of flowcharts and wireframes, discussed above in Step 1: Multi-stage web design process. Remember: white space is not necessarily a bad thing. As a matter of fact, white space is your friend, especially when creating a professional web design. Successful professional web designers learn how to use white, negative space to their advantage, and make it a key element of the design.
Step 4: Attention to detail
When professionally designing a website, every little detail is thought out and planned. Should there be a line above the headers, and if so, why? If you use rounded corners for your main body, should you be consistent and use rounded corners for everything else? Does your logo look better with a reflection underneath? The only way to answer any of these questions is to experiment. Sometimes the best results come from accidental experimentation. Don’t always be happy with the first design. Work to improve upon the design and go through a few revisions, each time asking yourself “What can be done to make the design look better?”, be more consistent, and most importantly, give your website a stronger identity and image.
When we say “detail”, we’re not just talking about graphic design elements. No, graphic design is just the tip of the iceberg. We’re also talking about typography (font faces i.e. Arial, Verdana, Trebuchet MS, font sizes i.e 10 pixels, 12 pixels, 18 pixels, font weight/style i.e. bold, italic, font placement), the use of negative space, and other elements of design.
Attention to detail is important because it is oftentimes the details in your design which make your website stand out from the competition (or from other websites in general). People get bored with the same old design - give them something different, unique, and attractive, and they will come back and visit. Heck, they may even become inspired by your design.
Remember: Less is more. Use details, but don’t abuse details.
Step 5: Current web design technology (CSS)
CSS - also known as cascading style sheets - replaced table-based website layouts years ago. The problem is, a lot of web designers are still using tables to create their designs. Not only is this unprofessional, but tables just plain suck. Here are a number of reasons why using tables for your web design is a bad idea:
Tables slow down your website. Everything inside of a table’s cell is loaded before being shown to the user. This is especially apparent for people using dial up connections.
Tables make messy code and add unnecessary junk markup. File sizes are increased due to the excessive lines of code which means slower load times. Also, having to sift through hundreds (sometimes thousands) of lines of code just to make a change isn’t a lot of fun.
Universal layout updates are difficult and time consuming when using tables. Making universal edits with tables involves opening each file, sifting through the code and junk markup, and making a change (again, on each page). Often times with CSS, all one must do is open the stylesheet and change a single value.
Tables should only be used to show data, not be used to design websites.
Tables limit your creativity and design. Table layouts are limited to boring, grid-based layouts. With CSS, you can place anything anywhere. The layout possibilities with CSS are endless.
CSS will save you time and increase your revenue in the long run. Updates and edits are much easier using CSS than tables. Because of faster load times, fewer visitors are likely to become impatient and leave. Longer visits = more browsing, more ad-clicking, lower bounce rates = more money for you.
Display your CSS website on tons of high-quality CSS Showcase websites. Tons of exposure if your website is featured. Table-based layouts are not welcome. Complete list on listible.com.
Some people will argue that table-based layouts are better than layouts which are built using CSS. However, oftentimes the person arguing that tables are better than CSS is the person who spent thousands of dollars on a table-based layout. Despite what anyone tells you, table-based layouts are inferior to CSS and should be avoided at all costs.
To read all about CSS, visit w3schools.com. Again, to be blunt, if your website is created using tables, it is not professional web design quality. Start using CSS stylesheets today and keep the tables in your spreadsheet application.
Step 6: Well written, interesting, grammatically-correct content
One thing that greatly compromises the quality and credibility of a website is poorly written, grammatically incorrect, misspelled content. This kind of content is unfortunately present in an extremely high number of websites - especially “professional” company websites.
If you don’t know how to write, then hire someone to write the content of your website. You’ll thank yourself later. Even if you do know how to write, mistakes are easy to make. Run through your content a few times to confirm that everything makes sense, is interesting, and is spelled correctly. You’ll look more professional and people will take what you have to say more seriously.
Step 7: Usability
Website usability is extremely important. According to usability.gov:
In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process. Usability, as defined by Joseph Dumas and Janice (Ginny) Redish, means that people who use the product can do so quickly and easily to accomplish their tasks. Usability may also consider such factors as cost-effectiveness and usefulness.
If website usability is poor, then people can easily become frustrated and leave your website. A great deal of importance must be placed on website usability if you want your web design to be of professional quality. It is usually poor usability which separates the regular websites from the professionally designed websites. Usability is the most important element of a professionally designed website.
For a wealth of information regarding website usability, visit usability.gov and also read our Dos and Donts of Website Navigation Usability.
Step 8: XHTML and CSS validation
Some people will argue that validating your website with XHTML and CSS validation from W3.org is a waste of time. To be blunt, they are wrong (for a number of reasons).
Accessibility. Without accessibility, you run the risk of being sued. For example: a disabled person who cannot use a “conventional” browser can sue you if your website is inaccessible to them. Although validation doesn’t necessarily guarantee accessibility, it is an important component of exercising ones due diligence and is reason enough that you should validate your website’s XHTML and CSS.
Cross browser compatibility. The more validation errors your website has, the higher the chances are that your website will not look the same in all web browsers. We will cover the importance of cross browser compatibility in the next step.
You look more professional with a valid website. Again, like having interesting content free of grammatical errors and misspellings, having a valid website makes you look more professional to your visitors. It tells them “Hey, I care about my website’s image, I took the time to validate it”.
If you’re building a website for the first time, then you may find that your website has a lot of validation errors. Don’t worry, this happens to the best of us. The more websites you build and the more time that you take to learn the rules of validation, the fewer errors you will get and the easier it will be to validate your website.
For more information about XHTML and CSS validation visit W3.org.
Step 9: Standards-compliant
Perhaps the most difficult, time-consuming aspect of professional web design is making sure your website is standards-compliant.
Taken directly from Wikipedia:
Standards-compliant is a term often used in describing websites & user agents’ (often web browsers) relative compliance with web standards proposed by the World Wide Web Consortium (W3C)
In layman’s terms, if you want your website to be considered professional, then it must look and function the same in all major browsers. In addition, achieving interoperability lowers costs to content providers since they must only develop one version of a document.
As mentioned above, creating a standards-compliant website will take a good deal of time and can even involve using basic hacks in order for certain elements to appear the same across all major browsers. Major browsers include: Internet Explorer 6 (IE6 -PC), Internet Explorer 7 (IE7 - PC), Firefox (PC and Mac), Safari (PC and Mac), and Opera (PC and Mac). These browsers control the majority of the browser market share and therefore the website which you create should be tested extensively in each of these browsers to ensure standards-compliance. In addition, XHTML and CSS validation (as mentioned in Step 8: XHTML and CSS validation) are extremely important when programming a website to be standards-compliant. Validate your website, validate your CSS stylesheet, validate yourself (okay, you can’t validate yourself, but if you could, would you?).
Step 10: Optimization
Website optimization is another crucial factor that must be taken into consideration when professionally designing a website. Website optimization includes:
Image optimization. Next to audio and video, images can severely compromise the speed in which your website loads. Always compress your images using Photoshop or your favorite image compression utility. By compressing images, you decrease the size of a file which allows a web page to load quicker which ultimately decreases the chance that your visitor will leave your website due to long load times.
Audio/Video optimization. Another major annoyance which screams “unprofessional” is having enormous video and audio files embedded in your web pages. Try to use Flash Video (.flv) compression for your video files and (.mp3) compression for your audio files. Not only are the file sizes smaller than using (.avi) or (.mpg) for video or (.wav) for audio, but the video/audio loads faster which means other elements on your web page will load faster, too.
Clean code (just say no to tables). In case you skipped Step 5, do not use tables when designing your website - use CSS (cascading style sheets). Tables have a ton of junk markup which will slow down your page load time, increase file sizes, and make editing and updating quite difficult.
Validate your XHTML and CSS. Although covered in Step 8, XHTML and CSS validation is an integral part of professional website optimization and therefore should not be skipped. Validate your XHTML and CSS.

Step 11: SEO (Search Engine Optimization) friendly
Professionally designed websites should be designed with a solid SEO friendly foundation. To make your website SEO friendly:
Don’t use Flash. If you must use Flash, make sure it is used sparingly. Flash content is not crawlable by search engine spiders and therefore the content located inside of Flash files cannot be indexed in the search engines such as Google, Yahoo, MSN, or Ask.
Don’t use Frames. Search Engine Spiders have a difficult time crawling through a website that uses frames. Many Search Engine Spiders will receive the following message when visiting a website designed using frames:
“Sorry! You need a frames-browser to view this site.”
Keyword Research. Optimize your web pages by including keywords relevant to the content on your website. Use keyword research tools such as Wordtracker or Overture to find the best, most relevant keywords for your content.
Researched Keywords in Title of web pages. Arguably the most important element in SEO, make sure that your title tags include the keywords found in the keyword research stage.
Researched Keywords in URL. Be sure to include the researched keywords in the title of your web pages as well. For example, if a page on your website is about energy drinks, make sure that the file is saved as “energy-drinks.html”. Use dashes instead of underscores, if possible.
CSS Navigation/CSS Stylesheets. CSS navigation guarantees that your website navigational text is crawlable by search engine spiders. CSS navigation also loads very quickly and anyone will be able to view the navigation using any browser.
Researched Keywords in Anchor Text. For hyperlinks inside and outside of your website, be sure to include the researched keywords in the anchor text of your hyperlinks. This helps search engines better determine what a particular page is about and will help that page rank higher with the researched keyword(s).
Images: ALT tags, no text in images. Not only are ALT tags required for XHTML validation, but they are necessary components of web accessibility. Try to avoid placing text inside of your images since search engine spiders cannot crawl image text. However, if you must place text inside of an image, use the text inside of the image as that image’s ALT tag. Search engine spiders can read ALT tags, just not the text inside of images.

Step 12: Abuse of Flash, Javascript, and sound effects
The last step in creating a professional web design and website is to avoid the abuse of Flash, Javascript, and sound effects. Not everyone has Flash or Javascript enabled on their computer, and therefore your website should not be built around them. If you’re going to use Flash or Javascript, use it sparingly.
Try not to use Flash Intros on your website. Most people hate waiting for Flash Intros to load, hate being forced to sit through them, and hate being surprised by the sound that many of them have. Do not create your website using only Flash. Again, what about the users who do not have Flash enabled on their computer? That could be a potential client, customer, or reader who you’re missing out on because of an unnecessary technological limitation.
If you’re going to use sound effects, make sure that they only play if the user enables sound on your website - never force sound effects onto your visitors. Nothing screams “unprofessional” like having a sound effect play each time a navigational item is rolled over or even worse, when the visitor lands on the home page of your website.
As a matter of fact, Flash and sound effects should generally be avoided when creating a professional web design. Javascript is the only exception as long as you program the website to work even if Javascript is disabled. Flash and sound effects are a nuisance to a lot of people, so for that reason alone, try to stay away from them.
The recipe to professional web design
These 12 steps make up the majority of the recipe which many professional web designers live by when designing websites. Of course, knowing the things that you know after reading this article and actually being able to create a professional web design are two very different things. However, as it does with anything, practice makes perfect. Now get out there and start building a professionally designed website! And hey, if you can’t do it yourself, go to Google and search “professional web design”. Chromatic Sites is in there, along with many other highly-respected professional web design companies.

Labels: , , , ,

The Next Five Years of Website Freelancing

There were about five years between the Dot-com bubble (which had officially "burst" by 2001) and the ubiquity of Web 2.0 (whose roots began earlier but really came into mainstream by 2006). During those five years, people realized true strength of the internet as they utilized standardized formats like XML and RSS, service-oriented web applications, user-controlled data, and, of course, the social aspect of the internet. We've seen the rise of social networks, the appearance of some pretty interactive web applications, and overall, the integration of the online world and your personal information flow. If you were freelancing during these five years, you probably had your share of work on blogs, social-based sites, Flash, or web applications. Furthermore, you could (and still can) make a pretty good living by just focusing on being a good designer or developer.



So the question is, what about the next five years of website freelancing? And how will they affect your average freelance designer or developer? Here are five predictions...

Client Communication: The Most Important Part of Freelancing

As a solo freelancer, the easiest and most consistent way to find work is to connect with design or marketing firms who are looking for reliable contractors. In fact, over half of my own clients are firms who use me as a website contractor. So over the years, I've had a good share of conversations with clients concerning their frustrations with other freelancers (usually resulting in more work for me). Interestingly enough, the most common problem these clients have with freelancers is not related to talent or skill, but rather communication. In fact, a client told me this week that he'd happily take a sub-par freelancer who communicated well over a talented freelancer who did not. So here are a few points to consider for any freelancer:

Are Creative Communities of Freelancers Sustainable?

In some cities, freelancers and other self-employed professionals have been clustering in neighborhoods now billed as "creative communities." The areas, and the artistic freelancers working and living in them, are being recognized for their economic contribution to cities; but rising costs may cause freelancers to head for more affordable areas. This is according to recent articles published in The New York Times, and The New York Observer, that reported Brooklyn's 33.2 percent increase of "self-employed creatives" compared to only a 6.5 percent increase for Manhattan, for the same time period. Even so, Brooklyn noted that freelancers clustering in particular neighborhoods are now leaving for other locations because of the lack of affordable housing and office space. Does it really matter?
At first glance, the discussion seems important only to places like Manhattan and Brooklyn; but other regions of the country could take note. For example, Brooklyn economists state that these freelance communities contributed over $504 million in taxable revenues in 2005. Other cities might enjoy benefitting from taxable revenue generated by clusters of self-employed working professionals, especially in a time when traditional businesses are finding it hard to grow. Other cities may also appreciate what a creative community can do for a neighborhood that is on the decline - moving in, cleaning it up, and making it a respectable place to live, again.
Of course, for freelancers, this also has a down side. Once a neighborhood becomes more desirable, it may no longer be affordable for the self-employed professional. Housing costs, home business insurance, health insurance, and other necessities - the costs add up for the self-employed. Organizations such as the Freelancers Union and the Center for Urban Development have recently discussed not only the impact freelancers have on a community, but the need to keep affordable work and living spaces available in order to attract and keep these creative communities of workers. Let's hope this becomes a topic of conversation in other cities across the U.S.
Do you live in a creative community? If not, would the idea appeal to you? Post a comment and tell us your story.

Setting Guidelines for Turning Down Freelance Work

Throughout the span of this blog's existence, the question I've seen most is, "How can I find more/better freelance work?" To be sure, this is probably a key aspect for most freelancers, often causing them to accept work that is not necessarily profitable or within their talent scope. This is not always a bad thing since such work is sometimes necessary (or at least instructive) during the initial growth of a freelance career. But hopefully, as your freelance business grows, you will begin to elicit more requests than you have time to attend to. So it helps to set some loose guidelines in determing what freelance work you will turn down. Such predetermined guidelines are necessary because people will naturally say yes to most if not all freelance requests, even if the work may negatively affect the freelancer or the client. So let's look at a few aspects of freelance work and see why certain work should sometimes not be taken.

Thursday, March 20, 2008

CSS for Heading Text Drop ShadowsOctober

Did you know that you can use CSS to create text shadows? Well I think it’s a pretty cool thing that CSS allows you to do if you just want to give your page headings a subtle lift instead of just a boring flat text heading. So why not just use a graphic to give the same effect? Well it’s pretty common knowledge that text heading are better for search engines and can easily be tagged with the appropriate html so using CSS to create the subtle shadow is a win-win for you and your site users.The way it works is by applying the property text-shadow to your selector ie: h1. Here is a you could write your CSS.h1 { color: black;text-shadow: #ccc 2px 0.2em 3px;}The values in the text shadow property example above are #ccc which defines the colour of the shadow, 2px determines how deep the depth of shadow, 0.2em defines how far right (or left using negative values) the shadow will be, and the 3px defines the amount of blur to be applied.Here is a sample of how text-shadow looks providing your browser is capable of rendering the text-shadow property. Firefox, Opera & IE6 & 7 all don’t render the text-shadow property, however Safari for Windows & Mac work great.This would produce a nice drop shadow on your text heading just giving to give you the effect that your headings have a little depth to them. The only downside to the text-shadow property is that it doesn’t work on browsers that aren’t CSS2 compatible but we should be seeing more of this kind of thing as browsers improve and add more CSS functionality.

The Future of Web Browsing

I was happy to see this morning that CNet has a special section of their site dedicated to Internet Explorer , and more importantly, the future of Web browsing.The first article, IE--embraced, extended, extinct?, raises several key points regarding what may be in store for the future of IE:An article titled Planning to dump IE? Think again raises the point that even those who have switched to alternative browsers are often forced to keep IE around in order to perform critical functions like updating their operating system.IE gaps that need to be plugged does a good job of pointing out the major features that Internet Explorer lacks in comparison to its alternatives, such as tabbed browsing, live bookmarks , up-to-date CSS support, and support for PNG technology — i.e., the usual suspects.Have the browser wars been reignited? gives a run down on the options Web surfers have in terms of the Web browser they use, and finally, Views of IE's competition provides several screenshots side by side of the vastly different "dash boards" of those alternatives.Anyone interested in Web browsers should take the time to read those articles. Reading them only made me more curious about what the future of Web browsing will look like.

Bad Web Design Abounds

It pains me to see potentially high-profile websites (or sites that aspire to be high-profile) that suffer from really bad web design. Take a look at this page to get an example of what I mean. The page is only one among millions, but it's a relevant reminder, to me at least, that good web design should be appreciated whenever encountered — it really is a rare thing. It's just a shame it has to be that way.

Web Design Isn't Easy

Before you choke on your Cheetos, note that the title of this post isn't "Web Design Is Hard." Okay, now we can begin.I was reading an article about wireframing and prototyping in HTML when I ran across the following:In some circles, HTML has acquired the reputation of being a time-consuming, difficult undertaking best left to developers.My question is, in what circles? I guess taking context into account, I can see why usability folk might be scared to venture into the web design world, especially if they're stuck in their Visio ways. However, in nearly every circle I've been in, the exact opposite is true. HTML and more generally speaking, web design, have taken on the reputation of being easy.In the software development world, which is a world I live in for at least 40 hours a week, I consistently hear references to the ideas that building web pages is trivial and that web developers are a dime-a-dozen. I suppose I can agree with both points, the latter simply because it is undeniably true and the former because I have been building web pages for eleven years.The distinction that needs to be made is that good web designers and developers are not a dime-a-dozen. In addition, designing and building good websites is most certainly not trivial, even for someone who has been doing it semi-professionally for as long as I have (or longer).Typically the people that say things like "we can just throw a web page together – it's simple" end up producing pages that look something like this. Actually, that's being generous.I always take statements like that with a grain of salt, because it's just like hearing someone say "I am a C++ coder and write programs all the time." Then you take a peek at the code they've written and find a bunch of stuff lik this.The truth is, there is an artistic side to web design and development that most people just don't have. If I've ever had it, it was a struggle to attain and very fleeting. I believe there is an artistic side to programming as well, and it's easy to tell when someone has it. It's easy to tell when they don't too. The problem is, you can often get away with not having the artistic side in the programming world – the same is not always true in the web design world. It's just a fact, most people will naturally respond to a site like seriph in a way that they won't to a site like yoda.com (though you have to admit that site is pretty hilarious).So in conclusion, if you're one of those people that tends to write off web design as something trivial, only for those who "aren't smart enough to write real code," go pay a visit to mezzoblue, SimpleBits and Stopdesign (feel free to check out their source code too) and then come back here and tell me why.

Wednesday, March 19, 2008

Weblog Usability: The Top Ten Design Mistakes

Summary:
Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.

Weblogs are a form of website. The thousands of normal website usability guidelines therefore apply to them, as do this year's top ten design mistakes. But weblogs are also a special genre of website; they have unique characteristics and thus distinct usability problems.

One of a weblog's great benefits is that it essentially frees you from "Web design." You write a paragraph, click a button, and it's posted on the Internet. No need for visual design, page design, interaction design, information architecture, or any programming or server maintenance.

Blogs make having a simple website much easier, and as a result, the number of people who write for the Web has exploded. This is a striking confirmation of the importance of ease of use.

Weblogs' second benefit is that they're a Web-native content genre: they rely on links, and short postings prevail. You don't have to write a full article or conduct original research or reporting. You can simply find something interesting on another site and link to it, possibly with commentary or additional examples. Obviously, this is much easier than running a conventional site, and again indicates the benefits of lowering the barriers to computer use.

As a third benefit, blogs are part of an ecosystem (often called the Blogosphere) that serves as a positive feedback loop: Whatever good postings exist are promoted through links from other sites. More reader/writers see this good stuff, and the very best then get linked to even more. As a result, link frequency follows a Zipf distribution, with disproportionally more links to the best postings.

Some weblogs are really just private diaries intended only for a handful of family members and close friends. Usability guidelines generally don't apply to such sites, because the readers' prior knowledge and motivation are incomparably greater than those of third-party users. When you want to reach new readers who aren't your mother, however, usability becomes important.

Also, while readers of your intranet weblog might know you, usability is important because your readers are on company time. (As an example, see IBM's use of intranet blogs — among the ten best intranets of 2006.)

Usability Issues

To reach new readers and respect your existing readers' time constraints, test your weblog against the following usability problems.

1. No Author Biographies

Unless you're a business blog, you probably don't need a full-fledged "about us" section the way a corporate site does. That said, the basic rationale for "about us" translates directly into the need for an "about me" page on a weblog: users want to know who they're dealing with.

It's a simple matter of trust. Anonymous writings have less credence than something that's signed. And, unless a person's extraordinarily famous, it's not enough to simply say that Joe Blogger writes the content. Readers want to know more about Joe. Does he have any credentials or experience in the field he's commenting on? (Even if you don't have formal credentials, readers will trust you more if you're honest about that fact, set forth your informal experience, and explain the reason for your enthusiasm.)

2. No Author Photo

Even weblogs that provide author bios often omit the author photo. A photo is important for two reasons:

  • It offers a more personable impression of the author. You enhance your credibility by the simple fact that you're not trying to hide. Also, users relate more easily to somebody they've seen.
  • It connects the virtual and physical worlds. People who've met you before will recognize your photo, and people who've read your site will recognize you when you meet in person (say, at a conference — or the company cafeteria if you're an intranet blogger).

A huge percentage of the human brain is dedicated to remembering and recognizing faces. For many, faces work better than names. I learned this lesson myself in 1987 when I included my photo in a HyperCard stack I authored that was widely disseminated on Mac-oriented BBSs. Over the next two years, countless people came up to me and said, "I liked your stack," having recognized me from the photo.

Also, if you run a professional blog and expect to be quoted in the press, you should follow the recommendations for using the Web for PR and include a selection of high-resolution photos that photo editors can download.

3. Nondescript Posting Titles

Sadly, even though weblogs are native to the Web, authors rarely follow the guidelines for writing for the Web in terms of making content scannable. This applies to a posting's body text, but it's even more important with headlines. Users must be able to grasp the gist of an article by reading its headline. Avoid cute or humorous headlines that make no sense out of context.

Your posting's title is microcontent and you should treat it as a writing project in its own right. On a value-per-word basis, headline writing is the most important writing you do.

Descriptive headlines are especially important for representing your weblog in search engines, newsfeeds (RSS), and other external environments. In those contexts, users often see only the headline and use it to determine whether to click into the full posting. Even if users see a short abstract along with the headline (as with most search engines), user testing shows that people often read only the headline. In fact, people often read only the first three or four words of a headline when scanning a list of possible places to go. Sample bad headlines:

  • What Is It That You Want?
  • Hey, kids! Comics!
  • Victims Abandoned

Sample good headlines:

  • Pictures from Die Hunns and Black Halos show
  • Office Depot Pays United States $4.75 Million to Resolve False Claims Act Allegations
    (too long, but even if you only read the first few words, you have an idea of what it's about)
  • Ice cream trucks as church marketing

This last headline works on a church-related blog. If you're writing an ice cream industry blog, start the headline with the word "church" because it's the information-carrying word within a context of all ice cream, all the time.

In browsing weblog headline listings to extract these examples, I noticed several headlines in ALL CAPS. That's always bad. Reading speed is reduced by 10% and users are put off by the appearance of shouting.

4. Links Don't Say Where They Go

Many weblog authors seem to think it's cool to write link anchors like: "some people think" or "there's more here and here." Remember one of the basics of the Web: Life is too short to click on an unknown. Tell people where they're going and what they'll find at the other end of the link.

Generally, you should provide predictive information in either the anchor text itself or the immediately surrounding words. You can also use link titles for supplementary information that doesn't fit with your content. (To see a link title in action, mouse over the "link titles" link.)

A related mistake in this category is to use insider shorthand, such as using first names when you reference other writers or weblogs. Unless you're writing only for your friends, don't alienate new visitors by appearing to be part of a closed clique. The Web is not high school.

5. Classic Hits are Buried

Hopefully, you'll write some pieces with lasting value for readers outside your fan base. Don't relegate such classics to the archives, where people can only find something if they know you posted it, say, in May 2003.

Highlight a few evergreens in your navigation system and link directly to them. For example, my own list of almost 300 Alertbox columns starts by saying, "Read these first: Usability 101 and Top Ten Mistakes of Web Design."

Also, remember to link to your past pieces in newer postings. Don't assume that readers have been with you from the beginning; give them background and context in case they want to read more about your ideas.

6. The Calendar is the Only Navigation

A timeline is rarely the best information architecture, yet it's the default way to navigate weblogs. Most weblog software provides a way to categorize postings so users can easily get a list of all postings on a certain topic. Do use categorization, but avoid the common mistake of tagging a posting with almost all of your categories. Be selective. Decide on a few places where a posting most belongs.

Categories must be sufficiently detailed to lead users to a thoroughly winnowed list of postings. At the same time, they shouldn't be so detailed that users face a category menu that's overly long and difficult to scan. Ten to twenty categories are appropriate for structuring many topics.

On the main page for each category, highlight that category's evergreens as well as a time line of its most recent postings.

7. Irregular Publishing Frequency

Establishing and meeting user expectations is one of the fundamental principles of Web usability. For a weblog, users must be able to anticipate when and how often updates will occur.

For most weblogs, daily updates are probably best, but weekly or even monthly updates might work as well, depending on your topic. In either case, pick a publication schedule and stick to it. If you usually post daily but sometimes let months go by without new content, you'll lose many of your loyal — and thus most valuable — readers.

Certainly, you shouldn't post when you have nothing to say. Polluting cyberspace with excess information is a sin. To ensure regular publishing, hold back some ideas and post them when you hit a dry spell.

8. Mixing Topics

If you publish on many different topics, you're less likely to attract a loyal audience of high-value users. Busy people might visit a blog to read an entry about a topic that interests them. They're unlikely to return, however, if their target topic appears only sporadically among a massive range of postings on other topics. The only people who read everything are those with too much time on their hands (a low-value demographic).

The more focused your content, the more focused your readers. That, again, makes you more influential within your niche. Specialized sites rule the Web, so aim tightly. This is especially important if you're in the business-to-business (B2B) sector.

If you have the urge to speak out on, say, both American foreign policy and the business strategy of Internet telephony, establish two blogs. You can always interlink them when appropriate.

9. Forgetting That You Write for Your Future Boss

Whenever you post anything to the Internet — whether on a weblog, in a discussion group, or even in an email — think about how it will look to a hiring manager in ten years. Once stuff's out, it's archived, cached, and indexed in many services that you might never be aware of.

Years from now, someone might consider hiring you for a plum job and take the precaution of 'nooping you first. (Just taking a stab at what's next after Google. Rest assured: there will be some super-snooper service that'll dredge up anything about you that's ever been bitified.) What will they find in terms of naïvely puerile "analysis" or offendingly nasty flames published under your name?

Think twice before posting. If you don't want your future boss to read it, don't post.

10. Having a Domain Name Owned by a Weblog Service

Having a weblog address ending in blogspot.com, typepad.com, etc. will soon be the equivalent of having an @aol.com email address or a Geocities website: the mark of a naïve beginner who shouldn't be taken too seriously.

Letting somebody else own your name means that they own your destiny on the Internet. They can degrade the service quality as much as they want. They can increase the price as much as they want. They can add atop your content as many pop-ups, blinking banners, or other user-repelling advertising techniques as they want. They can promote your competitor's offers on your pages. Yes, you can walk, but at the cost of your loyal readers, links you've attracted from other sites, and your search engine ranking.

The longer you stay at someone else's domain name, the higher the cost of going independent. Yes, it's tempting to start a new weblog on one of the services that offer free accounts. It's easy, it's quick, and it's obviously cheap. But it only costs $8 per year to get your personal domain name and own your own future. As soon as you realize you're serious about blogging, move it away from a domain name that's controlled by somebody else. The longer you delay, the more pain you'll feel when you finally make the move.

Learn More

Other Top Ten Lists: