Links and articles about technology, design, and sociology. Written by Rian van der Merwe. Follow @RianVDM
I recently delivered a new talk called Responsive Web Design in Africa: why it’s time to adapt. In this post I’d like to provide some background and extended reading about the topic.
I’ve seen a surprising amount of pushback on responsive design within the South African web community recently. The skepticism is mostly based on issues such as low smartphone share and high data costs in Africa, along with assumptions about “the mobile context” and how people supposedly have vastly different needs on mobile phones than they have on their desktops.
So, the purpose of this talk is to summarize the case for Responsive Web Design, and to argue that the reasons against using this approach in Africa don’t hold up. Smartphones and data access are exploding in Africa, so if we want to be Future Friendly, we don’t have a choice. We have to adapt.
The slides for the talk are below, although of course, some context gets lost without the voiceover. There are also embedded gifs and videos that obviously don’t play within Slideshare, so you’ll have to use your imagination on those…
I cite the source for each quote, example, and data point on the applicable slide, but I thought it would be helpful to provide a brief list of Responsive Web Design resources here for easy reference.
For those who want to dig a little deeper on the data in Africa, here’s a list of the reports and presentations I found most useful:
- GSMA’s Mobile Observatory Series, particularly the report African Mobile Observatory 2011 (PDF link)
- Insights into Mobile Telecoms in Africa by Jon Hoehler and Andrew McHenry
- The Smartphone Snapshot Showdown by Jon Hoehler and Andrew McHenry
- Key findings from the Mobile Africa 2012 report (thanks to Ethan Marcotte for this link)
- Insights into the mobile-only generation
Here’s an incomplete list of introductory articles to get you started on responsive design. These articles mainly touch on topics I bring up in the talk, like the reasons for adopting responsive design, performance issues, and RESS:
- Define :: Responsive (a demo to show people how it works)
- Responsive Web Design: What It Is and How To Use It
- Reasons for Responsive Design
- Responsive web design: the war has not yet been won (More reasons)
- Content Parity (Relates to the “Mobile is Less” myth)
- Impact of Responsive Designs (Some good data on the benefits of responsive design)
- Where to Start (How to start adjusting workflows)
- Prioritizing Performance in Responsive Design
- Conditional Loading for Responsive Designs (On progressive enhancement)
- Getting started with RESS (Server-side components to deal with lower end phones)
- Responsive Deliverables (What you can expect from your design team or agency)
If you’re looking for responsive patterns, start here:
- Brad Frost’s collection of patterns and modules for responsive designs
- Responsive navigation plugin (without library dependencies and with fast touch screen support)
- Some more patterns for dealing with navigation
- Responsive Multi-Level Menu Demos
- Alternative ways to optimize navigation across touch devices (Luke Wroblewski and Jason Weaver)
And here are some ideas for dealing with responsive images:
- Adaptive Images in HTML
- ReSRC.it (Responsive images on demand, directly from the cloud)
- A small set of CSS classnames to help keep images cropped on the focal point
- A quick intro to Icon Fonts
For more great resources on responsive design, see Jeremy Keith’s extensive list.
My goal with this talk was not to say anything groundbreakingly new about Responsive Web Design. The goal was to urge designers and developers who work in developing regions to take responsive design seriously, and at the very least consider the approach for their next projects.
If you have any questions or comments (or are interested in having me come present this talk somewhere), please get in touch.
I’d like to thank PDFpen 6 for sponsoring Elezea’s RSS Feed this week.
If you need to do anything with PDFs, you need PDFpen. Add a signature, make changes, correct a typo, fill out forms, and more. Got a scanned document? PDFpen includes OCR to convert that scan into text that you can search or edit. Want to remove sensitive info such as tax ID numbers from your PDF? Use PDFpen to redact your private data.
The latest version, PDFpen 6, has improved interface and tools. And now you can export your PDFs to Microsoft Word format for sharing or editing. See the new features in action in this video by David Sparks.
Buy PDFpen for $60 in the Mac App Store or directly from Smile. Or buy PDFpenPro for $100 and you’ll get advanced features like form creation tools and document permission settings. Download the free demo!
Benjamin Samuel dissects the humble comma in the absolutely brilliant The Comma From Which My Heart Hangs. But it’s his enraged rant against the use of apostrophes to indicate possession that really makes this a special essay:
My colleagues might argue that the apostrophe is a perfectly normal, even useful, if not vital punctuation mark. But I say that if language adapts with the times, then it is representative of society, and that if our need for awarding possession is so great as to warrant such a tawdry and sickening punctuation mark, then the apostrophe is indicative of precisely what is wrong with our society: our inability to communicate effectively, to build relationships, to share and support the goals of others—even when those goals mean working temporarily but yet quite hard in a less glamorous position as one pursues a more respectable appointment among his true colleagues.
I don’t personally have a gripe with the apostrophe, but his passion will definitely make me more wary of our obsession with owning things. Good writing often has that effect — it forces us to look at old things in new ways.
I liked Meng To’s Simplifying For The Wrong Reasons, but there’s one part that perpetuates one of the most enduring myths in user experience design:
The best user experience reduces the amount of clicks to as few as possible.
No one’s going to argue that we should add superfluous clicks in interfaces. But making “as few clicks as possible” an optimization goal is how interfaces become bloated and crammed with cruft. As Lukas Mathis points out in his explanation of the psychological behavior called “satisficing”:
A great user interface is not one where each goal can be reached with the smallest number of clicks possible, or where the user has to pick from only a small number of choices at each step, but one where each individual click is as obvious as possible. […] As long as users feel that they are getting closer to their goal with each step, they don’t mind drilling down into a deep hierarchy.
Josh Clark also addresses the myth that extra taps and clicks are evil in an interview with Forbes:
In mobile, tap quality is far more important than tap quantity. As long as each tap delivers satisfaction, extra taps are good. Taps invite conversation—give and take—that you can get at and explore. Building meaningful click sequences are a form of progressive disclosure that helps you uncomplicate complexity.
So, let’s get away from this idea that we should optimize for the fewest number of clicks and taps. Instead, we should optimize for an information architecture and visual hierarchy that makes the next step as obvious as possible. Joshua Porter summarizes this approach nicely:
Almost every screen we design can be improved by really focusing on the steps and sequences of steps a user goes through. In our haste we often speed up the process too much, get steps out of order, fail to present an appropriate next step, or otherwise break the sequence. By re-assessing your app or site in light of these potential errors, you can discover the sequence and timing that your users need to successfully make it to the next step.
Take the time to do things right — a shortcut will end up costing much more time in the long run as things come crashing to the ground.
Also, optimize for the long run. Constantly aiming for the short term, particularly in the frantic and ever-changing startup world (hoping to build a lot of hype, raise a lot of money, and get acquired in two years), tends to encourage the taking of illusory shortcuts which have the fate of failure stamped on them from the very outset.
This follows hot on the heels of something Louis C.K. said in an excellent interview:
There’s people that say: “It’s not fair. You have all that stuff.” I wasn’t born with it. It was a horrible process to get to this. It took me my whole life. If you’re new at this — and by “new at it,” I mean 15 years in, or even 20 — you’re just starting to get traction. Young musicians believe they should be able to throw a band together and be famous, and anything that’s in their way is unfair and evil. What are you, in your 20s, you picked up a guitar? Give it a minute.
So I’m learning to stop complaining, do the necessary hard work, and just give it a minute.
(“No shortcuts” link via @mobivangelist)
I know very little about Bitcoin, and I’m almost too afraid too dive into the rabbit hole, but I did enjoy Scott Smith’s Bitcoin is just the poster currency for a growing movement of alternative tender. Instead of the usual discussions around its mechanics, Scott focuses on the reasons for the rise in alternative currencies in general, linking it to globalization and the rise of “formal-informal” markets. He also discusses why Bitcoin itself could be doomed already:
“Most of the action I see is around software development—people getting excited by local currency platforms, or virtual currencies,” wrote [Ken Banks, founder of a global initiative to promote economic self-sufficiency Means of Exchange]. “The problem here is that these are generally being run by techies, and we need to lead with the problem we’re trying to solve, not a cool technology. Most of the software being developed is unusable unless you have a degree in computing, or a server that costs about the same as a small car, and is hard to understand.”
You know what’s coming, right? Yep — this applies not just to Bitcoin, but to all product development. If you lead with technology instead of the problem you’re trying to solve, the resulting product will almost always be too complicated. It reminds me of a great line in the USA Today story Berlin airport fiasco an embarrassment for Germans:
Here, again, technology’s getting in the way: It’s so advanced that technicians can’t figure out what’s wrong with it.
So advanced that no one can figure out what’s wrong with it… Perhaps that’s the problem with Bitcoin, too?
Back in 2009, whenever an overly enthusiastic Foursquare user managed to capture the attention of an unsuspecting potential victim long enough to try to convince them to download the app, the conversation went something like this:
“It’s really cool. See? You ‘check in’ to the cafés and restaurants you visit.”
“Because if you check in enough times, you become the mayor of that place.”
“Because being the mayor is cool!”
“You keep using that word. I don’t think it means what you think it means. I think the word you’re looking for is lame.”
The discussion would usually dampen the Foursquare user’s enthusiasm a little bit, but only for a day or two. Then they’d be at it again, continuing their quest to spread the word about a service they don’t quite understand, but can’t help but be excited about.
Yesterday, Foursquare 6.0 was released for iOS and Android. And it continues a slow, steady move away from a focus on the ‘check-in’ to a way to discover great places to explore. If you squint and look at Foursquare just right, you’ll realize that they are becoming what Path wants to be: a social network for close friends and family.
The new Foursquare home screen continues the trend to reduce the hierarchy of the check-in action in favor of telling you what’s happening in your network, and what places you might like to visit (see left side of the screen below). A tap inside the (much more prominent) search bar brings up the interface to show recommended places to visit within a specified category (see right side of screen below).
See, what Foursquare realized a while ago is that their real power is not in the mayorships and badges that defined them in 2009. The real power — as usual — is the data. It’s knowing what people like and don’t like. It’s knowing where to find good coffee, what restaurants to avoid, and where you should go when you’re in a new city. And they have been shifting towards that vision with steadfast tenacity. Dan Frommer discussed this when Foursquare 5.0 was launched in June 2012:
So: Foursquare has been evolving to a company that no longer simply answers “where are my friends?” but instead “where should I go right now?” This is smart: Everyone’s gotta eat. That’s why Explore is rapidly becoming Foursquare’s most important feature. This has always been part of the plan, I think. But it’s certainly carrying more emphasis in this new version of the app than ever before.
With Foursquare 6.0, the company’s move towards a discovery engine powered by people you like and trust appears to be almost complete. That said, it’s clear that they’re not done (watch out, Path). I’m sure they are thinking of more ways to make the experience better. So even though there are some design irregularities in version 6.0, those will be ironed out through constant iteration while they’re moving towards a clear vision for the future. Like Anil Dash said at the beginning of 2012 in Foursquare: Today’s best-executing startup:
Foursquare’s removed features from the core app a few times, constantly changes the design of its flagship iOS application, and in general asserts its authority over the experience that users have within the Foursquare application. Yet, unlike every single other major social application, they don’t inspire mass user revolts or negative press every time they iterate. […] Part of this is the small, well-paced timing of iteration on the application where there are always small things changing in ways that aren’t wildly disruptive, but do enough to set a tone that users know to expect the furniture might get rearranged once in a while.
So, with all of that said… If you’ve tried Foursquare before and found it lame, I think you should give it another go. It’s not lame any more. Any service that can help you avoid bad coffee makes the world a better place, right? Foursquare is such a service, and so much more.
Oh, one more thing. Posting your Foursquare check-ins to Facebook and Twitter? Still lame.
Chris Ferdinandi wrote a good summary of the responsive site vs. separate mobile site debate in Content Parity on the Web:
The gentleman I was chatting with mentioned that for mobile users, he intended to share about 50 percent less content and reduce the steps in their checkout process to make it more efficient. I think that’s a great idea, but I don’t think it should be limited to the mobile site.
If 50 percent less information is the right amount of information people need to complete their tasks, then you should only provide that 50 percent on all devices. And if visitors on laptops could use that additional information, why wouldn’t someone on a smaller screen want access to it, too?
Whenever I chat to people about Responsive Web Design, there are always arguments about how users want different information on mobile devices than on desktops. This usually plays into the myth of mobile context, but in some cases, there are legitimately different use cases. In those cases I press on to argue that separate use cases are not proof that you need a separate mobile site, but proof that your Information Architecture needs some additional work to make the right information easily accessible regardless of the device being used.
But we’re still figuring this out, of course — no one has all the answers. Just reading through some of Luke Wroblewski’s notes from BD Conf got my head spinning again. So anyway, if you’re in Cape Town next Thursday and want to argue with me about this stuff in person, I’m doing a talk called Responsive Web Design in Africa — Why it’s time to adapt at the next SPIN gathering. It should be fun.
Thanks very much to Instatim for sponsoring Elezea’s RSS Feed this week.
Instatim is a more personal social network that helps you stay in touch with your closest friends, family and co-workers. Engineered for privacy, Instatim is unlike other social networks because we do not store information about our users’ past activities and locations. Your status is shared securely and only to people you have chosen.
Here’s what you can do with Instatim:
- Status Updates: Keep in touch by posting status updates about what you’re doing (walking the dog, meeting a client, etc.) and reading your friends’ statuses.
- Expiration Dates: Set an expiration for your status so your family knows how long you will be engaged in the activity.
- Groups: Sort contacts into different groups. Share statuses with specific groups to keep the right people in the right loop.
- Location: You can choose to include your location with your status so your friends and family know your whereabouts.
One of the most interesting analyses I’ve read about Facebook’s ad business and the future of the company is Kurt Eichenwald’s Facebook Leans In. This Marc Andreessen quote stood out immediately as core to a proper understanding of how Facebook works:
None of the people close to Mark and the company think of Facebook as a Web site. They think of it as a data set, a feedback loop.
Kurt does a stellar job of piecing together information from different sources to tell a compelling story:
The Facebook of old—well, of a year ago—is almost irrelevant to the company that exists today, which not only is set to change the world of social networking, but could herald the biggest transformation in American advertising since the advent of television.
That is my conclusion from months of interviews with Facebook ad clients, investors, the company’s senior management and other key executives, as well as reviews of reams of data, including confidential reports. What emerges is a portrait of a widely misunderstood company that has quietly been pioneering a marketing business model unlike any other in Silicon Valley—or, for that matter, Madison Avenue.
It’s a long article, but if you’re at all interested in how Facebook is redefining the ad business, it’s a must-read.
(link via @kbaxter)