Mark Boulton, Andy Budd, Andy Clarke, Simon Collison, Molly Holzschlag, Jeremy Keith and Jason Santa Maria are just some of the prominent speakers who will attend the conference. I’m sure it’s going to be great!

I’ll be there to get up-to date with the most recent trends and to meet new people. Hope to meet some of you guys too! If anybody is going please let me know by commenting this post. I’d be glad to have a chat with you during the conference or a pint at the social events to exchange some ideas.

Hope to see you there!
Andrea

I definitely think it is not. Users need to be given more, need to put in front of something fun, extremely beautiful, and what counts most, totally unexpected.

As Donald Normal said: “It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives”.

How can a simple website accomplish and fulfill such ambitious aims?

Before getting to the possible answers we need a better understanding of the matter. Here is where Noriaky Kano’s model of customer satisfaction comes to help us. Most of the sites we come across today are able to satisfy users’ basic and performance needs, but just a small number of them can meet the excitement needs.

A basic need is something which is taken for granted by the user, like for example the fact that a site should not have broken links. A performance need is something that people expect, like the use of secure protocols for the online payments. An excitement need is way more than that, it’s something pleasantly unexpected, like for example the free wifi in a hotel.

Over time, things that were exciting yesterday will be expected tomorrow and things that are exciting today will be taken for granted tomorrow. That’s why we need to continue to innovate in order to make websites not just easy to use, but delightful to use.

Creatives and designers must fulfill excitements needs by adding those small things that people won’t notice, but if they do, they’ll surely tell their friends!

That’s what Paul Annett from Clearleft focused on during his smart presentation entitled “Oooh, that’s Clever! (Unnatural Experiments in Web Design)“. Paul’s presentation was absolutely fantastic, one of the most wonderful talks of SXSW 09.

In his talk, Paul presents few examples of clever websites. Here you can find the most interesting ones. Most of them are done with a smart use of transparencies, flash apps and animated GIFs. Check them out! It’ll be fun…

Resize the browser and you’ll get a nice 3D effect with the leaves and clouds in the background. That’s done using PNGs as background images:

Silverback

Twequency

In the below sample you can see and browse the site in the different stages of the design process, from the wireframes to the final design:

dConstruct.org

Click on the small warm at the bottom of the page…

Kyanmedia

Scroll down the page and keep an eye on the logo. That’s done again using PNGs for the logo images:

Fatuus

Able

Econsultancy

The torch switches on as you run down the page. That’s done setting the torch image behind a semi-transparent blue gradient layer:

CSS Zen Ocean

Run down the page and you’ll see the paint drops creating gorgeous effects:

Webleeddesign

Change colours of your website using a one pixel animated GIF:

David Emery

A slick advertisement for WII and really clever ideas to break things using Flash:

Wii Experience

Hema

Here 30+ examples of newspapers and breaking news sites from all around the world.

20minutes (France)

BBC (UK)

Bild (Germany)

Boston Globe (USA)

Cbs News (USA)

Chicago Tribune (USA)

Cnn (USA)

Corriere della Sera (Italy)

DN (Sweden)

El Mundo (Spain)

El Pais (Spain)

Faz (Germany)

Guardian (UK)

Irish Times (Ireland)

Jacksonville (USA)

LA Times (USA)

Le Monde (France)

Libération (France)

Msnbc (USA)

Ny Daily News (USA)

NY Times (USA)

San Francisco Gate (USA)

Smh (Australia)

Standaard (Belgium)

Telegraph (UK)

The Age (Australia)

The Sun (UK)

Times on line (UK)

Washington Post (USA)

Washington Times (USA)

Wall Street Journal (USA)

If you’re keen to read a bit more on the subject you can also take a peek at the following article where Michael Alexander presents two books about becoming a freelance designer: Being a Starving Artist Sucks and Verbal Kung Fu for Freelancers.

Ubiquity acts as a web service mashup, integrating a flexible yet powerful “natural language” command line to Firefox. That means you will be able to perform tasks using various web services in one place, quickly, simply and using normal language.

