BlogmyQuery – BMQ

Today’s post features a huge variety of high quality, high-resolution free professional textures. These texture packs range from wood, concrete and bokeh designs, to grunge, old film and rain drops. Whatever your project is, there is sure to be a suitable texture for you in this mega collection!

Whilst many free textures can be of a poor standard, all of today’s texture packs have been carefully hand selected because of their sharpness, clarity and great quality. Enjoy!

The Textures

Free High Resolution Textures – 14 Free Vintage Film Textures
This great set of textures features some super grungy photos of old film. These images come with rips, scratches and lots of other great textures for an authentic aged look.

Free High Resolution Fabric Texture Pack 2
A great free texture pack that is as diverse as it is vibrant. This collection of bright and bold fabrics is perfect for a home-made design.

Free Textures: Grab Bag 18
This varied assortment of free high-res textures features rust, rock and wooden textures. Each texture has a very natural feel to it, with plenty of details that result from nature. (free for personal usage, $9.99 for commercial use)

Free Textures: Orange
This texture set includes a series of images that allow an orange undercoat to show through when the overcoat begins to wear and crack. A really unique set of textures that should provide a lot of visual intrigue. (Note: requires email input to download)

Stained Concrete Texture Pack
A great texture set featuring 6 stained concrete images. These textures have a grungy style to them and are perfect for integrating into your backgrounds.

Nine in the Afternoon: Icon Textures Set
A really unique, dark and surreal texture set. This texture set contains 50 spooky icons with twisting shadows, cobwebs and dew drops. Unfortunately the icons are only 100X100px, but they are still perfect for avatar designs and other smaller compositions.

Wood Texture Pack
This high res texture pack contains 12 awesome textures, with a variety of wood types. The textures range from more man-made sections of wood, to very natural, rough bark textures.

Crumpled Paper Textures
A wonderful set of paper textures, that are made all the more interesting by their crumpled appearance. It’s great to see a variety of paper types, from plain, to lines, sketch-filled and yellow.

10 Free Hi-Res Light Grunge Textures
Usually grunge textures are very intense, dark and overbearing. It’s great to see Fudge Graphics offering this set of lighter grunge textures. They have a very plain, minimal feel and would work perfectly as an overlay to your existing designs.

High Res Colurfull Textures
These textures are really unique and have a bright, collaged feel to them. Highly creative and detailed they are perfect for your more hand-drawn, mixed-media style works. (Note: Requires email input to access.)

5 Beach Stone Textures
This wonderful texture set offers 5 super sharp stone textures, perfect for your more grungy, rustic designs. (free for personal usage, $9.99 for commercial use)

18 Hand stained & Colored Paper Textures
These stained paper textures are great for adding a creative backdrop to your graphics, providing a natural looking, messy background design.

33 Free Rust Textures
This set of rust textures is huge, and every texture is incredibly detailed. These images are perfect for a grungy design, and range from minimal, to extensive rust damage.

Grunge Plywood Textures
A great set of textures, these plywood images are as varied as they are detailed. The wooden surfaces are richly colored, to provide diversity and uniqueness for your designs.

Distressed Wood Texture Pack 1
This pack contains a wide variety of textures, ranging from tree cross sections to roughed up bark and wooden planks.

12 Free High Resolution Denim Textures
One of my favorite texture packs in this entire collection! These denim textures really expose the beauty of this fabric, and the pack comes with designs from the very simple to elaborate seams and detailing.

Grunge Concrete Textures
This awesome pack of concrete textures is usually premium, part of the Vandelay premier members area. However, Web Designer Depot have offered it for free (email address required for access).

94 Free Colorful Bokeh Textures
The mega texture pack contains nearly 100 free bokeh textures. These beautiful textures are very soft, and perfect for an attractive background graphic.

5 Rainy Window Textures
Need some textures for a gloomy day? These unique rainy window textures are great for adding water droplets as an overlay for your designs. (free for personal usage, $9.99 for commercial use)

Intense Dark Grunge Textures
This texture set is incredibly dark and moody, offering a range of heavily shadowed, rocky textures.

Old White Cracked Textures
This texture set is really unique, and has the appearance of something like bark. These cracked white surfaces seem perfect for a winter themed design, or for adding some extra detail to a design if used as an overlay.

Risk Textures
A really varied set of textures, with many giving the appearance of an alien surface, or something reminiscent of a nuclear warfare zone. Quirky and different, and perfect for adding a unique touch to your designs.

10 Digital Noise Textures
These textures are quite minimal, yet very detailed in that they contain lots of subtle scratches and marks. They are perfect for overlaying over your regular designs to add depth and detail.

9 Free High Resolution Metal Surface Textures
These metal textures aren’t just your standard metallic surface textures, instead including shots of cheese graters, industrial surfaces and metal bars.

25 High Res Storm Cloud Textures
Working on a design that needs a moody, stormy background? These storm cloud textures are perfect for bringing that atmospheric backdrop to your work.

25 Apocalyptic High Resolution Rust Textures
Apocalyptic is certainly the right word! These surface textures look like the result of a nuclear meltdown. Perfect for adding a rough, destructive feel to your designs!

20 High-Res Subtle Grunge Painting Textures
These textures are very subtle, with a faint grunge design being barely visible on some of them. They’re perfect if you’re looking to add a grungy element to your work that isn’t too obvious or overwhelming.

High resolution old paper textures
This great texture set draws images from a series of old envelopes and brown paper. It provides a welcome change from the regular white paper textures that are so readily available.

11 Free High Resolution Fabric Textures
A great selection of fabric textures ranging from knitting fabrics, to carpets and rugs. All of the textures are super high res and sharp/clean.

5 Antique Postcards
These textures have a really old time, authentic feel to them that simply can’t be captured through regular graphics. Integrating these images into your designs will really help to give it that antique appearance. (free for personal usage, $9.99 for commercial use)

High-Res Mixed Texture Pack
A lovely texture pack with a mixture of different designs. The textures range from dirty grungy to clean stones, tinted rocks and brick formations. Each texture has a vintage ‘instagram’ style to it, and is extremely high resolution.

Rough Cement Texture Pack
A nice variety of cement textures these textures range from cracked to smooth, speckled and destroyed. All of these textures have a very urban, manmade feel to them.

Wallpaper Textures (27 Images)
This great texture pack contains a series of wallpaper designs. These would be perfect for an interior designer’s mockups, or if you want to achieve a homely feel in your designs.

Green Leaves Texture Pack
This green leaves texture pack contains some very natural, verdant textures. These images are perfect for any nature themed designs and include a variety of leaf types sure to fit your needs.

Totally Rusty Metal Textures
Some of the best rust textures on the web! These textures are not only extremely high res, but superbly detailed and richly colored.

10 Free High Resolution Wood Textures
A wonderful range of clean wooden images. These textures don’t include more natural bark/tree types of wood, but include plenty of flooring and polished surfaces. Perfect for a cleaner, more elegant design!

30 High Res Foam Dot Textures
One of the most unique texture sets out there, the collection of foam ball close ups works really well to provide a unique, detailed background for your work.

10 Free High Resolution Grungy Surface Textures
This is a hugely detailed texture set featuring a variety of grungy surfaces, including old doors, metal grates, and wooden paneling.

5 Abstract Blue Textures
This texture set includes 5 high res textures featuring icy blue surfaces. These images have wonderful lighting and should provide plenty of depth for your designs. (free for personal usage, $9.99 for commercial use)

18 Essential Grunge Textures
These grunge textures from Lost and Taken are ideal for using as an overlay in your graphic design work, adding an extra level of detail and depth to it!

