Skip directly to content

Smashing Magazine

Subscribe to Smashing Magazine feed
For Professional Web Designers and Developers
Updated: 4 hours 48 min ago

A Guide To Conducting A Mobile UX Diagnostic

Tue, 11/04/2014 - 12:11

Today’s mobile users have increasing expectations, they are intolerant of faults in their mobile experiences1, and they complain about bad mobile experiences on social media and through word of mouth. How do you make sure that your mobile experience meets or exceeds users’ expectations?

One quick way to identify potential problems is to conduct a user experience diagnostic, by having a few mobile specialists look for potential problems with a mobile presence. A diagnostic can be done during design and development to ensure that the mobile website or app adheres to best practices and guidelines. It also serves as a great starting point for a redesign to identify particular opportunities for improvement.

While a diagnostic can be done by a single evaluator, it is more effective when conducted by multiple evaluators with different strengths and backgrounds. These evaluators should be practitioners well versed in principles of user experience (UX) for mobile interfaces and in mobile platform guidelines, and they should not be closely involved with the design itself. A diagnostic is not a replacement for testing with end users, but rather is a quick method in a user-centered design process2.

This article will describe a process you can follow to evaluate a mobile UX, be it for an app or a website accessed on a mobile device. The steps in this process are:

  1. identify users and scenarios,
  2. conduct an evaluation,
  3. conduct a team review,
  4. document and report.

Alongside the explanation of each step, we’ll illustrate the step using the United States Postal Service as an unwitting real-world example.

Identify Users And Scenarios

A mobile UX diagnostic is conducted by expert evaluators who may or may not be active users of the mobile product. To help the evaluators walk a mile in the user’s shoes, select one to three personas based on the target audience, along with scenarios based on common user tasks and goals. Define the boundaries of the evaluation, and make it quick and efficient by asking the following questions:

  1. What should the evaluation focus on?
    Is it a website that would be accessed on a mobile device or a mobile app? If it’s an app, which platform?
  2. Which devices do your target users use?
    One way to find out is by looking at web traffic and analytics. If that’s not available, then select popular devices based on market share.
  3. Which OS versions are being used?
    Base this on the platform and device.
  4. Who are the main competitors of the website or app?
  5. Is any relevant market research available?
    This could be industry trends, reports, etc. One example would be Forrester’s Customer Experience Index3.

We’ll evaluate the app for the United States Postal Service (USPS) — “over 2 million downloads!” — on an iPhone 5 running iOS 7.1. We’ll illustrate it through the eyes of Mary Jane, an average residential postal customer. (The persona and scenarios are made up for this article.)


I will illustrate the evaluation of the USPS Mobile iOS app (“over 2 million downloads!”) on an iPhone 5 running iOS 7.1, through the eyes of Mary Jane, an average residential postal customer (the persona and scenarios were made up for this article).

Mary Jane is a 37-year-old working mother of two, married to a traveling consultant. She has a job with flexible working hours that align with her kids’ school hours, but juggling it all is no easy task. She shops online a lot and has depended on her iPhone for the past five years. Mary rarely sets foot in the post office, instead relying on USPS for her shopping deliveries, occasional bills and frequent mail-in rebates.

  • Track packages
    Mary frequently shops online and gets deliveries to her door. She likes being able to track her packages to make sure she receives everything as expected. She wants to be able to use her phone to check the status of pending deliveries.
  • Find location
    Mary is on her way to pick up her kids from school when she realizes that today is the deadline to postmark one of her rebates. She wants to find a nearby manned post office or a drop-off location with late pick-up hours.
  • Hold mail
    The family takes three to four mini-vacations a year, during which time she places a hold on her mail to prevent any packages from being left at her door in her absence. The family’s anniversary getaway is coming up in a few weeks, and she wants to place a hold on her mail.
Conduct The Evaluation

A best practice is to have two or more evaluators independently conduct the evaluation in three parts:

  1. scenarios and related UX,
  2. rapid competitive benchmarking,
  3. overall UX.
Scenarios and Related UX

The first part involves evaluating the UX using defined scenarios of use, followed by an inspection of other aspects of the UX.

Step 1: Pick a device and OS. Test “glanceability” with a five-second test. Launch the app or website and look at it for five seconds. Then, cover the screen and answer the following: What is being offered, and what can the user do? The app or website passes if your answer closely matches its core offering.

Step 2: Put on your “persona hat” and use the website or app to walk through the scenario. Look for and identify UX issues that the persona might face in the scenario — anything that would slow down or prevent them from completing their tasks. Document the issues by taking screenshots4 and making notes as you go. Where possible, use contextual testing in the field (i.e. outside of the office) to uncover issues that you might not have exposed otherwise (for example, spotty connectivity when using a travel or retail app, or contrast and glare).

Repeat step 2 until every scenario for each persona is completed.

Step 3: Chances are, the scenarios did not cover everything that the website or app has to offer. Switch from your “persona hat” to your “UX specialist hat” to evaluate key areas not yet covered. Use a framework such as the one detailed in “The Elements of the Mobile User Experience85” to organize the evaluation, continuing to document issues and take relevant screenshots. I find that focusing on the problems to be more valuable, unless you are using a scorecard, such as Forrester’s6, or you specifically need to document strengths as well.

For an app, repeat steps 2 and 3 for the other identified platforms and devices to ensure that the app follows the guidelines and conventions of those platforms. For a website, verify that it renders as expected across devices.

For our example, I chose the “Find Location” scenario to evaluate USPS’ app for iOS.

Find Location: Mary is on her way to pick up her kids from school when she realizes that today is the deadline to postmark one of her rebates. She wants to find a nearby manned post office or a drop-off location with late pick-up hours.

Notes for “Find Location” Scenario

Here are some notes jotted down during the evaluation of the app in the “Find Location” scenario. Testing was conducted on USPS’ iOS app, version 3.8.5 (the app was updated 18 December 2013).

  • When the app launches, a splash screen appears for varying lengths of time (as little as a few seconds to over a minute over public Wi-Fi, simulating the guest Wi-Fi network at her children’s school).
  • The home screen does not have a logo or prominent USPS branding — just a screen with icons.
  • The screen titles do not assure Mary that she is heading down the right path. Tapping “Locations” leads to a screen titled “Search,” and the titles of subsequent screens don’t match either (one says “Enter” and then “Refine search”).
  • The “Location” screen does not have sufficient information, forcing Mary to tap “Show Details” to understand the different options. Why wasn’t this made the default view?
  • The same icon is used for “Post Offices” and “Pickup Services.”
  • Locating all services at once is not possible. Mary is forced to look them up one at a time (for example, first looking up “Post Office” locations, then going back and looking up “Approved Providers”).
  • Location services are not activated for the app, and there is no alert or reminder to turn it on to use the GPS. Mary is under the impression that that functionality does not work.
  • No option exists to enter a search radius. Results from almost 50 kilometers away are returned.
  • The location results do not indicate whether a location is open or closed.
  • When Mary selects a location to view its details, she has to expand the boxes for “Retail Hours” and “Last Collection Time” individually to view that information.
  • Going back from the “Locations” screen crashes the app. Every. Single. Time. (Even after deleting the app and reinstalling.)
Related UX Notes
  • The titles used in the app are not user-friendly, but rather oriented around features and functionality. For example, “Scan” (Scan what? Why?); and “Coupons” (Get coupons? No. What coupons can one add? No clue is given.)
  • Tapping the “Terms of Use” on the home screen results in a confirmation prompt to leave the app (taking users to the mobile website). Really?!
  • The input field for the ZIP code does not bring up the appropriate numeric keyboard. In the “Supplies” section, the keyboard that appears for the ZIP code is the alphabetical keyboard, not even the alphanumeric one.
  • Many screens do not have titles (for example, try entering an address for “Supplies”).
  • The scanning experience is inconsistent. It took a few minutes for one, but was quicker the next time.
  • The app is missing expected functionality (such as expected delivery date, app notifications and a change-of-address option). The app has fewer features than the mobile website (such as an option to change one’s address).
  • The screen to track a package has a “Scan” button, instead of the conventional camera icon.
  • Information is not shared between screens in the app, forcing the user to enter the same information in multiple places (for example, for “Next day pickup,” “Get supplies” and “Hold mail”).
  • Deleting a scheduled pickup in the app does not cancel the pickup, and no warning message is displayed either.
  • A minor issue, the “Terms of Use” link on the home screen does not align with the rest of the sentence.
Rapid Competitive Benchmarking

Rapid competitive benchmarking is a quick exercise to compare how your mobile UX stacks up against the competition’s. To do this, pick a couple of primary competitors or services that offer similar functionality, and complete similar scenarios, followed by a quick scan of their functionality. Look for areas where competitors offer a better user experience, and document with notes and screenshots. For a more detailed analysis, compare features to those of key competitors (Harvey Balls7 do a good job of showing the relative completeness of features).

Competitive Benchmarking: Notes for “Find Location” Scenario


  • An option exists to view all types of locations, but with no way to distinguish between them.
  • Results are displayed only on a map (no list view).

FedEx has the best store-locator experience among the three:

  • When location services are turned off, the app gives clear instructions on how to turn it on.
  • A single screen contains both “Use current location” and search by ZIP code, with filters to show one or more types of locations.
  • Location results can be viewed as a list or map.
  • Location results show at a glance whether a location is open or closed.
  • Results show multiple types of locations and identify the type of each location.
Overall UX Feedback

The final step in the individual evaluation is to step back and evaluate the big picture. To do this, review the following:

  • how the user installs the app or finds the website;
  • onboarding help if it’s an app,
  • the cross-channel experience (i.e. comparing the app to the website on different devices),
  • the cross-device experience,
  • reviews in app stores (for apps) and social networks (for websites and apps),
  • comments and feedback received by email (if you have access to this).
Overall UX Notes
  • When the app first launches, the user is forced to accept the terms and conditions to use the app. (I’ve fought my share of battles with legal departments on this topic as well — and lost many.) However, there are no terms and conditions to accept before using USPS’ mobile website.
  • The app has no onboarding help when first launched, and no help within either.

Here are the notes about the cross-channel experience (i.e. between the app, mobile website and desktop website):

  • The logo on the mobile website is low in resolution, with notable pixelation on “Retina” displays.
  • Branding across the three lack consistency in look and feel.
  • Carrying over shipment-tracking or any personal information between the three channels is not possible.
  • The main functionality is not ordered consistently across channels, nor is key functionality available in all three channels.
  • Touch targets are too close together on the mobile website.

Here are the notes about the cross-device experience:

  • Branding appears on the home screen of the Android app, but not of the iOS app (even though it is shown in Apple’s App Store).

And here are the notes about reviews in Apple’s App Store (negative feedback abounds):

  • Location services are inaccurate, and results could be more relevant.
  • Scanning doesn’t always work.
  • The app freezes and crashes.
Conduct A Team Review

Conduct a team review session to compare, validate and aggregate the findings of the individual evaluations. Evaluators with diverse skills (for example, visual designer, usability analyst) tend to have different areas of focus when conducting evaluations, even though they are using common personas and scenarios and a common evaluation framework.

During the team review, one evaluator should facilitate the discussion, bringing up each problem, verifying whether the other evaluators identified that issue and are in agreement, and then assigning a level of severity to the problem. The evaluators should also identify possible solutions for these issues. The result would be a consolidated list of problems and potential solutions.

For an extended evaluation, invite other designers to the team review session, maybe over an extended catered lunch meeting or towards the end of the day over pizza and drinks. The other designers should have spent some time prior to the session (at least 30 minutes) familiarizing themselves with the website or app. This will enable everyone to explore the website or app together as a team, identify and discuss problems as they find them, and discuss possible solutions.

One evaluator should set the stage by outlining background information and problems identified. This should be followed by a facilitated review of the website or app (often using a structure like the one outlined in “The Elements of the Mobile User Experience85” to guide the discussion). Assign a team member to document the session, including the problems identified, ideas, questions and solutions.

Download the sample evaluation list9 (XLSX, 10 KB) Document and Report

The evaluation spreadsheet is a nice way to capture and organize problems and recommendations, but communicating the issues visually is easier. I usually create a slide presentation, organized by the article linked to above10. One slide is dedicated to each severe problem, with screenshots and callouts to elaborate. Less severe problems are grouped together according to the screens they appear on. Along with each problem and its impact, list actionable recommendations. For detailed evaluations, also mock up key recommendations that address the problem and incorporate best practices.

Begin the presentation with slides that set the context and explain the methodology and approach. Mention that the evaluation focuses on identifying problems, so that members of the design and development team do not start passing around antidepressants when they see the laundry list of problems they have to painstakingly work on.


A mobile UX diagnostic is not a replacement for testing with actual users, but rather is meant to quickly identify problems with a mobile website or app using trained eyes. A diagnostic will uncover most of the top usability problems11, and because it is relatively inexpensive and quick, it can be conducted at multiple points in a user-centered design process. Diagnostics go a long way to improving a mobile experience, reducing flaws and meeting users’ expectations.

Related Resources

(da, ml, al, il)