To invoke Ubiquity all you have to do is hit a key combination (Ctrl + Space) and a text field drops down, as you type command suggestions will appear.

Here’s a couple of easy examples to show you what this extension can do.

For example, you can insert a Google map into a new Gmail message (type “map (address)” in the Ubiquity panel); you can look up a topic on Wikipedia in-page without opening a new window or switching tabs; you can select a paragraph of text in a foreign language and translate it in-page or even select a text on a web page and transform it into a PDF document.

See these examples and more on the official site or check out the online tutorial. Version 0.1 is available for download now from Mozilla Labs here.

Let’s take a common search form as an example. For the input field which lets you type in the text you want to search, so far I’ve always been using a default pre-filled text, something like “Search the site”, “Looking for something?” or “Can we help you find something?”.

This was because Checkpoint 10.4 of WCAG 1.0 recommended that until user agents (such as browsers or screen readers) handle empty controls correctly, we had to include default, place-holding characters in edit boxes and text areas.

To avoid the inconvenience for the users to have to remove the default text before typing in their keywords, I used to add a small inline JavaScript to clean up the field as soon as the user clicks on it or the field gets the focus on. This was obviously only a partial solution because users who browse the page with JavaScript disabled would have to select the default text and delete it. That could be a nuisance indeed and would affect usability as well.

Things have changed since December 11th 2008, when WCAG 2.0 became W3C recommendation. Simply reading WCAG 2.0 you don’t find any reference to pre-filled text though. This could be a bit confusing and actually that’s what disoriented me when I was trying to get an answer to my question.

But, reading carefully the W3C documentation, I finally found my answer! Within the comparison of WCAG 1.0 Checkpoints to WCAG 2.0, you can find the following sentence referring to Checkpoint 10.4 of WCAG 1.0:

Checkpoint 10.4: Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. [Priority 3]. This “until user agents” condition has been met. Therefore, this checkpoint is no longer required.

WCAG 2.0 states that we do not have to include the default text anymore, because now user agents are capable to handle correctly empty fields. This helps to clarify a bit, but I think it’s not enough yet. In fact, it is not clear if we simply can avoid to use pre-filled texts or if we don’t have to use them at all.

Finally, I cleared my doubts chatting with a guy who is part of the W3C project and who usually runs usability and accessibility tests in CFIT, the Center for Inclusive Technology, based in Dublin, Ireland. He told me that users testing show that adding pre-filled text is no longer necessary for accessibility. Research, in fact, has shown that pre-filled text fields can cause difficulties for some modern screen readers, especially if JavaScript is disabled.

Based on these tests and on WCAG 2.0 we should definitely stop using pre-filled text inputs. Anyway, I think that having some explanatory text might improve usability. The easiest solution, in my opinion, is to replace pre-filled texts (as “Search the site” in search forms or “dd/mm/yyyy” in date input fields) with labels. Labels are strictly related to inputs fields, by the use of the FOR and ID attributes, and describe the input they refer to. This kind of helpful info should be added to the label text. Taking our example once again, I would replace the use of the default text in the input filed with the label as follow:

In this case we can be sure we comply with WCAG 2.0 and we can also sort out the accessibility issue that we would encounter when users browse the page with JavaScript disabled. Hope this article helps to clarify the matter. I’d like you guys to tell us your experience on the subject because I’m sure that something interesting could come up!

The number of sites offering RSS feeds, a format to regularly deliver up-to-date web content, is growing rapidly. Many news-related sites, weblogs and other online publishers syndicate their content as an RSS Feed to whoever is interested in it. As soon as you subscribe to a RSS feed you’ll get fresh updates in real time.

Recently, I searched online for free RSS icons that could be used to identify content in different languages. What did surprise me is that I couldn’t find any icon like that. I thought it could be useful to have a set of language RSS icons to be used on those sites that syndicate their content in different languages, so I decided to design my own set of icons and make it available to anyone who wants it.

