Tag: kranthi

Creating A Lasting Impression // Innovative and Memorable Designs


  

We can all agree that the work we do should inform, should be appropriate to the client and their audience and should, of course, look good. But there’s a fourth attribute worth aiming for: creating a lasting impression.

Visual memory is fascinating — we often use it without realizing. If, for example, you ask someone how many rooms they have in their home, before answering, most will walk through each room in their mind’s eye (possibly even with their eyes closed to aid concentration), adding up as they go. If graphic designers can tap into the benefits of this phenomenon, providing visual triggers to keep the subject matter of their work fresh in the audience’s memories, they will surely enjoy advantages.

Categorically describing what makes a design memorable is almost impossible. As with many other aspects of graphics and typography, general principles rather than absolute rules apply. However, aspects of dynamism and the unusual and unexpected more often than not play a significant role in memorable designs. Not all visual mnemonics can be described as being aesthetically pleasing; some designs might be deliberately shocking or provocative in order to be talked about and remembered.

A wide range of variables can affect the probability of a lasting impression, although very often luck, coincidence or timing helps. Striking color combinations, arresting images and clever use of typography and language can be helpful, too, but what captures an audience’s imagination and stays with them is frequently more complicated and possibly linked to the element of surprise. This article brings together a collection of memorable projects and try to identify how designers have made them unforgettable.

Creating Basic Memories

Professor Bruce Brown of the University of Brighton in the UK is an expert in visual memory. He describes letterforms as “meaningless signs, specifically designed to help us construct permanent memories for otherwise meaningless sounds so being the simplest and most powerful mnemonic system devised.� For most of us, learning the alphabet is part of our early lives and helps us to establish communication skills; in our early years, we work on the connection between signs, symbols and sounds until they are secured in our memory to be retrieved at will and in any order.

We become experts in using these tools to help recover ideas from our memories, bringing them together to create meaning. The importance of this phenomena must not be underestimated, and Professor Brown puts it well when he says:

“Without the ability to create memories we would perceive no more than each disjointed second of our isolated existences; we would have no language, no alphabet, no discourse, no identity and no culture.”

Witty And Shocking Designs That Leave A Lasting Impression

There’s no doubt that information wrapped in a witty or shocking package is hard to forget, and the following examples are typical. Not only does the memory of them linger, but they’re often so powerful that you’ll want to share them with friends.

“All Eyes On You” by Britzpetermann

All Eyes on You.
“All Eyes on You�, a moving window display by Britzpetermann, Bonn, Germany. (View video)

About this project:

Schau, a series of interactive window displays by Britzpetermann, includes a window packed with large roving eyeballs. Each eye follows passers by in a strangely spooky manner that is not easily forgotten.

Why is this design memorable?

Eyes have a powerful significance, which always draw the viewer strongly into an image. So, being confronted by an array of giant eyeballs that seem to be dismembered and floating in space will certainly be very memorable. However, when the eyes appear to make active contact with you personally, following your every move, as if responding not only to your actions but perhaps to your every thought, then they become truly unforgettable.

“Hand Made Type” by Tien-Min Liao

Hand Made Type, by Taiwanese designer/illustrator Tien-Min Liao.

Hand Made Type, by Taiwanese designer/illustrator Tien-Min Liao.
“Hand Made Type� by Taiwanese designer and illustrator Tien-Min Liao. (View video)

About this project:

“Hand Made Type� is an animated project that shows hand-drawn uppercase letters painted on hands, speedily and subtly converting to their lowercase equivalents in fluid movements.

Why is this design memorable?

This project has such an unusual concept and is fascinating to watch. Looking at the detail in these clever animations, we find ourselves flexing our fingers and trying to mimic Tien-Min Liao’s careful movements. We are all able to use our hands in very expressive ways, and the combination of type and hands together is extremely powerful and, therefore, difficult to forget. We are also left wanting to know more: Where did this amazing idea come from, and how long did it take to achieve these marvellous results?

“Chaumont Poster” by Sagmeister

Poster by Sagmeister Inc. for their exhibit at Chaumont 2004-5.
(Large version)

Sagmeister's letter-teeth as used in the Chaumont poster.
Poster by Sagmeister for its exhibit at Chaumont 2004-5.

About this project:

This poster by Stefan Sagmeister (the “kingâ€� of highly mnemonic design) contains a number of disturbing images that are very hard to forget. Letterforms that appear to have been extruded from human flesh, people with intertwined body parts, and teeth that appear to have been cut into letters and numbers — all of these create shock responses.

Why is this design memorable?

We defy anyone to look at Sagmeister’s typographic front teeth and not run their tongue over their own teeth to check that they are all still complete.

There is something innately fascinating about the human body. We are all very familiar with the curves, creases, surfaces and details of our own physique, but being presented with surprising, even shocking, close-up detail of some of the hidden areas of another person’s anatomy can be irresistibly captivating.

Ad for “Concordia Children’s Services”

About this project:

In this ad by Young and Rubicam for Concordia Children’s Services in the Philippines, the question is asked, “If you don’t help feed them, who will?� The advertisement shows babies feeding from a sow like piglets and is intended to shock its audience into appreciating the dreadful plight of the many abandoned babies in Manila.

Why is this design memorable?

Seeing numerous babies in the extraordinary situation of feeding from a pig is initially very arresting and shocking; but for us, the totally unhygienic environment is what really makes us squirm. In most societies, whether rich or poor, babies are treasured, cosseted, loved and kept distant from grime and germs; in this image, the newborns are shown fending for themselves. They are pictured grovelling in the mud and competing with each to feed. We defy anyone not to have a physical response to this ad and hold it in their mind’s eye for a long time.

When Movement And Interaction Make Designs Addictive

The designs showcased in this section have a compulsive quality about them. The imagery is fascinating and appealing, but the interactive nature of each example makes it hard to resist and highly memorable.

“Karlo Jurina Selbstgespräche” by Britzpetermann

Karlo Jurina Selbstgespräche by Britzpetermann
Still shots don’t do this project justice. View a behind the scenes video on Vimeo, or visit the website yourself!

About this project:

