Consumer Profiling Via Twitter

Yesterday, social media and marketing researcher and scientist Dan Zarrella debuted a new way to see into the minds of Twitter users with TweetPsych. Using two linguistic analysis methods, TweetPsych analyzes the content of a user's last 1,000 tweets and builds a psychological profile based on the content. Read more


How to Implement Accessibility in Agency Projects: Part 2

In part 1 of my series, How to Implement Accessibility in Agency Projects, I discussed some of the high-level challenges faced when implementing accessibility in client service companies and how we’re approaching them at Viget.

Talking about accessibility is relatively easy, but when project constraints like timelines and budgets are involved, putting it into practice can be challenging. We've been working on this at Viget and in part 2 of this series, I’ll share some concepts and tips that we're using to make accessibility part of every project.

Thinking About Accessibility

Making accessibility part of your team’s work can be challenging and requires a deliberate effort. At Viget, we've found that building empathy, company-wide education, and re-framing how we think to be valuable strategies.

Cultivate Empathy

If you’re reading this, you likely work at a computer… a lot. You also may have customized your setup to enhance the way you like to work. In short: you’re a “power user”. That’s great for productivity but bad for empathy. The more ingrained we are in our setup the harder it is to understand how other people use and experience their computer and the web. We can easily forget that we are not like our users. It's challenging enough to keep in mind that most people are less savvy, use less-than-cutting-edge hardware, or don’t have a high-speed internet connection. If you don’t have direct experience with disabilities (either yourself or someone in your life), it takes deliberate effort gain empathy for people who interact with the web in ways that are different from you.

You may be able-bodied now, but things happen as we journey through life that can cause us to become temporarily or permanently disabled. Has anything ever prevented you from using your computer in your normal way? Perhaps a broken thumb affected your ability to use the mouse, LASIK surgery made it difficult to focus on your screen for a week or two, or maybe your trackpad just gave out (all of these happened to me). Having even temporary dependence on accessible technologies, like I did with keyboard access and font zooming, can give us a new perspective and appreciation for the importance of building accessible products.

“By designing for someone with a permanent disability, someone with a situational disability can also benefit.” pic.twitter.com/H38S2Dw0LL— David Storey (@dstorey) October 1, 2015

Try these tips for gaining better insight into how people with various disabilities use the Web:

Take the #NoMouse challenge and spend some time navigating by keyboard.
Learn the basics of how to use a screen reader and try listening to how pages are read.
Install Chrome extensions like NoCoffee or Funkify to experience browsing with various disabilities.
Check out many of the other simulations from WebAIM.
Hold an empathy-building workshop for your team or company where you challenge the group to perform a specific task, like selecting a round-trip flight, using only the keyboard or with one of the Funkify personas enabled.

Educate Across the Company

Lone accessibility advocates, however passionate, aren't going to make much of a lasting impact on accessibility awareness company-wide — they can’t be everywhere all the time, and if they leave the company their influence goes with them. At Viget, we found that the most successful strategy for creating a lasting company value was to harness those with a passion for accessibility to speak, write, and lead training sessions. By framing accessibility knowledge as a higher level of expertise and empowering everyone to own their role’s portion of accessibility, we quickly saw a higher level of buy-in and enthusiasm.

To that end, we built the Interactive WCAG: a tool for filtering and sharing the daunting Web Content Accessibility Guideline (WCAG) spec in a digestible format. The spec can be filtered to only view a certain level (A, AA or AAA) and a role's responsibility (copywriting, visual design, user experience design, development, or front-end development). It also creates a shareable URL so that it can be easily sent to a colleague or client.

Try these ideas for getting a discussion going in your office:

Lead by example — begin with your own work and show what good accessibility looks like.
Do a lunch-and-learn presentation or offer to speak at a team or company all-hands meeting.
Depending on how your company is structured, approach other discipline or project teams and ask if an accessibility presentation can get on an upcoming meeting agenda. Make sure the presentation is tailored to the concerns of that group.
Write about accessibility on your company's blog.
Hold an empathy-building session or build an empathy lab where coworkers can get a better understanding of some people's barriers to using the web.
Attend a local accessibility Meetup and offer to host a meeting at your office.
Invite an outside accessibility expert to speak at a company or team meeting (in person or remote).

Think of Accessibility as a Core Part of Usability

The introduction of the iPhone and the explosion of internet-connected portable devices that followed was a sea-change moment for web developers. At the time, we were too busy re-learning how to build for the web to realize how beneficial these devices would be for people with disabilities. Our need to start accounting for new patterns of input and output beyond the desktop computer and mouse wound up being a boon to accessibility on the web. We're now accustomed to thinking about patterns that coincide with a variety of disabilities:

Better readability and responsive designs for small screens also benefit those with low vision who might prefer to zoom their browser to see content better.
Making targets, like buttons, large enough for a finger on a touchscreen also makes it easier for users with fine motor control disabilities that can still use a mouse to target and click.
Considering content in smaller chunks and writing tight for small screens is great for helping those with cognitive or memory disabilities, like ADD/ADHD, focus on the page's task.
The popularity of touch devices largely killed hovers as a primary way of revealing and interacting with content. This was good for keyboard users because it meant that we stopped relying on the mouse hover and started designing and coding for the click as the primary way to interact with things.

Tips for Making Accessibility Part of Your Day-To-Day Work

Here are some curated tips from the Viget team on how we're implementing accessibility in our daily work:

Design

“Check your palette at every step of the way so that you don't have to adjust for contrast later on. Keep the contrast checker open in a tab for easy access.”

- Mindy Wagner, Art Director

Content

“Keyboard testing is a quick and important way to QA a site. When going through pages using your keyboard, remember to use shift+tab to make sure keyboard users can move both down and up a page in a logical way. You can find some sneaky things that way, especially when elements appear/disappear when scrolling.”

“Always dig into contrast errors when using WAVE or a similar tool. Don’t consider it an error just because it is flagged as one - look at the details and see what level and font size it's failing.”

- Becky Tornes, Senior Project Manager

User Experience

Question :hover with extreme prejudice.
Edit labels and microcopy for simplicity and directness.
Disable CSS to see if a UI "reads" logically when color, shape, alignment, emphasis, and other visual design elements are absent.
Balance working memory with the amount of content on a page.
Be consistent and predictable, particularly with navigation.
Poke yoke your data inputs. Error prevention > error resolution.

- Todd Moy, Former Senior User Experience Designer

Front-End Development

“Purposely become a keyboard-only user as often as possible. You can start small. Try giving yourself a user goal, like "As a user, I need to be able to search for careers" and try to complete it using only the keyboard. If you're developing on a Mac, you may need to adjust browser and OS settings before getting started.”

- Chris Manning, Senior Front-End Developer

Don't Reserve Accessibility for Just Production Code

When prototyping or test-coding a new feature, always build it to be accessible. Even if it's for a small internal audience or just yourself, considering accessibility at a nascent stage will get it baked in from the beginning and, most importantly, means you won't have to re-think a feature's structure or interaction model later. And who are we kidding... when the going gets tough these prototypes sometimes make their way into production.

Learn HTML and Use It Semantically

Using the correct markup for the task is the easiest way to get accessibility for free. This can be pretty straightforward if you're coding by hand but more challenging if you're using a framework or helper that outputs markup for you. The benefits, though, are significant:

Sectioning elements allow screen reader users to jump around the page quickly.
Good use of headings, similarly, lets screen reader users understand a page's content structure and jump to just want they want.
Using frequently built-from-scratch elements like <button>, <a> and <select> correctly instead of meaningless <div>'s provides all of the expected interactivity (keyboard focusable, clickable and correctly read by a screen reader) without the extra work of having to add it in with JavaScript.

Not using the correct element, or trying to reproduce a native control from scratch, can lead to bigger headaches down the road and a true adding-accessibility-takes-more-time result.

Support Flexibility

Building for accessibility isn't about just one disability. There's a broad range of disabilities to keep in mind and it can feel overwhelming at times. Building flexibility into your interfaces and interactions helps ensure broader access. What does that mean? To an extent, with responsive design, we're already doing it. Accounting for multiple kinds of input (mouse and touch) and output (small to large screens) makes our sites better able to accommodate a variety of situations.

Sometimes we unknowingly disable flexibility. For example, one common practice is locking a mobile browser's zoom level to ensure that the site fits the screen or to prevent some gestures from interfering with interactions. This has the unintended consequence of preventing users with vision disabilities from zooming the page to make text or images easier to see.

Ask, “does my site’s responsive mobile version disable pinch & zoom?” If it does, you’ve created an anti-user design. @cameronmoll #aeaaus— Jeffrey Zeldman (@zeldman) October 5, 2015

Prioritize Accessible Content Over Accessible Experience

We're frequently tasked with creating richly interactive sites. That's the fun part of what we do, right? In a perfect situation with plenty of time, we'd be able to make that experience accessible to everyone. I don't know about you, but I'm still waiting for that unicorn project to come along (hint: it won't). When the task of making a complex piece of functionality or experience accessible is daunting, prioritize making sure that the content is accessible. With enough time, we could make anything accessible. But when faced with deadlines and budgets, making something accessible over nothing is the better tradeoff.

An example of this concept in practice was a map page we created for a client. This page was designed with a map of clickable pushpins that brought up a little info overlay. Rather than trying to figure out how to make the SVG map accessible to keyboards and screen readers, the design already included an identical text list that we were able to rely on. The solution was to make the map inaccessible to keyboards and screen readers. The map script that we used created the pushpins as <span>'s (see using semantic HTML above) rather than <button>'s so it was already inaccessible out-of-the-box. To make it invisible to screen readers we added aria-hidden="true" to its outermost wrapper.

The result is perfectly accessible content without the added time and expense of trying to make the map accessible. This was a win for accessibility and a win for the budget! Now, of course it's possible to make the map accessible with some extra effort, but instead, those hours could be spent on other features and contributed to delivering the site on time and on budget.

Conclusion

Creating more accessible products and experiences is an essential and rewarding endeavor but carries unique challenges for those of us working in client service companies. Rather than give up or wait for clients to ask, we’ve found that the practices I outlined in this article lead to a lasting culture at Viget that values thinking about accessibility throughout a project and throughout the company. Here are just a few examples from our experience working on some fun, beautiful and disability-specific projects. Do you have any tips to share? Comments? Criticism? We'd love to hear about it below!


Source: VigetInspire


On the Growing Popularity of Atomic CSS

Even if you consider yourself a CSS expert, chances are that at some point on a large project you've had to deal with a convoluted, labyrinthine stylesheet that never stops growing. Some stylesheets can feel like a messy entangled web of inheritance.

