It’s been said that the only thing constant is change; and in the world of advertising, this saying is especially true. For years, successful “Mad Men” merged art with copy, effectively defining the creative team and reaping great rewards. Fast forward to today, where digital advertising is increasingly omnipresent, and one thing becomes clear: the dynamic duo of art and copy must make room for a third member, code.

With this in mind, Google has recently introduced Art, Copy & Code — a series of experiments designed to redefine advertising in a connected world. These projects illustrate how creativity and technology can merge to give consumers an interactive experience. Plans include partnering with companies like Burberry and Adidas, along with joining forces with filmmakers and other creatives to help brands inventively use technology to connect with consumers.

The first test is a partnership with Volkswagen in the production of the VW Smileage app. Using a metric called “smileage”, the app draws upon signals like weather, location, and traffic to measure a trip’s fun; plus, the experience can be shared with friends through continual plotting on a live interactive map. This social driving experience — which can be used in any vehicle, not just Volkswagens — is revealed in the video below. 

Clearly, the networked world we live in demands that advertisers engage consumers like never before. Print pitches and passive on-looking simply won’t do in our connected, digital society, so the marriage of art, copy, and code is timely. Luckily, the minds at Google recognize that no amount of technology can replace the emotional storytelling aspect of successful advertising endeavors of the past. 

What hasn’t changed is the need for human insights, breakthrough ideas and emotional stories. Code facilitates new kinds of experiences, but it doesn’t replace the storytelling skills the advertising industry has honed over the past fifty years. Our connected world is giving brands more dimensions and touch points, but they still need something compelling to offer in order to create a real connection.

 The reach of Google’s specific experiments is, of course, yet to be seen. But in the meantime, we can be reminded that the old way of doing things still holds a lot of merit — as long as it meets the new way of doing things in the middle.

How successful do you think Google will be with its series of experiments? Do you think the role of digital media will supersede all others as time goes on? Let us know in the comments.

Business Card Bundle: 33 Stylish Templates – only $27!

Today, May 9th, is Global Accessibility Awareness Day #GAAD a whole day devoted to learning about web and mobile accessibility. I encourage you to take some of your time today to learn a bit more about this important topic.

Accessibility is a subset of UX that aims to makes websites usable by the most people possible, including those with disabilities. For lots of us who work on the web, accessibility is generalized as “blind people”, but it’s more than just screen readers and covers a wide range of users with visual, auditory, motor, and cognitive disabilities. Today is about learning how to craft better, more usable websites for people with various circumstances and situations in life.

Ways you can celebrate #GAAD

Here’s a few challenges that you and your coworkers can try today:

• Unplug your mouse for hour
• Use the accessibility features on your smartphone
• Turn off your screen and use a screen reader for an hour

Check your own site, visit some of your favorite sites, try to use your favorite social network. You may find that it’s not that easy and you feel restricted. Creating accessible websites can provide people with digital independence.

Learning Accessibility

I’ve been making websites for over a decade but am often confused by web accessibility. Sometimes, despite my best efforts, a tiny error or omission (usually with JavaScript) leaves a site completely inaccessible. Despite this, I firmly believe that knowing the basics about accessibility is part of the job description for every front-end web developer.

There are lots of great resources for learning accessibility, but finding the latest, up-to-date information is a bit difficult. Often times good information is buried in long academic posts or comment threads scattered across hundreds of websites. In an effort to make learning accessibility digestible and up-to-date, myself and a growing group of contributors have created The Accessibility Project.

The A11YProject is a community driven open source project that seeks to make learning web accessibility easier. Because it’s open source, anyone can contribute, update articles, and fix errors. It’s an open source knowledge base dedicated to improving how we build websites. I encourage you to take some time today to browse the site and pick up a few new tricks. The “Quick Tips” and “Quick Tests” are some of my favorites. Each article is under 2 minutes in length.

If we were all to learn some of the basics of building accessible websites and we built empathy into our processes, we could impact great change. If each of us did our part, rather than ignoring it, we could incrementally help make the world a better place for millions of individuals.

For more information on #GAAD:

Again, I encourage you to take today to learn more about accessibility. Tweet about #GAAD and share this article with to your friends and coworkers.

For more information about Global Accessibility Awareness Day:

• Visit http://globalaccessibilityawarenessday.org/
• Follow @gbla11yday or #GAAD on Twitter

If you’re still interested:
- Join the #a11y conversation on Twitter
- Have questions? Ask @a11yproject on Twitter and we’ll try to get you answers.

The post Happy Global Accessibility Awareness Day! appeared first on Treehouse Blog.

Android is huge: 480 million people currently use Android devices, and 1 million new devices are activated daily. This means that every three weeks, the number of people who activate new Android devices is equal to the entire population of Australia. (Recent studies by Nielsen show that more Android devices are on the market than iOS devices.)

Popular apps that become available on Android experience huge growth. For example, Instagram grew by 10 million users with the launch of its Android app — in just 10 days.

Despite this unprecedented expansion of the platform, the majority of Android apps are… well, not great. Fewer quality apps are in Google Play than in the iTunes Store. Part of the reason for this is that Android has been going through puberty in the past few years. It was disorganized and erratic, and many designers avoided it — even hated it — and naturally gravitated towards iOS.

Some of Android’s problems no longer exist, and others have been blown out of proportion. For the ones that do exist, we’ll provide guidance on how to deal with them and how to start designing your first great Android app.

Symptoms Of Puberty

Many Android apps underperformed because the platform wasn’t mature enough to allow great apps to emerge. Though a powerful laboratory — it offered manufacturers and developers the freedom and openness to create whatever they wanted — not many wanted to work in a sandbox environment every day. But that sandbox has since coalesced into a foundation for great design.

The points below are what you might remember about Android — and possibly what curbed your desire to give it a try — but these issues have also been eliminated or improved. If your concerns appear in this list, then the next section will demonstrate how they’ve been resolved with Android’s maturation and how you can design a better app as a result.

Lack of Consistency in Google’s Own Apps

Not long ago, almost all of Google’s own Android apps looked different from each other.

Google took more than a year to start following its own advice. The action bar design pattern was presented in 2010 but wasn’t implemented until October 2011, with Android OS 4.0.

Lack of a User-Centric Design Culture in the Android Community

Google’s failure to set an example for other developers (because of its own inconsistencies) and the lack of consistent design guidelines and patterns contributed to another bigger problem: poor user experience. Good design starts with people; it leverages technology to help users accomplish their goals. Google wasn’t communicating this to developers clearly enough (unlike Apple).

Dramatically Inconsistent Experience Between Devices and OS Versions

Manufacturers often customize the system’s UI and hardware buttons. This contributed to fragmentation, made testing and quality control much harder and made consistency in app design nearly impossible.

Manufacturers used to put hardware buttons in different orders. Switching between devices was a pain.

Properly testing apps in the changing and fast-growing market was difficult for developers. Thus, a majority of apps didn’t function as they should have or were poorly designed.

Those apps are still there, but yours doesn’t have to be one of them. Android has since improved, enabling you to create a better and more consistent experience for your users.

Android Has Matured

The Android user experience today is more robust than ever before, making it easier for app designers and developers to deliver great apps. While some of the earlier problems still exist, most have become more manageable — and many more have been solved altogether.

One fundamental problem remains, however: there aren’t enough great apps. But with an improved and mature Android platform, designers and developers can solve this problem. All we have to do is give Android another chance.

The areas below are what the mature Android has to offer.

Better App Discovery

Previously, the discovery process was limited to searching by keyword and then trying out all of the results. The new Google Play store offers better discovery through featured apps and staff picks.

The new Google Play store offers more ways to discover cool new apps than its predecessor, Android Market.

Proper Android Design Guidelines

Until recently, no direction was provided for the basic elements that every app requires. Google has since created design guidelines, which remove the burden of small design decisions from app designers and developers. We can finally focus on the core value of the apps we’re creating and ensure a consistent experience across devices.

Example of a grid and a 48 density-independent pixel (DP) rhythm, taken from the “Metrics and Grids” section of the guidelines.

Menu and Search Hardware Buttons Are Gone

Google has started removing hardware buttons from its devices, uniting the hardware and software and making Android devices more elegant and easier to use.

The Nexus 4 is an instance of Google’s new approach to hardware buttons. They are always there, always in the same order. And gone are the search and menu buttons.

A variety of Android device types still exist (for example, LG still produces devices with Android 4.0 and hard menu buttons), yet this diversity is one of the main reasons why Android apps are able to excel.

Fragmentation Isn’t All Bad

Fragmentation may be the biggest remaining challenge facing designers and developers, and it’s built into Android’s DNA — a permanent part of the Android experience. This diversity offers designers an opportunity to reach an unprecedented number of people globally.

Learning to work within this fragmentation will make you a better designer or developer overall, with broader knowledge and an improved skill set. Given the rewards, the challenge is worthwhile to pursue. And to succeed in this pursuit, here are a few things to keep in mind when creating your Android app.

Tips For Creating A Successful Android App

Get to Know Android

To understand Android, you should learn how to use it and get to know its users. The best way to do this is by buying several devices from different manufacturers, with different screen sizes and maybe even OS versions. This will help you not only to understand user diversity but also to test your app.

To choose the best devices for your app, check the latest statistics from Google and select a device with your desired specifications. Independent studies, such as OpenSignal’s August 2012 report, can also help you select devices.

Something to keep in mind is that Android updates are controlled by service providers and, as a result, usually arrive earlier on devices that are created in collaboration with Google, such as the Nexus series. Picking up the latest Nexus devices will keep you on the cutting edge of platform releases. You can save money by buying a used device, but make sure it runs the version of Android that you need before purchasing it (many old devices are no longer updated).

Talk to your Android-using friends about how they use their devices and what they are happy and unhappy about. That will help you get to know the environment and bring you into the culture.

Follow the Guidelines

Following the guidelines will help you create an app that feels native to any device. But that’s just one of many reasons why following them is worthwhile. They can also help you achieve the following:

• Create an app fit for virtually any device,
• Make the app feel true to Android,
• Provide a UI that is familiar to users,
• Make the app easier to develop and support,
• Increase the app’s chances of being featured in Google Play.

Keeping Android navigation patterns in mind and using elements that are native to the platform will also help you create a consistent experience across devices.

When bringing an iPhone design (left) to Android (right), use elements that are native to the platform: this table view is styled for Android; the buttons for searching and adding contacts are moved to the split action bar at the bottom; and switching between data views is done through the view control.

Custom apps are more difficult not only to support, but also to design when ensuring operability across devices. New Android apps look great thanks to the new design guidelines; they are also very different from apps created before Android 4.0.

Understand Android’s Look and Feel

Google has invested a lot of effort in bringing a consistent visual experience to all of its products, including Android. Android 4.0 introduced its own style: simple, plain, clean — more about function than form.

Although this provides great freedom in styling, you still have to consider the subtlety of Android’s visual style: saying more with less. Simply copying the styles and elements from an iOS app might not work. And releasing a new app with old styles or with elements that look like they belong on another platform could make users react negatively — which happened to Microsoft.

Browsing Android Niceties is a great way to grasp Android’s style and to find inspiration.

Google’s Search app is a great instance of Android’s look and feel.

A good way to distinguish your app is through its icon. App icons for Android can take any shape or form. Users love great-looking icons and will gladly put your app on their home screen even if they don’t use it often. For tips on designing your icon, read the “Iconography” section in the guidelines.

App icons for Android can take any shape and form you want.

Build for Different Hardware Types

When designing your app, ensure that it will run properly on most devices. Keep in mind not only different screen sizes and aspect ratios, but also screens with low brightness or poor contrast and color, as well as slow, weak hardware.

For example, less-expensive devices might have smaller displays with lower contrast, so text that appears big enough on new devices with large screens might appear illegible there. Low contrast of text and visual elements might compromise the user experience as well.

Designs created according to the guidelines will easily scale to fit virtually any screen.

A few more things to keep in mind:

• Use contrasting colors for text and elements. For example, don’t use white on gray for important elements; they’ll just blend together on bad displays.
• Check your design on several devices with different brightness settings (low, high, auto) and in different lighting conditions.
• Even when using standard sizes, make sure your text and UI elements appear big enough on small screens (i.e. screens with a DPI lower than 240). You might want to adjust these elements specifically for small devices.

For a great example of designing for diversity, read Sebastiaan de With describe the process of creating the Alarm app.

Use Density-Independent Pixels to Define Layout

Part of providing a consistent experience is ensuring that UI elements stay roughly the same size across Android devices with varying pixels per inch (PPI). This doesn’t have to be a laborious task of calculating the number of pixels a button or font should contain in order to look great on a particular screen size. You can make the device do the work for you.

The recommended size for buttons in the action bar is 48 DP, which will result in different pixel sizes on different screens, but you don’t have to worry about that.

By defining sizes with density-independent pixels (DPs), you ensure that elements will appear at about the same physical size on any screen. Text will remain readable, and buttons will be comfortable to tap on any Android device, regardless of screen size or DPI. (See the section “Use Density-Independent Pixels” in the guidelines for more.)

In our practice, giving developers guidelines on sizes of elements and fonts has proven useful.

6. Create Assets for All Densities

Four sets of assets are required to accommodate all Android devices and to make the interface crisp: low density (LDPI), medium density (MDPI), high density (HDPI) and extra-high density (XHDPI). Start with a 640 × 960 screen for XHDPI assets, and then scale them down for other densities.

Start with XHDPI, and then scale down to other densities. Compare the actual sizes of these assets.

MDPI and XHDPI resolutions are exactly the same as the iPhone’s regular and Retina screens. So, if you have an iPhone design, you can use it to style the Android counterparts, or you could even test your designs on iPhone or iPod screens. But don’t forget about Android’s unique look and feel.

An XXHDPI bucket has been added to support the next generation of mobile devices, those with approximately 480 DPI screens. Although no such devices exist yet, the XXHDPI bucket is used today for launcher icons on XHDPI 10-inch tablets, such as the Nexus 10. (Because these devices are so large, the launcher icons are scaled up using the XHDPI assets.) To accommodate the next generation of screens, all you’ll need to do is scale your HDPI assets up by 200%.

Consider Different Versions Of The OS

Many Android devices will never be updated to the latest OS; it takes a couple of years for new versions to dominate the market. But users with newer devices won’t be pleased with apps whose looks or controls are outdated (as demonstrated by Microsoft’s Outlook app, mentioned earlier). So, deliver the most up to date experience possible. If you intend for the app to run on older platforms, create a separate version of the app for those devices.

Expand Your App With Widgets and Live Wallpapers

Take advantage of Android’s engaging features, such as widgets, live wallpapers and notifications. Widgets enable users to receive updates without running the app, and notifications are improving with each version of Android. Google is providing great support for designers and developers on how to notify users.

Widgets are a convenient way to peek into an app without opening it. This enables you to focus a user’s attention on a small portion of information, which would then expand within the app.

Widgets may have buttons and scrollable areas. Think of them as advanced app icons.

Gmail’s widget offers a sneak peek into the mailbox and enables users to compose mail right from the home screen. Chrome’s grid-view widget displays favorites or history.

Android users love to customize their devices and make them personal, and these items give them greater flexibility to do so.

Properly Test on Devices You Support

One of the most common reasons for negative reviews in the Play store is an app not functioning as promised. Target your design to the most popular devices, and release only for the ones you have tested; otherwise, you’ll end up with bad reviews from people frustrated by your app not working properly.

The highly successful Dead Space game receives most of its one-star reviews because the game doesn’t run on certain devices.

Design for Tablets, Too

Although several great Android tablets are on the market, they are not as popular as competitors such as the iPad. But if your goal is to build a truly universal Android app, then you need to consider tablets as well. The guidelines advise designers to use multi-pane layouts for tablet UIs and to build their interface using fragments.

Tablets use the same graphical assets as phones, but consider the context in which tablets are used. For instance, people usually hold tablets further away from their eyes than phones and, thus, are less precise in their tapping. So, the UI will require larger fonts, bigger buttons and more white space around elements.

Don’t forget to run your app through the “Tablet App Quality Checklist” as well.

Give Android A Chance

Designing for Android might be challenging in the beginning — it’s not as simple as it looks — but by following these 10 steps, you’ll have a head start on delivering a fantastic user experience and building a truly great app.

Give Android a chance. Designing for this newly matured platform is an interesting and educational process, and you’ll deliver a great-looking app while obtaining a new set of skills. You might find the experience to be very rewarding.

Update: While we were writing this article, case study has been published by The Verge about the Facebook Home application — next big thing for Facebook. But this isn’t about Facebook anymore. Thought this particular application is quite controversial, with limited device support and experience far from perfect, Fb designers have proven that with enough effort 100% of your ideas can be implemented and delivered on Android with no compromise. They have revealed a great opportunity and may even have marked the beginning of a new trend of creating greater presence on Android.

Examples of Great Android Apps for Inspiration

• The Verge
• doubleTwist Alarm
• Skype
• Evernote
• Foursquare
• Tumblr
• New York Times
• Path
• Endomondo
• Expedia

(al) (ea)

© A. Komarov, N. Yermolayev for Smashing Magazine, 2013.

One of the most important tasks on your plate as a web designer is usability. Usability is defined as a gauge of the quality of the user’s experience when interacting with your website. Any website you design should always be seamless from the standpoint of the user. They should find your site easy to navigate without having to first undergo special training. Usability is normally based on several different factors.

A person looking through your site wants their ease of learning to be top-notch. They’ll want to quickly learn the user interface so that they can jump right in and accomplish fundamental, navigational tasks. Efficiency of use is another factor: after they’ve learned to navigate your site, they’ll want to accomplish tasks speedily. Even if the user has used the site before, they’ll need to easily remember enough of the process to be able to use the site effectively the next time. This is called memorability. When they’re using your site, they may experience some errors, but are these errors frequent or severe? Finally, after they’re done with your site, is the user’s subjective satisfaction high or low? They should have liked using your site.

Of course, you can’t please all site visitors all the time, but some standards are common to ensure good usability. What mediocre web designers take for granted, you should not. Here is a rundown of the top three usability errors that web designers should avoid at all costs.

Clickable areas that are just too small

Your website will be chock full of hyperlinks, which are clearly meant to be clicked. So make sure that they are big enough to be clicked easily. It’s that simple. Otherwise, your hyperlinks won’t be well-received. Any user’s hand movements on the mouse aren’t going to be precise to begin with, so don’t make clickable areas so small that the user has to use a combination of finesse and strategy just to have a shot at clicking your tiny hyperlinks.

On the other hand, a bigger, more easily clickable area makes it so much more convenient to hover the cursor over any links. To make the clickable area bigger, simply make the entire link larger or improve the padding surrounding the link. You can do this by utilizing the CSS padding property.

Take a look at this fine example of a horribly small clickable area. It’s from the “Hacker News” page of a site called Y Combinator, which provides seed funding for startups. Notice how the comments and user links are so aggravatingly tiny. You’ll be lucky to finally succeed at clicking them after practicing several times.

Abuse of pagination

Pagination is great when it’s used for the correct purpose in web design. When used properly, pagination is a welcome feature because it makes a site’s layout more convenient and easier to absorb. It’s mainly used to divide content into various pages, and it’s a feature that’s usually seen on sites that present long lists of items.

However, pagination can also be misused, which makes it a contributing factor to usability inconvenience. Some sites are fond of abusing pagination for the purpose of dividing basic content pages into several pages, and there’s an ulterior motive behind this, too. The sites that do this are most likely attempting to increase their page views, plain and simple. Many online magazines and blogs obtain their revenue by way of advertising, so receiving more page views increases their viewing stats and lets them charge more for ads.

Take a look at this abuse of pagination, which comes to us from Wired Magazine. Note how the article on Google’s colorful logo is divided into eight pages when all eight pages could’ve easily been combined into one webpage. Even then, that longer article wouldn’t have caused the page to become slower in loading and processing. Also note how aggravating it is to click several times just to finish reading the article.

In addition, this abuse of pagination can detrimental with regards to SEO; if you divide content on your site up into several pages you dilute your content. This has the effect of reducing the number of relevant keywords about the topic on each webpage, which means every page makes less sense by itself. As a result, the search engines may fail to properly interpret what each page is about, thereby negatively impacting the article’s search engine result rankings.

Content that’s hard to scan

Content that’s hard for site users to scan is usually content that suffers from bad copy. Copy is the text content with which you’ve populated your site, and is absolutely essential to making your site’s usability excellent. Even before you worry about good copy, though, you’ve got to have a thorough understanding of site users’ viewing behaviors. Site users tend not to read all the information on a webpage from top to bottom, as you might expect them to.

In reality, site users absorb information by simply jumping from one piece of content to the next, essentially guided by what pops out at them on the webpage. You can thank the fact that the internet bombards people with information for this frenetic web-viewing behavior. Users’ eyes basically dart from one interesting section of any given webpage to another, which means you, as the consummate web designer you are, must structure your pages in a way to accommodate this frantic behavior.

First, ensure that your site has just a few, clear points of focus. These will function as the sections of your page that will catch visitors’ attention. You can succeed by including bigger fonts as well as high-contrast colors. For added visual attraction, also include images like icons right beside the text.

Second, every point of focus should ideally feature a descriptive heading. Without proceeding to read the copy further, a user ought to immediately comprehend what this section of content will cover. Never make your headings cryptic or unclear in order to draw readers in. Make the headings short though precise.

Finally, any additional text has to be succinct and easy to absorb. Offer just the fundamentals and exclude anything else. Much of the time, additional text that copywriters include to clarify a point actually subtracts from the readability of said text. There’s a tendency for many people to just read small snippets of text while avoiding longer paragraphs, so trim the fat.

Let’s take a quick look at a webpage that organizes its copy well. This is Cultured Code’s Things app for the Mac. You’ll notice that, at first glance, the points of focus, which are the screenshot and the giant-sized “Things” heading, are very obvious. The copy of the app’s various features, which you can see more of by scrolling down the page, is also very short and to the point, taking up just a short paragraph or two to give a brief description of every respective feature.

There’s so much to remember 

Good usability involves so many distinct factors that they can all sometimes be a little hard to keep track of. Usability is all about the end-user and how they feel as they’re navigating and scanning through your site. Put yourself in their shoes as you are designing your site. Can they get around your site with ease? Are they going to easily remember what to do and where to go the next time they visit your site? Will they ultimately enjoy their experience browsing your site? All these questions should be front and center in your mind as you design your site.

Good usability also has practical benefits. The more a user can navigate your site efficiently, the more they’ll be back. They’ll also tell their friends, their mom, their co-workers…you get the picture. They will come and check out your site. As a result, you’ll get more page views, more readers and, hopefully, a loyal following. This means you can monetize your site and charge more for ads on the site. Take care of usability, and you’ll reap the rewards in so many ways.

What usability mistakes would you add? What’s the worst usability error designers commonly make? Let us know your thoughts in the comments.

Featured image/thumbnail, mistake image via Shutterstock.

Business Card Bundle: 33 Stylish Templates – only $27!