Our static tools and linear workflows aren’t the right fit for the flexible, diverse reality of today’s Web. Making prototyping a central element of your workflows will radically change how you approach problem solution and save you a lot of headaches – and money. But most importantly, you will be creating the right products and features in a way that resonates with the true nature of the Web. A discourse on processes, flexibility, the Web as a material, and how we build things.Saving Your Web Workflows with Prototyping – Matthias Ott
12 LESSONS from An Event Apart San Francisco – ? 4: Jason Grigsby was the 10th speaker at An Event Apart San Francisco last week. Jason’s session, Adapting to Input, presented designers and developers with a conundrum many of us hadn’t yet considered when designing for our new spectrum of web-capable devices.
Responsive web design forced us to accept that we don’t know the size of our canvas, and we’ve learned to embrace the squishiness of the web. Well, input, it turns out, is every bit as challenging as screen size! We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers. What’s a design mother to do?
During his session, Jason guided us through the input landscape, showing us new forms of input (such as sensors and voice control) and sharing new lessons about old input standbys. We learned the design principles needed to build websites that respond and adapt to whichever inputs people choose to use.
Four truths about web inputs
Jason began by sharing four truths about input in 2016:
- Input is exploding — The last decade has seen everything from accelerometers to GPS to 3D touch.
- Input is a continuum — Phones have keyboards and cursors; desktop computers have touchscreens.
- Input is undetectable — Browser detection of touch‚ and nearly every other input type, is unreliable.
- Input is transient — Knowing what input someone uses one moment tells you little about what will be used next.
A Golden Rule of Inputs
Just as many of us screwed up our early approach to multi-device design by consigning the “mobile web” to a non-existent “mobile context,” we now risk making a similar blunder by believing that certain tasks are “only for the keyboard”—forgetting that by choice or of necessity, the people who engage with our websites use a variety of devices, and our work must be available to them all.
One of my principal takeaways from Jason’s presentation was that every desktop design must go “finger-friendly.” Or, as Josh Clark put it back in 2012, “When any desktop machine could have a touch interface, we have to proceed as if they all do.”
For more illuminations on input, read Jason Grigsby’s “Adapting to Input” in A List Apart, and check out these amazing demos and articles:
- Hololens Gestures
- Leap Motion Oculus Rift tour
- Microsoft Research Pre-Touch Sensing for Mobile Interaction
- You cannot reliably detect a touch screen
- Interactive touch laptop experiments
- New Rule: Every Desktop Design Has To Go Finger-Friendly
- jQuery Pointer Events Polyfill
- Pointing the Way Forward
- Warby Parker Gyroscope Example
- Lightsaber Escape Gyroscope Example
- Generic Sensor API Draft
- Autofill: What web devs should know, but don’t
- Payment Request API
- Web Cam Toy
- HTML Media Capture and getUserMedia
- Web Speech API Demonstration
- Web Speech API Translation Demonstration
- Web Bluetooth
- Physical Web
- One amazing video that shows the potential of the physical web
- Open Device Labs
- Four Truths About Input
Tomorrow I’ll be back with another top takeaway from another AEA San Francisco 2016 speaker. The next AEA event, An Event Apart St. Louis, takes place January 30-February 1, 2017 in the shadow of Mr Sarrinenen’s fabulous arch. See you there!
- Mobile is today’s first screen. So design responsively, focusing on content and structure first.
- Websites and apps alike should remove distractions and let people interact as directly as possible with content.
- 90 percent of design is typography. And the other 90 percent is whitespace.
- Boost usability and pleasure with progressive disclosure: menus and functions that appear only when needed.
- One illustration or original photo beats 100 stock images.
- Design your system to serve your content, not the other way around.
- Remove each detail from your design until it breaks.
- Style is the servant of brand and content. Style without purpose is noise.
- Nobody waits. Speed is to today’s design what ornament was to yesterday’s.
- Don’t design to prove you’re clever. Design to make the user think she is.
Also published in Medium
Translated into French by Jean-Baptiste Sachsé
TOUCH introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark’s new book, Designing For Touch, guides designers through this new touchscreen frontier, and is the launchpad for today’s Big Web Show conversation.
In a fast-paced, freewheeling conversation, Josh and I discuss why game designers are some of our most talented and inspiring interaction designers; the economy of motion; perceptions of value when viewing objects on touchscreen versus desktop computer; teaching digital designers to think like industrial designers (and vice-versa); long press versus force touch; how and when to make gestures discoverable; and much more.
Sponsored by DreamHost and BrainTree. Big Web Show listeners can save 15% when ordering Designing For Touch at abookapart.com with discount code DFTBIGWEB. Discount valid through the end of January 2016.
I RECENTLY SHARED a positive view of what’s happening at Adobe. I’m still a huge fan of the company’s image editing software, and I remain optimistic about their new direction. But I’m unhappy about the two-device limitation Adobe Cloud places on software.
While the company is more liberal than it used to be (e.g. a license to use Adobe software on the Mac is also a license to use it in Windows, and vice-versa), the Cloud’s refusal to let me use software I’ve purchased from Adobe on more than two devices feels like a relic of the past. It’s a restriction that might have made sense for print designers working in corporations in the 1990s, but it is out of touch with the reality of remote and freelance workers designing digital sites and applications for a multi-device world.
I have an office iMac, a home iMac, a home laptop, and an office laptop. I use all of them for my work. My set-up is not unique. Everyone I know who works in this industry has something similar going on.
Apple gets this reality but Adobe does not. For instance, my copy of Lightroom 4, which I bought via the App Store, works everywhere. Not so Lightroom 5, which I purchased (rented? licensed?) as part of my annual Cloud subscription. As a paying Adobe Cloud customer and a photography and Lightroom fanatic, I should be chomping at the bit to upgrade to Lightroom 5. But I see no point in doing so if I’m only going to be able to use Lightroom on two machines.
You might ask why this is is a problem. Here are three times I use Lightroom: to edit business, family, and vacation photos on my laptop while traveling; to edit business photos on the computer in my design studio; and to edit family and travel photos on the computer in my home. Adobe Cloud will let me use Lightroom 5 in two of these situations, but not all three. That makes it useless to me. Lightroom 4, which I bought in the App Store, has no such restrictions. I can use it on as many machines as I own. (To be fair, Apple can easily afford to be liberal with software licensing, because it makes its money on the hardware I buy. Adobe does not. I get that, but understanding doesn’t solve my problem.)
Likewise, I need to use Photoshop when I’m traveling on business (laptop), when I’m working in my design studio, and when I’m burning the midnight oil at home. Adobe will only let me use the product in two of these contexts. Stymied, I use an older, non-cloud version of Photoshop on one or more machines—and when I do that, I run into compatibility problems.
Although I love Photoshop and have used it professionally for nearly two decades, I can’t help noticing that Pixelmator does pretty much everything I need Photoshop to do, costs a fraction of the price (US $29.99), and can be downloaded onto an unlimited number of computers I own.
Why should Adobe care? Because the current restriction is not sustainable for them. The frustrations the restriction creates for me every day actively encourage me to stick with Lightroom 4 and abandon Photoshop for a much more affordable competitor. In short, the one thing that’s uncool about the Cloud is actively unselling all the Cloud’s benefits. And that can hardly be in Adobe’s long-term interest.
What can Adobe do about it? Well, the company could offer a “pro” or “gold” version of Cloud service that removes the two-device restriction. If the difference in price is reasonable, I’d happily sign up. Even better, from a public relations as well as a love-your-neighbor point of view, would be if Adobe simply removed the restriction at no additional cost. Or set the restriction higher, allowing you to register Cloud software on up to five devices you own.
Whatever they do, they should do it soon. We want to keep working with Adobe software, but Adobe needs to work with us, too.
AN EVENT APART Chicago—a photo set on Flickr. Pictures of the city and the conference for people who make websites.
Notes from An Event Apart Chicago 2013—Luke Wroblewski’s note-taking is legendary. Here are his notes on seven of the ten presentations at this year’s An Event Apart Chicago.
#aeachi—conference comments on Twitter.
Chicago (Foursquare)—some of my favorite places in the city.
An Event Apart Chicago—sessions, schedule, and speaker bios for the conference that just ended.
AEA Chicago 2013 on Lanyrd—three days of design, code, and content on the social sharing platform for conferences.
A handful of seats are available for the final event of the year, An Event Apart San Francisco at the Palace Hotel, December 9–11, 2013. Be there or be square.
IT’S ANOTHER Full-length Friday! In this 60-minute video caught live at AEA Boston, Luke Wroblewski (Mobile First) explores multi-device design from the top down (desktop to mobile) and bottom up (using mobile to expand what’s possible across all devices):