The Private Web

privateFor years we’ve been told the key to the future is the Open Web. And for years it’s been true that taking the open path eventually pays off. You can’t deny the power of open technologies to disrupt the incumbents, whether they are operating systems or carriers or the media in general. Arguing about what constitutes open can be entertaining, but in a world where realtime dominates, we are starting to move on to capture the value of open for ourselves, in the private Web.

As social media clouds become more resilient, we are trusting them more. Twitter lists are a robust signal that the company has moved from keeping up to encoding the value of its network. We won’t see many new stars as lists proliferate, but rather a better sense of how to model the new media forms that micromessages enable. Boiled down to vertical niches, lists are the instantiation of a way of looking at the Web, a kind of Yahoo 2.0 based on people aggregation rather than sites or topics.

But what value do these lists have in raw form? It feels like a Wikipedia page, where you learn not to click on hyperlinked words for fear of getting lost in ever-cascading tangents based on ever-more generic topics. Instead, you rely on the intelligence of whoever constructed the page, scanning for clues as to authority, serendipity, social characteristics worth capturing for yourself. Two problems: the list architecture is splayed all over the place, and we have no tools for harvesting the value.

Of course, we’re just seconds away from the onslaught of third party takes on the subject. Surely we’ll see interesting aggregations of the Top 100, the best, brightest, sexiest, etc. We’ll recognize the familiar names and ratify their positions in the new marketplace. It’s a marketplace that will have its own hierarchy, its own Oprah, its own politicians, police, and underworld. And with all that will emerge its own underground economy.

What is the Private Web? It’s the private place only we know about (or think we do.) It’s the place where our deepest fears and instincts combine to produce the hunches that drive our lives. As a parent of a teenager, I’ve seen my hunches evolve to reflect the rapid pace of social media and my daughter’s use of it. Twitter is nowhere on her radar, Facebook serves as a gas station where she pauses for fill ups, and video chat and IM are interrupted only for food, homework, and periodic audiences for the purpose of fundraising for road trips.

All of the most important parts of her life are conducted on the Private Web. This is not a good or a bad thing; it’s just what it is. I can sense her world but only by inference — more by the difficulty in understanding parts of it than any rational tool such as asking questions or withholding permission until information is volunteered. I feel like Steve Wonder, blind but with some heightened power of perception that slowly carves out information from the resiliency of the difficulty of it.

Take this exchange:

When are you going out?

In a bit.

[some narrowing to an hour, say 4]

Who are you meeting?

Uhh, Amy and mumble and whatever. [co-conspirator, someone I don’t know, and no mention of whoever I want to know about, usually boys]

So when will you be coming home?

I don’t know I’ve done my homework [usually not] and it’s [whatever day it is] and I just want to have fun with my friends, Dad. Jeez. [Obfuscation of the length of the excursion to allow for audibles at the line of scrimmage to do all the stuff I should be concerned about]

Lengthy negotiation based on the hunches I’ve collected.

What’s important to understand is that my daughter already knows exactly what she wants to do and has modeled it to the best of her ability to predict the future, online and through the social media framework. Facebook tells her where the opportunities lie, texting confirms or augments those clues, voice is only used to ratify plans once the permission map has been drwan and pre-tested for potential disruption. These kids are really good at this stuff, and we are learning more from them than they from us.

Some conclusions gleaned from observations of the Private Web:

  • It’s not about Twitter, it’s about what Twitter has triggered.
  • Realtime is the best way to get what you want, before defensive measures can be deployed.
  • Friends are important, and particularly a deep bench. If one friend becomes overexposed, you switch to a backup.
  • Texting is the prime channel, then video, followed distantly by email and IM.

To unpack, last in first out. Texting is tied to a hard coded identity, credit card, device. This provides two-way leverage, where the parent (boss) can monitor and require timely feedback, while the child (you) can meter out pseudo-information to keep you happy while navigating largely unseen on the digital network. It is much easier to project a sense of action, reliability, and strategic positioning via social media when you can downplay the value of moving physically through space and time. Foursquare will hit a wall once adults (companies) discover the existence of these breadcrumbs. Foursquare will counter by virtualizing location.

Just as location will become more editorially enhanced, so too will the role of the team in social hierarchies. It’s much more useful to have interchangeable friends or partners, so that the parent (company) knows there will be some coherent continuity regardless of conditions on the ground. People profess to value collaboration, but the strongest connections in the social graph are between groups of overlapping friends who in aggregate add up to a rational team but don’t require hardcoded roles. Put in nightcrawling terms, it’s “OK, I helped you out last night, tonight you’re my wingman.”

Realtime, of course, just plain wins. You may get away with almost a few times, but once people are onto you, they’ll start serving the ball to the weakest point. Realtime is inexorable because our sense of timing adapts to each generation of realtime and soon gets frustrated with how slow it is. How many times have you interrupted someone’s argument because you know what they’re going to say? How many times have you skimmed a post or even a tweet for some clue that it’s worth whatever miniscule time you’re now tuned to? That’s why video is right there after texting, because a picture is still worth a thousand words. “If looks could kill…”

And first but not least, Twitter is so not the point but what it has created is. The key to the Private Web is notification, not the actual content. The social signals that enable or disable connections are the new PageRank. It’s not a link but the ability to see the metadata that describes a link’s immediate value that’s valuable. My daughter uses speed to get off the phone or out of range before I can pin her down for the next number to reach her at. The data is sitting there in plain sight but where it is is obscured. Understanding her social graph in realtime is what we want to know and what she wants to obscure.

The Private Web operates on deeper emotions and instincts than we are accustomed to acknowledging. Where do I want to go? Who do I want to be? In the case of my daughter, how do I get to be who I want to be? The keys to the Private Web are shared, not at a location but via implicit and dynamic permissions to access the stream in realtime. Those who signal their understanding of this deeper value pool will implicitly advertise their value, and encourage us to request permission to share with them. Those deeper conversations will contain higher value as we trust those who share them to keep them private to the group who values them.

Twitter may not support conversations very well, but it provides clues to where the Private Web exists. These conversations live in the cracks between the public stream and direct messages, hidden either by obscurity or purpose. As they become more useful, the tendency will be to make them public, but in doing so they will lose that unique quality of trust and value. Instead, these private conversations will grow, until everyone is participating.

Crunch Network: CrunchBase the free database of technology companies, people, and investors


Smashing Magazine’s Redesign and Smashing Network

Something has changed here today. Smashing Magazine has shaped up. We know that extensive design changes usually create a split echo: some readers are happy and appreciate the additional features and benefits, while others don’t want to see anything change because they’re comfortable in their old habits. However, publishers have to update their websites from time to time to improve the user experience and add new features. And that day has come for Smashing Magazine.

Wet Paint!

Smashing Magazine’s redesign was done by Liam McKay and his design agency, WeFunction. We also tweaked a couple of things in the design. Footer and sidebar illustrations were designed by Pasquale D’Silva. Smashing Magazine may look a bit different at first glance, but keeping the general structure intact was very important to us. After all, we don’t want to confuse our readers; rather, we want their experience to improve.

So, minor details aside, what exactly has changed on Smashing Magazine? Here’s a summary:

  • You can now visit pages of our regular authors (e.g. Kayla Knight). There, you’ll find information about them, see an overview of their posts on Smashing Magazine and follow their Twitter stream. You can also visit a page that lists all of our regular authors.
  • You can now rate articles on Smashing Magazine (in the comments area of each post). The highest-rated and most-commented articles are displayed on the post’s category page (e.g. Graphics). And you can find an overview of our categories on the All Categories page.
  • You can now leave threaded replies to comments. Pages that have a huge number of comments are now paginated.
  • User-submitted design news now appears in the widget on the right side. This news is pulled from our sister website, Noupe. Everyone can submit news, which lands in the moderation queue and is manually approved by our moderators.
  • This sidebar widget also features recent jobs and the latest Smashing Forum entries.
  • We have re-organized our tags, removed duplicates and replaced some of them with more meaningful labels. You can now use our Tag Explorer (the “Popular tags” link at the top of the page) to navigate Smashing Magazine.

And Then There Is The Network

If you’ve already had a look at the new front page, you would have found some changes there, too: not just recent Smashing Magazine posts, but contributions from other design magazines. That’s because we’ve teamed up with 18 other magazines to house a productive and comprehensive meeting place for designers and developers, showcasing truly the best content around. Among those joining the game are Webdesigner Depot, Noupe, SixRevisions, UX Booth, Hongkiat, ThinkVitamin, Web Designer Wall, Designm.ag, Boagworld and Speckyboy. We call it the Smashing Network.

smashing-network

  • The idea behind the network is to promote high-quality content on the Web design scene and to make it worthwhile for publishers to produce useful and interesting design-related articles. We want our community to benefit from these articles and support the publishers with direct traffic from the Smashing Magazine.
  • Our main RSS feed (the one you are subscribed to) will not automatically contain excerpts of posts from our network members. We will have a separate SM network feed for that.

In fact, every network member has its very own channel on Smashing Magazine, with recent posts and Twitter updates. All content is manually approved and promoted on the network — no automation at all. So, you can be sure you’ll get only the best articles.

Needless to say, we will still be publishing our own insightful articles, which you can always find on our front page. The last article always appears at the top, with older posts clearly highlighted in a black box among the other SM network posts.

smashing-network

We are aware that this huge change will lead to misunderstandings and may cause problems at first. But we are certain it was the right decision and that everyone will benefit from it. If you prefer the old version of Smashing Magazine (the one without the posts from our network), you can use Smashing Magazine’s channel page, which is exactly the same as our front page before the redesign. Or just stick to our main RSS feed, which contains only Smashing Magazine posts.

Want To Join The Network?

The main requirement for membership in our content network is that you regularly publish high-quality content on your blog or magazine. You don’t have to be popular or have a lot of traffic; you could be just starting out. You can apply for membership by sending an email to network@smashingmagazine.com. We will be reviewing membership periodically, so please be patient and stay tuned for updates.

What Do You Think?

This redesign is work in progress. Your opinion is very important to us. The design definitely could use some changes and we are willing to improve it with your help. Of course, we may have missed something. Have you found any mistakes, bugs, errors or problems yet? What do you think of the whole thing? We are open to your suggestions, ideas and criticism. Please let us know what you think in the comments to this post!

