Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation

In our earlier article about Web design trends for 20101 we covered the strong influence of print design techniques, keypress navigation, horizontal layouts, rich typography and aesthetically pleasing designs. Web design today is developing rapidly, breaking the limitations of conventional approaches and exploring the possibilites of upcoming technologies. Designers are not only experimenting with new techniques and design approaches, but they are improving the quality of their designs in both technical and conceptual respects.

Modern websites have great strengths, such as flexibility, cross-browser compatibility and personalization, but they are also becoming increasingly simple and intuitive. This is being done through the application of subtle usability enhancements, drawn either from the Web itself or from offline interactive systems. The Web today is increasingly complex, while usage of the Web is becoming increasingly simple.

In this article, we’ll explore some new design approaches and techniques that you may want to develop for your own projects. We’ll present rather unusual or unconventional design approaches and try to understand what’s actually interesting about them and how we can apply them to modern Web design. More specifically, we will discuss the following: real-life metaphors that are applied to the Web, hidden complexity, subtle interactivity, context-sensitive navigation and rapid CSS3 adaptation.

1. Real-Life Metaphors And Hidden Complexity Link

Probably one of the most striking features of modern Web applications and services is that they provide rich user experiences. User interaction in such systems is becoming very straightforward and intuitive, even “native.” But this sense of intuition does not just come from the application of traditional principles of good visual design or better information architectures. We have observed more Web designs in which design elements either imitate real-life metaphors or hide the complexity of choice by letting users make more limited and simpler decisions.

Buttons are good example of the first development. In Web design today, buttons look and interact with users just like buttons in the real world. Buttons often look very realistic. They stand out, have vibrant colors and are very responsive: when the user hovers over or clicks on a button, they are often given visual feedback. If you compare these buttons with ATM buttons (in terms of shape, color and responsiveness), you will find some striking similarities.

Affordance is a key quality of native design elements. It refers to the aspect of an object or environment that allows a user to perform some action. As Donald Norman states in his book “The Design of Everyday Things,” affordances provide strong clues to the operation of things. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label or instruction required. The more familiar a design element looks on the page, the easier it is for the user to associate some concrete practical application or task with it.

This approach doesn’t relate only to call-to-action buttons: as you will see below, it’s about using appropriate metaphors to convey the meaning and purpose of certain design elements in general. Obviously, this approach reduces the complexity of user interaction. Another way to achieve this is by minimizing the appearance of elements or, to be more precise, giving them a different context or just decreasing their visual weight on the page.

More and more websites are getting rid of outdated, awkward, unusable interfaces with steep learning curves. Look out for intuitive, native metaphors. For example, sliders will sometimes work better than regular selector fields (like to show budgets and time frames); toggle on-off knobs may fit better than check boxes; and complexity can be hidden to simplify user interaction. Modern Web applications are attractive, intuitive and straightforward.

Real-Life Metaphors Link

Fred Perry2
Fred Perry’s e-commerce store has a contemporary and elegant look, conveying key features of the brand very well. Every style is presented as a poster on the wall, not like in common stores, but the atmosphere is quite familiar to the users. An unconventional yet interesting application of a real-life metaphor to an e-commerce website.

Fred-perry in 35 Beautiful E-Commerce Websites3

C. L. Holloway4
A similar approach by Candice Holloway. She places her artwork on a “wall”; horizontal navigation is used as a metaphor for strolling through an art gallery.

African in The Current State of Web Design: Trends 20105

Dripping in Fat6
This t-shirt store uses the real-life metaphor of clothes on hangars. That’s a nice idea if you don’t have too many items in your store, but difficult if you have hundreds of products.

Screenshot7

Gowalla
Instead of showing a long list of features in the application or explaining how it works in a video, Gowalla displays an illustration that uses real-life scenarios to explain what the application does. The user gets the idea within a few seconds. The illustrations may not be perfect and may look a bit inconsistent, but they serve the point. For the full view of the illustration, click on the image below.

Screenshot

XHTML Cafe8
XHTML Cafe does not bore its visitors with lifeless promo content blocks: instead, it adapts a nice real-life metaphor to its profile. Attractive and memorable.

Screenshot9

CulturedCode: Status10
The developers of the Culture Code list their current tasks as Flight Arrivals on their status page. Each item in the list has a description, assigned members and status. The design resembles those classic flight tables one often sees in airports. An interesting way to use a real-life metaphor for a Web design. It wouldn’t work in every context, but it fits well here.

Screenshot11

Builditwith.me12
While this website may look a bit ordinary at first, what is interesting is the toggle switch in the upper-right area. Basically, it is a check box that allows users to select whether the person they are looking for should already have a good idea. But instead of using a traditional check box, the designers decided on a toggle on-off knob. While this may be a good idea in general, it’s not clear if this particular implementation works. It might actually irritate users who assume it is a slider. The interaction experience is different than what you get with a slider, and rather resembles a switch.

Screenshot13

Oh! Media14
One of the many examples of an attractive, prominent, shiny and clickable button. The small icon to the right of the button is a very subtle metaphor for action or progress; hardly noticeable, but it works. Simple yet eye-catching.

Trends15

Apple16
iPhone’s user interface has a simple on-off switch for its preferences. This metaphor is similar to many real-life objects whose buttons and settings are turned on and off with a simple switch. Straightforward.

Screenshot

Hidden Complexity Link