I designed 5 icons for the following languages: English, German, French, Italian and Spanish. Icons come in four sizes: 75×75 px, 50×50 px, 40×40 px and 25×25 px. All of them are in PNG format with transparent background, so you’ll be able to use them on every background you need.

In the zip file you’ll also find the Illustrator source file for each format, so you’ll be able to change colors, add new flags, and even resize the icons to better suit your needs, without lose in quality.

Language RSS Feed Icon Set is completely free for both personal and commercial projects in any way you like under the Creative Commons 3.0 License. We only ask you to respectfully link back to www.cssglance.com. You cannot offer them for download on your website, but you can write about them and link back to this post.

Download Language RSS Feed Icon Set (540KB - zip file)

This has been declared in WCAG 2.0, published as a W3C Recommendation on December 11th, 2008, where Guideline 1.3 states that we should always create content that can be presented in different ways (for example simpler layout) without losing information or structure.

The easiest way to meet this guideline is to develop our websites starting from a good semantic XHTML structure. We should organize the code so that the most important content always comes as close to the top of the page as possible. Once we have the structure we can then use CSS to change the presentation. But content has to come first. As you know on the Internet content is king and always will be.

The main issue with this approach is that sometime it’s not that easy to get the positioning we need without moving bits of XHTML around. Obviously this practice could mess up the content order, jeopardizing the accessibility of the page.

Dan Johnson published a cool article on how to use CSS floats to achieve any column layout, while keeping the most relevant content highest on the page.

In his example, he uses the exact same HTML markup to create six different layouts by the clever use of CSS styles. This is a great sample of how we can get the design we need, keeping the content in order of priority and safeguarding accessibility.

Try it out!

You can now browse our database of well designed and innovative CSS based websites straight away from the homepage using our fully reorganized category menu, which makes it easier for you to find what you’re looking for.

We’ve also added some interesting features as the Best Site of the Month, which will be chose among all the sites we receive and reviewed by our staff. As a recognition for your good work, it will stay in a top banner on our homepage for the whole next month. A list of recommended books is also provided within the new footer layout.

Besides, CSSGlance is now both on Twitter and Facebook.. take a peek!

Hoping you like the new design as much as we do, we’d like to ask your opinion and collect your suggestions for possible future improvements.

CSSGlance Staff

Less is more, that’s the idea: few elements and more clarity in order to facilitate the message fruition.
Which are the features that characterize a website designed in accordance with the principles of the minimal style though?
Tautly, we can summarize them in four points:

• Simplicity, i.e. absence of elements that, from the communication point of view, are useless or redundant. The content takes the main role and whatever is superfluous or redundant is removed.
• Use of the fonts to guide the user’s fruition: margins, alignment and visual hierarchy are used to structure the message. Fonts and text gain visual interest and help the user to easily identify the important parts of content.
• Use of the white space, that allows to distinguish the different elements and to focus the user’s attention on specific areas of the page. This works still better when you add others design principles, like proportion and emphasis, in order to define clear and easily noticeable visual paths.
• Essential use of graphic. It’s a mistake to consider minimal only those websites with no graphic or in black & white. The important is that the graphic elements don’t divert the attention from the main message, but help the user to browse the site content instead.

A good combination of these elements brings clear and easily perceptible advantages, like a prompt identification of the significant parts of the page (i.e. a better usability and a more effective communication), beside a modern and clean visual appeal of sure impact.

As it emerges from the gallery we present, the minimal style is suitable for every kind of website: from blogs to portfolios, from informative to advertising websites, as it aims to give importance to the core of communication, i.e. the content.

Other articles about the minimal style will follow, in whose we will be presenting different applications of the principles mentioned above.
We would be glad, anyhow, if you could recommend us some resources that you consider are worthy to be mentioned. Thanks in advance.

(Translated by Ori)

1. 5thirtyone
   
2. Agenturblog
   
3. Aigany
   
4. Alltop
   
5. Andy Rutledge
   
6. Astheria
   
7. Authentic Style
   
8. Ben Hulse
   
9. Carbon Silk
   
10. Cherry Bloom
    
11. Dache
    
12. Daniel Scrivner
    
13. Daninko
    
14. Darrenalawi
    
15. Derek Punsalan
    
16. Designed by Anderson
    
17. Designing the news
    
18. Design TokyoCube
    
19. Dotkraft
    
20. EightFace
    

• Important SEO Html Tags, Search Engine Indexing Limits
• Recommended Title Tag Syntax, Common Canonical Issues
• 301 Redirect, Important Search Engine Robot User-Agents
• Common Robot Traps to Avoid, Robots Meta Tag Syntax
• Robots.txt Syntax, Sitemap Syntax

Actually, it’s not a proper article.. it’s more kind of a smart letter, titled “If Architects Had To Work Like Web Designers“, where Shae Allen explains, using a brilliant comparison with the architect’s job, how most of the clients usually are uncapable to tell us what they really want.

As a web designer myself, I can fully understand and deeply agree with the author’s view. His letter totally echoes my experiences … and what about you?!

The first idea was not our own. I think you can easily remember the great success made by what was called “The Million Dollar Homepage”. A simple page covered by a lot of mini banners which has led the owner to become millionaire and to leap to fame.

Quite a few websites adopted this useful way of making money. You can see good examples on CSS Remix and Italian Web Gallery.

In the most cases, you can get more information about the single banner by passing the mouse pointer over it. By doing this action, a small tooltip will appear, providing additional info as the name, the tagline or simply a link back to the website who bought the adv block.

This feature is often realized by using a small JavaScript. But what will happen to those users browsing a page without JavaScript enabled? The answer is simple. They won’t see the tooltip and the adv info. That means the content is not accessible.

So, what can we do to get the same nice tooltip feature and to improve accessibility? The solution is CSS. In fact, we can create pure CSS tooltips which are simple, useful and accessible, ‘cos they work even if the user browse the page without JavaScript enabled. This is the way we followed on CSSGlance.

This is what we’re looking for and now let’s go into details.

We just need a plain list of links. The XHTML code is something like this:

<ul>
<li><a href="http://www.google.com"> <span>Google.com</span></a></li>
<li><a href="http://www.yahoo.com"> <span>Yahoo.com</span></a></li>
<li><a href="http://www.cssbeauty.com"> <span>CSSBeauty.com</span></a></li>
...
</ul>

Now we have to float the <li> elements in order to put side by side each block. Then we can add a relative position to the links, in order to allow the span element inside to position absolutely respect the parent link. The span have also a display:none property which is changed into a display:block one when the mouse pointer pass over the block. You can easily solve ie bug adding some z-index.

Here you have the basic CSS code:

#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}

Let’s take a look at the example! You can download this example (zip-9KB) and use it however you like, but please give a link back to CSSGlance.

Recently, two interesting articles have been published about this issue. The first, “Information design for the New Web” deals with the principles of web applications design; the second, entitled “The user experience of a blog“, analyses those that could be definied the simplest conventions for blog design.

CssGlance Gallery Entries
http://feeds.feedburner.com/cssglance/gallery

CssGlance News (English language)
http://feeds.feedburner.com/cssglance/news

CssGlance Notizie (Italian language)
http://feeds.feedburner.com/cssglance/notizie

Thank you
CssGlance Staff

Much more recent is the bright idea of using grids for designing websites, in order to laying out harmonic website and increase the legibility of your designs.

For all those people who are interested in deepen gridding design for websites, please keep an eye on these slides, “Grids are Good (right?)“, kindly made available by the authors Mark Boulton, Mark Boulton Design, and Khoi Vinh, Design Director for NYTimes.com.

In the ppt presentation, the authors show a good example of website redisign. They redisign www.yahoo.com using grid design. What comes out is absolutely wonderful and fashinating, and gives a lot of useful tips for new design or simply redesign based on this bright technique.

The podcast related to the presentation was recorded during the Conference at Austin, Texas, May 9-18, 2007 (South by Southwest Conferences and Festivals) and is available online.

We hope you’ll find this reading interesting. We’ll make soon available some other useful resources on gridding design for harmonic websites.