Since its emergence, the digital photography market has gradually supplanted the traditional one. APN and digital SLR cameras entered our lives, and some people announced the death of silver-based images. This is not all lie, and yet old-fashioned images have been particularly popular in the past few years. All we do seem to do now is try to recreate the atmosphere of those bygone times anyway. Blurry, distorted and over-saturated images are not just a fad anymore. People have became familiar with the style and even consider it a full-fledged photographic genre.And this is where toy cameras play a role. These devices, made entirely of plastic, including often the lens itself, are not only toys. Sure, they cost next to nothing and have no controls to speak of, but this is what people like about them: they create unpredictable pictures, with equally unpredictable vintage effects. Once you understand this, the rest is a beautiful game. Take them anywhere, anytime, and photograph whatever you like. Photo credit: Pirouetting, by helenannsiaHow does this apply to modern design? Now that vintage websites are so trendy, why not look to this type of image for inspiration? You probably don’t want to go through the trouble of taking up silver-based photography because that would mean buying, developing and scanning film, maybe even making prints. That takes time and is expensive.What you can do, though, is use the magic of Photoshop to make your ultra-sharp, high-definition images look like they were taken with one of these cameras. Below are a list of the most famous toy cameras and some tutorials that can be used to recreate their famous effects. Most of them are part of the Lomography movement, but you might also want to consider some other options in trying to recreate that authentic look. You also may be interested in our previous article “The Disturbing Beauty of Oversaturated Pictures and Lomography.”By the way, what was the last time you visited our sister site Noupe? Subscribe to Noupe's feed for more inspirational and design-related articles.Famous Toy CamerasToy cameras are cheap, low quality and yet functional. As such, the deformations in the photos they produce are pronounced, and not all images are guaranteed to be perfectly exposed. Still, there are just so many of them these days that picking a few is hard. The ones presented here have paved the way for the success of the others. You may know them but not the stories behind them?DianaLet’s start where it all began. Picture yourself in Hong Kong in the early ’60s, when a factory starts producing the Diana. This inexpensive plastic-body camera was at the time usually given away as a novelty gift. Occasionally, it would be used by actual photographers who took advantage of the various effects it produced. And many effects there were. Because of the poor quality of materials used, the Diana camera was disposed to light leaks, leading to film damage, an effect typically fixed by sealing the seams with light-proof tape. Handy, huh?But the plastic body wasn’t the most interesting part: it was the lens, also made out of plastic. Not only did it enhance the already low contrast created by the light infiltration, but it also made for odd color rendering, chromatic aberration and blurry images. As if this weren’t enough, the image circle only marginally covered the diagonal of the film frame, which is why Diana images have heaving vignetting. Photo credit: elZekahAs photographers started to deliberately exploit these characteristics, production grew through the ’70s and opened the way for other toy camera manufacturers. Photo credit: chomdeeLomo LC-AThis is where things get a bit tricky, so pay attention. It’s now the beginning of the ’90s, and for a few years the Russian factory Lomo PLC has been producing the Lomo LC-A camera, which basically has all of the characteristics of a toy camera (vignetting in particular). But production was stopped, and the camera was all but forgotten until two Austrian students found one at a flea market in 1991 and decided to exploit its marketing potential. They convinced the director of the Lomo PLC factory to relaunch production and negotiated an exclusive contract for distribution with their brand-new company: Lomography AG. Photo credit: maakuAnd here begins the Lomography movement. If the term is familiar to you, you probably know at least two things about it. First, it promotes casual snapshot photography. Second, it is associated with over-saturated and high-contrast images. To confuse things, this second characteristic has nothing to do with the LC-A camera itself or with any other cameras for that matter. It is actually the result of the way the film is processed, which would usually be cross-processing. But Lomography is a movement, not a technique, and it was certainly the first to promote camera imperfections as an aesthetic. The success of the LC-A camera helped spread this aesthetic. Photo credit: citronnadeHolgaWith the success of this movement, Lomography AG became interested in other low-cost cameras, such as the Holga, which had been produced in China for a decade. Even though it was made by a different manufacturer, the Holga was considered the successor of the Diana. Inspired by its predecessor, the Holga was designed as an inexpensive mass-market camera. And like the Diana, it is not of the best quality and has the same flaws. Photo credit: babyabby10But the Holga became popular and was even exported to the West over time, mostly for photo-reporting, for which its low profile was appreciated. Its problems were no longer problems, and now it is not surprising to hear of Holga photos winning awards. Because it is entirely manual, one can create effects, such as double exposure and panoramas, by not winding the film. Photo credit: Bill Hansen (website)ActionSampler, SuperSampler, OktomatThese three cameras don’t have many differences. They all take multiple shots in a set period of time, thus creating micro-images that look like short animated movies. The Actionsampler and Supersampler have four lenses each, while the Oktomat has eight, fitting eight frames into the standard 35mm. Photo credit: amylynnthompsonTo make them a bit more fun, what you see through the viewfinder is not exactly what you get. Photo credit: golfpunkgirlLomo Fisheye 2As the name suggests, the Lomo Fisheye camera has a fish-eye lens. It was the first 35mm compact camera to offer such a wide angle (170°), and unlike the other toy cameras covered here, it gave surprisingly good results for the price. The second edition came with several enhancements, such a viewfinder that covered the same angle as the lens (it was blocked off before). Photo credit: aapnootmiesThe effect created, often seen in sport images, can serve many other purposes. But the user should be aware of two major characteristics: strong deformation and light leaks. Photo credit: fahaPhotoshop Tutorials And ResourcesNow, let’s put all this into practice. Even if you are familiar with these effects, have ever actually tried to replicate them? There are a lot of different effects, and you can combine them to create unique images.Faking the Holga Camera and Fisheye LensHow to Fake a Holga Photograph This tutorial shows you how to fake Holga photographs in a few simple steps.Another Way to Fake a Holga Photograph Another tutorial on faking Holga photographs.Fish-eye effect This shows you how to create a fish-eye effect for a picture taken with a regular lens. This one is a video and it addresses two important points: the lens circle border is not supposed to be so sharp when taking a fish-eye photograph, and one often deals with light infiltration.Fish-eye effect Another fish-eye tutorial. It doesn’t show how to distort the image, so you will have to add this step yourself, but it adds a nice final touch to the image by using a picture of the inside of a fish-eye lens.Recreating Low-Quality Camera FlawsVignetting A very simple tutorial on recreating the vignetting effect.Soft-Focus Lens Effect What if you’re already happy with the contrast and color saturation of your image and just want to recreate the effect of a soft-focus camera lens or diffusion filter? In this tutorial, you’ll learn a fast and easy way to add a more traditional soft-focus lens effect to images.Faking Barrel Distortion and Chromatic Aberrations Here is a nice Photoshop plug-in to fake barrel distortion and chromatic aberrations. Adding these effects to your pictures will make them look even more authentic.Light Leaks Effect, Part 1 and Part 2 Of course, this article wouldn’t be complete without a great tutorial on light leak effects. Here is an awesome one, divided into two parts, each covering a different effect: a white-blur light and a colored bar leak.Working on Colors and Light ExposureGetting That X-Pro Lomo Look This tutorial is fairly quick and easy. It shows you how to get that great x-pro Lomo look by tweaking color. You’ll be exploring a new method of vignetting, and you’ll be widening and blurring the image a little.Cross-Processing Tutorial With so many possible permutations of film stock and processing techniques, there is no single, identifiable look to cross-processed images. The most common combination is C-41 as E-6, in which slide chemistry is used to process color negative film; and mimicking it in Photoshop is a quick job. Image contrast is usually high, with blown-out highlights, while shadows tend towards dense shades of blue. Reds tend to be magenta, lips almost purple and highlights normally have a yellow-green tinge.Cross-Processing Another cros-processing tutorial.Vintage Effect Age your images a give them a vintage effect.Using Textures and Double ExposureThrough the Viewfinder Did you know that Flickr has a Through the Viewfinder group? The idea is that you shoot through the viewfinder of an old camera using your modern digital or film camera and create an interesting framing effect. Here is a tutorial on how to create this effect.Resources of Speckle Pattern Yes, there is also a Flickr group called “Noise and Dust Through the Viewfinder.”Paper Texture Effect Here is a quick and easy tutorial for those who want to learn the art of taking a photo and turning it into an old-fashioned vintage picture.Some More Paper Texture Effect Another tutorial (this one a video).Filmstrip Effect Download a filmstrip template and use it to create negatives of your pictures.Double Exposure When you take a double-exposed photograph, the results are usually a bit unpredictable. With Photoshop you have much more control over the result.Another Way to Create Double Exposure While the most common way to create a double exposure is by using a different blending mode on the top layer and adjusting its opacity, this method accurately simulates how a camera takes a double exposure.Other IdeasNo tutorials are needed to create these effects. They are included here merely to give you more ideas. You’ll still need to work on your pictures to get that vintage look. Then, just put them together and enjoy.Shoot Series Like the Oktomat and the Actionsampler Draw inspiration from the Oktomat and Actionsampler cameras. You’ll get either four or eight images in the same frame, each of them having been shot after an interval of only a few seconds. Photo credit: Look!, by MoyöShoot Series like the Supersampler The Supersampler effect is quite similar to the Actionsampler: four images in the same frame, but spaced differently. And remember that you can arrange layers both horizontally and vertically. Photo credit: moving clocks run slow, by aleinsomniacPanorama 1 Panorama images don’t necessarily have to be perfectly arranged. Here is an example of what else can be done. Photo credit: Christophe Dillinger (website)Panorama 2 Another inspiring panorama. Photo credit: bruceberrienPanorama 3 The panorama view can be combined with a filmstrip effect. It simulates a double-exposure panorama taken on a manual camera. Photo credit: mikrofoniuszWant More?PolaroidIf cheapness is a defining characteristic of toy cameras, it surely isn’t for Polaroids. The Polaroid camera itself is not expensive, but because Fuji is now the only company that produces the film for it, getting affordable ones has become difficult. But this may change in the next few months thanks to the Impossible Project.Going back a bit, the world’s first commercial instant camera was the “Land” camera, unveiled in 1947. Since then, Polaroid has become synonymous with instant photography, because most of the cameras have been created by the Polaroid Corporation. Nowadays, the cameras are used by photographers mainly to preview their work before actually shooting. But as toy cameras, they are fun to play with and can make for nice effects. Photo credit: paine666Polaroid and Transfer EffectRetro Polaroid Coloring on Your Photos This is a simple tutorial on how to get that retro Polaroid coloring in your photos.Polaroid Transfer Effect This Photoshop tutorial shows you how to create a cool old photo transfer edge effect using a piece of stock photography, an alpha channel and the burn and dodge tools.Showcase of Beautiful PicturesConsidering that Flickr has a group for almost every subject, it is no surprise that there is one for toy cameras. Here is a showcase of the most beautiful images from it. Photo credit: have I told you lately, by cHr1st1an S Photo credit: ubu84 Photo credit: 000038, by qwj Photo credit: 54330027, by etara Photo credit: Ipanema Beach – Brazil, by marcelo_maia Photo credit: Hélicoïdal, by Cathy Lehnebach Photo credit: Purgatoire, by stiveune Photo credit: untitled, by Greg Zauswoz Photo credit: untitled, by bradbrochill Photo credit: .., by cjlomo Photo credit: spree1, by hellomelly Photo credit: Love me two times, by laszlo_ototh Photo credit: exit, by renaishashin Photo credit: untitled, by Sergio Conde Sánchez Photo credit: Akhirnya buat lomba juga -__-, by febryanyovi Photo credit: Cosy Clausterphobia, by miss_michelle Photo credit: svema_test1, by ashtonleee Photo credit: untitled, by poppart Photo credit: lomographicsocietyinternational Photo credit: La Bòfia – Redscale, by fgali1964 Photo credit: chomdee Photo credit: offcenter Photo credit: Holga Tennis, by Nick Whitmoyer Photo credit: golfpunkgirl Photo credit: eyetwistFurther ResourcesOld Toy Camera – Photoshop action This Photoshop action makes images look as though they are aged prints, shot on a toy or antique camera. Also included are two actions that create borders similar to those seen on photos from many antique and toy cameras.Toy Camera Contest FILE presents here a selection of images submitted for its Toy Camera Contest. This collection gives an idea of the challenge facing the judges to find three winners. The range and quality of the submitted images are impressive.Gallery This project is home to photos taken with toy cameras. Most are plastic: Holga, Diana, Dorie, Debonair, Lubitel, Banner, Snappy and Yunon. Distortion, blur and imperfection are some of the characteristics that endear these cameras to enthusiasts.Abduzeedo: 60 Interesting Lomo Fisheye Shots Gathered here are a few Lomography fish-eye shots. Some were taken with Lomography cameras such as the Diana and the LC-A+ with a fish-eye lens adapter attached.Lomography.com Lomographic Society International Website.(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | 11 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography, photoshop, toy camera, tutorial, Tutorials, vintage

Over the last year or so I have slowly opened my mind up to the possibility that there might be more art to email design then I had ever thought possible. I find it hard to look past the technical limitations and embrace this niche for the reality of the possibilities it offers. This collection shows that the niche can be filled with beautiful designs. http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/

What comes right after the blog footer? The comments of course! This fine collection of blog comment designs demonstrates the variety and possibilities in this section of your blog design. The irony is that the comments can be one of the most engaging aspects of a blog, this is after all where users can actually interact with you, and yet this is a section all to often left unconsidered. I know even on my blog the comment design has been the least of my concerns and this is likely a big mistake; but as with a 2 year old, you pick your battles. http://www.webdesigndev.com/inspiration/the-best-of-blog-comment-designs