(sl), (vf), (al)


© Smashing Editorial for Smashing Magazine, 2009. |
Permalink |
191 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: ,

Desktop Wallpaper Calendar: November 2009

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 60 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 November 2009?

Scared Turkey

“Thanks giving is approaching, and Tom the Turkey is getting scared. This wallpaper was created using The GIMP and Inkscape.” Designed by Jeffrey Boulais from USA.

Smashing Wallpaper - november 09

Give Tanks

“My tribute to the Constructivist design just in time for Thanksgiving.” Designed by Valerie Morgan from USA.

Smashing Wallpaper - november 09

Bless You Zebra

“Exaggerated sneeze.” Designed by Drew Gilchrist from Canada.

Smashing Wallpaper - november 09

November Sentence

“Just motivating sentence for November :)” Designed by Temeshi from Poland.

Smashing Wallpaper - november 09

Jimi Hendrix Birthday Tribute

“Celebrating the birth of legendary guitarist, Jimi Hendrix. Purple Haze, Red House and Hey Joe are among some of his ageless songs. Take some time and “get experienced” with Jimi Hendrix this month.” Designed by Kevin Harrison from USA.

Smashing Wallpaper - november 09

Pop Ruff

“An homage to Pop-Art and the Tide brand, sprinkled in a little texture, space on the right for your icons to be seen, and voila, the level three experience.” Designed by Daniel Luzier from US.

Smashing Wallpaper - november 09

Give Thanks

Designed by Millicent Bowman.

Smashing Wallpaper - november 09

Thank You

“In the spirit of Thanksgiving, this wallpaper was created with many ways to say “Thank You” in various languages.” Designed by Valerie Morgan from USA.

Smashing Wallpaper - november 09

November Snowboarding

“A calendar for November with a snowboarder, mountains and vector graphics.” Designed by Eirk Granli from Norway.

Smashing Wallpaper - november 09

Turkey Laser

“It is turkey month, but not in the way a turkey likely appreciates. So in the hopes of avoiding the dinner table, this guy decided to hide out at a school that miraculously has not updated their “picture day” procedure since the 1980’s resulting in a radical portrait (and by radical I mean his mom sprung the extra bucks for the laser background and the double image).” Designed by Robert Frey from USA.

Smashing Wallpaper - november 09

Bonding

“Spend some quality time with your parents because they will not always be around.” Designed by Terence Gomez from Philippines.

Smashing Wallpaper - november 09

Day of Dead

“Wallpaper with calendar commemorating the Mexican custom of pre-Hispanic origin “Day of the Dead”.” Designed by Violeta Hernandez from Monterrey, México .

Smashing Wallpaper - november 09

Creative November

Designed by Valentin Bojilov.

Smashing Wallpaper - november 09

Peace Giving

“Peace Giving, reference Thanksgiving! :)” Designed by Alejandra Abad from USA.

Smashing Wallpaper - november 09

Glamour Girls

“Where is the Party Tonight Glamour Girls?” Designed by Puneeta Prakash from India.

Smashing Wallpaper - november 09

Native American

“My inspiration comes from native american art combined with my love of fashion” Designed by Lauren Curtis from United States.

Smashing Wallpaper - november 09

My little dream

“There are a lot of fun things you can do inside when November comes, stay inside and have fun.” Designed by Snorre Glemmestad from Norway.

Smashing Wallpaper - november 09

Bonfire delight

“Fireworks light the sky on bonfires night.” Designed by Chris Alexander (Yipori) from England.

Smashing Wallpaper - november 09

Autumn Colours

“For November, I wanted to feature Canadian nature with a photograph from my own portfolio. In respect, I’ve also added a poppy to the wallpaper for Remembrance Day.” Designed by Ducky Design from Canada.

Smashing Wallpaper - november 09

Turkey Day

“A brown and orange themed turkey day. A reminder that these fierce birds are grandiose, but also delicious!” Designed by Amanda Johnson from USA.

Smashing Wallpaper - november 09

Seasonal Change

“Seasonal change – the transition from autumn to winter just like pages in a book…” Designed by Alexandra Ipate from Romania.

Smashing Wallpaper - november 09

Mother Earth

“‘Mother Earth’ is a common metaphorical expression for the Earth and its biosphere as the giver and sustainer of life.” Designed by Sagar from Bangladesh.

Smashing Wallpaper - november 09

Autumn Chill

“A nice serene nature photograph with rich browns, golds, and complimented by a cool hue of blue and white. I took this photo in my backyard one morning, in the nice chilly weather of autumn.” Designed by Christopher Reed from United States.

Smashing Wallpaper - november 09

Children’s day

“Universally, Children’s Day is celebrated on 20th November, every year. But in India it is celebrated on the 14th November, because the date marks the birth anniversary of legendary freedom fighter and independent India’s first Prime Minister, Pundit Jawaharlal Nehru. As a tribute to Nehru and his love for children, Children’s Day is celebrated on his birth date.” Designed by Supriya Kunal Dcunha from India.

Smashing Wallpaper - november 09

Thailand’s Lot Krathong

“The Loy Krathong Festival of Thailand will happend in November of every year. I want to tell the world There is a very Beautiful and Romantic festival in Thailand. Want you to come and see it!” Designed by dafxxxk from Thailand.

Smashing Wallpaper - november 09

The Fall of the Berlin Wall – 20th Anniversary

“20 years ago, the 9th of November 1989, the wall separating East Germany from West Germany fell in Berlin.” Designed by Vincent Prat from France.

Smashing Wallpaper - november 09

Efresh Guy

“The dark and gloomy vision of our employees. Kiddin’ :).” Designed by Marek Lasota / eFRESH from Poland.

Smashing Wallpaper - november 09

Winter Sleep

Designed by Barbara Haider from Austria.

Smashing Wallpaper - november 09

Halucinogen Sunset

“Our imagination give us this distorted point of view when things are going right. Everything is colorfull and beatiful when the nature are conected with our souls, and that’s inspire anyone.” Designed by Vinicius Ervilha from Brazil.

Smashing Wallpaper - november 09

Chameleon Break-Up

Designed by Eli, Stefan and Xenia from USA.

Smashing Wallpaper - november 09

Type and Stripes

“This is a Typographic image with stripes and type treatment. Very minimal but easy on the eyes.” Designed by Raul Esquivel from USA.

Smashing Wallpaper - november 09

The Saga New Moon

“The Saga New Moon Calendar – I made this wallpaper because this month is the release of the well known movie – New Moon , made after the book with the same name written by Stephanie Meyer and , because I am a huge fan of the Saga Books.So I realy hope you’ll enjoy my calendar.” Designed by Alexandra Ipate from Romania.

Smashing Wallpaper - november 09

Evolution (Dual Desktop Wallpaper)

“The evolution Wallpaper is made for dual-monitor Systems with 2 1280×1024 monitors.I surfed the web to find something cool, but most of the dual wallpapers out there are to vista like ( means bull***t). So i made my own.Its called “evolution” because i like the letter “E” in this font :-), could have called it “email” too ^^.” Designed by Jonas Duri from germany.

Smashing Wallpaper - november 09

November Glow

“One of my Photoshop glowing wallpapers series. ” Designed by Yvaine2010 from Germany.

Smashing Wallpaper - november 09

Streaks

“The wallpaper is an image of an bursting cracker taken during the festival Diwali. The streaks of light were instantly likeable. And the image is rightly selected by my friend Sriyash Jichkar.” Designed by Parth Siddharth from India.

Smashing Wallpaper - november 09

Monster November

“I can’t wait to see Spike Jonze’s “Where the wild things are”, it will reach theatres only in December where i’m living so i’m patiently waiting with personal works featuring these childhood monsters.” Designed by SixLightYears from France (Reunion Island).

Smashing Wallpaper - november 09

Ant and lazy cricket

Designed by Monica Corduneanu from Romania.

Smashing Wallpaper - november 09

Complete Me

“‘complete me’ is a wallpaper i designed using one of my poems. Just know that no man is an island. ” Designed by Zainab Sule from Nigeria.

Smashing Wallpaper - november 09

PinUp Girl

“Last month somebody noticed there have been no „pink” wallpaper so We wanted to try and make one. We hope You like it!” Designed by John Kichote from Poland.

Smashing Wallpaper - november 09

A Tribute to 26/11

“This calendar is designed to give tribute to all those innocent people who lost their lives last year on 26/11. It was similar attack as of 9/11, when more than 100 people were killed by terrorist in Mumbai, India. Feel the pain of families who lost their loved ones and paint this world “RED” with roses, not with blood.” Designed by Aman Behl from India.

Smashing Wallpaper - november 09

To November

“The great fall, is the issue that we will use the end of this autumn, with the last leaves,waiting to fall after a great life.” Designed by Javier Castillo from Bolivia.

Smashing Wallpaper - november 09

Cutout

“Just cutout. Simple, lovable and ready-to-show :).” Designed by Marek Lasota / eFRESH from Poland.

Smashing Wallpaper - november 09

Colorful Stuff

“Inspired by a mixture of graffiti and the HAPPY GO LUCKY fun ofCrayola magic (or whatever tools you have when your up to mischief, but spraypaint has the best effect)” Designed by 268 Design from USA.

Smashing Wallpaper - november 09

Rainovember

Designed by Marta Miazek from Poland.

Smashing Wallpaper - november 09

Alzheimer’s Awareness

“Each year in November, Alzheimer’s Awareness month takes place all over the country. I chose this theme because of a family member who has been battling this disease since 2002. I love how she keeps fighting even though each day gets tougher in her life. I love and care about her very much and is always in my heart everyday. I hope the viewers can relate to my experience and understand that this is a very serious disease. Also, I want viewers go out make a difference for a loved one even if it is research, donating, or taking part in a community event for a good cause.” Designed by Matthew Jerauld from United States.

Smashing Wallpaper - november 09

Eyecandy

“vector candybar that appeals to men and women” Designed by Justin Wright from USA.

Smashing Wallpaper - november 09

Football

Designed by Kari Kumura from United States.

Smashing Wallpaper - november 09

Doodles

Designed by Pietje Precies from The Netherlands.

Smashing Wallpaper - november 09

Wildlife lives in bichomania