Spaghetti Monster
The cascade is incredibly powerful. Small changes can have large effects, making it harder to know what the immediate consequences will be. Refactoring, changing, and removing CSS is seen as risky and approached with trepidation as it's difficult to know all the places it's being used.

One thing that is often hard to articulate with new tooling is when, exactly do you start to reach for this? The answer is rarely (if ever) immediately and in all situations.
One of those situations, in my limited experience, is on large teams with large codebases. The feeling is that the CSS can get far too large and team members essentially become afraid of it, and the CSS becomes jokingly-but-accurately “append-only”.
Along comes a tool that delivers on a promise of shipping far less CSS and in a way that (after a learning curve) nobody is ever afraid of again… I can see the appeal.
- Chris Coyier

Atomic CSS keeps things simple

I no longer had to think about how to organise my CSS. I didn't have to think about what to name my 'components', where to draw the line between one component and another, what should live where, and crucially, how to refactor things when new requirements came in.
- Callum Jefferies, Takeaways from trying out Tachyons CSS after ages using BEM

Atomic CSS offers a straightforward, obvious, and simple methodology. Classes are immutable - they don't change. This makes the application of CSS predictable and reliable as classes will always do exactly the same thing. The scope of adding or removing a utility class in an HTML file is unambiguous, giving you the confidence that you aren't breaking anything else. This can reduce cognitive load and mental-overhead.
Naming components is notoriously difficult. Deciding on a class name that is both meaningful but also vague enough to be reusable is time-consuming and mentally taxing.

There are only two hard things in Computer Science: cache invalidation and naming things.
– Phil Karlton

Coming up with the appropriate abstractions is hard. Naming utility classes, by contrast, is completely straightforward.
/* naming utility classes */
.relative {
position: relative;
}
.mt10 {
margin-top: 10px;
}
.pb10 {
padding-bottom: 10px;
}
Atomic classes speak for themselves. Their intent and effect are immediately obvious. While littering HTML with countless classes may look cluttered, HTML is much easier to reason about than an impenetrably gargantuan and incomprehensible wall of tangled styles.
In a mixed-ability team, perhaps involving backend developers with limited interest and knowledge of CSS, there's less chance of people messing up the stylesheet.
Taken from ryanair.com - a whole load of CSS all doing one thing.
Dealing with stylistic variation
Utility classes are perfect for dealing with small stylistic variations. While design systems and pattern libraries may be all the rage these days, what this approach recognizes is that there will continuously be new requirements and variations. All the talk about component reusability often isn't reflected in the design mocks that get passed your way. While visual and brand consistency is good, the wide variety of contexts on a large website make some variation inevitable and justified.
The Medium integrationteam moved away from BEM modifiers, as documented on their blog.
What if we want a component to differ from another in only one single small way. If you've adopted a BEM naming convention, the modifier classes may well get out of hand - countless modifiers that often do only a single thing. Lets take margins as an example. The margins of a component are unlikely to remain universally consistent for a component. The desired spacing depends not only on the component but also its position on a page and its relation to its surrounding elements. Much of the time designs will contain similar but non-identical UI elements, which are arduous to deal with using traditional CSS.
A lot of people dislike it
Aaron Gustafson, chief editor of A List Apart, former manager of the Web Standards Project, Microsoft employee.
Mozilla Engineer Soledad Penades
From the creator of CSS Zen Garden
How is Atomic CSS different from inline styles?
This is the question always asked of atomic CSS by its critics. Inline styles have long been deemed a bad practice, rarely used since the early days of the web. Critics aren't completely wrong to equate atomic CSS to inline styles because they both suffer from the same major pain point. Here's an example: What if we want to change everything with a .black class to be navy instead? We could do this:
.black {
color: navy;
}
That's obviously a terrible idea.
Text editors are sophisticated things these days. It feels somewhat hazardous, but it would be simple enough to use find and replace to change all instances of the .black class with a new .navy class. The real problem is when you want to change only certain instances of .black to be .navy.
In traditional approaches to CSS, adjusting the styling of a component is as easy as updating a single value in a single class in a CSS file. With atomic CSS this becomes the tedious task of searching through every piece of HTML to update every instance of said component. However advanced code editors become, there's no getting around this. Even if you're separating your markup into reusable templates, this is still a major drawback. Perhaps this manual labour is worth it for the simplicity of this approach. Updating HTML files with different classes may be tedious but its not difficult. (Although there have been times when I have temporarily introduced stylistic inconsistency by missing certain instances of the relevant component when manually updating.) If a design changes, chances are you'll need to hand-edit classes from all over your HTML.
While atomic CSS shares inline styles big drawback, they aren't a retrograde step into the past. Utility classes are better than inline styles in all kinds of ways.
Atomic CSS vs. Inline Styles
Atomic classes allow abstraction, inline styles don't
With atomic classes, it is possible to create abstractions that would be impossible with inline styles.
<p style="font-family: helvetica; color: rgb(20, 20, 20)">
Inline styles suck.
</p>
<p class="helvetica rgb202020">
Badly written CSS isn't very different.
</p>
<p class="sans-serif color-dark">
Utility classes allow for abstraction.
</p>
The first two examples shown above would require a manual find-and-replace in order to update styling were the design to change. The styles in the third example can be adjusted in a single place within a stylesheet.
Tooling
Sass, Less, PostCSS, Autoprefixer… The CSS community has created a lot of useful tools that weren't available for inline styles.
Brevity
Rather than writing out verbose inline styles, atomic classes can be terse abbreviations of declarations. It's less typing: mt0 vs margin-top: 0, flex vs display: flex, etc.
Specificity
This is a contentious point. If a class or inline style only does one single thing, chances are you want it to do that thing. Some people have even advocated using !important on all utility classes to ensure they override everything else. Similarly, proponents of inline styles see its inability to be overridden (by anything other than !important) as a selling point - it means you can be sure the style will be applied. However, a class alone is specific enough to override any base style. The lower specificity of atomic classes compared to inline styles is a good thing. It allows more versatility. Were all used to changing classes on JavaScript to change styles. Inline styles make this harder.
Classes in stylesheets can do things inline styles can't
Inline styles do not support media queries, pseudo selectors, @supports, or CSS animations. Perhaps you have a single hover effect you want to apply to disparate elements rather than to only one component.
.circle {
border-radius: 50%;
}

.hover-radius0:hover {
border-radius: 0;
}
Simple reusable media query rules can also be turned into a utility class. Its common to use a classname prefix for small, medium and large screen sizes. Here is an example of a flexbox class that will only apply on medium and large screen sizes:
@media (min-width: 600px) {
.md-flex {
display: flex;
}
}
This wouldn't be possible with an inline style.
Perhaps you want a reusable pseudo-content icon or label?
.with-icon::after {
content: 'some icon goes here!';
}
Limiting choice can be a good thing
Inline styles can be anything. This freedom could easily lead to design anarchy and inconsistency. By predefining classes for everything, atomic CSS can ensure a certain amount of stylistic consistency. Rather than ad libbing colours and values from an infinite amount of options, utility classes offer a curated set of predefined options. Developers choose from this limited set of single-purpose utility classes. This constraint can both eliminate the problem of an ever-growing stylesheet and maintain visual consistency.
Take the box-shadow as an example. An inline style will have an almost limitless amount of options for offset, spread, color, opacity and blur radius.
<div style="box-shadow: 2px 2px 2px rgba(10, 10, 250, .4)">stuff</div>
With an atomic approach, CSS authors can define the preferred style, which is then simply applied, without the possibility of stylistic inconsistency.
<div class="box-shadow">stuff</div>
Atomic CSS is not all or nothing
There's no doubt that utility class frameworks like Tachyons have grown in popularity. However, CSS approaches are not mutually exclusive. There are plenty of cases where utility classes aren't the best option:

If you need to change a lot of styles for a particular component inside of a media query.
If you want to change multiple styles with JavaScript, it's easier to abstract that into a single class.

Utility classes can coexist with other approaches. Its probably a good idea to define base styles and sane defaults globally. If you keep duplicating the same long string of utility classes, chances are the styles should be abstracted into a single class. You can mix in component classes, but do so only when you know they will be reused.

Taking a component-first approach to CSS means you create components for things even if they will never get reused. This premature abstraction is the source of a lot of bloat and complexity in stylesheets.
- Adam Wathan

The smaller the unit, the more reusable it is.
- Thierry Koblentz

Looking at the newest release of Bootstrap, a whole host of utility classes is now offered, while still including its traditional components. Increasingly, popular frameworks are taking this mixed approach.

On the Growing Popularity of Atomic CSS is a post from CSS-Tricks
Source: CssTricks


HTML Email and Accessibility

You love HTML emails, don't you?
As a developer, probably not... but subscribers absolutely do. They devour them, consume them on every device known to man, and drive a hell of a lot of revenue for companies that take their email marketing seriously.
But most web developers tasked with building HTML emails merely want to get them out the door as quickly as possible and move on to more interesting assignments. Despite email's perennial value for subscribers, tight timelines, and a general loathing of the work result in things falling by the wayside; and, just like in the web world, one of the first things to be set aside in email is accessibility.