The region at the end of a blog post, and before the comments, has turned into a gold mine (or mine field depending on your view) of possibilities. Countless people use this as a place to encourage social bookmarking, linking, tweeting and so on. Others use this as a chance to guide you to other relevant articles. While others do their best to capitalize on it by directing you to commercial goods or affiliate driven links. What ever your needs this collection will give you some things to think about when designing your next blog post footer! http://bluefaqs.com/2010/02/30-well-executed-blog-post-footer-designs/

  I thought I could not be out-geeked. With a background in radio, and having dabbled in the demo scene on the Commodore 64 and hung out on BBSes and IRC for a long time and all the other things normal kids don’t quite get, I thought I was safe in this area.Then I went to my first WhereCamp, an unconference dealing with geographical issues and how they relate to the world of Web development. Even my A-Levels in Astronomy did not help me there. I was out-geeked by the people who drive and tweak the things that we now consider normal about geo-location on the Web.Pulling out your phone, find your location and getting directions to the nearest bar is easy, but a lot of work has gone into making that possible. The good news is that because of that effort, mere geo-mortals like you and me can now create geographically aware products using a few lines of code. So, let’s give the geo-community a big hand. [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]Why Geo MattersFirst of all, why is it important to consider physical location on this planet (at this moment) when we develop Web products? There are a few answers to this.The first answer is mobility. The days of people sitting in front of desktop machines at home are over. Sales of mobile devices, laptops and netbooks have overtaken those of bulky stationary computers in the last few years. The power of processors now allows us to use smaller, more mobile hardware to perform the same tasks. So, if people use their hardware on the go, we should bring our systems to them. Which brings us to the second—very important—point: relevance.Giving the user content that is relevant to the physical space they are in at the moment makes a lot of sense. We are creatures of habit. While we love the reach of the Internet, we also want to be able to find things in our local area easily: people to meet, cafes to frequent, interesting buildings and museums to learn about. The advertising industry—especially of the adult and dating variety—realized this years ago. I am sure you have come across one of the following before:I am sure these ads are more successful than the ones that show only user names. That the photos and names are the same for every location doesn’t seem to be a problem (but yes, I noticed it). So how does it all work?Getting The User’s Location Via IPEvery computer on a network has a number that identifies it: its IP address. The Internet is nothing but a massive network, and your IP number is assigned to you by the service provider that you have used to connect to that network. Because the numbers that service providers assign change from one geographical location to the next (much like telephone numbers), you can make quite a good estimate of where your visitors are from.To find out where a certain phone number is from, you use a phone book. To find out where an IP is from, you can use the Maxmind GeoIP database. Maxmind also provides a JavaScript solution that you can use on websites:<script type="text/javascript\" src="http://j.maxmind.com/app/geoip.js"></script> <script> var info = document.getElementById('info'); var lat = geoip_latitude(); var lon = geoip_longitude(); var city = geoip_city(); var out = '<h3>Information from your IP</h3>'+ '<ul>'+ '<li>Latitude: ' + lat + '</li>'+ '<li>Longitude: ' + lon + '</li>'+ '<li>City: ' + city + '</li>'+ '<li>Region: ' + geoip_region() + '</li>'+ '<li>Region Name: ' + geoip_region_name() + '</li>'+ '<li>Postal Code: ' + geoip_postal_code() + '</li>'+ '<li>Country Code: ' + geoip_country_code() + '</li>'+ '<li>Country Name: ' + geoip_country_name() + '</li>'+ '</ul>' info[removed] = out; </script>This gives you some information on the user (try it out for yourself). The challenge, though, is relevance. Your IP location is the location of the IP that your provider has assigned to you. Depending on your provider, this could be quite a ways off (in my case, I live in London, but my provider used to show me as living in Rochester). Another problem is if you work for a company that uses a VPN. At Yahoo, for example, I have to connect to the VPN to read my company email, and I have to choose a location to connect to:So, for a solution like the one highlighted above, I would show up as being in a totally different part of the world (which might be useful for watching Internet TV in the UK while I am in the US). IP geo-location, then, is an approximation, not a dead-on science.Getting The User’s Location Via The W3C Geo APIGuessing geographical location via IP is possible, but it can also be pretty creepy. Being able to take advantage of your location is useful, but security-conscious users and people who are generally suspicious of the Internet are not happy with the idea of their movements being monitored by a computer. This makes sense: if I can monitor your whereabouts day and night, I would know where and when to rob your house without you being there.There are a lot of solutions to the challenge of having good-quality geo-location and maintaining privacy. Google Gears has a geo-location service; Plazes helps you store your location; and Yahoo’s Fire Eagle is probably the most polished way to securely maintain your location on the Web.The problem with all of these services is that they require the user to either install a plug-in or visit a Web service to update their location. This is not fun; browsers should do the work for you.We now have a W3C recommendation for a geo-location API that allows browsers to request the geographical location of the user. This makes it less creepy, and you get real data back.Firefox 3.5 and above supports the W3C geo-location API. So does Safari on the iPhone if you run OS 3.0 or above. If you use the API, the browser will ask the user whether they want to share their location with your website.Once the user allows you to get their location, you get much more detailed latitude and longitude values. Using the API is very easy:// if the browser supports the w3c geo api if(navigator.geolocation){ // get the current position navigator.geolocation.getCurrentPosition(

// if this was successful, get the latitude and longitude function(position){ var lat = position.coords.latitude; var lon = position.coords.longitude; }, // if there was an error function(error){ alert('ouch'); }); }Compare the IP and W3C solutions side by side. As you can see, there can be quite a difference in measuring the visitor’s location. The extent of the difference is shown in the following demo:Converting Latitude And Longitude Back Into A NameHaving more information is nice, but we have lost the name of the city and all the other nice data that came with the Maxmind database. Because the location has changed, we cannot just grab that old data; we have to find a way to convert latitude and longitude coordinates into a name. This process is called “reverse geo-coding,” and several services on the Web allow you to do it. Probably the most well-known is the geo-names Web service, but it has a few issues. For starters, the results are very US-centric.One freely available but lesser-known reverse geo-coder that works worldwide comes from a surprising source: Flickr. The flickr.places.findByLatLon service returns a location from a latitude and longitude coordinates. You can try it out in the app explorer, but by far the easiest way to use it is by using the Yahoo Query Language (or YQL). YQL deserves its own article, but let’s just say that, instead of having to authenticate with the Flickr API and read the docs, reverse geo-coding becomes as easy as this:select * from flickr.places where lat=37.416115 and lon=-122.0245671Using the YQL Web service, you can get the result back as XML or JSON. So, to use the service in JavaScript, all you need is the following:<script type="text/javascript\" charset="utf-8"> function getPlaceFromFlickr(lat,lon,callback){ // the YQL statement var yql = 'select * from flickr.places where lat='+lat+' and lon='+lon;

// assembling the YQL webservice API var url = 'http://query.yahooapis.com/v1/public/yql?q='+ encodeURIComponent(yql)+'&format=json&diagnostics='+ 'false&callback='+callback;

// create a new script node and add it to the document var s = document.createElement('script'); s.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(s); };

// callback in case there is a place found function output(o){ if(typeof(o.query.results.places.place) != 'undefined'){ alert(o.query.results.places.place.name); } }

// call the function with my current lat/lon getPlaceFromFlickr(37.416115,-122.02456,'output'); </script>Combine that with the other services, and we get a more detailed result and can put a name to the coordinates:The Trouble With Latitude And LongitudeWhile latitude and longitude coordinates are a good way to describe a location on Earth, it is also ambiguous. The coordinates could represent either the centre of a city or a point of interest (such as a museum or a pub) in that spot.WOEID to the RescueTo work around the problem, Yahoo and Flickr (and soon will Twitter) support another way to pinpoint a location. The Where On Earth Identifier (or WOEID) is a more granular way to describe locations on Earth. Because Flickr supports it, we can easily get get photos from a particular area:select * from flickr.photos.search where woe_id in ( select place.woeid from flickr.places where lat=37.416115 and lon=-122.02456 )Using this and a few lines of JavaScript, showing geo-located photos is pretty easy:This has also been wrapped in a simple-to-use YQL solution. The following code will display 10 photos of Paris:<script> function photos(o){ var container = document.getElementById('photos'); container[removed] = o.results; } </script> <script src="http://query.yahooapis.com/v1/public/yql?q= select * from flickr.photolist where location="paris,fr " and text="" and amount=10&format=xml& env=store://datatables.org/alltableswithkeys&callback=photos">You can also play with this in the YQL console.Why Not Search For The Location’s Name?The main question about implementations such as the one above is why couldn’t we just do a search on Flickr for the city, instead of doing all the complex geo-lookups? The reason is false positives. Take Paris, for example: if you want to show photos of Paris on a travel website, you don’t want Paris Hilton to show up in there. Same goes for Jack London. You may also want to show photos of London, England, not London, Ontario. Geographic data is full of these kinds of gotchas, and the term for finding the right one is “disambiguation.” See the Wikipedia article on “Victoria” to see just how many geographical contexts this term can have.Turning Text Into Geo-DataFinding a visitor’s geographic location is all well and good, but it doesn’t mean much if you can’t link it to information for that area. This is where it gets tricky. For Flickr (and soon Twitter), this is easy, because both services are able to attach geographical locations to the content you put in them. This is not so for most of the information on the Web, though, and this is when we resort to clever algorithms, machine-learning, pattern-matching and all the other think-tank stuff that computers and the scientists in front of them do.Say you want to identify the geographical locations that a particular text or Web page talks about. Yahoo offers a service for that called Placemaker, and it is pretty easy to use. You need to get a developer key and send this as appid, send a text as documentContent, define the type of the text as documentType and define the type of data you want back as outputType. All of this needs to be sent as a POST to http://wherein.yahooapis.com/v1/document:<form action="http://wherein.yahooapis.com/v1/document\" method="post"> <textarea id="text" name="documentContent">Hi there, I am Chris. I live in London, I am currently in Sunnyvale and will soon be in Atlanta and Las Vegas.</textarea> <div><input type="submit" name="sub" value="get locations"></div> <input type="hidden" name="appid" value="{YOUR_APP_ID}"> <input type="hidden" name="documentType" value="text/plain"> <input type="hidden" name="outputType" value="xml"> </form>You can try this out yourself. Using PHP to call the API instead of a simple form, you can even format the output nicely. See it in action here:While developers who have played around with Web services won’t find Placemaker hard to use, the service can be daunting for the average developer. That is why I built GeoMaker some time ago. GeoMaker allows you to enter a text or URL, select the locations you want to include in the final outcome, and get the locations either as a map to copy and paste or as micro-formats.However, because there is also a YQL solution for using PlaceMaker in JavaScript, we can do the same with a few lines of client-side code to enhance an HTML document. Check out the following example:To use this, you need three things: a text with geographical locations in them in an element with an ID, a Google Maps API key (which you can get here) and the following few lines of code:<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script> <script> addmap.config.mapkey = 'COPY YOUR API KEY HERE'; addmap.analyse('content'); </script>This makes it incredibly easy to give your visitors a sense of what part of the world a text is related to.Adding Maps To Your DocumentsOnline maps have been around for a while now (and Google Maps was instrumental in the rise of AJAX), and many providers out there allow you to add maps to your documents. Google is probably the leader, but Yahoo also has maps, as does Microsoft and many more. There is even a fully open map service called Open Street Maps, which has been instrumental in the recent rescue efforts in Haiti.If you want interactive maps, probably the easiest thing to use is Mapstraction, which is a JavaScript library that does away with the discrepancies between the various map providers and gives you a single interface for all of them. 24ways published a good introduction to it three years ago.Probably the simplest way to show a map that supports markers and paths in your document without having to dive into JavaScript is the Google static maps API. It creates maps as images, and all you need to do is provide the map information in the src URI of the image. For example, in the script example above, this would be:http://maps.google.com/maps/api/staticmap? sensor=false &size=200x200 &maptype=roadmap &key=YOUR_MAP_KEY &markers=color:blue|label:1|37.4447,-122.161 &markers=color:blue|label:2|37.3385,-121.886 &markers=color:blue|label:3|37.3716,-122.038 &markers=color:blue|label:4|37.7792,-122.42You can define the size and type of the map. If all you provide is the location of markers, the API will automatically find the right zoom level and area to ensure that all markers are visible. Google’s website even offers a detailed tool to create static maps, including markers and paths.Geo Is A Space To WatchI hope this has given you some insight into all of the things you can do to bring the earth to your product and to put your product on the map. Geo-location and geo-aware services are already huge, and they’ll be even more important this year. There will be more services—some mobile providers are ready to roll out new hardware and software—and now you can be a part of it.What the geo-world needs now is a designer’s eye, and this is where you can help the geo-geeks create apps that matter, that look great and that make a difference in our visitors’ lives. For inspiration, check out Mapumental, which allows you to pinpoint a place to live in London, or see how Google Earth and some 3-D Objects allow you to race a milk truck on real map data.(al)© Christian Heilmann for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: javascript