“There is lot of people sharing efforts in the whole world to combat against the loss of Biodiversity and Extinctions. From our blog “Historias Naturales” (in spanish) we try to share this kind of stories.” Designed by Pablo Jimeno Pérez from Spain.

Smashing Wallpaper - november 09

N for November

Designed by Qayum Khan from Afghanistan.

Smashing Wallpaper - november 09

Wavular

“Design Kompany’s ÒwavularÓ series is about possibility. Negative space. And what that implies. Quantum physicist Max Planck said: “When we change the way we look at things, the things we look at change.” This drawing was inspired by Olympic Sculpture Park in Seattle.” Designed by Design Kompany from USA.

Smashing Wallpaper - november 09

Autumn Hills

“November: curled by the fireplace and looking out the window, autumn is golden and warm. ” Designed by Saarah Saghir from USA/Pakistan.

Smashing Wallpaper - november 09

Sweet Dreams

Designed by Valerie Morgan from USA.

Smashing Wallpaper - november 09

Car Boat Shed

Designed by Amaury MDF from France.

Smashing Wallpaper - november 09

City Night

“A blurry fall evening in downtown Atlanta, Georgia.” Designed by Sean O’Key from United States.

Smashing Wallpaper - november 09

Autumn Leaves

“Abstract representation of Autumn leaves seen through a cut-away.” Designed by Greg Goodson from England.

Smashing Wallpaper - november 09

Mum

“Here in New York, November is the brown, crisp twilight of the year; the hushed ushering to sleep and hibernation. Its symbol is the noble, honest chrysanthemum, its stone topaz, its mood dreamy nostalgia.” Designed by Manon Michel from US.

Smashing Wallpaper - november 09

Old Wood

“I wanted to give a calendar a fun, wooden look, with a strong typography, sort of ironic in the sense that it’s sharp and more professional than other fonts, while being messy and sloppy at the same time.” Designed by Tyson Junkers from USA.

Smashing Wallpaper - november 09

Loneliness

“Lonely is a lamp without love.” Designed by Raru from Bulgaria.

Smashing Wallpaper - november 09

Timeline Reveal

“Time never stop for anyone. Our future always remain unknown (dark/blind); and all the radiant will be tone down (we forget) when time moves on. The moment we own is only now, which can brings us hope and brightness.” Designed by Shermynn Low from Malaysia.

Smashing Wallpaper - november 09

Negative Space

“After trying numerous different approaches similar to my flourishing April type, I ultimately settled on a very minimal, negative space-based design. I didn’t include a version without the calendar as it felt a little too minimal without the supportive type.” Designed by Colin Parks from Canada.

Smashing Wallpaper - november 09

Nigh

“Part innovative, part grungy – a bit of a ‘Tron’ meets ‘Mad Max’. This is my current view of the future that is near (nigh).” Designed by Charles Godewyn from United States of America.

Smashing Wallpaper - november 09

Join 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 November, folks!


From Smashing Editorial

Increasing Online Sales: Simple Usability Problems To Avoid

When designing an online store, you have to consider many different types of customers: repeat customers, first-timers, people in a rush, etc. One thing that would help all of them is optimum usability. You can achieve this in a variety of ways, starting with eliminating the most common usability problems from your website. Fixing any one of the following eight common usability problems will get you started on the path to usability and user-experience heaven and, ultimately, more sales.

1. Hidden Search Box

A solid information architecture can do wonders for people who enjoy browsing, but some customers just want to find what they’re looking for, buy it and get out. These people are search dominant, and as soon as they land on your website, they will start searching. And if they can’t find your search box, they will leave. As simple as that.

Overstock.com has a giant search box at the top right of the homepage

A great example of a prominent search box is the one on Overstock.com. It is the second thing I notice on the home page because of its size, proximity to the top and dominant red border.

Imagine stopping at a grocery store on your way home from work to pick up some pine nuts for your world-famous pesto sauce. The nuts could be anywhere, so you decide to ask an employee for help. After a few minutes of looking around, you can’t find anyone who works there. So you leave frustrated and empty-handed. Would-be customers who can’t find somewhere to search your products feel the exact same way.

Get Satisfaction has a prominent search box with a hardly usable drop-down menu. The search box appears only on the front page.
Get Satisfaction has a prominent search box with a hardly usable drop-down menu. The search box appears only on the front page.

Also, make sure that the user can actually use the search functionality and will not be confused or irritated by design elements surrounding the search box. In the example above, Get Satisfaction has placed a search box above a video-block. Once the user types in a keyword, a drop-down menu appears below. However, this menu is hardly readable and is therefore quite confusing. Unfortunately, the search box appears only on the start page of the site which makes the search hardly usable. That’s not user-friendly.

How to Fix It

Make your search box more prominent, and keep it in a consistent location. It doesn’t have to be as big and dominant as Overstock’s, but visitors do commonly look for it in the top-right corner. Also make sure that the search box isn’t surrounded by elements that may affect its functionality. It concerns the search results page, too.

2. Unhelpful Search Results

This dovetails with the last point. Visitors who use the search box want to find what they’re looking for quickly. They are probably searching either for a specific product or for a specific feature of a product that may not be listed in the website’s main categories.

When you search ModCloth.com for 'blue,' it returns all things that are blue

When I search for “blue,” ModCloth does an excellent job of showing me items that are… well, blue! It sounds simple, until you notice that the word “blue” does not appear in any product names or descriptions. The website seems to have used some kind of witchcraft to magically retrieve only blue items. (In fact, it probably uses a tagging system, and when you search for “blue,” all of the products with that tag are displayed… but still!)

How To Fix It

Support common misspellings. Example: See how Google does it.

Google checks my spelling for me and links to the correct spelling.

Make the “Zero results” page clear, and suggest alternative search terms. Example: eBay not only suggests that I rephrase my search but guides me with examples.

eBay suggests that I remove some keywords to broaden the search.

Unhelpful search results are usually fixed with back-end magic. This can be a tricky job and usually calls for a custom solution. You can start by looking at your search log to see what people are searching for. The terms that need the most improvement will be the ones that consistently turn up in that log.

3. Not Enough Products On Each Listing Page

The goal of any online store is to sell as many products as possible, and a great way to increase sales is to get visitors to look at more products during each visit. When you are in a grocery store, you have the freedom to look at as many items as you want with few barriers (the main one being how fast you can skip down the aisles behind a cart).

We lose that freedom when shopping online. We come up against this foreign concept of “pages.” We can look at only one of them at a time, and to get to the next one we have to click on a “Next page” link. That means more work for your visitors, so make it easier for them by displaying more products at a time. This reduces the “Next page” barrier and encourages them to browse more.

You don’t want to overload visitors with too many products. Adding more products to each page is like making the aisles in a grocery store longer. You don’t want to trap your customers in an aisle as long as a football field.

How to Fix It

Add more products to each page, but consider the nature of your products before blindly increasing the number of products. Are your products visual? Or technical in nature?

Search results for 'beach' on iStockPhoto.com

When you search iStockPhoto for “beach,” the results are almost 100% visual, which shrinks the gap between browsing and purchasing. Not much thought goes into comparing products once you’ve scanned an image. If your products are highly visual, then the more you put on the page, the better. Anywhere between 50 and 100 is ideal.

BestBuy.com's search results for cameras

On the other hand, if your products require technical explanation, limiting the products to about 15–20 per page is best. On Best Buy, customers can compare cameras without feeling overwhelmed or getting lost in a sea of megapixels and LCD screen sizes.

4. Small Pagination Links

Make your pagination links more usable by increasing the clickable area. This lowers the barrier between pages that we talked about above and encourages visitors to view more products.

Overstock's phony pagination links

The pagination link above appears to have a large clickable area, but only the small oddly positioned blue box is actually clickable. This confuses visitors and makes the navigation more difficult. Consequently, readers have to think about positioning the mouse properly which has a negative effect on overall user experience.

Flickr's well done pagination has padded links and incorporates the blue and red color scheme from its logo

The best example of pagination links I’ve come across is Flickr’s. Though not an online store, the same concept applies. These links have a large clickable area, clearly marked by the gray border. They also reinforce Flickr’s brand by using the logo colors to let viewers know what page they are on and which elements can be clicked.

How to Fix It

Increasing the clickable area of your page links is as easy as adding one line to your CSS:

.pagination a { padding: 4px; }

As a bare-bones usability test, visit your website on an iPhone, and try to click each pagination link with your thumb. If you can’t do it, you probably have to give the link some breathing room by adding more padding.

5. Non-descriptive Product Page Links

When your customers send each other links to your product pages, they should be able to tell what the product is even before clicking on the link.

What I mean are links like http://www.ecrater.com/product.php?pid=5540041; if you get that link in an e-mail, you would have no idea what the product would be. A much more user-friendly URL would be http://www.ecrater.com/products/kodak-slide-projector. Being able to see the product name gives potential customers an incentive to click on the link.

Friendly URLs improve your search engine ranking because they give search engines more information about what is on the page. If a customer is searching for a chrome faucet that you happen to sell on your state-of-the-art faucet website, which URL would they be more likely to click on:

Google result showing URL of www.rensup.com/Products/Cat-442.htm

or

Google result showing URL of dornob.com/futuristic-fixture-chrome-faucet-head-handle-design/

Amazon does a great job of using customer-friendly URLs for its products. Take this typical product page link as an example:

http://www.amazon.com/Crush-Time-Cash-Your-Passion/dp/0061914177/

The book title comes right after amazon.com. This helps visitors confirm that they’re on the right page by glancing at the URL, and it helps potential customers share links with each other. Amazon URLs would be even more user-friendly without the gibberish at the end. But the company still does an amazing job, given their product catalog of hundreds of thousands of unique products.

How To Fix It

Add product titles to the beginnings of your links, using URL-friendly strings such as Crush-Time-Cash-Your-Passion.

6. Forcing Registration For Purchases

When a customer wants to buy a product from you, by all means get out of the way. They want to fork over their hard-earned cash!

One way to get in their way is by requiring them to register an account before purchasing anything. This is commonly done to keep track of purchasing details and make it more convenient for customers to make future purchases. This is all well and good, until you realize that this is a significant barrier between the customer and check-out page. The home stretch is the absolute worst place to give the customer a reason to abandon their cart.

Don’t believe me? Read how Amazon increased its sales by $300 million (yes, 300,000,000 dollars) simply by changing one button in its checkout process.