.persona {background:#F7F7F7;margin:1em 0;padding: 1em 2em;border: 0.06em solid rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 0.12em rgba(0, 0, 0, 0.1) inset;}.fright{float:right;margin:.5em 0 1em 1em} Footnotes
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16

The post A Guide To Conducting A Mobile UX Diagnostic appeared first on Smashing Magazine.

Styling And Animating SVGs With CSS

Mon, 11/03/2014 - 14:08

CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In this article, which is a modified transcript of a talk I recently gave1 at CSSconf EU2 and From the Front3, I’ll go over the prerequisites and techniques for working with CSS in SVG.

I’ll also go over how to export and optimize SVGs, techniques for embedding them and how each one affects the styles and animations applied, and then we’ll actually style and animate with CSS.


Scalable vector graphics (SVG) is an XML-based vector image format for two-dimensional graphics, with support for interactivity and animation. In other words, SVGs are XML tags that render shapes and graphics, and these shapes and graphics can be interacted with and animated much like HTML elements can be.

Animations and interactivity can be added via CSS or JavaScript. In this article, we’ll focus on CSS.

There are many reasons why SVGs are great and why you should be using them today:

  • SVG graphics are scalable and resolution-independent. They look great everywhere, from high-resolution “Retina” screens to printed media.
  • SVGs have very good browser support4. Fallbacks for non-supporting browsers are easy to implement, too, as we’ll see later in the article.
  • Because SVGs are basically text, they can be Gzip’d, making the files smaller that their bitmap counterparts (JPEG and PNG).
  • SVGs are interactive and styleable with CSS and JavaScript.
  • SVG comes with built-in graphics effects such as clipping and masking operations, background blend modes, and filters. This is basically the equivalent of having Photoshop photo-editing capabilities right in the browser.
  • SVGs are accessible. In one sense, they have a very accessible DOM API, which makes them a perfect tool for infographics and data visualizations and which gives them an advantage over HTML5 Canvas because the content of the latter is not accessible. In another sense, you can inspect each and every element in an SVG using your favorite browser’s developer tools, just like you can inspect HTML elements. And SVGs are accessible to screen readers if you make them so. We’ll go over accessibility a little more in the last section of this article.
  • Several tools are available for creating, editing and optimizing SVGs. And other tools make it easier to work with SVGs and save a lot of time in our workflows. We’ll go over some of these tools next.
Exporting SVGs From Graphics Editors And Optimizing Them

The three most popular vector graphics editors are:

  1. Adobe Illustrator5,
  2. Inkscape6,
  3. Sketch7.

Adobe Illustrator is a paid application from Adobe. It is a highly popular editor, with a nice UI and many capabilities that make it the favorite of most designers.

Inkscape is a popular free alternative. Even though its UI is not as nice as Illustrator’s, it has everything you need to work with vector graphics.

Sketch is a Mac OS X-only graphics app. It is not free either, but it has been making the rounds8 among designers lately and gaining popularity9, with a lot of resources and tools10 being created recently to improve the workflow.

Choose any editor to create your SVGs. After choosing your favorite editor and creating an SVG but before embedding it on a web page, you need to export it from the editor and clean it up to make it ready to work with.

I’ll refer to exporting and optimizing an SVG created in Illustrator. But the workflow applies to pretty much any editor, except for the Illustrator-specific options we’ll go over next.

To export an SVG from Illustrator, start by going to “File” → “Save as,” and then choose “.svg” from the file extensions dropdown menu. Once you’ve chosen the .svg extension, a panel will appear containing a set of options for exporting the SVG, such as which version of SVG to use, whether to embed images in the graphic or save them externally and link to them in the SVG, and how to add the styles to the SVG (by using presentation attributes or by using CSS properties in a <style> element).

The following image shows the best settings to choose when exporting an SVG for the web:

(View large version12)

The reasons why the options above are best are explained in Michaël Chaize’s excellent article “Export SVG for the Web With Illustrator CC13.”

Whichever graphics editor you choose, it will not output perfectly clean and optimized code. SVG files, especially ones exported from editors, usually contain a lot of redundant information, such as meta data from the editor, comments, empty groups, default values, non-optimal values and other stuff that can be safely removed or converted without affecting the rendering of the SVG. And if you’re using an SVG that you didn’t create yourself, then the code is almost certainly not optimal, so using a standalone optimization tool is advisable.

Several tools for optimizing SVG code are out there. Peter Collingridge’s SVG Editor14 is an online tool that you input SVG code into either directly or by uploading an SVG file and that then provides you with several optimization options, like removing redundant code, comments, empty groups, white space and more. One option allows you to specify the number of decimal places of point coordinates.

(View large version16)

Peter’s optimizer can also automatically move inline SVG properties to a style block at the top of the document. The nice thing about it is that, when you check an option, you can see the result of the optimization live, which enables you to better decide which optimizations to make. Certain optimizations could end up breaking your SVG. For example, one decimal place should normally be enough. If you’re working with a path-heavy SVG file, reducing the number of decimal places from four to one could slash your file’s size by as much as half. However, it could also entirely break the SVG. So, being able to preview an optimization is a big plus.

Peter’s tool is an online one. If you’d prefer an offline tool, try SVGO17 (the “O” is for “optimizer”), a Node.js-based tool that comes with a nice and simple drag-and-drop GUI18. If you don’t want to use an online tool, this one is a nice alternative.

The following screenshot (showing the path from the image above) is a simple before-and-after illustration of how much Peter’s tool optimizes SVG.


Notice the size of the original SVG compared to the optimized version. Not to mention, the optimized version is much more readable.

After optimizing the SVG, it’s ready to be embedded on a web page and further customized or animated with CSS.

Styling SVGs With CSS

The line between HTML and CSS is clear: HTML is about content and structure, and CSS is about the look. SVG blurs this line, to say the least. SVG 1.1 did not require CSS to style SVG nodes — styles were applied to SVG elements using attributes known as “presentation attributes.”

Presentation attributes are a shorthand for setting a CSS property on an element. Think of them as special style properties. They even contribute to the style cascade, but we’ll get to that shortly.

The following example shows an SVG snippet that uses presentation attributes to style the “border” (stroke) and “background color” (fill) of a star-shaped polygon:

<svg xmlns="" version="1.1" width="300px" height="300px" viewBox="0 0 300 300"> <polygon fill = "#FF931E" stroke = "#ED1C24" stroke-width = "5" points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/> </svg>

The fill, stroke and stroke-width attributes are presentation attributes.

In SVG, a subset of all CSS properties may be set by SVG attributes, and vice versa. The SVG specification lists the SVG attributes that may be set as CSS properties20. Some of these attributes are shared with CSS, such as opacity and transform, among others, while some are not, such as fill, stroke and stroke-width, among others.

In SVG 2, this list will include x, y, width, height, cx, cy and a few other presentation attributes that were not possible to set via CSS in SVG 1.1. The new list of attributes can be found in the SVG 2 specification21.

Another way to set the styles of an SVG element is to use CSS properties. Just like in HTML, styles may be set on an element using inline style attributes:

<svg xmlns="" version="1.1" style="width: 300px; height: 300px;" viewBox="0 0 300 300"> <polygon style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;" points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/> </svg>

Styles may also be set in rule sets in a <style> tag. The <style> tag can be placed in the <svg> tag:

<svg xmlns="" version="1.1" width="300px" height="300px" viewBox="0 0 300 300"> <style type="text/css"> <![CDATA[ selector {/* styles */} ]]> </style> <g id=".."> … </g> </svg>

And it can be placed outside of it, if you’re embedding the SVG inline in the document:

<!DOCTYPE html><!-- HTML5 document --> <html> <head> … </head> <body> <style type="text/css"> /* style rules */ </style> <!-- xmlns is optional in an HTML5 document → <svg viewBox="0 0 300 300"> <!-- SVG content --> </svg> </body> </html>

And if you want to completely separate style from markup, then you could always link to an external style sheet from the SVG file, using the <?xml-stylesheet> tag, as shown below:

<?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> <svg xmlns="" version="1.1" width=".." height=".." viewBox=".."> <!-- SVG content --> </svg> Style Cascades

We mentioned earlier that presentation attributes are sort of special style properties and that they are just shorthand for setting a CSS property on an SVG node. For this reason, it only makes sense that SVG presentation attributes would contribute to the style cascade.

Indeed, presentation attributes count as low-level “author style sheets” and are overridden by any other style definitions: external style sheets, document style sheets and inline styles.

The following diagram shows the order of styles in the cascade. Styles lower in the diagram override those above them. As you can see, presentation attribute styles are overridden by all other styles except for those specific to the user agent.


For example, in the following code snippet, an SVG circle element has been drawn. The fill color of the circle will be deep pink, which overrides the blue fill specified in the presentation attribute.

<circle cx="100" cy="100" r="75" fill="blue" style="fill:deepPink;" /> Selectors

Most CSS selectors can be used to select SVG elements. In addition to the general type, class and ID selectors, SVGs can be styled using CSS2’s dynamic pseudo-classes23 (:hover, :active and :focus) and pseudo-classes24 (:first-child, :visited, :link and :lang. The remaining CSS2 pseudo-classes, including those having to do with generated content25 (such as ::before and ::after), are not part of the SVG language definition and, hence, have no effect on the style of SVGs.

The following is a simple animation of the fill color of a circle from deep pink to green when it is hovered over using the tag selector and the :hover pseudo-class:

<style> circle { fill: deepPink; transition: fill .3s ease-out; } circle:hover { fill: #009966; } </style>

Much more impressive effects can be created. A simple yet very nice effect comes from the Iconic26 icons set, in which a light bulb is lit up when hovered over. A demo of the effect27 is available.


Because presentation attributes are expressed as XML attributes, they are case-sensitive. For example, when specifying the fill color of an element, the attribute must be written as fill="…" and not fill="…".

Furthermore, keyword values for these attributes, such as the italic in font-style="italic", are also case-sensitive and must be specified using the exact case defined in the specification that defines that value.

All other styles specified as CSS properties — whether in a style attribute or a <style> tag or in an external style sheet — are subject to the grammar rules specified in the CSS specifications, which are generally less case-sensitive. That being said, the SVG “Styling”28 specification recommends using the exact property names (usually, lowercase letters and hyphens) as defined in the CSS specifications and expressing all keywords in the same case, as required by presentation attributes, and not taking advantage of CSS’s ability to ignore case.

Animating SVGs With CSS

SVGs can be animated the same way that HTML elements can, using CSS keyframes and animation properties or using CSS transitions.

In most cases, complex animations will usually contain some kind of transformation — a translation, a rotation, scaling and/or skewing.

In most respects, SVG elements respond to transform and transform-origin in the same way that HTML elements do. However, a few inevitable differences result from the fact that, unlike HTML elements, SVG elements aren’t governed by a box model and, hence, have no margin, border, padding or content boxes.

By default, the transform origin of an HTML element is at (50%, 50%), which is the element’s center. By contrast, an SVG element’s transform origin is positioned at the origin of the user’s current coordinate system, which is the (0, 0) point, in the top-left corner of the canvas.

Suppose we have an HTML <div> and an SVG <rect> element:

<!DOCTYPE html> … <div style="width: 100px; height: 100px; background-color: orange"> </div> <svg style="width: 150px; height: 150px; background-color: #eee"> <rect width="100" height="100" x="25" y="25" fill="orange" /> </svg>

If were were to rotate both of them by 45 degrees, without changing the default transform origin, we would get the following result (the red circle indicates the position of the transform origin):

(View large version30)

What if we wanted to rotate the SVG element around its own center, rather than the top-left corner of the SVG canvas? We would need to explicitly set the transform origin using the transform-origin property.

Setting the transform origin on an HTML element is straightforward: Any value you specify will be set relative to the element’s border box.

In SVG, the transform origin can be set using either a percentage value or an absolute value (for example, pixels). If you specify a transform-origin value in percentages, then the value will be set relative to the element’s bounding box, which includes the stroke used to draw its border. If you specify the transform origin in absolute values, then it will be set relative to the SVG canvas’ current coordinate system of the user.

If we were to set the transform origin of the <div> and <rect> from the previous example to the center using percentage values, we would do this:

<!DOCTYPE html> <style> div, rect { transform-origin: 50% 50%; } </style>

The resulting transformation would look like so:

(View large version32)

That being said, at the time of writing, setting the transform origin in percentage values currently does not work in Firefox. This is a known bug33. So, for the time being, your best bet is to use absolute values so that the transformations behave as expected. You can still use percentage values for WebKit browsers, though.

In the following example, we have a pinwheel on a stick that we’ll rotate using CSS animation. To have the wheel rotate around its own center, we’ll set its transform origin in pixels and percentages:

<svg> <style> .wheel { transform-origin: 193px 164px; -webkit-transform-origin: 50% 50%; -webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate; animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate; } @-webkit-keyframes rotate { 50% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 50% { transform: rotate(360deg); } } </style> <!-- SVG content --> </svg>

You can check out the live result on Codepen34. Note that, at the time of writing, CSS 3D transformations are not hardware-accelerated when used on SVG elements; they have the same performance profile as SVG transform attributes. However, Firefox does accelerate transforms on SVGs to some extent.

Animating SVG Paths

There is no way to animate an SVG path from one shape to another in CSS. If you want to morph paths — that is, animate from one path to another — then you will need to use JavaScript for the time being. If you do that, I recommend using Snap.svg35 by Dmitry Baranovskiy, the same person behind the SVG library Raphaël36.

Snap.svg is described as being to SVG what jQuery is to HTML, and it makes dealing with SVGs and its quirks a lot easier.

That being said, you could create an animated line-drawing effect using CSS. The animation would require you to know the total length of the path you’re animating and then to use the stroke-dashoffset and stroke-dasharray SVG properties to achieve the drawing effect. Once you know the length of the path, you can animate it with CSS using the following rules:

#path { stroke-dasharray: pathLength; stroke-dashoffset: pathLength; /* transition stroke-dashoffset */ transition: stroke-dashoffset 2s linear; } svg:hover #path{ stroke-dashoffset: 0; }

In the example above, the path is drawn over the course of two seconds when the SVG is hovered over.

In the next demo, we’ll use the same technique and then use a CSS transition — with a delay — to light up the bulb once the path’s animation ends.

#cable { stroke: #FFF2B1; stroke-dasharray: 4000 4000; stroke-dashoffset: 4000; stroke-width: 4; transition: stroke-dashoffset 8s linear; } svg:hover #cable { stroke-dashoffset: 0; } /* turn lamp on */ .inner-lamp{ fill:grey; transition: fill .5s ease-in 6s; } svg:hover .inner-lamp { fill: #FBFFF8; } /* … */

You can view the live demo on JS Bin37. Note that you can also write stroke-dasharray: 4000; instead of stroke-dasharray: 4000 — if the two line and gap values are equal, then you can specify only one value to be applied to both.

Sometimes, you might not know the exact length of the path to animate. In this case, you can use JavaScript to retrieve the length of the path using the getTotalLength() method:

var path = document.querySelector('.drawing-path'); path.getTotalLength(); //set CSS properties up = length; = length; //set transition up = 'stroke-dashoffset 2s ease-in-out'; // animate = '0';

The snippet above is a very simplified example showing that you can do the same thing we did with CSS but using JavaScript.

Jake Archibald has written an excellent article explaining the technique38 in more detail. Jake includes a nice interactive demo that makes it easy to see exactly what’s going on in the animation and how the two SVG properties work together to achieve the desired effect. I recommend reading his article if you’re interested in learning more about this technique.

Embedding SVGs

An SVG can be embedded in a document in six ways, each of which has its own pros and cons.

The reason we’re covering embedding techniques is because the way you embed an SVG will determine whether certain CSS styles, animations and interactions will work once the SVG is embedded.

An SVG can be embedded in any of the following ways:

  1. as an image using the <img> tag:
    <img src="mySVG.svg" alt="" />
  2. as a background image in CSS:
    .el {background-image: url(mySVG.svg);}
  3. as an object using the <object> tag:
    <object type="image/svg+xml" data="mySVG.svg"><!-- fallback here --></object>
  4. as an iframe using an <iframe> tag:
    <iframe src="mySVG.svg"><!-- fallback here →</iframe>
  5. using the <embed> tag:
    <embed type="image/svg+xml" src="mySVG.svg" />
  6. inline using the <svg> tag:
    <svg version="1.1" xmlns="" …>
    <!-- svg content →

The <object> tag is the primary way to include an external SVG file. The main advantage of this tag is that there is a standard mechanism for providing an image (or text) fallback in case the SVG does not render. If the SVG cannot be displayed for any reason — such as because the provided URI is wrong — then the browser will display the content between the opening and closing <object> tags.

<object type="image/svg+xml" data="mySVG.svg"> <img src="fallback-image.png" alt="…" /> </object>

If you intend using any advanced SVG features, such as CSS or scripting, the then HTML5 <object> tag is your best bet.

Because browsers can render SVG documents in their own right, embedding and displaying an SVG using an iframe is possible. This might be a good method if you want to completely separate the SVG code and script from your main page. However, manipulating an SVG image from your main page’s JavaScript becomes a little more difficult and will be subject to the same-origin policy39.

The <iframe> tag, just like the <object> tag, comes with a default way to provide a fallback for browsers that don’t support SVG, or those that do support it but can’t render it for whatever reason.

<iframe src="mySVG.svg"> <img src="fallback-image.png" alt="…" /> </iframe>

The <embed> tag was never a part of any HTML specification, but it is still widely supported. It is intended for including content that needs an external plugin to work. The Adobe Flash plugin requires the <embed> tag, and supporting this tag is the only real reason for its use with SVG. The <embed> tag does not come with a default fallback mechanism.

An SVG can also be embedded in a document inline — as a “code island” — using the <svg> tag. This is one of the most popular ways to embed SVGs today. Working with inline SVG and CSS is a lot easier because the SVG can be styled and animated by targeting it with style rules placed anywhere in the document. That is, the styles don’t need to be included between the opening and closing <svg> tags to work; whereas this condition is necessary for the other techniques.

Embedding SVGs inline is a good choice, as long as you’re willing to add to the size of the page and give up backwards compatibility (since it does not come with a default fallback mechanism either). Also, note that an inline SVG cannot be cached.

An SVG embedded with an <img> tag and one embedded as a CSS background image are treated in a similar way when it comes to CSS styling and animation. Styles and animations applied to an SVG using an external CSS resource will not be preserved once the SVG is embedded.

The following table shows whether CSS animations and interactions (such as hover effects) are preserved when an SVG is embedded using one of the six embedding techniques, as compared to SVG SMIL animations40. The last column shows that, in all cases, SVG animations (SMIL) are preserved.

Table showing whether CSS styles, animations and interactions are preserved for each of the SVG embedding techniques. CSS Interactions (e.g. :hover) CSS Animations SVG Animations (SMIL) <img> No Yes only if inside <svg> Yes CSS background image No Yes only if inside <svg> Yes <object> Yes only if inside <svg> Yes only if inside <svg> Yes <iframe> Yes only if inside <svg> Yes only if inside <svg> Yes <embed> Yes only if inside <svg> Yes only if inside <svg> Yes <svg> (inline) Yes only if inside <svg> Yes only if inside <svg> Yes

The behavior indicated in the table above is the standard behavior. However, implementations may differ between browsers, and bugs may exist.

Note that, even though SMIL animations will be preserved, SMIL interactions will not work for an SVG embedded as an image (i.e. <img> or via CSS).

Making SVGs Responsive

After embedding an SVG, you need to make sure it is responsive.

Depending on the embedding technique you choose, you might need to apply certain hacks and fixes to get your SVG to be cross-browser responsive. The reason for this is that the way browsers determine the dimensions of an SVG differs for some embedding techniques, and SVG implementations among browsers also differ. Therefore, the way SVG is handled is different and requires some style tweaking to make it behave consistently across all browsers.

I won’t get into details of browser inconsistencies, for the sake of brevity. I will only cover the fix or hack needed for each embedding technique to make the SVG responsive in all browsers for that technique. For a detailed look at the inconsistencies and bugs, check out my article on Codrops4441.

Whichever technique you choose, the first thing you’ll need to do is remove the height and width attributes from the root <svg> element.

You will need to preserve the viewBox attribute and set the preserveAspectRatio attribute to xMidYMid meet — if it isn’t already set to that value. Note that you might not need to explicitly set preserveAspectRatio to xMidYMid meet at all because it will default to this value anyway if you don’t change it.

When an SVG is embedded as a CSS background image, no extra fixes or hacks are needed. It will behave just like any other bitmap background image and will respond to CSS’ background-image properties as expected.

An SVG embedded using an <img> tag will automatically be stretched to the width of the container in all browsers (once the width has been removed from the <svg>, of course). It will then scale as expected and be fluid in all browsers except for Internet Explorer (IE). IE will set the height of the SVG to 150 pixels, preventing it from scaling correctly. To fix this, you will need to explicitly set the width to 100% on the <img>.

<img src="mySVG.svg" alt="SVG Description." /> img { width: 100%; }

The same goes for an SVG embedded using an <object> tag. For the same reason, you will also need to set the width of the <object> to 100%:

object { width: 100%; }

Even though <iframe> has a lot in common with <object>, browsers seem to handle it differently. For it, all browsers will default to the default size for replaced elements in CSS42, which is 300 by 150 pixels.

The only way to make an iframe responsive while maintaining the aspect ratio of the SVG is by using the “padding hack” pioneered by Thierry Koblentz on A List Apart43. The idea behind the padding hack is to make use of the relationship of an element’s padding to its width in order to create an element with an intrinsic ratio of height to width.

When an element’s padding is set in percentages, the percentage is calculated relative to the width of the element, even when you set the top or bottom padding of the element.

To apply the padding hack and make the SVG responsive, the SVG needs to be wrapped in a container, and then you’ll need to apply some styles to the container and the SVG (i.e. the iframe), as follows:

<!-- wrap svg in a container --> <div class="container"> <iframe src="my_SVG_file.svg"> <!-- fallback here --> </iframe> </div> .container { /* collapse the container's height */ height: 0; /* specify any width you want (a percentage value, basically) */ width: width-value; /* apply padding using the following formula */ /* this formula makes sure the aspect ratio of the container equals that of the SVG graphic */ padding-top: (svg-height / svg-width) * width-value; position: relative; /* create positioning context for SVG */ }

The svg-height and svg-width variables are the values of the height and width of the <svg>, respectively — the dimensions that we removed earlier. And the width-value is any width you want to give the SVG container on the page.

Finally, the SVG itself (the iframe) needs to be positioned absolutely inside the container:

iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

We position the iframe absolutely because collapsing the container’s height and then applying the padding to it would push the iframe beyond the boundaries of the container. So, to “pull it back up,” we position it absolutely. You can read more about the details in my article on Codrops4441.

Finally, an SVG embedded inline in an <svg> tag becomes responsive when the height and width are removed, because browsers will assume a width of 100% and will scale the SVG accordingly. However, IE has the same 150-pixel fixed-height issue for the <img> tag mentioned earlier; unfortunately, setting the width of the SVG to 100% is not sufficient to fix it this time.

To make the inline SVG fluid in IE, we also need to apply the padding hack to it. So, we wrap <svg> in a container, apply the padding-hack rules mentioned above to the container and, finally, position the <svg> absolutely inside it. The only difference here is that we do not need to explicitly set the height and width of <svg> after positioning it.

svg { position: absolute; top: 0; left: 0; } Using CSS Media Queries

SVG accepts and responds to CSS media queries as well. You can use media queries to change the styles of an SVG at different viewport sizes.

However, one important note here is that the viewport that the SVG responds to is the viewport of the SVG itself, not the page’s viewport!

This is very similar in concept to element queries45.

An SVG embedded with an <img>, <object> or <iframe> will respond to the viewport established by these elements. That is, the dimensions of these elements will form the viewport inside of which the SVG is to be drawn and, hence, will form the viewport to which the CSS media-query conditions will be applied.

The following example includes a set of media queries inside an SVG that is then referenced using an <img> tag:

<svg xmlns="" version="1.1" viewBox="0 0 194 186"> <style> @media all and (max-width: 50em) { /* select SVG elements and style them */ } @media all and (max-width: 30em) { /* styles */ } </style> <!-- SVG elements here --> </svg>

When the SVG is referenced, it will get the styles specified in the media queries above when the <img> has a max-width of 50em or 30em, respectively.

<img src="my-logo.svg" alt="Page Logo." />

You can learn more about media queries inside SVGs in Andreas Bovens’s article for Dev.Opera46.

Final Words

SVGs are images, and just as images can be accessible, so can SVGs. And making sure your SVGs are accessible is important, too.

I can’t emphasize this enough: Make your SVGs accessible. You can do several things to make that happen. For a complete and excellent guide, I recommend Leonie Watson’s excellent article on SitePoint47. Her tips include using the <title> and <desc> tags in the <svg>, using ARIA attributes and much more.

In addition to accessibility, don’t forget to optimize your SVGs and provide fallbacks for non-supporting browsers. I recommend Todd Parker’s presentation48.

Last but not least, you can always check support for different SVG features on Can I Use49. I hope you’ve found this article to be useful. Thank you for reading.

(vf, al, il)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 //
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37,output
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49

The post Styling And Animating SVGs With CSS appeared first on Smashing Magazine.

Desktop Wallpaper Calendars: November 2014

Fri, 10/31/2014 - 14:10

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for almost seven years now1, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for November 2014. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
On The Edge Of Forever

“November has always reminded me of famous Guns N’ Roses song, so I’ve decided to look at it’s meaning from a different perspective. The story in my picture takes place somewhere in space, where a young guy beholds a majestic meteor shower and wonders about mysteries of the Universe.” — Designed by Aliona Voitenko3 from Ukraine.


Hello World, Happy November!

“I often read messages at Smashingmagazine from the people in the southern hemisphere ‘it’s spring, no autumn!’ so I ‘d liked to design a wallpaper for the northern and southern hemisphere. Here it is, northerners and southerns, hope you like it!” — Designed by Agnes Swart46 from the Netherlands.


My First Fall

Designed by Think Tifferent87 from Seattle, WA.


Rainy Days

Designed by Alexandra Santos120 from Portugal.


A Gentleman’s November

Designed by Cedric Bloem163 from Belgium.


Movember 2k14

“My support for the movember charity event!” — Designed by Niels Meulders206 from Belgium.



“Why say no when you can say yes? This month has a lot of cool days to celebrate and set the mood for an awesome end of the year! Enjoy!” — Designed by Printsome249 from United Kingdom.


Collect Good People

“The most important thing to enjoy your life is to be surrounded by good people. So, do it!” — Designed by Monk Software294 from Italy.


November Ingredients

“Whether or not you celebrate Thanksgiving, there’s certain things that always make the harvest season special. As a Floridian, I’m a big fan of any signs that the weather might be cooling down soon, too!” — Designed by Dorothy Timmer307 from Central Florida, USA.



“The design of trees has always fascinated me. Each one has it’s own unique entanglement of branches. With or without leaves they are always intriguing. Take some time to enjoy the trees around you – and the one on this wallpaper if you’d like!” — Designed by Rachel Litzinger350 from Chiang Rai, Thailand.


Simple Leaves

Designed by Nicky Somers371 from Belgium.


All Lines Point To November

“November often means rain and cold temps, but there’s beauty to be found in that as I found in this moment – the wet lines lead the way.” — Designed by Aisha Souto-Maior386 from Paris based, NY bred.


The Rain Through My Window

“I love watching the rain through the window when I stay at home. I like November, cold, rain, walnuts and chestnuts. I think that the Autumn is wonderful!” — Designed by Veronica Valenzuela417 from Spain.


November Bird

Designed by Arnold Skawinski438 from Poland.


The Family Owl

Designed by Brent Schuddinck477 from Belgium.



“It’s cold in november, so you have to stay closer. Also: Inktober and American Horror Story” — Designed by Anja Sturm520 from Germany.


Smells Like Winter

“The last month of autumn, but the beginning of a new adventure” — Designed by Design19565 from Romania.


Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month620!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185
  186. 186
  187. 187
  188. 188
  189. 189
  190. 190
  191. 191
  192. 192
  193. 193
  194. 194
  195. 195
  196. 196
  197. 197
  198. 198
  199. 199
  200. 200
  201. 201
  202. 202
  203. 203
  204. 204
  205. 205
  206. 206
  207. 207
  208. 208
  209. 209
  210. 210
  211. 211
  212. 212
  213. 213
  214. 214
  215. 215
  216. 216
  217. 217
  218. 218
  219. 219
  220. 220
  221. 221
  222. 222
  223. 223
  224. 224
  225. 225
  226. 226
  227. 227
  228. 228
  229. 229
  230. 230
  231. 231
  232. 232
  233. 233
  234. 234
  235. 235
  236. 236
  237. 237
  238. 238
  239. 239
  240. 240
  241. 241
  242. 242
  243. 243
  244. 244
  245. 245
  246. 246
  247. 247
  248. 248
  249. 249
  250. 250
  251. 251
  252. 252
  253. 253
  254. 254
  255. 255
  256. 256
  257. 257
  258. 258
  259. 259
  260. 260
  261. 261
  262. 262
  263. 263
  264. 264
  265. 265
  266. 266
  267. 267
  268. 268
  269. 269
  270. 270
  271. 271
  272. 272
  273. 273
  274. 274
  275. 275
  276. 276
  277. 277
  278. 278
  279. 279
  280. 280
  281. 281
  282. 282
  283. 283
  284. 284
  285. 285
  286. 286
  287. 287
  288. 288
  289. 289
  290. 290
  291. 291
  292. 292
  293. 293
  294. 294
  295. 295
  296. 296
  297. 297
  298. 298
  299. 299
  300. 300
  301. 301
  302. 302
  303. 303
  304. 304
  305. 305
  306. 306
  307. 307
  308. 308
  309. 309
  310. 310
  311. 311
  312. 312
  313. 313
  314. 314
  315. 315
  316. 316
  317. 317
  318. 318
  319. 319
  320. 320
  321. 321
  322. 322
  323. 323
  324. 324
  325. 325
  326. 326
  327. 327
  328. 328
  329. 329
  330. 330
  331. 331
  332. 332
  333. 333
  334. 334
  335. 335
  336. 336
  337. 337
  338. 338
  339. 339
  340. 340
  341. 341
  342. 342
  343. 343
  344. 344
  345. 345
  346. 346
  347. 347
  348. 348
  349. 349
  350. 350
  351. 351
  352. 352
  353. 353
  354. 354
  355. 355
  356. 356
  357. 357
  358. 358
  359. 359
  360. 360
  361. 361
  362. 362
  363. 363
  364. 364
  365. 365
  366. 366
  367. 367
  368. 368
  369. 369
  370. 370
  371. 371
  372. 372
  373. 373
  374. 374
  375. 375
  376. 376
  377. 377
  378. 378
  379. 379
  380. 380
  381. 381
  382. 382
  383. 383
  384. 384
  385. 385
  386. 386
  387. 387
  388. 388
  389. 389
  390. 390
  391. 391
  392. 392
  393. 393
  394. 394
  395. 395
  396. 396
  397. 397
  398. 398
  399. 399
  400. 400
  401. 401
  402. 402
  403. 403
  404. 404
  405. 405
  406. 406
  407. 407
  408. 408
  409. 409
  410. 410
  411. 411
  412. 412
  413. 413
  414. 414
  415. 415
  416. 416
  417. 417
  418. 418
  419. 419
  420. 420
  421. 421
  422. 422
  423. 423
  424. 424
  425. 425
  426. 426
  427. 427
  428. 428
  429. 429
  430. 430
  431. 431
  432. 432
  433. 433
  434. 434
  435. 435
  436. 436
  437. 437
  438. 438
  439. 439
  440. 440
  441. 441
  442. 442
  443. 443
  444. 444
  445. 445
  446. 446
  447. 447
  448. 448
  449. 449
  450. 450
  451. 451
  452. 452
  453. 453
  454. 454
  455. 455
  456. 456
  457. 457
  458. 458
  459. 459
  460. 460
  461. 461
  462. 462
  463. 463
  464. 464
  465. 465
  466. 466
  467. 467
  468. 468
  469. 469
  470. 470
  471. 471
  472. 472
  473. 473
  474. 474
  475. 475
  476. 476
  477. 477
  478. 478
  479. 479
  480. 480
  481. 481
  482. 482
  483. 483
  484. 484
  485. 485
  486. 486
  487. 487
  488. 488
  489. 489
  490. 490
  491. 491
  492. 492
  493. 493
  494. 494
  495. 495
  496. 496
  497. 497
  498. 498
  499. 499
  500. 500
  501. 501
  502. 502
  503. 503
  504. 504
  505. 505
  506. 506
  507. 507
  508. 508
  509. 509
  510. 510
  511. 511
  512. 512
  513. 513
  514. 514
  515. 515
  516. 516
  517. 517
  518. 518
  519. 519
  520. 520
  521. 521
  522. 522
  523. 523
  524. 524
  525. 525
  526. 526
  527. 527
  528. 528
  529. 529
  530. 530
  531. 531
  532. 532
  533. 533
  534. 534
  535. 535
  536. 536
  537. 537
  538. 538
  539. 539
  540. 540
  541. 541
  542. 542
  543. 543
  544. 544
  545. 545
  546. 546
  547. 547
  548. 548
  549. 549
  550. 550
  551. 551
  552. 552
  553. 553
  554. 554
  555. 555
  556. 556
  557. 557
  558. 558
  559. 559
  560. 560
  561. 561
  562. 562
  563. 563
  564. 564
  565. 565
  566. 566
  567. 567
  568. 568
  569. 569
  570. 570
  571. 571
  572. 572
  573. 573
  574. 574
  575. 575
  576. 576
  577. 577
  578. 578
  579. 579
  580. 580
  581. 581
  582. 582
  583. 583
  584. 584
  585. 585
  586. 586
  587. 587
  588. 588
  589. 589
  590. 590
  591. 591
  592. 592
  593. 593
  594. 594
  595. 595
  596. 596
  597. 597
  598. 598
  599. 599
  600. 600
  601. 601
  602. 602
  603. 603
  604. 604
  605. 605
  606. 606
  607. 607
  608. 608
  609. 609
  610. 610
  611. 611
  612. 612
  613. 613
  614. 614
  615. 615
  616. 616
  617. 617
  618. 618
  619. 619
  620. 620

The post Desktop Wallpaper Calendars: November 2014 appeared first on Smashing Magazine.

Maximize Your Creative Energy

Thu, 10/30/2014 - 09:00

We’ve heard many personal stories this week of how people in our industry have experienced hard times and how they managed to get out of them. We end this week with an article by Ann Holm, a personal development coach and expert in psychology and brain science. Read on to learn how to reduce stress in your everyday life and prevent burnout and other breakdowns in order to stay healthy and unlock your potential. — Ed.

What does knowledge of the brain and personality have to do with creative work? As a lifelong brain geek, I have taken on the mission to help others tap the secrets of the brain to uncover personal potential. Not surprisingly, everyone can benefit from at least some knowledge in this area.

In fact, I’ve found that people who work in the creative industry in particular seem to be interested in this topic because many of them work alone and have to manage their energy, distractions and time to complete a project, while staying flexible and in the moment to capture the unforeseen creative gems that emerge seemingly out of nowhere.

“Everyone who’s taken a shower has an idea. It’s the person who gets out of the shower, dries off and does something about it who makes a difference.”

– Nolan Bushnell, video-game visionary and Atari founder

Oftentimes we have habits that seem to work, so we are unaware that there might be better, more brain-efficient ways to do things. Other times, we feel exhausted and stretched, so our creativity suffers. In this article, I’ll share some facts and insight on brain functionality, as well as tips on how to get the most out of your creative energy. Some of these suggestions might be very different from what you are doing right now.

Multitasking: A Rapid Way To Deplete Brain Energy

Like many web designers and developers, you might work in a small business or even as a single entity. This means you need to master and implement several skills:

  • your creative work,
  • your networking tasks,
  • your administrative tasks.

While this makes you versatile, it can also lead to multitasking or plate-spinning. What is the most effective way to perform all of your roles, while still maximizing creativity?

In the old days, before computers, smartphones, social media and the like, interrupting someone’s train of thought was verboten — and for good reason. The brain is not meant to multitask. In fact, multitasking is a myth. Multitasking is actually task-switching, and it is among the most rapid ways to deplete brain energy. Every time you perform a task, the most energy-hungry area of your brain, the prefrontal cortex, has to recruit a different collection of brain cells to carry out the task you are trying to accomplish. You use different brain networks to work on projects, to respond to a phone call, and to check email and social media.

John Medina, author of Brain Rules1, tells the story of his son trying to write a paper for school with 11 other applications running, including two instant-messaging screens! Every time he switches his attention, his brain has to engage, disengage and reengage somewhere else. Studies show that a person who is interrupted takes 50% longer to complete a task and makes 50% more errors in the process.

Here are a few tips to avoid the pitfalls of task-switching:

  • Work uninterrupted for a designated period of time.
    Brain research shows that 25 minutes is approximately the amount of time it takes to “get on a roll.” Set a timer if necessary. Do only that one important task during that time.
  • Check email and social media at designated times.
    Email and social media notifications not only create those task-switching scenarios, but can result in a protracted diversion from your intended work.
  • Minimize distraction with internal and external management.
Manage Distractions With Internal And External Management

Distractions can be managed either internally or externally. Internal management requires additional brain energy, sometimes a considerable amount of it. It’s a form of willpower. A classic example is the individual who is trying to lose weight but keeps all kinds of tempting food in the house. The old saying “out of sight, out of mind” is instructive here.

I am a business owner myself. I coach, blog, maintain a website and develop curricula for leadership-development workshops. I use social media, including Facebook, Twitter and LinkedIn. By far, my biggest distraction was Facebook on my iPhone. I have a personal page in addition to my business page, and I found it way too easy to check my latest push notifications. So, I deleted the app from my phone. Now I wasn’t one click away from another diversion.

There are many ways to manage distractions externally so that the brain doesn’t get exhausted in the process. In my college days, I taped myself to a chair to finish term papers, thus eliminating the possibility of wandering off to chat with a friend. Nowadays, I ask myself, how can I make a distraction so difficult to execute that I don’t even consider doing it?

A young client used the following strategy to externally manage his biggest distraction:

“The biggest distraction of my life is my phone. I had a large project due, so I decided to try your suggestion. I took the phone out of my pocket, shut it off, put the cover on backward, and placed it on a high shelf. Amazingly, I got everything done, and I got it done fast.”

Distractions are best managed by eliminating them from your immediate environment — or by making them so difficult to execute that you don’t even consider them.

Here are a few tips on externally managing distractions:

  • Turn off your phone or place it in another room.
  • If you have to take calls, disable Internet access on your phone.
    Some phones have a “do not disturb” function that only allows calls from a list of defined numbers (such as emergency numbers) to minimize disruption to your workflow.
Sleep Well To Uncover Your Potential

“Sleep while you’re dead“ was my philosophy for years. I was a dedicated night owl, often denying that I needed much sleep at all. In truth, only 10% of the population do their best work at night, and few people can get by on less than 7 to 8 hours of sleep per night, night after night.

It is possible that the creative industry has a slightly higher percentage of night owls or those who can get by on very little sleep. However, the chances are high that most people need the same amount of sleep in order to function optimally. Many of us keep going at night because we are too tired to put ourselves to bed.

Our brains need time to calm down, so try to stop working several hours before going to bed. (Image credit: kroszk@2)

Recently, I attended a seminar titled “The Ever-Changing Brain.” I was struck by the impact of sleep deprivation on every aspect of our lives. John Preston, Psy.D, wasn’t talking about simply doing time in bed. He was talking about the deeply restorative sleep that affects our ability to regulate our emotions, solve problems and think creatively. Sleep researchers say that, in the absence of slow-wave sleep, our pain threshold decreases and our cognition and focus are reduced. Depression is a long-term consequence of poor sleep quality.

Sleep behavior is largely a result of sleeping habits. Even a few small adjustments can have a profound affect on sleep quality:

  • Exercise regularly throughout the day.
    However, avoid exercising close to bedtime or it will have the opposite effect.
  • Avoid caffeine, alcohol and sleeping pills.
    These substances interfere with restorative sleep, especially when you consume them close to bedtime. Sleeping pills can affect your sleep patterns long term.
  • Trend towards calmer evenings.
    Your brain needs time to calm down. Stop working several hours before going to bed, and fill those hours with calm and relaxing activities.
  • Avoid blue light at least an hour before bed.
    The blue light of computer screens and bright sources of light affect our sleep. Avoid them at least an hour before bed. Additionally, you can manage the light of your computer screen with the f.lux3 app.
  • Sleep in a cool room and ventilate before going to bed.
    Sufficient oxygen supply is important for your brain to recover from a hard day of work.
Eat Well And Exercise To Maximize Your Potential

My great Aunt Marian grew up on a diet of fatty meat, dumplings and potatoes. Vegetables were usually cucumbers doused in bacon grease. She smoked for 80 years and loved her scotch. She broke every health rule and yet lived with a clear mind until she died in her mid-90s.

Aunt Marian was lucky and probably genetically exceptional. Current brain research suggests that most of us probably couldn’t pull this off. Although we’re more aware of the benefits of eating healthy and exercising than we have been in the past, the stresses of the modern world and the increasing pace and pressure of our lives affect us more than we might think. Traveling to conferences and clients adds another layer of stress to our lives. We know now that small yet measurable brain declines already happen in a person’s late-20s.

Don’t underestimate healthy nutrition. Your brain will thank you. (Image credit: Ted Eytan4)

Anxiety is common in developed countries, and the lifetime risk for severe depression is 20%. A hundred years ago, the risk was 1%. Because many creatives work on projects that they’re passionate about, they often don’t realize how much stress they’re putting themselves through and the negative effects this can have on their bodies. Burn-out often occurs after a phase of idealistic passion for something.

Stress is caused not only by the number of tasks we have to complete, but also by emotional events in our lives. This could be the death of a beloved one, a divorce or break-up, or tensions in our family or social circle. We have to acknowledge that our brain needs additional capacity for us to emotionally deal with these problems.

In short, we have to take care of our brains in order to get many years of creative output:

  • Keep weight within the normal range.
    Excess weight, a poor lifestyle and a lack of sleep set off the inflammatory process.
  • Reduce or eliminate sugar.
    Evidence is emerging that sugar is a significant cause of inflammation. Inflammation is system-wide. Therefore, if you feel unwell after eating something, then your whole body, including your brain, could be affected. Keep this in mind when attending conferences and meetings, where unhealthy food is often easily obtainable. Investing some time and money in eating healthy could result in a better creative output later on.
  • Supply your body with omega-3 fatty acids.
    Many supplements don’t work. However, the omega-3 fatty acids found in fish oil have been proven to benefit the brain.
  • Exercise regularly.
    Exercise improves blood flow to the brain. Exercise not only will bring about creativity in the moment, but will benefit the brain in the long run.
  • Build and maintain relationships and interests outside of work.
    This is important to avoiding depression and burn-out.
  • Don’t underestimate the effects of emotional events.
    If an emotional event happens in your life, take some extra time out so that you’re brain is able to effectively deal with it. For example, go for a walk outside or a bike ride or meet up with people who can help you through this situation.
A Real-Life Example

Recently, a client confessed to me that she was staying up well past 1:00 and 2:00 am because she was a night owl. When I asked her what she was doing at that hour, she said she was “researching” various topics on the Internet. As we discussed this further, she conceded that she was really just surfing the web and couldn’t fall sleep any sooner. I explained that when we get very tired, we lose some of our willpower to move away from what we are doing and head off for a good night’s rest. She agreed to try an earlier bedtime and to turn off her computer screen at least 30 minutes before that. I further suggested she use the Sleep Cycle5 app to get solid data on her sleeping patterns. Ten days later, I received this email:

“I’ve been using the Sleep Cycle app most nights since we talked and I’m shocked. I knew that I often didn’t get as much sleep as I should, but I hadn’t realized just how bad it was. If the last week and a half is any indication — and I have no reason to think it’s an anomaly — I rarely get eight hours’ sleep on a weeknight. I hadn’t realized just how much time I’m wasting online before I go to sleep on a regular basis. This is a huge thing to work on. Thank you for this wake-up call.”

Several months later, she continues to report better sleep and better results in her work. It’s not that she doesn’t do any more night benders, but she is more aware of her need for sleep and how it affects her work.


No matter what a person’s career is, we are all first and foremost human, and we have evolved with a certain physiology that is not altogether compatible with modern life. Our ancestors walked up to 20 kilometers a day and focused on one thing at a time. We woke with the sun, slept when it was dark and ate the available natural food. Our lives today are vastly different from the conditions that mapped our ancestral brains, and yet modern living has not significantly changed our basic neural framework.

The main take-away is to be open-minded about how you might be compromising your own success and productivity by relying on habits that run counter to how we are wired to live and thrive. Experiment with some of the principles described in this article and see whether a few small changes make a big difference in your overall productivity.

These are only a few suggestions to help maximize your potential. Feel free to share your own tips and strategies below in the comments sections.

Other Resources

(al, ml, il)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

The post Maximize Your Creative Energy appeared first on Smashing Magazine.

Let’s Talk About It

Wed, 10/29/2014 - 01:10

Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. It’s {Geek} Mental Help Week1 and we would like to help raise awareness with a couple of articles exploring these issues. – Ed.

Talking about mental health can be awkward and embarrassing, but it really shouldn’t be. Mental health is just an illness, like any other. When we talk about mental health, we do so in hushed terms. We whisper, “Don’t mention it, he or she isn’t ‘all there.’”

I believe this approach — sweeping the problem under the carpet, hiding it from view, or stating, “Let’s not talk about it” — is a problem. Mental health is an issue. It affects our industry, in particular and confronting it head on is important. We need to talk about mental health more openly, and I’m happy to be one of a growing number of people in our industry who are helping to bring this subject out into the open, where it should be.

Mental health is an issue, it shouldn’t be a stigma. If more of us address it, openly, we’ll be able to address some of the problems we face collectively. Our industry is, in many ways, unique in its approach. We share what we learn, pooling our knowledge for the betterment of all. We can apply this approach to greater issues, like health, particularly mental health, and in so doing win the battle of the mind.

A Broken Elbow

Four years ago I broke my elbow. I left my house, on the west coast of Ireland, intending to take a short cycle ride and, barely a few minutes from my front door, managed to throw myself over the handlebars, bounce down a steep hill and break my elbow into what felt like a million pieces.

It was a stupid mistake. I wasn’t wearing a helmet — note to self, that’s never a good idea — and when my body, frail as it was, impacted upon the tarmac and gravel, it suffered immense trauma. Covered in cuts and bruises and bleeding profusely, I tried to pick myself up off the ground, only to discover that my left elbow was, I’m sad to say, almost beyond repair.

Fortunately, my wife, Cara (who — it has to be said — has supported me for an inordinate length of time), happened to be following behind me moments later in a car. She pulled in, gathered me up and took me to the hospital. I’m not a hospital person (I have a real phobia of hospitals), so this wasn’t the greatest day of my life, but I was soon taken care of and dispatched to Belfast, where I was admitted to yet another hospital for an operation to fix my broken elbow.

Unfortunately, all of this coincided with my end-of-year student assessments. I work as a senior lecturer at the Belfast School of Art, and my students, after many years of hard work, were just about to graduate. It was a difficult time, but, thanks to the generous support of my colleagues, I was able to assess my students from the relative comfort of a hospital bed, all thanks to technology. (iPhones are just the ticket when you’re assessing students from afar.)

I returned to work a fortnight later, my arm nestled in a sling. I wore that sling like a badge of pride.

A Broken Mind

Barely two years later, I would find myself in a hospital again. This time, I awoke in a hospital bed feeling exhausted, disorientated and ashamed. The day before, I had tried to kill myself. I didn’t wear that like a badge of pride. Indeed, outwardly, you wouldn’t have seen any evidence that I had even been in hospital at all.

I suffer from depression.

I find myself all too often overwhelmed by life, questioning the point of it all. I wonder, “Is there an easier way out of this?” The answer, for me at that time, was simple: It’s time to exit.

At that time, with my elbow on the mend, my mind was in a terrible place. I couldn’t see the point of anything; I could only see a way out. Try as I might to rationally address my worries, my mind was cast adrift, and my thoughts were illogical. I had had enough. The rational — or, rather, irrational — solution was to end it all.

I am married and I have two wonderful children. I love my wife, Cara, and my children, Ross and Caitlín, dearly. They mean the world to me. When I look back on that time, I am ashamed of myself. I was ready to leave; I had had enough.

These words are the hardest I’ve written. They are almost impossible to write and to share. How can you state that you were ready to abandon your family? That’s the worst thing anyone could put down on a page.

2Anxiety: one of the most prevalent mental health problems in the industry.

When I feel great, I feel great. The world is my oyster, and the world is filled with opportunity. I am filled with hope, and I see the boundless possibilities that life offers. When the fog hits me, however, I cannot think rationally. The world is a black place, somewhere I wish to leave. Rationally, of course, I understand the devastation my choice will incur, but my mind is nowhere near working in what we might call a rational manner.

At that point, there is no badge of pride, only a badge of shame.

Managing A Mind

My last year has been one of change. I’ve regrouped and focused on trying to live a healthier lifestyle. I’ve also resigned myself to the fact that I cannot be all things to all people. The edges of my day had blurred: 9:00 to 5:00 had become 8:00 to 6:00 and, not long after, 7:00 to 7:00 (and worse). This kind of ever-increasing workload, where the balance between work and life switches, is not uncommon.

I’m sure we’ve all spent evenings or even whole nights just “catching up.” At the risk of stating the obvious, this is extremely unhealthy. We need to wake up, look at ourselves and ask, “Is this what life is really all about?”

Over the last two years, I’ve read a great deal to try to understand how the mind works. That journey has been an interesting one, and I’ve learned a great deal. I’ve found books to be the most helpful. Alain de Botton’s Status Anxiety3 is excellent, as is Viktor Frankl’s incredibly moving Man’s Search for Meaning4. Both are well worth owning.

If you can afford to buy just one book, however, get Steve Peters’ The Chimp Paradox5. Peters’ ideas on mind management are invaluable, and if he can help athletes win Olympic gold medals, then he can most certainly help you.

Books are great — as an educator, you’d expect me to say that — but we in this industry share something greater: a strong sense of community. Unlike in many other industries, we share our knowledge freely. Let’s share our knowledge about more than just design and code. Let’s share it about the issues we face in life.

You Are Not Alone

I’m not alone in writing about the issues I’ve faced. A growing number of others have, too, many of whom have been inspired to share their experience as a result of Geek Mental Help Week6. Geek Mental Help Week affords us all an opportunity to address these issues head on. We work in an industry that is relentless. Keeping up with change can be a challenge.

A year ago in my journal, fsck, I wrote7:

I believe, as an industry, we focus all too often on the headlong excitement of endlessly moving forward. That’s fine, but there’s a flip side. Relentless progress brings with it relentless pressure. It can be difficult to keep up, and the pressure to stay on top of everything can at times prove debilitating.

That remains the case.

Our industry is constantly evolving. It’s developing at an unprecedented rate, and it is intimidating at times. New technologies emerge yearly, monthly, weekly, even daily. Maintaining a knowledge base that is fit for purpose is incredibly time-consuming.

Keeping up is hard, and sometimes the stress of trying to stick with the pack (a pack that always seems to be pulling away from you) is frustrating. The older I get, the harder I find it to keep up with the pace of progress.

No one can do everything; we need to remind ourselves of that from time to time. AngularJS, Ember.js, Node.js; Bower, Grunt, Yeoman — I have no idea how any of these things work, and that’s fine. I have a skill set — I’m essentially a creative director and a mentor — and I’ve slowly come to the realization that my skill set is more than adequate.

I hope, as an industry, we can learn to let go a little. A wonderful world exists inside the machines we work with, but — equally — a wonderful world exists outside of those machines. Look up. Step away from the computer. Go for a walk in the park. That’s where you’ll witness what life is really all about.

We are all struggling. Even those who seem to effortlessly accumulate knowledge are struggling (though they might not admit it). Together, we can confront the challenges we face, as we do so many other challenges. Let’s not forget that.

(al, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7

The post Let’s Talk About It appeared first on Smashing Magazine.

Feeling Stuck? Design What You Don’t Know

Tue, 10/28/2014 - 14:57

Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. It’s {Geek} Mental Help Week1 and we would like to help raise awareness with a couple of articles exploring these issues. – Ed.

Where is it?! It has to be here somewhere. It use to be so easy. What happened? Somewhere, somewhere, somewhere. That idea is somewhere. It’s here, it has to be. This is where I’ve always found it. But there’s nothing. The only shapes I find here are well worn and boring, dints still obvious even with fresh paint. Oh so boring. So boring and so often used because they’re just “fine.” Too easily used. Too easily reached for and offered up as if they were new again.

Didn’t this used to be easy? Didn’t fresh ideas arrive without being asked for? Why did I have to wait until the last moment to even notice, wait until moments before these old dented ideas have to be presented?

Wasn’t this a passion? Wasn’t this a calling? Wasn’t this something I sprung from bed every morning to race to the studio to do?

Now it’s none of these things. Now it’s different. Now it’s quiet with muted color. Now it’s something I just do. No, it’s worse. Now it’s a job. It’s not my work, it’s my job.

It’s a job, and the ideas don’t arrive like they used to. I keep designing what I know. I’m stuck.

What Stuck Is Really Like For A Designer

Sound familiar?

We often think about being stuck as not having anywhere to move. But for a designer, this is what stuck really looks like. It’s emptiness followed by panic, days before a concept or first proof is due.

It’s reaching for old familiar ideas, ones used far too often simply because they’re reliable, even if they make for boring shapes. Whatever solutions might be offered up to the client’s problems are often interchangeable. Client names and logos could be swapped and the difference would be indistinguishable.

Without being creatively stretched, our skills take little time to silently atrophy. Before long, memories of excitement become all too distant. The misguided hope that the next project will be better starts to kick in, but the same situation is repeatedly found, so the same solutions are repeatedly used.

Being stuck means no movement, and no movement means that the creative waters of our minds grow stagnant. (Image credits2)

Luckily, this can be solved with the most boring and obvious of things.

What Causes A Designer To Feel Stuck?

The longer we work, the bigger our box of tricks gets. We start to learn what will work for a client almost every time, what most clients don’t like, what most clients are fine with.

When desperate, we rely on those tricks in place of exploration and research, just to get the work finished and out the door. But before long, we are relying on them too heavily, then perhaps completely, rendering our creative legs useless as we find height atop of our empty little tricks. Alternatively, such stagnation may settle over us because of arrogance. We might allow our ego to fill up the space in our brains left for new knowledge and consider ourselves full.

We might think that we’re done with our education because we’ve graduated, won an award, gained some recognition or simply found a job. We forget how our skills developed in the first place — within a storm of unknown outcomes and a thousand wrong solutions. We forget that we need to understand and challenge our limits, that learning means being willing to be wrong and to try again, over and over.

We stop learning; we get bored. We fall into a rut and get stuck. What we need in our work is a little novelty. No tricks, no work made up of shortcuts alone and no ego — no, none of these — we just need some curiosity.

Want To Get Moving? Design What You Don’t Know

Writers are often given the advice to “write what you know.” Weaker wordsmiths would consider this justification to simply write what’s in their head. Their ego will suggest that they already have within them what’s needed for the next great novel.

Smarter writers, the ones who take their craft seriously, understand that to write what they know means to know many things, and to know many things means to deliberately subject themselves to a barrage of experiences. It means visiting the country in which a short story is set to understand the culture found there, not just relying on weak memories or a few Google searches. It means calling the local pharmacy to ask a few questions about how certain drugs work in the body if it’s central to how a main character dies.

It’s to put yourself in unknown places and routines so that you can find new sources from which to draw inspiration. The advice should almost be “write what you don’t know.”

I’ve always been amazed by the similarities between writing and design. They’ve often felt like two sides of the same card to me, and the advice for one often translates well to the other. So, what of the advice to write what one knows? What good is this for the designer?

Design what you don’t know.

A blatant copy, but it makes our point well. Design what you don’t know. Find your limits, push them with education and experience, and perhaps avoid that burnout and stagnated-career feeling.

Seek Out Your Limits, Know Them, List Them

Do you know what your limits are? Do you know what you don’t know? Do you have them in front of you? It’s not enough to have a vague idea of what you’re not comfortable doing. You have to make a list, to plan your education and your efforts.

A list: That’s our not-so-obvious obvious solution.

Such a list can provide an enjoyable stability and direction. It’ll stop you from stumbling through ignorance, wildly throwing your arms out hoping to clutch some knowledge to keep from falling again.

Go wild. This is your fantasy list; this is all the things you ever wanted to learn about your profession. Leave nothing out, include big and small, and cover the whole gamut. Write fast and with passion.

Patterns will emerge, little groupings and relationships. You’ll see what little classes you can structure for yourself, and you will play both student and teacher. You’ll be lucky for it — being both will make you better at both. Add to it every time something comes up during a project that you avoid because it confuses you, anything that makes you genuinely nervous to think about. Be specific. “Make website responsive” isn’t specific, but “How do I target specific resolutions?” is.

The benefit of getting granular isn’t just that it helps you avoid easily stumbled-upon distraction, but that it gives you things to test and to develop a very short feedback loop around. It let’s you test-break-repeat. We have to seek out the difficult and uncomfortable if we wish to grow. This is what has to be on our list — not the things we know how to do well already; there’s little to learn in practicing such things repeatedly.

In practice, concepts are defined, given shape, can even be manipulated, all while being tested. Don’t fall too hard into the trap of reading without doing, of adding items to the list without ever crossing them off. Make sure as soon as you have even the roughest idea of how something might work that you start trying to make it do so.

You have to do things, even when you do them poorly — especially when you do them poorly. Like those well-considered writers who know their stories well because they’ve lived them, because they’ve focused on what they don’t know so that they could write about such things like it was old knowledge — like them, we need to focus on designing what we don’t know, what we don’t understand.

Push Your Limits To Never Feel Stuck Again

All it takes is one thing from our list to lift a project from dull to interesting. Just one tiny thing. The first project you do might only benefit from your learning one small thing, but the second will be improved by what you learned previously and the new task that you’ll tackle for it.

One new thing per project. Some might consider it selfish to use clients’ projects as a means to give yourself an education, but I think it’s a perfect testing ground. It will give your daylight hours more meaning, something to bounce out of bed for.

Personal projects are a great place to learn, too, but the energy available to us outside of our normal office hours is fleeting. If you’re to work on client work anyway, why not derive more benefit from it than just a bit of money?

Cross off the items on your list as often as you can, as quickly as you can, with as much fury and energy as you can muster. It might not feel like much, learning one small thing at a time, but it’ll add up quickly, and it’ll give you a fun little challenge to solve every day. It’s a wonderful thing to experience.

Joyous Ignorance And Worlds Of Possibility

When we’re learning something new, we feel as if a world of possibility has opened before us. We’re wonderfully ignorant of any boundaries. But as we learn more, we make that world smaller. No wonder we can sometimes feel uninspired and stuck.

We rely too easily on what we’ve learned that we don’t add to our mental “need to learn” list. But it’s in lists that we can escape that stuck feeling and once again expand the world of opportunities. Exploring othis list gives us new glasses through which to see the world before us, enabling us to open new doors and gain new experiences. Boredom has never been found when exploring exciting new worlds.

This is all a bit circular. It sounds as though I’m suggesting that shortcuts, which is really knowledge well known and experienced, aren’t to be trusted, and so what you should do is focus on what you don’t know until it’s… well, a shortcut.

The truth is that nothing is wrong with shortcuts. It shows experience and knowledge. The problem occurs when one relies on the same set of shortcuts, the same set of tricks, never adding to their set of skills. For whatever reason, once our skills reach the point at which they are no longer challenged by our clients’ requests, we tend to let them stay where they are.

Few clients are sophisticated enough to know how complex our work can be, so they ask for simple solutions. Our human-natured desire to find the easiest path gives our ego the excuse it needs to simply let these sleeping dogs lie. Why try harder? But before long, the ego that granted us the easy path starts to gripe when we walk down it too often. Somewhere in the pit of our souls, it begins to cry havoc that we aren’t being used for worthy problems.

Vibrant Waters Of The Creative Mind

The waters of the mind stagnate when no new currents of knowledge pass through them. The silt, which is movement made visible, falls to the bottom when undisturbed. The waters sit still and before long are rendered lifeless.

Only through knowledge and new experiences will the waters once again come alive, allowing a vibrant crop of new species, new ideas, to grow and call your mind home. It’s only through the introduction of new ideas that our mind can transform from stagnant pots of water into vibrant ecosystems.

This requires work, a constant and caring tending — not great movements once a week, nor month, nor year, through hollow and meaningless retreats, self-development programs or committees or, worse, the occasional reading of a how-to article, quickly forgotten.

No, only through gentle stirrings daily will the waters of your mind remain lively and fruitful.

How does this work start? The short version is easy enough:

  • List everything you want and need to learn.
  • Read just enough to start experimenting with these listed curiosities.
  • Always find a place in your current project to apply a new experiment.

Write your list, tend to it regularly, and the waters will never go still. If you’re lucky, you might never find yourself stuck and bored, browsing your library of those faded and dented shapes.

(al, il)

  1. 1
  2. 2

The post Feeling Stuck? Design What You Don’t Know appeared first on Smashing Magazine.

When Flowers Start To Bloom, It’s A Sign That SmashingConf Oxford Is Coming Soon!

Tue, 10/28/2014 - 13:00

Crafting a good front-end is no piece of cake. When tough budgets and ambitious goals interweave, you need just the right expertise to make just the right decisions. That’s why we create heavily practical Smashing Conferences, and the upcoming SmashingConf Oxford 201531 isn’t going to be an exception.

2Yes, we’re coming back to the UK: SmashingConf Oxford 201531 will be as practical as usual, taking place in March 16–18th. Get your ticket.4 About The Conference

We don’t care about volatile trends, but we do care about things that work and don’t work in real projects, and why, and that’s exactly what the event will be focusing on. With practical talks, lots of networking, jam sessions, a personal, intimate atmosphere and spectacular surprises (lasers5, anyone?), this is a conference you probably won’t want to miss. A valuable, affordable community event for designers and developers who love their craft. Seriously.

No fluff, no basics, but real actionable insights that you can apply to your work right away. First speakers are already announced6, including Jake Archibald, Zoe M. Gillenwater, Tom Giannattasio, Natalie Yadrentseva, Richard Rutter, Paul Lewis and Peter Bilak. And we’ve got a few hands-on Front-End + RWD workshops7 as well, you know.

£289 / €349
Get your ticket.198350 tickets available, and they’re selling fast. First Confirmed Speakers

We thoroughly curate every single talk and work alongside our speakers to make sure that each presentation fits nicely within the overall theme of the conference. For the Oxford conference, we’re very happy to welcome the first confirmed speakers:


  • Jake Archibald
    (Front-End, Google)
  • Zoe M. Gillenwater (+ workshop)
    (Front-end, Flexbox)
  • Tom Giannattasio
    (Front-End, Macaw)
  • Natalie Yadrentseva
    (UX, Data Visualization)
  • Seb Lee-Delisle (+ workshop)
    (Creative JavaScript)
  • Richard Rutter
    (Web typography, Fontdeck)
  • Meagan Fisher
    (Front-End, Visual Design)
  • Paul Lewis
    (Rendering Performance, Google)
  • Lorna Mitchell
    (PHP, Open Source Evangelist)
  • Peter Bilak
  • Rachel Simpson
    (UX, Google)
  • Yoav Weiss (+ workshop)
    (Responsive Images Group)
  • Polle de Maagt
    (Creative UX, KLM)
  • Christopher Murphy (+ workshop)
    (Designer, Educator)
  • Bruce Lawson
    (Opera, Standards)
  • Mystery Speaker
    (Someone you definitely know.)
  • …more speakers will be announced soon!
10To keep our tradition of holding conferences at unique places, we did not choose lovely Oxford randomly. The venue for the SmashingConf Oxford is the amazing Oxford Town Hall, just like last year. (Image credits11) Seven Valuable, Hands-On Workshops

Conference talks are one thing, but a full-day hands-on workshop another. Why not add a practical workshop on top of your conference experience and come back to your office with a bag full of useful findings, learnings and perhaps even skills? Well, that’s what our workshops are all about! And we’ve got a few pretty, pretty good ones prepared for you:

Get your ticket.198Conf + Workshop ticket? You won't be disappointed. Fair Pricing: £289 / €349 For Two Full Days

We want to make sure that the conference is affordable for everyone, and this is reflected in the pricing for the event. The regular price is £289 (€349) for two full days (incl. UK VAT 20% and all booking fees), but if you are quick, you can snap one of the 50 early-bird tickets20.

Besides, if you get a workshop ticket, too21, you save £100 off the conference + workshop price. Student discounts (25% off) are available on request as well. Quite smashing, isn’t it? We thought so!

22Beautiful SmashingConf sketchnotes by Elisabeth Irgens.
She'll be joining us in Oxford as well. (Image credits23) Location And Hotels

Of course we didn't choose Oxford randomly. It's perhaps the quintessential English city: a gorgeous maze of winding streets, ancient college buildings, eccentric traditions and some very fine hostelries. Every inch of the city centre is packed with history, and no route you choose will disappoint. Made famous by its world-class university, Oxford is just wonderful for exploration and inspiration. And open areas by the flowing Isis river, ponies grazing and some of the best sunsets out there are within walking distance. It's very, very lovely in Oxford.

24Come and learn amongst the dreaming spires of Oxford! (Image credits25) 26One of the historic workshop rooms in the City Hall of Oxford. (Image credits27) 28The view of the stage in the main hall. (Image credits29) 30 Yummy Smashing Cat cupcakes! (Image credits31)

Just like last year, we'll set up an open-stage session a day before the conference, so you can publicly speak about your own experiences and discuss what worked and hasn't worked for you. We'll also put a list of all attendees on the website, so you'll know beforehand who is coming and perhaps even organize a trip to Oxford together.

Sponsors, Dear Sponsors

We pour our heart and soul into creating a friendly, memorable and inspiring community event for everybody involved. Our goal is a valuable community event with practical talks, neatly packed with lots of learning, sharing and networking opportunities.

We keep ticket prices affordable for everyone, and we're happy to welcome sponsors to help us make the conference smashing in every possible way. If you're interested in sponsoring the event, please drop us an email at cat@smashingconf.com32.


So here we go! More speakers will be announced soon, and since it's a Smashing conference, you should expect a few surprises, but we're not going to reveal them just yet. If you have any questions, send us an email at — we'd love to assist you in every possible way and would be humbled and happy to welcome you to Oxford in March!

Ah, and make sure to bring an umbrella with you, of course. But that goes without saying, doesn't it? Cheers!

.shop-that {text-align:center;margin:1.5em auto; max-width: 550px; } .pricing {text-align: center; font-size: 1.75em; /* 24px */ font-family: "Proxima Nova","Helvetica Neue",Arial,sans-serif; font-weight: bold; margin: 2.5em 0em 0 0em;color: #E25A34; display: block} .pre-order-now {font-family:"Proxima Nova","Helvetica Neue",Arial,sans-serif; font-size: 1.85em; /* 20px */color: #fff;padding: .5em 1.45em; vertical-align: middle; text-align: center; margin: 0 auto .08em;display: block; font-weight: bold; background: #F68131; width: 50%; max-width: 100%; line-height: 1.25em; background: -webkit-linear-gradient(top, #FA9334, #F4712B);background: -o-linear-gradient(top, #FA9334, #F4712B);background: linear-gradient(to bottom, #FA9334, #F4712B); border: .04em solid rgba(0,0,0,0.15);opacity: 1; border-radius: .4em; text-shadow: 0 .08em .08em rgba(0,0,0,0.1);-webkit-box-shadow: 0 .08em .1em rgba(0,0,0,0.1);box-shadow: 0 .08em .1em rgba(0,0,0,0.1); -webkit-transition: all ease .3s;-o-transition: all ease .3s;transition: all ease .3s; } .pre-order-now:hover,.pre-order-now:focus {cursor: pointer; opacity: .97; outline:0; box-shadow: 3px 5px 5px 0px #ccc;} .pre-order-now:active {opacity: 1;-webkit-box-shadow: inset 0 .13em .13em rgba(0,0,0,.4), inset 0 -.13em .13em rgba(255,255,255,.1);box-shadow: inset 0 .13em .13em rgba(0,0,0,.4), inset 0 -.13em .13em rgba(255,255,255,.1);outline:0;} .im-loving-it {font-family: "Proxima Nova","Helvetica Neue",Arial,sans-serif;font-size:1.1em;text-align:center;margin: 1em 0em 2em 0em;display: block;color: #808D91;} Footnotes
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32

The post When Flowers Start To Bloom, It’s A Sign That SmashingConf Oxford Is Coming Soon! appeared first on Smashing Magazine.

You Are Not A Machine. You Are Not Alone.

Mon, 10/27/2014 - 14:06

Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. {Geek} Mental Help Week1 starts today and we would like to help raise awareness with a couple of articles exploring these issues. – Ed.

It was pouring with rain and I found myself driving. I didn’t know where I was going. I just needed out of the house. I needed to escape. After what felt like an age I found myself parked outside my parents’ house, just staring at their front door. Eventually I got out of the car, rang the doorbell and burst into tears the moment my mum answered.

Me, a grown man. A respected figure in my field. A success. Standing on the doorstep of my parents’ house, crying to my mum like a small child. This was the breaking point for me, the minute I finally realized I had depression. In fact I’d been depressed for over a decade. Burnt out. Used up with nothing left to give.

It had started back in the late nineties when I took a job with a dot com. I had a boss who was a bully, plain and simple. He shouted, he threatened, he manipulated. I stood up to him, but it drained me. Every day was a battle.

He was replaced, but the next guy wasn’t much better. He used to put me in a room with the company’s investors and make me present to them. He knew I was a good presenter, so when things got tough he would wheel me out. But he would sit next to me through the meetings kicking me under the table when I said something he didn’t like.

In time, the dot com bubble burst and I found myself forced to make people redundant. People I knew. People I considered my friends. Worse than that was having to make redundant people I didn’t know, people who worked for companies we had acquired. When you have to make a friend redundant at least they know you find it hard, that you don’t want to do it. When you fire a stranger, you are just an evil hatchet man.

From bad experiences, good things grew. Following the dot com company folding, I and two colleagues set up Headscape, the agency I run to this day. I love Headscape. I love the people I work with. But the stress didn’t dissipate – if anything, it

I remember standing in a newsagent’s, wasting time before a big pitch. I was terrified. Terrified of not winning the work, work we needed as a company to survive. The last thing I wanted was to have to make people redundant again. I was so worried that I vomited, right there in the middle of the shop.

I love working for myself but every month is a roller coaster. Either we have too much work and I fret about delivering, or not enough and we worry about going out of business.

Then there is the pressure to keep up. The day I read Jeffrey Zeldman’s book Designing with Web Standards was one of the most terrifying of my life: the sudden realization that the table-based design I had built my career on was about to go away; that I would need to relearn my entire skill set.

Not that this was the end of the changes. The demise of Flash, the rise of user-centred design, content strategy, the mobile web, responsive design. The list goes on. Always something new to learn. Always the pressure to keep up.

Even now, twelve years into Headscape, things are hard. Like many agencies right now, we had a bad first half of the year. The sector feels like it is changing again, and so once again the pressure is on.

But this time is different. This time I will not end up on my parents’ doorstep in floods of tears. Because along the way I have learnt something. I am not a computer. I am not a machine. I am a human being.

We demand too much of ourselves as web professionals. We lie to one another, all living in a consensual delusion we build together. We talk about digital being our passion. We tell each other how great our jobs are. We work every hour in the day either in the hopes of getting bought by Google, or because we have convinced ourselves we enjoy it. Maybe we do and maybe we will be bought by Google, but is it healthy? I can tell you from experience it is not.

2I realized that I was not a machine able to work 24/7. I realized I had times of insane productivity and then periods where I needed to rest; that I could not expect to churn out high quality work without stepping away from time to time. (Image credits3)

I realized something else, too. I realized that I could be human with my colleagues, that I didn’t need to pretend to be a machine. This I discovered when I told my co-founders I was burnt out; they understood and helped lighten the load. When I shared my depression online, nobody laughed at me or thought I was weak. Instead they thanked me for allowing them to talk about their struggles.

In fact, I found huge support from total strangers, people who suffered or were going through the same difficulties as me. Far, far more than I ever could have guessed, based on the way we talk online. If you believe what we post online, we are all happy, successful and rich.

And I had one final revelation. I realized I wasn’t a machine stuck in a preprogrammed routine. I could change things. I started looking after myself both physically and mentally. I found friends outside the web. I took regular walks, found other interests, and spoke up about my struggles. I even stopped working long hours, screw the consequences. As it turned out, I just learned to work smarter. Long hours are not a badge of honor, they are a sign of failure, pure and simple.

As part of my job I meet hundreds of web designers every year, either at conferences or as part of my work within organizations. Many are contractors who never get a holiday and worry about being able to pay the bills. Others are in-house web developers so beaten down they are resigned to being trapped in their organization forever. And yet what do you read online? You read about successful startups, acquisitions, and competitors with their amazing client lists.

You might think this all sounds rather depressing but, you know, it isn’t. It is meant as an encouragement, that if you are struggling you are not alone; that there is not something wrong with you, there is something wrong with the industry.

This post gives you permission. Permission to stop being a machine and become a human being. Permission to spend some days in your pants watching daytime TV rather than working. Permission to be honest about your fears and stresses. Permission to tell somebody you are struggling and get help.

For those of you reading this thinking “Well, my work is my passion and I am happy” then good for you! But it won’t always be like that. There will be times when it gets tough. They won’t last forever but they will happen. I ask you to remember one thing when those times come… You are not a machine. Allow yourself to be human by cutting yourself some slack and getting help.

If you’d also like to get involved, please don’t hesitate to submit an article4 and share your experiences. We’d sincerely appreciate it.

(il, og)

  1. 1
  2. 2
  3. 3
  4. 4

The post You Are Not A Machine. You Are Not Alone. appeared first on Smashing Magazine.

How To Run A Content-Planning Workshop

Fri, 10/24/2014 - 09:00

Back when my agency started taking content seriously, we invested a lot time in developing a process to produce content. The biggest challenge was always figuring out how to get clients onboard with this new process.

Most of our clients were totally happy riffing on how to meet the business objectives of a project or how to approach the visual design, but they always struggled to get to grips with our process for producing content. We found that the most effective way to get their buy-in was to run a content-planning workshop.

Workshops work really well to get everyone onboard with how to produce content (while also clarifying how to agree on content). By involving as many people from the client’s side as possible in these workshops, you can really underline people’s responsibilities, while also highlighting that this process won’t happen overnight.

In this article, I’ll share the approach we developed to run content-planning workshops with our clients. While you will need to adapt the format to your scenario, you should be able to apply most of the steps.

1. Prepare

You’ll have to sort out a few things before inviting your client to the workshop. These workshops have a few components, so put in the work beforehand to make sure everything runs smoothly and you don’t have awkward pauses during the session.

Put in some planning work beforehand to make sure everything runs smoothly and to avoid awkward pauses. Find a Venue

You’ll want to get a room with a large table and a whiteboard. You could bring the client to your agency’s boardroom or do the workshop somewhere off-site that you agree on. Having an inspiring new environment is always good for the client. Sometimes the client will be engaged, but I’ve been in a few workshops where no one wanted to be there and were constantly checking their email or not taking it seriously. Working off-site might hold everyone’s interest better; it also makes it easier to set ground rules (no phones, for example).

Invite the Project Manager, Project Owner and Senior Editor

These roles will vary hugely according to the project. Either way, involve some kind of senior manager and someone on the ground who will actually be producing the content. This way, you’ll get buy-in from the top and a realistic plan from the bottom.

Invite a technical person, too, so that they can talk about CMS formatting and any details regarding migration and publishing processes. By inviting people who represent key areas of the project, you are minimizing risk. I’ve been in workshops where someone from legal turned up and effectively redefined the requirements by sharing important legal requirements.

Invite Representatives From Different Teams

Invite one or two representatives from each of these groups: writers and producers, subject experts, and digital producers. Again, these roles will vary according to your situation. Essentially, you want to get managers from a cross-section of departments, as well as the people who will actually be carrying out the production process that you map out. Be aware of organizational politics and the workloads of the people you’re involving.

Bring Materials

Bring plenty of sticky notes and markers and some big sheets of paper. These will be used throughout the workshop, and you will need enough for up to three groups.

2. Map Your Process

First, look at the production stages that a piece of content will need to go through before it is ready to be published. This generally starts with identifying the key content types (for example, “product pages,” “course summary pages,” “how-to guides”). Content types are not necessarily “pages” as such, but could be more modular components of the website — things like product specifications or staff biographies.

Look at the production stages that a piece of content will need to go through before it is ready to be published.

Once you’ve identified the main content types, look at what’s involved in taking them from a basic page brief (which outlines what an item of content is supposed to achieve) to a product that is published and maintained.

Choose a Content Type

Choose a content type that you expect to appear on your new website, such as a service or product page, a blog post or a course outline. Choose something that everyone can relate to; avoid specialized content types such as legal documents and engineering reports.

Map a Publishing Process

In groups, map out a production process to get a single piece of content published on the new website. Again, this will vary a lot according to your team (for example, depending on who will be doing the heavy lifting of producing the content).

A simple workflow might look something like this:

  1. Draft content
  2. Edit tone of voice
  3. Review internally
  4. Get approval from client
  5. Optimize for search engines
  6. Import to CMS
  7. Review web page
  8. Publish
  9. Maintain

The workflow will vary considerably from project to project. You might need to account for legal and compliance reviews or technical accuracy, or you might need to specify phases for formatting and publishing content (such as formatting for mobile or converting items into downloadable PDF documents). This is another reason to start with a fairly generic piece of content, and then move on to creating more elaborate workflows for specific content types or sections of the website.

The bias that stems from people’s roles in the project is always interesting to see (which is why having people with different roles involved in the workshop is so valuable in the first place). You might find legal representatives claiming to need four separate stages for legally reviewing every page, while a copywriter might want to break the editing for tone of voice into multiple phases. A concerted team effort should result in a workflow that is balanced, realistic and agreed on.

3. Assign Responsibility

One of the most powerful things about these workshops is that you assign responsibility, making clear who exactly is accountable for which work. Failing to clarify responsibility over content is one of the most common causes for delays. Bottlenecks happen usually because people simply do not know they were expected to produce content or because responsibility has all been put on one person. This part of the workshop should prevent such trouble.

Failing to clarify responsibility over content is one of the most common causes for delays. Assign Responsibility

Annotate each stage on your sheet with the person or role responsible for it. This might look something like this:

  1. Draft content: subject expert
  2. Edit tone of voice: copywriter
  3. Review internally: senior editor
  4. Get approval from client: project owner
  5. Optimize for search engines: SEO editor
  6. Import to CMS: CMS editor
  7. Review web page: project owner
  8. Publish: CMS editor
  9. Maintain: subject expert
Identify Lack of Ownership

Mark any stages that don’t have a clear owner. This is often a huge revelation. “We need to hire an SEO editor!” “We need a copywriter!” “We need a pastry chef!” By simply highlighting the parts of the process for which no one is responsible, you’ll quickly see where the challenges for your project lie. By acknowledging these now, you will save a huge amount of stress down the line. You might find that the plan is solid and has no gaps, or you might immediately see that hiring a copywriter will save you a whole lot of trouble. Either way, this part of the workshop is critical.

Clarify Responsibilities

Ask, “Do the people responsible know they are responsible?” This is another great opportunity to minimize risk. Make sure that everyone knows what’s expected of them, and see whether anyone has too much on their plate. A well-organized content inventory or dedicated project-management software comes in handy here.

4. Identify Risks In The Process

Building on the previous step, make sure the following questions are resolved to avoid bottlenecks.

“Do Too Many People Have a Say?”

Multiple heads are sometimes not better than one for producing content. Keep an eye out for pages or sections of the website that have a lot of editors and reviewers involved. I’ve seen so many projects delayed because content was bounced between editors for days on end, often just leading to over-edited and nonsensical text.

“Is One Person Overburdened?”

These workshops are the perfect time to assess the volume of work assigned to individuals and assess how realistically they can get it done. Give less outspoken people a chance to air their concerns, which is a lot easier when you’ve estimated the hours of work involved. Speak with each individual to review their workload.

“Do We Have the Skills Required?”

Is poorly written content a risk? Or could the content be misinformed (due to a lack of expertise)? Will the content be optimized for search engines? Go back to your content requirements and make sure you have the manpower to meet them all. If you don’t, call for some outside help.

“Where Might Things Get Political or Contentious?”

It’s an awkward subject to broach, but organizational politics could pose a serious threat to the project. I’ve often seen people hold back their opinion (or, more dangerously, overestimate their ability to deliver work) due to certain people being in the room or politics. The best way to deal with this is simply to treat all team members as equals and to ask probing questions of everyone in the room.

5. Estimate Hours

It might not be easy, but try to calculate the man hours of work required to complete each stage of the process. This isn’t the same as calculating how long it will take to complete a stage, although both are important when planning resourcing.

Estimatehow much effort is required to complete each stage. Estimate Workload

Estimate (in fractions of hours) how much effort is realistically required to complete each stage. Once you’ve come to an agreement on the time required, write the number beside each stage. If the debate about estimates is taking too long, you could try adapting the “planning poker1” technique used in scrum.

Calculate Time

Add up the time required to complete all stages. This might be a good time for a break.

Estimate Total Workload

Multiply the total time by the number of pages anticipated for the website to get an estimate of the total amount of effort required for all of your content. As mentioned, you might be dealing with modules or items of content (things like product specifications or staff biographies), rather than pages. Either way, consider the average size of these items to get a realistic estimate of the time required to get the work done. I often group together additional content, such as microcopy, treating it as a single item in the calculation.

The calculation might look like this: 4 hours (time to produce and approve one page) × 125 pages = 500 hours of work.

6. Present The Process

Everyone should review the process at the end of the workshop to be clear on what’s going to happen, who is doing what and how it will be implemented. This is also a good time to outline the next steps.

Walk Through the Process

Each group should walk the whole team through their process (on a sheet of paper) and then open up the presentation for discussion. The person facilitating the workshop should go around and get input from everyone in the room. Address any concerns or anxieties immediately. Concerns tend to focus on whether there is enough time! Also, address any technical issues that people might not feel confident asking about.

Try to film the presentations so that any absent stakeholders can keep up with the discussion.

Following this discussion, move on to the slightly more serious task of setting realistic deadlines for the content and assigning responsibility. Talk about the software you might use to host your editorial calendar2, once you have a clear idea of the process that the software has to support. Choosing the software first could lead you to have to shoehorn the process in; this is best avoided!

Workshops Work

That’s the process we’ve developed to run workshops with our clients. Hopefully, this template will help you to run successful content-planning workshops of your own and, more importantly, help you to get content finished on time and to a high standard.

With everyone on the same page (literally), the risk of delays with content production will be far less.

Additional Resources

(al, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

The post How To Run A Content-Planning Workshop appeared first on Smashing Magazine.

Reducing Abandoned Shopping Carts In E-Commerce

Thu, 10/23/2014 - 12:43

In March 2014, the Baymard Institute, a web research company based in the UK, reported that 67.91%1 of online shopping carts are abandoned. An abandonment means that a customer has visited a website, browsed around, added one or more products to their cart and then left without completing their purchase. A month later in April 2014, Econsultancy stated2 that global retailers are losing $3 trillion (USD) in sales every year from abandoned carts.

Clearly, reducing the number of abandoned carts would lead to higher store revenue — the goal of every online retailer. The question then becomes how can we, as designers and developers, help convert these “warm leads” into paying customers for our clients?

Before Cart Abandonment

Let’s begin by looking at recognized improvements we can make to an online store to reduce the number of “before cart” abandonments. These improvements focus on changes that aid the customer’s experience prior to reaching the cart and checkout process, and they include the following:

  • Show images of products.
    This reinforces what the customer is buying, especially on the cart page.
  • Display security logos and compliance information.
    This can allay fears related to credit-card and payment security.
  • Display contact details.
    Showing offline contact details (including a phone number and mailing address) in addition to an email address adds credibility to the website.
  • Make editing the cart easier.
    Make it as simple as possible for customers to change their order prior to checking out.
  • Offer alternative payment methods.
    Let people check out with their preferred method of payment (such as PayPal and American Express, in addition to Visa and MasterCard).
  • Offer support.
    Providing a telephone number and/or online chat functionality on the website and, in particular, on the checkout page will give shoppers confidence and ease any concerns they might have.
  • Don’t require registration.
    This one resonates with me personally. I often click away from websites that require lengthy registration forms to be filled out. By allowing customers to “just” check out, friction is reduced.
  • Offer free shipping.
    While merchants might include shipping costs in the price, “free shipping” is nevertheless an added enticement to buy.
  • Be transparent about shipping costs and time.
    Larger than expected shipping costs and unpublished lead times will add unexpected costs and frustration.
  • Show testimonials.
    Showcasing reviews from happy customers will alleviate concerns any people might have about your service.
  • Offer price guarantees and refunds.
    Offering a price guarantee gives shoppers the confidence that they have found the best deal. Additionally, a clear refund policy will add peace of mind.
  • Optimize for mobile.
    Econsultancy reports that sales from mobile devices increased by 63% in 2013. This represents a real business case to move to a “responsive” approach.
  • Display product information.
    Customers shouldn’t have to dig around a website to get the information they need. Complex navigation and/or a lack of product information make for a frustrating experience.

Unfortunately, even if you follow all of these recommendations, the reality is that customers will still abandon their carts — whether through frustration, bad design or any other reason they see fit.

After Cart Abandonment

The second approach is to look at things we can do once a cart has been abandoned. One tactic is to email the customer with a personalized message and a link to a prepopulated cart containing the items they had selected. This is known as an “abandoned cart email.”

The concept is pretty simple. At the right time, a customizable email is sent, complete with a personalized message and a link to the customer’s abandoned cart. Of course, this approach assumes that the customer has submitted their email address — effectively, they’ve done everything but paid. Abandoned cart emails represent one last attempt by the merchant to convince the buyer to check out.

In September 2013, Econsultancy outlined3 how an online cookie retailer recaptured 29% of its abandoned shopping carts via email. This is a huge figure and one we might naturally be skeptical of.

To get a more realistic perspective, I asked my colleagues at Shopify4 to share some of their data on this, and they kindly agreed. Shopify introduced “abandoned cart recovery” (ACR) in mid-September 2013 (just over a year ago at the time of writing). Here’s a summary of its effectiveness:

  • In the 12 months since launching automatic ACR, $12.9 million have been recovered through ACR emails in Shopify.
  • 4,085,592 emails were sent during this period, of which 147,021 carts were completed as a result. This represents a 3.6% recovery rate.
  • Shop owners may choose to send an email 6 or 24 hours after abandonment. Between the two, 6-hour emails convert much better: a 4.1% recovery rate for 6 hours versus 3% for 24 hours.

It’s worth noting that the 3.6% recovery rate is from Shopify’s ACR emails. Many merchants use third-party apps5 instead of Shopify’s native feature. Given that Shopify is unable to collect data on these services, the number of emails sent and the percentage of recovered carts may well be higher.

Given the statistics, abandoned cart emails are clearly an important part of an online retailer’s marketing strategy. Luckily, most leading e-commerce platforms enable merchants to send custom emails, either in plain text or HTML. Knowing how to implement these notifications is a useful skill if you are designing for e-commerce, and they represent added value to your services.

Creating An HTML Abandoned Cart Email

The implementation of abandoned cart emails varies from platform to platform. Some platforms require third-party plugins, whereas others have the functionality built in. For example, both plain-text and HTML versions are available on Shopify. While the boilerplates are very usable, you might want to create a custom HTML version to complement the branding of your store. We’ll look at options and some quick wins shortly.

In recent years, HTML email newsletters have really flourished. You only have to look at the many galleries6 to see how far this form of marketing has progressed. Sending an HTML version, while not essential, certainly allows for more flexibility and visual design (although always sending a plain-text version, too, is recommended). However, it’s not without its pain points.

If you’ve been developing and designing for the web since the 1990s, then you will remember, fondly or otherwise, the “fun” of beating browsers into shape. Designing HTML newsletters is in many ways a throwback to this era. Table-based layouts are the norm, and we also have to contend with email clients that render HTML inconsistently.

Luckily for us, the teams at both Campaign Monitor7 and MailChimp8 have written extensively on this subject and provide many solutions to common problems. For example, Campaign Monitor maintains a matrix and provides a downloadable poster9 outlining the CSS support of each major desktop and mobile email client. MailChimp, for its part, provides numerous resources on CSS10 and email template design11. Familiarizing yourself with the basics before tackling your first HTML email is worthwhile — even if you ultimately use a template.

Open-Source Responsive Email Templates

While many of you might wish to “roll your own” template, I often find it easier to build on the great work of others. For example, a number of great open-source projects focus on HTML email templates, including Email Blueprints12 by MailChimp.

Another example comes from Lee Munroe. His “transactional HTML email templates13” differ in that they are not intended for use as newsletters, but rather as “transactional” templates. To clarify the difference, Lee breaks down transactional email into three categories:

  • action emails
    “Activate your account,” “Reset your password”
  • email alerts
    “You’ve reached a limit,” “A problem has occurred”
  • billing emails
    monthly receipts and invoices

The templates are purposefully simple yet elegant. They also have the added benefit of having been throughly tested in all major email clients. Finally, because they are responsive, they cater to the 50+%14 of emails opened via mobile devices.

The Challenge

Lee’s templates are a good option for creating a simple HTML email for abandoned carts. Therefore, let’s move on from the theory and look at how to create an HTML template for the Shopify platform.

Let’s begin by setting some constraints on the challenge:

  1. make the fewest number of markup changes to Lee’s template;
  2. make use of the boilerplate text that is set as the default in the abandoned cart HTML template in Shopify;
  3. inline all CSS (a best practice for HTML email);
  4. send a test email with dummy data, and review the results in Airmail, Gmail and Apple Mail (on iOS).
1. Create a Local Copy of the Action Email Template

Having looked at the three templates, the “action” version appears to offer the best starting point. You can download the HTML for this template directly from GitHub15 if you wish to follow along.

The first step is to take the contents of Lee’s template and save it locally as abandoned-cart.html. A quick sanity check in a browser shows that the style sheet isn’t being picked up.

16Basic template setup. (View large version17)

Inlining all CSS is recommended (we’ll look at this in a later step), so add the styles to the <head> section of abandoned-cart.html. You can copy the CSS in its entirety from GitHub18 and then paste it in a <style> element. Another check in the browser shows that the styles are being applied.

CSS applied. 2. Add the Content

Now that the template is working as a standalone document, it’s time to look at integrating Liquid19’s boilerplate code from Shopify’s default template. This can be found in the Shopify admin section under “Settings” → “Notifications” → “Abandoned cart.” If you wish to follow along with these code examples, you can set up a free fully featured development store20 by signing up to Shopify’s Partner Program21.

Hey{% if %} {{ }}{% endif %}, Your shopping cart at {{ shop_name }} has been reserved and is waiting for your return! In your cart, you left: {% for line in line_items %}{{ line.quantity }}x {{ line.title }}{% endfor %} But it’s not too late! To complete your purchase, click this link: {{ url }} Thanks for shopping! {{ shop_name }}

All notification emails in Shopify make use of Liquid, the templating language developed by Shopify and now available as an open-source project and found in tools such as Mixture22 and software such as Jekyll23 and SiteLeaf24. Liquid makes it possible to pull data from the store — in this case, all of the details related to the abandoned cart and the user it belonged to.

Having studied the markup, I’ve decided to place the boilerplate content in a single table cell, starting on line 2725 of Lee’s original document.

After pasting in the boilerplate code, let’s double-check that the template renders as expected in the browser. At this stage, Liquid’s code is appearing “as is.” Only once the template is applied to Shopify’s template will this be replaced with data from the store.

Boilerplate text added. 3. Modify the Boilerplate Code

The next stage involves tidying up some of the boilerplate code, including wrapping the boilerplate text in <p> tags. Then, it’s time to work out how best to display the cart’s contents in markup. For speed, I’ve chosen an unordered list. Liquid’s refactored for loop26 is pretty straightforward:

<ul> {% for line in line_items %} <li>{{ line.quantity }} x {{ line.title }}</li> {% endfor %} </ul>

After another sanity check, things are looking much more promising. However, we need to make a few final tweaks to make it work:

  • remove unwanted table rows,
  • add the correct link to the blue call-to-action button,
  • change the contents of the footer.
Tidying up. 4. Make Final Adjustments

Lee’s template includes markup to create a big blue “Click me” button. You can see this on line 3827:

<a href="" class="btn-primary">Upgrade my account</a>

Let’s turn this into a relevant link by changing the markup to this:

<p><a href="{{ url }}" class="btn-primary">Check out now</a></p> Adding the call-to-action URL.

In this case, {{ url }} represents the link to the abandoned (and saved) cart. I’ve enclosed the anchor in a paragraph to ensure consistent spacing when the email is rendered, and I’ve moved it up into the main section.

Finally, we’ve changed the unsubscribe link in the footer to a link to the shop:

<a href="{{ shop.url }}">Visit {{ shop_name }}</a>

After a few minutes of editing, the template looks more than respectable. However, we’ve neglected one section, the text in the yellow highlighted “alert” section. I’ve changed this, along with the title element in the HTML, to this:

Changing the header text and footer link. Your cart at {{ shop_name }} has been reserved and is waiting for your return!

Email notifications in Shopify have access to a number of variables that can be accessed via Liquid. A full list is available in Shopify’s documentation28.

5. Inline the CSS

To recap, we’ve changed the template’s markup very little, and the CSS is identical to Lee’s original (albeit in the template, rather than in an external file). Shopify’s boilerplate text is also intact, albeit with a very small change to Liquid’s for loop.

The next step is to inline the CSS in the HTML file. Because some email clients remove <head> and <style> tags from email, moving the CSS inline means that our email should render as intended. Chris Coyier penned “Using CSS in HTML Emails: The Real Story29” back in November 2007 — the landscape hasn’t changed much since.

Thankfully, taking your CSS inline isn’t a long or difficult process. In fact, it’s surprisingly easy. A number of free services30 enable you to paste markup and will effectively add your styles inline.

I’ve chosen Premailer31 principally because it has a few extra features, including the ability to remove native CSS from the <head> section of the HTML document, which saves a few kilobytes from the file’s size. After pasting in the markup and pressing “Submit,” Premailer generates a new HTML version that you can copy and paste back into your document. It also creates a plain-text version of the email, should you need it.

32Premailer has the ability to remove native CSS which saves a few kilobytes. (View large version33)

Another great feature of Premailer is that you can view the new markup in the browser. You’ll find a link above the text box containing the new markup, titled “Click to View the HTML Results.” Clicking the link opens a hosted version of the new markup, which you can use to check your sanity or share with colleagues and clients.

If you are keen to automate the creation of e-commerce notification emails, then Premailer also offers an API34. A number of libraries that support it are also available on GitHub, including PHP-Premailer35.

The final task is to copy the new HTML code and paste it in the “HTML” tab of our abandoned cart notification in Shopify’s admin area. Once it’s applied, you can preview the email in the browser, as well as send a dummy copy to an email address.

36Shopify admin. (View large version37)

Below are the results in various email clients (both mobile and desktop).

Airmail 38Airmail rendering. (View large version39) Apple Mail 40Apple Mail rendering. (View large version41) Gmail (Browser) 42Gmail rendering. (View large version43) Apple Mail on iOS 44Apple Mail on iOS rendering. (View large version45)

The process of turning Lee’s template into a usable email took around 30 minutes, and I am pretty pleased with the result from such little input.

Of course, this process screams out for automation. For those who are interested, Lee has also posted about his workflow for creating HTML email templates46 and the toolkit he uses (Sketch, Sublime, Grunt, SCSS, Handlebars, GitHub, Mailgun, Litmus).

Taking It Further

The template produced above is admittedly quite basic and only scratches the surface of what is possible. We could do plenty more to customize our email for abandoned carts, such as:

  • consider tone of voice,
  • show product images to jog the customer’s memory,
  • add a discount code to encourage the user to return and buy,
  • add upsells,
  • list complementary products.
Dodo Case

Tone of voice is a key consideration and goes a long way to engaging the customer. Dodo Case4947 has a great example:

48Dodo Case4947’s email for abandoned carts. (View large version50)

As always, context is very important when it comes to tone of voice. What’s right for Dodo Case might not be right for a company specializing in healthcare equipment.

Let’s review a few examples (taken from Shopify’s blog51) to get a taste of what other companies are doing.

Fab 52Fab5553’s email for abandoned carts. (View large version54)

While this email from Fab5553 is pretty standard, the subject line is very attention-grabbing and is a big call to action.

Chubbies 56Chubbies57’ email for abandoned carts. (View large version58)

The language and tone used in Chubbies’ email really stands out and is in line with the brand: fun-loving people. There’s also no shortage of links back to the cart, including the title, the main image and the call to action towards the bottom of the email.

Black Milk Clothing 59Black Milk60’s email for abandoned carts. (View large version61)

Black Milk Clothing62 includes a dog photo and employs playful language, such as “Your shopping cart at Black Milk Clothing has let us know it’s been waiting a while for you to come back.”

Holstee 63Holstee6664’s email for abandoned carts. (View large version65)

Finally, Holstee6664 asks if there’s a problem they can help with. It even goes so far as to include a direct phone number to its “Community Love Director.” Having worked with Holstee, I can confirm that this is a real position within the company!


While there are many tactics to persuade customers to buy, inevitably some people will get to the payment screen and decide not to continue. Any tactic that helps to seal the deal is certainly worth considering, and given the small amount of work involved in implementing an email to recover abandoned carts, it’s a great place to start. Designers and developers are in a powerful position to help their clients increase their revenue, and being armed with tactics such as the ones outlined in this article will hopefully enable them to offer a wider range of services.

Further Reading

(al, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30;ion=1&amp;espv=2&amp;ie=UTF-8#q=inline+css+html+email
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70

The post Reducing Abandoned Shopping Carts In E-Commerce appeared first on Smashing Magazine.

Design Accessibly, See Differently: Color Contrast Tips And Tools

Wed, 10/22/2014 - 13:07

When you browse your favorite website or check the latest version of your product on your device of choice, take a moment to look at it differently. Step back from the screen. Close your eyes slightly so that your vision is a bit clouded by your eyelashes.

  • Can you still see and use the website?
  • Are you able to read the labels, fields, buttons, navigation and small footer text?
  • Can you imagine how someone who sees differently would read and use it?

In this article, I’ll share one aspect of design accessibility: making sure that the look and feel (the visual design of the content) are sufficiently inclusive of differently sighted users.

1Web page viewed with NoCoffee low-vision simulation. (View large version2)

I am a design consultant on PayPal’s accessibility team. I assess how our product designs measure up to the Web Content Accessibility Guidelines (WCAG) 2.0, and I review our company’s design patterns and best practices.

I created our “Designers’ Accessibility Checklist,” and I will cover one of the most impactful guidelines on the checklist in this article: making sure that there is sufficient color contrast for all content. I’ll share the strategies, tips and tools that I use to help our teams deliver designs that most people can see and use without having to customize the experiences.

Our goal is to make sure that all visual designs meet the minimum color-contrast ratio for normal and large text on a background, as described in the WCAG 2.0, Level AA, “Contrast (Minimum): Understanding Success Criterion 1.4.3523.”

Who benefits from designs that have sufficient contrast? Quoting from the WCAG’s page:

The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

As an accessibility consultant, I’m often asked how many people with disabilities use our products. Website analytics do not reveal this information. Let’s estimate how many people could benefit from designs with sufficient color contrast by reviewing the statistics:

  • 15% of the world’s population have some form of disability4, which includes conditions that affect seeing, hearing, motor abilities and cognitive abilities.
  • About 4% of the population have low vision, whereas 0.6% are blind.
  • 7 to 12% of men have some form of color-vision deficiency (color blindness), and less than 1% of women do.
  • Low-vision conditions increase with age, and half of people over the age of 50 have some degree of low-vision condition.
  • Worldwide, the fastest-growing population is 60 years of age and older5.
  • Over the age of 40, most everyone will find that they need reading glasses or bifocals to clearly see small objects or text, a condition caused by the natural aging process, called presbyopia6.

Let’s estimate that 10% of the world population would benefit from designs that are easier to see. Multiply that by the number of customers or potential customers who use your website or application. For example, out of 2 million online customers, 200,000 would benefit.

Some age-related low-vision conditions7 include the following:

  • Macular degeneration
    Up to 50% of people are affected by age-related vision loss.
  • Diabetic retinopathy
    In people with diabetes, leaking blood vessels in the eyes can cloud vision and cause blind spots.
  • Cataracts
    Cataracts clouds the lens of the eye and decreases visual acuity.
  • Retinitis pigmentosa
    This inherited condition gradually causes a loss of vision.

All of these conditions reduce sensitivity to contrast, and in some cases reduce the ability to distinguish colors.

Color-vision deficiencies, also called color-blindness, are mostly inherited and can be caused by side effects of medication and age-related low-vision conditions.

Here are the types of color-vision deficiencies8:

  • Deuteranopia
    This is the most common and entails a reduced sensitivity to green light.
  • Protanopia
    This is a reduced sensitivity to red light.
  • Tritanopia
    This is a reduced sensitivity to blue light, but not very common.
  • Achromatopsia
    People with this condition cannot see color at all, but it is not very common.

Reds and greens or colors that contain red or green can be difficult to distinguish for people with deuteranopia or protanopia.

Experience Seeing Differently

Creating a checklist and asking your designers to use it is easy, but in practice how do you make sure everyone follows the guidelines? We’ve found it important for designers not only to intellectually understand the why, but to experience for themselves what it is like to see differently. I’ve used a couple of strategies: immersing designers in interactive experiences through our Accessibility Showcase, and showing what designs look like using software simulations.

In mid-2013, we opened our PayPal Accessibility Showcase9 (video). Employees get a chance to experience first-hand what it is like for people with disabilities to use our products by interacting with web pages using goggles and/or assistive technology. We require that everyone who develops products participates in a tour. The user scenarios for designing with sufficient color contrast include wearing goggles that simulate conditions of low or partial vision and color deficiencies. Visitors try out these experiences on a PC, Mac or tablet. For mobile experiences, visitors wear the goggles and use their own mobile devices.

Fun fact: One wall in the showcase was painted with magnetic paint. The wall contains posters, messages and concepts that we want people to remember. At the end of the tour, I demonstrate vision simulators on our tablet. I view the message wall with the simulators to emphasize the importance of sufficient color contrast.

Showcase visitors wear goggles that simulate low-vision and color-blindness conditions. Some of the goggles used in the Accessibility Showcase. Software Simulators Mobile Apps

Free mobile apps are available for iOS and Android devices:

  • Chromatic Vision Simulator
    Kazunori Asada’s app simulates three forms of color deficiencies: protanope (protanopia), deuteranope (deuteranopia) and tritanope (tritanopia). You can view and then save simulations using the camera feature, which takes a screenshot in the app. (Available for iOS6210 and Android6311.)
  • VisionSim
    The Braille Institute’s app simulates a variety of low-vision conditions and provides a list of causes and symptoms for each condition. You can view and then save simulations using the camera feature, which takes a screenshot in the app. (Available for iOS6412 and Android.)13
Chromatic Vision Simulator

The following photos show orange and green buttons viewed through the Chromatic Vision Simulator:

14Seen through Chromatic Vision Simulator, the green and orange buttons show normal (C), protanope (P), deuteranope (D) and tritanope (T). (View large version15)

This example highlights the importance of another design accessibility guideline: Do not use color alone to convey meaning. If these buttons were online icons representing a system’s status (such as up or down), some people would have difficulty understanding it because there is no visible text and the shapes are the same. In this scenario, include visible text (i.e. text labels), as shown in the following example:

16The green and orange buttons are viewed in Photoshop with deuteranopia soft proof and normal (text labels added). (View large version17) Mobile Device Simulations

Checking for sufficient color contrast becomes even more important on mobile devices. Viewing mobile applications through VisionSim or Chromatic Vision Simulator is easy if you have two mobile phones. View the mobile app that you want to test on the second phone running the simulator.

If you only have one mobile device, you can do the following:

  1. Take screenshots of the mobile app on the device using the built-in camera.
  2. Save the screenshots to a laptop or desktop.
  3. Open and view the screenshots on the laptop, and use the simulators on the mobile device to view and save the simulations.
How’s the Weather in Cupertino?

The following example highlights the challenges of using a photograph as a background while making essential information easy to see. Notice that the large text and bold text are easier to see than the small text and small icons.

18The Weather mobile app, viewed with Chromatic Vision Simulator, shows normal, deuteranope, protanope and tritanope simulations. (View large version19) Low-Vision Simulations

Using the VisionSim app, you can simulate macular degeneration, diabetic retinopathy, retinitis pigmentosa and cataracts.

20The Weather mobile app is being viewed with the supported condition simulations. (View large version21) Adobe Photoshop

PayPal’s teams use Adobe Photoshop to design the look and feel of our user experiences. To date, a color-contrast ratio checker or tester is not built into Photoshop. But designers can use a couple of helpful features in Photoshop to check their designs for sufficient color contrast:

  • Convert designs to grayscale by going to “Select View” → “Image” → “Adjustments” → “Grayscale.”
  • Simulate color blindness conditions by going to “Select View” → “Proof Setup” → “Color Blindness” and choosing protanopia type or deuteranopia type. Adobe provides soft-proofs for color blindness22.

If you’re designing with gradient backgrounds, verify that the color-contrast ratio passes for the text color and background color on both the lightest and darkest part of the gradient covered by the content or text.

In the following example of buttons, the first button has white text on a background with an orange gradient, which does not meet the minimum color-contrast ratio. A couple of suggested improvements are shown:

  • add a drop-shadow color that passes (center button),
  • change the text to a color that passes (third button).

Checking in Photoshop with the grayscale and deuteranopia proof, the modified versions with the drop shadow and dark text are easier to read than the white text.

If you design in sizes larger than actual production sizes, make sure to check how the design will appear in the actual web page or mobile device.

23Button with gradients: normal view; view in grayscale; and as a proof, deuteranopia. (View large version24)

In the following example of a form, the body text and link text pass the minimum color-contrast ratio for both the white and the gray background. I advise teams to always check the color contrast of text and links against all background colors that are part of the experience.

Even though the “Sign Up” link passes, if we view the experience in grayscale or with proof deuteranopia, distinguishing that “Sign Up” is a link might be difficult. To improve the affordance of “Sign Up” as a link, underline the link or link the entire phrase, “New to PayPal? Sign Up.”

25Form example: normal view; in Photoshop, a view in grayscale; and as a proof, deuteranopia. (View large version26)

Because red and green can be more difficult to distinguish for people with conditions such as deuteranopia and protanopia, should we avoid using them? Not necessarily. In the following example, a red minus sign (“-”) indicates purchasing or making a payment. Money received or refunded is indicated by a green plus sign (“+”). Viewing the design with proof, deuteranopia, the colors are not easy to distinguish, but the shapes are legible and unique. Next to the date, the description describes the type of payment. Both shape and content provide context for the information.

Also shown in this example, the rows for purchases and refunds alternate between white and light-gray backgrounds. If the same color text is used for both backgrounds, verify that all of the text colors pass for both white and gray backgrounds.

27Normal view and as a proof, deuteranopia: Check the text against the alternating background colors. (View large version28)

In some applications, form fields and/or buttons may be disabled until information has been entered by the user. Our design guidance does not require disabled elements to pass, in accordance with the WCAG 2.0’s “Contrast (Minimum): Understanding Success Criterion 1.4.34129:

Incidental: Text or images of text that are part of an inactive user interface component,… have no contrast requirement.

In the following example of a mobile app’s form, the button is disabled until a phone number and PIN have been entered. The text labels for the fields are a very light gray over a white background, which does not pass the minimum color-contrast ratio.

If the customer interprets that form elements with low contrast are disabled, would they assume that the entire form is disabled?

30Mobile app form showing disabled fields and button (left) and then enabled (right). (View large version31)

The same mobile app form is shown in a size closer to what I see on my phone in the following example. At a minimum, the text color needs to be changed or darkened to pass the minimum color-contrast ratio for normal body text and to improve readability.

To help distinguish between labels in fields and user-entered information, try to explore alternative visual treatments of form fields. Consider reversing foreground and background colors or using different font styles for labels and for user-entered information.

32Mobile app form example: normal, grayscale and proof deuteranopia. (View large version33) NoCoffee Vision Simulator for Chrome

NoCoffee Vision Simulator6634 can be used to simulate color-vision deficiencies and low-vision conditions on any pages that are viewable in the Chrome browser. Using the “Color Deficiency” setting “achromatopsia,” you can view web pages in grayscale.

The following example shows the same photograph (featuring a call to action) viewed with some of the simulations available in NoCoffee. The message and call to action are separated from the background image by a practically opaque black container. This improves readability of the message and call to action. Testing the color contrast of the blue color in the headline against solid black passes for large text. Note that the link “Mobile” is not as easy to see because the blue does not pass the color-contrast standard for small body text. Possible improvements could be to change the link color to white and underline it, and/or make the entire phrase “Read more about Mobile” a link.

35Simulating achromatopsia (no color), deuteranopia, protanopia using NoCoffee. (View large version36) 37Simulating low visual acuity, diabetic retinopathy, macular degeneration and low visual acuity plus retinitus pigmentosa, using NoCoffee. (View large version38) Using Simulators

Simulators are useful tools to visualize how a design might be viewed by people who are aging, have low-vision conditions or have color-vision deficiencies.

For design reviews, I use the simulators to mock up a design in grayscale, and I might use color-blindness filters to show designers possible problems with color contrast. Some of the questions I ask are:

  • Is anything difficult to read?
  • Is the call to action easy to find and read?
  • Are links distinguishable from other content?

After learning how to use simulators to build empathy and to see their designs differently, I ask designers to use tools to check color contrast to verify that all of their designs meet the minimum color-contrast ratio of the WCAG 2.0 AA. The checklist includes a couple of tools they can use to test their designs.

Color-Contrast Ratio Checkers

The tools we cite in the designers’ checklist are these:

There are many tools to check color contrast, including ones that check live products. I’ve kept the list short to make it easy for designers to know what to use and to allow for consistent test results.

Our goal is to meet the WCAG 2.0 AA color-contrast ratio, which is 4.5 to 1 for normal text and 3 to 1 for large text.

What are the minimum sizes for normal text and large text? The guidance provides recommendations on size ratios in the WCAG’s Contrast (Minimum): Understanding Success Criterion 1.4.34129 but not a rule for a minimum size for body text. As noted in the WCAG’s guidance, thin decorative fonts might need to be larger and/or bold.

Testing Color-Contrast Ratio

You should test:

  • early in the design process;
  • when creating a visual design specification for any product or service (this documents all of the color codes and the look and feel of the user experience);
  • all new designs that are not part of an existing visual design guideline.
Test Hexadecimal Color Codes for Web Designs

Let’s use the WebAIM Color Contrast Checker4239 to test sample body-text colors on a white background (#FFFFFF):

  • dark-gray text (#333333).
  • medium-gray text (#666666).
  • light-gray text (#999999).

We want to make sure that body and normal text passes the WCAG 2.0 AA. Note that light gray (#999999) does not pass on a white background (#FFFFFF).

43Test dark-gray, medium-gray and light-gray using the WebAim Color Contrast Checker.(View large version44)

In the tool, you can modify the light gray (#999999) to find a color that does pass the AA. Select the “Darken” option to slightly change the color until it passes. By clicking the color field, you will have more options, and you can change color and luminosity, as shown in the second part of this example.

45In the WebAim Color Contrast Checker, modify the light gray using the “Darken” option, or use the color palette to find a color that passes. (View large version46)

Tabular information may be designed with alternating white and gray backgrounds to improve readability. Let’s test medium-gray text (#666666) and light-gray text (#757575) on a gray background (#E6E6E6).

Note that with the same background, the medium text passes, but the lighter gray passes only for large text. In this case, use medium gray for body text instead of white or gray backgrounds. Use the lighter gray only for large text, such as headings on white and gray backgrounds.

47Test light-gray and medium-gray text on a gray background. (View large version48) Test RGB Color Codes

For mobile applications, designers might use RGB color codes to specify visual designs for engineering. You can use the TPG Colour Contrast Checker49. you will need to install either the PC or Mac version and run it side by side with Photoshop.

Let’s use the Colour Contrast Checker to test medium-gray text (102 102 102 in RGB and #666666 in hexadecimal) and light-gray text (#757575 in hexadecimal) on a gray background (230 230 230 in RGB and #E6E6E6 in hexadecimal).

  1. Open the Colour Contrast Checker application.
  2. Select “Options” → “Displayed Color Values” → “RGB.”
  3. Under “Algorithm,” select “Luminosity.”
  4. Enter the foreground and background colors in RGB: 102 102 102 for foreground and 230 230 230 for background. Mouse click or tab past the fields to view the results. Note that this combination passes for both text and large text (AA).
  5. Select “Show details” to view the hexadecimal color values and information about both AA and AAA requirements.
50Colour Contrast Analyser, and color wheel to modify colors. (View large version51)

In our example, light-gray text (117 117 117 in RGB) on a gray background (230 230 230 in RGB) does not meet the minimum AA contrast ratio for body text. To modify the colors, view the color wheels by clicking in the “Color” select box to modify the foreground or background. Or you can select “Options” → “Show Color Sliders,” as shown in the example.

Colour Contrast Analyser, with RGB codes. Show color sliders to modify any color that does not meet minimum AA guidelines.

In most cases, minor adjustments to colors will meet the minimum contrast ratio, and comparisons before and after will show how better contrast enables most people to see and read more easily.

Best Practices

Test for color-contrast ratio, and document the styles and color codes used for all design elements. Create a visual design specification that includes the following:

  • typography for all textual elements, including headings, text links, body text and formatted text;
  • icons and glyphs and text equivalents;
  • form elements, buttons, validation and system error messaging;
  • background color and container styles (making sure text on these backgrounds all pass);
  • the visual treatments for disabled links, form elements and buttons (which do not need to pass a minimum color-contrast ratio).

Documenting visual guidelines for developers brings several benefits:

  • Developers don’t have to guess what the designers want.
  • Designs can be verified against the visual design specification during quality testing cycles, by engineers and designers.
  • A reference point that meets design accessibility guidelines for color contrast can be shared and leveraged by other teams.

If you are a designer, try out the simulators and tools on your next design project. Take time to see differently. One of the stellar designers who reviewed my checklist told me a story about using Photoshop’s color-blindness proofs. On his own, he used the proofs to refine the colors used in a design for his company’s product. When the redesigned product was released, his CEO thanked him because it was the first time he was able to see the design. The CEO shared that he was color-blind. In many cases, you may be unaware that your colleague, leader or customers have moderate low-vision or color-vision deficiencies. If meeting the minimum color-contrast ratio for a particular design element is difficult, take the challenge of thinking beyond color. Can you innovate so that most people can pick up and use your application without having to customize it?

If you are responsible for encouraging teams to build more accessible web or mobile experiences, be prepared to use multiple strategies:

  • Use immersive experiences to engage design teams and gain empathy for people who see differently.
  • Show designers how their designs might look using simulators.
  • Test designs that have low contrast, and show how slight modifications to colors can make a difference.
  • Encourage designers to test, and document visual specifications early and often.
  • Incorporate accessible design practices into reusable patterns and templates both in the code and the design.

Priorities and deadlines make it challenging for teams to deliver on all requests from multiple stakeholders. Be patient and persistent, and continue to engage with teams to find strategies to deliver user experiences that are easier to see and use by more people out of the box.

References Low-Vision Goggles and Resources

(hp, al, il, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73

The post Design Accessibly, See Differently: Color Contrast Tips And Tools appeared first on Smashing Magazine.

Hybrid Mobile Apps: Providing A Native Experience With Web Technologies

Tue, 10/21/2014 - 09:00

According to a recent report1, HTML is the most widely used language for mobile app developers. The main reasons among developers for selecting web technologies2 are cross-platform portability of code and the low cost of development. We’ve also heard that hybrid apps tend to be sluggish and poorly designed. Let’s prove whether it’s possible to deliver the native look and feel that we’re used to.

This article provides many hints, code snippets and lessons learned on how to build great hybrid mobile apps. I’ll briefly introduce hybrid mobile app development, including its benefits and drawbacks. Then, I’ll share lessons I’ve learned from over two years of developing Hojoki and CatchApp, both of which run natively on major mobile platforms and were built with HTML, CSS and JavaScript. Finally, we’ll review the most prominent tools to wrap code in a native app.

What Are Hybrid Mobile Apps?

Mobile apps can be generally broken down into native, hybrid and web apps. Going the native route allows you to use all of the capabilities of a device and operating system, with a minimum of performance overhead on a given platform. However, building a web app allows your code to be ported across platforms, which can dramatically reduce development time and cost. Hybrid apps combine the best of both worlds, using a common code base to deploy native-like apps to a wide range of platforms.

There are two approaches to building a hybrid app:

  • WebView app
    The HTML, CSS and JavaScript code base runs in an internal browser (called WebView) that is wrapped in a native app. Some native APIs are exposed to JavaScript through this wrapper. Examples are Adobe PhoneGap3 and Trigger.io4.
  • Compiled hybrid app
    The code is written in one language (such as C# or JavaScript) and gets compiled to native code for each supported platform. The result is a native app for each platform, but less freedom during development. Examples are Xamarin5, Appcelerator Titanium6 and Embarcadero FireMonkey7.

While both approaches are widely used and exist for good reasons, we’ll focus on WebView apps because they enable developers to leverage most of their existing web skills. Let’s look at all of the benefits and drawbacks of hybrid apps compared to both native and mobile web apps.

  • Developer can use existing web skills
  • One code base for multiple platforms
  • Reduced development time and cost
  • Easily design for various form factors (including tablets) using responsive web design
  • Access to some device and operating system features
  • Advanced offline capabilities
  • Increased visibility because the app can be distributed natively (via app stores) and to mobile browsers (via search engines)
  • Performance issues for certain types of apps (ones relying on complex native functionality or heavy transitions, such as 3D games)
  • Increased time and effort required to mimic a native UI and feel
  • Not all device and operating system features supported
  • Risk of being rejected by Apple if app does not feel native enough (for example, a simple website)

These drawbacks are significant and cannot be ignored, and they show that the hybrid approach does not suit all kinds of apps. You’ll need to carefully evaluate your target users, their platforms of choice and the app’s requirements. In the case of many apps, such as content-driven ones, the benefits outweigh the drawbacks. Such apps can typically be found in the “Business and Productivity,” “Enterprise” and “Media” categories in the app store.

Both Hojoki and CatchApp are very content-driven productivity apps, so we initially thought they would be a great match for hybrid development. The first three benefits mentioned above were especially helpful to us in building the mobile app for Hojoki in just four weeks. Obviously, that first version lacked many important things. The following weeks and months were filled with work on optimizing performance, crafting a custom UI for each platform and exploiting the advanced capabilities of different devices. The learning in that time was crucial to making the app look and feel native. I’ll share as many lessons as possible below.

So, how do you achieve a native look and feel? To a mobile web developer, being able to use the features of a device and operating system and being able to package their app for an app store sounds just awesome. However, if users are to believe it is a native app, then it will have to behave and look like one. Accomplishing this remains one of the biggest challenges for hybrid mobile developers.

Make Your Users Feel at Home

A single code base doesn’t mean that the app should look and feel exactly the same on all platforms. Your users will not care at all about the underlying cross-platform technology. They just want the app to behave as expected; they want to feel “at home.” Your first stop should be each platform’s design guidelines:

While these guidelines might not perfectly suit all kinds of apps, they still provide a comprehensive and standard set of interfaces and experiences that users on each platform will know and expect.

DIY vs. UI Frameworks

Implementing all of these components, patterns and animations on your own can be quite a challenge. All kinds of frameworks exist to help you with that, ranging from commercial (Kendo UI11) to open-source ones (Ionic12) and from ones with a common UI (jQuery Mobile13 and Onsen UI14) to many platform-specific UIs (Sencha Touch7615 and ChocolateChip-UI16). Some are really good at providing a pixel-perfect layout, while others are rather sloppy, thus making it easy for the user to identify a web app. However, my impression is that their main drawbacks are performance-related, because most UI frameworks try to be as all-embracing as possible. Judge for yourself by taking a few minutes to try the demos on your own device.

At Hojoki, we try to craft all components on our own using CSS3 and minimal JavaScript. This keeps us in control of performance and reduces overhead. We obviously use small libraries for complicated tasks that someone else has solved just fine.

Custom UI Components

Custom UI components also have many good use cases. Deciding between a platform’s UI and a custom UI will obviously depend on your target audience. If you want to do your own thing, you should have a deep understanding of UX design, because the guidelines linked to above were crafted by experts to meet the particular requirements of their platform’s users.

Whether you stick to a platform’s UI guidelines or do your own thing with custom components, know that there are certain design patterns that most people use every day and love. How are people usually introduced to a new app? Through a slideshow walkthrough or an instructional overlay. How do people navigate? With a tab bar or a sidebar drawer17. How do users quickly load or refresh data? By pulling to refresh. (Native-like scrolling will be covered extensively further below.)

Resources for Mobile UI Design Design A Native-Looking Header Bar

One important part of a UI is the header bar, with its title and navigation elements, most notably the “up” and “back” buttons. To me, many popular frameworks fail to provide a HTML and CSS solution that compares to a native app. Mimicking this part of the UI with a minimal DOM and a few lines of CSS for each platform is actually fairly easy:

<header> <button class="back">Feed</button> <h1>Details</h1> <!-- more actions (e.g. a search button on the right side) --> </header>

Check out the full code of the native-looking header bar for iOS, Android and Windows Phone21 on JSFiddle. This is my result:

Native-looking headers made with HTML5 and CSS.

Using the same DOM across all platforms is generally preferable because it results in cleaner code and, therefore, maximizes maintainability. I’ve found this to be easily possible for many UI components on iOS and Android (including the header bar, tab bar, custom navigation menu, settings page, popover and many more). However, this becomes much harder when adding support for Windows Phone, which comes with some very different design patterns.

Support High-Resolution Screens

Nowadays, smartphones and tablets with high-resolution screens make up the vast majority of mobile devices, making up more than 80% of iOS devices22 and over 70% on Android devices23. To make your images look crisp for everyone, you usually have to deliver twice the dimensions than what is actually shown in your app. Serving properly sized images for all different resolutions is one of the most discussed topics in responsive web design. There are various approaches, each with its benefits and drawbacks related to bandwidth, code maintainability and browser support. Let’s quickly review the most popular ones, in no particular order:

  • server-side resizing and delivering
  • client-side detection and replacement via JavaScript
  • HTML5 picture element
  • HTML5 srcset attribute
  • CSS image-set
  • CSS media queries
  • Resolution-independent images (SVG)

As always, there is no silver bullet for responsive images. It pretty much depends on the type of images and how they are used in the app. For static images (such as the logo and tutorial images), I try to use SVG. They scale perfectly without any extra effort and have great browser support as long as you’re fine with Android 3+24.

When SVG is not an option, the HTML5 picture element and srcset attributes25 are definitely where front-end development is heading. Currently, their main drawback is the very limited browser support and, therefore, their need for polyfills.

In the meantime, CSS background images and media queries26 are the most pragmatic solution:

/* Normal-resolution CSS */ .logo { width: 120px; background: url(logo.png) no-repeat 0 0; } /* HD and Retina CSS */ @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min--moz-device-pixel-ratio: 1.25), only screen and ( -o-min-device-pixel-ratio: 1.25/1), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) { .logo { background: url(logo@2x.png) no-repeat 0 0; background-size: 120px; /* Equal to normal logo width */ } }

However, your app might already contain a lot of content (such as news articles), and adjusting all of the img tags or replacing them with CSS would be exhausting. A server-side solution is the best choice in this case.

Starting last year, more and more Android manufacturers have gone one step further with what is called XXHDPI (or very very high-resolution) screens. Whichever solution above fits your need, keep in mind that you’ll need images that are three times the original dimensions to support Android’s latest flagship devices.

Use System Fonts

A simple yet important way to make users feel at home is to use system fonts.

Native fonts for iOS27, Android28 and Windows Phone29.

These are my recommended font stacks on the major platforms:

/* iOS */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Android */ font-family: 'RobotoRegular', 'Droid Sans', sans-serif; /* Windows Phone */ font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

Furthermore, iOS 7 offers some interesting presets that automatically set the correct font family, font size and line height. It’s as easy as using font: -apple-system-body for normal text and font: -apple-system-headline for headings. This not only simplifies font declarations, but also improves accessibility through “dynamic type30,” Apple’s system-wide font-size setting. You can dig deeper into iOS 7 font presets in a post by Thomas Fuchs31.

An Icon Is Worth A Thousand Words

Iconography is an important part of the user experience on all major mobile platforms. As with fonts, you’re usually best off using icons that your target audience already knows. Recalling what I said about high-resolution screens earlier, make sure that your icons are scaleable. Implementing them as a font via CSS’ @font-face rule is a great way to achieve this, and it comes with wide browser support32. It even allows you to change an icon’s appearance (for example, its color, shadow and transparency) seamlessly via CSS. Here are my recommendations:

  1. Get various platform icon fonts.
    Ionicons33 is our baseline set because it includes nearly everything we need. This includes specific icons for iOS and Android in addition to their general ones. The rest come from specific platform icon fonts for iOS34, Android set 135 and set 236 and Windows Phone37.
  2. Combine them with a icon font generator.
    Using multiple icon fonts is confusing and quickly adds up in size. That is why we use Fontello38 to combine the different sets, adjust key codes and export them for each platform. The result is <span class="icon">s</span>, which looks like a search icon on iOS, Android and Windows Phone. Also, check out the popular alternatives IcoMoon39 and Fontastic40.

On Windows Phone, you can also get away with the native font-family: 'Segoe UI Symbol'41.

Optimize For Performance

Performance is usually considered to be one of the major disadvantages of a hybrid mobile app. This is mostly true if your app has a lot of heavy animations, contains huge scrolling lists and needs to run on old devices. However, if you are all right with supporting only newer platform versions (Android 4+, iOS 7+ and Windows Phone 8+), then you’ll very likely have satisfying results. It’s ultimately a question of how much effort you put into optimizing DOM and CSS selectors, writing performant JavaScript, reducing rendering time and minimizing the number of reflows and repaints. An endless number of articles and tutorials cover mobile web performance. These are some of my favorites:

Beyond that, mobile hardware and rendering engines are improving at a rapid pace, with new devices coming out every other day. Developers can make the performance of a hybrid WebView app difficult to distinguish from that of a fully native app on the iPhone 5 series and on Android phones comparable to Nexus 4 and 5.

Increase Perceived Speed

Building a performant app is one thing, but making it feel fast is a whole other. Whether your app needs some time for a certain task (such as some heavy calculation or client-server communication), presenting instant feedback is crucial to providing a fluid and responsive experience. A common technique is to delay tasks that the user doesn’t need yet, while predicting and preloading the steps the user might take next. A famous example is Instagram, which uploads photos in the background47 while the user is busy adding tags and sharing. Perceived speed can be very different from actual speed, so let’s use it in our favor. Here are some no-brainers.

Remove the Click Delay on Touch Devices

A normal JavaScript click event handler on a touch device comes with a slight delay between the touchstart and the click being fired (usually around 300 milliseconds). This feature is built into the browser to detect whether the user is performing a single- or double-tap. If you don’t need the “double-tap to zoom” feature, you can safely eliminate these 300 milliseconds to get a much more responsive tap behavior. My favorite solution for this is the FastClick48 library. Use it on everything except Internet Explorer:

if ('ontouchstart' in window) { window.addEventListener('load', function() { FastClick.attach(document.body); }, false); }

Internet Explorer 10+ is a bit easier. You just need some CSS:

html { -ms-touch-action: manipulation; /* IE 10 */ touch-action: manipulation; /* IE 11+ */ } Style the Active State

As soon as the user taps an actionable element such as a button or a link, they should immediately get some kind of feedback that the app has detected their action. While the CSS pseudo-class :hover works great for this on the desktop, you need to switch to :active or a JavaScript solution for it to work on mobile. I’ve compared the three approaches to the active state49 on JSFiddle. While they all work one way or another, you judge which is best for you.

Furthermore, remove the default tap highlight while adjusting your active states on mobile. I’d also recommend disabling user selections on actionable elements, because the selection menu would be quite disruptive if the user accidentally taps the button for too long.

iOS and Android:

button { outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

Windows Phone 8+:

<meta name="msapplication-tap-highlight" content="no"> Indicate Loading

Whenever your app is performing an action that will take some time to finish, even just for a second, consider adding a loading indicator. If you don’t, users will think that your app freezes occasionally, or they’ll click around when they shouldn’t, or they might even break things and then blame your app. From what I’ve experienced, animated GIFs are usually a bad idea in mobile browsers. As soon as there is a load on the CPU, the GIF freezes, thus defeating its entire purpose. I prefer Spin.js50 for its configurability and ease of use. Also, check out some other JavaScript solutions51 and CSS loaders52.

Cross-platform tools like PhoneGap and also provide access to native loaders, which is great for showing a full-screen loading animation.

Get the Scrolling Right

Scrolling is one of the most important factors in the user experience of many apps. This is both a curse and a blessing because the success of its implementation will depend heavily on the scrolling niceties that your app relies on and on the mobile operating systems that need to be supported.

Scrollable content and a fixed header and/or footer bar are common to nearly all apps. There are two common approaches to achieving this with CSS:

  1. Enabling scrolling on the body, and applying position: fixed to the header;
  2. Disabling scrolling on the body, and applying overflow: scroll to the content;
  3. Disabling scrolling on the body, and applying JavaScript custom scrolling to the content.

While the first option has some benefits (such as iOS’s native scroll-to-top action and a simple code structure), I highly recommend going with the second option, overflow: scroll. It has fewer rendering issues53 (although still a lot), and browser support is great on modern platforms (Android 4+, iOS 5+ and Windows Phone 8+), with a nice little polyfill for some older ones54. Alternatively, you could replace overflow: scroll with a custom scrolling library (the third option), such as iScroll55. While these JavaScript solutions allow for more flexibility with features (for example, the scroll position during momentum, event handling, customization of effects and scrollbars, etc.), they always penalize performance. This becomes critical when you’re using a lot of DOM nodes and/or CSS3 effects (such as box-shadow, text-shadow, opacity and rgba) in the content area.

Let’s look at some of the basic scrolling features.

Momentum Effect

The touch-friendly momentum effect enables users to quickly scroll through large content areas in an intuitive way. It can be easily activated with some simple CSS on iOS 5+ and in some versions of Chrome for Android. On iOS, this will also enable the content to bounce off the top and bottom edges.

overflow-y: scroll; -webkit-overflow-scrolling: touch; Pull Down to Refresh

Various solution for this are available on the web, such as the one by Damien Antipa5756. While the solutions for iOS and Windows Phone have a similar look and feel, Android recently introduced its own mechanism (see below). We’ve implemented this in CatchApp using some JavaScript and CSS keyframes. (I have yet to wrap it up nicely and put it on GitHub, so stay tuned!)

Pull down to refresh on iOS. (Image credit: Damien Antipa5756)
Pull down to refresh on Android. (Image credit: Android Widget Center58)
Pull down to refresh on Windows Phone. (Image credit: David Washington59) Scroll to Top

Unfortunately, disabling scrolling on the body will also break iOS’ native feature that enables users to quickly get to the top of the page by tapping the status bar. I’ve written a small script that can be added to any element and that takes care of scrolling to the top using JavaScript60, even if the content is currently in momentum. Add it to the header of your mobile website or to the status bar with a native plugin (for example, in PhoneGap).

Many other scrolling features could be implemented on top of the native overflow: scroll, such as snapping to a certain element or just infinite scrolling. If your requirements are more advanced, definitely look at the JavaScript options out there.

Make It Easy To Hit Stuff

When performing a touch action, users will quite often miss their target by a few pixels, especially on small buttons (such as the ones in iOS’ top bar). Developers can assist users while keeping the design elegant by enabling an invisible touch area around small targets:

<button> <div class="innerButton">Click me!</div> </button>

You’ll have to put the event handler on the button element, while restricting the styles to div.innerButton. Check out the full example, including CSS61, on JSFiddle.

Using Touch Gestures

A smartphone is all about touching and gestures. We swipe, pinch, zoom, drag and long-tap all the time when interacting with touch devices. So, why not offer users the same means of controlling your hybrid app? QuoJS62 and Hammer.js63 are well-known libraries for supporting all kinds of gestures. If you’d like more choice, check out Kevin Liew’s comparison of “11 Multi-Touch and Touch Events JavaScript Libraries64.”

Don’t Miss Out on Native Functionality

Building your app with web technology doesn’t necessarily mean that you can’t use native features. In fact, all major cross-platform development tools provide built-in access to the most important functionality. This includes APIs for device data, the file system, the network connection, geolocation, the accelerometer, notifications (including push) and much more.

You can usually even extend a development tool by building custom plugins. At Hojoki, we added many missing features, including reading the user’s setting for push notifications for our app, detecting the user’s time zone, and checking whether a third-party app is installed and launching it. Let’s look at two very simple examples for things that can be realized with native plugins. First, let’s enable JavaScript focus() for input fields on iOS 6+:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 6) { [YourWebView setKeyboardDisplayRequiresUserAction:NO]; }

And here’s the code to copy a given string to the device’s clipboard on iOS:

[[UIPasteboard generalPasteboard] setString:@"Your copied string"]; Always Provide a Way Out

Web developers often overlook how to handle bad situations in a hybrid app (for example, a connection timeout, a bad input, a timing issue, etc.). A hybrid app is fundamentally different from a website, mainly because there is no global refresh button, and an app can easily run in the background for weeks on some mobile operating systems. If the user runs into a dead end, their only option will be to restart the app, which entails force quitting and then restarting. Many people don’t even know how to do that, especially on Android 2.x (where it’s hidden deep in the app’s settings) and on iOS 6 and below (where you have to double-tap the home button, long-press the icon and kill it).

So, ignore the refresh button during development, and handle bad situations as they come up. For all other situations that would have unexpected outcomes, such as ones involving client-server communication, be prepared for things to go wrong, and provide a way out for users. This could be as easy as showing a full-screen error message — “Oops! Something bad happened. Please check your connection and try again” — with a big “Reload” button below.

How To Wrap It

Developing a hybrid mobile app means using the same tools and processes that you would usually use to develop (mobile) websites. Having said that, one thing I really like about the hybrid approach is that you can deploy HTML, CSS and JavaScript code as a mobile web app with relative ease. Make sure to implement fallbacks for native features, or find elegant workarounds if they are not supported at all. Most mobile developers prefer to keep users in a native app, and you could even advertise the app to your mobile website’s users.

65A native WebView wrapper, with an HTML, CSS and JavaScript code base. (View large version66)

What about the native part? Your mobile web app (plain HTML, CSS and JavaScript) will be loaded in a WebView, which is an internal browser engine that renders an app the way a default browser on the device would render it (there might be slight differences — your mileage may vary). Additionally, native “bridges” are used to expose features of the device and operating system through an API to make them accessible with JavaScript. This usually includes access to the device’s camera, address book, geolocation, file system and native events (for example, via one of the hardware buttons on Android), to name just a few features.

A few cross-platform development tools provide that native bridge and simplify the whole process of wrapping it. Let’s dive into some options.

PhoneGap and Apache Cordova

PhoneGap67 is certainly one of the most popular tools for cross-platform development. The name itself is often used synonymously with hybrid mobile app development.

There has been some confusion about its name68 and relation to Apache Cordova69, which is understandable. The latter is a top-level Apache project that was formerly called PhoneGap. It offers a set of device APIs to access native functionality from HTML, CSS and JavaScript code running in a WebView. Now, Adobe PhoneGap is a distribution of Cordova — not unlike the way Chrome uses WebKit as its engine.

Both are open-source and free to use, with support for all major platforms and with an active community developing all kinds of plugins and extensions.

PhoneGap has shaped the hybrid lanscape significantly, and many new tools have emerged that offer additional services or that streamline the development process. They usually add a lot of convenience by enabling you to build an app in the cloud, thereby saving you the effort of locally installing all of the different platform SDKs and tools. Each tool has a different focus, level of platform support and price:

Sencha Touch

Sencha Touch7615 started out as a UI framework for the mobile web and has been around for years. Traditionally, developers have used Sencha to build an app while using another service, like PhoneGap, to deploy it as a hybrid app. Nowadays, Sencha offers this kind of functionality built in for free. Platform support includes iOS and Android (both via Sencha’s own native packager) BlackBerry, Windows 8 and more (via PhoneGap Build).

At Hojoki, we started using Trigger.io77 two and a half years ago because we were looking for a lightweight alternative to PhoneGap. Even though iOS and Android are its only supported platforms, it offers a good set of native APIs, custom plugins and third-party integration (including Parse push notifications, Flurry analytics and parts of Facebook’s SDK).’s command-line tools allowed us to integrate the app’s packaging into our Grunt78 build process, which is great if you love automation.

One of its key features is Reload9179, which enables developers to push HTML, CSS and JavaScript updates to an app on the fly. Unlike PhoneGap Build’s Hydration80, Reload is specifically designed for development and production apps. This makes it possible to legally bypass Apple’s submission process to push bug fixes and iterate quickly with A/B testing.

Once the 14-day trial is up,’s steep pricing81 is probably the biggest downside for many developers.

With MoSync82 having gone offline a couple of days ago, seems to be the only remaining tool that is not associated with PhoneGap.

Test on Real Devices

Building a mobile app with web technologies obviously tempts us to do most of our testing in a web browser. This might be fine when developing non-native features, but definitely avoid it when releasing. Test with as many manufacturers, platforms and form factors as possible before submitting the app. Android’s fragmentation brings endless possibilities of differences in browser rendering, unsupported features and manufacturer modifications. While iOS does much better with rendering differences, Apple has a growing number of devices with varying sizes, resolutions and pixel densities. Check out “Prioritizing Devices: Testing and Responsive Web Design83” to learn more.

When Facebook famously ditched most of its HTML5 and went native in 2012, it cited missing debugging tools and developer APIs84 as one of its main reasons. LinkedIn drew the same conclusions85 half a year later, stating that HTML5 itself is ready, but basic tools and the ecosystem don’t support it yet. From what I’m seeing, the situation is getting better, with remote debugging in WebView on Android 4.4+ and an increasing number of development tools on all platforms:

Start Thinking in Terms of Hard Releases

When building an app for web browsers, deploying a hot fix to users is a simple step, which means that testing can lose some of its importance. This obviously needs to be reconsidered when you’re releasing an app through an app store. Think of it like software development in the ’90s: You’re now living in the world of hard releases.

So, why is this bad? First, the submission process could easily take a week or two (Hello, Apple!). Secondly, even if your hot fix is released quickly, that doesn’t guarantee that users will update the app any time soon. Here are my suggestions:

  1. Make testing a high priority.
  2. Have some kind of “force update” logic to deprecate old client versions.
  3. Use mechanisms like’s Reload9179 to fix code on the fly.
  4. Apply for an expedited app review92 (Apple only) if you need to be fast.
Get It in the Stores

The tools mentioned above spit out a binary for each platform, which can then be submitted to the relevant store. From this point on, the process is exactly the same as publishing a “normal” native app. Some of the tools we’ve looked at might even have better documentation for this. Nevertheless, here are the official guides:


Now that our hybrid mobile apps have been in Apple’s App Store and in Google Play for two years, I’d like to recapitulate some of the benefits and drawbacks mentioned at the beginning of this article.

For us, a web startup company with very limited resources and no native iOS or Android experience, building an app for multiple platforms in just a few weeks would have been impossible. Choosing the hybrid path enabled us to reuse a lot of code from the web app and to iterate quickly based on user feedback. We’ve even managed to publish native apps for Windows 8 for the desktop and Microsoft Surface as well as Mac OS X with exactly the same code base. The effort of moving to another platform will depend largely on the capabilities of the given browser and device and on the level of your need for native functionality. We needed push notifications, in-app purchases and access to the user’s contacts, among other things. Depending on your needs, a lot of native functionality could make you heavily dependent on the native wrapping tool that you choose.

Finally, let’s see whether hybrid apps really can deliver a native look and feel. Below is a compilation of user reviews from the app stores. Both positive and negative comments are included, but many of the negative reviews are for early releases, which had the same UI for all platforms and was comparatively slow in performance.

★ Great idea, but not a good app. The app runs extremely slow on my Samsung Galaxy Ace and Tab. The app also looks and controls like an iPhone app. This is confusing when you have never had an iPhone.

★★ Another reason apps should not use WebViews for UI.

★★ Service great but WebView app sucks.

★★★ It’s the right app in concept, but it really is too laggy to be practically used. And I’m using Jellybean so there is no excuse.

★★★ It lags a lot and the UI is not beautiful.

★★★ Good but very very slow.

★★★★ This app is very handy, but is a little slow to boot up.

★★★★★ This is working really hard well since the update. It’s a great app to begin with and now it’s working smoother and faster than before.

★★★★★ Extremely smooth and effective.

★★★★★ The app work flawlessly…

★★★★★ Beautiful designed app! Love the interface and the great overview of all your tools! Good job! Keep shippin!

★★★★★ This is an absolutely beautiful aggregate that runs buttery smooth, even on a 3GS. Recommend to anyone doing any sort of project.

We’re definitely moving away from platform-specific app development and towards the many new technologies that are emerging. Larry Page said this97 when asked at Google I/O last year about the future of the web:

In the very long term, I don’t think you should have to think about, as a developer, am I developing for this platform or another, or something like that. I think you should be able to work at a much higher level, and software you write should run everywhere, easily.

The (mobile) web is a major success story in this regard. Being able to use this platform and still be able to distribute an app in all stores is a huge step forward. It will be interesting to see how this all plays out. Whatever happens, using a technology that over a third of the world’s population98 (over two thirds in Europe and the US) relies on probably won’t be a bad choice.

(da, al, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98

The post Hybrid Mobile Apps: Providing A Native Experience With Web Technologies appeared first on Smashing Magazine.

Improving Your Information Architecture With Card Sorting: A Beginner’s Guide

Mon, 10/20/2014 - 13:29

Information architecture (IA) is one of those buzzwords you’ve probably heard before. It refers to the organization of the information on your website and how it all fits together. When planning your IA, involve users of your website in the process as soon as you can.

In this article, we’ll discuss card sorting, a tried and true technique for doing just that. We’ll go through some practical tips for running a card-sorting session, and also cover some examples.

What Is Information Architecture?

One of the great things about modern web design is the way it considers users’ needs from the start. Successful projects are successful often because the owners commit to understanding users, their backgrounds and their goals as early as possible. Like anything else in this game, though, a successful project takes work and planning.

1Good IA helps to make a project successful. It makes content easy to find on a complex website. This is also helped by effective navigation; however, there is some confusion about the difference between the two. What is the difference, anyway? (Image source2) Good Navigation Starts With Good IA

IA refers to the structure of information on a website, and it is depicted with site maps, diagrams and spreadsheets. Navigation refers to elements of an interface that people use to make their way through that structure — menus, breadcrumbs, links — and it is depicted in wireframes or prototypes. Therefore, improving IA starts with analyzing the website’s content and structure first — navigation comes after.

As with many website improvements, it helps to use techniques that involve users. Card sorting is one such technique that has been used for many years due to its reliability and effectiveness. To start with, we’ll examine the causes of poorly organized information — prevention is always better than a cure! We’ll then cover some practical tips for running your own card-sorting sessions and consider how they can improve the IA in your own projects.

Bad IA Is Everywhere

Bad organization can happen anywhere. When was the last time you spent ages looking for something within a complex system and couldn’t find it? A typical example is trying to find something at a large supermarket. Most people could easily find household staples in the frozen goods, dairy or fresh produce section. But which section would you visit to find more obscure products? Where would you find gluten-free bread, your favorite imported brand of hot sauce or that artisanal handmade bean dip you tried at the party last weekend?

Where’s the Hot Sauce?

I sometimes struggle when looking for products at my supermarket, which increases my frustration. I usually end up asking a store employee where to find the item, assuming I haven’t left the store already. The same is true of the web, except that users are even less patient. If users can’t find what they want in seconds, by either browsing or searching, they’re unlikely to stick around. As a result, websites (and supermarkets) benefit greatly from an intuitive structure and organization. Unfortunately, some fail to address these issues properly, leading to lost sales as customers grow frustrated and leave.

How Bad IA Happens

It’s not difficult to end up with a badly organized website, despite one’s best intentions. But how does a website end up like this in the first place?

One of the most common reasons is that the IA is created from the business structure of the organization, rather than from users’ needs. This is the default option for many clients. More common still is when the information is organized according to the preferences and whims of senior members in the company. This is often due to the influence of the HIPPO3 (the highest paid person’s opinion), usually made by an assertive individual who often lacks a grasp of what makes a good website.

The Importance of Content Strategy

For larger websites, the issue is often the lack of a clear content strategy. Managing content is crucial for websites that are large or frequently updated. Content strategy covers processes like:

  • who updates the website and how often,
  • the system for managing old or out-of-date content,
  • maintaining the taxonomies for content on the website (tags, types, categories, labels).

As web professionals, we take pride in our work and planning abilities. Being confronted by an overbearing HIPPO and archaic content strategies is frustrating. However, both of these problems have a common solution. User-centered techniques such as card sorting are powerful because they enable you to be much more scientific in diagnosing and fixing website problems. Later on, we’ll look at how card sorting and content strategy work hand in hand.

How Card Sorting Helps

So, how do we get users involved in organizing the information on our website? Ideally, we want a solution that’s cheap, quick and useful. Thankfully, card sorting is all three of these. The process is much like it sounds. You write down all of the discrete elements that you wish to organize onto cards, and then ask participants to collect them into groups that make sense to them. But is that all there is to it? When can it be used, and what should the outcome be?

When to Use It?

The process of organizing content is fraught with questions. Should it be grouped by type or by subject? Which category does this FAQ question belong to? Card sorting answers these types of questions and is useful in many situations. Some specific examples include:

  • classifying the products in an e-commerce store,
  • organizing questions in an FAQ section,
  • untangling a complex site map.

One of the great things about card sorting is that it needn’t be confined to client projects or even websites. After having used it for clients, we saw its value as a general purpose tool. We have started using it in our own internal meetings to incorporate feedback from our team about how to organize a particular business process or how to structure an upcoming presentation.

Ultimately, the goal of any card sort is to improve the labelling, grouping and organization of information. However, it is best suited to organizing content, and it won’t fix everything on its own. If your website is very task-focused (if it’s an airline-booking website, for example), then card sorting on its own will provide limited benefit. Best to direct your energies towards usability testing, especially if your time or budget is tight.

Card sorting can be useful in your own internal meetings when you need to organize something. It’s a great way to incorporate feedback from your team. (View large version5) Open or Closed?

Card sorting sessions can be classified as one of two types — open or closed. Open card sorting is the more flexible option of the two. Here, users are free to organize the cards you supply into groups that make sense to them, and then come up with their own names for these groups. They are also free to rename cards or make their own suggestions for new cards if they wish.

This type is best when you want to understand how users would group your content. Gathering their ideas and suggestions for names and labels goes a long way to making your website more intuitive.

The alternative method, closed card sorting, is where the categories or labels are fixed. This is useful when you want to understand how users fit content into an existing structure. It’s also used when new content needs to be added to a website.

As an example, consider an e-commerce website and the top-level categories they might have for their products, such as technology, home and garden, and sports and leisure. Now suppose that the store has started stocking a new range of products that have just been launched. Which top-level category on the website should these products be added to? Involving users in a closed card sort could help you to arrive at an answer.

Sometimes you can mix the two techniques. Run an open card sort with one group of users to define the top-level categories. Then run a closed card sort using these new categories, and see how easy it is for users to fit existing content into them.

This Time, It’s Personal

Traditionally, card sorting is as low-tech as it gets, requiring no advanced technology or software. You simply write all of the items on pieces of paper or cards, spread them out on a table, and let your users have their way with them. This method is the most widely used because it’s cheap, quick and intuitive. Being in the same room as your users means you’ll be on hand to guide them through the process.

6OptimalSort is an online tool for card sorting. (Image source7) (View large version8)

The focus of this article is offline sessions, but online sorting tools, such as OptimalSort309 and ConceptCodify2910, present some key advantages. Recruiting participants is easier, which makes it easier to scale up. Many feature advanced reporting tools to identify correlations and patterns, which can take a lot of time when done manually. Free tools such as Trello11 also work well for card sorting, but you lose the ability to generate reports.

The disadvantages of online services are that they are often a lot more expensive and you lose that personal touch. You’ll gain unique insight by observing people’s behavior and body language, which online sessions can’t capture.

Step By Step 1. Prepare

The first task in running an offline session is to prepare your cards. Create a document that lists all of the items you are testing, and give each one a number — spreadsheets are ideal for this. These items could be pages in a site map, product categories or labels in a taxonomy. Each item in this list then gets written on a single card, with the corresponding number written on the reverse. This numbering will help if you want to run more advanced analysis once the sessions are complete.

For the cards themselves, use actual cards instead of paper, which can get lost, worn out or torn easily. Also, don’t test too many things at once. From experience, I can say that no more than 50 to 70 items per session is about right. If you’re trying to organize a massive system, break it up into chunks, and then run sessions for each chunk.

This is pretty much all you need. And a table. (Image source13) (View large version14)

Choosing what to write on the cards can be challenging. Ideally, the labels should be short enough that they can be read quickly, but long enough to make sense and for participants to understand what is being represented. Short titles usually make sense only in the context of the group they belong to. Therefore, summarizing the content as briefly as possible could help, rather than simply using a title.

For example, a label like “More information about our phones” would be preferable to just “More information.” The second item would make sense within an existing parent group named “Our phones,” but on its own it doesn’t make much sense.

In summary:

  • Use a spreadsheet when preparing your cards.
  • Get cards that are durable.
  • Find a balance for labels between simple and intuitive.
2. Walk Before You Can Run

If this is your first time using this technique, use it in a smaller project if you can. Organizing and analyzing the results will be easier, and it will be an opportunity to fine-tune your technique for next time. One decision you’ll need to make early on is whether to run group or individual sessions. The answer usually depends on the complexity of the system, as well as your time and budget. If you’re just starting out, get your feet wet with individual sessions first — you can always scale up later if you need to.

When you’re organizing a lot of content, groups of three users will reach consensus faster. However, they will need more moderation, and they could cost you more time and money. You also run the risk of dealing with aggressive HIPPOs, which can skew the results.

How many users should you include in a session? For the data to be useful, you will need more users than for a typical usability test. Jakob Nielsen recommends about 15 users15 to arrive at statistically useful results. Be wary of including more and more users in your tests, however, because the returns diminish as you go higher.

In summary:

  • If this is your first go with card sorting, try it on a smaller project first.
  • Groups reach consensus faster.
  • Individual sessions are easier to moderate.
  • Get around 15 participants to achieve useful results.
3. Find Participants

The next step is to find participants. For best results, find actual users of the website, especially if it’s a niche or specialized system. If you’re trying to improve the organization of a student intranet, for example, find students. For something more general, like a large e-commerce website, find users with a broad range of demographic indicators, such as age, income or technical ability.

If possible, involve your client in finding users. The client could even provide them directly — say, if you’re redesigning a staff intranet. Offering a small financial incentive, like a gift voucher, also helps to make sure they turn up.

In summary:

  • For niche websites or intranets, find existing users.
  • For more general websites, find users from varied demographics.
  • Clients are often helpful in finding participants.
4. Put It All Together

The final step in preparation is to get the meeting room ready. Get a large table or notice board — the bigger the better. You’ll also need some kind of recording system in place. This could be anything from a camcorder to a smartphone, as long as it enables you to play back the audio and video from the session. Make sure enough drinks and refreshments are on hand, too.

Once you’ve prepared the cards and your users have arrived, it’s time to run the sessions! Provide clear instructions, and let the users know you will be recording their sessions for later review. Explain that you want them to organize the cards into groups that make sense to them and that there is no right or wrong answer. If you’re running an open card sort, get some blank cards for them to write their own names once the initial organization stage is over.

While you’re running the sessions, you might need to act as a moderator. Be on hand if they get stuck (there will likely be a lot of “ums” and “ahs”), but explain that this isn’t a problem. In fact, knowing where they are getting stuck is useful because it indicates a problem with labelling. If they find some cards difficult to classify at all, then leave them off to one side and note what they are. Also, be aware that the demands on you as a moderator will increase in group settings.

In summary:

  • Record each session and take notes.
  • There is no right or wrong answer.
  • The demands on you as a moderator will increase with more participants.
5. Wrap Up

Once they have gotten as far as they can, feel free to ask some questions if you have time. You could ask them to explain their choices in more detail, what made them hesitate about this particular card, and so on.

Finally, record the arrangement they’ve made. The easiest way to do this is simply by taking a photo, but in a small room it can be hard to make sure that all of the cards are in the shot. Taking a photo isn’t always feasible, so if you have numbered the cards, then you can note which numbers were grouped together. This will also help you when you do a more detailed statistical analysis of the groupings, which is out of scope of this article.

Once that’s done, write the participant’s name on your notes and photos. To reduce any potential bias, shuffle the cards for the next user, and then invite them in.

In summary:

  • Taking photos is a quick way to record the arrangements.
  • Ask questions if you have time.
  • Shuffle the cards before each session to reduce bias.
Further Tips
  • Offering a small incentive is a good way to encourage participation.
  • When choosing what to sort, try to choose content from similar levels (i.e. category pages or individual help topics). Mixing child and parent categories is confusing.
  • Provide clear instructions. Have an idea of what you want to say before you start.
  • Provide blank cards and a marker pen for new suggestions — essential for open card sorting.
  • Try not to interrupt participants unless they ask for help.
  • It’s OK if participants can’t group everything. This is useful information.
  • Set a time limit for each session, which will make scheduling much easier.
  • In individual sessions, ensure that no one else is present. This would be distracting.
  • Always record the sessions, and take notes!
Interpreting The Results

Congratulations! You’ve just run your first card-sorting sessions, and your notebook is full of fresh insights. The next step is to interpret the results. Because this is probably your first card-sorting session, you won’t have mountains of results to sort.

For each participant, document two sets of observations for each session. The first step is to create a new document, and then transfer any notes that you made during that session. These should be qualitative observations, such as any new names that were suggested and whether the person hesitated on a particular card.

Next, note that participant’s groupings. You could simply arrange the groupings in a bulleted list in your document or show the groupings in a spreadsheet. A spreadsheet is ideal if you want to perform some advanced statistical analysis later. Various methods and pieces of software can do this for you, and the specifics of this could fill another article by themselves. The important thing is to depict the hierarchy, the parent-child relationships, that each participant created.

What to Look For

Once this is complete, it’s time for analysis. This is as much art as science. The goal is to identify trends that correlate across different sessions, and to answer some of the following questions:

  • Which items appeared together most often?
  • Which items did participants struggle to classify?
  • What new suggestions or labels were made?
  • Were any items put in more than one grouping?
  • Were any other items of interest brought up during the sessions?

If many users organized the cards in a similar way, then the job is fairly straightforward. It’s a matter of applying that same organization to your content. If you have time, then follow up with further user testing to confirm that the new structure is superior to the old one.

For IAs that are complex, users often come up with wildly different structures. You might need to involve a larger group until broad trends emerge. This is the hard part, and it might take a couple of passes to sift through the chaff and get to the good stuff. After running a few sessions, you’ll get the hang of it.

Online tools are a great help in these situations because they make statistical analysis much easier. Advanced techniques of analysis include creating dendrograms. These are tree-like diagrams that show the grouping of information within hierarchies and show how closely items are related. Some online services provide tools for making these, but they’re quite onerous and out of scope for this article.

Dendrograms represent visual groupings of information, but they are tricky to create without specialized software. (Image source17) (View large version18) Example From A Real-World Project Background

Recently, the team at Decibel Digital19 worked on the redesign of a major UK animal charity website. The existing website had a section simply named “A–Z,” which contained hundreds of pages. A lot of the pages were genuinely useful and included varied content such as news, help, videos and downloads. The problem was that there was little to no structure. Everything was simply mixed together and then organized alphabetically. It was the largest section of the website by far, so locating what you needed without relying on search was incredibly hard.

Upon speaking with the digital team, we realized that part of the problem was a lack of oversight. Anyone in the company was able to upload new content to this section, and they would often upload duplicate content with a slightly different name. Over many years, the content in this section grew into a chaotic mess, like an asteroid belt — and just as difficult to navigate.

Running a Content Audit

Getting into the habit of auditing content before redesigning a website is a good thing. We gathered all of the website’s pages and their URLs in a spreadsheet, along with a short description of the content — text, images, video, articles and so on. These URLs can be exported from an existing CMS, but we used a tool named Screaming Frog20.

SEO Spider is a nifty little utility that crawls a website and lists all of its pages and elements. You can use this list to perform a content audit. (View large version22)

Once the spreadsheet was prepared, the next step was to evaluate the content. We used a method called a ROT analysis. We checked each piece of content using the following criteria:

  • R: Is the content redundant?
  • O: Is it outdated?
  • T: Is it trivial?

Working through the website’s content like this can seem laborious, but it was actually very therapeutic. The client felt relieved once they started unravelling the content monster that their old website had spawned, which made everyone feel better about the project. Using this ROT analysis made it faster to reach consensus on choosing pages to remove or archive. Pretty soon, the content was whittled down to manageable levels. The next step was to figure out how to organize this content. Enter card sorting!

A content audit is way more fun than a tax audit. (View large version24) Running a Card-Sorting Session

Following on our content audit, we all felt that the existing A–Z section wasn’t really fit for the purpose, despite a lot of the content being useful and valuable. We decided to run a card-sorting session to organize the content in a way that would inform the new website’s navigation. The goal was to develop a structure that made the content browser-friendly and easily findable without the user having to rely on search.

What to Test?

The website still had a lot of pages, so we had to decide which to include in the sessions. Having too many cards to sort becomes laborious and difficult, so we decided to include only first- and second-level pages to keep things manageable. We also didn’t include utility pages, such as “Contact Us,” “Privacy Policy” and the like, which are commonly found on many other websites. Once this was done, we had about 50 pages left, which we felt was ideal to begin the sessions.

Finding Users

The next step was to find users to test, for which we enlisted the help of the client. The users of the website tended to skew to an older female demographic, so having the client’s input here was very useful. Some of the users we tested had already engaged with the client in offline marketing activity and were excited to help!

Open vs. Closed

We decided to run an open card sort because the content from the existing A–Z section was diverse, comprising news, videos, blog posts, help articles and advice. We wanted to rely on the users’ input to create labels for these content types that made sense to them. As a result, we supplied plenty of blank cards and pens for them to write their own suggestions.

During each session, we took plenty of notes, particularly about the items that users found difficult to sort and any suggestions they made for new labels that we hadn’t considered. We also recorded each session as a backup, so that we could go over the recordings later to observe anything we missed.

What We Found

At the conclusion of the sessions, we took photos of the groupings and updated our spreadsheets. We looked for quantitative data — were there any trends? Did multiple users make similar suggestions for new labels? Did any labels consistently cause users to struggle? We looked at qualitative data, too: specific comments that users made or what they said out loud as they struggled to categorize a particular card.

25The results from your card-sorting sessions might surprise you. (View large version26)

Being a charity, the client relies a lot on donations and support from the public, so getting the labels for these sections right was important. We found some interesting points:

  • The website offered annual paid memberships as a means of supporting the charity, as well as the ability to register a free account on the website. These were labelled as “Register an account” and “Become a member”; however, many users were confused by the difference. We ended up changing the wording of the membership call to action to eliminate the confusion.
  • We had suggested the name “Knowledge Centre” as a label for the help content, but many users suggested alternatives. We ended up using “Help & Advice” on the website instead.
  • The charity ran monthly “Appeals” as another means of getting donations, and it also campaigned on many issues that were listed in “Campaigns.” Lacking any context, though, every user we tested struggled to differentiate these cards. We ended up incorporating the “Campaigns” section into another area of the website.
  • To indicate a desire to support, nearly every user suggested the term “Get Involved” as a major category label. We noticed this convention on other charity websites, too.

After all this was done, we presented our findings in a report. We decided not to include masses of quantitative data. While it was useful to us internally, we felt the client would be unfamiliar with the quantitative data and wouldn’t know how to interpret it without sufficient explanation.

Instead, we presented our key findings (like those listed above) in plain English, and we classified our findings as high, medium and low priority. We also included some recommendations on how to resolve the issues we found. This made it much easier for the client to identify “quick wins” with their content’s structure, and it made it easier for us to implement the required improvements.

The client doesn’t always need to see the messy details. Putting your key findings into a clear report is often preferable. (View large version28) Final Thoughts

Card sorting is a favored technique because it’s cheap, reliable and easy to set up. It’s a great way to become familiar with concepts such as information architecture and user-centred design. Remember that it’s not a silver bullet, and it won’t fix all of the problems on an existing website. A website might be performing poorly or be hard to use for many reasons, and improving the IA might address only some of them. However, when used in tandem with other user-centered design techniques, it can go a long way to starting off a project or redesign on the right foot.

Hopefully, you have enjoyed learning about card sorting. When implemented well, it results in a product that is intuitive and easy to navigate. If you’ve made it a part of your own process already or you have anything to ask or share, please join the discussion in the comments section.

Other Resources

(il, al)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32

The post Improving Your Information Architecture With Card Sorting: A Beginner’s Guide appeared first on Smashing Magazine.

Freebie: Touristic Icons (100 Icons, PNG, SVG)

Fri, 10/17/2014 - 14:10

Icons are a lot like real monuments — they can both be easily recognized. Today’s icon set consists of a set of vector icons that represent monuments across the globe, so they can be literally used anywhere. This colorful set was carefully designed by Freepik131 and is completely free to use for commercial as well as your personal projects, including software, online services, templates and themes.

This icon set is licensed under a Creative Commons Attribution 3.0 Unported2. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is prohibited. Please always provide credits to the creators and link to the article in which this freebie was released if you would like to spread the word.

3A few monuments that can be found across Europe. (View large version4) 5From Turkey to the Philippines, including other countries in Asia. (View large version6) 7Well-known monuments across North and South America. (View large version8) 9And even more monuments across Europe. (View large version10) Close-up view: A great architectural work of art, the Sydney Opera House. Close-up view: The well-known white marble mausoleum, the Taj Mahal. Close-up view: The longest inhabited bridge in Europe, the London Bridge. Download The Icon Set For Free Insights From The Designers:

“These icons are trendy and present a good number of reference sites in regards to graphic design. Due to the fact that designers and developers have increasingly become quite demanding when choosing icons, we’ve chosen this line style to capture the elegance and cleanliness. The fluorescent colors are also in line with the trend and, in this case, are the best way to highlight line icons on black and white.

We created this icon set with a modern and minimalist style that contrasts with the traditional character of the photographs in black and white. They can be used to create logos to adorn websites, travel guides, and even video motion graphics. We’ve prepared them in vector format so that they can be used in any type of medium. You’re welcome! ;)”

Thank you to the creative minds behind Freepik131 — we sincerely appreciate your time and efforts! Keep up the brilliant work!


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13

The post Freebie: Touristic Icons (100 Icons, PNG, SVG) appeared first on Smashing Magazine.

Be A Better Designer By Eating An Elephant

Fri, 10/17/2014 - 11:12

I can’t imagine any other industry in which so much change happens so quickly. If you stop paying attention for a week, it can feel like you’ve not been listening for a year. There’s so much to learn.

Falling behind is easy, too. We might be in the middle of a major project, so we put off learning about this newfangled thing called Sass or Node.js or even quickly experimenting with the new Bootstrap or Foundation that everyone is raving about. Before we know it, we have these elephants of missing knowledge wandering around our minds, reminding us of what we should know and do but haven’t found the time for.

Even just looking at beautiful work and seeing what new technique we could use ourselves can seem like too big a task when we’re swamped with projects. So, we tell ourselves we’ll come back to it later. But later never shows up. The guilt definitely does, but not that elusive deadline of later.

We feel guilty because we know something out there could help us become a better designer or developer and we’re not paying attention to it. Luckily, we can change this and start to catch up on what we’ve been missing out on.

Eating Elephants To Get Things Done

I always liked the productivity quip about how to start and finish a huge project: You do it the same way you eat an elephant, one bite at a time.

I’m not suggesting we go out and eat endangered animals, but what if we did just one small thing a day to expand our knowledge and skill set — and not just for a week or only on weekends, but every day, for 30 days straight? Would we catch up on that knowledge and experience we’re missing?

This challenge of stacking knowledge daily will enable you not only to learn 30 things, but to learn 30 things that will increase in complexity and fit together as a whole new branch of working knowledge for you.

1I’m sure you remember this kind of graph from finance class in high school when you would discuss compound interest. Knowledge is no different: A little bit every day adds up quickly. Actively stacking up your knowledge daily will help you stay on the red path. (View large version2)

How does that sound? Want to give it a go? It’s only 30 days, and it could alter the path of your career, even if slightly.

Pick A Challenge

Pick the right challenge, something that will keep you curious and excited for 30 days, something you’d be happy to chew on slowly. But the challenge should be able to be comfortably broken down into easy pieces, small bites.

Suppose you’re a web designer who wants to learn the CSS processor Sass. No shame in that; I’ll bet, like me, you’ve been very busy. But the prospect of learning Sass is kind of huge, isn’t it? What if we did it in the same way that we’d metaphorically eat an elephant?

Your day-one task might be to learn how to install Ruby and Sass locally. You can’t just be reading, though. That’s not learning — that’s memorizing. You have to do it as you go, downloading the installation files or loading the terminal.

Day two might be learning about and actually writing variables. Day three might be nesting. Days four through six might be setting up your files as partials. And then importing. And then mixins. Then, day seven could be inheritance. You might find that, once you’ve planned these days out, you have enough work for only 15 days, so maybe you’ll jump into learning Bourbon, Foundation or Bootstrap?

That all sounds like a lot to take on, especially if the names all sound intimidating. Biting them off one at a time would make things a lot easier. Downloading and installing a file might not seem like much, but tack that on to learning the basics over the next few days and you’ve started to develop a new skill.

But this isn’t about being perfect. You don’t need to build a beautiful website, or even a functional one. You just have to learn a collection of techniques and stay on track. To do so, to maintain focus, you need a plan.

Plan Your Bites And Prepare As Best You Can

You know what they say about the best laid plans of mice and men. So, avoid setting specific daily goals. Stumbling on day one would put you a day behind from the very start. A lacklustre performance for the following 29 days would then be almost certain. Rather than planning based on days, I’d suggest mapping your progress, which is really just a fancy way of saying “write a checklist” or even “keep a bucket.”

A Sass-loving designer would benefit from having an ordered list of, say, 45 to 60 things to learn and do. Some days, they’ll wake up and not get as much done as they’d like. Other days, they’ll work hard and everything will flow, and they’ll get two days’ worth of work done.

The other option is what I call a bucket. The bucket for my latest challenge was one of those nasty yellow “internal mail” envelopes, filled with topics I could write about. No need to be fancy about it: A list cut up into strips and then put into an envelope is all you need.

3Having a map to work to in these situations, an ordered list, will make the process easier. You will simply have no concern about slipping ahead or falling behind. (Image source4)

But why 45 to 60 topics and tasks if it’s a 30-day challenge? The bucket method makes things truly random, right up to the last day. Well, depending on the challenge, randomness might be exactly what you need. It worked well for me when doing my writing challenge.

Or, if you’re working with the map, it means you’ll focus more on the journey than on the destination. You’ll know well that you’re not going to finish everything in the 30 days, so you’re more likely to focus on what needs to get done day to day. You’ll also have leftovers, which will be perfect to keep you busy learning once the 30 days are up.

But where to find these small tasks? That depends entirely on the challenge you’re undertaking. Don’t overthink at this stage. You could spend far too much time worrying about learning the right thing that you’ll end up not learning anything at all.

For our Sass student, it could be as easy as going through introductory articles, both official ones and on blogs, or a series of classes on YouTube, or something structured like Lynda5 or curated like Gibbon6, Oozled7 or HackDesign8.

Set Time Goals, Limitations And Accountability

In The Creative Habit, Twyla Tharp talks about her morning gym routine. Her goal each morning isn’t to make it to the gym, but simply to get into a taxi. Once she’s done that, all she has to do to reach her morning goal is tell the driver to head towards the gym. Once there, she’ll exercise. What else is there to do? But her winning moment is getting into the taxi.

It seems to run counter to what was mentioned above about not setting goals for tasks, however, goals for start and finish times set us up for success. The real “work” is often simply showing up.

During my last challenge, dragging my foggy head from a warm and loving bed to my cold, sunless office proved to be a bigger challenge than I had anticipated. While the writing eventually became a natural part of my morning, getting to the desk did not.

Focusing on the seemingly insignificant goal of waking up and stumbling a few feet so that I could start typing meant that I had approached my task that day with a fresh accomplishment resting comfortably in memory.

Pressure is relieved before an initial effort is made, and with that first win comes the momentum to keep going. In these kinds of time goals you’ll find limitations and accountability. If you’re goal is to do two hours of work between 5:00 and 7:00 am, then your limit is 7:00.

Having a frequent finish time means that you’ll know how to ration out your effort, and your mind will appreciate the daily rest point that finishing provides. Once this kind of routine is established, you’ll be surprised by how easily you find the energy to keep working, often longer than you thought you would be able to, right up to the last minute.

Friends and followers will come to expect an outcome at the same time daily. Tweeting is simple, but throwing out a tweet at the same time every day sets up expectations for others. Getting a response, even if barely an occasional one, can keep you motivated for days.

In his quick talk at TED, Google’s Matt Cutts gives his take on how to learn or do something you’ve always wanted to in 30 days.


You’re excited. You have your plan of attack; you have your small goals; and you’re ready to get to work and start chewing. Day one arrives and perhaps you wake before dawn, or you’re up when only the owls are about. Either way, you’re ready to work. On that first day and the few that follow, excitement isn’t hard to find. But with it comes a coating of struggle.

A part of you will ask why you’re bothering. You’ll wonder what benefit could possibly be derived from this silly little game you’re playing. Ignore such miserable thoughts. They’ll probably arrive whether you like it or not. And for the first few days you’ll find yourself frequently battling your internal resistance. This scares many, but it’s natural.

Chances are you’re doing something challenging, something you’ve never done before, in parts so small that they won’t seem to matter. The lizard in your brain will tell you that surfing TV or the Internet would be easier. But that will go away. For me, it always goes around day 10. I hope it’s sooner for you, but by day 10 I find that things have become incredibly automatic and the resistance has almost completely disappeared.

However, not long after this, things get too easy. You might even end up setting your own little time traps. For my latest writing challenge, I gave myself up to two hours to do the work, but near day 20 I realized that I could write a piece in less than a quarter of that, and so I would leave it until that was all the time I had left. I’d still wake up on time at be at my desk, but I would mindlessly surf and read. What a wonderful signifier of development leftover time is, but one that I embraced poorly.

Time would be much better spent being reinvested in skill development. You could get dramatic returns by pouring this time into increasingly difficult tasks, and your framework of knowledge would be the richer for it. I’d suggest aiming for discomfort instead of finishing quickly.

In a 30-day challenge, defining your daily problems is up to you, so make sure to revise your plan every day. Look at the task you did that day and adjust for the following days. Was it too hard? Then maybe simplify tomorrow’s expectations. Was it too easy? Spice it up somehow. Write more words, write more code, further develop a design.

You don’t develop when you practice what you’re already good at. Aim to finish with excitement, but not exhaustion.

It’s 30 Days Of Achievement, Not Just Knowledge

You’ve spent 30 days working on a challenge, but not so that the skills you develop become automatic, but to show yourself what you can achieve in a tiny window. You’ve found an hour or two a day and have probably lost nothing because of it. Just keep going.

From day 31, don’t think of what you’re doing as a challenge. It’s simply how you work. It’s how you plan your time, and it’s how you grow your knowledge. Don’t make the mistake I’ve made too many times and expect that once the 30 days are out the door, perfect autonomy will walk into the room.

Before you hit day 31, plan out what you’ll do next. Continue following the map or emptying the bucket, but top it up with another 30 or 50 items, and just keep working. Review frequently, as you would during the 30 days, keep your schedule, and ensure that you’re enjoying the right kind of challenge.

Perhaps this is the biggest gift of the 30 days: not the skills you acquire or any habit you set out to establish, but rather the realization that you can find the time, that you can learn something every day, and that planning your education is important.

A few years ago, Karen X. Cheng posted a time-lapse video of herself learning to dance, a wonderful reminder of how far you can go with daily effort. She went on to cofound Giveit1009, a website that lets you follow others as they go through their own daily development, as well as keep track of your own challenge.


Learning something daily is not hard. Some amazing websites will help you do it; they’ll give you some random, small, independent piece of knowledge that’s great to talk about over coffee but that won’t stack. And that is what’s valuable: stackable knowledge. You can start stacking with such a small number of days — just 30 of them.

30 days. That’s all it takes to learn a skill that could change your career.

You might be able to develop your skills to keep up with, and then break ahead of, the pack. You might be able to charge more because you can offer more or offer better. You could learn to better tell the stories of your clients, to produce work that is more sustainable or even delightful. With time, you could become an authority to whom others in your field, both students and professionals, call on for help in becoming more skilled and knowledgeable themselves. Instead of simply meeting standards and expectations, you could be setting them.

10In all of these are opportunities for happiness, both professional and personal. (Image source11)

You could challenge yourself in ways you can’t imagine, pushing the edge of your knowledge and experience, finding new avenues previously hidden. Your work could becoming increasingly meaningful because of it, as every month or year finds you working at increasingly complex and sophisticated problems. You could, in ways both small and large, shape an industry that I’m willing to bet you love. All that, just because you worked on it an hour or two a day, one bite at a time.

The process is so simple. This is all you’re doing:

  1. Pick a topic.
  2. Break it down into parts.
  3. Map out or randomize those parts.
  4. Show up daily, at the same time, and get to work.
  5. Review progress, and make sure you’re being challenged just enough, adjusting as you go.
  6. Do it for 30 days.

Easy, isn’t it?

That’s how you take your daily bite. Soon, you’ll realize you’ve consumed an elephant-sized body of knowledge. You just have to show up and take action. Most of the people who read this article and like what they’ve learned will forget it all within a couple of hours or days. Or even minutes.

But not you. You’re going to work, and when you do, when you do this silly little challenge thing for 30 days, you’ll find yourself ahead of most of the people you know. Do it for 60 or 90 days or every single day for the rest of your career and you’ll be in a league of your own.

Pick your topic. Take action.

What’s Your Challenge?

What’s that thing you’ve been wanting to achieve? What’s that thing you’ve been wanting to learn?

  • Always wanted to learn how to design your own font? Try a letter a day. Start small by copying a font you love.
  • Need more experience with branding? Design one logo per day, or one brand per month. The first day could be research, the second could be brainstorming, the third sketching, all the way through to a polished style guide.
  • Want to learn photography? What if you started by learning what a single setting on the camera does? Then, work your way through to composition, style and post-production?
  • Want to learn to write? Grab any number of amazing books on writing, and read one rule or lesson per day. Then, write as many examples using that lesson as you can in an hour.
  • Want to learn a programming language? Learn and practice one command per day, with the aim of building a small working prototype.

Let us know what you’ve chosen in the comments. It might keep you on point and, even cooler, might inspire others to join you on the path.

Whatever you decide to do, don’t put it off. Start next Monday. Don’t wait a month or three or start first thing next year. Start next week, maybe the week after if you have to work on your list of tasks. Just start. As soon as you can.

  • Get one of those compound interest and investment charts that shows how just a small bit every day adds up.
  • Five Years of 100 Days12,” Michael Beirut
    Design legend Michael Beirut gives his students at Yale a 100-day design challenge. The results range from brilliant to hilarious. One of my favorites is Ely Kim’s “Boombox”13 dance challenge.
  • 100/100/10014, Zak Klauck
    Klauck undertook this challenge as part of Michael Beirut’s course at Yale. He designed a poster a day based on a short phrase or word, in only one minute.
  • Design Something Every Day!15,” Jad Limcaco, Smashing Magazine
    In 2009, Limcaco interviewed a few designers and illustrators who were doing year-long challenges to make something every day.

A lot of learning and inspiration can be found in what’s been written about design and development sprints in the last couple of years:

(al, il)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19

The post Be A Better Designer By Eating An Elephant appeared first on Smashing Magazine.

CSS-Only Solution For UI Tracking

Thu, 10/16/2014 - 11:55

The web is growing up. We are building applications that work entirely in the browser. They are responsive; they have tons of features and work under many devices. We enjoy providing high-quality code that is well structured and tested.

But what matters in the end is the impact for clients. Are they getting more products sold or are there more visitors for their campaign sites? The final results usually show if our project is successful. And we rely on statistics as a measuring tool. We all use instruments like Google Analytics1. It is a powerful way to collect data. In this article, we will see a CSS-only approach for tracking UI interactions using Google Analytics.

2The Problem

We developed an application that had to work on various devices. We were not able to test on most of them and decided that we had to make everything simple. So simple that there wasn’t a chance to produce buggy code. The design was clean, minimalistic, and there wasn’t any complex business logic.

It was a website displaying information about one of the client’s products. One of our tasks was to track user visits and interactions. For most cases, we used Google Analytics. All we had to do was to place code like the example below at the bottom of the pages:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//','ga'); ga('create', '......', '......'); ga('send', 'pageview');

This snippet was enough for tracking page views, traffic, sessions, etc. Moreover, we placed JavaScript where the user interacts with the page. For example, clicking on a link, filling an input field, or checking option boxes.

ga('send', 'event', 'ui-interaction', 'click', 'link clicked', 1);

The guys from Google handled these events nicely, and we were able to see them in our account. However, at some point the client reported that there were devices that have bad or no JavaScript support. They represented roughly 2% of all the devices that visited the site. We started searching for a solution that did not involve JavaScript. We were ready to admit that we could not collect statistics under these circumstances.

It was not that bad, but the client shared another issue. Our little application was going to be part of a private network. The computers there had JavaScript turned off for security reasons. Also, this private network was important for the client. So, he insisted that we still get stats in those cases. We had to provide a proper solution, but the problem was that we had only CSS and HTML available as tools.

3The Solution

While searching for a solution, I was monitoring the Network tab in Chrome’s developer tools when I noticed the following:

4(View large version5)

In the beginning, I thought that there was nothing unusual. Google Analytics’s code made few HTTP requests for its tracking processes. However, the fourth column shows the Content-type header of the response. It is an image. Not JSON or HTML, but an image. Then I started reading the documentation and landed on this Tracking Code Overview6. The most interesting part was:

When all this information is collected, it is sent to the Analytics servers in the form of a long list of parameters attached to a single-pixel GIF image request.

So, Google indeed made the HTTP request but not the trivial Ajax call. It simply appends all the parameters to an image’s URL. After that it performs a request for a GIF file. There is even a name for such requests: beacon7. I wondered why GA uses this approach. Then I realized that there are some benefits:

  • It is simple. We initialize a new Image object and apply a value to its src attribute: new Image().src = '/stats.gif?' + parameters
  • It works everywhere. There is no need to add workarounds for different browsers as we do for Ajax requests.
  • Tiny response. As Stoyan Stefanov said8, the 1×1px GIF image could be only 42 bytes.

I made few clicks and sent events to Google Analytics. Knowing the request parameters, I was able to construct my own image URLs. The only thing to do in the end was to load an image on the page. And yes, this was possible with pure CSS.

background-image: url('');

Setting the background-image CSS property forces the browser to load an image. Finally, we successfully used this technique to track user actions.

9Tracking User Actions

There are several ways to change styles based on user input. The first thing we thought about was the :active pseudo class. This class matches when an element is activated by the user. It is the time between the moment the user presses the mouse button and releases it. In our case, this was perfect for tracking clicks:

input[type="button"]:active { background-image: url(''); }

Another useful pseudo class is :focus. We recorded how many times users started typing in the contact form. It was interesting to find out that in about 10% of cases users did not actually submit the form.

input[name="message"]:focus { background-image: url(''); }

On one page, we had a step-by-step questionnaire. At the end, the user was asked to agree with some terms and conditions. Some of the visitors did not complete that last step. In the first version of the site, we were not able to determine what these users had selected in the questionnaire because the results would have been sent after completion. However, because all the steps were just radio buttons, we used the :checked pseudo class and successfully tracked the selections:

input[value="female"]:checked { background-image: url(''); }

One of the most important statistics we had to deliver was about the diversity of screen resolutions. Thanks to media queries this was possible:

@media all and (max-width: 640px) { body { background-image: url(''); } }

In fact, there are quite a few logical operators10 that we can use. We can track screens with a specific aspect ratio; devices in landscape orientation; or those with a resolution of 300dpi.


The problem with this kind of CSS UI tracking is that we get only the first occurrence of the event. For example, take the :active pseudo class example. The request for the background image is fired only once. If we need to capture every click then, we have to change the URL, which is not possible without JavaScript.

We used the background-image property to make the HTTP requests. However, sometimes we might need to set a real image as a background because of the application’s design. In such cases we could use the content property. It is usually used for adding text or icons but the property also accepts an image. For example:

input[value="female"]:checked { content: url(''); }

Because we are requesting an image, we should make sure that the browser is not caching the file. The statistics server should process the request each time. We could achieve this by providing the correct headers. Check out the image below. It shows the response headers sent by Google:

12(View large version13)

Sending the following headers guarantees that the browser will not cache the image:

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0

In some cases, we may decide to write our own statistics server. This is an important note that we must consider during development. Here is a simple Node.js-based implementation. We used that for testing purposes:

var fs = require('fs'), http = require('http'), url = require('url'), img = fs.readFileSync(__dirname + '/stat.png'), stats = {}; var collectStats = function(type) { console.log('collectStats type=' + type); if(!stats[type]) stats[type] = 0; stats[type]++; } http.createServer(function(req, res){ var request = url.parse(req.url, true); var action = request.pathname; if (action == '/stat.png') { collectStats(request.query.type); res.writeHead(200, {'Content-Type': 'image/gif', 'Cache-Control': 'no-cache' }); res.end(img, 'binary'); } else { res.writeHead(200, {'Content-Type': 'text/html' }); res.end('Stats server:<pre>' + JSON.stringify(stats) + '</pre>\n'); } }).listen(8000, ''); console.log('Server is running at');

If we save the code to a file called server.js and execute node server.js we will get a server listening on port 8000. There are two possible URLs for querying:

* - shows the collected statistics * - collecting statistics.

By requesting the PNG in the second URL, we are incrementing values. The following piece of code shows the HTML and CSS that we have to place in the browser:

<input type="button" value="click me"/> input[type="button"]:active { background-image: url(''); }

Finally, as a last drawback we have to mention that some antivirus software or browser settings may remove 1×1px beacons. So we have to be careful when choosing this technique and make sure that we provide workarounds.


CSS is usually considered a language for applying styles to webpages. However, in this article we saw that it is more than that. It is also a handy tool for collecting statistics.

(ds, il, og)

  1. 1
  2. 2 #the-problem
  3. 3 #the-solution
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9 #the-tracking
  10. 10
  11. 11 #drawbacks
  12. 12
  13. 13
  14. 14 #summary

The post CSS-Only Solution For UI Tracking appeared first on Smashing Magazine.

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

Wed, 10/15/2014 - 09:00

The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness.

We needed only one set of assets for the original iPhone up to iPhone 3GS. And when iPhone 4 came out with the Retina display, we also needed 2x assets — images twice as detailed. Now, with the display of the 6 Plus being even more detailed than that of the iPhone 4, we will also need to provide 3x assets. The numbers 1x, 2x and 3x are also called “scale factors.”

Of course, Android developers have always had to deal with many different sets of assets. Still, designers are finding themselves questioning their production workflow. In this article, we’ll focus on iOS, but you could easily extend this approach to Android and the web. We won’t try to provide a silver bullet, and perhaps other ways might seem easier at first, but this article lays out a solid workflow that scales up for big projects.

First off, your icon sets should be vector-based. The approach described in this article focuses on generating multiple asset versions from a single vector shape in a Photoshop document that contains all of your icons.

A unified icon document has the advantage of keeping everything together in one file, allowing you to see how well your icons and assets harmonize.

If you’re designing for iOS 7 and above, then you might think that 1x versions aren’t needed anymore. However, you’ll still need them for devices such as the original iPad Mini, the iPad 2 and potentially Android and the web.

Set Up Photoshop

First, I’ll show you how I set up Photoshop. If you know what you’re doing, you can use other settings. But for those curious about how I like to work, this is it:

  1. Disable eye candy like “Animated Zoom” and “Flick Panning.”
  2. Disable “Snap Vector Tools and Transforms to Pixel Grid.”

The first point is a matter of personal taste, but not following the second point can get in your way when you’re trying to be precise with the Direct Selection tool.

1These selections will help you working precise with the Direct Selection tool. (View large version2)

Then, I’ll configure the Move tool (V) to select layers. You don’t need to check “Auto-Select” because you can select a layer automatically by pressing the Command key while clicking. Disabling this option protects you from moving layers unintentionally.

3Configure the Move tool (V) to select layers. (View large version4) Feel Free

First and foremost, I believe that design and production are two separate phases. When your creativity is flowing, you shouldn’t worry much about production constraints.

Design at your favorite resolution (perhaps 2x), and lay out using the dimensions of a device you’re familiar with. But definitely use a real device, and use apps like Skala Preview and xScope to mirror the design live on your device. You should not be working with apps unless you are constantly checking the design on a real device.

Tidy Up Those Vectors

As noted, I’ll assume that you’re designing your icons in Illustrator. Before copying them to Photoshop, you’ll need to tidy them up. Use Pathfinder to add and subtract paths until you have a single shape.

5If you design your icons in Illustrator, you need to tidy them up before copying them to Photoshop. (View large version6)

On the left above is a complex icon made up of multiple shapes, including a white shape to simulate transparency. For the icon on the right, I subtracted the white rectangle from the black one behind it. Do this by selecting the two rectangles and pressing the “Minus Front” button in the Pathfinder panel. Then, select all shapes and click “Unite” to combine them into one.

Now, copy the path to Photoshop, and paste it as a shape layer.

Paste your path as a shape layer.

If your shape ends up a mess, that means you didn’t tidy the vector graphic properly.

Align Forces

When you paste the icon in Photoshop, it might look something like this:

7When you paste the icon in Photoshop you will probably see those gray pixels around the shape. (View large version8)

When you zoom in close on the icon, you will probably see those gray pixels around the shape. Those “partial pixels” occur if a shape does not fill an entire pixel. We don’t want any of those.

We want to start working from a 1x version of the icon because, when tidied up properly, you will be able to scale this version up to 2x and 3x without any problems. If you did the original design in 2x, then you’ll need to scale the shape down to 50%.

Now it’s time to align the horizontal and vertical lines to the next full pixel. It’s OK if curves and diagonal lines don’t fill up entire pixels.

Use Photoshop’s Direct Selection tool to mark a group of misaligned anchor points, and use the arrow keys to move these points between two pixels.

Note: The closer you are zoomed in (use Option + Shift + mouse wheel), the more precisely you will be able to move the anchor points.

The anchor points of the bottom and the right side are now aligned to the pixel grid. All partial pixels are gone. Do A Check-Up

Now, make sure all anchor points are on the grid by scaling your 1x version up to 500%. If you see partial pixels, then align them as described above. If everything checks out, then scale the shape down to 20%.

Remember: From now on, you should always scale proportionally from the upper-left corner, and always make sure that the X and Y values are round numbers.

9If you see partial pixels, then align them as described above. (View large version10) Scale It

Let’s see how different resolutions of our icon work out. Select the 1x version (V, then Command + mouse click), and duplicate the icon (Option + click and drag) to a position next to the 1x version.

Scale the duplicated icon up to 200% proportionally from the upper-left corner. The 2x version should show no new partial pixels. It should only be bigger.

To keep things simple, we will assume you are happy with the 1x and 2x versions and that you now want to see the 3x one.

Duplicate the 2x version (Option + click and drag), move it off to the side, and then scale it up by 150%. (So, 200% × 150% = 300%)

Later in this article, I’ll tell you what to do if you are not happy with the results. But if you are happy with the 2x and 3x versions, then you know now that 2x and 3x versions can be generated from the 1x version without any problems.

Go ahead and delete the 2x and 3x versions — we will be generating them automatically.

Generate And Enjoy

Photoshop has a built-in tool called “Generator” that automatically renders a shape layer to multiple image versions. To do that, we have to create a layer group and give it a special name: the file name and scale factor for each version.

In this case, it should look like this: cover.png, 200% cover@2x.png, 300% cover@3x.png

The commas separate the versions, and the percentage tells Photoshop the amount of scaling.

11The commas separate the versions, and the percentage tells Photoshop the amount of scaling. (View large version12)

Now, activate Generator.

13Activate Generator. (View large version14)

Generator will create a folder next to your PSD file and will automatically save PNG files to it when you save the Photoshop document.

15Generator will automatically save PNG files when you save the Photoshop document. (View large version16)

To add a new scale factor at a later point in time, you simply have to alter the layer’s file name.

Get Creative For Different Resolutions

Modifying artwork for different scaling factors is a common practice because you can show more detail in a 2x graphic than you can in a 1x version.

In the following example, the 1x version of the icon contains just a single eighth note, whereas the 2x version contains a beamed note.

17Create different icons for different resolutions. (View large version18)

Obviously, you wouldn’t delete the 2x version because it is different from the 1x. Create an extra group for the 2x version, and give it a layer name that is compatible with Generator. Because you’ve already scaled the 2x version in Photoshop, don’t add “200%.”

To end up with a 3x version after working in 2x, you’ll have to scale by 150%. So, you would add this number to the 3x file name.

19To end up with a 3x version after working in 2x, you’ll have to scale by 150%. (View large version20) Size Matters

Making the 2x versions of your assets exactly two times larger than the 1x assets is absolutely critical. Sometimes this is harder to do than you think. Consider this keyboard:

21Making the 2x versions of your assets is sometimes harder to do than you think. (View large version22)

For the 1x version (the smaller keyboard on the left), I decided that 1-pixel-wide black keys were to thin, so I used 2 pixels.

When you scale that version up (marked in pink in the keyboard on the right), you end up with black keys that are 4 pixels wide, which looks a little too wide.

But with 3-pixel-wide keys, the distance between all of the keys changes. To keep everything symmetrical, we need to make the keyboard 1 pixel shorter. And because we can’t scale 3 pixels by 1.5 without ending up with fuzzy graphics, we also need a special 3x version.

To fix the export size of our 2x asset, we can add a layer mask. Generator will always use the dimensions of a layer mask if one is present.

23To fix the export size of our 2x asset, we can add a layer mask. (View large version24) 25Generator will always use the dimensions of a layer mask if one is present. (View large version26) Summary

Hopefully, the methods described here will simplify your workflow. As you can see, creating pixel-perfect assets for different screen sizes and densities isn’t such a chore when you use vector graphics to your advantage and let Photoshop do the grunt work.

Downsides of This Approach
  • Assets are stored at 1x in the Photoshop file.
Upsides of This Approach
  • Create multiple image assets from a single shape layer, potentially saving yourself a lot of time in the future.
  • Icons are all in one document.
  • Generating assets for other scale factors from your PSD becomes easy for other people.
  • Seeing which resolutions of an icon need special attention becomes easy for other designers.

(ml, al)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26

The post Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors appeared first on Smashing Magazine.

Taking A Closer Look At Tech Conferences: The Nitty Gritty Details (A Study)

Tue, 10/14/2014 - 13:13

As I was flying back from the Smashing Conference in New York, I wondered whether it was a success. This wasn’t an original thought. We are always wondering what makes a conference good and what elements will make industry workers stay away.

Good and bad are such subjective terms, though, with almost as many expectations as there are attendees. We decided that just looking at the numbers instead might be a good idea. This article will not present best practices for planning a conference1, but rather will look at how it’s actually done most of the time. While this is not a guide to putting together the perfect conference, it gives a good overview of what seems to work and which elements are so unpredictable that they do not serve as reliable guidelines.

The Aspects Considered

I analyzed the statistics of about 85 different conferences. I looked all over the world, looking at everything from big well-known events to small non-profit community meetings. I chose conferences that have been around for years and that have features that set them apart from other events.

Some of the data is straightforward, such as dates, number of speakers, tracks and workshops. Other aspects yielded much more varied and specific data (such as themes and technical considerations). So, I’ll present some fairly solid figures about some aspects, and convey just a sense of the variability of others. You can find the results in this PDF2.

The Questions
  1. How many speakers were invited to the conference?
  2. How many days did the conference last?
  3. How many tracks were offered?
  4. How many workshops were linked to the conference?
  5. How long did individual sessions last?
  6. How long were the workshops?
  7. How much did the conference cost?
  8. How much did the workshops cost?
  9. How many people attended?
  10. What were the technical details? (Was there Wi-Fi? Were videos made available?)
  11. In which month did the conference take place?
  12. Was the theme a popular one?
  13. Which country hosted the conference?
  14. In what kind of venue did it take place?
  15. How high was the percentage of male/female speakers?

First, a few things regarding the statistics. I will compare both the average and the median, because the discrepancies are at times pronounced. The median lists all values of the data set and picks the middle value. It’s therefore not influenced by extreme values, and gives better information about the real data distribution. The average value is the sum of the sample data divided through the number of values. It’s influenced by extreme values and therefore gives only information about the data distribution in theory. The difference will become clear by directly comparing the figures.

Conference Size

Anyone who is interested in organizing a conference or just attending one will notice that conferences are run in two very different styles. This has a huge impact on scale (number of speakers, choice of tracks, length of conference).

Some conferences, such as TYPO3 Conference 2013163, with its 65 speakers and multiple tracks, aim for large audiences and maximum information propagation. Others, such as the Smashing Conference4, have only around 18 speakers and a single track and set out to create a community experience. Two styles, two different goals.

The data shows a clear tendency towards smaller conferences, most likely for the simple reason that organizing a big conference is much more costly and restrictive in some ways than a smaller one.

  • Median number of speakers per conference: 19
    This median indicates that more than half of the conferences analyzed were fairly compact community events.
  • Average number of conference speakers: 31
    This shows by how much the average is skewed by the few very large events when compared with the median.
  • Median number of tracks: 1
    This is a fairly logical progression from the median number of speakers. Small conferences tend to stick with single tracks.
  • Average number of tracks: 1.9
    This average implies that two tracks are the norm. While the difference between one and two tracks seems negligible, it is anything but. A single-track event demands fewer compromises than multi-track events from both attendees and organizers. Attendees don’t have to worry about overlapping topics, speakers and interests, while organizers can set up the event days exactly as they want. On the other hand, multi-track events give attendees much more flexibility and a wider range of networking opportunities.
  • Median number of conference days (workshop days included): 3
  • Average number of conference days (workshop days included): 2.7
    Conferences rarely last longer than four days. The lower average reflects the lower number of conferences that are longer than the median.

There is a clear tendency towards smaller conferences. Back To School

This indirectly brings us to the topic of workshops. Most events offer a certain number of workshops, usually around the conference days. Only 9% of conferences do not feature any workshops. Combining standard talks and workshops makes a great deal of sense for both organizers and attendees (and their employers!). The combination reduces yearly travel time to training events for attendees, and it spares employers’ pursestrings from the added travel expenses of repeated training excursions.

Conferences that do feature workshops around the event average five full-day workshops; the median, however, drops down to three full-day workshops. This number is not completely arbitrary. Organizers should plan according to the number of attendees expected, keeping in mind that not all of them will attend the workshops. It comes down to the desirability of the workshops, which is a difficult variable to accurately evaluate. The theme, speaker and geography come into play, in ways that are not always easy to discern.

Finally, not to be forgotten are two-hour half-day workshops and “lightning talks.” These are fairly popular, especially at big conferences. Some small conferences also prefer to feature a lot of half-day workshops, instead of highly visible full-day ones. Altogether, 13% of conferences feature short workshops, either next to the full-day ones or exclusively.

The Cost Of Learning

Evaluating conference and workshop prices is quite tricky because the spectrum is quite wide and is determined by different variables, including sponsorship deals and regional standards. A detailed analysis of the motivations behind setting a certain price for an event is beyond the scope of this article. Keep in mind that the numbers below are merely an approximation because I couldn’t find data for all of the conferences that I reviewed. Additionally, several conferences have a one-price-fits-all approach, including workshops in the conference price.

The average and median costs of workshops are very close, at $311 for the former and $307 for the latter (US dollars). This make perfect sense because the costs of workshops vary only according to the duration of the events. A few outliers are worth mentioning because of the regional considerations. Meta Refresh 20145 in India, for example, offers four half-day workshops at the relatively low price of $49 for both days. Reasons to be Creative6 in the UK comes to $501 to $669 per workshop, which is fairly standard for the UK.

Conferences are less predictable. The average and median are quite close, with the former at around $420 and the latter around $349. This, however, is a skewed representation of conference costs. For one, early-bird prices differ significantly from latecomer rates. Also, included in both figures are all conferences prices, without differentiating between one- and multi-day conferences.

Conferences mostly seem to cost between 300 and 400 USD.

Comparing the prices of conferences and workshops to those of other events in the same country might be more telling. This would give a good indication of whether the prices are reasonable.
We The People

Despite our figures here being very spotty, the average (840) and the median (500) number of attendees differ greatly. I would attribute this discrepancy to missing data. However, despite the spotty data, I suspect that the actual average is very close to the median that I calculated, simply because the majority of conferences reviewed here are small single-track events.

The Technical Side

There is insufficient data to make any definitive conclusions about the technical aspects of conferences. Still, several features seem to recur at almost every conference.

On the websites of the 84 conferences in this study, 14 specifically mention that they offer Wi-Fi access to attendees, and 32 promise to release videos of the talks and workshops on their website or on their YouTube or Vimeo channel.

Interestingly, despite many events offering Wi-Fi access, reliability is usually so difficult — or expensive — to guarantee that some conferences (such as Blend7) state up front that Wi-Fi access is not provided, even going so far as to prohibit devices entirely. The rationale is that the presence of devices and the cost of Wi-Fi detracts from the quality and enjoyment of the talks; some hand out pen and notebooks instead. This approach does have some merit because it frees organizers to focus on curating their themes and speaker.

The Ephemera

Finally, let’s quickly look at some figures that are relevant but difficult to evaluate: conference themes, supporting events, location and gender. These factors are mostly determined according to either convenience or the subjective perspective of the organizers.


Themes are plentiful in this industry, ranging from UX design and development tools to marketing and commerce. This chart8 shows some of the most common themes, but keep in mind that these fluctuate as our industry rapidly evolves.

Events That Round Out the Conference Experience

These are a staple. For more than 50% of conferences, this means parties. And this is the one area where organizers can get as crazy and imaginative as their budget allows. You’ll find everything from mundane and marginally productive networking parties with drinks to enthusiastically creative affairs (such as Build9’s). Some employers, the ones footing the bill, might find this to be over the top. A more psychological study might examine the value of associating pleasurable social experiences with work, but that is beyond the scope of this article.

After-parties are where — to paraphrase Pat Allen10 — organizers often make mistakes. From experience with organizing them, I know how important it is for the background music not to interfere with the conversations. Organizers should know that venues tend to get this wrong; many venues can’t seem to believe that large congregations of people don’t automatically want to “get down and boogie.” At the first Smashing Conference’s after-party, I found myself running to the DJ every half hour to ask him to turn down the volume, which would mysteriously and gradually return to the same deafening level. I insisted repeatedly that just because some of the attendees were swaying to the music while talking did not mean they were eager for a rave, but neither the venue’s manager nor the DJ seemed to grasp this.

While a few conferences focus mostly on the basic content, most offer additional experiences, most likely reflecting the idealism of their organizers. For many conference enthusiasts — including organizers — a key function of conferences is to unite the web design and development community. This is often reflected in the wording of promotional materials (“Let’s get together in the company of a few friends11”).

Some discussion lately has focused on reevaluating these traditional events, such as after-parties, which some argue betray some insensitivity. For instance, alcohol is, to put it mildly, not everyone’s cup of tea. As Sara Soueidan explains12 in an interview for CSSconf EU, that is a reason why some attendees or speakers do not attend certain events. JSConf US 201413 provides bikes for people who want to explore the area, and it even offers a “Significant Other Track” for the families of attendees. There are definitely alternatives to the traditional approaches that generate a different ambience.


Below are some figures related to location.

  • 52% of conferences are in Europe, 38% in the Americas, 6% in Asia, 3% in Australia and New Zealand. None are in Africa!
  • 34% are set in the US, more than half in the east (see map).
  • 18% take place in the UK.
  • 14% are set in Germany.
  • Just one is set in Southern Asia (India), and one (not on the list) in Southeast Asia (Philippines).
  • The five biggest conference cities on the list also host the most conferences for their region.
  • Among the five biggest cities are the three cities that host the most conferences (New York, London and Berlin).
  • The fourth most-frequented city, however, is also one of the smallest on the list. With only 156,000 inhabitants, Brighton is only more populous than Faenza, Columbia and Osijek.

The US and EU are the two hottest spots for web conferences.
The size of the city doesn’t seem to be the deciding factor for choice of location, but it is relevant. Gender

I’ll devote a short space to the statistics for the most debated topic of this study, gender. While a gender count among attendees has proven to be impractical, I was able to count — by hand! (never has a more repetitive endeavor been undertaken since Sisyphus’ boulder roll) — the number of male and female speakers at almost all conferences. I found that 22% of speakers were female. Or, to put in in hard numbers, the median number of speakers at the conferences was 19. Of those, 5 were women.

This subject has been heavily discussed in our community recently, with some of the biggest tech firms disclosing their gender-related statistics. According to John Mindiola in an article from 201014, 82.6% of web designers are male. However, while this is the current reality, the issue has reached popular awareness, leading some organizers to actively try to incorporate an equal number of male and female speakers. Such efforts are not only attributable to small conferences either, which can pick their speakers much more carefully; colossal events such as WebTech Conference 201315 and TYPO3 Conference 2013163 are trying to even out the playing field, too (see study PDF).

Gender disparity in the web industry is not a myth. That being said, the percentage of women in content-generating areas is higher than that of men. And while the area of web development boasts a frighteningly antiquated male-dominated environment17, many hope that conferences — being the public face of the industry — will lead by example.


To sum up (pardon the pun), the majority of conferences are small, with around 20 speakers. Most are single-track events, except for those that are 10-plus-track affairs. Many offer workshops to round out the experience. The events usually cost around $500 and offer a slew of fun activities to complement the learning experience, following the proud tradition of “work hard, play hard.”

The full range of the web industry’s work is covered, although the latest advances are getting the most attention, such as the mobile web. Most conferences take place in the EU, but the US hosts the most events of any single country. Finally, the web industry still needs to work on the male-female disparity, which is reflected in the ratio of female-to-male speakers at conferences.

(ml, al)

Front page image credits: Marc Thiele18.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18

The post Taking A Closer Look At Tech Conferences: The Nitty Gritty Details (A Study) appeared first on Smashing Magazine.

Wayfinding For The Mobile Web

Mon, 10/13/2014 - 13:05

When designing mobile first, navigation takes a back seat to content, and ruthless editing paves the way for more focused experiences. The pursuit of simplicity, combined with the tight spatial constraints of mobile viewports, often leads us to strip away elements in an attempt to minimize the interface. But the space-saving convenience we gain through clever editing and a compact UI can come at the expense of the very navigational aids our users rely on.

To help balance the craving for visual simplicity with the need to keep websites easy to navigate, we can borrow some concepts from the world of wayfinding. This article shows how you can apply these concepts to the mobile web.

The Importance Of Wayfinding

As the name implies, wayfinding is how we make sense of our surroundings and navigate the space around us. We continually rely on cues in our environment to orient ourselves and figure out where we’ve been and where to go next. If you’ve ever flown, recall the experience of stepping off the plane in an unfamiliar airport. It may have gone something like this:

  1. You pause at the gate and glance around to quickly survey your surroundings.
  2. You observe which direction most people seem to be walking in and start heading in that direction.
  3. As you begin walking, your attention darts from one sign to another, scanning for any symbol or text that resembles “baggage claim” or “ground transport” and ignoring anything that doesn’t match either of those.
  4. Once you feel like you’re headed in the right direction, your attention relaxes and you begin to pay attention to any shops or restaurants that you might want to return to the next time you’re at the airport.

The way that people orient themselves in digital spaces is not so different from how they find their way around in the real world. Our ability to focus shifts according to whether we’re on the hunt for information or recreationally browsing. We even experience the same emotion and sense of frustration when we’re lost or struggling to reach our intended destination.

Following are three wayfinding concepts that can be incorporated into mobile and responsive designs to help your visitors navigate with more ease.

  1. Circulation systems
    The infrastructure that allows people to move around within a space
  2. Spatial cues
    The observable qualities of a space that help people make sense of their surroundings
  3. Signage
    Instructional signs, symbols and iconography to guide people
Circulation Systems

When moving through a town, the streets and sidewalks are the pathways we use to get from one point to another. Within a building, we might rely on stairways and corridors to make our way around. A variety of routes often coexist, giving people multiple options for reaching their destination. The network of available pathways forms the circulation system of a space. On the web, circulation systems are shaped by navigational structures. The most familiar one is the hierarchical tree menu, a model synonymous with widescreen desktop design.

Hierarchical Tree

This type of top-down categorical tree is the de facto convention for information-rich websites. Users can access top-level (parent) navigation and local (sibling) content. This is advantageous in that it provides many different routes for users to explore.

The hierarchical tree model usually manifests in a horizontal navigation bar, often with a single or multilevel dropdown menu. (View large version2)

This model has the tendency to become link-heavy, making it well suited to large screens but potentially cumbersome when packed into the confines of a small screen. Rather than trying to squish expansive menus onto itty-bitty mobile screens, designers have been exploring the concept of unfolding experiences, a term designer and researcher Rachel Hinman3 uses to describe systems that progressively reveal information to users. As you plan a circulation system for your website, consider how you might be able to incorporate the following “unfolding” patterns:

Nested Doll

Nested doll navigation is a linear menu pattern that is conventional in mobile web apps. Users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map. Funnelling users from broad overview pages to detail pages helps them hone in on what they’re looking for and focus on content within an individual section. This approach is well suited to small screens, but comes at the expense of easy lateral movement across sections.

4With the nested doll navifation, users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map. (View large version5) Hub and Spoke

This model utilizes a central screen that acts as the launchpad for exploration. Links point outward to other sections of the website or independent applications, each siloed from the others. To move from one section to another, you must first jump back to the hub. This home-screen approach eliminates the need for global navigation on each page, making it a popular choice for task-based applications that benefit from focus and minimal distraction.

6The hub and spoke utilizes a central screen that acts as the launchpad for exploration. (View large version7) Bento Box

The bento box model is a dashboard-style application that pulls in dynamic components and information. Most interactions occur in the context of a single multi-purpose screen that unfolds to reveal layers of additional information. This is a popular choice for websites on which users interact with data aggregated from a variety sources.

8The bento box model pulls in dynamic components and information. (View large version9) Filtered View

Unlike dashboards, which provide a control center for interacting with a variety of data, filtered view systems deal with a single data set. Information may be explored from multiple perspectives, with a variety of views and sorting options controlled by the user.

10Filtered views are seen in music apps, directories and other interfaces in which people navigate large volumes of data. (View large version11) Combining Systems

Even with nice styling and transitions, the bulkiness of traditional navigation systems can feel kludgy on small touch-enabled screens — especially when compared to the elegant, immersive interactions associated with native applications. Trying to shoehorn an information-rich website into an app-like navigation system might be too constraining, yet adopting a fully hierarchical model might be overkill. Fortunately, the models need not be mutually exclusive.

One of our recent projects involved working with a healthcare organization to centralize their content and online tools under a single website. We initially started down the path of building a hierarchical site map that included a section for all of the members-only content. We also toyed with the idea of introducing an additional menu on the website: the public navigation as well as navigation that appears for logged-in members.

This felt more complex than it needed to be and would have been tricky to organize on small screens. Recognizing that current members have very little need for marketing-heavy public content, we ended up dropping all public menus from the members section. And because members were coming to the website primarily to access a few key applications, they benefited from moving away from a hierarchical content structure and toward a hub-and-spoke model with a home screen that would launch their various online tools.

12Rather than stick with a single information-architecture model and nest members-only content within the overall content hierarchy, we saw that a hub-and-spoke approach to the members center made sense. (View large version13)

This turned out to be a big departure from our original plan to create a global header and footer that spanned the entire website, but it permitted us to design a system that was both lean and simple to navigate. This still left us with the challenge of making the transition between public and members content as seamless as possible. We turned to spatial cues to build continuity across the interface.

Spatial Cues

If circulation systems represent the paths that enable people to get to where they want to go, spatial cues are the recognizable qualities of the space that help them orient themselves and that illuminate available paths. Designers rely on a few powerful spatial cues to help users find their way.


A landmark is any remarkable, unique or memorable object you observe in your surroundings. Some landmarks are visible from a distance and help you figure out where you are based on your position relative to them. For example, Chicago is home to one of the world’s tallest skyscrapers, the Willis Tower. If at any point you become disoriented while exploring the city, you need only scan the skyline and compare your relative position to the tower to get a sense of where you are and which way is which. Other landmarks just line your route, helping you find your way to and back from a particular place. Landmarks help us define and make sense of space. The degree to which we rely on landmarks is evidenced by how we offer directions: “Turn left at the fork in the road,” or “Continue straight three blocks until you reach the Starbucks, and then hang a right.”

In UI design, a landmark is any consistently positioned or notable element that helps visitors orient themselves. Some examples of global elements (i.e. visible throughout a website) are:

  • Logo
    For returning to the home screen easily
  • Primary navigation
    Quick access to primary landing pages, enabling users to pivot and explore other sections.
  • Breadcrumbs
    reinforces current location within the system and acts as a ladder to traverse up the site map
  • Search
    Provides reassurance and an alternate way to seek information when users don’t want to backtrack or continue browsing

Other landmarks might appear only in certain places, helping visitors distinguish where they are within a particular section of the website:

  • Section banners
    Reinforces which section user is in
  • Section navigation
    Access to similarly categorized content
  • Unique templates or components (slideshows, galleries or event calendars)
    Visually identifiable points that users might remember passing and try to return to

This alone is pretty straightforward stuff. It gets interesting when you factor in multiscreen behavior and adaptive design. You see, as website visitors peruse your website, they are constructing a mental map of all the identifiable landmarks they encounter. Data shows that many interactions occur over time and across devices. If the landmarks in your interface appear drastically different from one breakpoint or device to another, then you risk disorienting users. On the other hand, if you intentionally build continuity into the UI, persisting recognizable qualities of those landmarks across all screen sizes, then you’ll foster a more familiar, intuitive experience for returning visitors. You can increase continuity of landmarks in your design by examining how UI elements adapt across breakpoints:

  • Position
    Do they retain their relative page position, or do they jump around?
  • Form
    Do items retain their form or transform into something totally different?
  • Color
    Do foreground and background colors stay the same or switch?
  • Priority
    Do the most prominent page components retain their proportional visual weight across screen sizes, or does the hierarchy change?
  • Visibility
    Are visible things still revealed and hidden objects still concealed?
United Pixelworkers’ website has continuity between landmarks across breakpoints. The logo is red in the top left, the navigation is in a black bar along the top, and you can always access the cart from the bright blue button in the top right — no matter which size screen you visit from! (View large version15)

Cleverly adapting the UI to best fit the available screen size or viewport is a worthy goal. Just keep in mind that each adaptation creates a new environment that your users must orient themselves to. While adaptation is a necessity, balance it with an equal focus on continuity.


Edges demarcate the end of one object or section and the beginning of another. In the world around us, we are surrounded by geographic boundaries, like mountains, shorelines and tree lines, as well as man-made ones designed to compartmentalize our environment, like fences and walls. In UI design, clearly defining the edges of regions and objects can more quickly familiarize users with an interface. Boundaries help to demarcate things on a website, such as chrome from content, primary navigation from secondary navigation, and global tools from page-specific functions. At a micro level, edges help define the boundaries of tap targets and separate individual blocks of content.

16Foursquare’s app (left) packs a lot of tappable items into a small space; clearly defined button boundaries improve scannability and minimize mis-taps. Yummly’s app (right) uses distinct interface edges to define button tap targets and to visually separate the masthead region from the content area and to distinguish between individual recipes. (View large version17)

When designing for wide screens, we can rely on white space and columns to delineate content boundaries. When dealing with narrow viewports, we have less space to compose columns and to utilize white space to effectively differentiate sections of a page. We can reclaim the usable benefits of edges in small-screen scenarios by:

  • providing obvious visual cues to suggest the active tap target area of links and buttons,
  • using shifts in background color or strong borders to distinguish template regions.
18Defining edges by using horizontal dividers or shifts in background color can provide important visual cues to distinguish one region of content from the next (for example, separating main content from related links). (View large version19) Signage

Signs are visual aids that provide instruction to people at decision points within a space. Signs communicate through pictographic or typographic elements. In our interfaces, most non-content elements play the role of signage. Elements such as labels, buttons, pagination, menus and calls to action all act as signs. Because symbols tend to take up less space than written text, they are heavily used in mobile design. Because people process images and text differently, designers need to consider certain factors when deciding how and when to use one or the other. Let’s take a quick look at how to use icons effectively.

Using Icons

Icons can be an effective way to communicate information and highlight navigation options while conserving space within the tight confines of a small screen. Universally recognizable symbols can also overcome language barriers, making an interface more globally accessible.

While icons might appeal to aesthetic sensibilities and provide a great solution for visually organizing your interface, they also have the potential to introduce impediments to usability.

Icons work great when they are familiar and obvious, leaving no room for misinterpretation. But even many of the most commonly used icons have multiple meanings. Consider the following icons, which at first seem innocent. What does each represent?

20Because they often have multiple meanings, even simple icons can be ambiguous. (Image credit: IcoMoon21) (View large version22)
  • Pencil
    Write or edit?
  • Plus
    Add item or expand?
  • Minus
    Remove item or collapse?
  • x
    Close or delete?
  • Magnifying glass
    Zoom or search?
  • Caret
    Play, go or slide right?

As we see, even in simple scenarios, icons can be ambiguous. Meanwhile, the allure of a minimal UI tempts many a designer to use icons to represent far more complex concepts. This again challenges us to weigh the value of saving space against the importance of comprehensibility of the interface. Even if the icons are ultimately decipherable, the act of interpreting them increases the cognitive load on the user. This introduces friction to the decision-making process and could impede navigation.

Text Labels

In contrast to icons, well-written text labels can leave less room for misinterpretation, thus resulting in less cognitive load on the user.

Compare the following two screenshots, both of which pair icons with text. The first example focuses first and foremost on the icons, whereas the second places emphasis on text labels.

23The University of Delaware uses mainly icons (left). Walmart emphasis on text labels. (View large version24)

The abstract nature of the graphics demands a fair amount of interpretation, and the accompanying text is harder to scan, partially because of the grid arrangement and partially because of the type’s size. Keep in mind that, with mobile devices, the text is likely to be viewed at arm’s length and with the person and device possibly in motion. In the second example, labels assume focus. The left alignment of text provides a straight reading line down, making it easier to scan and compare navigation options. Here, icons are used to supplement text. Because we process images quickly, once a user has learned what a symbol means, their future interactions will be expedited through recognition (i.e. associating the image with the link it represents).

The previous example also assumes two things. The first is that the text labels are indeed well written. Unclear text can be just as detrimental to navigation as ambiguous iconography. The second assumption is that the visitor is a first-time user. Once a person has learned the positions and meanings of the icons in the first screenshot, the cognitive load will decrease and the interface will have become familiar and, therefore, easier to use.

This aligns with research conducted by User Interface Engineering25, which found that:

  • text and images work better than just text;
  • text alone works better than images alone;
  • icons are learned, but icon positions are learned faster (so, if your favorite app gets a new icon, you won’t be confused; but if someone jumbled the positions of apps on your phone’s home screen, you’d be driven crazy).
Visibility and Decision-Making

Another conflict between graphics and text arises when you’re determining how to present a list of products. An advantage to displaying images is that they help the user visually differentiate between options. Because product images take up more space than their text counterparts, the number of items visible within the viewport will be reduced. So, which is more important, showing more detail for each option or showing more options in a single view?

When category distinctions are obvious, the addition of visual cues (such as product images) minimally benefits usability. The main objective is to show options and make it easy for the user to scan and compare those options. In these scenarios, titles alone might be the best choice because comparing items is easier to do when you can see all (or most) of your options at once. If visitors must scroll or swipe to see their options, they’ll be forced to rely on memory, comparing what’s currently in view with what was previously in view.

On the other hand, for products that are similar to each other, images would help users to better distinguish between them. In this case, differentiating between items might be more important than comparing items within a single view.

26Using images to display category information takes up more space, resulting in fewer categories fitting in the viewport. Although less visually appealing, a simple text list of categories is easier to scan and select from. When browsing individual products, however, product images and visual detail play an important role in helping users to distinguish items. (View large version27) Paving Your Paths

What’s in and out of view is critical to how people find their way. The answer to “Where can I go from here” is shaped by the routes that the user can easily perceive. The most highly trafficked routes (or the ones you want to drive the most traffic through) should be made most visible. Less-traveled routes can afford to be less overtly marked. Whether a navigation system is the primary or secondary one is an important consideration, and it needs to be prioritized as such in the UI. Does the visual prominence of your navigation map to the navigation’s actual priority?

Route Visibility and Hidden Menus

Many popular mobile navigation conventions involve hiding and showing menus. This technique relies on a menu button (often the infamous hamburger icon) that triggers the appearance of a menu, either by toggling open a panel or pushing in navigation from off canvas. Debate persists about whether the hamburger icon is universally recognized as a symbol to represent a menu. It’s potential ambiguity aside, the debate overlooks a larger concern: Even if people recognize it as a cue to summon a menu, the menu options are initially hidden, and so those routes are obscured.

Users following the scent of information will scan the screen for trigger words: text that maps to the words or phrases in their mind that describe what they’re looking for. On wide screens, when navigation is exposed, those trigger words are visible and increase the likelihood that users will spot them and click through. Assuming that your primary navigation menu has concise, mutually exclusive and familiar labels, by storing them out of view, you are concealing those powerful trigger words and in effect obscuring the primary navigation routes.

28Responsive and mobile navigation patterns that conceal and reveal menu items keep content as the focus of the UI. Just be aware of what trigger words you’re also hiding. (View large version29)

Compare this to the “skip to nav” pattern, in which a menu icon scrolls the user down to a menu anchored at the bottom of the page. In this model, the button still affords quick access to the menu via a tap or click, but those trigger words still exist within the visible canvas. Users who scroll or swipe past the main content will discover in plain view the menu options laden with trigger words.

When evaluating which elements to make visible and which to tuck away, consider the following questions:

  • How are your users seeking information?
    If a large number of your visitors are “known-item seekers,” meaning they arrive with a clear idea of what they are looking for, then they will more likely want to search; so, making the search field visible would be an excellent prompt. If most users will have only a general idea of what they want, then they might be more apt to browse and, therefore, would benefit from exposed trigger words.
  • What are your users looking to do, and how else could they get there?
    Compare what’s visible on screen to key content that your target audience is looking for or tasks they intend to complete. Do the content and links you make visible provide an easy enough path for users to accomplish what they came for? Or must they rely on navigation. If the navigation is a supplemental tool, serving as shortcuts to get around the website, then it might benefit from being tucked handily away. On the other hand, if a menu is the primary (or exclusive) means of navigating the website, then it might need greater visibility (or be visible by default).
  • What is your hidden content competing with?
    On a page with minimal content, clicking on an icon to reveal a list of hidden menu options is a no-brainer. But as more content and links are added to the screen, the menu icon has more to compete with. Compound this with the fact that visible links are filled with information scent (i.e. some graphical or textual cue that suggests what content exists behind the link). Meanwhile, an abstract symbol has relatively poor information scent, hinting only that “more options” can be found behind it.

Despite the incredible difference between the physical and digital worlds, the similarity in how we orient ourselves and decide where to go in both spaces is uncanny. The same cues that architects and urban planners rely on to help us process our location, know where to focus and choose our way could be applied in our day-to-day work on the web. Keep in mind that every person who browses an application is making their way through a space — often an unfamiliar one. As the user embarks on their journey, what types of wayfinding assistance are you providing to guide them?

(da, al, ml)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29

The post Wayfinding For The Mobile Web appeared first on Smashing Magazine.

Secure Login

This login is SSL protected