Janko at Warp Speed has a fantastic write up and sample set of table designs. This is another one of those commonly neglected web elements that can really be beautified rather effectively. http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

  The design profession is full of happy folks, and understanding why so many designers enjoy their work is not hard. But not all are so happy. If you’re not careful, the joy of getting paid to pursue your passion can be tainted by the less joyous realities of the professional world.You see, no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. This is true whether you work freelance, for an agency or in-house with a company.Every week I hear from designers who are struggling to come to terms with these realities. Unhappy with their current circumstances, they write to ask for advice on improving their lot. Usually, they either claim not to understand how things got so bad, or they lay the blame somewhere other than at their own feet. In every case, however, the sole cause is their poor choices and lack of professional acumen. It needn’t be so.Design is craft, but no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. Image source[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]Professional DiagnosisHere, I’ll paraphrase a few emails I’ve received from designers seeking advice. For each, I’ll diagnose the situation, explain in no uncertain terms what should have been done to avoid the situation and suggest a strategy the designer can follow to improve their circumstances.These circumstances are not uncommon. Many of you reading this are likely experiencing similar problems… or may at some point in the future. I hope that the information, advice and strategies presented here will help you avoid these and other problems.1. From A Freelance DesignerQuestion: “I recently graduated from design school and have started freelancing, and I’m wondering how you get clients? How do you get your name out there?”This person may just as well have jumped out of an airplane and then asked, “Now, how do I go about finding parachute? Oh, and should I land somewhere specific? How exactly do I do that?” Even so, this lack of foresight is quite common. The immediate lesson is that you shouldn’t become an independent professional with little to no professional experience, with no prospects and knowing little to nothing about the business.Fresh out of college or design school, you’re not a professional; you’re a technician (by definition, the opposite of professional). For the next few years you should be acquiring the skills, knowledge and understanding required of a design professional. The place to do this is in the company of peers and under the wings of mentors: at an agency or in house with a company. The successive lessons and built-in support system inherent in these environments are essential to a designer’s professional development.The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years, while you let your agency or company carry the burden of acquiring clients and running the projects. If you are any good, in time you will earn the respect of your peers and superiors, establish a good reputation (spread by word of mouth) and acquire professional acumen. If in that time you make any effort at all to share your work and thoughts with the wider design or business community, your name will become known (through word of mouth and your portfolio or blog), and your reputation will be built on substance rather than on social marketing’s smoke and mirrors. This would be the appropriate time to embark on a freelance career.As a freelancer, you’ll be running the whole show. So, you’ve got to be an ace at finances and budgeting; at speaking with and converting potential clients; at knowing what to discuss in order to weed out unsuitable potential clients; at preparing all manner of legal and project-specific documents, writing proposals, project management, intra-project client communications (and being the confident, unflinching pro in the face of every client request, question and distasteful situation); at dealing with dozens of types of unforeseen issues without hesitation; at maintaining tax information and constantly preparing various tax and business forms; at marketing, preparing and maintaining your own branding and identity, with its various elements; and at knowing how to begin and conclude all kinds of projects confidently. Oh, and you’ll also need a constant flow of interested potential clients.If you’re not confident and accomplished in all of these areas, then you’re not ready to be a freelance designer.Freelancing is only suited to seasoned professionals. Pursuing a freelance career as your first step in the profession is almost always a foolish move. Professionalism is maintained by habit. If your first step is a misstep, you’ve set a poor tone for the work ahead. Unless you immediately correct your mistakes, the habits you’ll develop will be clumsy and unprofessional.The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years. You need to be good at whatever it is you are doing. Image source2. From An Agency DesignerQuestion: “I’m not very good at the discovery meeting with clients. I’m never really sure what to ask or how to figure out what sort of design they’re looking for. My project manager or C.D. usually ends up asking most of the design questions. What’s the best way to handle this situation?”This is a common issue for designers at agencies, especially those with little experience. Luckily, an agency is a good place to gain experience and competence. But the question signals a few issues that require attention.First of all, design questions are not really appropriate during the discovery process. Granted, specific branding constraints may need to be defined and understood, but the design you will craft will come not from the client’s judgment and understanding of design but from yours alone. The design will be your articulation of what they need, based mostly on their business aims, the website’s purpose, their customers’ needs and expectations, the end users’ specifics, etc. In fact, if you ask no design questions at all, you’re probably on the right track.Imagine for a moment that you’re a physician trying to determine the best course of treatment for your patient. In that situation, you would not ask the patient what he thinks should be prescribed. Instead you would inquire about his symptoms, history, environment, physical needs (e.g. is he a pro athlete, or does he simply need to be able to get around normally?). The answers to these questions will define the constraints and indicate the appropriate course of action. Your patient’s opinion on what prescription would be appropriate is likely irrelevant; he came to you because he lacks the ability to help himself.Go into the discovery meeting prepared. Before the meeting, learn as much as you can about the company, its history and its past and current activities. Script a list of questions—some specific to this client and some appropriate for any client—to get the ball rolling. These questions will serve as a springboard to more in-depth discussion, which in turn will flesh out what you need to know.One more thing: you’re the design professional and it’s your responsibility to conduct the project successfully. You (not the PM or CD) should be driving the discovery. Use your time at the agency to improve your discovery skills, taking on more responsibility with each successive client. Reflect on each project’s discovery process, and look for ways to improve the process and your questions. With time and effort, you should become competent in this essential part of the design process.3. From A Freelance DesignerQuestion: “Some of my clients expect three or four (or more) comps from me. But that’s a lot of work, and I would prefer to show just a couple. Should I just charge more if they want more comps? How do some designers get away with just one or two for all of their clients?”These are interesting questions, and they beg a couple more:Why is this designer allowing his clients, who are not designers, to set the number of design comps?Why is he letting quantitative preference rather than qualitative necessity frame his understanding of the issue?Good design is not found by picking from a pack of arbitrary options, but is rather the result of deliberate, contextual choices. Taking a scattershot approach to design is in no way effective. Your clients may not appreciate this, but you certainly should! Your responsibility is to ensure that your clients don’t shoot themselves in the foot.The only person who knows how many design options are appropriate is you: the designer who is engaged in the process. And in almost every case there is one best design solution. Sometimes another compelling direction is worth considering and presenting to the client, but this cannot be known until you have fully engaged in the process, conscious of the parameters specific to that project.In most cases, you’ll explore a host of options during the design process. A thorough exploration will cull a majority of the trials, leaving only the most appropriate and compelling candidate(s)—one or two. These and only these design options should be shown to the client. Inferior designs should never be presented, even to fulfill a request for more options (options for what: mediocrity?).As a freelance design professional, or even as an agency designer, your responsibility is to define how many design options to present in a given situation. If a potential client insists on a less effective and less professional process, do not agree to work with that client. Compromise never brings excellence and has no place in design or professionalism. If you become comfortable making this sort of compromise, other compromises will also become easy for you. Your clients deserve and are paying for more than a compromised design.4. From An Agency DesignerQuestion: “I seldom get to meet my clients before I present design comps to them. By that point, the projects almost always become a tiresome series of re-workings of my original ideas. How can I change this?”One wonders what these original ideas were based on if the designer has never met the clients. If so, either 1) this person is at the wrong agency, and/or 2) this person lacks the professional understanding or the backbone to insist that she decide how the agency should structure design projects and client-designer interaction.Relationships are built on trust, and trust is born of experience and understanding. Your client cannot trust someone they have never met and who they know nothing about. So, when designs are presented by someone the client has never met, no wonder the client is a bit reticent and inclined to second-guess the designer’s decisions. These and the ensuing problems are all a result of the designer’s failings. Yes, it’s on you. Always.As the designer and an aspiring professional, you must insist on driving the design process. This means that you must be the one to meet with the client in the beginning. If a project brief is required, you must be the one to create it, based on your direct conversations with the client and his team.If your agency has a process in place that prevents you from fulfilling your responsibilities, your options are either to change the process or to find a better agency. Anything less relegates you to an irresponsible practice in an unprofessional environment. Hopefully, this is not acceptable to you, because it would erode the habits you are professionally obliged to cultivate.5. From A Freelance DesignerQuestion: “I love to design, and I think I’m pretty good at it. But I’m not comfortable talking to clients. Whenever I’m on the phone or in front of a client, I get very nervous. I think my nervousness makes me seem less capable, and I’m pretty sure I lose some of my client’s confidence. What can I do to correct this? Should someone else do the talking?”Effective communication is one of a designer’s most important jobs. Every communication, whether by email or phone or in person, is an opportunity to demonstrate value and win confidence. And if you don’t demonstrate value, you’ll seldom win confidence. Like designer #1 above, you may simply not be prepared to be a freelance professional.If you fail in communicating, no matter how skilled a designer you are, you won’t get the chance to ply your skills very often, and seldom for the best clients. The best clients are those who invest complete trust in their designers. That trust must be earned before any actual designing happens (see designer #4 above).And no, someone else should not do the talking. The design professional’s job is to show confidence when dealing with clients. No one else can communicate your value or win trust for you. The reason clients distrust those who do not communicate with confidence is because this trait signals other incompetencies. This may sound harsh, but it’s a fact: if you’re not confident, it is because you lack capability (whether professional competence, design skill or perhaps vocabulary)… and you know it. Address this void, and your confidence will shine through.If you lack confidence in conversation, start to address this deficiency immediately or find another calling. Otherwise, you may have a bright future as a production artist somewhere, but not much of one as a design professional. Design professionals are experts at every aspect of interacting with people.Confidence aside, it goes without saying that excellent vocabulary is an important component of effective communication. People judge you by your words, as well they should. Knowing this, your professional responsibility is to work on your vocabulary, just as you work on your design ability: daily.ProfessionalismSkill in design is only part of what defines a competent professional. Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others (whether clients, co-workers, employees or others). Professionalism is also measured by how well you uphold ethical standards in making the difficult decisions in every area of your work.Talent and skill can make you a technician; and a technician is, as we noted, not a professional. For context, think of traditional professions: lawyers, doctors, architects. The enormous responsibility they are entrusted with, and their ability to carry out that responsibility across the scope of their work, makes these people professionals. Thus, an able professional would not be troubled by the questions posed in this article. Rather, they would know precisely how to proceed or how to circumvent these issues. If you have any of these questions, you may not be prepared to be a design professional.Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others. Image sourceAll of these situations result from designers believing that being a good designer is good enough. This profession has little room for those who lack a professional’s integrity and broad understanding. Designers who are willing to compromise and simply accept the faulty decisions that are handed to them have had their profession stolen from them. These designers have no business working with clients who pay good money for professional service.Be better than this. Your first step to success is to assume your rightful responsibility for everything that involves you. Dissatisfied with the flawed structure at your agency? You chose to work there; change your circumstances. Frustrated by your perpetual lack of prospects and stalled reputation? Sounds like you’ve got deficiencies to address. Overwhelmed by the challenges and complexities inherent in freelancing? You probably started freelancing without sufficient preparation.Fix it. You fix it. It’s all on you.Designers: you get paid to do what you love. How great is that!? But this fortunate and enviable situation leads to fulfillment only if you take full ownership of your profession. Otherwise, you’re carrying a time bomb. When it goes off, your career will either falter or be blown to smithereens. Don’t let this happen to you. Educate yourself. Have the courage and integrity to habitually make good choices so that you enjoy a long and happy career as a design professional.(al)© Andy Rutledge for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  Running an e-commerce website is a never-ending task, from trying to squeeze that extra bit of conversion rate out of the check-out page to figuring out which referrers give you the best traffic. There’s also a plethora of tools out there to help you achieve your goals. But which ones do what, and why should you use some of them? This article introduces some of these tools and offers a tip or two on how to use them.If you own or operate an e-commerce webs, you’ll find one or two things that you haven’t tried before. If you’re new to e-commerce, this article should give you insight into some of the possibilities available to you as you enter the market. A plethora of merchants out there could benefit from lower-cost e-commerce help and advice. Covered in this article are analytics tips, visualisation tools, product page tips, checkout tips,li>4 testing tools to try right now and a final tip.This article is only the tip of the iceberg. If you have any tips on usability, the check-out process, product pages, analytics or testing, please add them to the comments, so that this article becomes even more useful to readers.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]AnalyticsAnalytics are the key to knowing what’s going on with your website. This section gives five tips for using Google Analytics to get the most out of your stats. If you have a high-traffic e-commerce website or wish to get even more in-depth with analytics, it might also be worth considering some higher-level analytics packages such as Coremetrics, Omniture or Webtrends.We’ll focus here on more advanced analytics with the Google tool and assume that you know the basics of metrics.Analytics Tip 1: Advanced SegmentsAdvanced segments allow you to do everything you normally do with Analytics, but with only on a small subset of data. How is this useful? Say your e-commerce website serves both the UK and US. You could create two advanced segments, one for your US visitors and one for your UK visitors. This allows you to zero in on how your US visitors differ from your UK visitors in terms of purchasing habits, website usage, searches and so on.Also, why not compare two or more different referrer sources by a number of metrics to see which provides better-quality traffic? The list is endless and limited only by your imagination.Want to find out more with more examples? Read Avinash Kaushik’s advanced segments article.Analytics Tip 2: Custom ReportsLet’s face it: the default reports in Google Analytics aren’t superb; they don’t tell you what you really want to know. That’s where custom reports come in.You can add the metrics that matter to you, on the dimensions you want to see. An example would be a report of referring websites, with their average per-visit value, bounce rates and time spent on site (see graphic above).This report is so much more useful than your standard referrers report, with better information in one place.Analytics Tip 3: Advanced FiltersIn the example above, the report gave me 392 rows of information. In a world of top 10s and top 25s, humans can’t process that many rows and make sense of that information.This is where advanced filters come in. If we want to find the best-quality referrers on the list, we can get Google Analytics to filter out what we don’t want. Click “Advanced filter” at the bottom of the page and add this:This brings our 392 sources down to just 8; knowing what those 8 are is great. The filters above exclude all direct traffic (because we want to identify referring websites) and mail server referrals (we’re looking for websites), and they give us the highest success rates on per-visit value. Quick, valuable data.Analytics Tip 4: IntelligenceThis is a newer feature of Google Analytics, one that does some heavy lifting for you. Intelligence allows you to see changing traffic patterns without having to set up reports for everything you want to track. If one day your bounce rate goes up by 10%, you’ll see an alert and won’t have to rely on spotting it.This is really useful for discovering patterns. The image to the right shows an alert we got for one of our websites for which the bounce rate went through the roof. There was obvious panic until we realized that the last date to submit orders in time for Christmas had just passed. Panic over. The message on the home page was the cause of the spike in the bounce rate. We were notified of the issue quickly and could dig right away for the cause.Other Analytics ToolsWe’ve focused here mainly on Google Analytics because it is so widely used. However, that’s not to disrespect the plethora of worthy analytics tools out there:Clicky An interesting take on analytics: more useful standard reports and immediately accessible data, but lacks power user features.Motally Mobile analytics. If your website has high mobile phone usage, then you should try this tool to see more in-depth analytics.VisualizationData can be pretty overwhelming when you have thousands of entries. Visualization gives you quick insight into your data without overloading.Visualization Tip 1: WordleA genius service from Jonathan Feinburg, Worlde allows you to enter any kind of textual information and get a visual representation of that text on the screen. This is very useful for getting an overall view of your keywords and the structure of what’s going into your website. My blog returns the following visualization.What does this tell me? Well, given how much I’ve written about e-commerce, that word doesn’t appear! So, I need to pay much closer attention to my keyword selection and usage. I also need to pay attention to why the word “offline” is so big.If you need to export more than 500 words out of Google Analytics for your keyword report, check out this tutorial.Visualization Tip 2: Heat MapsHeat maps give you an easy way to look at your important pages without having to scour rows of data on your top content. They also provide much-needed information on what people are doing relative to the page size, length and placement of items, which data cannot do alone.Run heat maps on your most important pages: check-out pages, product pages, search pages. This will give you quick, useful information on whether people seem to be glossing over vital information or ignoring key functionality.Key questions could be:Are people finding my calls to action (such as “Add to basket”) easily?Is an important part of my navigation being ignored?Are page elements taking up space that no one is noticing?Crazy Egg is a decent heat map service. Another good tool is clickdensity.Visualization Tip 3: Website Overlay ToolThis feature in Google Analytics overlays percentages, conversion rates and other usable statistics on pages to tell you what people have done and clicked on different pages. Most usable is that when you click on a link you’re taken to that page, with the overlay in place, allowing you to see how people are navigating the website. Did 20% of visitors go to the next most important page after this one? Is that what you were projecting? Gems of information abound.Visualization Tip 4: ScrutinizerLearning how users view your website without having to ask them can be very beneficial. Of course, user testing has no true substitute, but a few tools can help:Scrutinizer shows you slowly how people may be viewing your website. It applies a filter over top the website, spotlighting the area where your mouse is pointing at. I don’t know the science behind it, but it might be useful to get users to perform tasks while the filter is applied; it would really show usability.Visualization Tip 5: Feng GUIFeng GUI allows you to look at any marketing piece (including a website) to see which parts attract attention and in what order. It uses algorithms to simulate eye-tracking and is useful for seeing whether what you thought was prominent really is. Not a substitute for user testing either, though.Product Page TipsOne of they keys to e-commerce success is a good product page. Here are a few tips to improve your product pages.Product Page Tip 1: Obvious Call To ActionYour “Add to basket” button is obviously key to your e-commerce website’s success. Make sure the button is not hidden, too small or confusing in any way. It should be above the fold and not difficult to click.Get Elastic has a good article on “Add to cart” buttons; an oldie but a goodie on statistics, even if the buttons are a bit out of date.Product Page Tip 2: Delivery InformationDo not withhold delivery information till the last minute when people are checking out. It leads to mass frustration and ill feeling towards your website. Make sure people can see an item’s stock status (”in stock,” “out of stock,” “date expected back in stock”) and the delivery lead time. This will prevent a slew of customers from abandoning their baskets further along the check-out process.The image above is from Play.com: delivery cost, dispatch estimate and stock levels. Great job.Product Page Tip 3: Progressive Disclosure of InformationPeople are very different in how they want to consume information. Some prefer social information such as reviews, ratings and comments. Others prefer technical specifications. Still others like to read a store’s description of a product (if it’s well written).The point is to give everyone access to the information they want without cluttering the page. Whether it’s grouping information under different tabs or providing a “More details” link, there are many ways to give progressively more information. Without compromising the layout, this should give 80% of visitors what they need.The image above is from Currys, an electronics retailer. It has main bullet points for each product and a “More info” link. The link merely takes you further down the page, but it prevents the top of the screen from being cluttered with information that many people may not be interested in.Product Page Tip 4: Copy Is KingMake sure your copy is well written and unique. Too many websites use the standard manufacturer’s description. This harms you two-fold. First, the copy is in so many other places on the Internet that your SEO will be harmed. Secondly, you’re not giving the purchaser any reason why they should purchase that product from you. Good copy should inspire confidence in you and the product as well as give your personal slant on the product, thus building your website’s personality.Hire a copy-writer, or do it yourself. But do it. Even if a product is your top revenue generator, still do something!Check-Out TipsDon’t let this last hurdle of purchasing trip you up.Check-Out Tip 1: Allow Guests to Check OutYou need to be able to give very good reasons why forcing guests to register to purchase products is essential. Think of offline shopping. Do you have to open an account with a news agent to buy a newspaper? Of course not. Don’t make that mistake online. Allow guests to check out.But you also need to sell reasons why guests should register. It’s all about making it easy, now and in future.Check-Out Tip 2: Enclose the Check-Out ProcessOnce someone wants to check out, the process should be as fast and slick as possible. Remove distractions, including ads, navigation and offers that might distract them from what they are trying to accomplish, which is to pay.Some will say this stage is a great opportunity to up-sell or feature related products. I disagree. That can be done effectively on the product page or just after the product has been added to the basket. Distracting the visitor or encouraging them to choose something else before giving you their money is an invitation to them to abandon their cart.Check-Out Tip 3: Ask for Feedback After the Visitor Has Submitted Their OrderOnce a visitor has converted, rather than show the standard confirmation page, why not also ask for some feedback on their experience? SurveyMonkey lets you quickly build an online survey, including questions such as:“On a scale of 1 to 10, were you able to easily find what you were looking for?”“Was there something in you particularly liked or disliked about our website?”“On a scale of 1 to 10, how easy was the check-out process?”“Please tell us what we can do to improve your next visit?”This qualitative feedback is invaluable to e-commerce website owners. Sure, not everyone will fill out the survey, but several will be more than willing to voice their opinions. If you do this, though, remember to follow up to let people know what you’ve changed and why.Check-Out Tip 4: Handle Errors GracefullyProblems occur during the check-out stage. Cards are declined, people enter invalid email addresses and they forget to specify their preferred delivery method. To cover all eventualities, you should display messages that are:Contextual Put the message next to where the error occurred.Useful No “Error code 21″ messages please. Write friendly, useful error messages, such as, “Sorry, we believe your email address is invalid. Did you accidentally add an extra full stop or space?”Conventional Error messages should be red. People understand that red indicates a problem.Luke Wroblewski has a great article on A List Apart about this.Testing ToolsTest, test, test: the mantra of all e-commerce website creators. Only your market knows the answers.Testing Tool 1: UserTesting.comAt only $29 a test, UserTesting.com delivers incredible value for the money. For $290, you choose the test to be carried out and the demographics of the audience, and hit “Go.” Not much later, you get 10 pieces of highly detailed video and written feedback. The information contained in those reports will earn you a lot more revenue than $290.Spend some time thinking about the type of people you want to participate in your testing. If you run a baby clothing website, naturally you would want mothers to participate in the testing. However, it might also be useful to run the tests on fathers as well as aunts and uncles (typical gift purchasers) because their purchasing behavior is very different.Possible briefs are:Find, evaluate and purchase product x.Find the information on delivery.Purchase our gift voucher.Testing Tool 2: Google Website OptimizerA lot has been written about Google Website Optimizer. It’s easy to use, so give it a run. It’s great for testing different “Add to cart” buttons to see which gets a better conversion rate.The main advantage of Google Website Optimizer is that you can test things on your actual market (whereas services like UserTesting.com merely attempt to match your target market). This also means that you’re able to choose how large a percentage of your traffic to test and thus achieve statistical relevance.Bryan Eisenberg has written a great book about it.Testing Tool 3: 5-Second TestThis does what its name implies: gives you quick feedback on your website—entirely subjective feedback, of course, but interesting when used in conjunction with analytics to correlate the data.It can be very useful to testing elements you want to be prominent. What’s the purpose of your website? Where’s the call to action? And exept for some premium features, it’s free. No brainer? Indeed.Testing Tool 4: SEO ToolsSEOmoz, GeoTarget, Linkscape and Trifecta are four among many tools you can use to test your website’s on-page and off-page SEO scores. They can quickly identify problems with your website so that you can fix them and hopefully improve your ranking.Final TipTechnologies come and go. Who knows what we’ll be using for analytics in five years’ time or what kind of information we’ll be tracking across devices and channels. The key to a good e-commerce strategy is customer insight and engagement. In other words, find out what people want, and give it to them (in an engaging way). Always be listening, asking questions and monitoring every facet of your website, business, industry and competition, and use whatever technology is appropriate to help you achieve your goals.(al)© Rob Smith for Smashing Magazine, 2010. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ecommerce