Favorite Textures?

We hope that you enjoyed this collection and bookmark it for future reference. We would love to know if you had a favorite set of textures. Let us know in the comments below and we can get a discussion going!

(rb)

I recently spoke with a prospective client who started the conversation by saying that he had called us because he was unhappy with his website’s current design and development team. Questioning what about his current team he didn’t care for, I discovered that it wasn’t the company’s product or its prices — he was satisfied with the work they did for him and felt that he was charged fairly for it. He was unhappy with their communication.

Communication Breakdown

Poor communication is a surefire way to damage any project or relationship, but when I dug deeper into this particular case, I realized that lack of communication was not the issue; the company provided regular updates on projects and milestones and so on. Rather, it was the words they used when giving those updates and answering questions. The problem was that the provider spoke “Web speak� and nothing else.

Communication will fail if your messages are confusing to your audience. (Image: Jon Wiley)

This isn’t the first time I’ve heard this complaint from someone when discussing their Web team. While they appreciate the provider’s knowledge of the profession and industry, they bemoan the reality that they cannot translate that knowledge into language that someone who is not a fellow Web professional would understand. While the updates may be plentiful, the communication is still poor.

Peer-To-Peer Communication

Those of us in the Web industry enjoy countless opportunities to exchange knowledge with our peers. From attending conferences and meetups to contributing to conversations on blogs to communicating on platforms such as Twitter and Dribbble — Web designers and developers can share information and learn from each other in a myriad of ways. The way we communicate in these circles, however, is very different from how we must communicate outside of them, even though we are often discussing the same topics.

The way we speak about issues such as browser inconsistencies and approaches such as progressive enhancement and responsive Web design must be tailored to the audience we are addressing. This is, of course, easier said than done. After speaking with our peers in technical terms that we all understand, how do we then alter our language and way of speaking to present a technical piece of information in a non-technical way? The truth is that, like everything else in our industry and in life, it takes practice.

Practice, Practice, Practice

Over the years, I have been told by a number of clients that they enjoy meeting with me and discussing their website because I “make it easy to understand.� I have been commended on presenting these technical concepts in a very accessible way and on the fact that it seems to come naturally to me. While I appreciate that my clients feel this way about my presentational skills, the truth is that I have worked hard to be able to talk in this way.

In this article, I will go over a few of the ways that have helped me adjust how I speak about what I do in order to better communicate with my clients. I will also address some warning signs of communication breakdown, as well as ways to get those conversations back on track if they do falter.

Business Second

I have long praised the benefits of having casual non-business conversations with clients. This practice also has a place here as you strive for more effective communication with clients. Too often, communication is strained from the start because a client fears you will speak to them in terms they do not understand. No one wants to appear confused or uninformed, especially in a business setting, and that type of anxiety can make a bad situation even worse. By starting a meeting off with light informal conversation, you help to minimize any anxiety the client may have and set the tone for the rest of the meeting. Additionally, you might learn something about the client or they about you, helping you to continue building a genuine, long-term relationship that goes beyond just the business you do together.

By starting out the conversation with something other than business talk, you enable the client to see you as someone other than just “their Web designer,� and you have a chance to break the ice and strengthen the relationship before the discussion turns to business.

Learn Their Language

While casual conversation is a good way to start a meeting, you will have to get to business sooner or later. To complement the technical explanations that you normally give, you could also learn your client’s language and speak to them in terms they understand and are comfortable with.

“Speaking their language� doesn’t mean adding horrible business jargon to your vocabulary. It just means understanding what is important to the client and speaking to those topics. By correlating technical information to their business goals, you will find that the message is much better received.

Understanding what is import to your clients and tailoring your communication to those needs will help get your message heard. (Image: darkmatter)

For example, you may be well versed in topics such as HTML5, CSS3, responsive design and so on, but you should go beyond the technical application of these topics. You must also know how they can be used to help meet the business goals of your clients. This is the language that clients speak. If you explain how CSS3 media queries enable a website layout to reflow according to screen resolution, creating a UX that is optimized for the user’s current environment, then you will usually be met with a blank stare. Instead, say that you will build the website to work well on a variety of devices, from large desktop monitors to handheld mobile phones, thus enabling the visitor to complete their task as easily as possible, whether that task is to read content, sign up for an account or make a purchase. Such tasks are the purpose of the website and are directly in line with your client’s business goals. By making it easy for people to complete those tasks with whatever device they are using at that time, you give the website the best chance to convert those visitors into actual customers.

In the end, you are still talking about responsive design and CSS3 media queries, but you are focusing on the business results instead of the technical execution required to achieve the results — and your client can certainly understand and get excited about business results.

Write Non-Technical Articles

As you begin to use new technologies and experiment with new techniques, one way to reinforce your learning is to write about it. Authoring an article helps you to fully think through the process. It can also generate conversation that furthers your knowledge of the subject. However, if the only articles you author are technical ones meant for other designers and developers, then you may be compounding the challenge of being able to communicate with a non-technical audience.

If you enjoy writing articles about Web design, try producing some that are geared to your clients or other business owners. By writing about the aspects of Web design in a non-technical, client-focused way, you can continue to explore the best way to present those topics. Over time, you will find that your explanations in the articles become part of your normal vocabulary with clients, giving you talking points that find their way into your meetings and conversations.

Teach What You Know

In addition to writing articles, also take your knowledge and experience to the classroom or stage and verbally teach what you know to others. The website design and development course that I have been fortunate enough to teach at the University of Rhode Island for the past few years has been an enormous help to my presentational skills. Being able to present technical information to students, a group that actually bridges the gap between technical and non-technical, has helped me find ways to discuss these topics in a manner that is accessible to beginners but also informative enough to be applied to the work they are doing.

Even if you don’t have the opportunity to teach a class at the university level, consider volunteering to lead a class on basic HTML and CSS at your local library or high school. The benefits you get from the experience will influence how you speak with clients and help you better present technical concepts in a way that is easy to understand, never condescending and always productive.

Communication Is A Two-Way Street

While these tips may help you improve your own skills, the fact of the matter is that quality communication is not one-sided. It has to flow in both directions: from you to your clients and from your clients back to you. Part of your job is not only to improve your own skills, but to ensure that your client’s are up to snuff as well.

Communication is a two-way street between you and the client. (Image: Jerad Heffner)

Here are a few things to look out for on your client’s end of the conversation.

Lost In Translation

When kicking off a project or speaking with a prospective client, one of the first things you should do is determine who you are speaking with and what their role in the project will be. Are they a decision maker with the authority to provide quality feedback on the project, or are they a messenger? If you are dealing with someone who is essentially a go-between, then you run the risk that your words will be mangled when recounted to the actual decision makers or that their words will be mangled when recounted back to you. This is a recipe for misunderstanding and tension.

This scenario is especially common when dealing with large companies in which meeting with the decision makers is very hard to arrange. Still, you should be pushing for this. Key decision makers must be present at key meetings and presentations in order to maintain quality communication. This might sound strict and a bit unrealistic, but anything less will not do, and this is what you should demand. Explain that you understand that their schedules are tight — yours is as well — but developing a successful solution will be a team effort, and key personnel from both sides must be in contact with each other directly for it to work. This doesn’t mean that C-level executives need to be at every meeting, but it does mean that you shouldn’t be meeting with only a messenger.

The success of a project is directly related to the quality of the communication during the process. Make sure you are speaking with the right people during it.

Responding Before Reading

Feedback given in a project will often contradict previous feedback or decisions. In some instances, this happens because the client gave that initial feedback hastily without fully understanding the nature of the issue or the decision being made. Whenever this happens to me, it is almost always because an email was not fully read and the reply was sent too quickly.

Email is a necessary form of communication, but it is also easy to rush through and even dismiss entirely. If you rely solely on email or another kind of digital communication, then you risk the conversation breaking down.

Pick up the phone or schedule an in-person or video meeting to review and decide on key points in the project. Dismissing a conversation is much harder in a meeting than when opening one of the hundreds of emails they likely get each day. If you require digital communication as a record of the decisions made, then you could certainly follow up on the meeting with a recap of what was discussed and decided. Meeting to make decisions and then using email to recap and reinforce those decisions lead to fewer misunderstandings caused by hurried responses from a distracted team.

Late to the Game

Another scenario to be mindful of is when someone jumps into the communication loop deep into the project. Even if you have excellent documentation on the decisions and communication that have happened so far through project management software like Basecamp, these late additions to the group will rarely be able to assimilate all of the information that has been accumulated, meaning their feedback and comments will not have the benefit of this historical knowledge. This can be dangerous. The new team member will often want to make an impact on the project, but if they do not understand the decisions that have been made thus far or why they have been made, then they could easily derail the project. Of course, you want to avoid this.

If a new member does jump into the project, bring them up to speed and direct their enthusiasm in a positive way. Schedule a meeting or a call with them and perhaps one or two others from the team, just to “get up to speed.� Explain what the team has decided so far and detail what the next decision points are and how their input into those upcoming decisions will be helpful.

By directing their enthusiasm at upcoming decisions instead of back to previous decisions, you enable their contributions to help, rather than hinder, the project.

Paying Attention To The Signs Along The Road

Despite your best efforts, there will always be times when communication breaks down and the project is put at risk because of it. While working to avoid those breakdowns is important, being able to identify them and recover quickly is just as important.

Paying attention to signs along the road will help you determine whether you are traveling at a comfortable speed or need to proceed with caution. (Image: Eric Bjerke)

Obvious signs of strained communication in email include expressions of frustration, clearly miscommunicated messages and decisions that contradict previous conversations. When you see these emails, do not reply to them to “set the record straight.� Pick up the phone and do it. When communication is already strained, a flurry of emails back and forth usually does little else than compound the frustration. Once again, this is where an in-person or video meeting helps.

By discussing the issue verbally, you stand a much better chance of resolving it and getting everyone back to healthy communication. Regularly scheduled meetings are great, but if you notice signs of miscommunication, don’t wait until the next one happens; ask for a quick call or meeting to address the issue immediately.

Quality Communication For All

Communication skills do not benefit Web professionals alone. They apply to anyone, from any industry or business, who has to communicate with others. No matter what business you are in, healthy communication skills will help you do it better. Fittingly for an article about conversation, I invite your contribution to the discussion:

What ways have you found to improve communication with your own clients?

(al) (il)

© Jeremy Girard for Smashing Magazine, 2012.

Howdy, folks! Welcome to the new incarnation of Smashing Magazine’s Q&A. It’s going to work 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 be a question about a philosophical approach. We’ll take all kinds.

We’ve done a bit of this kind of exchange before with a wider scope, so if you enjoy reading the Q&A, check out my author archive for more of them.

Designing For Email

Andrejs Abrickis asks:

“Sometimes I face trouble with HTML email design and the proper CSS code. It takes quite a lot of time to make it cross-client compatible. I would like to know your opinion about the best CSS reset that could help to speed up email newsletter development. Is there any good tool for testing HTML emails?”

First and foremost, I recommend keeping emails very simple. Ask yourself what the primary message of the email is and how well the current design of the email is serving that. Could it simply be text? Would it be better if it was text? I find that’s often true.

If you are certain you need to make an HTML email, I’d again error on the very simple. An idea I’ve been toying around with is making the email design the size of a portrait smartphone layout. That constraight forces you to think about the message again, enforces simplicity (and as a side bonus, will look good on both mobile and desktop clients). When is the last time you got an email and thought: “Man, I wish this email was more complicated!”

HTML Email Boilerplate provides a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc.

But you wanted to know about cross-client compatibility and testing. Do check out the HTML Email Boilerplate. It was created in the same spirit as the HTML5 Boilerplate in that it addresses all the various quirks across email clients and gives an example of a very minimal structure by which to start. I’ve tried to use it as is, but I have to admit that I found it a bit too much for the simple email work I was doing. More complex and varied emails will certainly benefit from it and it’s also certainly a great reference for snagging quick problem-solving bits of code.

The two simple rules of thumb for HTML email development are:

1. Use tables for layout. This is still the most sturdy layout method for cross-client.
2. Inline style everything. Any other CSS support is spotty.

Designing using inline styles is a big pain in the butt, so I’d recommend developing with a <style> block in the <head> for your CSS. Save that as your development copy, and then just before deployment, run it through MailChimp’s Automatic CSS Inliner Tool which will do the dirty work of inline styling everything for you.

Speaking of MailChimp, you might want to consider just using their service to build and deploy emails. Their templates are already cross-client compatible (plus they have a testing service). Their designer tool is easy to use and helps you through the process. Not to mention, you get all these other huge benefits like better deliverability that you can’t get on your own, statistics, support, and many more features. Sorry if that sounded like an ad, but I’m all about using services that make our lives easier and better as developers.

MailChimp isn’t the only service on the block either, Campaign Monitor is also great, and do great things for the developer community, including maintaining this epic chart of CSS support for email clients.

CSS support on Campaign Monitor.

Type On A Grid

Maxime Parmentier asks:

“I was wondering how you keep a consistent line-height in every element of your page? It’s much more difficult than it sounds in practice. Any tools or techniques that you can recommend?”

Often times that practice is called maintaining a “baseline grid.” Here’s a demo from a Richard Rutter article. And another demo from a Wilson Miner article. I’ve played with it myself a bit.

Dave Rupert offers a talk about responsive design, where he discusses how ems are useful for baseline grids because they are based on ratios. He also talks about how they are particularly good in the math-ridden world of responsive design. Here’s an example by Dave of type lining up nicely to a grid that also accommodates some of the weirdness of different-sized headers.

View this example.

There is a book by Khoi Vinh all about grids (including type grids) called Ordering Disorder: Grid Principals for Web Design. Khoi teaches all about grids but is clear that you don’t have to be dogmatic about them. Breaking the grid sometimes is OK, as long as you come back to it. I think one nice metaphor he mentions is about syncopation in music—the rhythm is broken on purpose during a song, so that when it kicks back in, it’s noticed and feels good.

Centering And Resets

Smarajit Dasgupta asks:

“1. What is a decent browser-compatible way to center floated (or inline) elements like buttons and links in flexible (or unknown) width scenarios?

2. What is your preferred CSS reset in the HTML5 age? Do you still advise the usage of the great Eric Meyer’s reset, which pretty much strips all the browser-induced styles for elements? Or do you use something such as normalize.css or write your own on a case basis?”

1. Inline elements are easy to center, as they respect the text-align value of the parent, which you can set to center. So say you have a bunch of anchor links in a row, you’d just wrap them in a nav element and apply the center text alignment to that (like this). If you need them to behave a bit more like block level elements (e.g. be of a set width or height), you can make them display: inline-block; and they will still stay centered (like this).

Unfortunately you can’t center a floated element. I’m not surprised really, as the “what happens if” scenarios surrounding that are too many to count. But just for funzies, let’s say you had two columns of text and you wanted to “center float” an image between them, meaning that the text in the left column would wrap to the left, and the text in the right column would wrap to the right. You can “fake” this by positioning two elements half the size (might as well be pseudo elements, because they have no semantic meaning) on the right-side of the left column and left-side of the right column. A picture is easier to understand:

The floating kitty demo.

Then you would place the element in the space that makes sense (probably with absolute positioning). More about this idea here.

2. I like normalize.css. I don’t like the idea of stripping things away just to put them back. So my process is to take a copy of normalize.css, not remove anything, but change some declarations to my liking (which still ensures consistency, because you are being explicit). Then include that in my global style sheet like I would include a reset, and go from there.

Opacity Blues

Chris Klein asks:

“How do I stop inheritation of opacity? I can’t use another png with 50% opacity and higher z-index above it as the layout has to stay 100% liquid. Also, I tried to insert spans between the box with opacity and the following boxes—but the opacity still is inherited to all other boxes it follows. Even if the following boxes claim opacity: 1;, it doesn’t matter, inheritation goes on.”

There are a lot of little bits in there that make me wish we could look at the exact layout you’re working with. If the backgrounds in question are flat colors, just use RGBa or HSLa. These are both color value types you can use to declare an alpha value, which essentially means “what percentage transparent is this color?”. For instance rgba(255, 0, 0, 0.5) means “50% red”. This makes a lot more sense than using actual opacity on element, which as you know, affects everything inside (not just the background).

As you also know, opacity affects all child elements and you can’t fight against it by setting a child element’s opacity higher (the child does have full opacity by default, it’s just within a parent that doesn’t). It is like that for good reason. We would be much worse off if, in order to fade out an area of a website, we had to select theoretically infinite child elements and fade each individually.

If the background in your design isn’t a flat color, you can join the club for wishing there was a background-opacity property. One thing you may want to try are pseudo elements. Leave the main element at full opacity, but apply ::before and ::after selectors that you position as needed and apply opacity to those. Nicolas Gallagher has a demo of that.

The Jupiter oppacity demo.

Border-Radius On Images

Donovan Hutchinson asks:

“Why isn’t it possible to directly apply border-radius to an image? And is the best approach to use a wrapping div?”

It is possible! You apply it just like you think you would:

img {
  border-radius: 10px;
}

Border Radius demo.

I think there was some confusion on this for a while, because in the not-so-distant past, Firefox 3.6 required the use of -moz-border-radius for rounded corners, and that implementation didn’t work on images. IE9 was the first version to support border radius and it does so un-prefixed and perfectly fine on images so even IE isn’t a concern here.

If you absolutely need Firefox 3.6 (and down) support (1.55% global usage and falling fast), yep, like you mentioned, you can get it by using a div instead and setting the background-image of the div to the src of the image. You would do that in your template wherever it spits out that URL (or if that’s not possible, with a bit of jQuery):

$("div.avatar").each(function() {
  var el = $(this);
  var url = el.find("img").hide().attr("src");
  el.css("background-image", "url(" + url + ")");
});

Spotting Bad Code

Michael Zanzini asks:

“How can you tell if your CSS code smells? What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? What do you look for in the code to determine how good or bad it is?”

The most obvious way to tell: does the website look all screwed up? Then it’s bad CSS. If the website looks perfect, then it passes the first test.

The next thing I’d look for without getting too down and dirty is the formatting. I wouldn’t care about trivial things like tabs or spaces or spacing after selectors, but instead general cleanliness and consistency. Does it look like they have a style that they adhere to, or is it sloppy and random? Clean code is a sign of a respectful developer. It’s not proof the code is good but it’s a good start. Mind you, you should be looking at the authored CSS, not deployed CSS, as that could be altered during a build process.

After those rather obvious things, you’ll have to get mentally more into the code. Read through it. Do the selectors look nice and rational (e.g. nothing too ridiculously specific like .article #comments ul > li > a.button)? Does there appear to be an awful lot of repeated code (e.g. the same complex box-shadow declared 15 times)? Is it absolutely enormous (e.g. 100k would be be absolutely enormous, as a check)?

The last thing I might do is try and test understandability by running a personal test. Assuming that you are half-way decent at CSS yourself, think of a small task you might need to do on the website. Adjust the colors and spacing of a particular header. Try and do it. Was it easy? Good. Was it hard to figure out? Not good.

Submit Your Question!

Keep up the great questions, folks! Got a good one? Submit your CSS question via our form, and we’ll pick the best for the next edition. So long!

(jvb)

© Chris Coyier for Smashing Magazine, 2012.

On 27 July this Summer, athletes from 204 countries from around the world will head to London for the 2012 Summer Olympics. With social media integrated into everyone’s lives, this years Olympics looks set to be the most recorded and most talked about Olympics since the great spectacle was reintroduced in Athens in 1896.

Today we would like to share with you 28 centerpiece Olympic stadiums. These stadiums, while used for the opening and closing ceremonies of the Olympics, are also traditionally used for other athletic events as well. Due to this, they are the focal point of many large and historical events and usually have the largest capacity of all stadiums used in the Olympics.

From the stadium at Olympia to the newly built Olympic Stadium in London, we hope you enjoy our list of Summer Olympic stadiums.

Stadiums of the Olympiads

1. Stadium at Olympia – 5th century BC Olympia

The stadium at Olympia hosted many events from the ancient Olympic Games. In its day around 50,000 spectators would sit in mud seats on the grass slopes that looked upon the main field. A stone platform was placed in the Southern slope for judges. The shot put events for Athens 2004 were also held here.

2. Panathinaiko Stadium – 1896 Athens

Panathinaiko hosted the first modern Olympic games when they were reintroduced in 1896. It was also used for Archery in the 2004 Olympics (Athens) and as the finish line for the marathon.

The stadium looks as impressive as it did 116 years ago despite its age. Between the 5th and 4th century BC the stadium had wooden seating. It was improved in 140 AD to a capacity of 50,000 seats and was built entirely from white marble from the nearby Penteliko Mountain. To this day no other stadium has been built entirely from marble.

For the 1896 Olympics the capacity was increased again to 80,000 though today the capacity is 45,000. Panathinaiko has stood the test of time and remains one of the best looking stadiums in the world.

3. V̩lodrome de Vincennes Р1900 Paris

Initially built as a velodrome (cycling track) in 1894, the Vélodrome de Vincennes was used as a the main stadium for the 1900 Olympics in France and had a capacity of 50,000. Most centerpiece stadiums host athletic events though for the 1900 Olympics athletics were held in the nearby Stade Yves-du-Manoir stadium that football club Racing Levallois 92 used. Whereas other events such as cycling, rugby and gymnastics were held at the Vélodrome.

The Olympic games were held in conjunction with the world fair that was held in Paris that year. Bizarrely, the organizers downplayed the Olympics so much that many competitors apparently didn’t even realize they were participating in the games. The games are remembered as being the first time women participated in events.

4. Francis Field – 1904 St. Louis

Like the 1900 Olympics, St. Louis had a world’s fair going on in the same year and just like in Paris 4 years before, the Olympics were overshadowed by the world’s fair.

The Francis Field stadium was built for the world’s fair and then used as the main stadium for the Olympics. It originally had a capacity of 19,000 but this was reduced in the 1980s to only 4,000. Along with the games in Paris in 1900, the 1904 Olympics are regarded as one of the worst events held under the Olympic banner.

5. White City Stadium – 1908 London

The 1908 games were originally supposed to go to Rome but London got them instead on short notice due to Rome not being prepared. One of the reasons London was easily ready was due to the ‘The Great Stadium’ in White City (London). It had been built for the Franco-British exhibition in 1908 and was perfect for such an event. With a capacity of 68,000 it was considered one of the most advanced stadiums of its time.

The stadium was host to a lot of historic events. Over its lifetime it was used for greyhound racing, speedway, rugby and one of the matches in the 1966 FIFA World Cup. Sadly, the stadium was demolished in 1985 and replaced by a series of buildings for the BBC.

Photo Credit: Telegraph

6. Stockholms Olympiastadion – 1912 Stockholm

The 1912 games were the first Olympics to have competitors from all 5 continents. The main stadium that was used for the event was the Olympiastadion. It was designed specifically for the 1912 games, and with a capacity of around 14,000, it is one of the smallest stadiums ever used in the Olympics.

The stadium would later host the equestrian events for the 1958 Olympics in Melbourne due to Australian quarantine rules. It has also hosted a lot of football and athletic events and concerts for The Rolling Stones, Michael Jackson and Bruce Springsteen.

7. Olympisch Stadion (Antwerp) – 1920 Antwerp

Due to the 1916 Olympics being cancelled due to the ‘Great War’, the 1920 games were awarded to Antwerp in memory of victims lost there during the conflict. The Olympisch Stadion, sometimes referred to as Kielstadion or simply Kiel, was built specifically for the games. Back then it had a capacity of around 30,000 but over the years the stadium capacity was reduced. Today it can accommodate just under 13,000 people.

8. Stade Olympique Yves-du-Manoir – 1924 Paris

Having been used for athletic events for the games in 1900, Stade Olympique Yves-du-Manoir was an obvious choice as the centerpiece stadium for the 1924 event. It had a capacity of around 45,000 during the events but has since been reduced considerably. The now familiar closing ceremony was first introduced at these games.

9. Olympisch Stadion (Amsterdam) – 1928 Amsterdam

Another stadium that was designed specifically for the Olympics. It had a capacity of 31,600 when it was first built, though 9 years later a second ring of seating was added to the stadium, increasing the capacity of the ground to 64,000.

The Olympic flame was lit for the first time at the 1928 games.

10. Los Angeles Memorial Coliseum – 1932 & 1984 Los Angeles

Created in memory of those who died in World War I, the stadium was completed in 1923 with a capacity of 75,144. With the stadium being used as the main stadium for the Olympics in 1932, it was upgraded in 1930 to a capacity of 101,574. Despite the stadium being built in a remote area of California, over 100,000 people attended the opening ceremony.

The Los Angeles Memorial Coliseum was used again for the 1984 Olympics, making it the only stadium in the world to host the Olympics twice. It has also hosted the Super Bowl and World Series.

11. Olympiastadion (Berlin) – 1936 Berlin

Berlin was chosen as the host city of the Olympics for 1916 but due to the war the games were cancelled. They later got the games in 1936. For the 1916 games the Germans built the Deutsches Stadion, which had a capacity of 64,000. That stadium was demolished in 1934 and replaced with the Olympiastadion for the 1936 games. It had a capacity of a whopping 110,000 and a special stand was built for Adolf Hitler.

The games were the first to be broadcast on television. Those who watched would have witnessed Jesse Owens winning 4 gold medals with trainers made by Adi Dassler (creator of Adidas).

12. Empire Stadium – 1948 London

Due to World War II, the 1948 Olympics in London were the first for 12 years. Once again London had been called upon with short notice to host the games. Empire Stadium, which was completed in 1923, was used as the centerpiece stadium. Most will know the stadium by the name it was later adopted – Wembley Stadium. The stadium had a capacity of 82,000 during the games.

Wembley, as it was later called, is synonymous with football and is famous around the world due to the games that were held there. It hosted the 1966 FIFA World Cup final, 1996 European Cup Final and 5 European Cup finals. It also hosted countless events and concerts. It was demolished in 2003 to make way for the new Wembley stadium.

Photo credit: Daily Mail

13. Olympiastadion (Helsinki) – 1952 Helsinki

The Olympiastadion was finished in 1938 in time for the 1940 Olympic games. Due to war, the games did not proceed, though Helsinki were awarded the Olympics for 1952. During the games the stadium had room for over 70,000 people though today the capacity is around 40,000. It remains the largest stadium in Finland.

The 1952 games were the first to include Israel and the Soviet Union, who would go on to dominate gymnastics for many years.

14. Melbourne Cricket Ground – 1956 Melbourne

The Melbourne Cricket Ground, often shortened to the MCG, is one of the oldest modern stadiums in the world. It was originally built in 1954 with just a wooden stand and subsequently upgraded on numerous occasions over the following 100 years. By the time the ground was used for the 1956 games, 103,000 were in the stadium to watch the opening event. Today the capacity remains just over 100,000.

Closely beating Buenos Aires in the vote, Melbourne was the first Olympics held in the Southern hemisphere.

15. Stadio Olimpico – 1960 Rome

Opened in 1937, the Stadio Olimpico is the home stadium of football clubs Lazio and Roma. When the stadium was used for the 1960 Olympics it had a capacity of 65,000 though today it has room for over 7,000 more people.

The games are famous for a boxer named ‘Cassius Marcellus Clay’ winning gold in the light-heavyweight category.

16. National Olympic Stadium – 1964 Tokyo

Opened in 1958, the Olympic stadium was first used for the 1958 Asian Games and was later used for the 1964 Olympics. It has a capacity of 57,363. The stadium will be used for the 2019 Rugby World Cup and with Tokyo one of three cities in line for the 2020 Olympics, there is a possibility that the National Olympic Stadium will be the centerpiece of the Olympics again.

The 1964 event marked the first time the games had ever been held in Asia.

17. Estadio Olímpico Universitario – 1968 Mexico City

Opened in 1952 with a capacity of 70,000, the Estadio Olímpico Universitario was upgraded to accommodate 83,700 spectators for the 1968 games. Today the stadium has a capacity of 63,186 and is home to American football team Pumas Dorados de la UNAM and football team Pumas de la Universidad.

Mexico City proved to be a controversial choice for many athletes due to the city’s altitude of 2,300 metres above sea level. This proved to be a big problem for long distance runners and others in endurance events.

18. Olympiastadion München – 1972 Munich

The former home of football teams Bayern Munich and TSV 1860 Munich, the Olympiastadion was initially built with a capacity of 80,000. In addition to the 1972 Olympic games, this beautiful stadium also hosted the 1974 FIFA World Cup Final, 1988 European Cup Final and European Cup Finals in 1979, 1993 and 1997.

Sadly, the 1972 games will always be remembered with the terrible acts of the terrorist group Black September in which two Israeli athletes, nine hostages, one policeman and five terrorists were killed.

19. Olympic Stadium / Stade Olympique – 1976 Montreal

Built as the main stadium for the 1976 Summer Olympic Games, the Olympic Stadium in Montreal, also known as ‘The Big O’, has one of the most unique designs in Olympic history. The design was one of the main causes for the stadium not being completed in time for the games. When the games opened it had a capacity of 58,500 though the planned roof was not added until several years later.

22 African countries boycotted the games due to New Zealand attending as their Rugby team had toured apartheid South Africa.

20. Luzhniki Stadium – 1980 Moscow

A grand stadium that was opened in the Summer of 1956. During the 1980 Olympic games, Luzhniki Stadium had a capacity of 103,000 though today the capacity has been reduced to 78,360. The stadium will be used for the final of the 2018 FIFA World Cup.

The USA boycotted the 1980 games in protest of the Soviet invasion of Afghanistan.

21. Olympic Stadium (Seoul) – 1988 Seoul

Used for the 1986 Asian Games and 1988 Olympics, the Olympic stadium initially had a capacity of 100,000. It has since been reduced to around 70,000.

The 1988 games are remembered for Ben Johnson setting a world record in the 100 metres, only for it to be revoked after he tested positively for steroids.

22. Estadi Olímpic Lluís Companys – 1992 Barcelona

The Estadi Olímpic Lluís Companys was built in 1927 for the international expo that was being held two years later. It was also used for Barcelona’s bid for the games in 1936 though they lost out to Berlin. The stadium was renovated for the 1992 Olympic games. Today it has a capacity of around 56,000 but during the games it had a capacity of just over 67,000. It has been used for a lot of large football events and concerts over the years.

23. Centennial Olympic Stadium – 1996 Atlanta

A great looking stadium that was built specifically or the 1996 games in Atlanta. For the games the ground had a capacity of 85,000.

The stadium was later renamed Turner Field and is home to the baseball team the Atlanta Braves. As a result of this its capacity was reduced over the years.This was clearly planned from the start as the stadium has a similar design to most baseball grounds. Today the stadium can hold 49,586 spectators.

24. Stadium Australia – 2000 Sydney

In 1956 Australia used a stadium which could accommodate 100,000 people in Melbourne. When the games were held in Sydney in 2000 they built a stadium which had a capacity of over 110,000. Stadium Australia is nothing short of impressive and is the largest stadium ever used in the Olympics.

25. Olympic Stadium (Athens) – 2004 Athens

In 2004 the Olympics finally returned to Athens. This time the newly renovated Olympic Stadium was used instead of Panathinaiko Stadium as the main venue. The Olympic Stadium had a capacity of 71,030 during the games though the official capacity for football games is 75,000 (it is a 5 star UEFA approved stadium).

The stadium is used as the home ground of all three football teams in Athens: AEK Athens, Panathinaikos and Olympiacos Piraeus.

26. Beijing National Stadium – 2008 Beijing

Known as the ‘Bird’s Nest’, Beijing National Stadium is a beautiful design that captured the world’s attention. It initially had a capacity of 91,000 but this was reduced to 80,000 after the 2008 Olympic games.

The games were the most watched to date with over seven hundred million people watching the events worldwide.

27. Olympic Stadium (London) – 2012 London

This Summer the world will be watching as London hosts the 2012 Olympic games. The newly built Olympic Stadium was built on an island and has a capacity of 80,000.

With many cities struggling to find a use for stadiums after the Olympics are finished, a lot of thought went into how the stadium would be used in 2013 and beyond. The bottom tier of the stadium accommodates 25,000 people whilst the top tier can hold 55,000 people. This top layer can be removed or modified easily later to reduce the capacity of the stadium if necessary.

Currently there are a lot of different parties bidding to use the stadium including the football teams West Ham and Tottenham Hotspur. As yet, no decision has been made as to who will own the stadium and how it will be used after this Summer’s games.

28. Estádio do Maracanã – 2016 Rio

The world famous Maracanã will host the 2016 Olympic games in Rio. The stadium was opened in 1950 in time for the 1950 FIFA World Cup. That years’ final between Brazil and Uruguay had an unbelievable 199,854 people inside the stadium watching.

The current capacity is 92,000. Rio is also hosting the 2014 FIFA World Cup so is making some improvements for these events. The roof is being extended in order to cover all seats in the stadium and the seating arrangement inside is being changed (which may change the capacity of the stadium).

Let the Games Begin

That finishes up our side of the collection and history of Olympic stadiums, so now we turn the post over to you. Which out them all is your favorite Olympic stadium, and why? Use the comment section to share your thoughts.

(rb)

Mobile users and mobile usage are growing. With more users doing more on mobile, the spotlight is on how to improve the individual elements that together create the mobile user experience.

The mobile user experience encompasses the user’s perceptions and feelings before, during and after their interaction with your mobile presence — be it through a browser or an app — using a mobile device that could lie anywhere on the continuum from low-end feature phone to high-definition tablet.

Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. It is complicated in part by mobile-specific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hard-to-identify-but-ever-changing mobile context.

Dissecting the mobile user experience into its key components gives us a conceptual framework for building and evaluating good mobile experiences, within the context of a user-centered approach to designing for mobile. These components shape the mobile user experience — including functionality, context, user input, content and marketing, among others.

The relevance of these elements will change depending on the type of device (feature phone versus smartphone versus tablet) and the presentation interface (app versus Web). This article briefly describes each of these elements and elaborates on each with selected guidelines.

Functionality

This has to do with tools and features that enable users to complete tasks and achieve their goals.

Guidelines

• Prioritize and present core features from other channels that have especial relevance in a mobile environment. For an airline, this includes flight statuses and flight check-ins. For cosmetic chain Sephora, it includes supporting in-store shopping via easy access to product reviews on mobile devices.
• Offer relevant mobile-only functionality (like barcode scanning and image recognition), and enhance functionality using the capabilities of mobile devices where possible to engage and delight users. Old Navy’s app serves up surprise games or savings when users snap the logo in a store.
• Ensure that fundamental features and content are optimized for mobile. For example, make sure the store locator shows the nearest stores based on the device’s location, and make the phone numbers click-to-call.
• Include features that are relevant to the business category. For retail websites and apps, this would include product search, order status and shopping cart.
• Offer key capabilities across all channels. Users who sign in should see their personalized settings, irrespective of the device or channel being used. If certain functionality is not offered on mobile, then direct users to the appropriate channel, as TripIt does to set up a personal network.

  

Additional Reading

• “Sharing App Bump 3.0 Slashes Most Features, Proves Less Really Can Be More,â€� Fast Company

Information Architecture

This has to do with arranging the functionality and content into a logical structure to help users find information and complete tasks. This includes navigation, search and labeling.

Guidelines

• Present links to the main features and content on the landing page, prioritized according to the user’s needs. Mobile Design Pattern Gallery has examples of primary and secondary navigation patterns for mobile, many of which are vertical instead of horizontal as on desktop websites.
• Enable mobile users to navigate to the most important content and functionality in as few taps or key presses as possible. Navigation optimized for small screens is usually broad and shallow instead of deep. While three clicks (or taps) is not the magic number, users need to be able to recognize that each tap is helping them complete their task. Every additional level also means more taps, more waiting for a page to load and more bandwidth consumed.
• Address the navigation needs of both touchscreen and non-touchscreen users. When designing for touch, make sure the tap size of the navigation item is at least 30 pixels wide or tall. Provide keypad shortcuts for feature phones, so that users can enter, say, a number (0 to 9) to quickly access a link:

  
  Cater to feature phone users, as CNN does with access keys (left), not as Delta does by making the first action to be nine key presses downs (middle and right).

• Provide navigational cues to let users know where they are, how to get back and how to jump back to the start. Mobile breadcrumbs are often implemented by replacing the “Backâ€� button with a label showing users the section or category that they came from. For mobile websites, use standard conventions, such as a home icon that links back to the start screen, especially when navigation is not repeated on every screen.
• Use concise, clear, consistent and descriptive labels for navigation items and links. While always a good practice, it becomes even more important on tiny mobile devices.

Additional Reading

• “Chapter 1: Navigation,â€� Mobile Design Pattern Gallery, Theresa Neil

Content

Otherwise known as “the stuff on your website� (as Lou Rosenfeld and Peter Morville refer to it in Information Architecture for the World Wide Web), content is the various types of material in different formats, such as text, images and video, that provide information to the user.

Guidelines

• Present an appropriate and balanced mix of content to users (product information, social content, instructional and support content, marketing content).
• Use multimedia when it supports the user’s tasks in a mobile context, adds value to the content or supports the goals of the website. Most of the time, multimedia content is best provided when the user is looking for distraction or entertainment (such as news or funny clips) or when it has instructional value (for example, how to use an app or new feature).
• Always give the user control over multimedia content by not auto-starting video or sound, by allowing the user to skip or stop multimedia content and by being mindful of the bandwidth it takes up.
• Ensure that content is mobile appropriate. Just as we had chunking guidelines when going from print to Web, copy should be written for shorter attention spans on mobile devices. Optimize images and media for the device; this means scaling down for smaller devices and making sure images are sharp enough for the new iPad.
• Ensure that primary content is presented in a format supported on the target device. Even now, websites such as Volkswagen’s ask iOS users to download Flash.

  

Additional Reading

• “Mobile Content: If in Doubt, Leave It Out,â€� Jakob Nielsen, Alertbox
• “Mobile Content Strategy Link-o-Rama 2011,â€� Karen McGrane

Design

This has to do with the visual presentation and interactive experience of mobile, including graphic design, branding and layout.

Guidelines

• Remember the sayings “Mobilize, don’t miniaturizeâ€� (popularized by Barbara Ballard) and “Don’t shrink, rethinkâ€� (of Nokia). Both make the point that mobile design should not just rehash the desktop design.
• Design for glanceability and quick scanning. Glanceability refers to how quickly and easily the visual design conveys information.
• Maintain visual consistency with other touchpoints and experiences (mobile, app, Web, print and real world) through the use of color, typography and personality. Identifying Amazon in the stack below is easy even though the brand name is not visible.

  

• Guide users from the initial and most prominent element of the design to other elements to help them complete their tasks. This is known as visual flow. A good design brings together visual elements as well as information architecture, content and functionality to convey the brand’s identity and guide the user.
• Consider both portrait and landscape orientations in the design process. Devices increasingly support multiple orientations and automatically adjust to match their physical orientation. Maintain the user’s location on the page when they change orientation. Indicate additional or different functionality in the new orientation if applicable, as shown by ING:

  

Additional Reading

• “Designing Glanceable Peripheral Displaysâ€� (6 MB, PDF), Matthews, Forlizzi and Rohrbach, UC Berkeley
• Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design, William Lidwell, Kritina Holden, Jill Butler

User Input

This has to do with the effort required to enter data, which should be minimized on mobile devices and not require the use of both hands.

Guidelines

• Limit input to essential fields. Or, as Luke Wroblewski says in his book Mobile First, “When it comes to mobile forms, be brutally efficient and trim, trim, trim.â€� Limit registration forms to the minimum fields required, and use shorter alternatives where possible, such as a ZIP code instead of city and state. My favorite offender of this guideline is Volkswagen’s form to schedule a test drive; the mobile form has more required fields than the desktop version (the extra fields are highlighted below):

  

• Display default values wherever possible. This could be the last item selected by the user (such as an airport or train station) or the most frequently selected item (such as today’s date when checking a flight’s status):

  

• Offer alternate input mechanisms based on the device’s capabilities where possible. Apps take advantage of quite a few input mechanisms built into devices, including motion, camera, gyroscope and voice, but mobile websites are just starting to use some of these features, particularly geolocation.
• Use the appropriate input mechanism and display the appropriate touch keyboard to save users from having to navigate their keyboard screens to enter data. Keep in mind that inputting data is more tedious on feature phones that have only a numeric keypad. For non-sensitive applications, allow users to stay signed in on their mobile device; and save information such as email address and user name because mobile phones tend to be personal devices, unlike tablets, which tend to be shared between multiple people.

  

• Consider offering auto-completion, spellcheck suggestions and prediction technology to reduce the effort required to input data and to reduce errors — with the ability to revert as needed. Disable features such as CAPTCHA where not appropriate.

Additional Reading

• “Forms on Mobile Devices: Modern Solutions,â€� Luke Wroblewski

Mobile Context

A mobile device can be used at anytime, anywhere. The mobile context is about the environment and circumstances of usage — anything that affects the interaction between the user and the interface, which is especially important for mobile because the context can change constantly and rapidly. While we often focus on distractions, multitasking, motion, low lighting conditions and poor connectivity, it also includes the other extreme — think using a tablet in a relaxed setting over a fast Wi-Fi connection.

“The Context of Mobile Interaction,� Nadav Savio

Guidelines

• Use device features and capabilities to anticipate and support the user’s context of use. The iCookbook app allows users to walk through a recipe using voice commands — a nice feature when your hands are covered in batter!
• Accommodate for changes in context based on the time of day and when the user is using the app. The Navfree GPS app automatically switches from day to night mode, showing low-glare maps for safer nighttime driving.

  

• Use location to identify where the user is and to display relevant nearby content and offers. A Google search for “moviesâ€� on a mobile device brings up movies playing nearby and that day’s showtimes, with links to buy tickets online if available.
• Leverage information that the user has provided, and respect their preferences and settings. After the first leg of a multi-leg flight, TripIt showed me the flight and gate information for my next flight, as well as how much time I had to kill. United’s app did no such thing, even though it knew much more about me. It could have shown me how to get from my current plane to the connecting flight and highlighted the location of the United Club along the way, where I could comfortably spend my two-hour wait, since it knew I was a member.
• Default to the user experience most appropriate for the device (i.e. a mobile experience for small screens, and perhaps a desktop-like experience for tablets), but give users the option to have enhanced features. A big discussion on how to present this to the user recently took place, with Jakob Nielsen recommending a separate mobile website and Josh Clark arguing instead for a responsive design; yet others believe that Nielsen and Clark are both wrong.

Additional Reading

• “The Context of Mobile Interactionâ€� (0.2 MB, PDF), Nadav Savio and Jared Braiterman
• “On Mobile Context,â€� Jason Grigsby
  Don’t miss the links to resources on the mobile context near the end.
• “When and Where Are People Using Mobile Devices?,â€� Luke Wroblewski

Usability

This is the overall measure of how well the information architecture, design, content and other elements work together to enable users to accomplish their goals.

Guidelines

• Make it clear to the user what can be selected, tapped or swiped (this is known as affordance), especially on touchscreen devices. One of the big findings of Nielsen Norman Group’s usability studies of the iPad was that users didn’t know what was touchable or tappable. Another issue was swipe ambiguity: when the same swipe gesture means different things in different areas of a screen. Ensure that touchability is clear and that items such as links, icons and buttons are visibly tappable.
• For touchscreen devices, ensure that touch targets are appropriately sized and well spaced to avoid selection errors. Also, place touch targets in the appropriate screen zones; for example, put destructive actions such as those for deletion in the “Reachâ€� zone, as shown by Luke Wroblewski in his book Mobile First:

  

• Follow conventions and patterns to reduce the learning curve for users and to make the mobile experience more intuitive. Dedicated apps should follow platform-specific standards and guidelines. A comprehensive collection of links to official UI and UX guidelines is available in the article “UI Guidelines for Mobile and Tablet Web App Designâ€� on Breaking the Mobile Web.
• Ensure usability in variable conditions, including for daylight glare and changed angle of viewing and orientation, by paying attention to design elements like contrast, color, typography and font size.
• Do not rely on technology that is not universally supported by your audience’s devices, including Java, JavaScript, cookies, Flash, frames, pop-ups and auto-refreshing. When opening new windows or transitioning from an app to the browser, warn users to avoid overwriting already open tabs.

Additional Reading

• “Usability of iPad Apps and Websites,â€� Nielsen Norman Group
• “UI Guidelines for Mobile and Tablet Web App Design,â€� Max Firtman
• “Mobile Usability Update,â€� Jakob Nielsen, Alertbox

Trustworthiness

This relates to the level of confidence, trust and comfort that users feel when using a mobile website or app. According to a 2011 study by Truste and Harris Interactive, privacy and security are the top two concerns among smartphone users:

Guidelines

• Do not collect or use personal information (such as location and contact list) from mobile devices without the explicit permission of the user. The first few months of this year have seen numerous reports of apps secretly copying smartphone address books, with watchdogs up in arms and users retaliating.
• Make it easy for users to control how their personal information is shared in a mobile app by asking before collecting their location data and by allowing them to opt out of targeted advertising.
• Clearly state your business practices (including for privacy, security and returns), and present them contextually (such as by displaying links to your privacy and security policies on the registration screen). The policies themselves should be accessible in a secondary section of the mobile user experience (such as the footer or a “Moreâ€� tab). Reinforce credibility by displaying trusted badges, especially when users need to trust you with their personal or financial information.
• Present policies appropriately on mobile devices by offering a concise summary and an option to email the entire policy. Privacy and security policies tend to be notoriously long and full of boring legalese that users often blindly click through to continue what they really want to do, so make it easy for users who are interested in the fine print.
• Don’t break the user’s workflow when displaying legalese. Take them back to where they were before being interrupted, instead of making them start all over.

Additional Reading

• “Layered Policy Design“, TRUSTe Blog

Feedback

This has to do with the methods for attracting the user’s attention and displaying important information.

Guidelines

• Minimize the number of alerts the app displays, and ensure that each alert offers critical information and useful choices. For a smile, look at Chris Crutchfield’s video on notification and alert overload.
• Keep alerts brief and clear, explaining what caused the alert and what the user can do, along with clearly labeled buttons.
• Notifications should be brief and informative, not interfere with anything the user is doing, and be easy to act on or dismiss.
• Provide feedback and confirmation on screen without disrupting the user’s workflow.
• If your app displays badges and status bar notifications, keep the badges updated and clear them only when the user has attended to the new information. Chase clears the notifications badge for its mobile app the moment the user visits the notification section, even before the user has seen which of their multiple accounts triggered the badge, forcing them to hunt through each account to see what triggered it.

Additional Reading

• “Mobile Notifications,â€� Fred Wilson
• “The Future of Mobile Notifications,â€� True Ventures
• “Chapter 8: Feedback and Affordance,â€� Mobile Design Pattern Gallery, Theresa Neil

Help

This relates to the options, products and services that are available to assist the user in using the website or app.

Guidelines

• Make it easy for users to access help and support options. Users commonly look for help in the footer of a mobile website and in the toolbar or tab bar of an app.
• Offer multiple ways to get support, including options relevant in a mobile context, such as self-serve FAQs, live support via click-to-call, and near-real-time Direct Message tweets. Two financial service companies that actively offer support via Twitter are American Express and Citibank.
• Present a quick introduction and short tutorial on using the app when it first launches, with options for the user to skip and view later.
• When introducing new or unique functionality (such as when check depositing via mobile apps was first introduced), offer contextual help and tips to guide users the first time, and as a refresher for infrequently used functionality.
• Offer help videos when appropriate, but allow the user to start, pause, stop and control the volume as they wish, and keep in mind the multimedia guidelines mentioned in the “Contentâ€� section above.

Additional Reading

• “Chapter 7: Invitationsâ€� and “Chapter 9: Help,â€� Mobile Design Pattern Gallery: UI Patters for Mobile Applications, Theresa Neil
  Chapter 7 is available online at UX Booth.
• “Top 6 Help Design Patterns for iPhone Apps,â€� Catriona Cornett, inspireUX

Social

This relates to content and features that create a sense of social participation, that enable user interaction and that facilitate sharing on established social networks.

Guidelines

• Create and maintain a presence on social networks (for example, a Facebook page) and local services (for example, a profile page on services such as Google Places, Bing Business Portal and Yahoo Local). These will be highlighted in search results and on location-based social networking services. In addition to your business’ name, include your physical address, phone number, URL and hours of operation.
• Incorporate your social presence and activity into your website’s mobile experience by showing your recent activity and offering an easy way to follow or like you on these networks.
• Integrate social networking features into your website’s mobile experience to make it easy for users to connect with their own social networks. This could be as simple as using APIs to enable social sharing, bookmarking, tagging, liking and commenting.
• Invite users to generate content featuring your brand, product or service from their mobile device, offering some incentive in return. For example, the burger chain Red Robin could invite the user to share a picture of their child reading a school book at one of its locations to get a free milkshake.
• Provide mobile offers that can be shared and go viral. American Express currently offers savings and discounts to users who sync their profiles on networks such as Facebook, Twitter and Foursquare to their credit card.
• Apps that rely on social contributions from users should look at ways to seed content in a way that is useful and, eventually, self-sustaining. For example, the My TSA app has a user-contributed feature that shows the wait times at security checkpoints, but it often shows outdated information, even though airport staff post physical signs of wait times at some airports.

Additional Reading

• “The Definitive Guide to Adding Social Features to Your Mobile Apps“, Verious

Marketing

This has to do with the methods by which a user finds a website or app and the factors that encourage repeated usage.

Guidelines

• Ensure findability by optimizing for mobile search and discovery, such as by keeping URLs short. If you have a separate mobile website, follow URL naming conventions (m.site.com or mobile.site.com). In mobile search results, provide quick access to location-based content (e.g. directions from one’s current location) and device-formatted options (e.g. click to call).

  
  Mobile-formatted information is optimized for UPS (left), but partially missing for FedEx (right).

• “Quick responseâ€� (QR) codes should lead to a mobile-optimized landing page, instead of a traditional page that requires zooming or, worse still, to the website’s home page, from where the user has to hunt for information. As a side note, QR codes painted on buildings should be big and clear enough to be recognized and deciphered by mobile devices.
• Email campaigns should include a link to view the message in a mobile-friendly format, which itself links to the relevant offer page formatted for mobile — unlike CVS/pharmacy, which takes users to its mobile home page.
• Promote your app in other channels where possible (TV, print and in-store advertising), and offer incentives to download and use the app, usually in the form of discounts and savings. If your app has a price tag, attract users to buy it in an overcrowded market by offering a limited-time promotional price. Another option is to promote the app through the Free App A Day marketplace.
• Prompt users to rate and review your app or to share it on social networks after they have used it, but give them the option to postpone or stop these prompts. This will not only generate word of mouth, but give you insight into what users like and don’t like about the app. “Taking Control of Your Reviewsâ€� by smalltech discusses the strategy of encouraging happy customers to post reviews and unhappy customers to email you feedback.

Additional Reading

• “iPad App Marketing Case Study: Flickpad,â€� Chad Podoski, Mobile Orchard
• “The Art of Launching an App: A Case Study,â€� John Casey, Smashing Magazine
• “How to Market Your Mobile Application,â€� Michael Flarup, Smashing Magazine

Conclusion

Mobile user experience is still a developing field, and opportunities for improvement continue to emerge. We’ve presented an overview of the key elements of the mobile user experience, along with some guidelines to get started in each. Focusing on these individual elements will help us create great overall mobile user experiences for our users.

(al)

© Lyndon Cerejo for Smashing Magazine, 2012.