Two weeks ago I was out at RSA Conference. Typically enough, in the expo hall it seemed that everyone had pens to give away. Here's a sampling…
Which one of these pens do you think writes the best? The sleek, silver one with a good heft? The light blue curved one with a big cushy grip? The elegantly simple black one?
All but one, no matter how nice it looked or felt outside, had a terrible, cheap pen cartridge inside. They required a lot of force to make a mark and were fatiguing to use for any length of time.
The only pleasant-to-use pen was from LogRhythm. It writes smoothly and effortlessly, has a modest but effective grip, has a pleasant blue ink, and even makes a nice clickey sound when I fiddle with it. Onto my desk it goes, where it will get used regularly.
Every time I reach for it, I'll see their brand, burning its way into familiarity.
Every one of these pens has some company's brand on it. But only one company took the time to select a pen that would give a lasting positive impression.
How something looks is not enough. What counts is how it works.
I’m going to take a holistic approach to talking about designing for the mobile web. Design doesn’t only apply to the look and feel. It goes beyond the color and type choices we make; instead we design at every stage of the project. We design content to be both relative and appealing to users. We design the user experience so the layout, functionality, and navigation all feel natural and easy to understand. We design the user interface so that everything looks cohesive, on brand, and the major elements get the visual weight they deserve.
There are five major aspects to keep in mind when designing for the mobile.
1. Content Flow
The Fold has been debunked for the desktop web. The idea of getting everything above the fold is moot when there are hundreds of “folds” out there. More important to the user is the flow and hierarchy of content. That approach is even more paramount when it comes to the mobile web. When you have the real estate of a desktop computer you can easily display information equally in three columns. On a mobile device you have to be more strategic when it comes to your content. In the limited real estate of a mobile device you have to stack your content.
Now I may be straying from my path a little bit and what I'm about to quickly mention should be a separate blog post all by itself, but this stacking approach is only truly effective if you've done a good job creating worthwhile content for your site. This approach isn't ideal if your desktop content is bloated and dated. If you take a Mobile First approach you'll be able to: optimize your website for an expanding audience, focus on key tasks, and take advantage of great features only available on mobile devices.
2. Calls to Action
Using a mouse to click on a link is easy, using your finger to click on a link can be difficult. The general rule of thumb is that interface elements on a mobile device should be no smaller than 44 pixels squared. This assures much greater accuracy for users. These interface elements translate directly to your calls to action on your mobile site. It doesn’t matter if it’s a purchase button for a product, a register button for an event, or a contact us button; they should all be easy to see and even easier to tap.
3. Navigation Style
Depending on how many navigation links you have, it will steer you towards a navigation solution. If your site only has four or five short nav items, you might be able to get away with listing them across the top. If you have more than that then you might want to consider one of the hidden menu approaches. The idea is that you want to keep the navigation clear while trying to minimize the screen footprint; users are here for your content, not to see a giant logo and a bunch of links that take up half the screen.
4. Available Features & Content
It’s funny to think your mobile website may be the only version of your website that some users see. With the rapid adoption of smartphones, more and more people are accessing the web via their mobile device. What we don’t often think about is that this is the only gateway some users have to the web.
What does this mean? Any content or features that are available on your desktop site should be available on your mobile site. Whether a user is trying to buy a product, pay a bill, or check a gift card balance they should be able to do it regardless of the device they are using. Kill those frustrating “Desktop Version” and “Full Site” links that force users into a bad experience and include the content and features your users are looking for on your mobile site.
5. Hi-Res Graphics
You’ve got the content you need, the user experience is tight, now you just have to make sure it looks as good as it can. The vast majority of desktop web is a uniform 72ppi (pixels per inch) but mobile devices now squeeze a lot more pixels onto their screen. The iPhone 5 is 326ppi, Motorola’s Droid Razr HD is 312ppi, and Samsung’s Galaxy S3 clocks in at 306ppi.
This means graphics saved out at 72ppi will look fuzzy on these devices. Now knowing this, you should try to rely on HTML and CSS for as many elements as possible: buttons, gradients, drop shadows, etc. When you can't execute the design with CSS and you must use images, like your logo or social icons for example, make sure they're saved out at a high enough resolution so they look nice and crisp on mobile devices.
Make it so!
Keeping these aspects in mind when you start your project will help assure that your mobile presence is a cohesive and smooth experience for users no matter what device they're using.
“The object of the artist is the creation of the beautiful. What the beautiful is is another question.”
― James Joyce, A Portrait of the Artist as a Young Man
I’m late to the party as usual, but I’ve really been enjoying the social video sharing app Vine. It takes the Instagram formula and runs with it, allowing users to share five second loops of video recorded with their iPhones.
I’d tried similar apps like Flixel, which encourages users to create and share cinemagraphs. Unfortunately, I have a blind spot for any software that features a timeline—my brain doesn’t bend that way. Especially so on a small touch screen. I grew quickly frustrated while attempting to loop a clip of my daughter on a swingset, and moved on.
After using Vine, I feel fairly confident invoking the ghost of Steve Jobs by saying “if you see a timeline, they blew it.” Vine cleverly sidesteps the timeline issue by discarding it—you start recording by pressing the screen. When you lift your finger, recording suspends. Put your finger back down, and it resumes. Once the progress bar is filled, you have your five seconds of video, and you’re done. Editing is done “in-camera”, like the budding adolescent auteurs of the 60s and 70s with their parents’ Super 8.
On a recent visit to the creative room, I was surprised to hear a certain level of grumbling and apprehension when the subject of Vine was brought up. When asked to elaborate, our creative director Jared explained that while tools like Vine and Instagram empower people, the frictionless nature of them can be problematic. “It allows users to share meaningless footage without the keystone of a compelling narrative.”
In the “old days”, an aspiring photographer would venture outside and take a bunch of pictures. Then, perhaps she would spend time in a darkroom developing negatives. She would then attempt to identify what worked, what didn’t, and make prints from the stuff that did. Repeat.
This iterative process is akin to going to the gym. Taking a hard look at your own work, deciding what sucks, and working toward improvement builds creative muscle mass. Eventually, you might even develop your own aesthetic.
But who needs to develop their own aesthetic when you have a dozen convenient, pre-packaged ones to choose from? Why waste time choosing the perfect shot? The only shot to choose from is the one you just took. In fact, these gimmicky filters distract us from improving our fundamentals. As Jared said, “[the tools] focus more on the effects and less about composition.”
Are these apps the creative equivalent of high fructose corn syrup? Perhaps these tools are “scratching our creative itch” and hitting our reward centers without making us do the hard work traditionally associated with an artistic endeavor.
This realization hits close to home, as I’m the poster child for this brand of banality. If you take a look at my Instagram, you would see that it consists of A) high contrast photos of old buildings/cars, B) food, or C) my daughter (I get a pass on that one, OK?). If you spend a few minutes exploring the public timelines on either of these apps, you will find many examples of typical race-to-the-middle work that supports Jared’s argument.
While the app does not provide filters (yet), the “rip and run” nature of Vine imposes a certain slapdash quality to its output. Most shots are handheld, so jumpcuts nearly always exhibit a jarring effect. And while I believe the decision to support sound was a “net win” for Vine, audio often takes a back seat to the visual content. Well-edited audio is one of the more unappreciated aspects of filmmaking. If Vine becomes the de-facto standard for sharing video online, the next generation of filmmakers might not know their “L-cut” from their “J-cut”. Imagine a dystopian future where the “guerrilla documentary” style is the norm, and people find watching footage shot with a steadycam disorienting.
Still, much like the Holga, some have embraced the limits of these mediums and enjoy pushing them. Michael Lopp takes a borderline-obsessive approach toward his Instagram output, tweaking his photos with a complex chain of external apps to acheive just the right look. There’s an aesthetic, and it’s definitely not prepackaged.
Similarly, actor/director Adam Goldberg has been using Vine to serialize a body of surreal, loosely-connected vignettes. They remind me of Maya Deren, Kenneth Anger, and other avant-garde filmmakers I didn’t fully understand from my college film appreciation class. Some of these shorts are extremely well-produced and clearly require a great deal of effort and thought.
As the discussion continued, we tried to consider the “pro” side of the argument. Jared related the story of a friend whom started taking photos through Instagram, but now wants to take the next step and purchase a DSLR.
“Bottom line:” Jared concluded, “garbage in, garbage out.” Like junk food, too much of anything can be bad for you. We all need a little bit of whimsy in our day, and if these apps can provide it, that’s a good thing. But snapping quick one-offs without putting much care or thought into them won’t help you grow as a photographer. Challenging yourself to live up to the standard of others embracing these new mediums just might.
This month, a great but virtually unknown man has passed away: John Karlin.
Karlin, who worked for Bell Labs in the decades after World War II, had a doctorate in mathematical psychology, was an electrical engineer, and a professional violinist. More to the point, he largely created Human Factors Engineering, the predecessor of what we today call "usability". By studying human behavior, systematically, he found ways to make technology better fit the humans it was meant to serve.
The rotary dial telephone is a fascinating (and photogenic) example. Early dials had the numbers inside the finger holes, so you could aim for them. Worked pretty well for numbers:
(photo credit: banlon1964)
But if you aren't looking directly at it, it gets a little harder to read:
(photo credit: Robert Huffstutter)
And when you add letters as well as numbers, it gets very tough indeed…
(photo credit: sagriffin305)
The solution is obvious, right? Put the numbers outside the finger holes, like this…
(photo credit: Dan Buczynski)
…or perhaps like this:
(photo credit: Master of Telxons)
Wrong. The improved phones took longer to dial!
Karlin's team investigated. It turned out that by removing the numbers from inside the finger-holes, it took people longer to find the now-empty targets.
In this next photo, can you see what they changed?
(photo credit: Andrew Yang)
By putting dots inside the finger holes, users could acquire and hit the target more quickly. After adding dots, Bell Labs finally saw the expected improvement in speed. And so rotary phones continued for decades with that time-saving dot.
Karlin's work at Bell Labs went far beyond just making phones easier to use. His approach to measuring and testing the interactions between humans and our artifacts was trailblazing.
Karlin wasn't alone; early researchers included Alphonse Chapanis, whose work for the army showed that pilot error could be reduced with better control design and layout; and Paul Fitts gave us "Fitt's Law". But Karlin demonstrated in wonderfully and appropriately concrete ways how the smallest of details can have a measurably huge impact.
John Karlin's work was inspiring. May he rest in peace.
The iMarc Boilerplate, much like the HTML5 Boilerplate or Twitter Bootstrap, is our starting point for new projects. It provides us with:
- Better, consistent defaults than what browsers use by themselves;
- Sharp, clean placeholders for styles on sites we can use until we've had a chance to restyle them;
- Clear, organized structure for our CSS going forward.
We wanted this file to be lighter than Twitter Bootstrap or the HTML5 Boilerplate and restructured in a way that was more fitting our mentality. Rather than layering our notions on top of one of these others, we wanted to take what we could from them create a base that fits us.
Best of all, we're releasing it on GitHub so its available to the community. You'll find more information on GitHub, as well as example markup and a separate page showing our document hierarchy and structure.
Did I just write “Springtime”? Yes I did. I was talking with my neighbor a few months back about the rainy season they call “winter” around here, and he advised me that once it passed, Spring was beautiful. I asked, “When is that Matt?”. “Oh, February.” I LOLed, but indeed it’s true. We’ve been hiking most every weekend and I went mountain biking after work last night.
Geography lesson: The dozen or so towns that make up Silicon Valley are variously known by their individual names if you live in one of them. Or as the “South Bay” if you live in San Francisco or across the bay in Oakland or Berkeley. Or you might hear “The Valley”, or of course the more formal but less locally flavored, “Silicon Valley”. But if you’re in Santa Cruz, it’s simply “Over the Hill” because it's, you know, just over the hill. And Lake Tahoe or Las Vegas or San Jose are roughly equivalent in the meaning of that. It’s like living on an island in that sense. “Over the Hill” means “Not in Santa Cruz”. 'Nuff said.
We had a mountain lion cruise through the ravine just down the hill from our house in Bonny Doon about 100 feet from our back door, caught on our game camera one night. How cool is that? My wife and I went hiking last Sunday, a scant hour south of the San Francisco city limits and saw two people the entire day, in the parking lot as we set out. It’s frightfully congested on the roads sometimes, but incredibly spacious in the other 99% of the state.
Gas is expensive, as is housing. Food is religion. The outdoors is your living room. People drive pretty darn well, and way too fast. The only style that’s not cool is not having some style. You could drive a dill pickle down the street and the CHP wouldn’t bat an eye, as long as it passes “smog” testing. Along those lines, if you drive a Prius, good luck picking yours out in a big parking lot when you come out of the store if you forget where you parked it.
This town has geeks and freaks and hippies and surfers and yuppies and locals, and a great Latino influence to boot. As I went mountain biking last night, plenty of folks were surfing at the break downtown, and 4 hours east of here they are putting chains on their tires to get to Lake Tahoe for skiing. This state is really a handful. We love it.
We are gaining traction out here, launching marketing campaigns, networking madly, and working with some really cool companies on some really cool projects. So far so good, but for sure the best is yet to come. Happy Spring!