Here is 50 more wonderfully designed and implemented e-commerce sites. As always, this category amazes me. http://speckyboy.com/2010/02/11/50-beautifully-crafted-corporate-ecommerce-web-designs/

  Although much valuable information for all sorts of web and print professionals can be found online, it is often difficult to weed through all the noise and find good quality content. I believe it’s vital that professionals in different creative fields supplement their online learning and research through well-edited and high-quality print publications.Print magazines, more often than not, are well-researched and are headed by top-notch editorial staff, usually containing information and resources on the cutting edge of their respective industries’ trends and happenings.To that end, to help you fulfill part of your offline research needs, I’ve compiled a list of print magazines that are of interest to professionals in three different categories: Web Designers, Digital Artists, and Photographers. And be sure to comment so you can tell us your personal favourite print magazine, if you don’t see it listed here.You may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesProfessional Web Design ForumsUseful Podcasts For Designers And DevelopersUseful Web Design E-Mail Newsletters[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]Magazines for Web Designers.net Magazine / Practical Web Design.net is the world’s best-selling magazine for web designers and developers, featuring tutorials from leading agencies, interviews with the web’s biggest names, and agenda-setting features on the hottest issues affecting the internet today. If you’re serious about web design, then .net is the magazine for you. This is easily the best and most important magazine for web professionals, and it should be noted that .net is sold as Practical Web Design overseas.Visit the .Net Magazine / Practical Web Design official websiteWeb DesignerWeb Designer will help you design and develop stunning websites, providing exclusive interviews, professional advice, behind-the-scenes features with top developers and agencies, site showcases, plus how-to articles and tips for a variety of design and development software.Visit the Web Designer Magazine official websiteMagazines for Digital ArtistsComputer ArtsThe world’s best-selling creative magazine will inspire you, bring you the inside track on the creative industry, and reveal cutting edge skills and techniques. Every issue showcases the best illustrators, graphic designers and web designers from around the world. The tutorials section is the envy of the industry, giving you the skills and inspiration you need to be a better artist.Visit the Computer Arts official websitePhotoshop UserPhotoshop User is more than just an amazing Photoshop resource, it’s also the official publication of the National Association of Photoshop Professionals (NAAPP). Each issue includes behind-the-scenes features, how-to articles, help desk Q&A, step-by-step tutorials, and down & dirty tricks. Photoshop User is widely recognized as the most trusted resource for Adobe Photoshop and Lightroom training, advice, and how-to information for the graphic design, photography, and digital arts worlds.Visit the Photoshop User official websitePhotoshop CreativePhotoshop Creative provides Photoshop users with lashings of practical advice and inspiration. Whether you’re brand new to the program or simply looking to improve your existing skills, this is the magazine for you. We don’t like to leave anyone out, so we want to make sure there’s something for everyone – from the Adobe Photoshop Elements user right through to those lucky enough to own Photoshop CS3.Visit the Photoshop Creative official websiteDigital ArtistDigital Artist is the perfect magazine for anyone who uses their computer as a canvas. It is the only community-focused magazine to cover all art styles and all art software, making each issue a medley of breathtaking images to inspire you to create your own. The magazine includes tutorials and guides, an extensive Q&A section, reports on new artists and their current projects, plus interviews, features, and galleries.Visit the Digital Artist official websiteCorel PainterThe official Corel Magazine, offering professional tips and techniques, digital art concepts and theory, special effects, and more.Visit the Corel Painter official website3D Artist3D Artist is dedicated to bringing you interviews with leading lights in the 3D industry, fascinating features on development and technologies that are shaping what you see on TV and in film, in advertising and architecture and in good old art. The magazine showcases the best and most exciting 3D images every month with a monster 11-page gallery.Visit the 3D Artist official website3D World3D World is a high-quality magazine crammed full of news, inspiration and practical advice about 3D graphics. Includes news and analysis of all the latest trends in the 3D industry, in-depth reports on the hottest new 3D projects, detailed, step-by-step technical walkthroughs, artistic and creative advice from professionals at leading international studios, and impartial reviews of the latest creative hardware and software.Visit the 3D World official websiteLayersLayers is the only magazine that covers everything Adobe Creative Suite 4 has to offer. Each issue is filled with top-notch tips and techniques for Adobe Illustrator, InDesign, Photoshop, Flash, Acrobat, Lightroom, After Effects, Dreamweaver, and more.Visit the Layers official websiteMagazines for PhotographersPractical PhotographyPractical Photography delivers a diverse range of content that teaches photo enthusiasts to take better photos and how to creatively enhance them in Photoshop.Visit the Practical Photography official websitePhoto TechniquePhoto Technique philosophy is that the photographic medium has never existed on the basis of unrelated techniques or unskilled aesthetics. For that reason, they incorporate the technology and methodology used in creating photographs into two categories. The first is a series of portfolio/article combinations that demonstrate both the means and the end result. The second is expanded technical articles intended to completely follow a process in detail, rather than offer short snip-its or tips. The magazine will never address the interest of a point-and-shoot mentality; the intent is to elevate the magazine to a more professional level.Visit the Photo Technique official websitePhoto ProIf you’re a working photographer or have dreams of setting up your own photographic business, this is the magazine for you. Every issue of Photo Pro is packed with inspirational images, expert advice and reviews of the kit that you need to get ahead. There’s also must-read business guidance from successful working photographers. It’s the ultimate manual for modern pros.Visit the Photo Pro official websitePopular PhotographyPopular Photography is the world’s largest photography magazine and the leading technical authority, buyers guide and how-to resource for the photo enthusiast. Geared toward those who are passionate about photography, each monthly issue presents unmatched technical expertise and a wide range of articles on the technique, craft and equipment used in making outstanding images.Visit the Popular Photography official websitePhotography MonthlyPhotography Monthly is the UK’s most interactive photography magazine, featuring expert advice, product reviews, tips and techniques, and more.Visit the Photography Monthly official websiteDigital PhotoOnline and on newsstands, Digital Photo (formerly PC Photo) is the top digital photography magazine. Get the latest news, equipment reviews and previews, photography tips and more.Visit the Digital Photo official websitePhoto LifeFor over 30 years, Canadian photography amateurs and professionals have turned to Photo Life as a partner in furthering their photographic skills. The magazine covers all aspects of photography, including industry news, photographic techniques and tips, field tests, travel, digital, secrets of the trade, and much more. Photo Life has something for everyone, plus it’s supplemented with images from some of the country’s best photographers, including those of our readers.Visit the Photo Life official websitePhoto District News (PDN)Photo District News (PDN), the award-winning monthly magazine for the professional photographer, has been covering the professional photographic industry for over two decades. Every month, PDN delivers unbiased news and analysis, interviews, and portfolios of the latest photographic work. PDN delivers the information photographers need to survive in a competitive business – from marketing and business advice to legal issues, photographic techniques, new technologies, and more.Visit the PDN official websiteRelated Resources12 Print Magazines for Web and Graphic DesignersGraphic Design Magazines at Design Dump14 Essential Magazines for Graphic DesignersRelated PostsYou may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesProfessional Web Design ForumsUseful Podcasts For Designers And DevelopersUseful Web Design E-Mail Newsletters© Louis Lazaris for Smashing Magazine, 2010. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

It has never occurred to me to create a collection of sites based on the styling of links. It is however a very clever idea. Smashing Magazine has a great collection of such samples that show the wide range of possibility available. http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/

  Adobe Illustrator is a powerful software for illustrating that allows users to produce beautiful artwork, technical illustrations, and even graphics for both print and the web. Adobe Illustrator is a multipurpose vector illustration tool and its versatility makes it the most preferred choice among many professional artists and designers.In the past, we’ve published a collection of Beautiful Photoshop Illustrations By Artists Around The World, and this is the latest post that will showcase the power of Adobe Illustrator. We present here hundreds of brilliant illustrations by artists from around the world that will surely mesmerize you and stir your imagination. Have a look, and feel the power of Illustrator!We recognize that there are many more highly-talented illustrators that may not be mentioned here. We can’t cover them all, but with your help we can try to showcase them in future posts. Please feel free to comment on this article and mention the name of your favorite artist.[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]Tom WhalenTom Whalen lives in McAdoo, a town in northeastern Pennsylvania, USA. He is a gifted and zealous designer come illustrator and he has skillfully amalgamated his passion in his idiosyncratically-designed posters.Robot Earth 3009 PosterVoltron CommissionRaiders of the lost ark posterDarkstalkers: Lord RaptorChristopher LeeChristopher Lee is a multi-disciplinary designer and illustrator of sorts, born in Sacramento, California. He is a graduate from Sacramento State University and his formal education is in graphic design. His entire life, however, has revolved around drawing since he was old enough to hold a pencil.I Am MedicThe Impossible CircusCandy Culture MagazineMusimalsThe Birdman from GargantuaJulian DoradoJulian Dorado is an Argentina based illustrator and graphic designer who creates unique characters, cute animals, wild monsters, and various other font-inspired characters.Type Apple ChanceryType Plantagenet CherokeeType Meta CapsChris LeavensChris Leavens was born and raised in Pennsylvania. He breezed through school and spent a good deal of time doodling, drawing robots, spaceships, and bizarre creatures. Currently, Chris is focusing on creating vector art using Adobe Illustrator. He produces most of his artwork — from start to finish — entirely in Illustrator, including textural elements. His work incorporates absurdity, anthropomorphisms, and a healthy dose of humor.In a ClearingWe’re Up HereBehind Our HouseMystical BitsAt the Break of DayThe Bowl EscapesAdvice from a CaterpillarZuttoZutto is a Russian-based digital illustrator, artist and character designer, with a very unique style. Her illustrations are dreamy and full of vibrant colors and fantasy characters.TundraThe magic springBlackberry cushionTrue loveWhite GhostHey, don’t be so evilMatthew SkiffMatthew Skiff is a vector illustrator living in Colorado. He is a well-known and trained graphic designer who has the ability to combine his graphic and illustration skills to create wonderful artwork. He makes illustrations for bands and creates professional t-shirt designs.Zombie LiquoriceThe Shadow ConspiracyI Wrestled A Bear OnceI See Stars/Sumerian RecordsYiying LuYiying Lu is one of the most promising designers of Sydney, Australia. She was born in Shanghai, China, and is a confident artist with many attractive designs and illustrations in her portfolio. She runs her own design studio & teaches design at the University of Technology, Sydney. Her dream job is to furnish visual refreshment to the current Google logo.Fail WhaleSerendipityFoul OwlBirdsYukio MiyamotoYukio Miyamoto has been using and abusing Adobe Illustrator since the beginning of time (well, since the late ’80s at least). His artwork is showcased and sampled in a number of design books and he has trained thousands of people in all areas of graphics for both Mac and Windows. You won’t believe your eyes when you see Yukio’s work.Musical InstrumentCameraCarNick LaNick La is a freelance illustrator and web designer from Toronto. He is a well-known designer who has founded a number of projects including N.Design Studio, the popular blog Web Designer Wall, Design Jobs on the Wall, and Best Web Gallery. He has recently launched a new website called IconDock that’s completely dedicated to icons.Abstract PeacockAbstract PhoenixFlowKoi FishWeb Designer Magazine CoverSakuraPOGO IllustrationHelen HuangHelen Huang is an illustrator born and raised in China and currently living in Los Angeles. She has a passion for illustration and is currently working as a full-time designer for an interactive ad agency.IcecreamPrincess FSun FlowerLegend of DragonDreamcatcherMichael HealdMicheal Heald is a passionate designer and diverse creative professional from the UK. His true passion and innovative outlet is his award-winning design studio Fully Illustrated where he offers creative services that include designing, branding, illustration, and 3-D motion graphics.Orekol MinersStone SkipperStats EnvyThe Creative Unity BookThe MonsterBondage DuckPuffrSusanne PaschkeSusanne Paschke is a German freelance designer and illustrator. Her passion is to accept the challenge of making something emotional out of digital vectors. She uses path tools and simple color selections to create photo-realistic illustrations.Berlin CosmeticsUnicoVectorbeautiesJonathan BallJonathan Ball is an illustrator and designer from Cardiff, UK who has immersed himself in a number of creative fields. He is well-known for creating idiosyncratic and skillful artwork that’s regularly infused with original characters.Computer Arts MonsterThe Great Panda ExtinctionBear vs ManJay is Games PosterMushroom GraveyardRyan Putnam, aka RypeRyan Putnam is an illustrative designer living in Colorado Springs, Colorado. He runs Vectips, a blog dedicated to vector illustrations and he does client work under Rype Arts. He is an outstanding illustrator who has been drawing and doodling his whole life and received a graduation degree in fine arts with a concentration on graphic design from Colorado State University.Water Works ParkWiggle WormCosmic CityStock CharactersRubens CantuniRubens Cantuni is an Italian designer with a degree in industrial design currently working as an art director and supplementing his income with freelance illustration. He is truly passionate about his creative work and wants to make a full-time living from illustration in the future.Urban AttitudeLe Desordre, c’est moiHeistEconomy is a robberyI Love LDNMasksSascha PreußSascha Preuß is a German Illustrator who is working as a freelance Illustrator under the name Bubblefriends. He is known for creating cute characters and colorful vector illustrations.RainbowfriendUnexpectedVectorguruWeihnachtenIcecreamfriendsX MasPopcorn CinemaJeff FinleyJeff Finley is an illustrator based in Cleveland, Ohio. He is co-owner of Go Media, a creative agency headquartered in Cleveland, Ohio and is an entrepreneur that specializes in illustration, graphic design, and 3-D.CalibanPts CandyFest7Halim GhodbaneHalim Ghodbane is an amazing illustrator based in Algeria. You won’t believe your eyes when you see his work.LoshaCitroen C6BB3XRod HuntRod Hunt is a London-based Illustrator and artist who has built a reputation for retro-tinged Illustrations and detailed character-filled landscapes for UK and international clients spanning publishing, design, advertising, and new media, and covering everything from book covers to advertising campaigns, theme park maps, and even the odd large-scale installation too! Rod is also the artist behind the best selling Top Gear book “Where’s Stig?” published by BBC Books.Fishy SubTokyoHot Ice CreamsZombie Apocalypse!© Aquil Akhter for Smashing Magazine, 2010. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: illustrator, Inspiration