SlideDeck17
Slideshows are by nature a nice way to hide complexity because they reorganize multiple information points in a compact interactive area. SlideDeck is a good example of a design solution that integrates both horizontal and vertical sliding navigation into one element. The layout is clean and provides a good overview of available features.

Screenshot18

Nosotros19
Nosotros has an interesting and unconventional navigational approach. It very cleverly minimizes complexity by reducing navigation to only meaningful icons. The blog page has six icons that serve as the navigation options for the blog. Once the user clicks on an icon to select that category, the icons for the other categories fade away. It would be interesting to see whether this approach would work on a larger scale. Calicott takes a similar approach, albeit with a different design.

Screenshot20

Gmail
Paying close attention to the little things can make for a more intuitive and native user experience. If you are writing an email in Google’s mail service and mention that you are attaching a file to your message but forget to attach it, the system points that out to you with a friendly warning message. This is a great example of an application having the user’s best interest at heart; the difference between a good and great Web application. If you would permit a slight exaggeration, you could compare this to a customer walking into a postal office with a package, and after a short distraction the friendly worker reminds the customer to send the package off.

Screenshot

KBB
KBB, a resource for finding and selling new and used cars, provides retail owners with an original pre-written email template. If the user is interested, they can just type their first and last name, street address and phone number and send the email in one click. Of course, the message can be customized. It’s a good example of a Web application that carefully takes care of tedious tasks by providing users with a simple one-click solution.

Screenshot21

Moof
Moof takes a similar approach with its contact form. It’s not clear whether its approach increases or decreases conversion rates; it would be interesting to conduct a usability test on it.

Screenshot

Livestream
Many Web applications have a variety of pricing plans and features, as does Livestream. This design, though, clearly communicates which plan would suit a particular category of users best. Notice the help tooltip accompanying the “Streaming” feature and the red ribbons at the bottom of the table. The yellow buttons are responsive, too, providing visual feedback. A simple, attractive design.

iPhone Screenshot

Notable App: Pricing Table22
Highlighting the most popular plan is a good idea, because it helps users make a decision without having to inspect the whole table. This is a good example of using the metaphor of social validation: when users are in a social situation, they will look to others to see how to behave. It’s not a conscious process, but it helps us to come to grips with difficult decisions.

Screenshot23

Mailchimp24
Why display dozens of plans with dozens of features and not let the user make their decision simply based on the most important feature of the application? Mailchimp allows its users to pick a monthly plan just by selecting the number of their subscribers. All other pricing plans are available, too, but the complexity is hidden for most users behind the small “View All Pricing Plans” link. This was probably an unavoidable move because Mailchimp has literally dozens of pricing plans with a variety of combinations: displaying them all at once would make the choice too difficult and cause decision paralysis for some users.

Screenshot25

Single Log-In and Sign-Up26
A straightforward solution for reducing complexity is to combine multiple related features into one single feature. For instance, instead of having two separate links and pages for logging in and signing up, you could offer users a single “Log in or sign up” button that serves both purposes. The form would update via JavaScript after the user has selected a radio button. For this log-in form, notice that the “Submit” button says “Log in,” and there is a link to retrieve lost passwords. For the sign-up form, the label for the password field prompts users to “Choose a password” and “Sign up” and to accept the terms of service.

An alternative method would be to provide two input fields, labelled “Email” and “Password,” and then put a “Don’t have an account yet? Sign up!” link next to it. Both approaches would work fine for new and returning visitors.

Screenshot27

Quiksilver
Quiksilver asks its wetsuit customers to provide information on their weight, height, style and features first. Instead of displaying dozens of available options, it filters the search for users, displaying only those items that are currently available and fit the user’s profile. A good example of hiding unnecessary information and focusing on the important stuff.

Screenshot

2. Subtle Interactivity Link

Although the opposite is often asserted, we believe that Flash has its place in the modern Web design. Today, we observe a clear separation of concerns between HTML/CSS websites and Flash websites. While HTML/CSS has become the de facto standard for text-based websites, focusing on information consumption, Flash is dominating entertainment and multimedia websites with its extensive visual and audio effects and rich user interaction.

But that doesn’t mean that HTML/CSS websites are restricted to plain, unsophisticated user interaction. In fact, the opposite seems to be true. We’re seeing more HTML/CSS websites getting interactive, playful and engaging. More animation is being used for visual feedback (for example, on mouse hovers and clicks), and visual effects are being used for a more responsive user experience. Of course, these effects rely on JavaScript libraries, which fuel the interactive layer in the background.

Still, designers of CSS-based websites tend to avoid extreme interactivity and instead use subtle, refined effects sparingly. Their designs use interactivity to support user interaction and shirk overwhelming users with striking 3D-effects and inconvenient navigation structures.

CoTweet28
CoTweet has a good example of clean, attractive and responsive buttons. While the hover effect is subtle, clicking on the button is striking. Notice the difference in size and text color of the “Sign up” and “Learn more” buttons. Also notice the eye-catching ribbon on the “Sign Up” form, which stands out but isn’t obtrusive. It may be a very subtle change, but adding small icons to the call-to-action button can be very helpful: for instance, think of adding a lock icon (metaphor for security) to communicate that the log in is secure.

Screenshot29

WeightShift30
WeightShift takes an interesting design approach by showcasing its navigation options in a more interactive way. Recent work is displayed in a prominent information box in the center of the layout, with the background having a relevant image. When the user navigates from one item to another, the background changes, too. Notice that the information box is semi-transparent; a nice design technique.

Screenshot31