Interaction and movement in response to outside stimuli are two aspects that can make Web design really memorable and enjoyable. This album visualization for Karlo Jurina Selbstgespräche by Britzpetermann is truly breathtaking.

Why is this design memorable?

Throughout each of the 15 tracks, a precise movement of carefully positioned, colorful symbols highlights every individual note, causing you to almost believe that you could be, or are, playing every stunning note yourself. The melodies of Jurina’s beautiful acoustic guitar will resonate from your computer, while the arrangement of over 300 bright, individual and precisely ordered marks will seem to breath from your screen in response to the rhythm of the composition.

The idea of the personal response to the subtleties of sound and rhythm is what comes to the fore with this project, leaving you not only with a strong yet surprisingly subtle visual interpretation of music, but also the strangely satisfying idea that your own personal responses and movements could play a role in creating this wonderful sound.

Try out Selbstgespräche for yourself.

“Hidden Heroes” by Grimm Gallun Holtappels

Hidden Heroes.

Hidden Heroes.
The award-winning “Hidden Heroes� online exhibit, designed by Grimm Gallun Holtappels.

About this project:

Who has not at some point looked down at one of the myriad of products that make everyday life easier and thought, “Wow, that’s clever. What a simple memorable design.� The Hidden Heroes online exhibit, designed by Grimm Gallun Holtappels, pays homage to the zipper, the paperclip and many other such items.

Why is this design memorable?

Interaction with the exhibit is highly pleasurable because it stimulates several of the five senses. The design is beautiful and colorfully pleasing to the eye, while every action of the mouse creates a satisfying response and amusingly memorable sound that transports you right back to personal memories of using a particular Hidden Hero. Our favorite is the Flipflop, designed by Bernd D. Hummel around 1960; great noise — it transports us to sunny days and sand between our toes!

You can experience your own Hidden Hero, too!

Website of “Grimm Gallun Holtappels”

Grimm Gallun Holtappels's Website

Grimm Gallun Holtappels's Website

Grimm Gallun Holtappels's Website
The lively and addictive website of Grimm Gallun Holtappels.

About this project:

Grimm Gallun Holtappels has created an almost addictive experience on its own website. By showing us around its office space, we are allowed to shuffle through a trail of files that fly through bright white rooms, giving off pleasingly subtle page-turning noises. Each file selected then speedily transports us to a new workspace and converts to a two-part three-dimensional box that can be rotated in different directions to reveal different details.

Why is this design memorable?

Experiencing the pleasures of moving through this online 3-D environment is very personal and mnemonic. Looking at the office space, we are aware of the depth of field and of other rooms existing in the distance. The ability to turn and twist the three-dimensional boxes, revealing different planes and detail, is very reminiscent of experiencing and interacting with the intriguing puzzles and other captivating games of our childhood. For us, one of the most memorable and subtle aspects of this design is the constant gentle movement of the website, seeming to rise and fall as if in time with our breath, emphasizing the personal and sensory nature of this viewing experience.

Enjoy your interaction on the Grimm Gallun Holtappels website.

When Use Of Unexpected Materials Takes Your Breath Away

In this section, we highlight design examples that involve totally unexpected materials, plus extraordinary dexterity and commitment on the part of the designers. It is impossible not to be amazed by the workmanship that went into these venerable pieces, and one cannot help but get a lasting impression.

“Banana Wall” by Sagmeister

Sagmeister’s Banana Wall.

Sagmeister’s Banana Wall.

Sagmeister’s Banana Wall.

Sagmeister’s Banana Wall.

Sagmeister’s Banana Wall.
The various stages of Sagmeister’s “Banana Wall� for Deitch Projects.

About this project:

Certain examples of highly memorable design not only stay with us, but make us think, “I wish I had thought of that.� It is amazing to consider the dexterity needed to produce this huge design spectacle, in which the designer selected unusual materials for their capacity to ripen and change color. Green fruit is used to create border patterns, rules and letterforms that spell out “self confidence produces fine results� while yellow bananas create a contrasting background.

Why is this design memorable?

This project confronts us with piles of fast-ripening bananas, and the slightly infuriating fast-ripening aspect of this popular fruit is used to amazing affect by Stefan Sagmeister. All of us have experienced bananas ripening more quickly than we would like, but how many of us have thought to use the change in color of 10,000 pieces of fruit to creative affect? It’s a great example of pushing something so common to the extreme, and it creates a memorable and unique experience. The clever, meaningful link between Sagmeister’s quote and the color change is also a powerful metaphor. As Stefan Sagmeister says:

“After a number of days, the green bananas turned yellow, too, and the type disappeared. When the yellow background bananas turned brown, the type (and the self-confidence) appeared again, only to go away when all bananas turned brown.”

“Obsessions Make My Life Worse And Work Better� by Sagmeister

Obsessions Make My Life Worse and Work Better, created by Sagmeister Inc. using thousands of coins

Obsessions Make My Life Worse and Work Better’ created by Sagmeister Inc. using thousands of coins

Obsessions Make My Life Worse and Work Better’ created by Sagmeister Inc. using thousands of coins

Obsessions Make My Life Worse and Work Better’ created by Sagmeister Inc. using thousands of coins
“Obsessions Make My Life Worse and Work Better� created by Sagmeister using thousands of coins.

About this project:

The subject of this piece by Stefan Sagmeister perhaps helps to explain the attention to detail in his other designs in this section. “Obsessions make my life worse and work better� at first glance appears to be a typographic design involving copper-colored letterforms that are elaborately embellished with floral decoration. However, upon closer inspection, this project makes highly unexpected and mnemonic use of materials. This time, small coins have been carefully and precisely arranged across a paving-slab grid structure.

Why is this design memorable?

As with the other designs in this section, the dexterity and patience necessary to produce this result is breathtaking. The vulnerability of this design is also plainly evident. The work is executed outside in a public space and is open to being disturbed by the weather and visitors. In fact, during the first night after completion, a local resident spotted passers by removing a souvenir coin or two and called the police. Unfortunately, the authorities responded quite dramatically, sweeping up all of the coins into black bin bags — supposedly to secure the work! We can hardly believe what it must have felt like to discover the blank space, and a part of remembering this piece is being able to identify with this experience.