The horizontal scrolling web site is a format that designers seem to return to time and time again. Whats interesting is that this is a style that really shows when someone is using it just to use it instead of finding a true need for it. Perfect example is that lots of photography sites use this approach, and it works well. Photography is something that looks better side by side instead of stacked in a list. http://vandelaydesign.com/blog/galleries/design-trend-showcase-30-horizontal-websites/

  App Store is a competitive environment. Against more than 140,000 apps, all screaming for attention, how do you make sure your app gets its time in the spotlight? What does it take to get good media coverage? How do you get people to talk about your app—and, ideally, how do you get them to buy it and show it to their friends?Following the simple rules laid out below, you will increase your chances in the battle for fame and glory. These tips might seem rudimentary or in-your-face obvious, but they are so often neglected in the heat of the moment.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]Be UniqueOne of the easiest ways to stand out in the App Store is to create an app that is unique. Sure, that makes sense. Yet still thousands and thousands of apps are uninspired, shovelled out by tired developers looking for a quick buck.If you want to stick it to the man, make sure that you are either:The first developer in your category of product, orReinventing the existing category with something unique.If you’re just improving something that’s already available, your battle to market it will be uphill.Spin an Existing CategoryAt this point in the history of the App Store, very few apps create new categories. So unless you’re sitting on a revolutionary new idea, focus your attention on a unique spin of an existing category. So many things can be re-imagined with little effort. Look at your competitors and flick on your child-like consumer filter. What cool feature for this category is missing? How can you take advantage of the iPhone’s interface, accelerometer, GPS or multi-touch functionality to create a package that delivers a unique experience in this category?A unique feature will make your app stand a head taller in the crowd and raise eyebrows. And that’s exactly the effect you want if you intend to sell apps in the App Store.Think, plan and build with the intention of creating something unique. From the conceptual drafts to the final marketing, keep iterating the unique aspects of your product.Ask yourself if you are merely improving on someone else’s idea. If it already exists in the app store, the battle to market it will be uphill.Try some shortcuts to create something unique, such as mixing categories; thinking of new ways to use the accelerometer, GPS, proximity sensor and multi-touch gestures; storytelling; etc.If you’re competing in a saturated market, do the exact opposite of the leader.Be TweetableGetting people to talk about your app is imperative for success. The more people talk, the more exposure your app will get, which will hopefully translate into sales. If your app is unique, you’re halfway there—people will talk about it just because of its uniqueness. But how do you encourage people to start up conversations about your product?Learn to PitchI’m sure you’ve pitched your app to at least a dozen co-workers and puzzled family members. You know the ins and outs of your elevator speech, the highs and lows, the big sells of your product and the hard-to-understand parts. If you want your app to succeed, you will need to teach that pitch to the rest of the world.Be InterestingMake the conversation about your app easy and engaging. Make it so that people want to tweet about it. Tweetability—if no one has yet, I’m trademarking that word—refers to how well a product or message would move on Twitter. The Twitter network, with its millions of users, has a particular personality and disposition. Despite the diversity of people using the service, talking about it like a homogenous mass still makes sense in many ways. Some of the most successful apps are easily shared through social media. Imagine the twittersphere chattering in chipmunk voices, “Hey, guys. Check this out!” Instantly gratifying app + high tweetability = free exposure.Even if your app isn’t instantly gratifying or playfully humorous, you can still compose a tweet that is highly tweetable. Just think of what you would retweet yourself. How would you sell your app in 140 characters?Play to your strengths. Write good copy. And have a solid, useful and attractive landing page.Find the human angle. Are there any amusing and beneficial reasons why people would use your app?Have a memorable tagline. Sum up your app’s purpose in one line.Cater To BlogsSocial media and the blogosphere are not isolated from each other. Like ripples in a pond, the more people tweet about your app, the more likely you’ll hit a big blog.Review blogs and tech websites are part of the App Store’s eco-system, and while the exact effect they have on sales is debatable, the traffic and buzz they generate are worth pursuing.Think Like MediaTo get good media coverage, you need to think like the media. How good a story is your app? Obviously, the law of uniqueness makes a difference here, but your app should also be easy to write about. First, provide a free press package that anyone can download. Supply people with the material they need to talk about your app. Give them a high-res version of the icon, screenshots and press-related texts.Don’t be stingy with the promo keys either—in fact, dispense them liberally. Promo keys are cheap marketing collateral and a way for you to put your app in the hands of peer leaders. Throw the keys at your favorite blog, and invite them to give some away for free in a raffle. If you can find a category-specific blog, you’ve got a direct line to your target customers. It’s a great way to reach a new audience and strengthen your relationships and reputation.Blogs Are Like Kids in a SchoolyardWhile they may not want to hear this, blogs are a bit like kids in a schoolyard. If you can get the cool kids to talk about you, chances are that other blogs will pick up the story and throw you on their front page. Getting on review and media websites is vital to your marketing success, because they are less transient than tweets. Reviews stay there and bring in traffic for months.Give out promo codes to blogs without hesitation.Have an extensive and easily accessible press package.Don’t be afraid to ask individuals to endorse your app.Try to crack category-specific blogs. If you’re making a wine app, contact wine blogs.Control The HypeApp sales thrive on hype. Learn to control the hype, and you will have mastered the product launch. Hype will always be partly out of your hands, but the rules mentioned above will help you put things in motion. But hype will amount to nothing if it’s for a poor product. While there is truth to the saying that there is no such thing as bad publicity, hype can backfire and harm your efforts to generate hype in future.Hype EarlyStart hyping early. If you know you have a unique product, let people in on the secret before the launch. Having an interesting “Coming soon” website can do this, by building a mailing list and getting Google juice for your domain.Make Your Website GreatNeedles to say, your app should have its own website. To make any of the rules above work, you will need a point of reference, somewhere to send the masses. Make the website interesting; show the app in action, and think outside the box. Make the website an extension of your app, and you will have yet another great tool in your marketing toolbox.Launch BigWhen you launch, make it big. Send out the triumphant newsletter, and hit all social media. Have you or your team write up blog posts, and pull every lever and handle in your network. Hype is all about critical mass: the first wave you set in motion will give you instant feedback on how to adjust your hype machine.Maintaining hype is all about introducing new venues in which to exhibit your app. Get a steady stream of review websites to cover your app. Give away promo keys on Twitter, and serve new content on your website. Obviously, if you can get into the “What’s hot” or “New and noteworthy” sections of the App Store, you’ve made it far.In the end, hype is part luck and part skill. The best way to balance the two is to keep asking yourself whether you can do anything else to add value, mystery, polish or spin to your product. Rely on your own judgement: what would excite you about this app if it were made by another developer?Give out promo codes on Twitter and in the blogosphere.Run contests related to your app. Give away prizes that make sense for your category.Boost popularity by timing the launch of your app to coincide with a live event or trending topic. Climate-related apps spiked around the COP15 Climate Summit in Copenhagen.Release your app with a big bang. Hold an online or live event. Attract visitors in creative ways, by building a game or puzzle or just throwing a contest or giveaway.Example: Being Awesome In A Saturated MarketTo illustrate the application of these rules, let’s take a play-by-play look at one successful app. For the sake of convenience, let’s just call it “Awesome app.”Awesome app is a weather-forecasting app. This is a classic scenario: a re-thinking of an established category. I can’t think of a more tired and saturated market than weather apps, making this an excellent example of being able to re-invent and compete if we have the right frame of mind.Unique SpinThe Awesome app reverse-engineers the trend of offering up increasingly detailed and advanced weather data. Instead, it trims down functionality and focuses on the very playful and human idea of exploring the weather visually, by swiping through a virtual forecast. It builds uniqueness right into the very concept and goes in the opposite direction of the market leaders.Early Hype, Big LaunchPrior to launch, the website for Awesome app presents a “Coming soon” page that collects close to a thousand confirmed emails. A teaser video of the interface generates some buzz and earns the app a nomination in the App Star awards. The app launches at the end of December 2009. The release newsletter goes out; a more elaborate version of the website, with video and screenshots, goes up; and the developers make as much noise as they possibly can in their networks.Review WebsitesAs soon as sales get a lift from the early launch hype, emails are sent out to various review websites offering promo keys. Reviews started flowing in, and chatter about the app is monitored on Twitter, where developers offer help and follow up on questions. A “Making the app” video is posted that gives existing customers something to enjoy (and that humanizes the team), highlighting user recommendations.The website for Awesome app gets some wind of its own by being featured in various design blogs for its modern use of CSS animations, contributing hype that doesn’t have anything to do with the app itself.Picked Up by Larger WebsitesA week and a half after launch, larger websites such as TUAW started showing interest. And coverage peaks with a TechCrunch article, which ripples out to LifeHacker and other major websites. More than a month in and we’re still seeing continued interest in the app; it has gathered hundreds of five-star reviews in the App Store and has been featured in both “New and noteworthy” and “What’s hot.”What Worked?What worked for Awesome app was a combination of the marketing rules discussed above:It was sufficiently unique in a crowded market to spark interest and be seen as a “good story.”The idea of a “visual weather forecast” was easy to convey and was presented in a way that gave it high tweetability.It was completely the opposite of what leading competitors were doing.The team started hyping early with a “Coming soon” page. It was appealing enough for people to tweet about it, and it eventually attracted visitors not only because of the app but because of the design of the website.A press package with everything you could want was freely available on the website, making it easy for blogs to write about the app.Parting ThoughtNot a single dime was spent on marketing it, yet the Awesome app reached tens of thousands of people. If you have a unique product and apply some of the ideas above, you too can secure free exposure for your beloved app. It’s a rather democratic and honest process because you are required to re-invent apps by adding unique features. Marketing then becomes all about making it easier and more interesting for people to talk about and share your creation.As with most other things in life, there’s no surefire way to create a successful app. But keeping in mind some of the things we’ve talked about here—both at the conception and the execution stage—will put you in a position to build awareness of your application much more easily.(al)© Michael Flarup for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

While I won’t show my cards regarding my political views, I will say I think most of us can agree that politics is pretty much crap. Politics and the news, my two most hated things to find on TV. Ironically I enjoy The Colbert Report and The Daily Show though. Go figure. Anyway, enjoy this fine set of well designed government sites. http://www.mostinspired.com/blog/2010/02/15/monday-marvels-24-heads-of-government-websites/

  Web design is a relatively young field. It’s youthful, growing and made up of people from all kinds of backgrounds, many of whom lack formal design training. We have learned, and still are learning, as we go.I came into my first job as a Web designer for Boeing back in the mid-1990s, with no formal design training. I was lucky to get some training on the job, and I would guess that my experience there was similar to that of many who are reading this article. I had the opportunity to work with some very talented and highly experienced designers who all had made the jump from other design fields to the Web.It was there, as part of that training, that I learned about critiquing, both giving and receiving, through regular design reviews.[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]Formal Design Reviews = Fun? Maybe not. Educational? Heck, Yeah.Image sourceThose reviews weren’t fun. They were difficult and demanding and required quite a bit of effort. However, they were also meant to yield the best possible design work through careful evaluation and constructive criticism. They weren’t inherently negative, but they did focus on what was wrong with a design and what could be improved, rather than what was working—which, to some degree, makes sense. The goal was to improve the quality of work.Many days I left those reviews feeling like a failure, and some days I felt unnecessarily beat up. But I was often reminded that these reviews weren’t personal and were tough for a reason. In hindsight, I’m glad I had them. They improved the quality of my work immensely and taught me quite a bit about how to evaluate my own work as well as the work of others. Still, I look back and can’t help but pick out problems—not with the process or intent, but with the specific things we used to evaluate our design work.Almost exclusively, we evaluated the designs based on established visual design principles, many of which are sound and worthy of consideration when evaluating a website design. But, at least in the beginning, we rarely touched on things that went beyond the visual design of the websites and products we were building. I think we could be forgiven that; again, Web design was new then, and we were all learning.Shortly thereafter, I got involved with the Web design community outside of Boeing (though Boeing had a thriving, diverse and rather large community in its own right), and I began to see how the rest of the world judged design work. It was mostly limited to informal comments in forums and such, again very much “thin-slicing” and focused on snap judgements and gut reactions related to style and visual design. I felt lucky to have what I had: formal, informed, passionate and professional feedback, even if it wasn’t as deep as it should have been.How We ReactThis hold true today, more than 10 years later. A person tends to critique a design in one of several ways. The most common, and usually least valuable, is by gut reaction. Gut reaction is valid and can be valuable; in fact; if you look at most established design principles, you’ll see something about emotional connection. On the Web especially, this connection is often formed in an instant. It can and often does develop over time, but the initial reaction should be noted and can be important to the overall success of a design.Gut reactions often hold little value in a critique because they are not properly articulated. The person giving the critique will reduce their initial reaction to words like “suck,” “awesome,” “like,” “hate,” which does nothing to help the designer improve their design. These kinds of reactions are fine to note, but to be valuable they need to be articulated well. This requires a longer look at the design and a clear understanding of what the designer is looking for.The most common reason the process breaks down is because it’s hard to follow. It takes time, attention and an understanding of what is being evaluated. Unfortunately, people don’t seem willing or able to go that extra step to make their feedback, whether positive or negative, helpful. They’re more concerned about getting their gut reaction off their chest and moving on. In some cases, they simply don’t have the tools to reflect on and articulate their reaction. A good critique requires time and a grasp of fundamental design principles.Honestly, why else would a designer fire off a “That sucks” comment? If you’re reviewing a fellow designer’s work, you should feel obligated to make your review as helpful as possible. Those unhelpful comments result more from a lack of understanding than a lack of willingness to put in the effort. To this end, I wanted to see whether established principles exist by which to judge Web design and whether we have guidelines along which to offer critiques. So, I did some research.As With Most Things, Begin With ResearchI began with some extensive research on Web design criticism and critique. I didn’t find much, but a few things are worth sharing. Jason Santa Maria, who is a wonderful designer and a leader in our field, wrote a good article about giving and taking criticism. He has some good advice there, and through his formal schooling he seems to have had a similar experience with criticism and design reviews that I did. He goes into the specifics of critiquing itself, and any designer could benefit from a quick read of it. As well, a few months ago a good post on responding to criticism was posted here on Smashing Magazine. It’s about responding to criticism rather than giving it, but some useful ideas are there.As interesting as those articles are, I couldn’t find anything on giving critiquing Web designs in particular or on established design principles by which to judge websites and applications. In hindsight, and after many revisions to this article, I’m not all that surprised. Given the broad and multi-disciplinary nature of the Web, the subject is difficult to tackle.Any Universal Web Design Principles?Some attempts have been made to define universal principles for Web design, here on Smashing Magazine and over on the much-missed Digital Web, but these (for me at least) are too broad to be readily usable. They’re a good place to start, though, and worth studying.More helpful would be to dig deeper and look at more specific principles, such as Principles of Design and Jakob Nielsen’s Usability Heuristics. With these, we could begin to dissect a Web design into its component parts and critique each individually. But let’s be realistic: not many will take the time to do that.Learning the principles of usability, user interface, typography, visual design and so on is something every Web designer should work towards. This understanding will give you some of the language and criteria you need to effectively criticize. The rest is effort.In addition to my research, I’ve spoken to many other designers about what makes for a useful critique. While one would expect many of the answers that were given, most people believe that it depends largely on engaging with the design and the designer, on having a conversation with them. I’ve noticed a lot of this happening in Dribbble, a great community for designers that’s currently in beta. I have a few invitations, which I’ll give to those with the best comments. Just note in your comment that you’re interested in the Dribbble invitation.After all this research and reflection, I’ve come to define a good critique as one that takes a gut reaction, applies context and understanding to it, and then communicates that in a constructive, conversational way.To this end, I’ve formulated some simple rules for judging a Web design.Some Guidelines For Constructive Web Design Criticism1. Note Your Gut Reaction, But Take Time to Explore It.If you can’t articulate your reaction, stop there and keep it to yourself. As I’ve said, gut reactions can be valuable, but we need to explore them. Think of the last time you saw one of your favorite websites after a redesign. You may have liked it or hated it right away, but after using the website for a bit, your opinion (hopefully an intelligent one) became more moderate. Take the latest redesign of Facebook, for example. I was immediately confused. I think I actually typed something to that effect in the search field, which had been moved to where I thought the status update field would be. But I quickly found my way around and was soon comfortable with it. What’s more, the changes made a lot of sense overall. My gut reaction was expected; big changes can be disruptive, but I needed to look more closely to see that these changes were positive.2. Learn to Articulate Your Observations, and Invite Being Questioned.A designer should never, ever critique another designer’s work unless they are willing to have a meaningful conversation about it. This is a biggie. Expressing an opinion without offering to talk about it holds little value. You may be passionate about your craft (and your opinion for that matter), but for that passion to have much merit, you need to be willing to have a two-way conversation about it. Off-hand comments, particularly anonymous ones, are unhelpful for a number of reasons, most of which are pretty obvious. The point is simply that if you’re going to form and share an opinion, be willing to go a bit deeper and have a conversation about it.3. Be Specific, and Offer Suggestions if Appropriate.This is related to the last point. The more specific you are in praising or knocking a design, the more helpful you critique will be. Use descriptive terminology, speak the language of design, relate your opinion back to established principles. Think of your critique as one side of a debate in which you have to defend your opinion.4. Always Consider Context and Audience-Appropriateness.A personal website can be judged on how well it captures the personality of the designer. A mobile-specific website should be evaluated on a mobile device. And so on. This one can be hard, especially if you don’t know the context or audience. That said, avoid critiquing a design without knowing the context going in. Sure, by understanding visual design principles, you can critique just about any design on that level, but that’s usually just scratching the surface—helpful, but not nearly as helpful as it would be if you took the time to go deeper.5. The Most Important Measure of a UI’s Success Is How Well It Meets Expectations.I recently wrote about this in depth. The point is that you should judge the utility of a user interface by how well it meets your expectations. Of course, if your expectations are exceeded in some way, that’s great, too, but simply having everything behave as you expect is a good start.6. Subjectivity Is Fine if Labeled as Such and Articulated Properly.Following on the point about noting your gut reaction, judging a design subjectively is perfectly fine. Sometimes, even after having taken our time and knowing the context and audience and all that, a design still just doesn’t feel right. As long as you articulate that in a way that makes it clear you’re not sure why you feel that way (and if you accompany it with other helpful remarks), the feedback is probably worth sharing.7. Don’t Neglect the Content.Unless you take the time to use the website and to read and absorb the content, your review will likely be superficial. While content doesn’t often fall under the responsibility of the designer, it’s still a big part of the design. Judge a design based on how well it presents the content and facilitates its use or consumption. Of course, here we have one of those “it depends on the website” situations, so context is doubly important.8. Study the Principles Used to Judge Design, and Learn the Language.I’ve touched on this quite a bit already. It’s probably the best thing you can do to give better criticism and to become a more educated designer. In order to properly form and articulate an opinion about a design, we need to know the principles and patterns we’re dealing with. And without understanding the language, we can’t easily have a conversation about the quality of the design.ConclusionGiving a great critique isn’t rocket science, as long as you take some time and use a proper frame of reference (knowledge, context, criteria) to engage and think critically about the design. So, what do you think? Agree? Disagree? I’d love for readers to weigh in here on what they think makes for a useful Web design critique and share what they think makes a Web design successful. Also, feel free to critique this article… I know I could use it.(al)© D. Keith Robinson for Smashing Magazine, 2010. | Permalink | 2 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: criticism