How to Fix It

Instead of forcing potential customers to register during the check-out process, sell them on the benefits of registration. Highlighting the convenience, increased security and fraud detection can convince them to do it. But leave the choice to the customer.

7. Ads Throughout The Store

Displaying ads in your online store tells the customer that you’re trying to squeeze every cent possible from them. Ads detract from the goal of your store, which is to get customers to buy products they want.

Buy.com has flashy animated ads that distract from their product offerings

When I first land on Buy.com’s camera page, the first thing I see isn’t the camera listings, but the flashy animated ad for the Sidekick. Ignoring the ad and focusing on the cameras is not easy. I came here to buy a camera, and it gets in the way.

Overstock.com actually displays ads for competitors on the same page it sells its products

It turns out that some sites actually link to its biggest competitors right in its search results. Imagine if your shop were a physical store. Would you let your competitors advertise their cameras right beside where you are selling your products? By putting ads on its website, you would be doing exactly that.

Don’t confuse this with cross-promotion, which is selling ancillary items from your own store based on what the customer is looking at. Ads don’t drive your own sales but rather drive customers to your competitors while adding a measly 5 or 10 cents to your bottom line.

8. No Notice of Out-of-Stock Items

If a customer pays for a product only to find out later that it is on back order, they won’t be happy. They will either cancel their order or contact customer support to complain. Neglecting to notify customers that an item is out of stock is a customer service problem and makes for a poor user experience.

How to Fix It

Be up front with visitors. Tell them about your inventory level so that they can factor that into their decision.

Even on the product listing page at ModCloth.com I'm notified of a low stock level

ModCloth immediately tells visitors on its product listing page about the current inventory level. If an item is out of stock, the friendly orange (and not harsh red) text tells me right away. If inventory is low, I’m warned that only a certain number of items are left, in this case four. This nudges me to be snappy about my decision but doesn’t stress me out either. If the message had said, “Our stock will be out in 19 minutes,” I would feel like I’m diffusing a bomb on Mission Impossible. You have no reason to panic your customers.

ModCloth.com displays a bubble immediately attracting my attention to tell me the product is out of stock

ModCloth also tells me on each product page whether an item is sold out. It is the first thing I see when I land, so I know about the stock right away. ModCloth’s user experience designers get bonus points for letting me quickly add my name to a list to be notified when the item is back in stock. While I may be upset that the red dress I want is out of stock, I’m quickly appeased by the friendly and helpful messages on the page.

Summary

The goal of user interface design is to make a website easier for visitors to use. For online stores, fixing problems brings in more visitors who browse more products for a longer period of time. Even simple fixes, like not requiring registration for purchases, can have a huge effect on your bottom line. Keep these common problems in mind the next time you design an online store. Your customers will thank you for it.

Related Posts

(vf), (al)


© Kevin Holesh for Smashing Magazine, 2009. |
Permalink |
25 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: ,

Showcase Of Beautiful Textured Web Designs

Textures have become more popular and been put to greater use in recent years. They’re not limited to Web design either; textures of all kinds are used in print design, illustration, traditional art, TV commercials… you name it! Texture is one of the best ways to add depth to your design, whether it’s subtle noise on a clean vector illustration or a lot of grunginess throughout a layout.

Over the last weeks we collected numerous examples of beautiful textured Web designs to inspire you, followed by a small collection of links to help you get started in using textures in your own designs.

If you like this post, you may be interested in reading some of our other texture-related articles:

Textured Web Designs

Loukotka

Loukotka

FT Designer

FT Designer

Cole & Weber

Cole & Weber

Jason Julien

Jason Julien

Trinity Irish Pub

Trinity Irish Pub

The Klog

Klog

Alex Coleman

Alex Coleman

Bergedorf

Bergedorf

Big Cartel

Big Cartel

Stuck in Customs

Stuck in Customs

Bill C. English

Bill C. English

Boerne Wild West Day

Boerne Wild West Day

Brown Blog Films

Brown Blog Films

Chouteaus Landing

Chouteaus Landing

Ctrl+N Diseño Gráfico

Ctrl+N Diseño Gráfico

Cubeclub Chemnitz

Cubeclub Chemnitz

Danny Diablo

Danny Diablo

Demain Jarrete

Demain Jarrete

DH Cards

DH Cards

Dibtych

Dibtych

Douglas Menezes

Douglas Menezes

Eliseos

Eliseos

Fudge

Fudge

5 Pieces

5 Pieces

Glocal Ventures

Glocal Ventures

Handcrafted CSS

Handcrafted CSS

Inner Metro Green

Inner Metro Green

Introzo

Introzo

53 Mondays

53 Mondays

Island Photobooth

Island Photobooth

Mutant Labs

Mutant Labs

Legwork Studio

Legwork Studio

Le Web Défi

Le Web Défi

Lilly Stable

Lilly Stable

Love Freelancing

Love Freelancing

Mark Forrester

Mark Forrester

Markup & Style

Markup & Style

Martin Anderle

Martin Anderle

Matt Salik

Matt Salik

Merge Web

Merge Web

Meson Projekt Blog

Meson Projekt Blog

Morphix

Morphix

Mother Earth Brewing

Mother Earth Brewing

New to York

New to York

Orange Label

Orange Label

Pampaneo

Pampaneos

Piz’za-za

Piz'za-za

River City Church

River City Church

Roar 4 Milk

Roar 4 Milk

Saddleback Leather

Saddleback Leather

Stack Overflow

Stack Overflow

Story Pixel

Story Pixel

Sushi and Robots

Sushi and Robots

Texture Lovers

Texture Lovers

Tony Chester

Tony Chester

Yodaa

Yodaa

What Is Blik

What Is Blik

Yellow Bird Project

Yellow Bird Project

Thunder Fuel

Thunder Fuel

THS

THS

Texture Downloads

Texture Tutorials

(al)


© Callum Chapman for Smashing Magazine, 2009. |
Permalink |
50 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: ,

Study: More Than Half Of IT Managers Need Better Insight Into IT Costs

DF_logo_150A new white paper authored by Digital Fuel, based off of a study conducted by IDG Research Services, states that over half of IT managers believe their current level of IT cost visibility is lacking and needs improvement. Given that 84% of those polled said that having detailed insight into IT costs is critical, this discrepancy is quite jarring.

The study, based on a sample of over 130 respondents who had direct involvement with managing IT costs and had IT budgets of over $10 million, showcased the fact that IT organizations have a hard time coming up with ways to manage their IT costs. In particular, those surveyed believe that defining a cost-model and breaking down their IT costs in various manners were the most difficult. Additionally, those polled stated they wanted a better way to identify and assess cost inefficiencies in their IT departments as well as giving their business units more information to control their IT demand.

Digital Fuel, founded in 2000, believes that they have a solution to the problems presented in the study. Their third product, ServiceFlow IT Cost Management, is purportedly able to “capture, track, assess, allocate and analyze all of the direct and indirect costs related to the full range of IT services.” With businesses demanding visibility into their IT infrastructure, coupled with regulatory and taxation pressures, Digital Fuel has come up with a SaaS to give IT managers the power to craft and manage cost-effective planning and operations.

1_CIO_Dashboard

ServiceFlow IT Cost Management lets you know beforehand if you are going to exceed your IT budget on a particular service or function, and will suggest ways to prevent this from happening. In addition, this SaaS automates many manual processes in order to reduce human error and improve efficiency.

Digital Fuel is headquartered in San Mateo, California and competes with the likes of SAP and Oracle.

Crunch Network: MobileCrunch Mobile Gadgets and Applications, Delivered Daily.


Standards-Based Virtualization: Critical To The Future Of Cloud Computing

Editor’s Note: This is a guest post by Winston Bumpus, Director of Standards Architecture at VMware. In this piece, Winston describes how the lack of standards inhibits customers from taking advantage of the full potential of cloud computing because of concerns regarding lock-in and huge investments in proprietary tools, formats and infrastructure.

Cloud computing is here. The vision of flexible, self service IT infrastructure is now within our reach. The term of cloud computing may be a new term, but the concept has been around for a long time. So what is different now? I would say two things are really allowing this to be a reality: virtualization and industry interoperability standards.

Virtualization has been a real game changer for IT infrastructure. It has changed the processes and the cost points. This has happened with the isolation, consolidation and mobility that virtualization provides. Removing the rigid bonds between hardware and the application systems that run upon them has allowed for quicker and easier deployment and increased mobility of workloads. These capabilities have truly enabled this vision of cloud computing.

Even the US government is now heavily pursuing cloud computing as a means to save cost, in crease agility, while reducing the carbon footprint and energy needed to support government computing. In a recent announcement, Vivek Kundra, the Whitehouse appointed US Chief Information Officer, rolled out another piece of their cloud computing vision with the launch of APPS.gov. Standards will be important for agency and cloud service provider interaction and portability.

Developing Standards that Enable Interoperable IT Management

Although cloud computing exists today, it has not achieved its full potential and has limited the possibility for greater adoption. This is due to the lack of standards which inhibit customers from selecting a cloud vendor without concern for lock-in and huge investments in proprietary tools, formats and infrastructure.

To enable this new paradigm, we need to work as an industry to develop, adopt and deploy interoperable IT management standards. Only when we have these standards, will customers be able to choose cloud technology which will enable that on-demand flexibility that they require. This also allows vendors of IT technology to focus on functionality, reliability and performance improvements rather than focusing on formats, agents and protocol development.

With the ever-increasing need for flexibility, availability and performance in today’s distributed enterprises, management standards for IT professionals are now more important than ever. Deploying systems, tools and solutions that support management standards helps reduce system management complexity and lower overall IT costs.

The Growing Importance of IT Standards

Gartner developed a model that describes five levels of infrastructure maturity that will enable the dynamic IT infrastructure. It starts at level 1, which is focused on centralization and standardization, and then moves through to Level 3 as virtualization and portability. It then goes on to show Level 5 as IT infrastructure becoming the business automation platform that enables Infrastructure as a services.

To get to the last level of business agility, it will take virtualization for portability and standards for interoperability with tools to manage the entire business infrastructure in a holistic view. We can no longer afford to do component-based management of the past. In order to get where IT can provide this level of agility to the business that they support, it will require the entire fabric of the compute infrastructure to be able to be managed, controlled and automated by a single set of tools.