“The Comedy Carpet” in Blackpool, UK

The Comedy Carpet located in Blackpool, UK

The Comedy Carpet located in Blackpool, UK
“The Comedy Carpet� located in Blackpool, UK.

About this project:

Many of the other mnemonic works in this section are made of materials that give them a fragility and vulnerability that make them mind-blowing, almost literally. However, The Comedy Carpet by Gordon Young and Why Not Associates involves the memorable and amazing use of materials in a different way.

The carpet, a typographic work on an extraordinary scale, is a celebration of comedy, and it references more than 1000 comedians and comedy writers. The design itself takes its inspiration from traditional music-hall posters; it features songs, jokes and catchphrases in granite letters, carefully embedded in a concrete layer and displayed in carpet form in front of Blackpool Tower on England’s northwest coast. Described by its creators as “A remarkable homage to those who have made the nation laugh, it’s also a stage for popular entertainment that celebrates entertainment itself.�

Why is this design memorable?

The answer to this question is the mixture of high-quality design, amazing manufacture, grandness of scale and outdoor setting.

The making of this extraordinary carpet certainly helps make the product itself so memorable. At first sight, the letterforms seem painted, but each of the 16,000 30-millimeter characters were cut by the carpet team in a workshop specially established for this project. For us, having the chance to walk on this beautifully constructed carpet of type makes for an unforgettable experience.

Executing this typographic detail at such a momentous scale in a famous outdoor environment is quite remarkable. Of course, those who understand English and recognize the comedians will enjoy another highly memorable feature: humor. Like the other works in this section, the Comedy Carpet turns the ordinary into the extraordinary, making it larger than life and totally immersive.

Using Color And Composition As Visual Triggers

Cleverly chosen colors and careful composition have the power to make a design distinctive and striking. The works in this section demonstrate a number of ways in which color and composition can have great impact and linger in the mind.

“Elephant Magazine” by Studio8 Design

Pages from Elephant Magazine

Pages from Elephant Magazine

Pages from Elephant Magazine

Pages from Elephant Magazine
Elephant magazine demonstrates a compositional dynamic that is highly memorable.

About this project:

Elephant magazine by Studio 8 without a doubt uses color, image and composition to effect, but the London-based design company’s skill with composition is what prompted us to focus on this magazine.

Why is this design memorable?

Elegant typography, including text with a lightness of touch, is carefully arranged on pages, with letterforms headings used in unexpected ways to create beautiful imagery and dynamic spaces. Careful and precise alignment helps to bring the details together, fixing your attention on what is important, while leaving a pleasurable lasting impression that is sure to have you looking out for other issues.

“Maps” by Paula Scher

Paula Scher's Maps

Paula Scher's Maps

Paula Scher's Maps

Paula Scher's Maps

Paula Scher's Maps
Paula Scher’s Maps has an amazing interplay of color and pattern.

About this project:

In the 1990s, Pentagram’s Paula Scher began painting colorful maps with incredible layered detail. Her creations use hand-painted type to show countries, cities, oceans and districts, as well as cultural connections, in compelling patterns.

Maps is published by Princeton Architectural Press and highlights 39 of Scher’s captivating works in great detail. Many sections are shown in full size, and the cover features a 3 × 2-foot poster of “World Tradeâ€� painted in 2010.

Why is this design memorable?

Compositions are packed with a huge amount of colored hand-lettering that overlays and interacts in an exciting way. Even without reading the words, the imagery is unforgettable, as the incredible detail, layering, color, composition and subject matter draw you into the depths of each work. As with many of the other designs in this article, the question springs to mind, “How did she do it?�

Conclusion

No doubt, many other examples could have been highlighted in this article, and hopefully you have been stimulated to recall favorites of your own. The dictionary says that a mnemonic design is intended to aid or improve the memory, which suggests that designers can never be sure of the impact their work will have.

Although we have categorized the works in order to tease out a number of common design decisions, an integral part of remembering a work involves such things as our personal experiences, culture and history and significant moments in our life. Designers can do their best to create fantastic designs and provide triggers that unlock memories, but having total control over whether an impression is lasting is impossible.

Related Links

(il) (al)


© Carolyn Knight, Jessica Glaser for Smashing Magazine, 2012.


Everything in its Right Pace

Everything in its Right Pace

Some time ago I realized, with mild panic, that our always-on, real-time communication channels weren't going away. As I was gulping down the day's feeds along with my morning coffee, it occurred to me that even if I wanted to, I couldn't really opt out. My refresh twitch is so habitual now it's almost hard to remember just how experimental things like the early days of Twitter felt.

Of course it once was, like all new things. The real-time web started as something we did because we could. Technological advancements like more efficient ways to retrieve large amounts of data, the cloud, and the little computers we now carry around in our pockets made it just a really sexy problem to solve. Successful experiments turned into trends, and those trends are now becoming unquestioned convention.

But is real time always the right choice? Do we even want everything we consume to move at this pace?

Terminal velocity

We're just embarking on an instrumented era of logging all our personal data and making it available instantly, yet diminishing returns have already started to set in. We struggle not only to keep up with each other's data trails, but more importantly, to know which crumbs in those trails are worth picking up, as well as how to find them again later—like when you want to relax on the sofa after a hectic week and you know there must have been a bunch of cool things to listen to or watch that flew by on Twitter, but gosh, where are they now?

Why is this? The two companies that pioneered real-time interfaces—that brought their users kicking and screaming from one redesign to the next as designers struggled to invent new ways of consuming; whose whales were failing left and right as technologists struggled to tame the data—what do they have in common? Facebook and Twitter are communication channels.

I have a hunch that when we invent new things, the first way we test our new technology is with talk. Our ability to communicate is simply one of the most basic use cases in the design problem of our lives. And not only is it essential and important and the rest of it, it's fun. It makes us laugh. Why wouldn't we?