Many thanks to the folks at Noupe.com for putting together a fine collection of city tourism sites. This collection is great if only because it proves that even a niche as seemingly mundane as this can be brought to life with quality web work. http://www.noupe.com/showcases/showcase-of-tourism-website-designs.html

  There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.Keep in mind that these new properties and techniques are either new or still in the works, and some of the most popular browsers do not yet support them. But we feel it’s important that you, as an informed and curious Web designer, know what’s around the corner and be able to experiment in your projects.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]A Glance At The BasicsOne of the most common CSS-related mistakes made by budding Web designers is creating inflexible style sheets that have too many classes and IDs and that are difficult to maintain.Let’s say you want to change the color of the headings in your posts, keeping the other headings on your website in the default color. Rather than add the class big-red to each heading, the sensible approach would be to take advantage of the DIV class that wraps your posts (probably post) and create a selector that targets the heading you wish to modify, like so:.post h2 { font-weight: bold; color: red; }This is just a quick reminder that there is no need to add classes to everything you want to style with CSS, especially text. Think simple.The Font PropertyInstead of specifying each property separately, you can do it all in one go using the font shorthand property. The order of the properties should be as follows: font-style, font-variant, font-weight, font-size, line-height, font-family.When using the font shorthand, any values not specified will be replaced by their parent value. For example, if you define only 12px Helvetica, Arial, sans-serif, then the values for font-style, font-variant and font-weight will be set as normal.The font property can also be used to specify system fonts: caption, icon, menu, message-box, small-caption, status-bar. These values will be based on the system in use, and so will vary according to the user’s preferences.Other Font PropertiesA few font-related properties and values are not as commonly used. For example, instead of using text-transform to turn your text into all caps, you could use font-variant: small-caps for a more elegant effect.You could also be very specific about the weight of your fonts, instead of using the common regular and bold properties. CSS allows you to specify font weight with values from 100 to 900 (i.e. 100, 200, 300, etc.). If you decide to use these, know that the 400 value represents the normal weight, while 700 represents bold. If a font isn’t given a weight, it will default to its parent weight.Another useful property, sadly supported only in Firefox for now, is font-size-adjust, which allows you to specify an aspect ratio for when a fall-back font is called. This way, if the substitute font is smaller than the preferred one, the text’s x-height will be preserved. A good explanation of how font-size-adjust works can be found on the W3C website.Dealing With White Space, Line Breaks And Text WrappingSeveral CSS properties deal with these issues, but the specs are still in the works (at the “Working Draft” stage).White SpaceThe white-space property lets you specify a combination of properties for which it serves as a shorthand: white-space-collapsing and text-wrap. Here’s a breakdown of what each property stands for:normal white-space-collapsing: collapse/text-wrap: normalpre white-space-collapsing: preserve/text-wrap: nonenowrap white-space-collapsing: collapse/text-wrap: nonepre-wrap white-space-collapsing: preserve/text-wrap: normalpre-line white-space-collapsing: preserve-breaks/text-wrap: normalThis property can be useful if you want to, for example, display snippets of code on your website and preserve line breaks and spaces. Setting the container to white-space: pre will preserve the formatting. WordPress uses white-space: nowrap on its dashboard so that the numbers indicating posts and comments don’t wrap if the table cell is too small.Word WrapOne property that is already well used is word-wrap. It supports one of two values: normal and break-word. If you set word-wrap to break-word and a word is so long that it would overflow the container, it is broken at a random point so that it wraps within the container. The International Gorilla Conservation Programme website uses word-wrap for its commenters’ names.In theory, word-wrap: break-word should only be allowed when text-wrap is set to either normal or suppress (which suppresses line breaking). But in practice and for now, it works even when text-wrap is set to something else.Bear in mind that according to the specification, the break-strict value for the word-break property is at risk of being dropped.Word And Letter SpacingTwo other properties that are often used are word-spacing and letter-spacing. You can use them to control—you guessed it—the spacing between words and letters, respectively. Both properties support three different values that represent optimal, minimum and maximum spacing. Show & Tell uses letter-spacing on its navigation links.For word-spacing, setting only one value corresponds to the optimal spacing (and the other two are set to normal). When setting two values, the first one corresponds to the optimal and minimum spacing, and the second to the maximum. Finally, if you set all three values, they correspond to all three mentioned above. With no justification, optimal spacing is used.It works slightly different for letter-spacing. One value only corresponds to all three values. The others work as they do for word-spacing.The specifications contain a few requests for more information and examples on how white-space processing will work and how it can be used and be useful for languages such as Japanese, Chinese, Thai, Korean, etc. So, if you’d like help out, why not give it a read (it’s not that long), and see how you can contribute?Indentation And Hanging PunctuationText indentation and hanging punctuation are two typographical features that are often forgotten on the Web. This is probably due to one of three factors:Setting them is not as straightforward as it could be;There has been a conscious decision not to apply them;Designers simply aren’t aware of them or don’t know how to properly use them. The Sushi & Robots website has hanging punctuation on bulleted lists.Mark Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic Style Applied to the Web. These are two very good reads for any Web designer.So, the theory is that you should apply a small indentation to every text paragraph after the first one. You can easily do this with an adjacent sibling combinator:p + p { text-indent: 1em; }This selector targets every paragraph (i.e. p) that follows another paragraph; so the first paragraph is not targeted.Another typographic rule of thumb is that bulleted lists and quotes should be “hung.” This is so that the flow of the text is not disrupted by these visual distractions.The CSS Text Level 3 specification has an (incomplete) reference to an upcoming hanging-punctuation property.For now, though, you can use the text-indent property with negative margins to achieve the desired effect:blockquote { text-indent: -0.2em; }For bulleted lists, just make sure that the position of the bullet is set to outside and that the container div is not set to overflow: hidden; otherwise, the bullets will not be visible.Web Fonts And Font Decorationfont-faceMuch talk has been made on the Web about font-face and whether it’s a good thing—especially after the appearance of Typekit (and the still-in-private-beta Fontdeck). The debate is mainly about how much visual clutter this could bring to Web designs. Some people (the argument goes) aren’t sufficiently font-savvy to be able to pull off a design in which they are free to use basically any font they wish. Wouldn’t our sensitive designer eyes be safer if only tested, approved Web-safe fonts were used?On whatever side of the argument you fall, the truth is that the examples of websites that use font-face beautifully are numerous. Jonathan Snook’s recently redesigned website uses the font-face property.The font-face property is fairly straightforward to grasp and use. Upload the font you want to use to your website (make sure the licence permits it), give it a name and set the location of the file.In its basic form, this is what the font-face property looks like:@font-face { font-family: Museo Sans; src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”); }The two required font-face descriptors are font-family and src. In the first, you indicate how the font will be referenced throughout your CSS file. So, if you want to use the font for h2 headings, you could have:h2 { font-family: Museo Sans, sans-serif; }With the second property (src), we are doing two things:If the font is already installed on the user’s system, then the CSS uses the local copy instead of downloading the specified font. We could have skipped this step, but using the local copy saves on bandwidth.If no local copy is available, then the CSS downloads the file linked to in the URI. We also indicate the format of the font, but we could have skipped that step, too.For this property to work in IE, we would also need the EOT version of the font. Some font shops offer multiple font formats, including EOT, but in many cases we will need to convert the TrueType font using Microsoft’s own WEFT, or another tool such as ttf2eot.Some good resources for finding great fonts that can be used with font-face are Font Squirrel and Fontspring.text-shadowThe text-shadow property allows you to add a shadow to text easily and purely via CSS. The shadow is applied to both the text and text decoration if it is present. Also, if the text has text-outline applied to it, then the shadow is created from the outline rather than from the text. Neutron Creations website uses text-shadow.With this property you can set the horizontal and vertical position of the shadow (relative to the text), the color of the shadow and the blur radius. Here is a complete text-shadow property:p { text-shadow: #000000 1px 1px 1px; }Both the color and blur radius (the last value) are optional. You could also use an RGBa color for the shadow, making it transparent:p { text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px; }Here we define the R, G and B values of the color, plus an additional alpha transparency value (hence the a, whose value here is 0.5).The specification still has some open questions about text-shadow, like how should the browser behave when the shadow of an element overlaps the text of an adjoining element? Also, be aware that multiple text shadows and the text-outline property may be dropped from the specification.New Text-Decoration PropertiesOne problem with the text-underline property is that it gives us little control. The latest draft of the specification, however, suggests new and improved properties that may give us fine-grained control. You can’t use them yet, but we’ll give you a condensed sneak peek at what may come.text-decoration-line Takes the same values as text-decoration: none, underline, overline and line-through.text-decoration-color Specifies the color of the line of the previous property.text-decoration-style Takes the values of solid, double, dotted, dashed and wavetext-decoration The shorthand for the three preceding properties. If you specify a value of only one of none, underline, overline or line-through, then the property will be backwards-compatible with CSS Level 1 and 2. But if you specify all three values, as in text-decoration: red dashed underline, then it is ignored in browsers that don’t support them.text-decoration-skip Specifies whether the text decoration should skip certain types of elements. The proposed values are none, images, spaces, ink and all.text-underline-position With this property, you can control, for example, whether the underline should cross the text’s descenders or not: auto, before-edge, alphabetic and after-edge.Controlling OverflowThe text-overflow property lets you control what is shown when text overflows its container. For example, if you want all of the items in a list of news to have the same height, regardless of the amount of text, you can use CSS to add ellipses (…) to the overflow to indicate more text. This technique is commonly seen in iPhone apps and websites. The New York Times iPhone app uses an ellipsis for overflowing text.This property works in the latest versions of Safari and Opera and in IE6 (where the overflowing element should have a set width, such as 100%) and IE7. To be able to apply the property to an element, the element has to have overflow set to something other than visible and white-space: nowrap. To make it work in Opera, you need to add the vendor-specific property:li { white-space: nowrap; width: 100%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }In the Editor’s draft of the specification, you can see that other properties related to text-overflow are being considered, such as text-overflow-mode and text-overflow-ellipsis, for which text-overflow would be the shorthand.Alignment And HyphenationControlling hyphenation online is tricky. Many factors need to be considered when setting automatic hyphenation, such as the fact that different rules apply to different languages. Take Portuguese, in which you can hyphenate a word only at the end of a syllable; for double consonants, the hyphen must be located right in the middle.The specification is still being developed, but the proposed properties are:hyphenate-dictionary;hyphenate-before and hyphenate-after;hyphenate-lines;hyphenate-character. Proposed specification for hyphenation on the W3C website.This is a good example of how the input of interested Web designers is vital. Thinking about and testing these properties before they are finalized has nothing to do with being “edgy” or with showing off. By proposing changes to the specification and illustrating our comments with examples, we are contributing to a better and stronger spec.Another CSS3 property that hasn’t been implemented in most browsers (only IE supports it, and only partially) is text-align-last. If your text is set to justify, you can define how to align the last line of a paragraph or the line right before a forced break. This property takes the following values: start, end, left, right, center and justify.Unicode Range And LanguageUnicode RangeThe unicode-range property lets you define the range of Unicode characters supported by a given font, rather than providing the complete range. This can be useful to restrict support for a wide variety of languages or mathematical symbols, and thus reduce bandwidth usage.Imagine that you want to include some Japanese characters on your page. Using the font-face rule, you can have multiple declarations for the same font-family, each providing a different font file to download and a different Unicode range (or even overlapping ranges). The browser should only download the ranges needed to render that specific page.To see examples of how unicode-range could work, head over to the spec’s draft page.LanguageUse the :lang pseudo-class to create language-sensitive typography. So, you could have one background color for text set in French (fr) and another for text set in German (de):div:lang(fr) { background-color: blue; }

div:lang(de) { background-color: yellow; }You might be wondering why we couldn’t simply use an attribute selector and have something like the following:div[lang|=fr] { background-color: blue; }Here, we are targeting all div elements whose lang attribute is or starts with fr, followed by an -. But if we had elements inside that div, they wouldn’t be targeted by this selector because their lang attribute isn’t specified. By using the :lang pseudo-class, the lang attribute is inherited to all children of the elements (the whole body element could even be holding the attribute).The good news is that all latest versions of the major browsers support this pseudo-class.ConclusionIn surveying the examples in this article, you may be wondering why to bother with most of them.True, the specification is far from being approved, and it could change over time, but now is the time for experimentation and to contribute to the final spec.Try out these new properties, and think of how they could be improved or how you could implement them to make your life easier in future. Having examples of implementations is important to the process of adding a property to the spec and, moreover, of implementing it in browsers.You can start with the simple step of subscribing to the CSS Working Group blog to keep up to date on the latest developments.So, do your bit to improve the lot of future generations of Web designers… and your own!Resources and Interesting LinksCSS3 Text (Editor’s Draft), W3CHyphenation, W3CCSS3 Fonts, W3CThe Elements of Typographic Style Applied to the WebFive Simple Steps to Better TypographyType Experiments with HTMLStyling a Poem With Advanced CSS SelectorsCSS3: Examples and Best Practices(al)© Inayaili de Leon for Smashing Magazine, 2010. | Permalink | 3 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: CSS

  Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?This post features 45 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.Please notice:all images can be clicked and lead to the preview of the wallpaper;you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?So what wallpapers have we received for March 2010? [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]Super Mario bros 1985"My 25th anniversary tribute to Super Mario bros." Designed by Davide Vicariotto from Italy.previewwith calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200Haiku on Hanami"And the wind says swish, swish…" Designed by April Joy E. Jasmin from Philippines.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Butterfly"The bright colours of March." Designed by Ellen Xue from Canada.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200Spring TimeDesigned by Indeziner from Romania.previewwith calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1600×1200, 1650×1080without calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1600×1200, 1650×1080Sticks and Stones"Was daydreaming and listening to Sticks and Stones by The Pierces over and over againand came up with this idea for the March Calendar." Designed by Kathlyn Marie Salazar from Philippines.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050Searching for springDesigned by Andrei Verner from Russia.previewwith calendar: 800×600, 1024×768, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 800×600, 1024×768, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200Goes in like a lion and out like a lamb"Just an illustration for march :)" Designed by Jennifer Herd from Canada.previewwith calendar: 800×480, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 800×480, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200Soom"This is a color-work done 100% with Adobe illustrator CS4, its all about messing with gradients, transparency and a lot of blend tool. “Soom” means breath, this represents the breathing of universal time. the time of the stars." Designed by David Fernandes / Random Spirals from Portugal.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Up"Fun spring wallpaper." Designed by Anca Varsandan from Romania.previewwith calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200Even Cupcakes Have Bad DaysDesigned by Valerie Morgan from USA.previewwith calendar: 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600without calendar: 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600Ghost Stories"Background picture by Esa Wendelin" Designed by Marta Miazek from Poland.previewwith calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×960, 1400×1050, 1600×1200without calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×960, 1400×1050, 1600×1200Gummy MarchDesigned by Monica Corduneanu from Romania.previewwith calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600without calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600A New Day"It’s the start of a brand new day." Designed by Stephanie Lam from Australia.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200Lucky Shamrocks"Despite the three-leaved clover being synonymous with St. Patrick’s Day, I decided that a four-leaved clover would bring more luck to all the readers. Despite the three-leaved clover being synonymous with St. Patrick’s Day, I decided that a four-leaved clover would bring more luck to all the readers. Cheers!" Designed by Crystal Ng from Malaysia.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1900×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1900×1200Fractal"Inspired by last months article about Mathematics…" Designed by Zhongde Liu from Germany/China.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200, 2560×1600Telephones"The telephone has had a bit of an impact over the last century on the way we communicate, so I thought a telephone-themed wallpaper would be appropriate for the month of its patent." Designed by Dan Sweet from USA.previewwith calendar: 320×480, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 320×480, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200Midnight Sun"The midnight sun sets on the party in the trees." Designed by Chris Alexander (Yipori) from England.previewwith calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440Romanian Tradition MartisorulDesigned by Alexandra Ipate from Romania.previewwith calendar: 800×600, 1024×640, 1280×800, 1280×960, 1400×1050, 1440×900, 1680×1050, 1920×1200without calendar: 800×600, 1024×640, 1280×800, 1280×960, 1400×1050, 1440×900, 1680×1050, 1920×1200Ladybug"If I would be a ladybug…" Designed by Christine Schirbel from Germany.previewwith calendar: 1024×640, 1024×768, 1280×800, 1440×900, 1680×1050without calendar: 1024×640, 1024×768, 1280×800, 1440×900, 1680×1050DaisyDesigned by Pietje Precies from The Netherlands.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Popephoenix"This what we do. This is how we live. This is how we evolve. All for the sake of art." Designed by Popephoenix from USA.previewwith calendar: 1024×768, 1280×720, 1900×1200without calendar: 1024×768, 1280×720, 1900×1200No Smoking"Millions of people die every year because of Smoking but yet millions of people still smoke. I Designed this wallpaper just to Celebrate the NO SMOKING Day and raise our voices against this habit that Kills." Designed by Vanshika Wadhwani from Bahrain.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050Women as nature"Women have long been associated with nature – metaphorically, as in ‘mother Earth’,for instance.International Womens Day is celebrated as the first spring holiday in the Northern Hemisphere, March is considered as the month which brings spring season with Nature Dressed in Green, to Greet the season of spring." Designed by Neelam Asrani from India.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050Spring is coming"The vision of spring by m-mstudio. Now the nature is awakening!" Designed by m-mstudio from Italy.previewwith calendar: 1024×768, 1280×800, 1400×1050, 1440×900, 1680×1050, 1920×1200LuminanceDesigned by Jordan Scott from Canada.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Are you doing all you can?"Are you doing all you can to become the person you want to be?" Designed by Valerie Morgan from USA.previewwith calendar: 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600Bright Summer"In America, March is the month of American Red Cross. In India people celebrate Holi – the festival of colors in March. And in history it is the month in which Brutus assassinated Julius Caesar. Moreover, it is the starting of summer with the hot air, in southern Asia. In human color psychology, red is associated with bravery, purity, happiness, good luck, heat/fire, energy, and blood, and emotions that “stir the blood”, including anger, passion, love, pain, and sacrifice." Designed by Ramesh V R from India.previewwith calendar: 1024×768, 1280×800, 1440×900, 1440×1050, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×768, 1280×800, 1440×900, 1440×1050, 1680×1050, 1920×1200, 2560×1600Ballerine"The letters with drips represent the cold winter and the ballerine is spring." Designed by Axenis from France.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Birthday MonthDesigned by Ammar Ceker from Turkey.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200March Sentense"Just motivating sentence for March :)" Designed by Temeshi from Poland.previewwith calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200Winter’s Almost Over"Winters are long and slushy in Buffalo, NY. March is both the ugliest and most hopeful month, because spring is just around the corner." Designed by Palmer Louise from USA.previewwith calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050without calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050New Beginnings"I graduated college approximately 2 years ago, and since that time have worked as an IT consultant/auditor for a large accounting firm. I realized early on that I had made a mistake and would never be content until I got back into the world of design and development, which is where my passion truly lies. I have been working for the past year building a portfolio in the hopes to do this. This design is a direct byproduct of this and a hope that with Spring comes a new life and a new beginning." Designed by Noah Jablonski from USA.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Lucky MeDesigned by Valerie Morgan from USA.previewwith calendar: 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 2560×1600without calendar: 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 2560×1600Colourfull"I am presenting a colourfull march." Designed by Sandhya Banshal from India.previewwith calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200Spring Bloom"March marks the beginning of a new season and is the time of year when plants begin the grow.The beauty of the month is depicted in this wallpaper." Designed by Ellen Xue from Canada.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200Escaping Winter"I took this photo of Wharariki Beach while on holiday last month in New Zealand. I hope it brings some good weather this side of the world in March." Designed by Adam Foster from England.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050without calendar: 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050Why March"Nothing like a good ol’ anti-war statement. For the record, I am not against the troops. I am against war. Thanks!" Designed by Kris K. from United States.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Feeling Sheepish"A visual interpretation of the month that most importantly connects winter with summer, it just sometimes feels a bit sheepish." Designed by Jordan Scott from Canada.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Chuck misses a tooth"Was kinda bored and looking for some fun. So, came up with Mr. Chuck who just lost a tooth!" Designed by Abdus Salam from Pakistan.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1920×1200Spring Is The Season"Spring is the season of new, young and vibrant colors. My idea behind this creation is to leave behind the darkness of failure, tears, pain and broken hearts. Brighten yourself with new colors, hopes and thoughts like these flowers." Designed by Upasana Jain from India.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600Ultimate Sophistication"I’m keeping the description simple to. The motivation behind this design was reading the Leonardo DaVinci quote online, liking it and wanting to do something to illustrate it." Designed by H??vard Bergersen from Norway.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Sploosh"Bring in March with a sploosh." Designed by Ryan McLeod from Scotland.previewwith calendar: 800×600, 1024×768, 1280×800, 1280×1024, 1440×900Stripy"Be simple and bold this march :)" Designed by Akash Chandrayan from India.previewwith calendar: 320×480, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1200Standing Tall"Like any designer, I derive inspiration from nature. And animals are my favourite. Still I remember the tall, majestic Giraffes that I saw in my school excursion. Have a beautiful month." Designed by Ganesh k Swaminaathan from India.previewwith calendar: 320×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050without calendar: 320×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050Olympic Mania"Desktop Wallpaper for March, 2010, Inspired by Vancouver 2010 Olympic Winter games." Designed by Sagar from Bangladesh.previewwith calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×1024, 1440×1050, 1600×1200without calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×1024, 1440×1050, 1600×1200Join in next month!Please notice that we respect the ideas and motivation behind artists’ work which is why we’ve given artists full freedom to explore their creativity and express emotions and experience through their works. And this is also why the themes of the wallpapers weren’t anyhow influenced by us, but designed from scratch by the artists themselves.Thanks to all designers for participation. Join in next month!What’s your favorite?What’s your favourite theme or wallpaper for this month? Please let us know in the comments! And have a smashing March, folks!© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 10 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Wallpapers

  Over the years designers have pushed themselves to create unique and inspiring designs. Companies have yearned to have websites which are innovative and make them stand out against their competitors. Yet charity websites have not progressed along with trends and expectations — they seem to have been designed for launch and then only updated with minor tweaks to suit the content.It has become a recent trend for charities to look at their online identities and branding; spending money on creating user experiences which suit their user base, and over time getting people involved with their campaigns and messages.Below we look at charity websites which have successfully developed their online brand using modern and creative ideas. We will also discuss how each charity website can be improved because, as we all know, not every website is perfect. There are always improvements to the design or usability that may have been overlooked by management, designers, or developers.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]1. Red Nose DayRed Nose Day is a fundraising event dedicated to raising money for Comic Relief.As you can see above, the Red Nose Day website design combines many different techniques to achieve a highly-minimalist and playful design. Throughout the website you can find non-web-based font headings implemented using sIFR, feature panels built in Flash and a striking navigation, built using CSS Sprites.The design uses a simplistic colour scheme of white, black and red. Using red along with black and white has a high impact on the user, and of course reinforces the “Red” in “Red Nose Day”. The red is predominantly used on call-to-action areas since it is effective in drawing the user’s eye.Donate button featured in Red Nose Day’s headerBecause the Red Nose Day campaign reaches such a wide audience, the website design achieves the perfect balance between comical elements and factual information. Satisfying the requirements of such different audiences — the younger generation and more mature users — is a tough job and Comic Relief have managed it effectively and impressively.ImprovementsNowadays, making content accessible should be a routine part of any site’s development. Unfortunately, the Red Nose Day design makes heavy use of light grey text on a white background. This lack of contrast can prove difficult for users with poor eyesight. A way to improve this would be to use a much darker grey or black in order to increase the contrast between the text and background. Alternatively, they could offer this option through user-controlled accessibility website tools.As mentioned above, the purpose of the Red Nose Day event is to raise money for Comic Relief. As a visitor to the site, I would be interested to know the progress of the fundraising efforts. While a counter is included on some of the content pages, it would be more beneficial to the user if it was also displayed on the home page. This demonstrates to the user that the charity is currently active. Of course, they may have their reasons for excluding it from the home page that we’re not aware of.Fund raising total featured on Red Nose Day content pages2. Give Us A LiftThe Give us a lift campaign website, run by WRVS is aimed at raising awareness of how older people struggle to get to the places they need to on a daily basis without the support of community transport.The design makes use of a large background image and cardboard cutouts to portray the theme of hitchhiking. Along with a striking colour scheme of a dark background with contrasting pink, green and blue elements, the design makes a big first impression on the user. These contrasting colours are carried through onto the content pages and, in the sidebar, two main call-to-action links in purple and green ask the user to either donate or volunteer.A speedometer Flash element is positioned to the base of the page counting the number of volunteers. Due to this unique idea and design, the user’s eye is drawn down to the bottom of the page where another two call-to-action links can be found.This campaign website makes heavy use of Flash elements in order to display donation totals, volunteer totals (in the speedometer), and the winners to the campaign’s Twitter competition. It is unusual to see such creative elements within a charity design and it’s refreshing to see a website that understands the content that needs to be communicated — but doesn’t sacrifice engaging creativity.Twitter winners from the Give us a lift campaign websiteThough the high impact design would have a stronger response from a younger audience, the website also caters for the older generation with attention to accessibility. On all content pages, a button can be found to increase the content’s font size using jQuery. Also, a dark font colour is used to add high contrast between the text and background.ImprovementsAs mentioned above, the Give Us A Lift campaign website makes heavy use of JavaScript and Flash to display its contents. These elements could become unusable for the older user base as they may not have Flash installed, or have disabled JavaScript — making the video section impossible to use. The heavy use of Flash elements also increases page-load times. When implementing these elements, it is important to optimise the Flash and cater for circumstances where Flash may not be installed or JavaScript is disabled.While the designer of the website has obviously tried to pay much attention to all of the details, with many elements popping out to the user, the main navigation seems to be lost and this can cause a problem for the user if they cannot instantly recognise the main source of navigation. This may be because the navigation not being featured within the main layout container; also, the lack of background colour makes it blend into the dark background image and the user could find it difficult to read the grey text on black. Brightening these elements and making them stand out more would make this design more polished and create a much happier user experience.The Twitter page on the campaign website features a stripped-down version of Twitter’s feed widget. Though it is great to see this integration of social media into the website, the lack of creativity and separation between tweets creates an element that resembles Google Ads. This would obviously cause problems since the majority would most likely ignore this part of the page.Comparison of Twitter Feed with Google Ads3. ChildLineChildLine is a charity set up to aid children with a variety of problems ranging from helping with sexual and physical abuse to answering questions about concerns for parents and other family members.The target audience of the ChildLine website is of a younger age, therefore the design reflects a very animated theme with cartoon characters repeated in the background, large font sizes and a bright colour scheme. The cartoon characters are also a representation of what the child might be feeling when visiting the website — a subliminal message that ChildLine understands what they are feeling, and can offer help.Throughout the website, a yellow tab is fixed to the left side of the page and acts as a panic button for the user to click if they wish to quickly hide the website by sending the user to the Google home page. This implementation is similar to the “Feedback” button that popular sites use as part of the Get Satisfaction service.Hide page tab from ChildLine websiteChildren are always looking to customise anything they can: desktop backgrounds, icons, Myspace layouts, etc. So ChildLine have made use of the MooTools JavaScript framework in order to allow the user to change the background colour and image of the website. After clicking the ‘Change Wallpaper’ tab at the top of the page, a white panel slides down for the user to customise the wallpaper of the site. These slide-down panels are used on many websites to display hidden forms and content.A question is raised as to whether it is appropriate to allow this level of customisation on this kind of website. From a child’s perspective, however, this can create a fun user experience and a safe environment that they enjoy visiting. This creates trust between the child and the charity, which is an invaluable benefit. This sense of fun and trust will also mean the child is more likely return to the site.Change wallpaper panel from ChildLine websiteImprovementsAn important part of the ChildLine website is to offer help and protection to children in need. The “Hide Page” tab discussed above is an invaluable part of this website, helping children navigate away quickly if the need arises. A similar offering is a footer link labeled “Cover Your Tracks”. This gives the child information on clearing traces of their website visit from their computer.Though the pull-down panel is great for small amounts of content (for example, the wallpaper customisation), large amounts of content can disrupt the page flow. At the top of the ChildLine design, “Accessibility” and “Help” tabs are used to display large amounts of text on the relevant topic. This heavy amount of content pushes the main content of the page down below the fold and can cause confusion. A way to improve the usability of these sections would be to take the user to a new content page where headings, white space and imagery can help break up the lengthy content.Earlier we spoke about the bold repeating background that’s heavily featured in the design. When scrolling down a long content page, this repeating background can disrupt the user’s flow and be quite harsh on the eyes. Making the background image fixed (by simply adding background-attachment: fixed; to the CSS), the user will find reading down the page a lot easier and not be distracted by the moving background when scrolling.The yellow “Hide Page” tab can for some users be easily lost in the bright colour scheme and bold background. Due to the idea of emergency and panic behind this button, perhaps swapping the yellow for a red could provoke an automatic user response. The use of red would also mean that this tab would be harder to lose in the colors.4. WWFWWF is the world leading charity in the conservation of wildlife.The design for the WWF website is very different from the other three charity websites we’ve considered. The layout is very clean, grid-based, and focuses heavily on high-quality imagery to add a polished finish. By using a clean, organised layout and relying on eye-catching photography, the user is drawn to focus on what is important to the charity: its content and purpose. The WWF’s user base would be a more sophisticated and older generation than that of, say, ChildLine, so the user may be less daunted or afraid to read the content.The features panel on the home page uses jQuery to rotate through different stories, latest news, and call-to-action buttons. Though the jQuery was custom written, it is possible to replicate using jQuery plugins or following tutorials such as Creating a Slick Auto-Playing Featured Content Slider on CSS-Tricks.A neutral colour scheme of white, black, and grey is used to make any important call-to-action buttons more visible. These buttons have a striking green or orange background. When the user moves into the donate section of the charity website, the design is cut down to the bare minimum, again allowing the user to focus on the core messages. All navigation and unnecessary buttons are removed.WWF donate now sectionImprovementsIn contrast to the other charity websites, it would seem that the primary objective of the WWF website is to teach users their purpose and goals. A lot of the content and call-to-action links are aimed at making the user read about the charity and what they can achieve. The “What We Do”, “How You can Help” and “Donate Now” buttons in the header vary in size, the former two being larger than the latter. This difference in size reaffirms that the charity feels that an understanding of their goals is important prior to donating. Users rank the importance of elements by their difference in size. If the charity wished to push more donations in the future, it would be effective to swap the sizes between these call-to-action buttons in the header, giving the ‘Donate Now’ call-to-action a higher importance to the user.Varying call-to-action sizes in WWF design headerAs part of the WWF design, a description of what a £10 donation could purchase, or how it could help the charity, is featured within a panel. However, when within the donation section of the website, a £10 radio button is not offered to the user, potentially causing confusion. The user is then left with the options of £5.00, £25.00 or entering their own value. There is quite a large leap between the two default amounts, and the user may be inclined to opt for the £5.00 option. Contradictory to the prior emphasis placed on the importance of £10.00 as a donation value, it would be interesting to know how many users opted for £5.00 but perhaps would’ve been willing to donate £10. Perhaps including this as a middle-ground default donation amount would be a nice addition.5. MacmillanThe Macmillan Cancer Support charity offers help to those living with cancer and their families.When the Macmillan Cancer Support website initially loads, the user may feel overwhelmed by the amount of information and links on the page. However, this portrays to the user that the website and charity have much advice and support to offer. A way in which the design tries to break down the information, is by compartmentalising everything into panels which can be closed and re-opened via jQuery as the user sees fit.An improvement on this, and in effect making the initial page load less daunting for the user, would be to have some the panels already collapsed. Therefore the user can expand only those they wish to read more about.Collapsible panels on Macmillan Cancer Support home pageThese panels on the home page use block headings with strong background colours to make defining sections and sub-sections easier for the user. Dark green headings are used to define a new section, whereas a lighter green heading is used to define a new sub-section. By making these headings so definitive the user can break the content down into more readable chunks.The bright colour scheme used in this design can create an emotional response from the user. The user may be made to feel more light-hearted and hopeful through the use of warm earth colours.ImprovementsThe Macmillan design makes use of a lot of call-to-action buttons with distinct background colours. Unfortunately these links are left as inline elements, meaning that only the text is clickable. It would be more user friendly if these were block-level elements where the click area of the link would include these strong background colours. By increasing the clickable area, the chances of a successful click from the user is heavily increased.The charity’s name and tag-line are displayed in the top left, as is customary. These elements, however, are not clickable, so this could cause brief confusion when the user is looking for a link to the home page.Unclickable Macmillan title and tag-line in headerA large usability error on the Macmillan sign-in form is the lack of labels within or next to the appropriate fields. The user is left confused and must guess what information to put in which field. Though users are used to entering two pieces of information (user name and password), it is not clear whether the site requires a username or email address. As internet users, we have a long list of websites which we hold accounts for, all with varying requirements for a successful login. On the “Online Community” page, the same form uses labels within the fields (JavaScript is used to remove these labels when the user focuses on the field). To improve the consistency of the website and allow for a more user-friendly form, these labels should be applied across the website.Sign-In Form without appropriate labels on Macmillan website6. DogsTrustDogsTrust is a charity that aims at finding homes for stray and abandoned dogs.The DogsTrust design uses a high-impact colour scheme mainly consisting of yellow, black and white. The yellow immediately catches the user’s attention, and can be interpreted as a positive, happy colour.The main site navigation features many commonly-used techniques such as rounded corners, gradients, and a subtle 1px white line across the top. These elements, combined with the black create a visually effective navigation. The navigation only consists of five links, therefore giving users fewer choice, and creating a more focused user journey.DogsTrust website’s main site navigationThe home page design consists of minimal content and uses effective white space to allow everything to appear above the fold without looking cluttered. The users of the DogsTrust website are highly likely to be dog lovers and therefore the use of dog imagery on the four main call-to-action areas would certainly draw the user’s attention. These areas also feature four varying colours which contrast well with the yellow and black.Call-to-action areas with dog imagery and contrasting coloursImprovementsThough we briefly discussed above that the home page uses whitespace effectively to reduce clutter, the header contains many links and words; the user could get easily confused. With login, register, contact, privacy and shopping links, a search form, and two taglines, the user is given too much choice, so this section could be improved.While going through the process of donating, there are certain fields that cause the page to refresh and brings the user back to the top of the page again. The user is then required to scroll back down the page to continue filling out the form. During this process, this page refresh occurs 3 times, which can be rather annoying. It would be beneficial to develop the form using alternatives technologies, such as Ajax, which would remove the need for page refreshes.The imagery on the DogsTrust website features happy, healthy dogs that need re-homing. It is assumed that this use of imagery is successful in receiving donations or re-homing dogs. However, similar charities make use of imagery where the dogs appear unhealthy and unhappy. It could prove useful for the organisers of DogsTrust to try out this type of imagery alongside the current images through A/B testing, therefore seeing which type of image is more effective in converting website users into contributors.7. ShelterShelter is a housing and homelessness charity providing advice, information, and advocacy to people in housing need.The logo featured in Shelter’s design is simple and effective. While being easy to read, the typography of the “h” is suggestive of the charity’s purpose. By using the colour red, the user is given a sense of urgency. The audience of the Shelter website varies a lot from a younger to an older generation, therefore the design is very refrained and simplistic. This allows the message to be portrayed through the content rather than through heavily-designed elements.Throughout the design you will notice use of solid horizontal borders and lines which give a sense of structure and organisation. The lines allow the user to break the content up and be more easily read, but can also be interpreted as a symbol of shelter.The footer features links to social media profiles such as Twitter, Facebook, and YouTube. This suggests to the user that the charity is up to date with the latest trends and advertising techniques. Users may be intrigued to click these icons and discover more content.These social media icons also use jQuery to create a nice rollover effect which highlights and changes the text underneath to a descriptive caption of the icon.Rollover effect on Shelter’s social media iconsImprovementsWhen browsing the Shelter website, the user can find themselves clicking through a lot of links until they find the page they want. This can be due to the large amount of call-to-action buttons and lack of whitespace on certain pages. By increasing the whitespace between elements, an easier user experience can be created and also makes content easier to break down and consume.Example page with large amounts of links where whitespace can be improvedAgain, while browsing the child pages of the Shelter charity website, links to the donate section are easily lost among all the call-to-action areas, pictures, and content. Perhaps by making the background of the “Donate” tab in the top navigation red, utilising the red from the existing colour scheme, this may draw the user’s eye. The user would spend less time trying to locate the donate section.8. Sponsor LeeThough not a charity website, Sponsor Lee is a microsite intended to raise money for Action for Kids charity.Using a cool colour scheme of blue, silver, and white, along with friendly vector illustrations, gives the user a professional impression. This is important because the user wants to believe they are giving money to a good cause and not being ripped off. Lee Munroe, the designer of the site has been clever with his use of the fold as all important information is displayed at the top. Though users are not afraid to scroll, they do not have to look too hard to find the information they need.Included in the header is a progress total and aim for the sponsorship. By including this in the design, the campaign is made to feel more realistic and the user can then identify with how much of a difference they, themselves, can make. Now the campaign has finished, users can see how well Lee has done against his target. By putting this total in yellow, the number stands out and the user can see immediately that Lee beat his target.ImprovementsThe Sponsor Lee website displays a lot of creativity from the colour scheme to illustrations in the header. Unfortunately towards the bottom of the design, it comes across that parts are unfinished or broken, for example the social media links and footer. This can give an impression of lack of commitment or a rushed process.Sponsor Lee website footer9. ShelterBoxShelterBox is a charity that helps communities recover from natural disasters. This includes providing “emergency shelter, warmth and dignity to people affected by disaster”.Like many of the charity websites we have already discussed, the ShelterBox design uses a very neutral base colour scheme of grey and white combined with a high contrast green. Main call-to-action buttons are then given a yellow background to effectively stand out to the user. On the right of the home page, the design depicts to the user exactly what ShelterBox as a charity provide along with a counter-style number showing the number of boxes distributed so far by the charity.By showing the counter and including additional zeroes at the beginning of the total, the user understands that this is an ever-increasing number and therefore, an active campaign.ShelterBox panel featuring box shot and box counter totalAdjacent to this panel, an auto-rotating image gallery is displayed using the jQuery Cycle Plugin. This acts as a call-to-action for the user to find out more, but also shows the user the charity’s work first-hand. This makes the user feel directly involved and may want to do more to help. Overlaying the image, a caption with a slightly transparent background that describes the content of the image is displayed. This method is currently very popular in image galleries.Auto-rotating image gallery on ShelterBox home pageImprovementsImportant elements of the website are lost due to the lack of creative design such as the “Latest Deployments” and “International” sites lists on the home page. The charity should style important elements such as these so that they stand out more. This can be achieved perhaps by adding background colours and making them bigger. By increasing the size of elements, the user will recognize these as more important.Latest Deployments section on home pageThe design lacks a sense of containment — the content of the website seems to bleed into the white background of some pages, making reading content difficult. Perhaps by making the background of the body a light grey and keeping the main container background white, a barrier can be created between the content and the rest of the page.10. Action for ChildrenAction for Children is a children’s charity that offers support to vulnerable children in the UK.The Action for Children website design is similar to that of Red Nose Day, using a very neutral colour scheme consisting of cream, white, and a contrasting red. Elements of the design are constructed of sketch-like lines to resemble a children’s drawing.Elements of high importance are given a light cream background to help them stand out against the other sections that have a white background. The user can therefore easily detect which sections to pay more attention to.Embedded on the home page is a video of British actress Davina McCall. By having a frozen shot of a celebrity on the home page, the user is reassured of the charity’s success and credibility. The effect being potential donations from a user who is feeling confident that the charity is well supported and perhaps inclined to become involved because of celebrity associations.Once the user’s eye is drawn to the celebrity viral, they will notice four call-to-action areas displayed on the right. The wording of these are very snappy and simple to suggest to the user that these actions are easy, but meaningful. Alongside the wording, hand-drawn illustrations are used to add interest and creativity.ImprovementsWhen viewing the sitemap of the Action for Children website, there is a bug in the CSS of the columns. Columns are too wide to fit the intended number in a row, meaning columns are misplaced below others on the right and breaks the flow of the page. This can be fixed by either making the content area wider on this page (as there is no sidebar), or adding a clearing element after each row. Making the columns easier to read allows the user to find the page they’re looking for quicker.Another bug is the functionality of the inline popup windows that appear after clicking the “Send Page”, “Feedback”, and “Share Page” links. The windows are cut off underneath the title, making the forms unusable.Example of inline popup window bug on Action for Children websiteSupport Needed: Stand With HaitiAs many are aware, Haiti recently suffered a major earthquake which devastated the country. Stand With Haiti is a campaign website set up by Partners In Health who, even prior to the earthquake, have been providing medical care in Haiti for over 20 years.The first thing you notice about the Stand With Haiti campaign website is the colour scheme. The blue is both soothing and in keeping with the Partners In Health branding. In contrast with the blue, orange and deep reds are used on call-to-action buttons and on important pieces of information that portray a sense of urgency and high importance.Consistency with the deep red is used so the user can easily recognise buttons and links — meaning an action is required from the user. Through the use of page structure, size, and order, a user visiting the Stand With Haiti website is clearly provided with an order of priority for certain aspects of the website. The first being to Donate using the large red “Donate” button found at the top of the page within the main header. This element is one of the first things the user’s eye is attracted to when landing on the website.Directly underneath this large “Donate” button are two smaller, slightly darker red buttons. The purpose of these is to help users share the site on popular social media websites, with the goal of increasing the number of visitors and donations.Finally, the user is left to browse and read the site’s content at their own leisure. Being a current crisis, it was an obvious choice to give higher importance to donations and spreading the word. By prioritising areas of the website, a simpler and more effective user experience is created.Prioritised buttons featured in Stand With Haiti headerWhile acting as a medium for receiving donations, the home page of the Stand With Haiti website acts as a news hub for the latest pictures and information. This is crucial for users who wish to be kept up to date with the crisis and know how their donations are helping.A jQuery-built image gallery, similar to ShelterBox, is used to display images of the crisis. Underneath there is a list of recent blog posts and instant updates from the charity’s Twitter feed.ImprovementsAs we discussed above, the design features a lot of orange and red buttons. However, none of these buttons have hover or visited states. Adding these to the links and buttons would increase the usability of the website, showing the user clickable areas more prominently and helping them recognize where they’ve already been.Donations being one of the main purposes of the Stand With Haiti website, it is important that the donate form is usable. Unfortunately, at first glance the donate form looks cluttered.Stand With Haiti donate formThe form would be much more usable and readable with better use of whitespace. It could also improve if the form labels were clickable to their appropriate input field. While this provides easy-to-select fields, it also ensures that people with screen readers and auto-fill functions can use the form.After adding effective white space and increasing the usability of the form fields, a button similar to those used on the home page of the site can be used for the “Process Contribution” button. This should also be repositioned as users expect submit buttons of this kind to either be on the left or right. Few forms, especially this wide, place their submit buttons in the middle.Useful ResourcesMany of the methods mentioned above can easily be achieved yourself:Rich Typography On The Web: Techniques and ToolsThe Mystery Of CSS Sprites: Techniques, Tools And TutorialsBackgrounds In Web Design: Examples and Best PracticesMooTools Tutorials and Resources Round-Up45+ New jQuery Techniques For Good User Experience10 Useful Usability Findings and Guidelines© Ben MacGowan for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: usability