Cloud Computing and Industry Standards

Other key industry standards are emerging including the work that is going on in the Storage Networking Industry Association (SNIA) and their work in the Cloud Storage Technical working Group. Another important cloud standards activity is in the newly created Cloud Security Alliance (CSA) which is focusing on best practices for cloud security.

The many of the industry standards development organizations (SDOs) have begun a dialog to help coordinate the efforts of their members. To that end a new web site was launched called www.cloud-standards.org This web site is actually a wiki that allows for representatives from the various organizations to post links to work they are doing and to list various events that are occurring around the globe related to cloud computing standards. This is turning out to be well utilized and has now over a dozen major organization populating this information. This site also has participation from the folks at NIST with links to there work on setting the terminology and definitions for the cloud computing industry.

Virtualization Standards for Workload Portability

A standard, portable meta-data model for the distribution of virtual machines to and between virtualization platforms has been created called the Open Virtualization Format (OVF). Packaging an application together with the operating system on which it is certified into a virtual machine that can be easily transferred from an Independent Software Vendor (ISV), through test and development and into production as a pre-configured, pre-packaged unit with no external dependencies, is extremely attractive. Such pre-deployed, ready-to-run applications packaged as virtual machines (VMs) are called virtual appliances. In order to make this concept practical on a large scale, it is important that the industry adopts a vendor-neutral standard for the packaging of such VMs and the meta-data that are required to automatically and securely install, configure and run the virtual appliance on any virtualization platform.

Benefits of this new standard include:
• Improves your user experience with streamlined installations
• Offers customers virtualization platform independence and flexibility
• Creates complex pre-configured multi-tiered services more easily
• Efficiently delivers enterprise software through portable virtual machines
• Offers platform-specific enhancements and easier adoption of advances in virtualization through extensibility

OVF and Cloud Interoperability

The Distributed Management Task Force (DMTF), has formed a group dedicated to addressing the need for open management standards for cloud computing. The “Open Cloud Standards Incubator” will work to develop a set of informational specifications for cloud resource management.

A key piece of this new work is to look at how OVF can be extended to support the portability requirements of deploying and managing workloads in the clouds. This includes internal, external and private cloud environments. OVF has great support and is implemented in several products.

Cloud Computing Management Standards

Beyond OVF, agreement on cloud application programming interfaces (APIs) or protocols need to be developed. There are several prominent Cloud APIs that exist today, but the industry should converge soon on a common cloud API. This API should provide management of workloads in the cloud and provide for capabilities such as fault, configuration, accounting, performance and security management. These include things such as Quality of Service (QoS) monitoring and control, as well as standard ways to retrieve billing information. In addition, security requirement definitions and security management are also key pieces that need to be standardized so that customers can have assurances regarding the environment in which their workloads are being deployed.

Earlier this month VMware announced the submission of their vCloud API to the DMTF. This is the first ever industry cloud API specification submitted to a standards development organization. The intent is to get broad industry support and input on this API from its more than 35 companies participating in the Open Cloud Standards Incubator including the 17 Leadership board member companies: AMD, CA, Cisco, Citrix, EMC, Hitachi, HP, IBM, Intel, Microsoft,Novell, Rackspace, RedHat, Savvis, SunGard, SunMicrosystems and VMware.

Reducing IT Complexity and the Cost of Cloud Computing Systems

The ultimate goal is to reduce the overall IT complexity which can only be achieved by implementation of infrastructure management standards. These standards will improve interoperability which will reduce the number of tools required to manage the IT systems. Managing the entire compute fabric as a single entity will greatly simplify the current complexity. Also, cost reductions can also be found by reduced training and specialized product requirements giving customers freedom of choice.

Crunch Network: CrunchGear drool over the sexiest new gadgets and hardware.


Offline Inspiration: How To Find It and Get The Most Out Of It


  

Inspiration is vital for any designer. This is why so many CSS galleries, design galleries and artistic showcases are floating around on the Web. Designers use these at certain times for a quick fix of inspiration, especially when the pressure of deadlines prevent them from seeking out offline, or “alternative,” forms of inspiration, as important as they are.

No designer should ever feel that taking time to find true inspiration is time wasted. This article explores offline sources of inspiration and discusses how they can be treated as a part of the design process. Furthermore, we’ll look into a few methods of deriving this inspiration, so it becomes an active part of creativity and be done more effectively.

Also consider our previous articles:

1. Stop The Quick Fix Of Online Inspiration

The first step to getting into the habit of finding offline, or “natural,” inspiration is to stop looking at online inspiration in the first place. For many designers, online is the first place to look. It shouldn’t be.

The problem with showcases and galleries is that most of us tend to copy bits and pieces of them, thus creating a mish-mash of everything we’ve seen. This isn’t how design, or any creative field, should work. While graphic and Web designers are different from traditional artists, we should treat the creative “back end” any different. After all, we got into this field to be creative and express our artistic talents, so why don’t we?

Online Inspiration Isn’t Bad

Before delving any deeper, let’s get one thing straight: the point of this article is not to say that online inspiration isn’t unproductive in any way. In fact, it is quite a good thing and can very well produce the intended effect.

The unproductive part is when designers turn to it as their sole channel of inspiration. Showcases and galleries, rather, serve best as examples of best practices and ideas. Our designs should stem instead from our own creativity, aided by this online inspiration.

How to Stop the Cycle

For many of us, going to a CSS gallery the moment we start working on a new project is routine. Whether because we are behind in our work or just anxious to get started, true inspiration gets put on the backburner more and more over time. Hopefully, this article will help convince you that finding true inspiration is necessary to the design process. Even if you’re convinced, though, breaking old habits can be hard.

The trick is to consider alternative inspiration an an essential part of the job. While it feels more like play than work at first, finding true inspiration should mean more than browsing through the same material over and over. And we should know that in a creative industry, having fun is okay; it doesn’t mean we’re being unproductive.

We have to consider taking a walk, visiting a museum and sketching as parts of our job description, things that help us get our jobs done faster and less painfully. We’ll discuss below when we should seek out these other forms of inspiration and when it is okay to sift through galleries and showcases.

2. Forms Of Offline Inspiration

Let’s start by discussing what we can do to derive new forms of offline inspiration. Below are some tried and true methods for uplifting one’s inner creativity… without using a browser.

Nature

Nature is easily one of the places to find inspiration. Not only does it have variety, color and interest, but it takes its effect on us by mere instinct. Because of this, finding inspiration on a walk, a hike or just sitting in a park doesn’t take much effort. Let’s look at a few specific places where one can find it, though.

Weather
Weather is just one part of what nature has to offer. Because weather is so closely related to mood, it can be a great source of inspiration. Think of your favorite season, a stormy night or a sunny day at the beach; take in the colors, textures and mood and implement them in a design.

Nature Weather

Life Forms
While weather can influence and inspire mood, life forms have yet far more variety than weather. Whether plant life or animals, a number of exquisitely designed elements are available from which to draw inspiration, through texture, shape, color, etc.

Life

Geography and Landscape
Geography and landscape is another major source of inspiration. Taking in your natural surroundings can have a calming effect on your mind and motivate you to design. Beyond whatever comes to you naturally, look at shape, texture and color, too.

Wolfgang Staudt New Mexico

The above are just a few quick examples of how nature can and should be used for inspiration. These are definitely the first choices for many designers who want a new creative outlook, and for a great reason.

The trick is to figure out how to get workable inspiration from nature and integrate it into a design. For specific examples on how to achieve this in detail, check out 17 Techniques for Creating Designs Inspired by Nature.

Museum Visits

Like nature, simply walking through a museum can relieve stress and, in turn, inspire. It doesn’t have to be a museum for art or design either. A science museum, historical museum or even aquarium or zoo can work. The point is to see things that are not in our everyday lives, while being in an environment that allows you to really focus on and appreciate them.

Being in a museum can lead us to new things, such as:

  • Alternative cultures and their arts;
  • Traditional or classical art;
  • An attention to different senses and a more empirical way of thinking (think of a science museum);
  • Weird, strange or outrageous exhibits to help us think outside of the box (like a “Ripley’s Believe It or Not” museum);
  • Historical objects that are shown in photographs and other media.

Musuem
Image source

Because these experiences can lead to such alternative ways of thinking, they are great for getting away from the daily grind that is suppressing your imagination.

Drawing and Sketching

Many designers begin a project by sketching, but far too many jump straight into wireframes, layouts and then the final draft.

Instead of starting the design phase cold, sketch freely. Doodle, draw ideas, sketch abstract and non-abstract textures and shapes. When sketching for inspiration, don’t think of it as any other stage in the design process. Have fun with it; be carefree and laid back. Free-drawing is a great way to put all of those ideas in your head down on paper.

Advanced Sketching
Comic Book Style on GoMediaZine.com

Many designers very likely grew up sketching and drawing. A lot of us probably had books or other resources on “How to draw,” explaining the technical aspects of drawing characters and other subjects. Doing this now at a more advanced level can be inspirational. Doing so, we advance our skills and are motivated to practice new illustration techniques. So, make an effort to refine your basic drawing and sketching skills.

For a great list of tutorials, check out 40 Free Tutorials on Advanced Drawing Techniques.

An Alternative Hobby

Experiencing new things is a part of life. Without this, we fall into a rut. Think about it: when we began designing, we were full of ideas, motivation and inspiration. After doing it for so long, though, designing can become routine and uninspiring.

This is a part of life. But we obviously can’t quit our jobs and pursue unrelated goals whenever we feel like it. Instead, we must find a way to keep life exciting while maintaining our careers.

Try a new hobby that you find exciting, and then bring it into your designs. For example, if you’re learning a new language, incorporate the culture and styles associated with that language into your designs. If you’re learning a new craft, how can you incorporate the textures, shapes and actions of it into a design? Countless hobbies are out there. No matter how quirky or seemingly unproductive yours is, if you have a passion for it, it will help.

Quirky Hobby
Image source

It doesn’t even have to be a hobby, but just something to get your mind off of work. For example, if you’re redecorating a room, there had to be some initial inspiration that drew you into it; use that spark in your design. Other life experiences involving family, friends and events can play a role in design, too.

The point is to enjoy hobbies and general life events more, and stop thinking of them as unrelated to work.

Music

Music brings emotion and puts imagery in our heads. It is a great art to jog our imagination.

While the techniques mentioned thus far may appeal only to some people, everyone should try music, because it relies on no visual source and can lead to the most creative outcomes. Deriving inspiration from music may not be as easy (because it is more abstract than a pattern, texture or shape), but it certainly gets our imagination and creativity flowing.

Music Inspired Art
Image source

How you use this method is really up to you, but for more tips, check out Smashing’s other post, “Drawing Inspiration From Music.”

Photography

Using photos is an excellent way to incorporate many of the above methods, without having to travel around the world. Flying across the world to see the wildlife in the jungle or a foreign culture’s practices is not practical. Photographs, rather, capture real-life images from which you can draw inspiration and come up with texture, shapes, subjects and more.

Photography
Image source

While photography can be considered “online inspiration,” it is different in that one cannot take bits of a photograph and turn it directly into a design (the way you can with another website). Rather, one must use skill and creativity to turn it into a workable design, just as you would use a natural object in the wild.

Below are a few favorite photography showcases to get you inspired:

Traditional Art

Each era of art has its own style and development. We often focus too much on today’s trends that we forget all of the excellent art of the past.

Research any era of art history. You will discover many great works of art, as well as techniques that the masters of that era followed.

Neoclassical Art
Image source

As with any other form of inspiration, take texture, color, shape, style and depth into account. In viewing art from different eras and cultures, we can draw inspiration from the style without copying the subject.

One’s Own Imagination

Think like a child again. With a bit of relaxation, we can come up with our own ideas again, without even an external trigger of the imagination. We can’t elaborate much more on this: the method will be unique to each individual. But it is bound to create the most original designs of all.

For a few fun tips on how to be imaginative, take a look at the simple WikiHow article ““How to Be Imaginative.”

3. Deriving Inspiration From These Sources

Knowing how to find inspiration through alternative sources comes down to the art and science of design. Rather than merely copy trends and examples, we have to use our knowledge of texture, shape, proximity and so forth to build fresh design. Our new sources of inspiration may now be difficult to harness but are sure to release our creativity.

Here following are some basic guidelines you can take to derive inspiration from any offline source.

Look at Texture

Many sources of inspiration are visual in nature, which means they may have interesting textures, whether from an animal skin or a wrinkled petal.

Many designs are not much more than texture at all. But even without conventional imagery, we understand the design perfectly well.

Kevin Lucius
Kevinlucius.com

Everything Has a Shape

Everything has a shape that highlights its texture. We look at different shapes every day, but rarely do we stop to appreciate it. No matter what it is taken from, a design could resemble the source of inspiration itself or just bits and pieces of it.

Take the time to examine the object’s shape, angles, edges and dimensions. They may spark new ideas or lead to an idea for an element in your design.

Lilly's Table
Illystable.com

Color and Palettes

Nature-inspired Web design was quite a trend there for a while, and it is still going pretty strong. The trend is notable because color is given such special attention and is implemented so carefully in designs. Green, blue and brown earthy hues are incredibly popular, and these colors and a bit of authentic texture are all a design needs to be nature-inspired.

We can apply the same attention to other offline sources of inspiration. For example, painters from different eras preferred different color palettes, and we can borrow these palettes for today’s designs. Likewise, different cultures, landscapes and imagery all provide a unique sets of colors to inspire us. All we have to do is stop and take notice.

Hungry for Change
FoodIncMovie.com

Take an Alternative Perspective

Viewing the things we see every day from a fresh perspective makes them design-worthy. This could mean viewing them close up, upside down, from far away or from an entirely different angle. Whatever you choose, look at an object from an unusual perspective to discover something new about it.

Orman Clark
Ormanclark.com

Choose a Theme

We can be motivated to create something new after winding down for the day, after taking a walk, or after viewing some interesting photographs. But when it comes down to actually designing, we may still not know where to begin.

Just as we did when writing essays back in high school, we must first define our design’s theme; that is, come up with a “thesis” for our design. We may be inspired by Renaissance art that we viewed at a museum, but we might find that there is too much in the artwork to base a design on.

This is when we need to get specific. Should your design reflect the textures, colors and shapes of that era, or should it evoke a typical publication of that era (a website being a publication itself after all)?

Come up with a specific subject and idea for the design, taken from your much broader source of inspiration. Don’t just go with a nature theme; choose a cheerful snowy morning theme. Don’t use a book as a whole, but rather use an event recounted in the book, or an emotion that the event evokes.

You could incorporate a number of ideas from any source of inspiration, so be specific and choose one particular message to guide the design.

Collect Resources and Bits of Inspiration

Before starting the design phase, collect resources that you will need to complete the design. If your design is inspired by Renaissance art, assemble tutorials on creating old-paper effects, gather some period typography and collect any other textures, symbols, shapes and imagery that could be used in the design.

What’s great about this part is that even though you’re not actively designing, you’re still putting pieces together that will guide you to the final design. In other words, you’re in the process of brainstorming.

4. When To Use Offline Inspiration

There is a trend among designers to say that any offline inspiration is okay, but offline and online inspiration need to be balanced.

Offline Inspiration
Image source

Offline inspiration sources are best for the early phases of a design. They keep you from going straight to CSS galleries the moment a new project begins, only to copy elements of the most original designs. Offline inspiration helps us come up with our own ideas and fall back on our own creativity.

5. When To Use Showcases And Galleries

Showcases and galleries are not a great source of inspiration early on. Rather, they are great to learn best practices and refine usability and see examples of how specific elements have been implemented. They are useful for turning inspiration into a workable design with solid usability.

Showcase
Showcase of music night clubs web designs here, on Smashing Magazine.

For example, if you’re designing a blog theme, you could look at the styles of various “Read More” links and see which ones have the best effect. You could check out the navigation style of different website types (e.g. portfolio, realty website, Mac application website, etc.). Consistency among certain website elements is a good thing.

Showcases and galleries can also help generate ideas for style. An app website, for example, obviously wouldn’t look good with a grunge style. Some stylistic choices may not be that obvious, though, and CSS galleries can help us achieve a look that is original yet appropriate.

Conclusion

As you can see, both offline and online inspiration have their place. Knowing when to use each is the key to getting your creativity back and producing some original work once again. Hopefully, this post has motivated you to take the time to find alternative sources of inspiration.

We have just briefly touched on methods of finding alternative inspiration. There are, of course, many more. Feel free to share your own habits and techniques for gaining inspiration. The ways are surely endless, and we have to find the one that works best for us.

Further Resources

You may also be interested in these additional references:

About the Author

Kayla Knight is a college student, freelancer and blogger. In her spare time, she maintains two blogs, Webitect.net and DesignFinds.Me, as well as a portfolio. Feel free to get in touch with her through her blogs, or follow her on Twitter: @KaylaMaeKnight.

(al)


© Kayla Knight for Smashing Magazine, 2009. |
Permalink |
34 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: , ,

10 Pre-Press Tips For Perfect Print Publishing


  

A lot of designers think CMYK is the way to go when designing for print. We will, of course, always use CMYK-based ink, but this does not mean you have to work with CMYK files. You can work with RGB images to perfectly optimize your print colors and save a great deal of time in the process.

You may be interested in the following related posts:

1. Use RGB Color Mode For Photoshop Images

For several of the following tips to work, you will have to create and save all of your Photoshop images and artwork in RGB color mode. If you’re a veteran designer, you probably think this goes against what you’ve been taught, which is to use CMYK color mode. Well, technology has come a long way, and nowadays RGB color mode is better because it produces a wider range of colors and allows you to use one image for several media, including print and Web.

Screenshot

Think of it this way: RGB colors (red, green, and blue) are created with light. That’s why your computer monitor and TV use RGB colors to produce its fantastic range of colors. CMYK colors (cyan, magenta, yellow and key, or black), on the other hand, are created by putting ink to paper. “Ink-on-paper colors” will never be as bright or saturated as the colors on your computer screen or TV, no matter how much ink you add to the paper. So, to get the widest range of colors possible, you need to save all of your Photoshop files in RGB color mode. Most of the time, you won’t even have to think about it, because almost every photographer will supply you with RGB images. All you have to do is keep them in that mode.

Screenshot
A 3-D map showing the range of the Adobe RGB (1998) color space, the sRGB (or small RGB) color space and the common newspaper CMYK color space. sRGB’s range is much smaller than Adobe RGB’s. Working in the Adobe RGB color space would result in much brighter colors. The range of the CMYK color space is much narrower. Especially for this newspaper, the white in CMYK mode isn’t white at all. It’s more of a dirty brown.

2. Specify The Right Color Settings

To successfully use an RGB image in Adobe InDesign, you first need to specify the appropriate color settings. Fortunately, Adobe has made it really easy for you to specify the right settings and quickly apply them across its Creative Suite. This is where Adobe Bridge comes in.

To specify a color setting in Adobe Bridge, choose Edit → Creative Suite Color Settings and then select your region: either “North America Prepress 2,” “Europe Prepress 2″ or “Japan Prepress 2.” If your region isn’t displayed in the dialog box, select “Show Expanded List Of Color Settings Files” at the bottom of the dialog box. After clicking “Apply,” the setting you have specified will be applied to Adobe InDesign, Photoshop, Illustrator and Acrobat.

3. Ditch Photoshop EPS Files And Use PSD Files Instead

After your images and artwork have been saved in RGB color mode and you’ve specified the right color settings, it’s time to start designing. Do you still keep a copy of your native Photoshop (PSD) files and save TIFF or EPS versions, which you then import into InDesign? If so, you’re missing out on some valuable opportunities.

If you’ve been using InDesign for a while, you probably already know that it honors transparency effects in PSD files, but that’s not all. When you import PSD files, InDesign also honors clipping paths, spot colors, alpha channels, duotone colors and vector information (such as Smart Objects). You can even access all the layers in a PSD file by selecting “Show Import Options” when you import an image or choosing Object → Object Layer Options after importing an image. With all of these time-saving opportunities, saving all of your Photoshop images in the PSD file format is a no-brainer.

4. Accurately Simulate CMYK While Working In RGB

Keep in mind that even though you’re importing RGB images with bright and saturated colors, InDesign actually shows you what the CMYK equivalent of each image will look like. So, how does InDesign make that color conversion properly? Well, because you’ve specified the appropriate color settings in Adobe Bridge, InDesign will use those settings to accurately display each RGB image when it’s converted to CMYK color mode.