This real-time barrage of voices works well for talk, because talk is fast, easy, effortless. We do it constantly. So what about things that take longer to make and consume: a song, a book, a film? Trying to squeeze these types of media up into the high-frequency end of the spectrum and expecting that we'll enjoy them whizzing around our heads at the same speed as our daily chatter might create a missed opportunity to explore a whole other end to the spectrum of pace for personal data!

Finding the right pace

At the music company Last.fm I worked alongside Matthew Ogle, helping to shape a service from a firehose of 800 scrobbles per second. When he and I left our respective product and design posts, we started talking more seriously about our remaining itches in online music. We realized we were missing a place where we could wholeheartedly express our musical taste in a way that's more distinctive, more singular, more...tender.

We'd also seen enough attempts at real-time song sharing to know that while having songs tick by like stock prices may look cool, it's not that valuable: How do I know which of those songs really matters to you?

This got us thinking about a service based around just a single piece of data at a time. What would a music service built only from "favorite songs" feel like? This raised the next question: What's the right time-scale for a song? We took a guess that you might have a new favorite song about every week.

These two constraints—one song at a time, for a maximum of seven days—led the design of our new project, thisismyjam.com.

As builders of the next generation of web products, we need to consider the right pace for the personal data in question. Pace should inform how that information is presented, contextualized, and delivered to the user.

Lovers in a dangerous time

IRL, this right pace—or "accepted lengths of time" for media things—is typically bound by the physical limitations of its particular medium, the people who make it, and how it is consumed. As different media industries matured and refined, we found the right pace for their outputs.

For example, when the American superhero comic was maturing as a medium, an artist could draw about a page per day. If you take a month and subtract eight days for weekends, that's the standard length of a monthly single issue comic book—22 pages. It's a somewhat arbitrary cycle, but it works with our other arbitrary monthly cycles, like getting paid. If comic books start coming to shops more frequently, and you have a limited budget, then all of a sudden your focus as a fan and a consumer is disrupted.

The single in the music industry is another example of pace. It's hard to expect everyone to sit down and listen to a whole new album, but one song? That's doable. It's not surprising, either, that the first rule of marketing a single is to allow it enough time to become an earworm before the whole album is released. People need time to take it in.

Constraints breed creativity

As media mature, their pace becomes not just a standard, but a helpful constraint that inspires further creativity.

Constraints have long inspired people who create, and the same is true for you and I. The limitations of the products we use every day inspire us: Twitter's 140 characters; Instagram's one photo at a time; or back in 2006, working within the range of code you could hack to make your MySpace page look unique.

Any network based around the concept of self-expression—the creation of personal data—will be more fun, easier to get started with, and more likely to create whole new genres of art if it includes limitations.

As easily as technology allows us to erase constraints, it gives us the power to create new ones.

Notable data

Like many, I believed that attention data was one of the most valuable types of data to collect when building an online service—because of its honesty. However, at Last.fm I learned that attention data is only valuable in aggregate. The "cold start" (when your profile is empty and recommendations are useless until you start scrobbling) was one of the biggest design challenges I dealt with. When the unit of data is so small, and created so passively, you must reach a tipping point before those single units add up enough that you can extract some value out of them for the user.

A unit of data like your current favorite song may not be as precise, but it's a unit that carries a ton of human meaning. Asking someone what song they've been into lately is almost always a good conversation starter, and a lot can be inferred and asked about based on it. A favorite song is instantly valuable, and a handful of them can go a long way.

I've been calling this notable data. Knowing what song was the soundtrack to that summer, or why you'll always want to wiggle to that guilty pleasure from the '90s, or which track you want played at your funeral, is a piece of personal data so weighty that if done right, it can create network value almost instantly. And its value is twofold: it's not just that it's more special; it's scarce. How many favorite songs can one person have?

In the physical world, the scarcity of something, like a Stradivarius or Michael Jackson's glove, is one of the driving factors of its value. Online, scarcity is almost a forgotten word. But maybe we just need to explore it in a different way?

Notable data starts to get really enticing when that single piece of data is crafted—contextualized with other pieces of data to make it even more valuable. It takes time, so it's bound to happen less often. A Foursquare check-in with a tip has more value than just a check-in; an Instagram photo that's been run through three different apps to get that perfect effect has more value than one that uses the standard filters, which still has more value than just a crappy camera phone pic.

Pace and value: an inverse relationship?

If scarcity breeds value, where can we find it online? Our time. In the virtual world, where we can make endless copies of data and "limited editions" don't exist, the one thing that prevents us from doing even more than we already are is the limits of our brains (and our sanity).

When we pull down to refresh and find a little gem of digital craft—not just an automated personal stat or an off-the-cuff remark, but something that took time to make—it's delightful. It's valuable. But if these valuable, scarce things are slow, you may ask, won't they always be niche? Like slow food and artisan coffee, a rounding error in a world of McDonald's and Starbucks? Am I just some kind of internet hippie who thinks we all need to take a deep breath and slow down? No, there's actually real value in this model. Let's do the math, using This Is My Jam as an example:

  • Let's assume you have a favorite radio station. Let's also assume the most new music you can enjoyably consume in a day is an hour, tops. (Listening to all new music is exhausting; there's a reason most radio stations play stuff you've heard before).
  • The average length of a pop song is 3.5 minutes, so you need about 17 songs for an hour of new music.
  • 17 songs per day x 7 days per week = 119 new songs per week.
  • If 1 This Is My Jam user = 1 new song per week, you only need to follow 119 people for an hour of new, handpicked songs to listen to every single day. (My guess is there are also a lot of people who would be quite satisfied with only an hour of new music per week—which would require following 17 just people.)

When you compare that to the number of people you follow on Twitter or are friends with on Facebook, it's probably not as many, or maybe just teetering in the same range. Yet even at this slow pace, it satisfies the use case of discovering new songs, because it's a network that's built around the right pace for music.

Go forth and explore the spectrum

In 1967, when describing the community of the future (our present), Marshall McLuhan predicted "electric circuitry has overthrown the regime of 'time' and 'space' and pours upon us instantly and continuously the concerns of all other men." He was right; this is the real-time state we're currently living in.

I believe it's time to envision another community of the future—one slightly less dystopian than all information and media pouring down on our heads, whether it be night or day, whether it makes sense for that content to travel at high frequencies or not.

