photo: P Hansen
My father took a lot of pictures. Photography was a hobby and, for a short while, part of his professional life while an engineer at Polaroid. I grew up loving the click-whoosh of an instant photo being taken, slip of murky proto-photo being ejected into waiting hands. Pulling to expand, then snapping flat the brushed metal and leather-paneled slab… just getting to handle the camera was almost as fun as staring at that inky square, waiting for the image to appear.
Photos would get pinned to the fridge by magnets or to the cork board in the entryway with pushpins. Most of those would eventually make their way into one of the large, three-ring photo binders that collectively served as our multi-volume Family Album. And there each photo would sit, layered in plastic against an adhesive-backed, card-stock page, waiting patiently for that holiday visit by relatives. Not long after their arrival, binders would be taken down off the shelf and rifled through for collective reminiscing and occasional moments of embarrassment. (Plaid bell-bottoms!)
Of course nowadays, I can snap a funny photo, upload it to Flickr or Twitter or MLKSHK, and quickly get comments (or “likes”) from my friends. Or I could go a step further and toss it up on a different kind of site, like Canvas, where my photo would serve as raw material for a cycle of remixes and captioning that ends only when all the lulz have been wrung out of that particular creative sponge.
Now, some people might dismiss the purveyors of silly photo mashups as nothing more than juvenile mouth-breathers killing time between flamewars. And many people want nothing less than to have their personal photos subjected to (often ridiculous) manipulation by strangers. But somewhere between that static photo album and the photo-free-for-all is the space in which most of us probably play. We want to share our pictures, and solicit comments, approval, acknowledgment. We’re willing to release them out into the world to be viewed and experienced in many different ways.
The web is not a photo album. It can’t be. It shouldn’t be. I put up content, you read it, view it, share it using a phone, a computer, a tablet, a PC. Then you might print it out, repost it somewhere else or make it your computer desktop image. You might even decide to make a CafePress t-shirt from it. (Though let’s hope in that instance I’ve released that image to the public domain or used a liberal Creative Commons or similar license.)
As part of sharing my content with you, I implicitly agree to your, at minimum, experiencing it in a different context than I might. After all, you might use the Flickr Android app to view a 320-pixel-wide version of my image, even though I might blanch at the thought of browsing my own photo library in anything less than full-screen mode using iPhoto on my 22″ widescreen monitor.
But as soon as I release that image onto the web, that’s my problem, not yours. I’ve relinquished a certain degree of control.
And such is the case for any content I, you or anyone might choose to put on the public web. Yet so many web designers seem to, if not actively fight against this notion, be made uncomfortable by the fact that you might choose to browse their shiny new web site using a netbook, or a phone, or just a smaller-than-fullscreen web browser on a computer. We need less “my design is meant to be viewed” and more “our content is meant to be enjoyed.”
So how to begin changing the conversation? While many of the ideas will be familiar to those who followed the aims of the Web Standards Project (“simple, affordable access to web technologies for all”), established in the early part of the past decade, the web thinkers, designers and developers rallying under the current banner of “Future Friendly” have summed things up quite succintly in three basic points. The first one, in particular, makes a rather nice manifesto in and of itself:
Acknowledge and embrace unpredictability.
In other words, get comfortable with being uncomfortable. Accept there will always be a new device, a new technology, and entirely different way of experiencing content. And step two is, naturally, to carefully consider and prepare anything you might unleash onto the web accordingly.
Perhaps unsurprisingly, most of the people behind Future Friendly are largely approaching this from having done a lot of work in the mobile space. Quite frankly, the explosion of mobile has been a much-needed kick in the pants to further dissemination and adoption of these broadly-applicable ideals. When mobile Internet usage is growing at such a fast pace that, by current estimations, its volume will exceed that of desktop Internet usage by 2015 (if not sooner), it becomes impossible to deny that web sites unfriendly to mobile use are simply unfriendly. Period.
Things that may be a minor annoyance when experienced in a desktop browsing context — minimum browser window widths, plug-in downloads and long page-load times — often become intolerable in a mobile one. Attempts by designers and developers to shape the experience by elevating form over function only serve to drive users away.
Sites like Media Queries strive to highlight some of these newer, adaptive designs that change to suit your screen size in the same way CSS Zen Garden did for site using web standards almost ten years ago. And there’s movement away from plug-ins towards web-native experiences, as evidenced both in an announcement by SlideShare this week that they were ditching Flash in favor of HTML5, and a report last month that more top web sites are now using web-native-technology-leveraging jQuery than Flash. And mobile web pioneers like Yiibu (Bryan Rieger and Stephanie Rieger) continue to not only evangelize for better context-appropriate web experiences overall, but share actionable insights in amazing presentations like this one about some of the ongoing issues with serving that right experience, at the right time, in the fastest possible way.
In these ways, we’re still figuring out the mechanics of how to harness certain technologies and approaches, and when to discard others, all in the service of removing barriers to truly delightful experiences.
And it truly was a delight, using that Polaroid camera. I may not longer own it (and getting more film for it would be a challenge in and of itself), but that kind of connection is something that I’ll always seek out, in experiences both tangible and digital. Designers and developers who strive to be future friendly should end up being user friendly, which gives them that much more of a chance of wowing me. And that’s a challenge I’d love for more of us web professionals to take on.
Too many great links pass through my Twitter stream and RSS feed, some haphazardly archived via (re)tweeting, favoriting, bookmarking or saving to Pinboard. And when I’m coding pages or sites from scratch — something I’ve been doing more and more lately — not having those resources about the latest dev and design techniques organized in an easily comprehensible fashion is a definite handicap.
So I decided to put a domain name I registered on a whim some time ago to good use: css3isawesome.com is now my new central repository for those kinds of links. CSS3 is the obvious focus, but there are a few broader web design-related links in there, too. I want to constantly be adding new things to the list, so email me or @ me on Twitter if you know of a great link that would fit in one of my four categories:
- Articles & Blog Posts
- Grids and Page Layout Systems
At some point I’ll better organize everything, with tags and maybe some kind of CMS. But, as always, the content itself is the most important element.
I clearly didn’t make myself hungry enough putting together the cupcake bakery mini-site for my prototyping talk last month, as I’ve spent the past few weeks polishing that prototype — and staring at chocolate frosting — in order to make that code a proper, release-ready framework. And I’m now happy to say… the 3-Layer-Cake Prototype is now ready for your (ahem) consumption!
The prototype builds on a technique I’ve actually used for many years, one I first read about in late 2004 in this Invasion of the Body Switchers article on A List Apart by Andy Clarke and James Edwards. I remember finding it instantly useful for a project I was doing at Coinstar, where I was tasked with developing an updated kiosk interface that could accommodate touchscreen and keypad interfaces, in either Spanish and English. Using IOTBS, I was able to create an interactive prototype from a single set of HTML pages that effectively simulated the various interfaces and served up different language content.
But it wasn’t until sometime last year, fiddling with WYSIWYG prototyping tool Axure and seeing their in-prototype annotations that I realized… hey, I could do that, too!
First I tried absolutely positioning individual labels over each page, something which was pretty effective, but slightly wonky cross-browser and -platform. Plus, it was incredibly time-consuming having to both position the labels (nudge, nudge – save – refresh x 1000) and create all the additional markup and CSS to support them.
Then I discovered CSS3 Generated Content and realized that it could be used to create an almost identical set of annotations, but in a way that was much simpler and scalable. In a nutshell, here’s how it works:
The Annotation Technique
- Elements bearing a class of “x” in the HTML page will be tagged with a numbered note, to be shown in annotations view.
And if the element has one or more classes already, just add it to the existing one(s), as multiple classes are A-OK.
- In the switch.css file that defines view-specific styles, a counter is defined for all elements tagged with the “x” class when in Annotations view.
- Then the counter is started, its results styled and set to appear as generated content before the start of each “x”-tagged element in Annotations view. From this, the note labels appear onscreen next to each of those elements.
- Finally, the annotations themselves are inserted into the notes panel in the HTML page, written up and formatted as an ordered list, with one list item for every “x”-tagged element on the page, in the order in which they appear in the code.
The notes and the annotations lists aren’t yoked together, so this is the only place where you’ll need to manually match up the count/order of elements to list items.
And that’s the heart of the annotations functionality, explained. You could (and should!) strip out whatever you don’t need, if, say, you want the annotations without the complete 3-Layer-Cake Prototype framework. Non-commercial re-mix and re-use is very much encouraged under the Creative Commons license under which I’m releasing this work. And if you end up using this and posting something online, please let me know, as I’d love to check it out!
Thanks to everyone at the Midwest UX conference who attended my talk on user experience design for the mobile web. It was a lot of fun, and I enjoyed talking with folks both in-person and on Twitter afterwards. It turns out that there are quite a lot of former developers or tech-leaning designers in the UX community!
Below is my presentation on SlideShare, as well as a text-only transcript. Please share and enjoy!
Hello, and welcome. Today I’m going to talk about designing for the mobile web. But first I want to relate a recent experience that encapsulates a lot of what we’re trying to do when we design for mobile: connect what’s onscreen to what we’re trying to do, in the moment, in real life.
A couple of months ago, I converted a spare bedroom in my house from what was essentially a storage space into a home office. Fortunately, my desk is right in front of a nice big window. UNfortunately, it’s a single pane, old wood window, in my 100-year old uninsulated house. The room stays cold, and I realized pretty quickly I needed a space heater.
Since I didn’t want to wait for one I’d order online, I decided to purchase one from a store near me. I did go online first to research features and prices, but then I headed over to my local Sears, since I figured they’d have a pretty extensive appliance selection.
I got to the store, head upstairs to where the space heaters are, and find the one I want. The price was a bit higher than at other stores online, but still okay. Even so, I’m a savvy shopper, and I wanted to see if Sears maybe had a price-matching policy.
So I took out my smartphone, and did the following Google search in my web browser:
“Sears price match policy”
Great, a web page with that exact phrase for the title, at the sears.com domain. So I tapped on the link to view it. But this is what I got:
“The server has not found anything matching the Request-URL. ERROR 404 Not found”
Not good. Where was the web page that Google had tantalizingly dangled in front of me?
But looking at the error page URL, I see:
Ah, sounds like a mobile URL. So the Sears web site KNOWS that I am on a mobile phone, but it can’t use that information to provide me with the appropriate experience based on the content I’m looking for and the context of me, standing in their store.
Then I went directly to “m.sears.com”, got their mobile site.
I repeated my search phrase there. But I didn’t really get anywhere there, either, just over 64 thousand results for things like jewelry. This was obviously searching their product catalog, not the site.
I even tried to go to www.sears.com, but I kept getting redirected to the mobile site. There was no way I could get to that page with the price match policy info from my phone.
Overall, not a good experience. And I’m not just talking about the mobile web site. While I did buy the space heater anyway, the entire process left me pretty grumpy.
What we have here is a failure to adapt. The Sears.com site couldn’t adapt to the combination of an incoming search query from a mobile device to a page on their main web site. They actually blocked me from getting to information they did have on their main site. I certainly hope web experiences like this do become extinct.
So, what is Adaptive Mobile Design? It’s an approach to creating web sites and applications that try to give each user the best possible content and experience, tailored to their device and browsing context. And the “try to give” part in there is pretty important, since we can never anticipate all of the factors involved.
As it turns out, this approach is nothing new. Another industry has been doing this for hundreds of years.
The ad industry is the perfect example. Display advertising, in particular, is a specific medium where within the relatively two-dimensional constraint of showing an advertising message, it adapts to the user context.
Here’s one from a classic roadside ad campaign.
Or this print ad, taking advantage of the then-novel full color printed magazine page.
Or Boston’s famous Citgo sign, where, in its pre-digital incarnation, shown here, the canvas was thousands of illuminated tubes of neon, lit up and set to animate.
The message adapts to, and sometimes even acknowledges the medium, as well as the setting. This tour bus ad, for example, is clearly meant for locals, as the tourists unwittingly become part of the ad. And the same campaign, adapted for taxicab and subway placements.
Here we’ve seen three major design considerations: canvas, capabilities and context. As applied to mobile design, Canvas is the varying display sizes and resolutions of phones, tablets and other devices. The capabilities of the device, from the processor speed to the data connection speed, also play a role. Finally, context: where the user is, what they’re doing, and their attention level.
Knowing these things, how do we apply them to the design of mobile web sites?
There are many different approaches you can take, everything from creating a separate mobile site to creating a single site to serve all devices and contexts.
Crafting a bespoke site or app is great, if you can manage it. But the fact is, it’s time- and resource-intensive. And it can be tricky figuring out how to gracefully integrate and manage a number of elements — work streams, strategy, content — across multiple sites.
It’s also a big challenge to redesign an existing site to be truly responsive. The tools and technologies are there, but to successfully implement such a site, it takes both developers and designers with intimate familiarity with all of their capabilities, limitations and differences cross-platform, -browser & -device. That’s a pretty tall order, for even the most skilled teams.
An approach that’s likely to work for a larger number of companies, especially those looking to make incremental improvements today, is to be pragmatic. Apply new technologies to your main site, where it makes sense, in order to improve the mobile experience for your users.
And these new technologies? HTML5 and CSS3. These two are just the latest versions of both HTML and CSS, used to structure and present web page content. But they are chock full of new features — too many to cover here, in fact. The following are just those most relevant to the mobile browsing experience.
First, HTML5. There are five features — four big ones, and one little one — that we’ll be looking at:
– Smart web forms, with form input UI changing based on the form field type.
– Geolocation, where the site can know your location and use that info.
– Dynamic device orientation, where the site gets motion tracking info from your phone.
– Web-native video playback, such as what Apple uses to display videos without the use of Flash on its iOS platform.
– And, semantic web markup, which is less a feature than an architectural change
Here we’ll look at smart web forms as implemented on sites viewed with the iPhone’s Safari browser. Shown is the default soft keyboard, a Qwerty one with all letters. Since space is limited, numbers and symbols requires toggling to different keyboards.
But if we go to eBay’s mobile web site, we can see one of the new input types in action.
On this page, in order to bid on this Go-Betweens record, I would tap in the field for “USD” (dollars), where I want to enter an amount.
Since the field value must be a number, eBay has specified an input type attribute value of “number” for that field. So when the soft keyboard appears, the version shown is numeric, not the default Qwerty one.
And here is what the HTML code for that would look like. Since it’s a new attribute type, it’s simply ignored in older browsers without any ill effect.
Here’s another input type, on MailChimp’s web site. When you go to sign up for an account, there’s the familiar field for inputting an email address. Tap on the email field…
…and you get the Qwerty keyboard, but slightly modified, with the “@” symbol and a period sharing space with the space bar. This way, the user can enter an email address without having to toggle back and forth between the different default keyboard states.
And here is the code for that feature.
Next geolocation. This is something that is incredibly common in mobile apps, such as Google Maps, where it detects your current location to plot a course. But this is something that web sites can do, as well. On some platforms, such as the iPhone, you’ll need to explicitly turn on the ability for the web browser to use geolocation, as it’s turned off by default.
Assuming you’ve turned this feature on, Old Navy’s mobile web site has a store locator that uses geolocation. If you tap on the Find Store button…
…you’ll first get an alert asking you if you want to let this web site know your location. If you tap on “OK”…
You’ll automatically get a list of locations nearest you, without having to enter or tap on anything additional.
The next feature is dynamic device orientation. Like geolocation, this is something that’s being used in mobile apps now, primarily for games. Web applications of this feature are still pretty few and far between, but there are some demos online showing exactly how the movement of a device in-hand can effect objects onscreen.
Here is a brief video showing me using one of these web demos on my phone.
Another, more common feature, is web-native video playback. The de facto standard for video playback on the has been Flash, which isn’t a true standard at all, but a proprietary technology owned by Adobe.
Apple’s decision not to support video playback using Flash has given HTML5 video a real boost, and largely because of that, sites like YouTube and Vimeo have been adding HTML5 video support.
Here are a couple of examples showing how iPhone and Android each handle things. On the iPhone, tapping on the “Play” icon for this particular video…
…Triggers playback using the native iPhone video player. Safari hands off the request to that app.
On Android, things work a little differently. Again, seeing the same video play icon, tapping on it…
…brings up a couple of programs from which the user can choose to play the video.
Handling video natively, each mobile platform gets to provide an experience that best meets the expectation of its users, instead of applying a one-size-fits-all approach.
Finally, semantic the new semantic tagging structure that HTML5 uses, something that should warm the hearts of information architects everywhere. Instead of faceless divs and spans that need classes and IDs to give them any meaning, the new content containers *themselves* have meaning. When we specify “nav,” “header” and “footer” in a wireframe, those elements can now be coded with “nav,” “header” and “footer” tags.
This also happens to be important for findability, as search engines are increasingly looking for structure to help apply meaning when parsing web page content. Properly structured and tagged content, especially when semantically tagged, will be more likely to be indexed properly and given greater prominence in results.
Those are the HTML5 highlights. Next…
CSS3. The story here for mobile is pretty much CSS Media Queries, whereby custom stylesheets, which determine web page layout, styling, and even content, can be served up for different screen size, page orientation and resolution.
A good example of a design that adapts to different screen sizes is the web site for northwest music festival Sasquatch. Here we see the full page layout, viewed in a web browser, close to fullscreen, on my laptop. But when viewed on my iPad…
…The images and other content scale accordingly, filling the entire screen in way that perfectly suits this browsing context. This, instead of presenting a zoomed-out view of the “full-size” web page. Or even worse, a page with the right side cut off and a dreaded horizontal scrollbar.
And on the iPhone, the smallest screen size, you can see how the design once again undergoes a transformation. The heading design is completely different, in order to fit into that small space, and no attempt is made to show the full navigation bar, which likewise wouldn’t fit.
And next to the screen is the bit of code that shows how a phone-specific stylesheet is served up via a media query that says: “use this design when this content is viewed on a screen, with a maximum device width of 480 pixels.”
Orientation is another media queries feature. Here we have two screenshots from my iPad of a web site that changes the design based on the dimensions of the browser window: blue if the window is between 400 and 1000 pixels wide, red if it’s wider than 1000 pixels. Above is the code that specifies which stylesheet to use for which orientation: landscape or portrait.
And the third feature is screen resolution. Here are three different phones, each with a different screen pixel density. The oldest phone here, the iPhone 3GS, can show 163 dots per inch. The Samsung Galaxy S has a 233 DPI display. The best picture is on the iPhone 4 — with it’s “Retina Display” it can show twice the number of pixels as the previous generation iPhone, at 326 DPI.
Why do these things matter? By targeting screen resolution, you could serve up an entirely separate set of high-quality images to users with displays capable of viewing them in all their fine-detailed glory. Otherwise images designed for a lower resolution display may not scale properly.
And the code for that media query.
Of the features mentioned today, it’s important to note that while not all are currently supported on even the most popular smartphone platforms, the majority are. You can see that iOS and Android are the two leaders in support, as they are in U.S. smartphone OS market share.
So, I know that’s a lot of information to absorb, especially in 20 minutes. But, to wrap up:
You’ll already be doing something right by considering any device, any context, any screen as part of your design process.
As you can tell, you’ll need to be working closely with developers to fully realize great mobile experiences, as there are many moving parts.
Modern smartphone browsers already have good HTML5 and CSS3 support, so you should start using these techniques now. And of course ensure your sites are build in a way that browsers without those capabilities are still able to get essential content and functionality.
Finally, while this talk has centered around mobile, adaptive design is not limited to mobile, and these ways of thinking about the fluidity of content and experience can and should be applied to web design overall.
Here are a few great resources if you want to learn more about HTML5 and CSS3. All of these sites have tons of examples, many of them interactive, so you can see these and other techniques in action. I hope you find them as inspiring as I have. Thank you.