Jax Vineyards32
We showcased this website in part 1, but it perfectly illustrates the point of this section, too. This wine store website has an interesting and unique horizontal navigation, which is triggered when you start browsing the wine catalogue. Both the background image and description of the wine slide horizontally. Simple CSS and JavaScript are used. A beautiful and impressive design.

Wine in The Current State of Web Design: Trends 201033

Veerle Pieters34
Veerle’s recent redesign is very sexy. Links, content blocks and illustrations subtly react to mouse hovers in different ways: varying the transparency, animation, highlighting the link, changing the background image, fading to another color, displaying comments or modifying the navigation. The design is very inviting, engaging and responsive. Veerle’s design also uses keyboard navigation, another common development in the Web design industry that we talked about in part 135. Hands down, a beautiful first-class design.

Screenshot36

Fuel Brand Inc.37
The official page of Fuel Brand Inc. has a variety of nifty animations: images increase in size on hover, background images change, slideshows are used for navigation, and interactive tooltips and other effects are apparent. Interactivity seems to be popular with official company websites, too.

Screenshot38

Malcolm Reading Consultants39
Another interesting design technique for subtle interactivity: the three images displayed at the top automatically slide vertically, updating the background images for the horizontal navigation at the top, too. No Flash is used here.

Screenshot40

LifeGear Mockup41
A mock-up for an interactive product page. Many e-commerce pages are being given more interactive product presentations, too; for example, 360-degree views or interactive instructions such as this one.

Screenshot42

Carsonified: 100 Things
Carsonified integrates a subtle color transition and fade in-out effect to quickly display information about the speakers at this conference.

Screenshot

Harmony Republic43
Here we have interactive hover effects and rich typography, but also clumsy text management and long loading time because of the Flash nature of the website. This site could just as easily have been designed with pure JavaScript, allowing for better copying and pasting of text, flexible font sizing and native mouse interaction (i.e. changing from the pointer to hand-on-link hovering). Sorry, but Flash doesn’t belong here. It rather belongs here44, for example.

Screenshot45

arc 90: Meet the Team
Yet another example of an “About” page with interactive design elements. Photos are replaced on hover: but visitors can also easily filter members of the team by their occupation. Images filtered out fade to grayscale.

Screenshot

S P D46
Another nice subtle hover effect. On this portfolio page, each item fills one cell. The header has 18 cells in all. When the user hovers over one, it expands to fill the area of the six adjacent cells, showing additional information about the selected item. No Flash in use here. And again, the subtle interaction is rather helpful.

Screenshot47

Duplos48
One can take interactivity a bit further, too. In Ricardo Mestre’s portfolio, the design elements slowly float across the page. Can you spot the dangerous Twitter-birdie monster? And of course, no Flash is used here.

Screenshot49

Alex Buga50
Alex’s design goes to extremes. The website is built with CSS and JavaScript, but it could just as well have been designed with Flash. Nearly all design elements have some sort of animation. Most designers do not go to such extremes to provide interactivity. A very interesting and masterfully executed idea, though. (Going even farther, sometimes even logos are animated with jQuery51.)

Screenshot52

3. Context-Sensitive Navigation Link

Context-sensitive navigation is essentially navigation (often additional to the primary navigation) that depends on the context of the user on the page (for example, what they’re doing). Its biggest advantage is that it can remove distractions and controls that are irrelevant to the user’s current context. Context-sensitive navigation displays options only when the user actually needs them. Obviously, this paradigm would be particularly useful to user interface designers: it can help de-clutter interfaces and focus the user’s attention on the task they are performing.

This approach has been used in Web development for years now, but from our observations, it is appearing on more websites and Web applications today. Vimeo53 is a classic example of context-sensitive navigation: playback controls fade away once the video starts playing and appear again on demand (i.e. when the user hovers over the video area).

When implementing context-sensitive navigation, make sure the navigation is actually available when users need it. Keep in mind various settings and user scenarios, and test it in worst-case scenarios. For video playback controls, users of touch interfaces (e.g. iPhone or iPad users) will not be able to toggle the navigation because the hover effect won’t be available. In this case, you may want to consider touch gestures instead.

Vimeo54
Vimeo, a video-sharing platform, displays playback controls until the user starts watching a video. Once the video is playing, the controls fade away and appear again only when the user hovers over the video. A classic example of context-sensitive navigation. Such navigation is being used increasingly on other playback websites, too — for example, Blip.fm55.

Screenshot56

New York Times57
The New York Times cleverly displays related and featured stories in its articles. Rather than promoting them in the actual content of articles, the designers have moved them to an appropriate context: a block slides in from the bottom-right corner when the user reaches the end of the article: convenient and helpful. Usability studies will determine whether users find this behavior annoying in the long run. Also, notice that whenever you click on a word in an article (except for links), a “?” tooltip appears allowing you to look up the selected word. This service makes much more sense presented in this context than if it was hidden in the navigation menu at the top or in the sidebar. Context-sensitive navigation at its best.

Screenshot58

Reuters59
Drop-down navigation is another common place for context-sensitive navigation. Reuters’ drop-down-navigation is fairly advanced. It doesn’t just provide access to navigation options, but also displays useful information, such as current stocks and hot topics, which are revealed immediately. Also notice the “Open” button in the right sidebar (not displayed in the screenshots below). When it is clicked, a detailed information box (initially hidden but instantly available on demand) overlays the current page and displays the relevant information (see the second screenshot below). Reuters also allows users to follow their favorite topics and save article for later reading. Personalization is indeed coming to the Web.

Screenshot60

Screenshot61

Information Architects62
Information Architects has an interactive and helpful search function. As the user types a keyword, the system searches and displays the results, highlighting the keyword in the excerpts of the articles. Instead of displaying a selection of keywords in the drop-down menu the way websites such as Google (or, for instance, GetSatisfaction63) do, this website gives users the results instantly. A nice shortcut that saves time. By the way, the search box doesn’t simply appear indiscriminately with all of the other links; it is displayed on the “Articles” pages for when users browse the archive and search for recent or specific articles.

Screenshot64

AllTop65
Instead of displaying dozens of categories by default, Alltop displays them on demand, when a letter in the upper-right corner is triggered. Another example of hiding secondary information in a convenient, user-friendly way.

Screenshot66

DailyMile67
DailyMile has a clean and attractive user interface. The major navigation options are displayed in the left sidebar. When the user hovers over one, a hint is displayed, explaining the link. In other Web applications, it may be useful to underline the navigation options and display the secondary options on hover. Also notice the “More” switch at the bottom of the sidebar, offering secondary navigation options; it is available only if the user is actively searching for those options, but is hidden otherwise.

Screenshot68

The Black Harbor69
By default, the images section here doesn’t display any content other than the actual image. But when the user hovers over the image, the title, description and number of comments appear. Notice the “Share” balloon in the upper-right corner? On hover (and only on hover), it slides in links to Twitter, Facebook, Digg and StumbleUpon. All of this information is displayed when the mouse hovers over the specific area (in the specific context), and it fades away automatically when the mouse moves away.

Screenshot70

Further Reading and Resources Link

Seeing how context-sensitive navigation changes in the coming months and years will be very interesting. We can expect cleaner and less cluttered interfaces, where elements appear on demand, depending on the intention and behavior of the user. Clever navigation and task bars71 and user-centric Web applications will focus more on the actual input of users.

  • CSS Hover Controls on the iPhone72
    The iPhone has a touch screen, so you can’t really hover over anything, but the technique covered here still works. Instead of hovering, the user has to click on an area for the controls to show up. This area has to be a link, either inline or block (a block link works better because you can make the clickable area larger).
  • Touch Gesture Reference Guide73
    This guide contains a unique set of resources for software designers and developers working with touch-based user interfaces.

4. Rapid CSS3 Adaptation Link

With improving support of CSS3 features in major modern browsers, the design community seems very excited about the new advancements and possibilities. Everyone seems to be experimenting with CSS3; whether on RGBa transparency, advanced CSS3 selectors, CSS3 transforms or other attributes. The result is truly remarkable: we’re seeing many designs that are more beautiful, advanced, versatile and robust than before, with fewer nasty browser hacks.

The most popular CSS3 features so far seem to be border-radius, animations, multiple backgrounds and box-shadow. This is understandable because these can easily be used to replace quirky earlier solutions that required workarounds and third-party tools to perform the task. Also, @font-face is rapidly gaining popularity, but keep in mind that it is not a CSS3 feature because it was proposed for CSS2 and was luckily implemented in early versions of Internet Explorer (and in other browsers later — FF 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+). This is why it’s actually safe to use @font-face in your designs today.

The bad news with CSS3 is that in order for the features to be easily applied to all major browsers, we will have to wait for Internet Explorer 8 to expire. And it remains to be seen how well the actual Internet Explorer 9 will support the new standard (you can look up the CSS support in Internet Explorer 9 on the page Internet Explorer 9: Testdrive74). The most popular browsers today (i.e. the family of Internet Explorer versions) support only the CSS3 box-sizing attribute. Internet Explorer 7/8 have broad support for CSS3 attribute selectors ([att$=val], [att^=val], etc.), combinators (E~F), but no support for CSS3 pseudo-classes (:nth-child(), :last-child, etc.). Internet Explorer 9 (which will be released in late 2010 at the earliest) will support at least CSS3 media queries, CSS3 colors (HSL, HSLa, RGBa), CSS3 selectors and border-radius. In the meantime, we will have to use CSS3 for modern browsers and integrate workarounds for IE, and there are plenty of them75.

Things that seemed impossible a year ago are being implemented with pure CSS3, fueled by the creative minds of the design community. We may have entered a fertile new era of Web design, when crucial CSS techniques are being born, similar to the 2003 to 2005 period when CSS Sprites and CSS Sliding Doors were developed. In fact, we have a couple of exciting creative years to look forward to.

SxSW Beercamp
For the design of SxSW Beercamp, the creators made some rather bold decisions. For each letter at the top of the page, they used the text-shadow property 49 times. Also, various animations and transformations were applied, as were box-shadow and HSLA. By the way, did you notice the sunrise at the top? Well, the designers use 20 <hr>-tags to achieve this effect.

Screenshot

Tapbots76
CSS3 features work best when applied subtly, with fine details added to a clean, simple and meaningful design. Tapbots uses CSS3 for rounded corners, hover animations and some transparency effects, which are difficult to find at the first glance. This is a good example of CSS3 features being properly applied: no bold headlines with text-shadow, no exaggerated gradients, no excessive animation — just solid, good design.

Screenshot77

full frontal 200978
The text-shadow property seems to be particularly effective when a light text shadow is used against a dark background. Here is another simple example of a dark text shadow (a bit darker than the background) used on white headlines. Also, the page uses border-radius and box-shadow for the quick links listed under the description of each speaker.

Screenshot79

going steady with stacey
But sometimes applying a dark text-shadow against a light background works well, too. But in such cases you may want to add a “stronger” text shadow.

Screenshot

GigaOM80
Giga OM users RGBa transparency for its feature blocks.

Screenshot81

CSS3 Drop Down Menu82
A more practical approach to CSS3 features, using border-radius, box-shadow, gradients and text-shadow on a multi-level drop-down menu to good effect. No images used here.

Screenshot83

Kristof Orts84
Kristof Orts uses the text-shadow property to add depth to his headlines. The embossing effect is clean and sharp and helps the typography stand out.

Screenshot85

Canny Bill
Andy Clarke’s design of responsive pricing columns and buttons. He uses box-shadow, -webkit-gradient for the gradients, RGBa for opacity, border-radius for the rounded corners, and Webkit animation for the hover effects

Screenshot

Colly.com86
Simon Collison uses the box-shadow property to give greater depth to the columns in his layout.

Screenshot87

CSS3 Experiments: Moon88
Dan Cederholm has prepared a nice CSS3 demo to illustrate some of the new features designers can use in their designs today. In particular, notice subtle animations in the sidebar. CSS-transitions and CSS-animations in use. The design provides users with nice visual rewards, creating a more responsive and engaging interaction.

Screenshot89

Screenshot90

Faruk Ateş91
Faruk Ateş’ blog is a practical example of using CSS3 animations and transitions for a nice hover-effect. Notice the effective use of text-shadow on a vibrant blue background.

Screenshot92

Mindgarden
Mindgarden uses CSS3 media queries to display the layout differently in different resolutions. Users with a wide browser window size get a multi-columns layout (two or three columns, see the first screenshot), and users with a smaller browser window size see only one column (second screenshot). Also, the dimensions of images are scaled automatically depending on user’s screen size. Web designers have been using JavaScript for the same purpose for years, but now we can create adaptive layouts using pure CSS-based solutions. Media queries are a CSS3 extension to media types that gives designers more control over rendering of the site layout. They are currently supported in Firefox 3.6+, Safari 4+, Opera 10+ and Chrome. Internet Explorer 8 does not support them. For a workaround and further information about CSS3 media queries, head over to Russ Weakley’s presentation “CSS3 Media Queries”.

Screenshot93

Screenshot

Chirp94
The Chirp conference website uses CSS animation for the rotation and animation of the images of speakers.

Screenshot95

Bello and Proxima Nova: Type Experiment96
For his experiment, Tim Brown uses gradients, masking, rounded corners, transitions and multiple background images. On hover, the heading at the top seems to stand out.

Screenshot97

NeutronCreations98
Beautiful CSS3 typography and transforms at work here. The circles spin, as the company’s name would suggest.

Screenshot99

Neography CSS3 Type Experiment100
No images are used here. Pure CSS3 transitions, rotations, shadows and other tweaks.

Screenshot101

CSS Posters102
Designers are experimenting with different layout techniques and CSS3 techniques. Here is an example of a CSS poster, designed with simple CSS rules. Actually, a very simple technique that uses @font-face for font embedding. But it just looks great and serves its purpose, too.

Screenshot103

David Desandro: Footer
CSS3 gone mad: David Desandro uses various CSS3 rules in the footer of his website. Shadows, animations and transitions are very vivid, colorful and appealing. This is the opposite to subtle CSS3 effects used on most sites with CSS3-snippets. However, it works perfectly fine in this case as it sets the design apart from other portfolio websites.

Screenshot

Opera Logo with CSS3
Various visual effects are possible with CSS3. With a bit of artistic creativity, you can create truly extraordinary things. For example, the Opera logo here is designed purely with CSS3: gradients, box-shadow and border-radius. Are CSS shapes something that we should be expecting to come soon?

Screenshot

Rain Drop104
Another interesting example of a visual effect achieved purely with CSS3.

Screenshot105

A Sad Note About the Text-Shadow Property Link

A general problem we have observed with CSS3 adoption today is the emergence of designs crafted merely for the sake of CSS3. A perfect illustration of this is the overuse of the text-shadow property, which is sometimes heavily applied to headings and body copy. Bear in mind that CSS3 is a powerful tool, and as effective as it can be, it can also be easily misused, leading to a new round of usability problems and legibility issues. It seems like a very obvious advice, but it is still worth mentioning: before adding a CSS3 feature to your website, make sure it is actually an enhancement, added for the purpose of aesthetics and usability, and not aesthetics at the cost of usability.

An obvious yet important rule relates to this: your design shouldn’t rely on CSS3 improvements, but should rather integrate them as a rich additional layer for users with modern browsers. The drawback of advanced CSS3 properties is that, because they are not yet standardized, and because Gecko and Webkit require proprietary attributes to implement certain ones, in a couple of years we may end up with quite bloated style sheets that contain useless styles. So, you may want to extract all proprietary CSS3 enhancements to a separate style sheet in order to simplify maintenance later on. Also, keep in mind that your CSS3 stack should always end with the standardized CSS3 rule (e.g. border-radius, not -moz-border-radius). By doing this, you make sure that in the next years, with a better support for CSS3 rules in newer versions of web browsers, your rules will actually still apply and work in major browsers.

Media Twitter106
On some Windows machines, the navigation, headlines and body copy set with text-shadow can be quite difficult to read with the default text settings. Sometimes it is really not necessary to use text-shadow for body copy and navigation, thus compromising the quality of the design for users with older browsers.

Screenshot107

Tinder108
Tinder uses the text-shadow property for text. Some users (even those with good eyesight) may experience difficulties reading this text on their screen.

Screenshot109

Brandon Cash
Brandon Cash uses the text-shadow property for his body copy. While the text is legible, it is more difficult to read than if it were plain copy. Compare the view in Chrome (left) and Safari (right): the difference is remarkable. It is very likely to assume that many users do not use ClearType or any other kind of font-smoothing for text. As a designer and advocate of user’s needs, you have to keep that in mind.

Screenshot

Sramekdesign110
Light-blue text on a light-gray background is rarely legible. With a white text-shadow added to the text, it gets even worse. Sorry, but this is not where text-shadow should be applied.

Screenshot111

Further Resources Link

Conclusion Link

New possibilities are always implemented creatively, but being so trendy, they are also abused. While good design practices are being incorporated into Web designs rapidly (through real-life metaphors, responsive interfaces and context-sensitive navigation), we have observed many “over-designed” websites that use new CSS3 features for their own sake.

Design trends do not exist to be followed. They exist to be broken, reshaped and abolished by the spirit of creativity rippling through the design community. By nature, trends are anything but good: they distract from the main purpose of communication design and disrupt the balance between aesthetics and function. Rather than follow trends, use the appropriate tools in the appropriate context for the right purpose. That’s where the beauty of information design lies, and it makes the huge difference between a nice design and a nice and usable design.

Stay Tuned! Link

This article is one in our series on the current state of Web design. To make sure you don’t miss the next part, subscribe to our RSS feed122 and follow us on Twitter123.

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/
  2. 2 http://www.fredperry.com/
  3. 3 http://www.fredperry.com/
  4. 4 http://www.clholloway.co.za/
  5. 5 http://www.clholloway.co.za/
  6. 6 https://www.drippinginfat.com/
  7. 7 https://www.drippinginfat.com/
  8. 8 http://xhtmlcafe.net/
  9. 9 http://xhtmlcafe.net/
  10. 10 http://culturedcode.com/status/
  11. 11 http://culturedcode.com/status/
  12. 12 http://www.builditwith.me/
  13. 13 http://www.builditwith.me/
  14. 14 http://www.ohmedia.ca/
  15. 15 http://www.ohmedia.ca/
  16. 16 http://www.apple.com/iphone/
  17. 17 http://www.slidedeck.com/wordpress
  18. 18 http://www.slidedeck.com/wordpress
  19. 19 http://www.nosotroshq.com/blog/
  20. 20 http://www.nosotroshq.com/blog/
  21. 21 http://konigi.com/interface/kelley-blue-book-mad-libs-form
  22. 22 http://www.notableapp.com/plans
  23. 23 http://www.notableapp.com/plans
  24. 24 http://www.mailchimp.com/pricing/p1/
  25. 25 http://www.mailchimp.com/pricing/p1/
  26. 26 http://blog.leahculver.com/2009/11/log-in-or-sign-up.html
  27. 27 http://blog.leahculver.com/2009/11/log-in-or-sign-up.html
  28. 28 http://cotweet.com/
  29. 29 http://cotweet.com/
  30. 30 http://weightshift.com/
  31. 31 http://weightshift.com/
  32. 32 http://jaxvineyards.com/#/chardonnay
  33. 33 http://jaxvineyards.com/#/chardonnay
  34. 34 http://veerle.duoh.com/
  35. 35 https://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/
  36. 36 http://veerle.duoh.com/
  37. 37 http://fuelbrandinc.com/#/core
  38. 38 http://fuelbrandinc.com/#/core
  39. 39 http://www.malcolmreading.co.uk/
  40. 40 http://www.malcolmreading.co.uk/
  41. 41 http://addyawards.dtelepathy.com/lifegear/
  42. 42 http://addyawards.dtelepathy.com/lifegear/
  43. 43 http://www.harmonyrepublic.com/#/who_we_are/who
  44. 44 http://www.saltfilms.com.sg/#/video
  45. 45 http://www.harmonyrepublic.com/#/who_we_are/who
  46. 46 http://www.spdaustin.com/
  47. 47 http://www.spdaustin.com/
  48. 48 http://duplos.org/
  49. 49 http://duplos.org/
  50. 50 http://www.alexbuga.com/v9/#page/about
  51. 51 http://www.creanto.com/
  52. 52 http://www.alexbuga.com/v9/#page/about
  53. 53 http://www.vimeo.com
  54. 54 http://www.vimeo.com/11153779
  55. 55 http://blip.fm/profile/Twinster/blip/43092207/Dj+Tiesto+feat+BT%E2%80%93Break+My+Fall+amazing+version
  56. 56 http://www.vimeo.com/11153779
  57. 57 http://www.nytimes.com/2010/05/09/business/global/09ripple.html?hp
  58. 58 http://www.nytimes.com/2010/05/09/business/global/09ripple.html?hp
  59. 59 http://www.reuters.com
  60. 60 http://www.reuters.com/
  61. 61 http://www.reuters.com/news/technology
  62. 62 http://informationarchitects.jp/articles/
  63. 63 http://getsatisfaction.com/
  64. 64 http://informationarchitects.jp/articles/
  65. 65 http://user-interface.alltop.com/
  66. 66 http://user-interface.alltop.com/
  67. 67 http://www.dailymile.com/people/00kate
  68. 68 http://www.dailymile.com/people/00kate
  69. 69 http://theblackharbor.com/
  70. 70 http://theblackharbor.com/
  71. 71 http://www.webdesignerwall.com/trends/what-to-expect-in-2010-uxui-design-simplicity/
  72. 72 http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/
  73. 73 http://www.lukew.com/ff/entry.asp?1071
  74. 74 http://ie.microsoft.com/testdrive/
  75. 75 https://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
  76. 76 http://tapbots.com/
  77. 77 http://tapbots.com/
  78. 78 http://2009.full-frontal.org/
  79. 79 http://2009.full-frontal.org/
  80. 80 http://gigaom.com/
  81. 81 http://gigaom.com/
  82. 82 http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
  83. 83 http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
  84. 84 http://adifferentdesign.be/
  85. 85 http://adifferentdesign.be/
  86. 86 http://colly.com/
  87. 87 http://colly.com/
  88. 88 http://css3exp.com/moon/
  89. 89 http://css3exp.com/moon/
  90. 90 http://css3exp.com/moon/
  91. 91 http://farukat.es/
  92. 92 http://farukat.es/
  93. 93 http://www.slideshare.net/maxdesign/css3-media-queries
  94. 94 http://chirp.twitter.com/
  95. 95 http://chirp.twitter.com/
  96. 96 http://nicewebtype.com/fonts/bello-and-proxima-nova/
  97. 97 http://nicewebtype.com/fonts/bello-and-proxima-nova/
  98. 98 http://neutroncreations.com/blog/
  99. 99 http://neutroncreations.com/blog/
  100. 100 http://neography.com/experiment/type1/
  101. 101 http://neography.com/experiment/type1/
  102. 102 http://designinformer.com/wp-content/uploads/css-posters/index.html
  103. 103 http://designinformer.com/wp-content/uploads/css-posters/index.html
  104. 104 http://mozilla.seanmartell.com/raindrop/
  105. 105 http://mozilla.seanmartell.com/raindrop/
  106. 106 http://media.twitter.com/
  107. 107 http://media.twitter.com/
  108. 108 http://madebytinder.com/
  109. 109 http://madebytinder.com/
  110. 110 http://www.sramekdesign.com/
  111. 111 http://www.sramekdesign.com/
  112. 112 http://css3generator.com/
  113. 113 http://css3please.com/
  114. 114 http://bit.ly/9V2dSv
  115. 115 http://caniuse.com/
  116. 116 http://www.webdesignerwall.com/tutorials/the-basics-of-css3/
  117. 117 http://www.impressivewebs.com/css3-click-chart/
  118. 118 http://www.onderhond.com/blog/work/why-css3-is-worse-than-ie6-debugging
  119. 119 https://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
  120. 120 http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
  121. 121 http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/
  122. 122 http://rss1.smashingmagazine.com/feed/
  123. 123 http://twitter.com/smashingmag
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Adeel Imran

    May 20, 2010 9:10 am

    Nice compilations. Anyways these web designers are very creative and hell doing a great job with the web. I wish to be like them.

    0
    • 2

      Dan Downing

      May 20, 2010 10:38 am

      You are like them, just for wanting to improve the experience (like they did) for your users. Now get out there and innovate! ;)

      0
  2. 3

    Great Article, thanks……will try to implement these trends in future web development.

    0
  3. 4

    Design Spartan

    May 20, 2010 9:22 am

    Great article, very complete and inspiring. I just hope IE8’ll die soon to be able to use CSS3 everywhere (just a dream…).

    0
  4. 5

    well i have to say the modern technology like the CSS newest version is used for creating animation with no flash usage. Technology really going towards the new digital innovations.

    0
  5. 6

    Pete Meyers

    May 20, 2010 9:37 am

    Thanks for the compilation!

    It seems you missed the maybe best example for real-life metaphors in webdesign:
    it’s the ability to really “feel” todos in the web app http://www.idonext.com

    I recommend watching their intro-video to see what I mean. It makes really fun to play around with todos, drag them onto another stack, tap on a friends face to assign a todo to him, etc.

    They really took care for a motivating UI with a lot of small visual responses, I always really want to get things done now :) …but I’m sure it looks crappy under Internet Explorer since it’s using all the cool new stuff of modern browsers.

    0
  6. 7

    Here is a post on the Mad Libs style form: http://www.lukew.com/ff/entry.asp?1007. According to this test, “Mad Libs style forms increased conversion across the board by 25-40%.” We are trying this out on our site as well: http://planetargon.com/get-in-touch?n=1.

    0
  7. 8

    Andy Clarke

    May 20, 2010 9:46 am

    Hi Vitaly,

    “Canny Bill (Demo, currently offline). Andy Clarke’s attempt at responsive pricing columns and buttons. He uses box-shadow, -webkit-gradient for the gradients.”

    You can find the final production design on the live site at http://www.cannybill.com/pricing.php

    Thanks for noticing.

    Andy Clarke

    0
  8. 10

    Im simply Smashed here. not sure what should be written for a good comment.

    1
  9. 11

    Hemanth Mahesh

    May 20, 2010 11:08 am

    Is css3 supported by all major browsers?

    0
  10. 12

    Andy Clarke

    May 20, 2010 11:22 am

    @Vitaly Friedman: Great, thanks. An article as good as this makes me want to participate. I may like to joke about Smashing Magazine but in fairness, you do have an incredible position that I envy. Given your energy and readership, you have a responsibility to everyone to make sure that not only is the information that you publish correct (it mostly is), but most importantly you firmly clear up the misunderstandings about CSS that we often read in the comments on your site. So…

    @chaitrax: These are not future trends. They are technologies that we can and should be using now in everything we make for the web.

    @Design Spartan: IE8 or any other browser should not stop us from using the emerging standards that Vitaly wrote about. Older browsers of any kind don’t hinder us or the web, it’s our outdated thinking that’s in danger of doing that. Mostly, dealing with older browsers isn’t a problem at all — until we make it one.

    @Hemanth Mahesh: There is no such thing as CSS3. One of the reasons why so many of us are reluctant to start working with CSS3 selectors and properties is that we’re waiting until the ‘specification’ is complete. Understanding the fact that CSS3 is not a single specification but is broken into modules that are being independently evolved and implemented by browser makers to meet their own objectives and timetables is vitally important in allowing us to stop waiting for CSS3 to be ‘finished.’

    1
    • 13

      Vitaly Friedman

      May 20, 2010 2:12 pm

      @Andy Clarke: Thanks, Andy. We are working very hard to ensure the quality and correctness of the articles published on Smashing Magazine, and yes, we are aware of the responsibility we have. I just talked about it with Simon Collison yesterday. Quality is, and has always been, very important to us.

      @rest: we should start using CSS3 now. It doesn’t make sense to wait just until IE supports it; let’s think and design for today and the future, instead of looking back and strive for the same appearance of sites in every browser, let’s offer better user experience to users with good browsers and an appropriate experience for users with older browsers.

      0
  11. 14

    Great article, it’s nice to see many different website examples, I’m so tired of blog articles using the same set of websites over and over again. This one is refreshing.

    0
  12. 15

    What a spectacular piece! I’ve bookmarked a lot of stuff here for looking into later in more detail.

    Thanks for including our spinning particles from the Neutron Creations blog, and it was great meeting you at FOWD!

    Let’s have more articles like this!

    0
    • 16

      Vitaly Friedman

      May 20, 2010 2:13 pm

      Thank you, Ben. Indeed, I would love to write more similar articles in the future! So please stay tuned.

      1
  13. 17

    Now this is what I’m talking about!

    Great informative article, I was a little scared when I saw the title that there would just be a list!

    I can’t stress enough the importance of subtly that is shown in these examples. We’ve got access to a great set of tools that can really add those neat little touches to an already fundamentally great design. The potential for abuse does scare me a little, but I guess that’s the same for anything relating to design. These are exciting times, and personally I cannot wait to see what else will be created over the course of the year.

    P.S – It was great meeting you outside at the after-party at FOWD. I know we talked about some really great stuff, but I fail to remember it now. I guess that is what a large amount of Mojito’s will do to you!

    0
    • 18

      Vitaly Friedman

      May 20, 2010 2:18 pm

      Indeed, new techniques and technologies tend to be abused very quickly. It’s crucial to realize that tools are here to support our main objectives, not inflate on our creative vision. Hopefully, we will see many exciting things over the course of the year, and we will certainly observe them and feature them on Smashing Magazine.

      It was nice meeting you at FOWD, too — it’s really great to have a real connection with readers, colleagues and partners. I really wish we will be able to “get out” more often: the design community is great, and it has so many great, creative minds; it is really a remarkable experience just meeting you guys and talking with you. And I hope to see you again soon!

      1
  14. 19

    Horizontal navigation since 4 years – royal-design.eu ;-)
    The Relaunch is next – Papervision 3D und Full-HD Video Content. I think that is important Trend for 2010 either.

    0
  15. 20

    Wow! nice I really like the compilations, i wish to be like them soon.

    0
  16. 21

    Nice article. But I have to wonder how many people actually read the conclusion.

    Side thought / suggestion: Some discussion of CSS3 and how it might be “integrated” with a CMS (e.g., ExprerssionEngine) might be interesting.

    0
  17. 22

    “And it’s not very clear how well Internet Explorer 9 will support the new standard either. ”

    Microsoft is being quite transparent about the development of IE9. There is currently a platform preview on Microsoft’s website, so you can test out what selectors work in IE9. It’s actually quite amazing.

    http://ie.microsoft.com/testdrive/

    0
    • 23

      Vitaly Friedman

      May 21, 2010 2:05 am

      Thank you very much for heads up, Anna! Very useful, indeed.

      0
  18. 24

    I saw that Fred Perry site for the first time today, but I am smashed how close it is to a concept I am working on right now –
    http://www.fivesecondtest.com/mocks/-tSMp-Zx.png

    Of course it will go into production only if the client approves! But I am so struck by how similar idea came to my mind..

    0
  19. 25

    You guys have done it again. Great read!

    I still wonder why people are pulling things back and hesitate to design for modern browsers using CSS3. I strongly believe that CSS3 can reduce our work in Photoshop and help us to move to code pretty quickly. We should try and experiment in browsers itself and get most of their capabilities. Lots of sites are still using images for what can be handled with CSS. People like Andy Clarke are doing this and writing about this. I have used few CSS advance techniques in my redesigned portfolio and don’t worry about IE and friends. People who are still using IE, don’t bother about details and design. Let them live with that; it’s time for the rest of us to move forward.

    0
    • 26

      Can you convince your client it is okay that your box shadow that shows well in Firefox but not in IE, because no one with good sense of design will be visiting her site using IE anyway?

      0
  20. 27

    george kyaw naing

    May 20, 2010 7:29 pm

    A lot of useful, real-life examples!
    We learn a lot from your article.
    thanks.

    george

    0

↑ Back to top