I think we all agree that accessibility is a vital topic. Unfortunately, it's one that's ignored in the email marketing world even more than on the web.
Accessibility in email doesn't have to consume a lot of time, though. There are a few simple practices you can build into your own campaigns that will make your emails more accessible and your subscribers even happier.
Accessible Tables?
One of the main reasons that web developers hate building emails is that we're still stuck using tables for layout in email. Although there are a few different ways to get around using HTML tables, most emails still rely on them to ensure that emails look good in Microsoft Outlook, which doesn't support more traditional CSS positioning, let alone newer CSS layout techniques like Grid (although that's possible in email, too).
But HTML tables present a hurdle for users relying on screen readers for consuming their emails. This is made clear when you hear the output of a screen reader working through the typical HTML email campaign. Mark Robbins of Rebel posted an excellent example of this behavior a while back.
The screen reader is doing it's job: it sees a table, assumes that it contains tabular data, and reads it appropriately.
However, since we're using tables purely for structural purposes, we need screen readers to ignore those tables. This is where ARIA roles can help us out. By applying the role="presentation" attribute to a table, we can instruct the screen reader to skip over those elements and move straight into the content.
See the Pen Accessible Emails - Tables ARIA Presentation by Jason Rodriguez (@rodriguezcommaj) on CodePen.
With that one simple addition, our emails are much more accessible. It should be noted that nested tables don't inherit this behavior, so you will have to apply role="presentation" individually to every table in your campaign. Creating a snippet or building this into your email boilerplate is a good way to ensure accessibility without having to even think about it.
Out of the Image and Into the Code
A common practice in email marketing is to use images for everything in the email: graphics, illustrations, copy, links, and buttons. Although this can be efficient (slice, dice, and send it on its way), it's another huge problem for subscribers relying on screen readers. The typical image-based email has a lot of information that can't be parsed by a machine. What's more is that a lot of email clients disable images by default, too. Ever see something like this?
An example of image-blocking behavior in Microsoft Outlook.
We want to avoid or improve situations where content can't be seen by users or content can't be read by a screen reader. There are two ways to do this.
The first is to rely less on images and more on HTML to convey your message. Pull copy out of your images and put it into your email as real, live text.
HTML text vs. image-blocking. Lyft does this really well.
HTML text isn't susceptible to image blocking in email clients, so it will always be shown. Further, most copy that's typically found within an email can be converted to HTML text. You can style that text however you want, even using web fonts, and your content can be seen by users and understood by screen readers.
This is especially important when it comes to links and buttons in emails. A lot of designers will rely on images for buttons since they can style those buttons however they want. However, those image-based buttons are victims of the same image-blocking behavior as any other image. Using HTML, CSS, and, in some cases, Microsoft's proprietary VML language, you can create code-based buttons that display everywhere and still fit in with your design.
See the Pen Accessible Emails - Bulletproof Buttons by Jason Rodriguez (@rodriguezcommaj) on CodePen.
The second is to rely on alternative text for images. By adding the alt attribute, we can describe the content of images for screen readers so that users get some context and a better understanding of the email.
The same rules apply in email as on the web:

All images should have an alt attribute
Alternative text should present the content and function of an image
Alternative text should never be redundant
Alternative text relies heavily on the context provided by the content surrounding an image
Decorative images should use an empty alt attribute

A simple example of alternative text in an email would be for something like a retail sale.
See the Pen Accessible Emails - Styled ALT Text by Jason Rodriguez (@rodriguezcommaj) on CodePen.
On top of making our emails more accessible, we can actually style that alternative text so that it better fits in with the rest of our email design when images are disabled. Using things like color, font-family, font-size, font-weight, and line-height allows you to style alternative text in largely the same way you would any other text in the email. Combined with something like background-color on the image, these styles make it possible to have highly-optimized—and accessible—emails for when images are disabled.
Styled alternative text keeps emails accessible and on-brand.
It's All Semantics
Despite what some email marketers and developers will tell you, semantics in email do matter. Not only do they provide accessible hooks for navigating an email, they can provide fallback styles that help maintain the hierarchy of emails in the unfortunate event CSS isn't loaded or supported.
It used to be that all text styling was done on table cells within a campaign, with any copy being a direct descendant of that table cell.
See the Pen Accessible Emails - Old Text Approach by Jason Rodriguez (@rodriguezcommaj) on CodePen.
Email developers would avoid using semantic elements like headings and paragraphs because email clients (correctly) displayed their own default styling of those elements, which sometimes resulted in broken layouts or unintended designs. I don't know if it was sheer laziness or something else, but very few developers would use semantic elements with simple overrides to keep their designs accessible and consistent across clients.
Adding the margin property on block-level semantic elements—and relying on style inheritance from the table cell—can create more accessible emails that display properly nearly everywhere.
See the Pen Accessible Emails - Semantic Text Approach by Jason Rodriguez (@rodriguezcommaj) on CodePen.
You don't have to stop at simple headings or paragraphs, either. You can use sectioning elements like main, header, footer, article and more to provide extra semantic value to your emails. I would caution you to use them on top of your existing table-based structure, though. Not all email clients support styles being applied to those elements, so something like this is a good approach:
See the Pen Accessible Emails - Semantic Article by Jason Rodriguez (@rodriguezcommaj) on CodePen.
Designing for Subscribers
The last technique I want to discuss—although not the last technique available to us—is adhering to tried-and-true design principles within our campaigns to keep them accessible.
Accessibility isn't all about screen readers. Subscribers can have visual impairments as well as physical or cognitive disabilities that make consuming emails difficult, especially when an email's design hasn't been updated in years. By relying on design principles like hierarchy, space, pattern, proximity, type size, and contrast, we can ensure that a broad spectrum of subscribers can understand and enjoy our email campaigns.
This is especially apparent when it comes to viewing emails on mobile devices. If you're not taking the mobile view into account from the outset, or using responsive email design, then your desktop-first email campaigns can be a pain to use when scaled down on most mobile email clients.
Trello uses large visuals, type, and buttons to keep things readable and usable across all device sizes.
Simply revisiting your designs with mobile and disabled users in mind can go a long way to keeping your emails accessible. Using larger type that's legible for a wide variety of users, combined with proper heading styles and a hierarchy that is easy to scan is a great baseline. Adding in repeatable patterns within your emails that further aid scanning and understanding, along with plenty of white space and properly contrasting colors take your emails even further.
I encourage you to use tools like Chrome Lighthouse and Accessible-Colors.com to check the accessibility of your HTML email designs. It's all HTML and CSS, so the same tools that work on the web work on email as well. Use them!
Have Your Own Tips?
Although a lot of email integrationis stuck in the past, that doesn't mean we can't modernize our campaigns right along with our websites. Many of these tips can be baked right into your email boilerplate or code snippets, allowing you to create more accessible HTML emails without too much thought.
At the same time, don't let that stop you from putting that extra thought into your emails. This article merely scrapes the surface of what's possible in HTML email development. I'd love to hear about your tips for building accessible emails in the comments below.

HTML Email and Accessibility is a post from CSS-Tricks
Source: CssTricks


The Next Yahoo!

I haven’t read any commentaries on the new and recent Twitter change regarding the increase of characters per tweet (140 chars to now 280 chars) but I already have an opinion.
And… that doesn’t mean that my opinion is very good, but, I share a few candid thoughts this morning via my vlog here.

I thought that I’d have more to write and say about this particular topic but I’ve been staring at this draft for quite some time and have written and re-written a bunch of different things in the past 10 minutes, which, is already far too much time to give to such a small topic.
Perhaps that is the point.
Obviously, I’m negatively biased against Twitter already having formally quit from the service and have enjoyed a life without Twitter for quite some time now.
Trust me when I say that life is indubitably better without it, especially after having removed it from my phone. It did take a few weeks to get over the muscle memory of wanting to check it and, if I’m to be honest, I was quite alarmed at how strong that muscle and cognitive reflex really was.
It is a useless drug and does not outperform most apps when it comes to sharing information, retrieving information, “building relationship” (if you can call it that), and many of the other justifications that folks have shared with me about why they still use the thing.
Twitter is shit and this recent move to elongate the characters allowed is a visceral and tangible showcase of how much Twitter had already lost its way.
To be honest, the soul of Twitter was lost years ago… I suppose it’s just taken folks a while to realize that it’s been gone for quite some time. Twitter could have been something fantastic but I’m afraid it is the next Yahoo!.
The post The Next Yahoo! appeared first on John Saddington.
Source: https://john.do/


Building the Best Relationships We Can

Maslow had it wrong. To get it right, we have to move social needs to the bottom of his pyramid.-Matthew Lieberman (Professor of Social Cognitive Neuroscience at UCLA and author of the book Social)Babies would die without their caregivers at birth. Study after study show the pain and ill we go through when we are isolated from others like us. As humans, we are wired to connect to one another.However, instead of connecting, we seem to be heading the opposite direction. On the streets and in restaurants people are looking at their phones instead of the person right next to them.Businesses strive to make everything quicker, faster, and automated. Sending automated welcome emails with generic information to everyone who signs up. Introducing artificial intelligence to weed through support inquiries instead of having someone read and respond to your query.It’s important to us here at Highrise to help people build great relationships. For many of our users, Highrise is an essential piece of that equation.But what about us? How is our relationship with our users?We try to make the welcome you get when signing up for Highrise a bit unique by changing the templates every day, asking people to chat, and a few other tweaks our CEO Nathan covers in detail here.But we want to go even further. What else can we do?Now, when you sign up for Highrise, you hear directly from me.And by “directly from me”, I mean you see me, you hear me, and I address your individual needs based on what you’ve told us about you so far.You get a personalized video.body[data-twttr-rendered="true"] {background-color: transparent;}.twitter-tweet {margin: auto !important;}I can't believe this is real. This is the most incredible onboarding I've ever seen from @highrise https://t.co/WEllIAgkGj — @nateberkopecfunction notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height); resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === "#amp=1" && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: "amp", type: "embed-size", height: height}, "*");}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind('rendered', function (event) {notifyResize();}); twttr.events.bind('resize', function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute("width")); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}I personally greet you and ask you what you specifically need. And how we can help solve the problems you are having with your business.The results so far have been really, really positive. And while making the human connection is the most important thing, we are hearing some really incredible feedback too.First of all, holy crap. I’ve never gotten a video as a welcome message from a SaaS product before. I’m really impressed.What an AWESOME email and video. Highrise is killin’ it! I really loved how personal this was.Thanks Alison. I appreciate the thought and effort!Hey Alison, that custom video for me was just mind blowing. Do you try to reach out to every customer that way? So impressed.We are still a few weeks away from finding out whether or not these videos have an effect on our conversion rate. But one other huge factor is at play too: the memory of someone who cares. — Even if Highrise isn’t a good fit now, you may recommend us to friends, or even come back when the time is right. But most importantly, you might remember the human that took the time to make the connection with you.As experts in helping people build great relationships, we keep learning too!Building the Best Relationships We Can was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.


Source: 37signals


3 Perennial Principles for Every New Project or Startup (and How to Overcome Them)

I was chatting with my brother who’s gone through the full gamut recently of putting together a new project(s) and I shared with him earlier this morning these three powerful and omnipresent principles that always seem to happen, regardless of how experienced one might be in building new projects and/or companies.
Even for myself and my new-ish project, Pinpoint, our team has experienced these things in spades! And, of course, I’ve experienced it countless times when putting together smaller indie projects and apps as well:

It takes much, much longer than you originally anticipate to get things really moving.
The number of iterations (and even more substantive pivots) required is more than you originally planned.
What you end up ultimately executing against or shipping to market is oftentimes dramatically different than the original concept.

Longer time, many more iterations, and a different product. This is like the canonical journey for any startup of note.
I also believe a very similar (or exact) thing happens with people as we grow and mature, both personally and professionally. Part of this has to do with our never-ending quest on person-market fit.
It never goes as planned…
It’s also not surprising that when I originally wrote that post I was hacking together a new project that ultimately failed to reach any meaningful milestone and I scrapped it altogether.
Instead, following those 3 perennial principles, it took much more time than I had planned and it took an entirely different set of partners and an entirely different product to get to something meaningful and worthwhile.
Just as my brother who’s iterated through politics, video games, and now bitcoin and cryptocurrency to land on what he hopes to be a fresh start to a new season of his personal and professional life in an entirely different landscape.
Sure, it’s only been 5 months and some change for my brother but the fatigue and the frustration of having to walk through and experience the 3 principles is tough to swallow and deal with.
To be honest, I think most people quit during these seasons because they can’t seem to see through the trees to see the much larger forest of opportunity.
Or rather, they get so discouraged by the seemingly-miniscule returns that they give up way too early.
Get help. Profit.
This is why I think it’s also important to have these 3 things in your life as well to optimize and maximize your ability to weather the inevitable bouts of anxiety and depression that will attack you psychologically as you “work out” your newest project or startup:

Meaningful relationships that you can speak with honestly and openly about your struggles, anxieties, and concerns. This is supremely difficult for most people.
Staying maximally healthy in all aspects of your life: Physically, emotionally, mentally, spiritually, and relationally (see #1 above).
Never give up the fight to cut out unnecessary distractions, pare down superficial responsibilities, and simply focus.

I could spend a ton of time talking about all 3 of these areas but I think they speak for themselves.
For me, my wife and my brother are my go-to relationships when talking about my fears and my anxieties about building new projects and a new company. I speak honestly and candidly and I hold nothing back. I also have a therapist and psychiatrist that I see regularly as well and a system of coaches and mentors. I highly recommend you do the same.
I religiously engage in physical health, finding time to be in the gym every single day. I eat better than I ever have and watch my diet through a number of systems that my wife and professionals have helped curate. I pray, meditate, and also engage in emotional discovery and spiritual conversations regularly.
Finally, I’ve been on a massive quest to remove a ton of bullshit out of my own personal life, even paring down larger and very satisfying indie projects to utterly focus on my startup. This has been easier than it sounds, but, I still find personal time to do creative individual work via my vlog project, which has been difficult to keep up with but very deeply and personally rewarding.
I also have quit most social media services which has created an untold return of focus and personal bandwidth. Removing Twitter and cleaning up services like LinkedIn to almost nothing have been a godsend – I can’t tell you how amazing these sets of decisions have been on my cognitive and emotional stability.
You can do it… you just can’t do it alone. But you knew that already, right?
The post 3 Perennial Principles for Every New Project or Startup (and How to Overcome Them) appeared first on John Saddington.
Source: https://john.do/


11 Tips On How To Design The Best Infographic

Infographics are loved for being able to present complex facts in an easy to digest manner. With them, a seemly boring subject is turned into a captivating experience. As a result, they’re mainly used for content marketing. A good infographic should be visually engaging and appealing in order to appeal the target audience. We’ll be taking a look at how to design the best infographic and wow your audience.

1. Keep The Audience In Mind
Who is the target audience of that particular infographic? This is the first question you should ask yourself before you even start the design process. Keeping your audience in mind will help you determine the visual and textual format of your infographic. If you’re targeting kids, the vocabulary, graphics and font used will be playful, colourful and childish. This kind of format may not be appealing to a more mature audience. By customising the design to fit your target, you’ll not only please them, but will successfully convey the message you want.
2. Focus On One Concept
An infographic is meant to relay a specific message. This can only be achieved if the message is presented accurately. To do this, you need to focus on that particular concept only. Don’t be tempted to include extra information that is irrelevant to the topic at hand. If possible, ensure that you exhaustively explore one concept only. This way, the audience will easily take in what they see and understand it at first glance. If something doesn’t fit in, leave it out or create a separate infographic about it. The entire infographic should portray a harmonised message with all content complementing one another.
3. Have A Captivating Headline
The headline of your infographic determines whether it will be viewed or not. That’s why you should make it catchy and appealing at first glance. A good headline should clearly describe the infographic. It’s basically a glimpse into the content to give the users an idea of what to expect. The headline should grab the user’s attention making them stick around longer to see the content. Last but not least, it should be short with a maximum of 70 characters which narrows it down to one short sentence or phrase. In addition to these, the headline should be coherent and above all, easy to understand at first glance.
4. Keep The Design Simple
People love infographics since they water down a complex idea into a simple visual representation. If you don’t achieve this, you have failed! It’s easy to make it complex and mind-numbing but you have to resist the temptation to do that. When using graphs, make sure that they are well labelled and can be interpreted at first glance. If the graph you’re using doesn’t achieve this, simply use another type of graph that does. The images used should also be self-explanatory. Text and graphics should be used to complement each other an come up with a simple presentation. When it comes to designing infographics, simplicity wins every time.
5. Show Things Visually
One of the most outstanding features on infographics is the use of images and graphs. They add life to otherwise boring content thus capturing the user’s attention. Instead of simply writing numbers and percentages, you can use line graphs, bar graphs, pie charts and even venn diagrams. There are also different doodles, diagrams and images that can be used to make an infographic lively. The human brain will be captured by this format and be able to interpret the information given faster. Remember to balance out the written and visual information. One shouldn’t overpower the other. This way, the audience is kept continuously engaged.
6. Pay Attention To The Flow
One of the most important tips on how to design the best infographic lies in the flow. A good infographic should have good visual and cognitive flow. It carries the ability to sequentially and seamlessly take you from one phase to another. All ideas are integrated to one another and each component is strategically placed to serve a specific purpose. You need to capture the user’s thought process. Don’t just grab a bunch of graphs and throw them in your infographic. Flow is crucial since it’ll capture the readers attention allowing them to follow and grasp the information being presented.
7. Ensure Text Is Readable
An infographic doesn’t serve any good if the text is too small to read. Overlooking this simple element transforms a visually appealing infographic into a nightmare for the audience. To avoid causing distress to users, ensure that all text can be clearly seen. If you’re using various font sizes, ensure that the smallest text is readable. In addition, ensure that text is high quality and is clear even when it’s zoomed in and out. Readers will be thankful that they won’t have to strain their eyes when reading through the infographic.
8. Make Use Of White Space
You already know that the visual appearance of an infographic is everything. White space helps create a more polished look in an inforgraphic. Without it, the components will look cluttered and most people won’t even bother looking at it twice. To avoid loosing your audience, make use of white space to take your infographic to the next level. It’ll make the flow visible and make all components visually appealing. White space can also be used to bring out patterns and even streamline the layout. Use it to your advantage to make your infographic design the best.
9. Confirm Your Facts And Figures
Infographics mainly focus on presenting data in a statistical manner. In order to be credible, the data presented has to be accurate. A simple mistake can spread the wrong message.  To avoid this, always make sure that:

the statistics you’re stating are true
you’re using reliable sources
the graphical data lines up with the numbers accompanying them

Even after taking these measures, always pay keen attention to details and double-check the data once you’re done. You should also give several other people to go through the infographic to check whether the data is accurate and that it makes sense. It’ll be easier for others to spot mistakes that you didn’t notice.
10. Make It A Manageable Size
The purpose of infographics is to keep information short and simple. Summarise all the information you wish to include in your infographic and determine the space it will need. If it’s too long or wide, play around with different layouts until you find the one that’s the right size. You could even split the infographic into two and have each part relaying a different concept. The best length is 8000 pixels or less. Any longer and it’ll be too tedious to follow. As for the size, limit it to 1.5MB. This way, even users with slow connections will be able to view and download your infographic.
11. Cite Your Data Sources
The most important bit on designing infographics is presenting information that is truthful. The only way that you can assure your audience that the data is credible is by citing your data sources. Find a place to list all the places you got the information from. Don’t cook up data and use it to mislead people. The sources can be included at the end of the infographic or within the body as long as they don’t distract the flow and structure. Always make sure that you use sources that are up-to-date. This increases the credibility of your infographic.
Infographics are still an authoritative way to present information. Since you’ve read all the tips on how to design the best infographic, it’s time to put those tips into practice. You’ll be able to make a really good infographic that will gain the approval of a majority who read it.
The post 11 Tips On How To Design The Best Infographic appeared first on Web Designer Hub.
Source: http://www.webdesignerhub.com


Kotlin: It’s the little things

Kotlin has a bunch of amazing features, and certain ones tend to grab the headlines — things like extension functions, higher order functions, and null safety among them. And rightfully so — those are all incredibly powerful, fundamental features of the language upon which everything else builds on.And while I love those features, there are a handful of small things you don’t hear much about that I really appreciate on a day-to-day basis.These are simple, small niceties — the little things you do hundreds of times a day but nothing you’d consider “advanced”. They’re common sense language features that, when compared to Java, end up saving you a bunch of cognitive overhead, keystrokes, and time.Take this simple, albeit highly contrived, example:// Java1 | View view = getLayoutInflater().inflate(layoutResource, group);2 | view.setVisibility(View.GONE)3 | System.out.println(“View " + view + " has visibility " + view.getVisibility() + ".");// Kotlin1 | val view = layoutInflater.inflate(layoutResource, group)2 | view.visibility = View.GONE3 | println(“View $view has visibility ${view.visibility}.")At first glance the Kotlin version may look similar, as the differences are subtle. But there’s some great stuff to unpack that’ll make your life much better in the long run.Given that example, let’s take a look at five things from Java that you’ll never need to do in Kotlin.(Note: For clarity in the code snippets, Java is always shown first and Kotlin second. Contextual code is truncated and the diffs are bolded.)1. Declare variable typesView viewvs.val viewInstead of explicitly declaring a variable type (in this case a View) Kotlin simply infers it from whatever is assigned to it. You just write val or var, assign it, and get on with your day. One less thing to think about.2. Concatenate Strings into an unreadable mess“View " + view + " has visibility " + view.getVisibility() + "."vs.“View $view has visibility ${view.visibility}."Kotlin provides String interpolation. It’s such a stupid simple feature to have that makes working with Strings much easier and more readable. It’s particularly useful for logging.3. Call getters/settersgetLayoutInflater().inflate();view.setVisibility(View.GONE);view.getVisibility();vs.layoutInflater.inflate()view.visibility = View.GONEview.visibilityKotlin provides accessors for existing Java getters and setters so that they can be used just like properties. The resulting conciseness (fewer parenthesis and get / set prefixes) improves readability considerably.(Occasionally the Kotlin compiler can’t reconcile the getters/setters for a class and this won’t work, but that’s relatively rare.)4. Call painfully long boilerplate methodsSystem.out.println();vs.println()Kotlin provides you with concise convenience methods that wrap many painfully long Java calls. println is the most basic (though admittedly not the most practical) example, but Kotlin’s standard library has a boatload of useful tools that cut down on Java’s inherent verbosity.5. Write semicolons;;vs.Need I say more?🏅Honorable mention: Not shown, but you never have to write the new keyword ever again either!Look, I know these aren’t mind-blowing features. But these little things, in aggregate over many months and tens of thousands of lines of code, can make a big difference in your work. It really is one of those things you have to experience to appreciate.Put all these little things together with Kotlin’s headline features and you’re in for a real treat. 🍩If this article was helpful to you, please do hit the 💚 button below. Thanks!We’re hard at work making the Basecamp 3 Android app better every day (in Kotlin, of course). Please check it out!Kotlin: It’s the little things was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.


Source: 37signals


I don’t have enough

It’s been a rough week. We’ve been migrating our file storage for Highrise and you can imagine how difficult that is for a product running since 2007 with millions of users.And it wasn’t going that well.Fortunately, we had enough backup procedures in place to handle most problems. But still, on Thursday morning at 3AM I was nervously watching the error queue for more fires.How’d I get here?I don’t mean that in a negative sense. This barely raised my blood pressure. I’ve been in this same situation many times before. I and our CTO, Michael Dwan, cooly fixed our problems in the middle of the night.But, I mean, how on earth did I get to this point where I’m helping successfully troubleshoot this crazy large system of technology and code when…All I was trained to do was Chemistry?I remember the panic I had nearing the end of college. I had just spent 4 years and tons of money learning Chemistry, and I finally realized all I wanted to do was build software and web applications. What a waste.How was I going to change my entire career around?I asked a friend the other day, if they were given two, one foot diameter, metal rings, a match, a candle, and a metal cube, could they connect the rings?At first they didn’t see the solution.But once I told them to: break down the resources they had into smaller pieces and re-think the uses of those elements, the answer was clear.The candle wasn’t just a candle.If you break it down one level, it’s wax AND a wick. Use the wick inside the candle as a string, and use that string to tie the metal rings together.This was a challenge Dr. Tony McCaffrey, a PhD in cognitive psychology, gave participants in various studies he’s done. He found, when he taught people to break down the resources they had at their disposal into smaller elements, and then re-question the use of those new smaller pieces, participants’ ability to solve problems grew by over 65%.The real problem McCaffrey was helping these people solve wasn’t tying two rings together; it was getting over their “functional fixedness”.We want something more out of life for ourselves or the world, and we all see the same resources. But most of us feel like we’re stuck with them. We need more. Better. What we have isn’t good enough.The greatest creators amongst us though, see the same world and have the same resources, but somehow, they’re able to turn those resources into brand new things that solve problems and move the world further ahead.My boss needed help with Excel.I was at an internship between my Junior and Senior years at a Uranium processing plant. (yes, that Uranium) My boss was building financial models in Excel and wanted help updating them.At first the project seemed fairly uninteresting. How was this going to help get me out of the chemical plant into building software for a living?But I realized something. My boss’s life would be much easier if I could get Excel presenting him with forms and walking him through the things he needed to update. Excel had “macros” which were bits of VBA (Visual Basic for Applications) code that I could program.This wasn’t uninteresting. This was an opportunity. I could use this to deepen my exposure to writing code. It wasn’t building a fancy web app, but I needed to start somewhere, anywhere, and this was it. So I squeezed every last bit of time I had with VBA to help my boss and get better at software development.When I was out of college, I took a job with Andersen Consulting (now Accenture). My thought process was — this company does software projects. Maybe, it’ll give me a door to a new field.However, Accenture put me in their “process” vertical. My day to day job was managing discussions with customers and recording the requirements they had for developers. I wasn’t doing software development. I was writing documents.A project came up though that wasn’t worth a developer’s time. Our customer wanted to use a reporting tool to connect to their data warehouse and they needed reports built.It looked like another uninteresting project of listening to what fields a user wanted in the report, and using the reporting tool’s drag and drop interface to stick the field in a report.But, then I realized something. There was more to this reporting tool.The reporting tool could be programmed with Javascript to create forms and build reports dynamically. This was the Excel situation all over again.I listened carefully to what our customers wanted and figured out more dynamic and flexible ways to get them their reports using forms and programs I built with Javascript right inside the tool.My boss was happy they over delivered on the reports our customers needed, and I learned a ton more about Javascript and doing more development.So much more that another opportunity presented itself at Accenture — they promoted me to a software integrationteam since I showed such aptitude and hustle.All of a sudden I was exactly in the position I wanted to be in.Today, I consider myself to be an above average developer. From publishing some decent open source projects to starting software companies from scratch.When I think back on the career I’ve had so far, I realize how much of it was looking around at the resources and tools I’ve been given, but instead of complaining and getting stuck hoping for better, I not only made due, I invented new purposes for them.Instead of taking Excel and this reporting tool project at face value, I saw they had components that could be repurposed to help the people I worked for and give me the education I needed in software development.People, too often, look outward at all the things they wish they had to improve their life. When really, if you break down the things you already have, you might just see they’re the exact solutions you needed.P.S. Please help spread this by clicking the ❤ below.You should follow my YouTube channel, where I share more about how we run our business, do product design, market ourselves, and just get through life. And if you need a no-hassle system to track leads and manage follow-ups you should try Highrise.I don’t have enough was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.


Source: 37signals


Bringing Analytical Thinking to Product Decisions with Client Teams

What is decision-making? In its simplest form, decision-making is the act of choosing between two or more courses of action. When confronted with a decision, you can take one of two cognitive approaches - analytical or intuitive.
In Thinking Fast, and Slow, Nobel prize winner cognitive psychologist Daniel Kahneman describes analytical thinking as “slow, deliberate, and consciously effortful mode of reasoning.” By contrast, intuitive thinking is our “fast, automatic, and largely unconscious mode.” In other words: think, or blink.  
There are hundreds of non-trivial decisions that come up in our day-to-day work building brands and creating great web products here at Viget. Which typeface combination best conveys a campaign’s tone? What mobile nav style will work best for users in an older demographic? How should I structure the code for this feature? Our professional lives can be simplified down to making and acting on decisions like these.
When we can, an analytical approach is almost always the better fit for these decisions. A visual designer can experiment with different typefaces, an interface designer can test mobile navigation patterns with potential users, and a developer can look at comparable code from peers, all in their quests for the best solution.
Sometimes though, we do need to rely on intuition to make a decision. That’s not necessarily a bad thing! The “gut reaction” of an industry professional is backed by years of experience, training, intimate knowledge of web standards and best practices, industry know-how…and of course (as Kahneman is quick to point out) a sprinkling of personal preference and bias.

What kinds of product decisions do we make with clients?
When we’re building a web application with a client team, we often lean on our clients to help us make some of the toughest and arguably most important decisions of the project:
Should we prioritize feature X or feature Y? Is it more important for feature X to do (or look like) this, or that?  How do we incorporate requirement Z into the existing design of feature Y?
We value our client’s input and want them involved in the process. Clients are often much more intimately familiar with the subject matter and users for the products we’re developing. And, like any consultancy, we need their buy-in.
Just like in our internal, day-to-day decision-making, we want to be able to take an analytical approach to decisions we make together with our clients. The most straightforward way to achieve this is by validating decisions through lightweight research and testing. But research data isn’t always available and decisions still have to be made.
If you were to ask a client team “Should we prioritize feature X or feature Y?” and you didn’t provide any additional context, direction or a framework for making an analytical decision, you are inadvertently asking them to use their intuition to make a quick decision. In other words, “What do you think?”
Client teams are equally as invested in the product’s success as we are, and they don’t ever want to rely on a coin flip to make a tough choice. Clients want to make well-informed decisions, and feel good about making them! But our client teams are also (in most cases) not web professionals. They don’t have the years of experience and training that might otherwise arm an intuitive decision. They have emotion and preference to inform a quick decision, and whatever information and experience we’ve provided them to make an analytical one. If we don’t provide a framework for that decision-making, we haven’t served our clients (or our product) very well.

Taking a step back
It can be tough to have future-proofing conversations when a project is first kicking off and everyone is excited and getting to know each other. But, early on in a project is actually the best time to introduce clients to the possibility that tough conversations may happen down the road. The moment when you’re asking a client to choose two features from a list of five that will be finished before code freeze is not the first time you want your client aware that this situation might come up.
Within the first week of a integrationproject, it’s a good idea to share two unalienable truths about software integrationwith your client team:
We are almost always working under some constraints (often time or budget) that limit the number of things we can do. Software integrationis fluid; it’s not an exact science. Any number of factors can increase or decrease the amount of time one thing takes, so it’s impossible to predict exactly how many things we can do in the given constraints. Application interfaces can accommodate a lot of different user needs. But the nature of design is such that the product interface won’t be able to satisfy every use case with equal priority.

Creating an analytical framework
Once clients understand that we are working together on a project for which we may not be able to do everything, the logical next step is recognizing that this situation will lend itself to hard choices. That conversation can go something like this:
“We will likely have to make tough decisions about what we should spend our time building (feature prioritization) and how those things should work (feature design and definition). There may not always be a perfect solution, and in those cases whatever we do will be a trade-off. The best we can do is to try to understand the priorities and the tradeoffs, make decisions together on the best way to move forward, and then work as hard and as fast as we can on what we’ve all agreed is most important.”
And now, the final step. To evaluate and understand priorities, work with your clients to identify a single most important user upfront before any integrationwork begins.
We often ask clients to rank primary audiences at the start of the project. We define, design and build the product with those audiences in mind. But what if only one could be the most important? If you had to choose?
Certainly there will be product decisions throughout the course of the project that don’t pertain to this single use-case. For an app that allows higher-ed professionals to showcase their CVs and search for jobs, prioritizing the job-seeking professionals won’t have much impact on the functionality for job-posters. But as we’re designing the interface, defining features and deciding what enhancements are critical for the application, having a single user that everyone has agreed is most important is incredibly helpful.
It sounds pretty simple, right? “We can’t do everything, so we’re going to have to agree on what’s most important, so let’s decide who is most important, and that user will be our framework for evaluating decisions down the road!” Having these conversations with your client team requires tact, honesty and trust on both sides. Agreeing that tough decisions will be required means acknowledging that our integrationteam may not get to everything. Agreeing on a most important user means acknowledging that other users may have slightly less focus.

Putting our framework to the test!  
We recently worked with iContact to build a tool that allows people to edit email layout and marketing content in React. Our primary success metric was to increase the number of new trial users who successfully sent their first email. We also knew that most new trial users of iContact were first-time email marketing users.
Once we were all on the same page about having to make decisions to meet our ambitious launch deadline, keeping this user in mind helped us evaluate, alongside an unbelievably great client team, some of those toughest decisions we encountered on the project:
Should we include preview text in the metadata area? Is it more important for users to be able to crop and rotate images, or upload multiple files at once?   How should we treat the requirement for converting blocks to HTML?

In conclusion  
Daniel Kahneman said it best. “If you’ve had 10,000 hours of training in a predictable, rapid-feedback environment — chess, firefighting, anesthesiology — then blink. In all other cases, think.”
In the same way that we think before we make major decisions, we want our clients to do the same. The more we can do to position our clients to make analytical product decisions with us, the better we can guarantee on-time and on-budget delivery of a user-driven product.


Source: VigetInspire


How we made Basecamp 3’s Android app 100% Kotlin

Our best advice based on a year of real-world shipping.Made with ❤️ in Chicago.We started our Kotlin journey a year ago based on two hunches: that it would 1) make a huge difference in programmer happiness and 2) wildly improve our work quality and speed.I’m happy to report that our hunches were right! As of this week, Basecamp 3’s Android app is written in 100% Kotlin. 🎉That puts us in a unique position to share tips from the experience of going from all Java to all Kotlin. How do you get started? What should you look out for? What are the best ways to keep learning Kotlin?Read on!🤓 Wrap your head around the basicsFirst thing’s first — take some time to get acclimated with the the language. There are free resources galore, but here are a few I’d recommend:Jake Wharton’s talk about Kotlin for Android. This was the lightbulb moment for me. After two watches, I really started to get it.Some of my favorite Kotlin features. I wrote this a few months after we started with Kotlin. I specifically wrote it to be basic and straightforward so it’d be easy for beginners (which I was at the time!)The Kotlin docs. When people tell me to read the docs, I often wince. But the Kotlin docs are legit, and are an excellent way to get acclimated.🐢 Start slow but make it realWriting your first bit of Kotlin is usually the hardest part of getting started.To alleviate the pressure, people will often suggest you start with tests or perhaps a Gradle plugin. And while that’s extremely sound advice, it doesn’t work for me. It’s too boring and obscure to get excited about.I propose something different — write real production code.This is important because 1) it’s something you can see working in your app right away and 2) it’s more fun! That feeling of accomplishment and seeing something work shouldn’t be discounted — it builds your confidence and keeps you motivated.Of course I don’t recommend converting a giant class all at once on your first go. Instead try converting a utility or helper method. Take a single method from one of your util classes and rewrite it in Kotlin.Done! You now have your first bit of production ready Kotlin.😵 Don’t try to learn the whole language at onceKotlin has a lot of great stuff in it — so much that you might be tempted to use it all right away.And while that can work, I wouldn’t recommend it. Instead find a few key concepts that click in your brain (not what others tell you are the best parts of the language), and practice using those to their fullest.When I got started, three areas clicked for me: flow control (when/if/for), extension functions (add functionality to any class you want), and null safety (in particular the use of let). Focusing on just those few concepts helped me get started without feeling overwhelmed.Don’t be afraid to start small. You need space in your brain not only to pick up new things, but to let them stick. You’re already going to be dealing with basic syntactical differences — if you try to cram all the goodness all at once, something is bound to get overwritten in your brain.🔀 Learn from the auto converterJetBrains has done a solid job with their Kotlin plugin and its ability to auto convert Java to Kotlin. It can get your class 60–70% of the way there, leaving you with some tuning and idiomatic/stylistic things to take care of.There are two great ways to learn from this:Auto convert the class, but keep the Java class handy. Put them side by side, and see how the Kotlin compares. You’ll pick up a ton by just seeing how the auto converter chose to implement the Java in Kotlin.Auto convert the class, but don’t leave it in that state — while the 60% version will run, that last 40% is what makes the difference between OK code and great code. Attack everything for clarity and conciseness and look for ways to follow Kotlin idioms that the auto converter couldn’t figure out.🤔 Question all your Java habitsAs you begin writing Kotlin, the sad reality is that you’ll probably have some bad Java habits you’ll need to break.I found myself writing terrible if/else blocks in cases where a when would be so much better. I was writing null checks around objects when a simple object?.let{} would’ve been better. And much more.You may also have built up some strong ¯_(ツ)_/¯ attitudes toward ugly code blocks. Because Java is so verbose, over time you may have begun to accept an occasional ugly code block as “well, that’s Java”.Writing in Kotlin will help you see through those, but you will need to let go of the idea that ugly code is OK. Sure there will be times when ugly code may be situationally necessary, but you won’t be able to blame Java’s ceremony any more.So regularly question whether you are doing something the “Kotlin way”. When you see code that feels long or complicated, pause and take another look at it. Over time you’ll develop new, better habits that will overwrite your Java ones.🏕️💨 Leave the campsite cleaner than you found it (no new Java ever)A good way to keep your code heading in the right direction is to tidy up small bits of Java as you pass by. As the saying goes, leave the campsite cleaner than you found it.A lot of times when building something new, you’ll incidentally need to make a small change to an existing Java class — add an attribute, change a type, etc. These are often small classes like a model or utility class.Convert them! Don’t be lazy and leave them be. This incremental, slow approach over time will save you and your team much frustration in the long run.❄️ Use cool downs for KotlinA great time to work on Kotlin conversions is when you’re cooling down off a big release.Often we’ll do our normal two week cycle, release a big feature, and then take a few days to watch for stability and customer issues.Those couple days aren’t going to be enough time to get into something big, so it’s a great time to convert some classes to Kotlin. Over time you’ll get faster at this and be able to knock out a few classes per day.👴🏻 Curb your enthusiasmWhen you start to feel comfortable with Kotlin, you might get a little…excited. That’s a good thing! That energy and enthusiasm keeps you motivated and learning.But it’s also easy to go overboard. I certainly did.I‘d collapse whatever I could into single-expression functions to save lines, only to realize I was giving up clarity. I’d use too many when blocks, even in cases where a simple if/else would’ve been sufficient and clearer. I’d write extension functions galore, then realize I was creating more cognitive overhead than I was saving.It’s wonderful to be enthusiastic and use all the tools that Kotlin gives you. But try to keep your cool (unlike me) and make sure you’re using language features for the right reasons.💸 Don’t forget about your customersWhile seeing more and more Kotlin makes your life much better, you need to keep one very important (obvious?) thing in mind: your customers don’t care.I fully support the argument that programmer happiness leads to great code and ultimately a better product. It’s crucially important.But as with all good things, you need to find the right balance. Converting all your Java to Kotlin might be a fun goal for you, but meanwhile your customers might be struggling with a nagging bug.The great thing is that those two things aren’t mutually exclusive. Grab those bugs and squash them with Kotlin — it’s a win-win! (If we’re being honest, Java probably caused the bug in the first place anyway).👯 Don’t go it aloneDepending on your company makeup, this might be easier said than done. But if you can, find a Kotlin buddy!There is no question that I’m more proficient at Kotlin because of my buddy Jay. We regularly share ideas, review each other’s Kotlin, and poke fun at Jamie, our designer.Sometimes that stuff happens in informal chats, but the by far the most valuable place to learn is in pull requests. You can let your code speak for itself, and the feedback can do the same. When it comes to learning Kotlin (or any new language really), this is absolutely crucial.Alright, you made it! I know that’s quite a bit to chew on — maybe some obvious, maybe some not. But I hope it helps get you on the right path to joining us in Kotlinland!If this article was helpful to you, please do hit the 💚 button below. Thanks!We’re hard at work making the Basecamp 3 Android app better every day (in Kotlin, of course). Please check it out!How we made Basecamp 3’s Android app 100% Kotlin was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.


Source: 37signals


Achieve &amp; Acquia Spark Conversation around Machine Learning and Healthcare

For more than ten years, Achieve, an Acquia partner, has been bringing innovative portal solutions to healthcare providers with a user-centered focus. They make the most complex web integrationprojects possible for companies like Children’s Hospital Los Angeles, Universal Music Group, Dexcom, The Recording Academy, and Scripps Translational Science Institute.
Achieve sought out Acquia to participate in their latest Digital Health Innovations (DHI) event because of Acquia’s involvement with technical trends like machine learning that are currently impacting the healthcare industry. Katherine Bailey, Principal Data Scientist at Acquia, was the featured speaker at the event. Like past DHI events, this one continued Achieve’s aim of bringing the San Diego tech, healthcare, and life science communities together through thought leadership.
Katherine Bailey taking questions from the audience at DHI
Machine Learning Today
The emergence of touch points in our digital world including the Internet of Things (IoT), the multitude of devices consumers own, and mobile applications, has led to an enormous growth of data. All of these touch points constantly track and store valuable data about consumers, however in order for this data to be useful, machine learning must be utilized.
When broken down machine learning can be understood as a form of artificial intelligence that is able to:
Learn from data
Recognize patterns
Apply that intelligence to new data without interference from a human
Machine Learning in Healthcare
Within the realm of healthcare, machine learning is a key player for the future of the industry. With over 2 petabytes of cancer genome data available, utilizing machine learning can help researchers:
Understand cancer
Identify drivers of tumor growth from analyzing data
Predict the most effective treatment for specific cancer types
Improve diagnostics
Predict outcomes
Physicians can improve their practices and create more personalized and custom patient care by having machine learning as an additional tool at their disposal.
Katherine provided insights into the current initiatives of machine learning in the healthcare space to paint a picture of the possibilities and and potential for the industry:
IBM Watson: When IBM decided to launch IBM Watson, the cognitive technology for machine learning, they chose to focus on the healthcare industry. Their initiative for genomics can be described as, “Bringing the promise of precision medicine to more cancer patients, Watson can interpret genetic testing results faster and with greater accuracy than manual efforts.”
Path AI: Path AI is a startup founded by researchers who won a competition on diagnosing breast cancer through reducing the error rate in diagnosis by 85%. The researchers went on to create Path AI which develops artificial intelligence applications to improve diagnostics.
i2B2: i2B2 is a NIH-funded National Center for Biomedical Computing based at Partners HealthCare System. They are developing a scalable informatics framework that would enable clinical data researchers to use the existing clinical data for discovery research. i2B2 offers a web-based tool for researchers to ask questions like “Of the last 10,000 women ages 40-50 years old diagnosed with cancer, what were the treatments offered and their outcomes?”
Researchers at Stanford: Researchers at Stanford are currently training neural networks to distinguish between benign, malignant, and non-neoplastic lesions for the dermatology industry. Stanford is also using data to predict when an intervention is needed in the ICU to ensure it’s done on time.
The Connection Between Machine Learning at Acquia & DrupalCoin Blockchain 8
Acquia is currently leveraging machine learning through the launch of Acquia Lift. Lift unifies content and customer data from multiple sources to deliver real-time solutions for consumers across any device. This allows for a personalized and contextualized buyer’s journey by taking consumer data about interests and behaviors into account. By launching Lift on DrupalCoin Blockchain 8, Acquia is able to deliver these personalized digital experiences to increase conversions and improve bottom-line results.
DHI events take place quarterly. The next event topic will center around the resources in San Diego that are available to promote the success of healthcare startups and will feature Venture Capitalists and successful startup entrepreneurs. The event is scheduled for May 4th in Carmel Valley, San Diego. Register to attend on our event page here.
Source: http://dev.acquia.com/


What’s Next In Tech: Takeaways from SXSW

Phase2 was in Austin last week for South By Southwest, the frenetic, ever-expanding conference celebrating the latest in technology, design, art, and entrepreneurship. We co-hosted a “DrupalCoin Blockchain Drop In” lunch with our partner, Acquia, and got a chance to speak with attendees about this year’s most popular SXSW themes. Here are a few of the highlights:
AI and Machine Learning
Many panels and sessions focused on the emerging applications (and moral ambiguities) of artificial intelligence, the rapidly evolving technology that underlies machine learning, deep analytics, the cognitive web, and advanced robotics. If you’ve pulled up at a stoplight next to a driverless car or been blown away by Amazon’s intuition when suggesting products, you’ve experienced AI in action.
A few key takeaways:

The scale and speed at which data can be mined and insights intelligently extracted is accelerating at a breakneck pace. Machine learning systems are mature enough to perform tremendous feats. However, systems are only as good as the data they rely upon. In this area, many problems persist, and threading together large, complex, and disparate data sets is still fraught with errors. Once the underlying data challenges are solved, adoption is poised to skyrocket.

Artificial intelligence means big business. In healthcare alone it’s estimated that by 2021 the annual spend on AI will total $6 billion, a more than tenfold increase from 2017. Mark Cuban, the owner of the Dallas Mavericks and serial entrepreneur, predicted during his panel, “The world’s first trillionaires are going to come from somebody who masters AI and all its derivatives and applies it in ways we never thought of”.