InDesign even goes a step further and shows you exactly how the colors in a layout will appear when printed on a certain type of paper using a specific output device. Simply choose View → Proof Setup → Custom. Then choose an output device from the “Device to Simulate” pop-up menu, and select the “Simulate Paper Color” option. After clicking “Okay,” the color of your pages will change, and your images will appear darker and less saturated. So, to get a good idea of how your layout will appear when printed on coated paper using a sheet-fed printer, choose “U.S. Sheetfed Coated v2.” This feature is great because it gives you an accurate idea of how your colors will appear when they’re printed.

If you use Photoshop, you may be wondering, “Wouldn’t it be nice if Photoshop could do the same trick, so that I can see what happens to my RGB images when they’re converted to CMYK?” Well, of course it can. Just choose View → Proof Colors, and make sure that “Working CMYK” is specified by choosing View → Proof Setup → Working CMYK. When you proof colors, you’re not actually changing the color mode of the image, so you can continue working in RGB color mode while simulating CMYK. This is yet another reason not to convert your Photoshop files to CMYK.

Screenshot
The top part of this image is a “SoftProof” of how this RGB image will appear when printed in a newspaper. The bottom part shows the original sRGB. The dirty color is actually the color of the paper. As you can see, the color of the paper affects all other colors.

5. Selecting the Right CMYK Output Profile For The Job

There are many different kinds of paper, such as recycled and brownish paper for newspapers, glossy paper for magazines, uncoated paper for stationary and bright-white coated paper for high-quality brochures. As you can imagine, each type has different characteristics when it comes to printing. The recycled paper sucks up more ink, and if you don’t take this into account, your beautiful full-color photos will become too dark, and the ink will blur over the paper, creating an ugly brownish effect.

So, how do you optimize artwork for all of these different kinds of papers? Well, that’s the easy part. Standard CMYK inks have been tested on every type of paper to the extreme. The way cyan, magenta, yellow and black are printed on a specific type of paper is documented in an ICC profile. All you need to do is download these free “Color Profiles” and select the right one when you export a PDF using InDesign (Export → Output → Color Conversion & Destination). If you’re not sure what kind of paper your printer will use, simply ask them. Most printers would rather answer a simple question than clean up colors afterward.

The information provided by the color setting that you specified in Adobe Bridge is used by InDesign to determine how to convert RGB images to the CMYK color space when you output a document. By using InDesign instead of Photoshop to make that conversion, you gain the benefits outlined in the following point.

6. Use InDesign Instead Of Photoshop To Make The Final Color Conversion

There are several good reasons to let InDesign do the conversion:

  • Images are all converted at the same time instead of one at a time before you import each into InDesign.
  • You can reuse the same image for different purposes. For instance, you might want to re-use the image on your website for a brochure, magazine or newspaper. If you let InDesign do the color conversion, it will optimize your RGB images for whatever output device and type of paper you choose.
  • You can simulate how the colors in a layout will appear on different kinds of paper using the same RGB images.

When you use Photoshop to convert all of your images to CMYK before importing them into your InDesign layouts, you prevent InDesign from optimizing the color for different output devices and paper types. If you make the conversion to CMYK first and start designing later, you might unwittingly alter the “maximum ink” and other important color-related characteristics that were pre-defined in your Photoshop file when Photoshop converted your RGB image to CMYK.

As a result, when you work on the colors and contrast later, what you see on screen won’t be what you get in print because you have altered the optimal colors.

7. Download All The Profiles

Different CMYK Color Profiles are available for different kind of papers and print processes. Several organizations provide top-of-the-line ICC profiles, all of which can be downloaded for free at the bottom of this page. The most common are:

  • Newspaper: ISOnewspaper
  • Magazines: ISOWebcoated
  • Full Color Offset:
  • U.S. Web Coated (SWOP) v2
  • ISOCated_v2
  • ISOuncoated
  • Europe ISOCoated FOGRA27
  • (or the new one, FOGRA39)

8. Exporting A Perfect CMYK PDF Using RGB Images

Once you’ve downloaded and installed the ICC profiles, they’ll be available to InDesign. You don’t even need to select the right profile and assign it to your InDesign document. All you have to do is select the right ICC profile when you export the document to PDF (Export → Output → Color Conversion & Destination). Although you don’t need to assign the right CMYK profile, I would recommend it, because it allows InDesign to match the colors when you select the “Proof Colors” command.

After choosing File → Export and specifying Adobe PDF as the file format, select the “Output” category on the left side of the “Export Adobe PDF” dialog box. Choose the appropriate CMYK destination from the “Destination” menu, so that InDesign can optimally convert all RGB images to CMYK. Also, be sure to select “Convert to Destination (Preserve Numbers)” from the “Color Conversion” menu so that the colors you’ve created in InDesign will maintain their original values.

9. Avoiding Errors When Using RGB Images And Spot Colors

You can use RGB images even when producing a high-end brochure that has die-cut embossed areas and spot UV coating. All you have to do is lay everything out in InDesign and then use a spot color to define the areas that will be die-cut, embossed or UV-coated. Make sure that the spot color objects are placed on top of the RGB images and that they are set to overprint: choose Window → Attributes to open the “Attributes” panel and select “Overprint Fill.”

When you export the document to PDF, the RGB images will convert to CMYK, and all of your spot colors will remain unchanged. I recommend that you check the color separations in Adobe Acrobat to make sure that everything that needs to overprint has been set to “Overprint” (Advanced → Print Production → Output Preview).

Screenshot
The cover of a brochure for a well-known Dutch beer brand. Adobe InDesign’s “Separations Preview” shows the RGB image in CMYK. Scene 2 shows the parts that will be highlighted using a glossy ultraviolet coating. Scene 3 is the part that will be embossed. Scene 4 shows all of the colors combined. (The combined image looks a bit weird because the UV coating and embossed parts have been given a extra spot color so that the printer can keep them separate from the full-color artwork).

10. Share Your PDF Files With Acrobat.com

Now you have but one problem to solve: getting that high-resolution PDF to your client and the printer. Email won’t work because a high-resolution PDF is usually too big. Most printers offer an FTP website, but many clients don’t know how to use FTP. Fortunately, sending out large files is much easier with Acrobat.com, which is a free Web-based service provided by Adobe.

With this incredibly easy and free service, you get your own online storage where you can upload high-resolution PDF files. You can notify your client and printer via email that a PDF is ready to download. And the email even contains a preview of the PDF. If you don’t want Adobe to email your clients, Acrobat.com lets you create a short URL to include in your own email. You can create an online “vault” if you wish, but no log-in or registration is required by default for your client or printer to access the PDF. You can even share PDF files on your website or blog using the embed code provided.

Screenshot
This email is automatically generated when you upload a PDF to Acrobat.com. Feel free to take a look at the PDF file of this brochure (which I’ve downsized to 100 dpi). I’ve shared it on Acrobat.com. Click this link to see it: https://share.acrobat.com/adc/document.do?docid=6ba6d3e1-988e-4452-83bf-2fe036749171

Further Resources

All of the color profiles and tricks in this article can be used throughout the entire Creative Suite: 1, 2, 3 and 4. ICC Profiles can be accessed from the following directories:

  • Mac OS X: …/Library/ColorSync/Profiles
  • Windows: …\Windows\system32\spool\drivers\color

Owning a copy of Adobe Acrobat is not necessary, but the application comes in handy when checking the PDF files that you’ve exported from Adobe InDesign. Adobe Acrobat even lets you see which destination profile you have specified in InDesign by choosing Advanced → Print Production → Output Preview. Quark XPress users can use these same ICC profiles.

Keep in mind that experimenting with color can create undesired results if you’re not sure what you’re doing. I highly recommend speaking with your printer before altering your workflow because he won’t be expecting color-optimized artwork if you’ve never bothered to submit it before. Should you have any doubts about the colors in a design, ordering a color proof on paper is always a good idea.

Related posts

You may be interested in the following related posts:

About the Author

Marco Kramer is a graphic designer who works in the Netherlands. He specializes in the technical aspects of the design process. As such, he refers to his position as Digital Engineer. Marco has been publishing articles about pre-press and design-related topics for eight years on his blogs DigitalEngineer.net and MacMojo. He has recently started publishing articles for an international audience. (Illustrations by Frank De Man.)

(al)


© Marco Kramer for Smashing Magazine, 2009. |
Permalink |
28 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: , , ,

Modern CSS Layouts: The Essential Characteristics


  

Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.

But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? In part 1 of this article, you’ll learn the five essential characteristics of successful modern CSS websites. In part 2 of this article, you’ll learn about the techniques and tools that you need to achieve these characteristics.

We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich.

  • Progressively enhanced,
  • Adaptive to diverse users,
  • Modular,
  • Efficient,
  • Typographically rich.

Progressive Enhancement

Progressive enhancement means creating a solid page with appropriate markup for content and adding advanced styling (and perhaps scripting) to the page for browsers that can handle it. It results in web pages that are usable by all browsers but that do not look identical in all browsers. Users of newer, more advanced browsers get to see more cool visual effects and nice usability enhancements.

The idea of allowing a design to look different in different browsers is not new. CSS gurus have been preaching this for years because font availability and rendering, color tone, pixel calculations and other technical factors have always varied between browsers and platforms. Most Web designers avoid “pixel perfection” and have accepted the idea of their designs looking slightly different in different browsers. But progressive enhancement, which has grown in popularity over the past few years, takes it a step further. Designs that are progressively enhanced may look more than slightly different in different browsers; they might look very different.

For example, the tweetCC website has a number of CSS 3 properties that add attractive visual touches, like drop-shadows behind text, multiple columns of text and different-colored background “images” (without there having to be actually different images). These effects are seen to various extents in different browsers, with old browsers like IE 6 looking the “plainest.” However, even in IE 6, the text is perfectly readable, and the design is perfectly usable.

Screenshot
tweetCC in Safari.

Screenshot
tweetCC in IE 6.

In CSS 3-capable browsers like Safari (top), the tweetCC website shows a number of visual effects that you can’t see in IE 6 (bottom).

These significant differences between browsers are perfectly okay, not only because that is the built-in nature of the Web, but because progressive enhancement brings the following benefits:

  • More robust pages
    Rather than use the graceful degradation method to create a fully functional page and then work backwards to make it function in less-capable browsers, you focus first on creating a solid “base” page that works everywhere.
  • Happier users
    You start building the page making sure the basic functionality and styling is the same for everyone. People with old browsers, mobile devices and assistive technology are happy because the pages are clean and reliable and work well. People with the latest and greatest browsers are happy because they get a rich, polished experience.
  • Reduced development time
    You don’t have to spend hours trying to get everything to look perfect and identical in all browsers. Nor do you have to spend much time reverse-engineering your pages to work in older browsers after you have completed the fully functional and styled versions (as is the case with the graceful degradation method).
  • Reduced maintenance time
    If a new browser or new technology comes out, you can add new features to what you already have, without altering and possibly breaking your existing features. You have only one base version of the page or code to update, rather than multiple versions (which is the case with graceful degradation).
  • More fun
    It’s just plain fun to be able to use cool and creative new techniques on your Web pages, and not have to wait years for old browsers to die off.

Learn more about progressive enhancement:

Adaptive to Diverse Users

Modern CSS-based Web pages have to accommodate the diverse range of browsers, devices, screen resolutions, font sizes, assistive technologies and other factors that users bring to the table. This concept is also not new but is growing in importance as Web users become increasingly diverse. For instance, a few years ago, you could count on almost all of your users having one of three screen resolutions. Now, users could be viewing your pages on 10-inch netbooks, 30-inch widescreen monitors or anything in between, not to mention tiny mobile devices.

Screenshot
In his article “Smart columns with CSS and jQuery” Soh Tanaka describes his techniques that adapts the layout depending on the current browser window size.

Creating Web designs that work for all users in all scenarios will never possible. But the more users you can please, the better: for them, for your clients and for you. Successful CSS layouts now have to be more flexible and adaptable than ever before to the increasing variety of ways in which users browse the Web.

Consider factors such as these when creating CSS layouts:

  • Browser
    Is the design attractive and usable with the most current and popular browsers? Is it at least usable with old browsers?
  • Platform
    Does the design work on PC, Mac and Linux machines?
  • Device
    Does the design adapt to low-resolution mobile devices? How does it look on mobile devices that have full resolution (e.g. iPhones)?
  • Screen resolution
    Does the design stay together at multiple viewport (i.e. window) widths? Is it attractive and easy to read at different widths? If the design does adapt to different viewport widths, does it correct for extremely narrow or wide viewports (e.g. by using the min-width and max-width properties)?
  • Font sizes
    Does the design accommodate different default font sizes? Does the design hold together when the font size is changed on the fly? Is it attractive and easy to read at different font sizes?
  • Color
    Does the design make sense and is the content readable in black and white? Would it work if you are color blind or have poor vision or cannot detect color contrast?
  • JavaScript presence
    Does the page work without JavaScript?
  • Image presence
    Does the content make sense and is it readable without images (either background or foreground)?
  • Assistive technology/disability
    Does the page work well in screen readers? Does the page work well without a mouse?

This is not a comprehensive list; and even so, you would not be able to accommodate every one of these variations in your design. But the more you can account for, the more user-friendly, robust and successful your website will be.

See these resources on user diversity and Web page adaptability:

Modular

Modern websites are no longer collections of static pages. Pieces of content and design components are reused throughout a website and even shared between websites, as content management systems (CMS), RSS aggregation and user-generated content increase in popularity. Modern design components have to be able to adapt to all of the different places they will be used and the different types and amount of content they will contain.

Screenshot
Object Oriented CSS is Nicole Sulivan’s attempt to create a framework that would allow developers to write fast, maintainable, standards-based, modular front end code.

Modular CSS, in a broad sense, is CSS that can be broken down into chunks that work independently to create design components that can themselves be reused independently. This might mean separating your style into multiple sheets, such as layout.css, type.css, and color.css. Or it might mean creating a collection of universal CSS classes for form layout that you can apply to any form on your website, rather than have to style each form individually. CMS’, frameworks, layout grids and other tools all help you create more modular Web pages.

Modular CSS offers these benefits (depending on which techniques and tools you use):

  • Smaller file sizes
    When all of the content across your website is styled with only a handful of CSS classes, rather than an array of CSS IDs that only work on particular pieces of content on particular pages, your style sheets will have many fewer redundant lines of code.
  • Reduced development time
    Using frameworks, standard classes and other modular CSS tools keeps you from having to re-invent the wheel every time you start a new website. By using your own or other developers’ tried and true CSS classes, you spend less time testing and tweaking in different browsers.
  • Reduced maintenance time
    When your style sheets include broad, reusable classes that work anywhere on your website, you don’t have to come up with new styles when you add new content. Also, when your CSS is lean and well organized, you spend less time tracking down problems in your style sheets when browser bugs pop up.
  • Easier maintenance for others
    In addition to making maintenance less time-consuming for you, well-organized CSS and smartly named classes also make maintenance easier for developers who weren’t involved in the initial development of the style sheets. They’ll be able to find what they need and use it more easily. CMS’ and frameworks also allow people who are not as familiar with your website to update it easily, without screwing anything up.
  • More design flexibility
    Frameworks and layout grids make it easy, for instance, to switch between different types of layout on different pages or to plug in different types of content on a single page.
  • More consistent design
    By reusing the same classes and avoiding location-specific styling, you ensure that all elements of the same type look the same throughout the website. CMS’ and frameworks provide even more insurance against design inconsistency.

Learn more about modular CSS techniques:

Efficient

Modern CSS-based websites should be efficient in two ways:

  • Efficient for you to develop,
  • Efficient for the server and browser to display to users.

As Web developers, we can all agree that efficiency on the development side is a good thing. If you can save time while still producing high-quality work, then why wouldn’t you adopt more efficient CSS development practices? But creating pages that perform efficiently for users is sometimes not given enough attention. Even though connection speeds are getting faster and faster, page load times are still very important to users. In fact, as connection speeds increase, users might expect all pages to load very quickly, so making sure your website can keep up is important. Shaving just a couple of seconds off the loading time can make a big difference.

We’ve already discussed how modular CSS reduces development and maintenance time and makes your workflow a lot faster and more efficient. A myriad of tools are out there to help you write CSS quickly, which we’ll cover in part 2 of this article. You can also streamline your CSS development process by using many of the new effects offered by CSS 3, which cut down on your time spent creating graphics and coding usability enhancements.

Some CSS 3 techniques also improve performance and speed. For instance, traditional rounded-corner techniques require multiple images and DIVs for just one box. Using CSS 3 to create rounded corners requires no images, thus reducing the number of HTTP calls to the server and making the page load faster. No images also reduces the number of bytes the user has to download and speeds up page loading. CSS 3 rounded-corners also do not require multiple nested DIVs, which reduces page file size and speeds up page loading again. Simply switching to CSS 3 for rounded corners can give your website a tremendous performance boost, especially if you have many boxes with rounded corners on each page.

Writing clean CSS that takes advantage of shorthand properties, grouped selectors and other efficient syntax is of course just as important as ever for improving performance. Many of the more advanced tricks for making CSS-based pages load faster are also not new but are increasing in usage and importance. For instance, the CSS Sprites technique, whereby a single file holds many small images that are each revealed using the CSS background-position property, was first described by Dave Shea in 2004 but has been improved and added to a great deal since then. Many large enterprise websites now rely heavily on the technique to minimize HTTP requests. And it can improve efficiency for those of us working on smaller websites, too. CSS compression techniques are also increasingly common, and many automated tools make compressing and optimizing your CSS a breeze, as you’ll also learn in part 2 of this article.

Learn more about CSS efficiency:

Rich Typography

Rich typography may seem out of place with the four concepts we have just covered. But we’re not talking about any particular style of typography or fonts, but rather the broader concept of creating readable yet unique-looking text by applying tried and true typographic principles using the newest technologies. Typography is one of the most rapidly evolving areas of Web design right now. And boy, does it need to evolve! While Web designers have had few limits on what they could do graphically with their designs, their limits with typography have been glaring and frustrating.

Until recently, Web designers were limited to working with the fonts on their end users’ machines. Image replacement tricks and clever technologies such as sIFR have opened new possibilities in the past few years, but none of these is terribly easy to work with. In the past year, we’ve finally made great strides in what is possible for type on the Web because of the growing support for CSS 3’s @font-face property, as well as new easy-to-use technologies and services like Cufón and Typekit.

The @font-face rule allows you to link to a font on your server, called a “Web font,” just as you link to images. So you are no longer limited to working with the fonts that most people have installed on their machines. You can now take advantage of the beautiful, unique fonts that you have been dying to use.

@font-face in action: Teehanlax.com

Screenshot

Craigmod

Screenshot

Nicewebtype

Screenshot

The three screenshots above are all examples of what @font-face can do.

The main problem with @font-face, aside from the ever-present issue of browser compatibility, is that most font licenses—even those of free fonts—do not allow you to serve the fonts over the Web. That’s where @font-face services such as Typekit, Fontdeck and Kernest are stepping in. They work with type foundries to license select fonts for Web design on a “rental” basis. These subscription-based services let you rent fonts for your website, giving you a much wider range of fonts to work with, while avoiding licensing issues.

Screenshot
For A Beautiful Web uses the Typekit font embedding service for the website name, introductory text and headings.

Screenshot
Ruler of the Interwebs uses the Kernest font embedding service for the website name and headings.

We still have a long way to go, but the new possibilities make typography more important to Web design than ever before. To make your design truly stand out, use these modern typographic techniques, which we’ll cover in even greater detail in Part 2.

See these resources on current CSS typography techniques:

Summary

We’ve looked at five characteristics of modern CSS websites:

  • Progressively enhanced,
  • Adaptive to diverse users,
  • Modular,
  • Efficient,
  • Typographically rich.

In part 2 of this article, coming soon, we’ll go over the techniques and tools that will help you implement these important characteristics on your CSS-based Web pages.

About the author

Zoe Mickley Gillenwater is a freelance Web designer specializing in CSS and accessibility. She is the author of the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, plus a whole bunch of articles. Find out more about her on her blog and on Twitter.

(al)


© Zoe Mickley Gillenwater for Smashing Magazine, 2009. |
Permalink |
41 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: