Reducing Abandoned Shopping Carts In E-Commerce

Go to Source

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.

Basic template setup.16
Basic 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.
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 billing_address.name %} {{ billing_address.name }}{% 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.
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.
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="http://www.mailgun.com" 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.
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.
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.

Premailer has the ability to remove native CSS which saves a few kilobytes.32
Premailer 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.

Shopify admin.36
Shopify admin. (View large version37)

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

Airmail

Airmail rendering.38
Airmail rendering. (View large version39)

Apple Mail

Apple Mail rendering.40
Apple Mail rendering. (View large version41)

Gmail (Browser)

Gmail rendering.42
Gmail rendering. (View large version43)

Apple Mail on iOS

Apple Mail on iOS rendering.44
Apple 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:

Dodo Case’s email for abandoned carts.48
Dodo 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

Fab’s email for abandoned carts.52
Fab5553’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

Chubbies’ email for abandoned carts.56
Chubbies57’ 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

Black Milk’s email for abandoned carts.59
Black 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

Holstee’s email for abandoned carts.63
Holstee6664’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!

Conclusion

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)

Footnotes

  1. 1 http://baymard.com/lists/cart-abandonment-rate
  2. 2 https://econsultancy.com/blog/64680-six-tactics-for-reducing-cart-abandonment-rates#i.weabnjzqdeyu10
  3. 3 https://econsultancy.com/blog/63466-nine-case-studies-and-infographics-on-cart-abandonment-and-email-retargeting#i.weabnjzqdeyu10
  4. 4 http://shopify.com
  5. 5 https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=abandoned
  6. 6 http://inspiration.mailchimp.com/
  7. 7 http://campaignmonitor.com
  8. 8 http://mailchimp.com
  9. 9 https://www.campaignmonitor.com/css/
  10. 10 http://templates.mailchimp.com/resources/email-client-css-support/
  11. 11 http://templates.mailchimp.com/
  12. 12 https://github.com/mailchimp/Email-Blueprints
  13. 13 http://blog.mailgun.com/transactional-html-email-templates/
  14. 14 http://emailclientmarketshare.com/
  15. 15 https://raw.githubusercontent.com/mailgun/transactional-email-templates/master/templates/alert.html
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-template-setup-opt.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-template-setup-opt.png
  18. 18 https://raw.githubusercontent.com/mailgun/transactional-email-templates/master/templates/styles.css
  19. 19 http://docs.shopify.com/themes/liquid-documentation/basics
  20. 20 http://docs.shopify.com/themes/theme-development/getting-started/development-environment
  21. 21 http://www.shopify.com/partners
  22. 22 http://mixture.io
  23. 23 http://jekyllrb.com/
  24. 24 http://www.siteleaf.com/
  25. 25 https://github.com/mailgun/transactional-email-templates/blob/master/templates/alert.html#L27
  26. 26 http://docs.shopify.com/themes/liquid-documentation/objects/for-loops
  27. 27 https://github.com/mailgun/transactional-email-templates/blob/master/templates/alert.html#L38
  28. 28 http://docs.shopify.com/manual/settings/notifications/email-variables
  29. 29 http://css-tricks.com/using-css-in-html-emails-the-real-story/
  30. 30 https://www.google.co.uk/webhp?sourceid=chrome-instant&amp;ion=1&amp;espv=2&amp;ie=UTF-8#q=inline+css+html+email
  31. 31 http://premailer.dialect.ca/
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-premailer-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-premailer-opt.jpg
  34. 34 http://premailer.dialect.ca/api
  35. 35 https://github.com/onassar/PHP-Premailer
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-template-8-opt.jpg
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-template-8-opt.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-airmail-opt.png
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-airmail-opt.png
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-ios-opt.jpg
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-ios-opt.jpg
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-gmail-opt.png
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-gmail-opt.png
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-mail-opt.png
  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-mail-opt.png
  46. 46 http://www.leemunroe.com/email-design-workflow/
  47. 47 http://www.dodocase.com/
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-dodocase-opt.png
  49. 49 http://www.dodocase.com/
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-dodocase-opt.png
  51. 51 http://www.shopify.co.uk/blog/12522201-13-amazing-abandoned-cart-emails-and-what-you-can-learn-from-them
  52. 52 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-fab-opt.jpg
  53. 53 http://www.fab.com
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-fab-opt.jpg
  55. 55 http://www.fab.com
  56. 56 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-chubbies-opt.jpg
  57. 57 http://www.chubbiesshorts.com/
  58. 58 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-chubbies-opt.jpg
  59. 59 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-blackmilk-opt.jpg
  60. 60 http://blackmilkclothing.com/
  61. 61 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-blackmilk-opt.jpg
  62. 62 http://blackmilkclothing.com/
  63. 63 http://www.smashingmagazine.com/wp-content/uploads/2014/10/17-holstee-opt.png
  64. 64 http://holstee.com
  65. 65 http://www.smashingmagazine.com/wp-content/uploads/2014/10/17-holstee-opt.png
  66. 66 http://holstee.com
  67. 67 https://econsultancy.com/blog/63466-nine-case-studies-and-infographics-on-cart-abandonment-and-email-retargeting#i.weabnjzqdeyu10
  68. 68 http://www.exacttarget.com/blog/13-best-practices-for-email-cart-abandonment-programs/
  69. 69 http://blog.mageworx.com/2014/04/cart-abandonment-email/
  70. 70 http://www.shopify.co.uk/blog/8484093-why-online-retailers-are-losing-67-45-of-sales-and-what-to-do-about-it

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

Startup Framework introduces WordPress support

Go to Source

thumbnail

The Web is overrun with an endless supply of frameworks, leaving web designers with no shortage of options. Yet, many web designers still find themselves working with an average, free theme. This is exactly where Startup Framework Theme for WordPress might come in handy.

We first featured, Startup Framework some time ago, and it’s now compatible with the world’s most popular CMS, WordPress; plus it’s considerably more flexible, and easier to customize.

Thanks to its inline visual editor and drag-and-drop functionality, a total of 100 blocks are placed at your service, so you can order/re-order them, and come up with a website that looks sharp.

Check out Startup Framework for WordPress’ short video review:

 

Easy to use

Once you’ve purchased Startup Framework for WordPress, you download and activate it. Then, your WordPress dashboard will sport a new menu item, named ‘SFW Pages’. That’s where you go to decide on the apparel of each web page. You need only move your cursor to ‘Add New’, then name your page, and simply click on the button that will lead you to a ‘Visual Editor’.

To describe it, the visual editor is highly intuitive on the whole, and lists a series of links to different sections of your site, on the left side (Headers, Footers, Contents, Contacts, etc). You are free to take your pick from a range of 23 Header styles. Furthermore, you can edit everything in the main view, and start from highlighting text in order to alter it, then upload images, and modify color schemes.

Startup Framework introduces WordPress support

You are also at liberty to edit or add your own CSS code, by accessing the icon from the top-right corner of the editor’s interface. Finally, hit the ‘Preview’ button before publishing, and see how each individual element impacts your overall site appearance.

 

100% responsive

Startup Framework for WordPress is bound to help users make riveting websites with great ease, and it’s good to know that each of this theme’s 100 blocks is calibrated to be 100% responsive across mobile devices, and get along famously with Retina displays.

Startup Framework introduces WordPress support

Startup Framework for WordPress isn’t a fully-fledged solution for web designers with a keen eye for detail, let alone for web developers who are completely ignored. However, this theme would be a terrific choice if you don’t care to design everything from scratch yourself, as well as if you’re pressed for time.

 

Final thoughts

A single user license from Startup Framework for WordPress is affordable, and it’s good to know that Designmodo offers a 20-day money-back guarantee. If you’re running a design agency, it might even make sense to invest in a bundle of five licenses. However, a demo version is also available for those who want to try it, before committing to a license.

Designmodo have set up a coupon code especially for WebdesignerDepot readers: Just enter DEPOT at the checkout for a 25% discount.

Startup Framework introduces WordPress support

 

[-- This is a sponsored post on behalf of Startup Framework for WordPress --]

LAST DAY! Bootstrap 3.0. Starter Kit PRO: 35 Responsive Templates – $9
Startup Framework introduces WordPress support

Source

Design Accessibly, See Differently: Color Contrast Tips And Tools

Go to Source

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.

Web page viewed with NoCoffee low-vision simulation1
Web 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
Showcase visitors wear goggles that simulate low-vision and color-blindness conditions.
Some of the goggles used in the Accessibility Showcase
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:

Seen through Chromatic Vision Simulator, the green and orange buttons show normal (C), protanope (P), deuteranope (D) and tritanope (T).14
Seen 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:

The green and orange buttons are viewed in Photoshop with deuteranopia soft proof and normal (text labels added).16
The 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.

The Weather mobile app, viewed with Chromatic Vision Simulator, shows normal, deuteranope, protanope and tritanope simulations.18
The 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.

The Weather mobile app is being viewed with the supported condition simulations.20
The 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.

Examples

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.

Button with gradients: normal view; view in grayscale; and as a proof, deuteranopia.23
Button 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.”

Form example: normal view; in Photoshop, a view in grayscale; and as a proof, deuteranopia.25
Form 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.

Normal view and as a proof, deuteranopia: Check the text against the alternating background colors.27
Normal 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?

Mobile app form showing disabled fields and button (left) and then enabled (right).30
Mobile 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.

Mobile app form example: normal, grayscale and proof deuteranopia.32
Mobile 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.

Simulating achromatopsia (no color), deuteranopia, protanopia using NoCoffee.35
Simulating achromatopsia (no color), deuteranopia, protanopia using NoCoffee. (View large version36)
Simulating low visual acuity, diabetic retinopathy, macular degeneration and low visual acuity plus retinitus pigmentosa, using NoCoffee.37
Simulating 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).

Test dark-gray, medium-gray and light-gray using the WebAim Color Contrast Checker.43
Test 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.

Modify colors to pass45
In 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.

Test light-gray and medium-gray text on a gray background.47
Test 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.
Colour Contrast Analyser, and color wheel to modify colors50
Colour 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.
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.

Summary

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)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevis-large.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevis-large.png
  3. 3 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  4. 4 http://www.who.int/mediacentre/factsheets/fs352/en/
  5. 5 http://www.un.org/esa/population/publications/worldageing19502050/
  6. 6 http://www.mayoclinic.org/diseases-conditions/presbyopia/basics/causes/con-20032261
  7. 7 https://www.nei.nih.gov/healthyeyes/aging_eye.asp
  8. 8 http://webaim.org/articles/visual/colorblind
  9. 9 https://www.youtube.com/watch?feature=player_embedded&v=7MyHZofcNnk
  10. 10 https://itunes.apple.com/us/app/chromatic-vision-simulator/id389310222?mt=8
  11. 11 https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en
  12. 12 https://itunes.apple.com/us/app/visionsim-by-braille-institute/id525114829?mt=8
  13. 13 https://play.google.com/store/apps/details?id=com.BrailleIns.VisionSim&hl=en
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/10/CVSbuttonsOG-large.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/CVSbuttonsOG-large.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/textonbuttons-large.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/10/textonbuttons-large.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weatherCVS-large.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weatherCVS-large.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weathervisionsim-large.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weathervisionsim-large.png
  22. 22 http://help.adobe.com/en_US/creativesuite/cs/using/WS3F71DA01-0962-4b2e-B7FD-C956F8659BB3.html#WS473A333A-7F61-4aba-8F67-5553208E349C
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/10/buttongradients-large.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/10/buttongradients-large.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/10/logindev-large.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/logindev-large.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/10/rowsandicons-large.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/10/rowsandicons-large.png
  29. 29 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields-large.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields-large.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields_bwcc-large.png
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields_bwcc-large.png
  34. 34 https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=en&gl=US
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeecolorsim-large.png
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeecolorsim-large.png
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevisionsims-large.png
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevisionsims-large.png
  39. 39 http://webaim.org/resources/contrastchecker
  40. 40 http://paciellogroup.com/resources/contrastAnalyser
  41. 41 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html
  42. 42 http://webaim.org/resources/contrastchecker
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2014/10/colorcontrastgrays-large.png
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/10/colorcontrastgrays-large.png
  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2014/10/modifylightgray-large.png
  46. 46 http://www.smashingmagazine.com/wp-content/uploads/2014/10/modifylightgray-large.png
  47. 47 http://www.smashingmagazine.com/wp-content/uploads/2014/10/gray_graybackground-large.png
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2014/10/gray_graybackground-large.png
  49. 49 http://paciellogroup.com/resources/contrastAnalyser
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2014/10/ccanalysercolorwheel-large.png
  51. 51 http://www.smashingmagazine.com/wp-content/uploads/2014/10/ccanalysercolorwheel-large.png
  52. 52 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  53. 53 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html
  54. 54 https://www.paypal-engineering.com/2014/03/13/get-a-sneak-peek-into-paypal-accessibility-showcase/
  55. 55 http://www.adobe.com/accessibility/products/photoshop.html
  56. 56 http://help.adobe.com/en_US/creativesuite/cs/using/WS3F71DA01-0962-4b2e-B7FD-C956F8659BB3.html#WS473A333A-7F61-4aba-8F67-5553208E349C
  57. 57 http://webaim.org
  58. 58 http://webaim.org/resources/contrastchecker/
  59. 59 http://wave.webaim.org
  60. 60 http://webaim.org/articles/visual/colorblind
  61. 61 http://www.paciellogroup.com/resources/contrastAnalyser/
  62. 62 https://itunes.apple.com/us/app/chromatic-vision-simulator/id389310222?mt=8
  63. 63 https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en
  64. 64 https://itunes.apple.com/us/app/visionsim-by-braille-institute/id525114829?mt=8
  65. 65 https://play.google.com/store/apps/details?id=com.BrailleIns.VisionSim&hl=en
  66. 66 https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=en&gl=US
  67. 67 http://accessgarage.wordpress.com/2013/02/09/458/
  68. 68 https://www.nei.nih.gov/healthyeyes/aging_eye.asp
  69. 69 http://www.who.int/mediacentre/factsheets/fs352/en/
  70. 70 http://www.mayoclinic.org/diseases-conditions/presbyopia/basics/causes/con-20032261
  71. 71 http://www.un.org/esa/population/publications/worldageing19502050/
  72. 72 http://www.lowvisionsimulationkit.com
  73. 73 http://www.lowvisionsimulators.com/find-the-right-low-vision-simulator

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

The secret of grid layouts, and the mistake you’re probably making

Go to Source

thumbnailI mentioned the “Swiss School” and “the grid” layout in another article and while most comments were positive about the article, there were a number of people who asked if the grid was even still alive. I assure you the grid layout is alive, well, and used all the time. Those who never learned it just don’t realize the rules of the grid and how one can use or even bend, or break those rules for success in designing incredible layouts.

Firstly, using a grid layout isn’t something assigned to print or digital exclusively. Layout is layout and design is a method to convey a message using multiple elements. Naturally, those elements work in harmony when consideration for how the human eye sees the layout and how the brain processes it. Make the brain work too hard at deciphering the message and it shuts off synapses to the layout completely.

Why the grid is misunderstood

There’s a very good, basic lesson on how to use the grid system on DesignersInsights.com. Using Layout Grids Effectively is a sound lesson for those who have never heard of the grid in art school, or other life lessons. It covers the use of columns as well as other elements, the rule of thirds, and the golden ratio. It just doesn’t go past common sense into why some designers are great and others just mediocre.

Imagine every designer learned layout from this Designers Insights article. We would all be churning out the same designs. It’s the ones who see the grid, almost like idiot savants, and use it as no others can — or rather, as others would do if they could see it — that produce the best design work.

The easiest way to explain how the grid is almost boundless when it comes to layout possibilities, is to think of it with this odd sounding example: Chances are, you’ve seen one of those “how many squares do you see” tests that pop up on Facebook. So, how many are there? Did you count the four or eight that are formed by the singular squares? There are squares within squares, making more squares, and so on. That is grid layout!

 

The how and why

As designers, we may be familiar with the Swiss school of design from basic design 101 class. Some call it the evolution of modern design. Others may think of it as just a step to where design style is now. Both may be correct.

In a spotlight on Josef Müller-Brockmann I wrote for another blog, it detailed how he and his contemporaries evolved the design rules we still adhere to today:

Josef Müller-Brockmann (May 9th, 1914 – August 30th, 1996) is considered one of the key players in the Swiss School of international Style. When one considers the time of his career, which included the Second World War, the Cold War and the growing influence of a Europe on the mend from destruction and fear, he certainly informed a design style that influenced designers on a global scale.

Müller-Brockmann was more than just a man who sought to form what is now labeled the Swiss School; Constructivism, De Still, Suprematism and the Bauhaus, all of which pushed his designs in a new direction that opened doors for creative expressions in graphic design. Among his peers he is probably the most easily recognized when looking at that period.

His design sense of the 1950s aimed to create posters that communicated with the masses. This was no small feat as the pieces had to communicate across a language barrier, with English, French, German and Italian speaking populations in Switzerland alone. It was the harmony and simplicity of these pieces that influenced a post-war world that had lost the sense of central nationalism and gained a lesson in the need for globalization. Müller-Brockmann was soon established as the leading practitioner and theorist of the Swiss Style, which sought a universal graphic expression through a grid-based design, purged of extraneous illustration and subjective feeling.

The grid was the prioritization and arrangement of typographic and pictorial elements with the meaningful use of color, set into a semblance of order, based on left-to-right, top-to-bottom. According to Wikipedia, the grid system is:

“a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.”

Now, if left on one’s own to learn about layout and design, it would seem rational that the grid system was strictly left-to-right, top-to-bottom. everything boxed in, with mathematical precision. But looking at Müller-Brockmann’s work shows a successful use of design and illustrative elements that fall together but are not bound by the same layout you see in every blog and website. Left-to-right, top-to-bottom, every image being boxed in. But some aren’t!

The secret of grid layouts, and the mistake you’re probably making 

The secret of grid layouts, and the mistake you’re probably making 

Müller-Brockmann, despite what you might think from the primer of what the grid layout allows, the very man who drove the practice knew how to use it. Not everything is horizontal or vertical. The lines are not to follow, or color within—they are areas that accentuate the elements within them.

WordPress themes, for one, are evolving their design capabilities along with whatever coding can supply. Newspaper style has become magazine layouts with movement, parallax scrolling and animation. The web is changing and design will have to change along with it but, the principles of the grid will continue because they are the foundation, the starting point, the framework that holds elements together. And there will be those that rebel.

“Among the few I have indicated, is there no dynamic man of action, the rebel who will help determine the aspect of the collective expression of tomorrow? Ponder this question and know that to make beautiful creations for the sake of their aesthetic value will have no social significance tomorrow, will be nonsensical self-gratification. Every era contains the conditions for providing a rebel.” – Piet Zwart

Piet Zwart was born on May 28th, 1885 in Zaandijk, North Holland (died on September 27th, 1977 at the age of 92). From 1902 until 1907 he attended the School of Applied Arts in Amsterdam where it is said there was little division between several disciplines as drawing, painting, architecture and applied arts. Zwart and fellow students developed by themselves with little interference from above, as teachers weren’t always present. “A smashing school with no idea of a program,” as Zwart recalls.

It was this lack of formal classroom training that led him to approach his design, especially typography in a fresh and non-traditional way. While the purely horizontal grid design of straightforward type and images was the norm, leading to the Swiss School of Design in the 1940s and 1950s, Zwart felt his designing from his gut.

As with most geniuses, there was a self-initiated method that broke the very same rules he had never learned, or, as I suspect, he cared nothing for and wanted to break. He also experimented in the use of photography incorporated into his designs, leading to photomontages. Still, with all the rule breaking and experimentation, Zwart was concerned with readability, feeling that typography should be clear and functional. If any influence must be assigned, he used the basic principles of constructivism and “De Stijl” in his commercial work.

The secret of grid layouts, and the mistake you’re probably making

The secret of grid layouts, and the mistake you’re probably making

The secret of grid layouts, and the mistake you’re probably making

Zwart, although the rebel of design, still needed to keep the design from overpowering the message. In his most commercial work (bottom) he broke with any sense of what a cable manufacturing company would ever do to sell different kinds of power cords. He also used the grid to organize the elements for an easier understanding of the target audience.

The message often beats down the design when it comes to layout. An article about using the “Z” layout, Focal Points in Design Layout, talks about how society is ruled by reading left-to-right, then scanning down to the right and then left-to-right again (naturally, the “Z” will get flipped in cultures that read right-to-left and turned for those that read up-to-down). There is no choice unless you want to muddle the message of the design by making people work to interpret your design! But within what some see as limitations, there are really endless possibilities. 

The secret of grid layouts, and the mistake you’re probably making

A former illustration teacher of mine showed me a handy tool for identifying the main focus points on a page. First, draw a horizontal line from the top left corner to the bottom right corner (reverse if designing for a country that reads right to left). Next, draw a line from each other corner to join the previous horizontal line at a right angle. The point the lines join is the area of maximum attention.

Designer and educator, Ed Fella, referred to his work as stylistically “getting it wrong.” His work is raw and obsessive. It has power and spontaneity. Born from the knowledge of layout, typography, design and theory, he seems to have ended up getting it very, very right. He has inspiring words every designer should read:

“I am interested in graphic design as art,” he says. “This is a kind of art practice that uses forms that come out of graphic design, decorative illustration, and lettering, all mixed together-forms that come out of Twentieth Century art, out of Miró and Picasso — all of it has a genealogy and a certain look — in the same way that artists today use comic books and graphic novels. I was an illustrator, so you see endless styles popping in and out of the books. The drawings are an unconscious discharge of all the styles and forms that I used as a commercial artist for 30 years — that was my profession — I did it every single day. So, my unconscious has all this stuff in it, and now, because I don’t have to make meaning anymore, I can just use the techniques, like a machine that has long ago stopped making widgets, but the machine is still running. I’m still making stuff. I love the craft of it — of carefully making some little thing.”

The secret of grid layouts, and the mistake you’re probably making

Fella is definitely a rule breaker but he maintains a discipline with his designs, keeping the message at the forefront, using the grid to its fullest extent—maybe taking it even further!

The grid layout is not some obsolete design principle and whether it’s for print or the web, it is a design strength that broke ground decades ago but still rings true with basics of great design. It is the foundation on which all design is built.

I was never one to follow the rules but teachers and great artists have some memorable quotes on the subject. “Before you can break the rules, you have to know the rules” and “to create your own world you must first understand the real world.”

If you study the rule breakers, you can see they all had a basis of learning the real world, the basics and evolving from there. The rules are the basic understanding of layout, type, elements of color, illustration and photography and how the eye views them and the brain deciphers it all when put together.

 

Featured image/thumbnail, grid image via Shutterstock.

LAST DAY! Bootstrap 3.0. Starter Kit PRO: 35 Responsive Templates – $9
The secret of grid layouts, and the mistake you’re probably making

Source

Hybrid Mobile Apps: Providing A Native Experience With Web Technologies

Go to Source

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.

HTML can do that.

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.

Benefits

  • 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)

Drawbacks

  • 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.
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 iOS, Android and Windows Phone.
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 Trigger.io 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
Pull down to refresh on iOS. (Image credit: Damien Antipa5756)
Pull down to refresh on Android.
Pull down to refresh on Android. (Image credit: Android Widget Center58)
Pull down to refresh on Windows Phone.
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.

Native WebView wrapper around a HTML/CSS/JavaScript code base.65
A 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).

Trigger.io

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). Trigger.io’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, Trigger.io’s steep pricing81 is probably the biggest downside for many developers.

With MoSync82 having gone offline a couple of days ago, Trigger.io 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 Trigger.io’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:

Conclusion

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)

Footnotes

  1. 1 http://www.visionmobile.com/product/developer-economics-q3-2014/
  2. 2 http://www.visionmobile.com/product/developer-economics-2013-the-tools-report/
  3. 3 http://www.phonegap.com
  4. 4 http://www.trigger.io
  5. 5 https://xamarin.com/
  6. 6 http://www.appcelerator.com/titanium/
  7. 7 http://www.embarcadero.com/products/rad-studio/fmx
  8. 8 https://developer.apple.com/library/ios/navigation/
  9. 9 http://developer.android.com/design/index.html
  10. 10 https://dev.windowsphone.com/design
  11. 11 http://www.telerik.com/kendo-ui
  12. 12 http://ionicframework.com/
  13. 13 http://jquerymobile.com/
  14. 14 http://onsenui.io/
  15. 15 http://www.sencha.com/products/touch/
  16. 16 http://chocolatechip-ui.com/
  17. 17 https://github.com/jakiestfu/Snap.js
  18. 18 http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/
  19. 19 http://c2prods.com/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/
  20. 20 http://de.slideshare.net/yaelsahar/tapping-into-mobile-ui-with-html5
  21. 21 http://jsfiddle.net/prud/dnebx02p/
  22. 22 http://david-smith.org/iosversionstats/#retina
  23. 23 http://developer.android.com/about/dashboards/index.html#Screens
  24. 24 http://caniuse.com/#feat=svg
  25. 25 http://responsiveimages.org/
  26. 26 http://www.uifuel.com/hd-retina-display-media-queries/
  27. 27 http://iosfonts.com/
  28. 28 http://developer.android.com/design/style/typography.html
  29. 29 http://msdn.microsoft.com/library/windows/apps/hh700394.aspx#ux_font_choice
  30. 30 http://support.apple.com/kb/HT5956
  31. 31 http://mir.aculo.us/2013/09/16/how-to-create-a-web-app-that-looks-like-a-ios7-native-app-part-1/
  32. 32 http://caniuse.com/#feat=fontface
  33. 33 http://ionicons.com/
  34. 34 http://ios7-icon-font-demo.herokuapp.com/
  35. 35 http://www.spiderflyapps.com/downloads/android-developer-icons-the-font/
  36. 36 https://github.com/Turbo87/Android-Action-Bar-Icon-Pack-Font
  37. 37 http://modernuiicons.com/
  38. 38 http://fontello.com/
  39. 39 https://icomoon.io/app
  40. 40 http://fontastic.me/
  41. 41 http://msdn.microsoft.com/library/windows/apps/jj841126.aspx
  42. 42 http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
  43. 43 http://estelle.github.io/mobileperf/
  44. 44 http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
  45. 45 https://developers.google.com/speed/articles/reflow
  46. 46 http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/
  47. 47 http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/
  48. 48 https://github.com/ftlabs/fastclick
  49. 49 http://jsfiddle.net/prud/x9y6cfhg/
  50. 50 http://fgnass.github.io/spin.js/
  51. 51 http://www.queness.com/post/9150/9-javascript-and-animated-gif-loading-animation-solutions
  52. 52 http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/
  53. 53 http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
  54. 54 https://github.com/filamentgroup/Overthrow#browser-support
  55. 55 http://iscrolljs.com/
  56. 56 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
  57. 57 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
  58. 58 http://androidwidgetcenter.com/android-tips/how-to-refresh-gmail-on-android/
  59. 59 http://dwcares.com/pull-to-refresh-2/
  60. 60 https://github.com/prud/ios-overflow-scroll-to-top
  61. 61 http://jsfiddle.net/prud/r7kqr1a3/
  62. 62 http://quojs.tapquo.com/
  63. 63 http://hammerjs.github.io/
  64. 64 http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries
  65. 65 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg
  66. 66 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg
  67. 67 http://phonegap.com/
  68. 68 http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/
  69. 69 http://cordova.io
  70. 70 https://build.phonegap.com/
  71. 71 http://www.telerik.com/appbuilder
  72. 72 http://www.appgyver.com/
  73. 73 http://appery.io/
  74. 74 http://monaca.mobi
  75. 75 https://software.intel.com/html5/tools
  76. 76 http://www.sencha.com/products/touch/
  77. 77 https://trigger.io
  78. 78 http://gruntjs.com/
  79. 79 https://trigger.io/reload/
  80. 80 http://docs.build.phonegap.com/en_US/tools_hydration.md.html
  81. 81 https://trigger.io/pricing/
  82. 82 http://www.mosync.com/
  83. 83 http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/
  84. 84 http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html
  85. 85 http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/
  86. 86 https://developer.apple.com/safari/tools/
  87. 87 https://developer.chrome.com/devtools/docs/remote-debugging
  88. 88 http://msdn.microsoft.com/en-us/library/windows/apps/hh441472.aspx
  89. 89 http://people.apache.org/~pmuellr/weinre/
  90. 90 http://html.adobe.com/edge/inspect/
  91. 91 https://trigger.io/reload/
  92. 92 https://developer.apple.com/appstore/contact/appreviewteam/index.html
  93. 93 https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html
  94. 94 http://developer.android.com/distribute/googleplay/start.html
  95. 95 http://developer.android.com/distribute/tools/launch-checklist.html
  96. 96 http://msdn.microsoft.com/library/windows/apps/jj206736.aspx
  97. 97 http://youtu.be/9pmPa_KxsAM?t=2h56m6s
  98. 98 http://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users

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

What’s new for designers, October 2014

Go to Source

what's new for designers october 2014The October edition of what’s new for web designers and developers includes new web apps, content management systems, iOS apps, email resources, social media tools, project management apps, CSS tools, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Elokenz

Elokenz is a blogging toolbox that includes tools for engaging with readers on social media, tracking performance, and semantic search engine optimization.

elokenz

 

Storify

Storify is an easy-to-use platform for engaging with others on social media. It includes tools for managing breaking news, live events, brand campaigns, captured chats, and more.

storify

 

Litmus Builder

Litmus Builder is a web-based email editor for building better marketing emails. It includes one-click testing, easy HTML editing, and preview tools for desktop and mobile.

litmus builder

 

Adobe Color CC

Adobe Color CC makes it easy to create color palettes from any image on your iOS device, wherever inspiration strikes. It includes an interactive color wheel, preset color modes, and more.

adobe color cc

 

Adobe Brush CC

Adobe Brush CC lets you create Photoshop and Illustrator brushes right on your iPad or iPhone.

adobe brush cc

 

Adobe Shape CC

Want to create a vector shape from an image? Adobe Shape CC makes it simple to turn any high-contrast image into vectors, right on your iOS device.

adobe shape cc

 

Edge Commons

Edge Commons is a collection of “dirty little helpers” for using Adobe Edge Animate. It includes helpers for parallax, spotlight, adaptive layouts, and more.

edge commons

 

Gleez CMS

Gleez CMS is an open source and extensible CMS that’s built on the Kohana Framework. It includes support for modules, themes, widgets, users and groups, and more.

gleez cms

 

AllTheFreeStock.com

AllTheFreeStock.com curates free stock images, videos, and icons from various sources, all of which are licensed under the Creative Commons Zero license.

allthefreestock

 

Anchor

Anchor is free, self-hosted invoicing software that makes it easy to get paid with PayPal or Stripe.

anchor

 

GifDeck

GifDeck is a tool for converting your SlideShares into animated Gifs. All you have to do is paste in your SlideShare URL.

gifdeck

 

Mapbox Studio

Mapbox Studio is a vector-driven map design app. It includes typography options, imagery and effects tools, and more.

mapbox studio

 

Dimensions

Dimensions is a Chrome browser extension that makes it easy to measure anything in your browser. You can measure between images, input-fields, buttons, videos, gifs, text, icons, and anything else you see in the browser.

dimensions

 

Anicons

Anicons is a set of animated icons. The first version has over 40 icons, all of which can be customized.

anicons

 

Stack

Stack is a simple task manager for keeping projects on track with your team. It includes customiable columns, unlimited projects, and more, and comes with a 30 day free trial.

stack

 

Mix

Mix is a collaborative design app from FiftyThree that lets you build upon the designs of others. You can write, design, sketch, and more.

mix

 

Template Builder

Campaign Monitor’s Template Builder makes it easy to build a free HTML email in just 60 seconds. Emails are fully tested, mobile ready, and can be downloaded for use outside of Campaign Monitor.

template builder

 

Fitter Happier Text

Fitter Happier Text gives you fully fluid, performant headlines using JavaScript and JSON.

fitter happier text

 

Design Kit

Design Kit is a set of design tools for human-centered design. It’s available in hard copy for purchase, or as a free PDF download.

design kit

 

Creative VIP

Creative VIP is a subscription service that offers exclusive discounts and more than 600 graphic design resources to its members.

creative vip

 

Takana

Takana is a live SCSS and CSS editor. It lets you see your changes live, in the browser, as you make them.

takana

 

Apple Watch GUI PSD

This Apple Watch GUI PSD is a great resource for designers looking to get started with Apple Watch apps.

apple watch gui psd

 

Pictura

Pictura is a simple Photoshop plugin for searching Flickr right from within Photoshop, and then using images you’ve found right into your project without an outside download.

pictura

 

DragGradients

DragGradients is a simple gradient generator that lets you drag and drop points within your browser’s viewport to create a custom gradient. You can customize the colors (including how many) and then download the CSS.

draggradients

 

Dropbox Guide

These Dropbox Guides are available for both Users and Admins, and including information on how to best utilize Dropbox for your business.

dropbox guide

 

Random CSS Gradient Generator

The Random CSS Gradient Generator generates a completely random gradient, which you can then grab the code for.

random css gradient generator

 

Email Design Guide

MailChimp’s Email Design Guide offers up some great advice on how to best convey your email message, with better use of images, fonts, and more.

email design guide

 

Basscss

Basscss is a collection of base element styles, utilities, layout modules, and more designed for speed and performance, as well as scalability.

basscss

 

Readme

Readme is an easy way to create documentation and reference materials for your apps. It includes a theme builder, API explorer so users can play with your API right inside the documentation, and more.

readme

 

UX Companion

UX Companion is a glossary of UX theories, tools, and principles for your iOS device. You can learn new concepts and techniques, and then dive into more in-depth hand-picked resources.

ux companion

 

Random Users Generator

This simple Random Users Generator makes it easy to create random users for your app, complete with names, photos, contact information, short bios, job titles, and more.

random users generator

 

Lychee

Lychee is a self-hosted photo management app that runs on your server or web hosting. It lets you upload, manage, and share photos like you would from a native app.

lychee

 

Polya (free)

Polya is a display font with a geometric flare that’s free for personal and commercial use.

polya

 

Arca Majora (free)

Arca Majora is a free uppercase font with geometric shapes that’s great for display use.

arca

 

Nexa Rust ($49)

Nexa Rust is a superpack of 83 fonts, creating a multifaceted font system that includes sans, slab, script, and handmade styles, as well as extras.

nexa rust

 

Brela (free)

Brela is a free serif typeface that looks great at display or body sizes.

brela

 

YWFT Agostina Alternate ($25)

YWFT Agostina Alternate is an updated and improved version of the original YWFT Agostina font that retains all of the swash forms, letter counts, and Opentype features of the original.

agostina alternate

 

Handtypo Script ($15)

Handtypo Script is an adaptable, unique script typeface that works well with a variety of other typefaces.

handtypo

 

Slabby Joe ($8)

Slabby Joe is a handwritten typeface that comes in light, regular, and bold weights.

slabby joe

 

Windflower ($5)

Windflower is an uppercase display typeface that’s inspired by vintage serif fonts. It’s great for posters and other display uses.

windflower

 

Eveleth ($9)

Eveleth is a distressed letterpress family that has vintage charm and exceptional realism.

eveleth

 

Madras ($10)

Madras is a sans-serif type family that includes seven weights, plus matching italics.

madras

 

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!

25+ Premium WordPress Themes from Zappy Themes – only $37!
Whats new for designers, October 2014

Source