As the people who build this next vision of the future, we must consider pace.

If it helps, use analog metaphors to dream up limitations that help create that right pace. Experiment with speed. Try letting this drive the design principles of your work: If it should be at the fast end of the spectrum, how does this dictate how the data should be presented and delivered to the user? Likewise for the slow end of the spectrum: What's the best context for your product? Twitchy pull-to-refresh data works well in your pocket, but what about for the best films your friends have watched this month?

If there is an exciting bit to the slow end of the spectrum, one that plays with scarcity and value, what do we have to lose by investigating it? I mean, the real-time world will always be there when we want it.

Translations:
Italian


RSS readers: Don't forget to join the discussion!


Learning to Love the Boring Bits of CSS

Learning to Love the Boring Bits of CSS

The future of CSS gives us much to be excited about: On the one hand, there’s a whole range of new methods that are going to revolutionize the way we lay out pages on the web; on the other, there’s a new set of graphical effects that will allow on-the-fly filters and shaders. People love this stuff. Magazines and blogs are full of articles about them.

But if these tools are the show ponies of CSS, then I think it’s time we gave some love to the carthorses: the nuts-and-bolts components of the language, like selectors, units, and functions. I often call these the boring bits, although I say that only with great affection—an affection I think you should share.

To see why, let’s take a quick walk through some of the best of the new boring bits in CSS—the bits being worked on in half-lit laboratories away from the brilliance of the shiny new things in the shop windows. Some of these boring bits have been around for a while but deserve more recognition, while others are just starting to appear in browsers. But they’ll all be revolutionary to the way we work—albeit in humble, unassuming ways.

Relative size units

It’s likely that, as the smart and forward-thinking developer you are, you’ve worked with relative sizing—that is, em units or percentages—so you’ll know this problem: having to use a calculator to work out sizes because of inheritance. For example, it’s pretty common nowadays to set a base font size for your document and then use relative sizing to set your fonts across the rest of the page. In CSS, that probably looks something like this:

html { font-size: 10px; }
p { font-size: 1.4em; }

This is fine, and not a problem at all, until you have a child element you want to set at a different font size. For example, in markup like this:

The cat sat on the <span>mat</span>.

If you want that span to be at a smaller font size, say 1.2em, what do you have to do? Get your calculator out and work out 1.2 divided by 1.4, resulting in this:

p span { font-size: 0.85714em; }

And the problem’s not limited to using em either. If you’re building a fluid site using percentages, you’ll know that the percentage is relative to its container; so if you have an element that you want to be 40 percent of its parent, the length of which is 75 percent, then the width of the element must be set to 53.33333 percent.

Not ideal.

Root-relative lengths

To combat this font-sizing problem, we now have access to the rem (root em) unit. This is still a relative unit, but it’s always relative to a fixed base value, which is the font size of the root element of the document (in HTML, that’s always the html element). Presuming the same root font size of 10px that we used in the preceding example, the CSS rules required for the case at hand are:

p { font-size: 1.4rem; }
p span { font-size: 1.2rem; }

Now both rules are relative to the root font size, which is much more elegant and easy to work with, especially if you have a simple base like 10px or 12px. It’s sort of like going back to using px values again, only scalable.

This is one of the better-supported features in this article; it’s in all modern browsers including IE9, and only absent in Opera Mobile.

Viewport-relative lengths

If you think the rem unit is cool (I do), you’ll be delighted to know there’s also a new set of length units to combat the percentages problem. These work in a similar way to rem, except that they’re relative not to a user-defined value on the document root, but to the dimensions of the device viewport itself.

The two main units are vh and vw, which are relative to the height and width (respectively) of the viewport. Each takes a number as a value, and that number is equal to the same percentage of the specified length. As I still remember the lessons of screenwriting school, let me show that rather than trying to tell it:

div { height: 50vh; }

In this example, the height of the div would be exactly half of the height of the viewport; 1vh = 1 percent of the viewport height, so it stands to reason that 50vh = 50 percent of the viewport height.

As the viewport size changes, so does the value of the unit—but the advantage of this over percentages is that you don’t have to worry about containing elements: an item with a value of 10vw will always be that wide regardless of the width of its parent.

There’s also a vmin unit, which is equal to the smallest of either vh or vw, and it was recently announced that a corresponding vmax unit would be added to the spec (although it hasn’t been at the time of writing).

As of right now these are in IE9+, Chrome, and Safari 6.

Calculated values

When you’re working fluidly and/or responsively, you’ll doubtless come across the problem of mixing units—wanting to have a grid that’s sized in percentages but with fixed margins. For example:

div {
  margin: 0 20px;
  width: 33%; 
}

If your layout only uses padding and border, then you can use box-sizing to help you get around that, but it won’t help you with margins. A better, more flexible approach is to use the calc() value function, which lets you perform mathematical operations with different units, such as:

div {
  margin: 0 20px;
  width: calc(33% - 40px);
}

You’re not limited to using it only on width; you can use it anywhere length values are permitted—and if you want to go really deep down the rabbit hole, you can also use calc() inside calc().

IE9+ has this unprefixed (!), Firefox has it with the -moz- prefix (which should be unprefixed in release 16 or 17), and Chrome and Safari have implemented it with the -webkit- prefix. It doesn't seem to be in mobile WebKit yet, however.

Load a subset of characters

Snappy performance has always been important, but the broad range of mobile devices on the market now—each bringing great variability and uncertainty in connection speed—makes it perhaps even more so. One way to speed up page loading is to keep external file sizes down, which makes a new property for @font-face that aids in doing just that a very welcome addition.

The property in question is unicode-range, and it takes as a value a range of unicode character references. When pulling in external assets, only those specified characters are loaded from the font file, instead of the complete set. This code demonstrates how to load only three characters from the file foo.ttf:

@font-face {
  font-family: foo;
  src: url('foo.ttf');
  unicode-range: U+31-33;
}

This is especially useful if you’re using font icons and only want to show a subset on a given page. In one test I ran, using unicode-range shaved an average 0.85 seconds from the loading time of a font file, which is not insubstantial. Of course, your own mileage may vary.

This property is currently implemented in IE9+ and WebKit browsers like Chrome and Safari.

New pseudo-classes

Units and values are all well and good, but it’s selectors and pseudo-classes that I get particularly excited about. Coming up with a clever selector pattern, even though it’s hidden away where only a hardy few may ever see it, makes me feel like a craftsman. To paraphrase Steve Jobs’ father: you should make the back of the fence look as good as the front even if no one else knows you’ve done it—because you’ll know.

When I first used :nth-of-type() it was a revelation, like I had kicked down the doors of perception. OK, I’m exaggerating a little. But there are a couple of new CSS pseudo-classes that are really worth getting enthused about.

The negation pseudo-class

You probably won’t realize quite how useful the :not() pseudo-class is until you try it. The argument provided to :not() is a simple selector—no compounds. When a list of subjects is being made by a selector that includes :not(), any elements matching the argument will be excluded from that list. I know, that sounds complicated to me, too. But it’s actually quite simple.

Imagine this: you have an item list and you want to apply a rule to all its odd-numbered items, but never the last one in the list. At the moment you’d have to do something like this:

li { color: #00F; }
li:nth-child(odd) { color: #F00; }
li:last-child { color: #00F; } 

With the negation pseudo-class you can exclude the last item from the rule using :last-child as the argument, thus reducing the number of rules by one and making the code a little easier to manage:

li { color: #00F; }
li:nth-child(odd):not(:last-child) { color: #F00; }

It’s nothing groundbreaking, and as I’ve shown already you can work without it—but it’s quite useful. I had the opportunity to use it on a project built with embedded WebKit, and it proved its worth consistently. It’s honestly one of my favorite pseudo-classes.

That’s right, I have favorite pseudo-classes.

This is the most widely implemented of all the features in this article; it’s in IE9+ and all modern browsers, unprefixed. And if you’re familiar with jQuery, you may already be used to using this—it’s been in there since version 1.0, along with the similar not() method.

The matches-any pseudo-class

The :matches() pseudo-class accepts as an argument a simple selector, a compound selector, a comma separated list, or any combination of those items. Great! But what does it do?

It’s most useful for cutting the cruft of multiple selectors. As a use case, imagine you have a bunch of p elements in different containers but you only want to select a few of them; perhaps the style rule you write would look something like this:

.home header p,
.home footer p,
.home aside p {
  color: #F00;
}

With :matches(), you can shorten that considerably by finding the commonalities in the selectors; in our example here all have .home at the start and end in p, so we can use :matches() to aggregate all of the elements in between those. Confusing? Here’s what it looks like:

.home :matches(header,footer,aside) p { color: #F00; }

This is actually part of CSS4 (CSS Selectors Level 4, to be precise), and in the same spec it mentions that you’ll also be able to use the same syntax—comma-separated compound selectors—in future versions of :not(). Exciting!

Today, :matches() is in Chrome and Safari with the -webkit- prefix, and in Firefox under its old name, :any(), with the -moz- prefix.

Do you love the carthorse yet?

The best thing about all the new features in this article is that they solve real-world problems, from the small but annoying repetition of selectors to the new and ongoing challenges of building high-performance responsive sites. In fact, I can imagine using every single one of these features on a regular basis.

New features like filters may have higher visibility, but you’re far more likely to find the ones presented here useful on every one of your builds.

Each of them will make your professional life a little easier while expanding the possibility space of what you can achieve—and there’s nothing boring about that.

Translations:
Italian


RSS readers: Don't forget to join the discussion!


Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency


  

Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could even be a question about a philosophical approach. We’ll take all kinds.

If you’re interested in exploring more Q&A, there’s a bunch more in my author archive.

Resolution Aware Sprites

Joshua Bullock asks:

Your last round of questions was titled “Box-Sizing And CSS Sprites” which offered some great answers for two separate items, but didn’t take them that one step further for responsive design. Ultimately, my question is this: Is there a preferred/suggested way of handling responsive sprites at all for multiple resolutions and image scaling? Is this even possible?

This is a hot topic lately because of the rise in “retina” displays. But really, this problem has been building up for a while. Us Web designers often work in “pixels”, for instance, setting the width of an image: img { width: 100px; }. But what is 100px? It’s been a long time since that literally referenced a pixel on the screen. These days it’s a rather arbitrary measurement. 100px ends up being around an inch on a physical screen, regardless of its resolution.

Retina displays made a really quick and big jump in resolution. Apple’s 27″ Thunderbolt Cinema display has 109 PPI (pixels per inch) while the 15″ Retina MacBook has 220 PPI (literally twice as dense) meaning there are more pixels on the drastically smaller screen.

If you are drawing a solid red box on the screen, no problem at all! The higher resolution display will simply draw it with more pixels. But what about a little icon that you designed at 16×16 “pixels” in Photoshop? Both a high-resolution display and low-resolution display need to display that icon at the same physical size, but the high-resolution display needs to essentially fake a lot of those pixels. It’s like when you enlarge a photo in Photoshop, it immediately starts looking like crap.

One solution is to make all your original images bigger. Instead of a 16×16 “pixel” image, you can actually make it 32×32 in Photoshop but have CSS size it to 16×16. Then the information is there for the high-resolution display.

Your question was explicitly about sprites. How can we make a sprite image that is twice the size for retina screens without making it a huge pain in the butt? Fortunately, Maykel Loomans recently published a very simple and clever technique for this.

Essentially, you make the sprite exactly (and literally) twice as big, while maintaining its proportions. Then in your “normal” CSS, you load up the “normal” sprite and do all the background-position and sizing stuff to make your sprite work. Then using media queries, you overwrite the background-image with your new retina sprite (when the conditions are correct). You use background-size to shrink the retina sprite, so you don’t have to touch the tedious positioning/sizing stuff. Yay!

span.rss-icon {
   background: url(sprite-1x.png)  72px 181px;
   width: 16px;
   height: 16px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
  span.rss-icon {
    background-image: url(sprite-2x.png);
    background-size: 50%;
  }
}

Liquid — Fixed — Liquid

Niels Matthijs asks:

The layout I’m trying to create is L1F2L3, meaning the first and third column are both liquid, while the center column is fixed. I’ve been trying some stuff out, and even though I came close a couple of times, the solution never really pleased me. Do you have anything on this?

The Flexbox method in CSS can hook you up with this solution, and it’s pretty easy:

<div class="grid">
  <div class="col fluid">
    ...
  </div>
  <div class="col fixed">
    ...
  </div>
  <div class="col fluid">
    ...
  </div>
</div>
.grid {
  display: -webkit-flex;
  display: flex;
}
.col {
  padding: 30px;
}
.fluid {
  flex: 1;
}
.fixed {
  width: 400px;
}

Flexbox

See demo. I’m hesitant to recommend this as a “real world” solution because the spec for flexbox has changed rather dramatically recently. The code above is the newer syntax which is supported only by Chrome 21+ at the time of this writing (see support charts). There is an older syntax (see demo) that has wider browser support, but will probably someday stop working.

If you are in a position where you know that the middle column will be the longest, you could have the parent container have percentage padding on the right and left sides and absolutely position the left and right columns within it (at the width of that percentage). And if you don’t know that, you could always measure the three columns with JavaScript, and set the parent container’s height to the tallest of the three.

The New

Peter Karlstein asks:

What are the most useful CSS tips, techniques, tricks that you’ve learned recently? Can you present a couple of your recent “Aha!” moments with CSS?

Messing around with the latest flexbox stuff (as I did above) was pretty fun, although not really useful quite yet.

In the past few months I’ve moved entirely to using Compass, which has been tremendously useful. Over time I’ve grown tired of the repetitive and finicky things in CSS. But Sass and Compass make authoring CSS fun again for me.

As far as little CSS “tricks”, I’ve had to use this one several times lately. Essentially, if somehow some super long string of text gets into a container with no spaces, it will break out of the container in a super awkward overlapping fashion. This is most common with user-generated content and users pasting in URL’s. I like applying this class to any user-generated text containers:

.prevent-text-breakouts {
  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

Before:

After:

Also, Uncle Dave’s Ol’ Padded Box is a good one to have in your toolbox.

Relative Font Sizing

Greg Nelson asks:

Do you think there will one day (hopefuly soon) be a way to set a font-size to be in direct relationship to the width of it’s parent element, or some other truly responsive measure? e.g. <p> font size could be a percentage of the width of a sidebar div it sits inside of, so that as screen width’s change (and width of sidebar changes, if it’s also a percentage of <body> width), the size of the font will change too?

Yep, that’s coming! You’ll be able to set font-size with vw and vh units. Those stand for “viewport width” and “viewport height”. 1vw = 1% of the current browser window’s width. Here’s the CSS spec for that. And here’s a tutorial on using them. This is how it will work:

At the time of writing this, there is only support in Chrome 20+ and IE 10. If you need full browser support now (and don’t mind using a bit of JavaScript), you can use FitText.js (best for headers only).

Media Query Efficiency

Mark Roland asks:

When organizing media queries in a CSS file, is there any advantage or disadvantage to how they are grouped?

For instance, is there a browser performance difference between using several media query blocks (e.g. “@media screen and (max-width: 480px) { }” ) so that element styles are defined together (header, nav, footer, etc.) versus placing all of the element styles for the specific media query into one single media query block?

The former allows for easier development, but costs increased file size. Are there browser rendering costs for redundant media queries?

Technically, probably yes. The worst offense is the extra file-size that it causes. Using one is clearly less text than using multiple. But the fact is if you gzip/deflate content (you probably are), that will eat that repetitive code for breakfast and it won’t even increase file-size too much. As far as CSS parsing time, that stuff happens so fast that you really don’t need to think about it.

So on a practical level: don’t worry about it. If you have some time to spend on making your website faster, losslessly optimizing your images will make a way bigger difference.

If anyone is confused on why Mark is asking this, it’s most likely because of the abilility that Sass and LESS have to “nest” media queries (see). This is a really neat feature that makes working with media queries a lot more clean an intuitive, as you the author. However, the final output results in many duplicated media queries. I know that addressing this issue is on the mind of the lead developer from Sass.

Onward!

Keep up the great questions, folks! Got a good one? Send it in, and we’ll be picking the best ones for the next edition.

Image source of picture on front page.


© Chris Coyier for Smashing Magazine, 2012.


Designing For Device Orientation: From Portrait To Landscape // UX Design For Mobile


  

The accelerometer embedded in our smart devices is typically used to align the screen depending on the orientation of the device, i.e. when switching between portrait and landscape modes. This capability provides great opportunities to create better user experiences because it offers an additional layout with a simple turn of a device, and without pressing any buttons.

However, designing for device orientation brings various challenges and requires careful thinking. The experience must be as unobtrusive and transparent as possible, and we must understand the context of use for this functionality.

Nearly all mobile and tablet applications would benefit from being designed for device orientation. This article covers some of the basic concepts that designers and developers can use to add device orientation to their process. We’ll present some of the challenges when designing for device orientation, along with some solutions.

Using Device Orientation For A Secondary Display

YouTube’s mobile application is a great example of device orientation design. Portrait mode offers a feature-rich interface for video discovery and the user’s account. Landscape mode provides an immersive experience with a full-screen video player and playback controls. When the video ends, the display switches back to portrait mode, prompting users to quickly tilt the device back and browse for additional videos.

However, using orientation to display a secondary interface can be confusing for users. For instance, in CardMunch (a business-card reader by LinkedIn), users can convert business-card images into address book contacts using the smartphone’s camera. Rotating CardMunch to landscape mode changes the interface altogether to a carousel overview of all of your saved cards.


YouTube’s mobile interface in portrait and landscape modes.

This interface lacks any visual clues about its orientation, and it has limited controls. You are unable to edit or add business cards, making the carousel screen somewhat frustrating and confusing, especially if you’ve launched the app in landscape mode. In addition, the lack of visual clues in this landscape mode will deter most users from rotating the device and discovering the app’s other features.


CardMunch by LinkedIn is missing visual clues about its secondary interface.

Categories Of Orientation Design

To help UX professionals and developers, I have categorized four main patterns of device orientation design.

Fluid

This interface simply adjusts to the new orientation’s size.


In Skype’s mobile interface, the icons change position when the screen moves from portrait to landscape.


Pocket’s mobile interface: same layout, different width.

Extended

This interface adjusts to the screen’s size, adding or subtracting layout components according to the dimensions of the chosen orientation. For example, IMDb for the iPad uses the wider screen in landscape mode to add a filmography on the left. This list is also accessible in portrait mode by clicking the “All filmography� button in the middle-right of the screen.


IMDb for the iPad.

Providing visual elements and functionality in any orientation ultimately gives convenience to the user. However, not forcing the user to hold the device a certain way is crucial, especially if the desired functionality does not appear in the default orientation.

Complementary

With this interface, a changed orientation triggers an auxiliary screen with relevant supplementary information. An example would be a mobile financial application that displays data in the default portrait mode, and then provides a visual graph when the user rotates to landscape mode. The orientations show similar or complementary data and depend on each other.


An example of a complementary design interface

Continuous

Like YouTube, a continuous design enables the user to access a secondary interface by a simple rotation of the device. An example would be using a smartphone as a remote control for a smart TV. Rotating the device to landscape mode would reveal a full program guide, while also maintaining functionality for changing channels, browsing programs and recording future episodes.


A smart remote and program guide.

Considering The Default Orientation

Above & Beyond is an interactive eBook for the iPad about the life and work of the American caricature artist John Kascht. The beautiful art in this book is displayed in both portrait and landscape modes. However, horizontal mode shows important interactive elements that do not appear in portrait mode, such as a way to return to the main menu. Portrait is the iPad’s default orientation, so including this type of added interactivity only in landscape mode might confuse many users.


A page from Above & Beyond. The interactive elements do not appear in the default portrait mode.

While portrait mode shows a detailed look at the art, and the interactive eBook provides some instructions at the beginning, a solution might be to allow users to tap the screen to reveal the menu. The default orientation for most smartphones and for the iPad is portrait. However, landscape is the default for Android, Windows 8 tablets and BlackBerry’s Playbook. To avoid confusion, remember that the primary orientation of your app should always serve the device’s default mode and functionality, not the other way around.

Understanding The Context

When designing an application for smart devices, consider the context and circumstances in which that application will be used, particularly when designing for device orientation. Case in point: interactive cookbooks have become very popular. Hardware and accessory manufacturers are creating devices to help us use the iPad in the kitchen, including a washable stylus for use while cooking.

We can use orientation to create a better experience in a cookbook. Using the iPad’s default portrait orientation, users can flip through the book and view the full recipe and ingredients list for a particular dish. Rotating the device to landscape mode will change the interface to a cook-friendly layout, with large buttons and step-by-step instructions. This cook-friendly interface would also prevent the tablet from auto-dimming, and it would allow users to flip pages by waving their hand in front of the built-in camera to avoid touching the screen with messy hands while cooking.


The Betty Crocker Cookbook for iPad is an example of a cook-friendly interface.

Understanding the context of the kitchen and how people cook with the iPad would make the interactive eBook much more functional. With the added consideration of device orientation, the user experience would be better overall.

Visual Clues About Orientation

An auxiliary screen or added functionality that depends on orientation can sometimes be counterintuitive. Without any visual clues in a particular orientation, a user might miss the added functionality altogether. A classic example of this is the iPhone’s built-in calculator, as pointed out in Salon’s post “How to Change the iPhone Calculator Into a Scientific Calculatorâ€� — functionality that many users do not know about.

When designing for device orientation, visual clues increase findability and makes the user experience intuitive and transparent. Below are a few examples of visual clues for device orientation.

Title Bar

Affixing the title bar to the top of the default position in either orientation is a subtle clue for the user to tilt their head (or device) to read the text in the bar. This technique is essential when using orientation for a secondary display and serves as a gentle reminder about the added functionality.

Note: This method will not give affordance to the added display in the default (portrait) orientation. In this case, I recommend coach marks, a quick tutorial or a walkthrough video (when appropriate) to illustrate that the application is using orientation for a secondary display.

Toggle Switch

Much like the universal icon for sharing or Apple’s familiar action button for sharing, I propose a standard icon to represent device orientation. You can download the icon shown below and use it freely.

The icon should appear at all times and be used as a toggle switch between orientation displays. Using the toggle would not require the user to rotate the device for the secondary view, but it would gradually encourage users to rotate the device to view the secondary interface without pressing the icon. Rotating the device back to the default orientation would automatically adjust the display. Ultimately, this icon would serve as a visual reminder for the added functionality; the user would not need to use this control to switch between orientation displays but would simply rotate the device instead.

Below are illustrations of this toggle icon in use:


Toggle button in the title bar.

If standardized, the orientation icon would give affordance and serve as a visual clue. Here is an illustration of this toggle icon in a corner triangle.


Orientation toggle in corner triangle.

Note: The device orientation icon is not a proven idea, and the value of adding this somewhat redundant UI control is debatable. However, in my opinion, the idea is simple and effective and would enable designers to more fully rely on device orientation to enhance and extend their applications. Hopefully, the proposals here will spark a conversation in the design community and lead to a solution whereby, with a simple turn of the device, essential functionality is added to any application.

The Drawer

The idea here is to show a drawer-like control that users can tap or swipe in order to see the secondary view. Rotating the device would automatically open the drawer, much like a curtain opening. By using an animation to open and close the drawer, the designer can create a memorable effect for displaying data based on orientation.


Illustration of a drawer control.

Conclusion

Designing for device orientation is not new. For example, when rotated to landscape mode, smartphones open a larger virtual keyboard, and the email applications in tablets switch to a master–detail interface. However, device orientation design is widely treated as secondary to the main interface because it is often missed by users who stick to the default orientation, mainly because they are not aware of its availability. By adding simple visual clues to the interface, UX professionals can make the case for using device orientation to enhance their products and, ultimately, for providing more engaging and user-friendly experiences.

(al) (il)


© Avi Itzkovitch for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress