Massively Mobile Progressive Enhancement | Is Your Site Future-Friendly? | Brad Frost & Stephanie Rieger in A List Apart

ISSUE NO. 346 of A List Apart for people who make websites is all about massively mobile progressive enhancement. Are your site’s content and design future friendly?

For a Future-Friendly Web

by BRAD FROST

It is time to move toward a future-friendly web. Our current device landscape is a plethora of desktops, laptops, netbooks, tablets, feature phones, smartphones, and more, but this is just the beginning. The rapid pace of technological change is accelerating, and our current processes, standards, and infrastructure are quickly reaching their breaking points. How can we deal with increasing device diversity and decreasing attention spans? Brad Frost of futurefriend.ly explains how, while this era of ubiquitous connectivity creates new challenges, it also creates tremendous opportunities to reach people wherever they may be.

The Best Browser is the One You Have with You

by STEPHANIE RIEGER

The web as we know and build it has primarily been accessed from the desktop. That is about to change. The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web—and its users—will be mostly mobile. Even designers who embrace this change can find it confusing. One problem is that we still consider the mobile web a separate thing. Stephanie Rieger of futurefriend.ly and the W3C presents principles to understand and design for a new normal, in which users are channel agnostic, devices are plentiful, standards are fleeting, mobile use doesn’t necessarily mean “hide the desktop version,” and every byte counts.


Illustration by Kevin Cornell for A List Apart

A List Apart No. 345: Responsive content: thinking beyond pages; from research to content strategy to meaningful project deliverables.

IN ISSUE NO. 345 of A List Apart, for people who make websites:

Future-Ready Content

by SARA WACHTER-BOETTCHER

The future is flexible, and we’re bending with it. From responsive web design to futurefriend.ly thinking, we’re moving quickly toward a web that’s more fluid, less fixed, and more easily accessed on a multitude of devices. As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional web page to flow as needed through varied displays and contexts. Most conversations about structured content dive headfirst into the technical bits: XML, DITA, microdata, RDF. But structure isn’t just about metadata and markup; it’s what that metadata and markup mean. Sara Wachter-Boettcher shares a framework for making smart decisions about our content’s structure.

Audiences, Outcomes, and Determining User Needs

by COREY VILHAUER

Every website needs an audience. And every audience needs a goal. Advocating for end-user needs is the very foundation of the user experience disciplines. We make websites for real people. Those real people are able to do real things. But how do we get to really know our audience and find out what these mystery users really want from our sites and applications? Learn to ensure that every piece of content on your site relates back to a specific, desired outcome — one that achieves business goals by serving the end user. Corey Vilhauer explains the threads that bind UX research to content strategy and project deliverables that deliver.


Illustration by Kevin Cornell for A List Apart

A better Photoshop grid for responsive web design

IN MAKING the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).”

“Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!”

A better Photoshop grid for responsive web design » Blog » Elliot Jay Stocks.

Fluid grids, orientation & resolution independence

IF YOU’VE spent any time building responsive websites with fluid grids, you will have encountered the shock of seeing your beautiful portrait layout distort when viewed in landscape mode (or vice-versa.)

This happens because whilst the layout and embedded content (images, video etc) are sized in relation to the pixel width of the viewport, the typography is not. And whilst it isn’t too difficult to design with enough affordance for the variation caused by the iPad’s 4:3 aspect ratio – most (if not all) Android tablets have 16:9 displays. These screens make the orientation difference even more pronounced.

Responsive News – Fluid grids, orientation & resolution independence.

A List Apart: Responsive Images: How they Almost Worked and What We Need

RESPONSIVE WEB DESIGNERS, don’t miss Mat Marquis’ essential article in today’s A LIST APART, for people who make websites: Responsive Images: How they Almost Worked and What We Need. Mat shows why responsive images as we currently use them don’t quite cut it – and shares a way forward that involves the creation of a shiny new HTML element.


Illustration by Kevin Cornell for A List Apart Magazine.

State of the web: of apps, devices, and breakpoints

IN The ‘trouble’ with Android, Stephanie Rieger points out the ludicrous number of Android screen sizes on a typical UK client’s website and comes to this conclusion:

If … you have built your mobile site using fixed widths (believing that you’ve designed to suit the most ‘popular’ screen size), or are planning to serve specific sites to specific devices based on detection of screen size, Android’s settings should serve to reconfirm how counterproductive a practice this can be. Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices. Alternatively, attempting to track, calculate, and adjust layout dimensions dynamically to suit user-configured settings or serendipitous conditions is just asking for trouble.

I urge you to read the entire article—it’s brief yet filled with rich chocolatey goodness.

Responding to it, Marc Drummond concludes that responsive web design default breakpoints are dead and urges designers to “use awkwardness as your guideline, not ephemeral default device widths” and return to fluid design. (I believe he may actually be thinking of liquid layout—the kind we practiced back in the early mid-1990s when cross-platform and multi-manufacturer desktop screen sizes and pixel-per-inch ratios—not to mention strong user font, size, and color preference options—made fixed-width layout design challenging if not impossible. As I understand fluid design, it is merely another word for responsive design, in that it relies on CSS3 media queries set to breakpoints.)

We’ve lost our compass

Rieger and Drummond are hardly alone in feeling that “our existing standards, workflows, and infrastructure” cannot support “today’s incredibly exciting yet overwhelming world of connected digital devices” (futurefriend.ly) and that something new must be done to move the web forward. And of course ppk has been warning us about the multiplicity of platforms and viewports on mobile since 2009.

Agreed: that is an exciting and challenging time; that fixed width layouts do not address, and adaptive layouts (multiple fixed-width layouts set to common breakpoints) do not go far enough in addressing, the challenges posed by our current plethora of mobile screen sizes, zoom settings, embedded views (i.e. “browser” windows inside app windows, often with additional chrome) and what Rieger calls “the unintended consequences” that occur as these various settings clash in ways their creators could not have anticipated.

As consumers, we’ve all had the experience of seeing the wrong layout at the wrong time. (Think of a site with both mobile and desktop versions—whether these versions are triggered by CSS3 media queries or JavaScript and back-end magic is beside the point because technology is beside the point—good user experience is all this is supposed to be about. On a Twitter app on a mobile device, the user follows a link; the link opens in the browser built into the Twitter app. Which version of the site does the user see? The mobile one or the desktop? Often it is the desktop, and that can be a problem if the app’s version of the browser does not permit zoom. Even if it is a mobile version, it may be the wrong mobile version, or it may not fit comfortably inside the app’s browser window.) Considering our own experiences and reviewing Rieger’s chart, it is easy to share Drummond’s conclusion that breakpoints are dead and that all sites should be designed as minimally as possible.

If breakpoints are dead, responsive design is dead

Of course, if breakpoints are dead, responsive design is dead, because responsive design relies on breakpoints both in creative workflow and as a key to establishing user-need-and-context-based master layouts, i.e. a minimal layout for the user with a tiny screen and not much bandwidth, a more fleshed-out one for the netbook user, and so on.

But responsive design is not dead; it has only begun. It is not a panacea but was never intended to be. It is simply the beginnings of an approach.

I respect those colleagues who say breakpoints are dead, understand how they reached this conclusion, and am eager to see where it takes them in the coming months as they experiment with new methods, perhaps developing wonderful and unforeseen best practices. I hope design will be a brilliant part of these new methods, not something that gets abandoned to create a bland but workable lightweight experience for all.

But I also believe it is possible to draw a different conclusion from the same data. It is even possible, I believe, to say the present data doesn’t matter—at least not in the long run.

Tale of the chart

There was a time in the late 1990s when industrious web designers showed how atrocious CSS support was in browsers. Eric Meyer’s Master Compatability Chart for Web Review, formerly at http://www.webreview.com/pub/wr/style/mastergrid.html, was one of the best, but is no longer available for your historical viewing pleasure—not even at the mighty Wayback Machine. That’s too bad, as it would have perfectly illustrated my point. The chart used a variety of colors to show how each detail of the entire CSS specification was or was not supported (and if supported, whether it was supported correctly and completely, partially and correctly, partially and somewhat incorrectly, or completely incorrectly) in every browser which was available at the time, including, if memory serves, close to a dozen versions of Netscape, Explorer, and Opera.

Looking at that chart induced nausea and vertigo. It was easy to draw the conclusion that CSS wasn’t ready for primetime. (That was the correct conclusion at the time.) It was also easy to look at the table and decide that table layouts and font tags were the way to go.

That’s what most designers who even bothered looking at Eric’s chart decided, but a few (Eric and me included) drew a completely other inference. Instead of trying to memorize all the things that could go wrong in each browser, we created general rules for what worked across all browsers (e.g. font-size in px, floats for layout) and advocated design based on the things that work. This, I believe, is exactly what the futurefriend.ly and Move the Web Forward folks are doing now: trying to figure out commonalities instead of bogging down in details. (This is why some in our community have labeled futurefriend.ly and Move the Web Forward “WaSP II.”)

The other inference Eric, I, and others in the 1990s drew from Eric’s chart was that browser makers must be petitioned to support CSS accurately and correctly. We and many of you reading this engaged in said petitioning, and thanks largely to help from with the browser engineering community (from people like Tantek Çelik and Chris Wilson and organizations like Mozilla) it came to pass.

Of mice and markets

We cannot, of course, petition all the makers of, say, Android devices to agree to a set of standard breakpoints, because there are over 500 different Android devices out there, many of which will fail in the coming months—or if not outright fail, simply be replaced in the course of planned obsolescence AKA upgrading that drives the hardware segment. And each new product will in turn introduce new incompatibilities (AKA “features”).

In the short run it’s going to be hell, just as the browser wars and their lack of support for common standards were hell. But it is the short run.

500 standards is no standard. Give a consumer 500 choices and the price-driven consumer picks what comes with her plan, while the selective consumer begins gravitating toward a handful of emerging market leaders. Eventually this nutty market will stabilize around a few winning Android platforms (e.g. Kindle Fire) and common breakpoints will emerge. What The Web Standards Project achieved with browser makers, the market will achieve with phones.

Until that time, designers certain can abandon breakpoints if they can find a way to do good design under purely fluid conditions—design that pleases the user, satisfies the client, and moves the industry forward aesthetically. But designers who persist in responsive or even adaptive design based on iPhone, iPad, and leading Android breakpoints will help accelerate the settling out of the market and its resolution toward a semi-standard set of viewports. This I believe.

When I see fragmentation, I remind myself that it is unsustainable by its very nature, and that standards always emerge, whether through community action, market struggle, or some combination of the two. This is a frustrating time to be a web designer, but it’s also the most exciting time in ten years. We are on the edge of something very new. Some of us will get there via all new thinking, and others through a combination of new and classic approaches. Happy New Year, web designers!

Required Reading. Multi-Device Web Design: An Evolution

LUKE WROBLEWSKI: As mobile devices have continued to evolve and spread, so has the process of designing and developing Web sites and services that work across a diverse range of devices. From responsive Web design to future friendly thinking, here’s how I’ve seen things evolve over the past year and a half: LukeW | Multi-Device Web Design: An Evolution.

It’s beginning to feel a lot like Christmas: An Event Apart San Francisco, Palace Hotel, Dec. 12-14

HERE I AM at the Palace on Market Street for another thrilling installment of An Event Apart.

An Event Apart San Francisco features twelve great speakers and sessions. Following the two-day conference comes an intense learning session on Mobile Web Design led by Luke Wroblewski (author, Web Form Design).

Starting Monday, December 12, 2011, follow the live Twitter stream on A FEED APART, the official feed aggregator for An Event Apart.

Hum along to the interstitial AEA Playlist on Last.fm or Rdio.

Stay in the loop! Follow An Event Apart on Twitter or Facebook, or subscribe to our mailing list.

.net Magazine’s Top 25 Web Design Books

CONGRATULATIONS TO A List Apart technical editors Aaron Gustafson and Ethan Marcotte, whose Adaptive Web Design and Responsive Web Design were ranked #1 and #2 in .net Magazine’s “Top 25 Books for Web Designers and Developers” of 2011.

Other top-ranked web design books include CSS3 for Web Designers by Dan Cederholm, Designing for the Digital Age by Kim Goodwin, and Don’t Make Me Think by Steve Krug.

Four of the top 25 were A Book Apart books: namely, Responsive Web Design, CSS3 for Web Designers, Mobile First by Luke Wroblewski, and The Elements of Content Strategy by Erin Kissane.

I contributed to the article but did not nominate any A Book Apart books.

Congratulations to these authors!

The top 25 books for web designers and developers | Feature | .net magazine.

Meet the 10K Apart Winners

ANNOUNCING THE WINNERS of the second annual 10K Apart contest (“Inspire the web with just 10K”) presented by MIX Online and An Event Apart.

Responsive apps under 10K

Last year’s 10K Apart challenged readers to create the best application they could using no more than 10K of images, scripts, and markup. We wanted to see what you could do with HTML5, CSS3, and web fonts, and you blew us away.

For this year’s contest, we asked you to step up your game by not only awing us with brilliant (and brilliantly designed) apps built using less than 10K of web standards and imagery, but we also insisted you make those awesome apps fully responsive.

(If you found this page by accident, responsive design accommodates today’s dizzying array of notebooks, tablets, smartphones, laptops, and big-screen desktops—and anticipates tomorrow’s—via fluid design experiences that squash and stretch and swell and shrink and always look like ladies. Ethan Marcotte pioneered this design approach, which takes standards-based progressive enhancement to the next level, and which achieves its magic via fluid grids, flexible images, and media queries. But I digress.)

We worried. Oh, how we worried.

We worried that demanding responsive design on top of our already tough list of requirements would kill the contest. That it was just too hard. Maybe even impossible. Silly us.

Once again, you overwhelmed us with your out-of-the-box creativity, dazzling technical chops, and inspiring can-do spirit. During the few weeks of our call for entries, people and teams from 36 countries produced 128 astonishingly excellent apps. With that many great entries, judging was a beast! Fortunately we had excellent help. But enough about us. On to the winners!

Grand Prize Winner

The mysteriously named L&L has won the 10K Apart Grand Prize for Bytes Jack, an HTML Blackjack game that is totally fun to play—unless you have a problem with gambling, in which case, try one of the fantastic runners-up: Space Mahjong by Toby Yun and Kyoungwoo Ham (Best Technical Achievement); Sproutable, by Kevin Thompson (Best Design); or PHRASE: Make Lovely Circular Patterns Based on Text Phrases (People’s Choice), by Andy Gott.

L&L will receive a paid pass to any An Event Apart conference event, a $3000 Visa Gift Card, and copies of Ethan Marcotte’s Responsive Web Design and Aaron Gustafson’s Adaptive Web Design.

In addition to these four winners, there are twelve honorable mentions that will delight any visitor—and astonish any web designer-developer who tries to figure out how these wizards worked their magic in under 10K. See all the winners or view the entire gallery and decide whom you would have awarded best in show.

P.S. We love you

An Event Apart thanks our hard-working, insanely inspired friends at Mix Online.

The 10K Apart hearkens back to Stewart Butterfield’s 5k Contest of yesteryear. Back then, Stewart challenged web designer-developers to create something magical using less than 5K of code and images—and the community responded with a flowering of creativity and awesome proto-web-apps. Stewart, we salute you!