View Issue
Home
» Newsletters
» View Issue
The SitePoint Design View #63 Copyright (c) 2009
September 16th, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The Official Design Newsletter of SitePoint
by Alex Walker (design@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=63
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
Welcome to Design View #63.
Last week was a book deadline week at SitePoint HQ -- which
usually involves us fussing, fighting, and finessing our way to
a new book cover design.
Over the years, I've found sourcing and agreeing on interesting
yet meaningful imagery for technical books is roughly equal
parts frustration and inspiration.
Last week we were finalizing our upcoming book, Fancy Form
Design. You can see some pics of one of our improvized studio
shoots [1] for the cover on SitePoint's Facebook [2] page, if
you're interested.
Witness above our twin $17 halogen desk lamps and advanced
backdrop securing system (or jug as it's called in the trade).
No expense is spared here at SitePoint.
Anyway, on to the Design View! In this issue, we'll look at
making the most (or not) of humanizing the user experience.
We'll also look at how you can use some of the latest thinking
in PNG compression to squeeze that last drop out of your PNG
images.
Enjoy.
Alex Walker
Editor
SitePoint Design View
PS: As Matt detailed in his recent blog post [3], there were
some regrettable problems with the last Design View. All I can
add is my sincere apology to anyone affected.
[1] <http://www.facebook.com/album.php?aid=149788&id=119345668711>
[2] <http://www.facebook.com/sitepoint>
[3] <http://www.sitepoint.com/blogs/2009/09/08/an-update-on-the-sitepoint-newsletter-lists/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Who Said Web Design Wasn't Sexy?
- Design amazing web interfaces from scratch.
- Master key web interface design principles
- Create beautiful, yet functional, web sites.
- Unleash your own artistic talents
Free Preview here http://www.sitepoint.com/launch/7b6c9f
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- Do You Need Cake if the Icing is Amazing?
- Squishing the Last Drops from Your PNGs
- Latest Tutorials
- Hot Discussions
- New Blogs
DO YOU NEED CAKE IF THE ICING IS AMAZING? - - -
A little over a year ago I reported on Andy Budd's talk at
Web Directions UX08 [1] and his ideas on assessing and measuring
the user experience.
He also talked about adding value to some of the empty, mundane
but necessary web site processes (that is, load screens, error
messages, user instructions) by injecting some fun, soul, and
even humanity into them.
Examples we talked about included:
1. Picnik's loader screen [2], which is accompanied by progress
commentary: "spreading out the blanket ... picking blueberries
... floating kites ... making sandwiches ..."
1. Innocent Smoothie's packaging, which includes the simple
sentence "Stop looking at my bottom!" [3] printed on the base of
the box.
Both are copybook examples of better user experiences because
they flatly refuse to follow the standard charmless convention
and instead dare to inject a touch of warmth.
But what happens if "warm fuzzies" is ALL you
deliver to the user? Is it still a win?
I've been thinking about exactly that question after a
friend sent me a "Hey, you gotta see THIS!" link to the HEMA [4]
web site. For those unfamiliar with the brand name, HEMA is a
large Dutch department store chain.
Check the site out for yourself [5] if you like (assuming you've
yet to come across it before -- it's been online for at least 18
months).
Otherwise, here's the executive summary: the site renders as
what appears to be a garden-variety, IKEA-like online store:
navigation tabs along the top and popular products displayed in
a grid. Yawn. yawn.
That's when reality seems to break, and strange and
wonderful stuff start to happen.
It all begins when a plastic cup tumbles over, bumps the sticky
tape, and a domino effect is set in motion. The tape then
crashes onto the stapler before squishing the cake, noisily
sliding down the xylophone, and knocking over the fluorescent
pens like skittles.
This chain of slapstick events continues, drawing ironing
boards, blenders, yo-yos, coat hangers, and kettles into the
growing maelstrom before eventually breaking out into parts of
the site navigation and text.
By the time this sequence of events has all played out, the tabs
are torn and frayed, the navigation text has collapsed into a
puddle, and confetti flutters about from above. Very, very cute.
Now, let me say straight up, this is a wonderful idea
beautifully executed. It breaks boundaries, delights, shakes you
out of your surfing stupor, and triumphantly shouts "HEY YOU!
Y'know what? We are different!"
Brilliant.
The only problem is, that's where the relationship stops for
most users. This is no easter egg [6] or practical joke
overlaying a standard online store. Though HEMA has a rather
extensive web site [7], there's no obvious link between it and
this popular online practical joke. The logo is unclickable. The
site navigation and text links look fine, but are in fact broken
links.
Whatever warm and fuzzy feelings you might be left with after
the show, outside of forwarding to a friend, there are few ways
to show your love.
Andy Budd talked about plotting the user experience as a graph
along a time line. We might assume that users begins their HEMA
site experience in a relatively neutral emotional state. As the
experience continues they're perhaps first surprised, then
delighted and entertained.
But, what if you wanted to:
* tell HEMA how awesome their site is?
* visit HEMA's About page to find out what sort of
firebrand, thinking-outside-the-box company would do such a
crazy thing?
* locate the nearest store to purchase one of their charming
and zany products?
* investigate the opportunities for employment at what appears
to be a fun company?
Well, you'd probably be out of luck. Short of editing the
address bar, when the gag finishes, the show is over.
And the greatest irony? The HEMA joke web site [8] has been so
wildy popular with bloggers and on social networks that it
outranks the genuine HEMA site [9] in almost any general [10]
web [11] search [12]. As far as Google is concerned, HEMA is a
purveyor of fine jokes.
Now, no doubt web dev types like us have been sharing this link
and "oohing and ahhing" forever. In truth, most of us would love
to be offered this kind of fun work.
But as sublimely clever as the animation is, I have to wonder if
this project, and the buzz it created, has translated into
anything particularly useful for the HEMA business.
What's more, I wonder how many users have ended up feeling
disappointed, frustrated, or confused by being unable to find
some of the "bread and butter" basics like locating a store,
giving feedback, or asking a question. They may feel like
they're at the right place, but no-one wants to talk to them.
What do you think? Is this marketing brilliance or a wasted
opportunity?
[1] <http://www.sitepoint.com/blogs/2008/05/23/are-you-user-experienced/>
[2] <http://www.picnik.com/>
[3] <http://www.flickr.com/photos/duncan/2084134925/>
[4] <http://producten.hema.nl/>
[5] <ttp://producten.hema.nl>
[6] <http://en.wikipedia.org/wiki/Easter_egg>
[7] <http://www.hema.nl/>
[8] <http://producten.hema.nl/>
[9] <http://www.hema.nl/>
[10] <http://www.google.com/search?hl=en&rlz=1C1GGLS_enAU291AU305&q=hema+website&aq=f&oq=&aqi=>
[11] <http://www.google.com/search?hl=en&rlz=1C1GGLS_enAU291AU305&q=hema+web&aq=f&oq=&aqi=g-p1g9>
[12] <http://www.google.com/search?hl=en&rlz=1C1GGLS_enAU291AU305&q=hema&aq=f&oq=&aqi=g-p2g8>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
The Principles of Beautiful Web Design
Tired of making web sites that work absolutely perfectly but just
don't, well, look very nice? This new full-color book will show you
design the right way.
* Create amazing designs from scratch
* Understand why some designs "just work"
* Unleash your creative talents
* Master the design fundamentals:
layout, color, texture, typography and imagery
* Uncover the trade secrets the great designers keep to themselves
Bonus: Get a Photoshop RGB color & font quick reference card.
Order your copy now
https://sitepoint.com/bookstore/go/83/9247b4/
or download a FREE Sample.
http://www.sitepoint.com/launch/9247b4/
SQUISHING THE LAST DROPS FROM YOUR PNGS - - - - - - - - - - - - -
One of the areas I've always felt Fireworks had Photoshop
covered was in its PNG export facility [1]. As well as being
more flexible and advanced, it almost always produces smaller
files.
But can you do even better? Perhaps now you can.
Back in July, Sergey Chikuyonok wrote a very interesting article
in Smashing Magazine on optimizing your PNGs [2]. Basically,
Sergey has spent some time understanding exactly how PNG's
compression magic works and then figured out techniques you can
use with Photoshop to make your images more PNG-friendly.
Clever stuff and well worth a read. But what about if you just
want the instant PNG gratification without the hefty mathematics
primer?
No problem. Happily the smart folk at GracePoint After Five [3]
have constructed a free online PNG compression tool called
PunyPNG [4] that seamlessly incorporates some of Sergey's finest
PNG voodoo.
I have to say I was skeptical that my lovely Fireworks-forged
PNGs would have any worthwhile fat to trim, but I've been able
to slim down most files by around 15% -- even more for 8-bit
PNGs with lots of transparency.
In some random testing I was able to reduce the following:
* Mozilla logo: 10%
* SitePoint logo: 26%
* Typekit's logo: 33%
* Google's search page logo: 10%
Okay, so would anyone really bother squeezing 10-15% out of a
25K PNG in the age of broadband connections?
Perhaps it's unnecessary for every random graphic used, but it
certainly makes great sense on certain occasions. For instance:
- Site logos, headers, and other repeated graphics:
As practically every visitor comes across these graphics, a
little care in their preparation will pay off on every pageload.
- CSS image sprites:
CSS sprites are a great way to pre-cache images for rollovers,
animations, and other effects, but they rely on the user
receiving one large image quicker than a number of small images.
In fact, sites such as YouTube put almost all their interface
graphics on a single big image [5]. Anything you can do to make
that first image download faster is a huge bonus to everyone.
Try it out on some of your PNGs and let me know the results.
[1] <http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=37#5>
[2] <http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/>
[3] <http://www.gracepointafterfive.com/punypng-now-supports-dirty-transparency>
[4] <http://www.gracepointafterfive.com/punypng>
[5] <http://s.ytimg.com/yt/img/master-vfl119994.png>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That's all for this issue -- thanks for reading! I'll see you in
a few weeks.
Alex Walker
design@sitepoint.com
Editor, SitePoint Design View
LATEST TUTORIALS - - - - - - - - - - - - - - - - - - - - - - - -
Luke Stevens on Data Driven Design
by Matthew Magain
Luke Stevens is a web designer who believes firmly that testing
is the future of web design. Matt quizzed him on data driven
design, A/B testing, and Google Web Optimizer.
http://www.sitepoint.com/article/1754
Killer Web Dev Tools with Ben Galbraith
by Andrew Tetlaw
Ben Galbraith, of Mozilla Labs, is speaking at Web Directions
South '09 on The State of Browser Tools. Andrew had the
opportunity to interview him about his Web Directions session,
the Bespin project, and browser tools in general.
http://www.sitepoint.com/article/1755
Share Media on Twitter Using Flex, Part II: Images
by Andrew Muller
In his previous article, Andrew created a simple Twitter
application using Adobe Flex. In this article he enhances that
Flex application by adding the ability to upload photographs to
the popular Flickr image hosting service, and then use bit.ly to
integrate a shortened link to the photo in a tweet.
http://www.sitepoint.com/article/1753
Give Great Service: 5 Essential Tips
by Miles Burke
Great client service goes way beyond that practiced smile, it's
a far more holistic approach to just about everything you do. In
this article Miles outlines 5 ways you can provide great service
and attract loyal clients.
http://www.sitepoint.com/article/1747
Git: Your New Best Friend
by Alec Clews
Git represents the current state of the art in version control
tools, but it's surprisingly easy to use. In this article Alec
Clews introduces Git and demonstrates why it's your new best
friend.
http://www.sitepoint.com/article/1749
Build Your Own Data-backed Personas
by Matthew Magain
When Matt created the SitePoint Personas, he combined two
different methodologies, and it worked surprisingly well. Here,
he describes the process he followed, and explains how you might
do the same when designing your own web sites.
http://www.sitepoint.com/article/1742
HOT DISCUSSIONS - - - - - - - - - - - - - - - - - - - - - - - - -
Testing CSS Cross Browser
<http://www.sitepoint.com/forums/showthread.php?threadid=637076>
Introducing the new SitePoint Community Manager
<http://www.sitepoint.com/forums/showthread.php?threadid=637198>
Chicken or egg, copy or design?
<http://www.sitepoint.com/forums/showthread.php?threadid=636689>
Help with validator.w3 instructions
<http://www.sitepoint.com/forums/showthread.php?threadid=636591>
NEW BLOGS - - - - - - - - - - - - - - - - - - - - - - - - - - - -
JavaScript & CSS Blog: STYLISH SCRIPTING
How to Write a Cookie-less Session Library for JavaScript (1
comment)
http://www.sitepoint.com/blogs/2009/09/03/javascript-session-variable-library/
Cookie-less Session Variables in JavaScript (13 comments)
http://www.sitepoint.com/blogs/2009/09/02/cookieless-javascript-session-variables/
CSS Font-Sizing: a Definitive Guide (54 comments)
http://www.sitepoint.com/blogs/2009/08/20/css-font-sizing-tutorial/
Cross-browser JSON Serialization in JavaScript (15 comments)
http://www.sitepoint.com/blogs/2009/08/19/javascript-json-serialization/
Web Design Blog: PIXEL PERFECT
19 Spooky Icon Sets For Halloween (5 comments)
http://www.sitepoint.com/blogs/2009/09/14/spooky-icon-sets-for-halloween/
Seven jQuery Plugins That Let You Do Cool Stuff With Images (7
comments)
http://www.sitepoint.com/blogs/2009/09/14/seven-jquery-plugins-images/
Sunday Morning Coffee Art (5 comments)
http://www.sitepoint.com/blogs/2009/09/13/sunday-morning-coffee-art/
How To Create A Color Palette From An Image Using Kuler (4
comments)
http://www.sitepoint.com/blogs/2009/09/10/how-to-create-a-color-palette-from-an-image-using-kuler/
Photoshop Web Graphics Tips (2 comments)
http://www.sitepoint.com/blogs/2009/09/09/photoshop-web-graphics-tips/
Five Useful Blog Editors (7 comments)
http://www.sitepoint.com/blogs/2009/09/08/five-useful-blog-editors/
Create Your Own Scribbled, Scratchy Typeface In Illustrator (5
comments)
http://www.sitepoint.com/blogs/2009/09/05/create-your-own-scribbled-scratchy-typeface-in-illustrator/
Podcast Blog: THE SITEPOINT PODCAST
SitePoint Podcast #27: CSS with Rachel Andrew (2 comments)
http://www.sitepoint.com/blogs/2009/09/12/podcast-27-css-rachel-andrew/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach thousands of opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's Design View.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
mailto:design@sitepoint.com
To subscribe, send a blank email to:
mailto:subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Design View is (c) 1998-2009 SitePoint Pty.
Ltd. All Rights Reserved. No part of this Newsletter may be
reproduced in whole or in part without written permission. All
guest articles are copyright their respective owners and are
reproduced with permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
[email]
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=[email]>
To leave this list, please visit:
[unsubscribe]
Do Not Reply to this email to unsubscribe.
We send this newsletter using Campaign Monitor.
http://www.campaignmonitor.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Topics
Download sample chapters of any of our popular books.
Learn more with SitePoint books