The potential applications are limitless. Computer-aided health diagnostics, safer disaster response, unlocking solutions to diseases that plague us… the list of impactful changes AI could deliver goes on and on.

VR/AR at an Adoption Intersection
Virtual and augmented reality have been all the buzz for the past couple of years. However, the business and consumer use cases have been narrowly relegated to the media, gaming, and entertainment industries. That’s definitely changing. International real estate agencies are using AR to market high end properties, and big brands such as Coca-Cola are leveraging VR to forge deeper connections with consumers. As highlighted in Mike Mangi’s talk at P2Con last year, nonprofits and NGOs are using VR to create immersive, visceral experiences that spark action on issues such as refugee assistance and women’s rights.
Not everyone completely agrees on the immediacy of VR for business, though, especially as it pertains to marketing efforts. Head of VanyerMedia Gary Vanyerchuk remarked during his panel, “People are worried about VR when they haven’t figured out how to do a proper Facebook ad spend.”
We were also intrigued by the arrival of projection-based computing, which opens the door to new immersive experiences for everything from music to design to gaming. Sony’s “WOW! Factory” featured their soon-to-be-released Xperia platform, which will turn any surface into a 23 inch monitor. Merging digital with the physical domain, it proved a hot attraction and elicited many an “oooh” and “ahhh” from conference attendees.
Digital Unites  
At its core, digital transformation is about replacing traditional business methods with digitized solutions that promote connectivity, efficiency, and agility. At SXSW, the impacts of digital transformation were inescapable. From the hyperlocal (an increased emphasis on attendee collaboration within the SXSW Go app itself) to the global (a panel focused on the role tech-enabled communities can play in solving international humanitarian crises), the power of digital to dissolve barriers was an underlying theme throughout the Interactive and Convergence tracks.
From our work with the World Bank to UN ReliefWeb, Phase2 has long believed in the power of open data to address global challenges. Needless to say, we were energized to see the topic take center stage at SXSW. This was best exemplified in Joe Biden’s speech on the “Cancer Moonshot” initiative, which has made information sharing and cross-platform collaboration a central pillar in their efforts to conquer cancer.
As part of this massive undertaking, a team led by the National Institutes for Health (NIH) and the University of Chicago have launched the Genomic Data Commons (GDC), an open data repository granting the world’s clinicians and researchers access to an ever-growing trove of previously unavailable information related to cancer patients. Soon, doctors across nine countries will be able to analyze tumor genome sequences, compare individual responses to specific interventions, and gain insights into the way subtypes of cancer react to current treatments.
The Impact of Inclusivity
SXSW is more than just innovation and creativity; it is also about continually elevating the conversation around diversity in tech. Kudos to the conference’s programming team for making gender equality and inclusion a main focus this year. There was solid representation of both men and women on stage most of the time, and sessions covered a broad swath of subjects, from battling ageism in tech to growing the number of African American-led VC funds.
The most powerful talk we witnessed was delivered by Jessica Shortall, who is the Managing Director of Texas Competes, a coalition of more than 1,200 Texas companies making the data-driven case for Texas to be more welcoming to LGBTQ people. In her Convergence Keynote, Ms. Shortall spoke about building cultural bridges in times of division, and how she’s using data to help foster a more inviting business climate for people of all backgrounds and sexual orientations. And the data is irrefutable: exclusionary laws and business practices have massively detrimental economic impacts. The human consequences are even more dire, and the conviction with which Ms. Shortall spoke was punctuated by this quote: “Data is how I do my job, but love is why.”
 

Source: https://www.phase2technology.com/feed/


How Important is Urgency in Facebook Ads?

In 2012, Marcus Taylor launched a kind of ‘Groupon deal for musicians’; for 100 hours only he gave away $1,250 worth of products for just $69. There were only 5,000 packages available. Because there was so much on the line, and he knew this would be exposed to millions, he obsessed over conversion rate. A mere 1% increase, could have been the difference between a huge loss and a decent profit.
In the end, his ‘obsession’ paid off – he managed to increase his conversion rate from 2.5% to 10.8%. The single largest factor that influenced this growht, he said, was increasing the amount of scarcity and urgency.

Urgency is one of the most powerful aspects of human psychology, In this article, Nail Patel explains that according to behavioral psychologists, urgent situations cause us to suspend deliberate thought and to act quickly. Many of the problems that affect conversions are issues of cognitive friction — people think too hard,  conversion rates.
But is it really so easy? Perhaps urgency isn’t truly all that big of a deal for getting people to click on an advertisement. We are hard to convince, so we decided to invest some money (so you don’t have to) and experiment.

Let’s go back in time for a moment. In 2015, after analyzing 37,259 Facebook ads, we put together this word cloud to represent all the words most commonly used in Facebook ads. The size of the word corresponds directly to the amount that it was used in headlines, main texts, and link texts.
A few types of words definitely dominated over others:

One observation we made of our word cloud was that many of the top words that were used related to time. It’s something that has been confirmed by brain scans after brain scan: we, as humans, are highly susceptible to the vocabulary of urgency. Words like:

Now
New
Today
First
Limited
Time
Day

The one thing that so many of these words have in common is that they’re trying to instill urgency. In practice, this occurs one of two different ways:

Creating scarcity: making something seem more desirable because it is in small supply
Creating novelty: making something seem more desirable because it is original (for now)

“Competition for a scarce supply not only raises perceived value and desirability, it also creates a sense of urgency to act fast,” as Customer.io’s Janet Choi puts it.
Of course, just knowing that these words appear frequently in the text of Facebook ads doesn’t necessarily tell you that you should definitely be using them. Perhaps everyone has just hopped on the urgency bandwagon and phrases like “Limited time only” and “Free today only!” don’t even have that big of an impact. How can you really interpret the emotions and behaviors of your users?
To figure it out, we did what we always do—we set up an experiment!
The experiment
When Stephen Worchel from the University of Southern Maine wanted to see the effects of urgency on desire, he asked 200 students to pick a cookie out of a jar with 10 cookies or one with just 2 cookies.
All the cookies in both of the jars were completely the same—but in the end, virtually every single student elected to go with the jar with fewer cookies. With no other variation between the two jars, Worchel was forced to conclude that the scarcity of the cookies in that jar had led students to value them more highly.
What we tried to do in this experiment is similar. We started with a premise that we thought would get us a good number of people clicking regardless of urgency: the 2020 election in the States.
To boost the clickability factor, we made our ad a simple question—who would you vote for, if you had a choice between rapper and songwriter Kanye West and Democratic senator from Massachusetts, Elizabeth Warren? We mocked up a visual:

And we were off! (Debates abound about Kanye’s political position, of course, but in this case, we thought it more exciting to pit the two against one another, and Warren’s position is clearly aligned with the Democrats.)
The design
As we’ve done previously on the blog, we split-tested our ads using AdEspresso. The process is quite simple. You go through the regular process of creating an ad, and then simply add extra headlines or copy where you want to test for a difference:

We chose two headlines for our ad, one that was non-urgent:
Cast your VOTE for the WINNER in the 2020 Election!

And one that was urgent:
ENDS SOON: Cast your VOTE for the WINNER in the 2020 Election NOW!

Yes, the chances of this election actually occurring in 2020 are very low indeed, and our quickly mocked-up poll certainly had no actual jurisdiction or authority over the topic. That was by design.
Since no one would have any predetermined desire for this offering (the chance to vote), it would be as pure an experiment on the power of urgency as we felt we could execute. All that would differ between the two ads, and all that would be tested, would be two bits of language—“ENDS SOON” and “NOW.”
The results confirmed what we thought would happen, to some extent.
The results
Overall, targeting our ads at the self-proclaimed politically active set and those who had expressed some interest in Elizabeth Warren or Kanye West resulted in:

1.976% click through rate
$0.326 cost per click
96 clicks
4,858 impressions
$31.33 spent
0 social clicks

When segmented by ad, we saw a that the urgent variation of our ad outperformed the non-urgent variation by a small but not insignificant amount:

The final results for the two separate advertisements:

Urgent
Non-Urgent

Clicks
56
40

Click through
1.96%
2%

Cost per click
$0.30
$0.36

Cost per 1k imp.
$5.93
$7.18

Impressions
2,853
2,005

Spent
$16.93
$14.40

With the lower cost per click of $0.30, we’re chalking this one up as a success for the urgent ad.
Cost per click (CPC) is one of the most important metrics for any Facebook campaign because it represents the return on your investment. If you were to scale this ad up and spend $1,000,000 rather than $30~, that seemingly small difference in CPC would work out to 3.3 million clicks (for the urgent variation) vs. 2.7 million clicks (for the non-urgent).
That’s more than a half-million clicks from the addition of a little patch of “urgency-creating” copy alone!
The theory of urgency
As we think about what to take away from our results, it’s worth looking a little closer at the phenomenon of urgency.
In 2006, Scott D. Swain, Richard Hanna, and Lisa Abendroth published a study examining time restrictions (“Ending soon!” “Only 24 hours left!”) and their effect on consumer behavior. They found that the effect of putting a time restriction on an offer depended on where that offer fell along three dimensions:

Urgency (need to complete offer in “immediate or near future”)
Anticipated regret (of not fulfilling the offer in time)
Deal evaluation (qualitative assessment of deal re: any discounts or restrictions involved)

These characteristics interact in some interesting and counterintuitive ways.
A short window of time (“Ends in 4 hours!”), for instance, can increase interest in a product by making the offer feel more urgent. But when you make it short enough that it’s actually inconvenient to fulfill the offer, and the deal doesn’t seem good enough to overcome that inconvenience, you can actually lower someone’s interest in your product.
In other words, a more urgent offer:
HALF OFF your whole CART (ONLY 1 HOUR REMAINING)
might actually be less effective than a less urgent offer:
HALF OFF your whole CART (WEEKEND ONLY)
The former offer forces people to decide—right now—whether they’re going to take advantage of it. The latter gives them more time to decide, therefore making it more convenient (because they can decide on their own time).
How to iterate on urgency
What does this study mean for you and your Facebook advertising efforts?
It means that you should experiment with different kinds of urgency in your advertisements, but you should not think that the more urgency you put into it, the better. Urgency is just one factor to consider. You must also look at the quality of the deal you’re offering (50% off a premium product? Or just 5%?) as well as the perceived convenience of fulfilling it. Do people just have to click through to your website to receive a coupon, or do they have to complete a survey?
Finding the sweet spot of urgency means finding:

the shortest possible time window,
with the best possible deal,
with the maximum possible urgency

Make your time window too short, and you can make it inconvenient. Make the deal worse, and you will lower people’s desire to fulfill it. Make it just right, and you can create an incredibly productive sense of urgency among your customers and get awesome return on your Facebook advertising.
What’s Next
One thing we learned from this experiment is that there are still many things to be investigated with when it comes to urgency.
We need to know what happens when we put an explicit time restriction on our offer—in other words, if we say that only 24 hours are left, or even 4 hours!
We should look at what happens when we offer a prize, and whether that plays into how people evaluate our deal. Is it more effective to offer a prize in general? Does offering a prize lower the time window that people will be willing to complete the offer inside?
But for now, what’s your own experience with creating urgency been? Do you find it an effective tactic? Comment below and you could be featured in an upcoming AdEspresso blog post!
Source: https://adespresso.com/feed/


An Introduction to the Reduced Motion Media Query

The open web's success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript.
Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

A brief history of Reduced Motion
When it was released in 2013, iOS 7 featured a dramatic reworking of the operating system's visuals. Changes included translucency and blurring, a more simplified "flat" user interface, and dramatic motion effects such as full-screen zooming and panning.
While the new look was generally accepted, many people using the updated operating system reported experiencing motion sickness and vertigo. User interface movement didn’t correspond with users' feeling of movement or spatial orientation, triggering the reported effects.
Although technology inflicting adverse effects existed before this, the popularity of iOS gave the issue prominence. Apple has great support for accessibility, so an option in the operating system preferences to disable motion effects for those with vestibular disorders was added in response.
Vestibu-what?
Your vestibular system provides an internal sensor to communicate your body's physical position and orientation in the world, and is key to controlling balance and eye movement. Vestibular disorders can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. Anyone who has spun around too quickly is familiar with a confused vestibular system.
Vestibular disorders can be caused by both genetic and environmental factors. It’s part of the larger spectrum of conditions that make up accessibility concerns and it affects more than 70 million people.
Pssh! I feel fine! This'll never happen to me
Remember: we're all just temporarily-abled. Feeling a little dizzy might not seem like that big a deal, but that moment of nausea might be a critical one: losing balance and falling down, a migraine during an interview, nausea-triggered vomiting while working a food service job, passing out while operating a car UI, etc.
So what can we do about it?
Enter a new Media Query
Safari 10.1 introduces the Reduced Motion Media Query. It is a non-vendor-prefixed declaration that allows developers to “create styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences.”
The syntax is pretty straightforward:
@media (prefers-reduced-motion) {
.background {
animation: none;
}
}
Safari will parse this code and apply it to your site, letting you provide an alternative experience for users who have the Reduced Motion option enabled. Think of this new Media Query like @supports: describe the initial appearance, then modify the styles based on capability.
How to test
So, how do we check this bad boy out? Provided you’re up to date with MacOS, you should be able to check it out in Safari Technical Preview.
Go to System Preferences, select the Accessibility options, click the Display tab, and check the Reduce Motion option. You'll see that the example animation in the CodePen example below updates when the checkbox is toggled. The pulsing circle is changed to an inert square:
See the Pen Reduce Motion Media Query Example by Eric Bailey (@ericwbailey) on CodePen.
Here’s a quick video if you don’t have access to this:
[youtube https://www.youtube.com/watch?v=uANmA7korfs?rel=0&w=560&h=315]
Need a more practical example of how the media query could be applied?
This feature from the New York Times opens with full-screen autoplaying video that simulates falling from a great height.

It's sudden and unexpected, and a strong candidate to trigger vertigo.

The Reduced Motion Media Query, could provide an alternative that replaces the falling animation with a screenshot of the final frame of the animation. The content of the article is still communicated thematically. A beautiful rendering of the proposed Gateway project draws the reader in. The other less-dramatic animations in the feature remain unchanged, as they are both subtle with their transitions and activated by the reader deliberately browsing the page.
The impact of the story is preserved while not having the potential to inflict harm on the person trying to read it. It's a win-win!
Hmph! Seems like a lot of work
Even if you ignore all the benefits of building accessible sites, it's probably a good idea to get comfortable working with User Queries.
As capabilities traditionally controlled by the operating system are integrated into the browser, crafting experiences that gracefully adapt to a person's preferences will become increasingly important. Reduced motion is likely to be supported by other browsers soon as part of a wave of new User Queries.
The browser's opinion needs to also be considered. Without a designed alternative, the browser's fallback settings for reduced motion or may not create a desirable experience. In fact, if animation alone communicates important information about your site, it may be lost.
So, should I get just play it safe and get rid of all my animation?
Doing so would be a dramatic and not necessarily valid option. Animation, when used with discretion and restraint, can be a great way to communicate relationships between parts of your site or transitions between states, direct a person’s attention, simplify the understanding of complicated concepts, or to simply add some fun. Used properly, animations can aid in accessibility by helping address cognitive accessibility concerns.
If you would like more information on what kinds of animation are more likely to trigger vestibular issues, Val Head has written an excellent post on A List Apart on the subject.

An Introduction to the Reduced Motion Media Query is a post from CSS-Tricks
Source: CssTricks


An Introduction to the Reduced Motion Media Query

The open web's success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript.
Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

A brief history of Reduced Motion
When it was released in 2013, iOS 7 featured a dramatic reworking of the operating system's visuals. Changes included translucency and blurring, a more simplified "flat" user interface, and dramatic motion effects such as full-screen zooming and panning.
While the new look was generally accepted, many people using the updated operating system reported experiencing motion sickness and vertigo. User interface movement didn’t correspond with users' feeling of movement or spatial orientation, triggering the reported effects.
Although technology inflicting adverse effects existed before this, the popularity of iOS gave the issue prominence. Apple has great support for accessibility, so an option in the operating system preferences to disable motion effects for those with vestibular disorders was added in response.
Vestibu-what?
Your vestibular system provides an internal sensor to communicate your body's physical position and orientation in the world, and is key to controlling balance and eye movement. Vestibular disorders can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. Anyone who has spun around too quickly is familiar with a confused vestibular system.
Vestibular disorders can be caused by both genetic and environmental factors. It’s part of the larger spectrum of conditions that make up accessibility concerns and it affects more than 70 million people.
Pssh! I feel fine! This'll never happen to me
Remember: we're all just temporarily-abled. Feeling a little dizzy might not seem like that big a deal, but that moment of nausea might be a critical one: losing balance and falling down, a migraine during an interview, nausea-triggered vomiting while working a food service job, passing out while operating a car UI, etc.
So what can we do about it?
Enter a new Media Query
Safari 10.1 introduces the Reduced Motion Media Query. It is a non-vendor-prefixed declaration that allows developers to “create styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences.”
The syntax is pretty straightforward:
@media (prefers-reduced-motion) {
.background {
animation: none;
}
}
Safari will parse this code and apply it to your site, letting you provide an alternative experience for users who have the Reduced Motion option enabled. Think of this new Media Query like @supports: describe the initial appearance, then modify the styles based on capability.
How to test
So, how do we check this bad boy out? Provided you’re up to date with MacOS, you should be able to check it out in Safari Technical Preview.
Go to System Preferences, select the Accessibility options, click the Display tab, and check the Reduce Motion option. You'll see that the example animation in the CodePen example below updates when the checkbox is toggled. The pulsing circle is changed to an inert square:
See the Pen Reduce Motion Media Query Example by Eric Bailey (@ericwbailey) on CodePen.
Here’s a quick video if you don’t have access to this:
[youtube https://www.youtube.com/watch?v=uANmA7korfs?rel=0&w=560&h=315]
Need a more practical example of how the media query could be applied?
This feature from the New York Times opens with full-screen autoplaying video that simulates falling from a great height.

It's sudden and unexpected, and a strong candidate to trigger vertigo.

The Reduced Motion Media Query, could provide an alternative that replaces the falling animation with a screenshot of the final frame of the animation. The content of the article is still communicated thematically. A beautiful rendering of the proposed Gateway project draws the reader in. The other less-dramatic animations in the feature remain unchanged, as they are both subtle with their transitions and activated by the reader deliberately browsing the page.
The impact of the story is preserved while not having the potential to inflict harm on the person trying to read it. It's a win-win!
Hmph! Seems like a lot of work
Even if you ignore all the benefits of building accessible sites, it's probably a good idea to get comfortable working with User Queries.
As capabilities traditionally controlled by the operating system are integrated into the browser, crafting experiences that gracefully adapt to a person's preferences will become increasingly important. Reduced motion is likely to be supported by other browsers soon as part of a wave of new User Queries.
The browser's opinion needs to also be considered. Without a designed alternative, the browser's fallback settings for reduced motion or may not create a desirable experience. In fact, if animation alone communicates important information about your site, it may be lost.
So, should I get just play it safe and get rid of all my animation?
Doing so would be a dramatic and not necessarily valid option. Animation, when used with discretion and restraint, can be a great way to communicate relationships between parts of your site or transitions between states, direct a person’s attention, simplify the understanding of complicated concepts, or to simply add some fun. Used properly, animations can aid in accessibility by helping address cognitive accessibility concerns.
If you would like more information on what kinds of animation are more likely to trigger vestibular issues, Val Head has written an excellent post on A List Apart on the subject.

An Introduction to the Reduced Motion Media Query is a post from CSS-Tricks
Source: CssTricks