A website is not a magazine, though it might have magazine-like articles. A website is not an application, although you might use it to purchase products or interact with other people. A website is not a database, although it might be driven by one.
Sunday, July 8th, 2018
Tuesday, June 12th, 2018
This is really good breakdown of what’s different about CSS (compared to other languages).
These differences may feel foreign, but it’s these differences that make CSS so powerful. And it’s my suspicion that developers who embrace these things, and have fully internalized them, tend to be far more proficient in CSS.
Friday, March 24th, 2017
If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.
Saturday, April 13th, 2013
A couple of years ago, the benefits of separate sites were more clear to me. Today, I can’t think of a good reason to maintain a separate mobile site.
Saturday, February 23rd, 2013
A great meaty piece from Cennydd, diving deep into the tricky question of context.
Friday, July 13th, 2012
We’ll tell you what you really want: Mobile context, top tasks, and organization-centric thinking | Sara Wachter-Boettcher, Content Strategist
An excellent follow-up to the recent posts on the myth of mobile context.
You often hear about cutting content to cut clutter. I support this—if you’re cutting the clutter from everywhere, not just a mobile experience.
Maybe the answer isn’t cutting. Maybe it’s learning better skills for designing and structuring complex information to be usable and enjoyable in small spaces.
Tuesday, July 10th, 2012
Yes, yes, yes! Karen drives home the difference between mobile and local (and there’s more about the myth of the mobile context).
If you’re making an argument for delivering different content to mobile users, or prioritizing content differently based on their context of use, stop for a minute and ask yourself if you mean local content. And if you do mean local content, then say that. Claiming that your travel example extends to cover the “mobile use case” leaves out millions of tasks and users.
Just to belabor this point: people use mobile devices in every location, in every context. Just because you know what type of device someone is using or where she is doesn’t tell you anything about her intention.
A really great article from Stephen on how we are mistakenly making assumptions about what users want. He means it, man!
Sunday, February 26th, 2012
Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.
Wednesday, November 2nd, 2011
This is article is mostly a decent round-up of development approaches to mobile but the summary lets it down by assuming that desktop users couldn’t possibly want the same functionality as mobile users — in my opinion, inferring people’s desires based purely on their device is extremely dangerous and downright patronising.
Friday, May 27th, 2011
Susan’s comprehensive notes from the roundtable discussion about the mythical mobile user.
Thursday, May 19th, 2011
Yes! Luke nails the fallacy of the mythical mobile user. Instead of trying to mind-read intent, play to the strengths of mobile devices instead.
Another great post from Susan. Not only are we making unwarranted assumptions about what the mythical mobile user wants, we’re basing those assumptions on the worst possible user base: ourselves.
Monday, May 16th, 2011
Susan pushes back on the notion of the mythical mobile user.
Wednesday, April 27th, 2011
- A “small screen” user is not necessarily a mobile user.
- A “small screen” device is not necessarily a mobile one.
See also: bandwidth.
Tuesday, April 12th, 2011
Aaaaaand once again, the Riegers show us the way. This time it’s Stephanie’s presentation at Breaking Development in Dallas. Bloody brilliant.
Tuesday, April 5th, 2011
The Riegers are like emissaries from Planet Smart and we mere mortals are fortunate that they take the time to give us great articles like this.
Monday, March 28th, 2011
Jason Grigsby pulls together a bunch of links related to responsive design, mobile web and that tricky context problem.
Sunday, March 27th, 2011
When I say…
we need to think about publishing content that people want while adapting the display of that content according to the abilities of the person’s device.
…I do not mean we need to adjust the layout of existing desktop sites for other devices. Quite the opposite. I mean we need to stop building desktop-specific sites.
I think there’s a misconception that responsive web design is a “get out of jail free” card: instead of designing for different devices, all you have to do is reflow your existing pages so that they fit fine on any screen, right?
If you have a desktop-specific site—and, let’s face it, that covers over 90% of the web—the first step is to replace it with a device-agnostic site. Not mobile-specific, not desktop-specific, not tablet-specific, but centred instead around the person visiting the site and the content that they want.
That’s what I meant when I said:
Most of the time, creating a separate mobile website is simply a cop-out.
It’s an acknowledgement that the existing desktop-specific site is too bloated and crufty.
Luke’s idea of Mobile First is a good thought exercise to start designing from the content out, but the name is a little misleading. It could just as easily be Print First or Any-Device-Other-Than-The-Desktop First.
Here’s what I’m getting at: we act as though mobile is a new problem, and that designing for older devices—like desktop and laptop computers—is a solved problem. I’m saying that the way we’ve been designing for the desktop is fundamentally flawed. Yes, mobile is a whole new domain, but what it really does is show just how bad our problem-solving has been up ‘till now.
I swear there’s some kind of quantum entanglement going on between Ethan’s brain and mine. Demonstrating spooky action at a distance, just as I was jotting down my half-assed caveat related to responsive design, he publishes a sharp and erudite explanation of what responsive design is and isn’t attempting to do. He uses fancy learnin’ words and everything:
When I’m speaking or writing about responsive design, I try to underline something with great, big, Sharpie-esque strokes: responsive design is not about “designing for mobile.” But it’s not about “designing for the desktop,” either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web. Fluid grids, flexible images, and media queries are the tools we use to get a bit closer to that somewhat abstract-sounding philosophy. And honestly, a more unified, less fragmented approach resonates with my understanding of the web on a fairly profound level.
Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back.
Start designing from the content out, rather than the canvas in.
Both Ethan and Mark are writing books. I can’t wait to get my hands on them.
In the meantime, I wanted to take an opportunity to clear up some misunderstandings I keep seeing coming up again and again in relation to responsive web design. So put the kettle on and make a nice cup of tea while I try to gather my thoughts into some kind of coherence.
Breaking it down
To paraphrase Donald Rumsfeld, web design is filled with quite a few known unknowns. Here are three of them:
- Viewport: the dimensions of the browser that a person uses to access your content.
- Bandwidth: the speed of the network connection that a person uses to access your content.
- Context: the environment from which a person accesses your content.
With the proliferation of mobile devices, tablets and every other kind of browsing device imaginable, there’s a high number of possible viewport sizes. But here’s the thing: that’s always been the case.
For over a decade, we have pretended that there’s a mythical perfect size that every person will be using. To start, that size was 640x480, then it was 800x600, then 1024x768 …but this magical ideal dimension was always a phantom. People have always been visiting our websites with browsers open to varying dimensions of width and height—the rise of “mobile” has simply thrown that fact into sharp relief.
The increasing proliferation of different-sized devices and browsers means that we can no longer cling to the consensual hallucination of the “ideal” viewport size.
Fortunately this is a solved problem. Liquid layouts were a good first step. Once you add media queries into the mix it’s possible to successfully deal with a wide range of viewport sizes.
Simply put, responsive web design solves the viewport question.
But that’s just one of three issues.
The Filament Group are experimenting with responsive images and I hope to see a lot more experimentation in this area. But when it comes to serving up different-sized media to different people, we are forced to make an assumption. The assumption is that a small viewport equates to narrow bandwidth.
‘Tain’t necessarily so. If I’m using my iPod Touch I’m surfing with a fairly small screen but I’m not doing it over 3G or Edge—same goes for anyone idly browsing on the iPhone or iPad on their work or home connection.
Likewise, just because I’m using my laptop doesn’t mean I’m connected with a fat pipe. When I took the train from Seattle to Portland there was WiFi available …of a sort. And many’s the hotel connection that pushes the boundaries of advertising itself as “high speed.”
Once again, the “solution” to this problem for the past decade has been to ignore it. Just as with viewport size, we engage in a consensual hallucination of ideal bandwidth. Just as with viewport size, the proliferation of new devices is highlighting a problem that was always there. Unlike viewport size, the bandwidth issue is a much tougher nut to crack.
Responsive web design doesn’t directly solve the bandwidth question. I suspect that the solutions will involve a mixture of server-side and client-side trickery, most likely involving clever lazy loading for nice-to-have content. I’ll be keeping an eye on the work of Steve Souders.
In the meantime, the best we can do is stop assuming a best-case scenario for bandwidth.
You don’t know what a person is doing when they visit your website. It’s possible to figure out what viewport size they are accessing your content with and it might even be possible to figure out how fast their network connection is but short of clairvoyance, there’s no way of knowing whether someone is in a hurry or looking to spend some time hanging out on your site.
Once again, this has always been the case. Once again, we have up ‘till now ignored the problem by pretending the person visiting our website—the same person with the perfect viewport size and the fast internet connection—doesn’t mind being served up dollops and dollops of so-called “content”, very little of which is directly relevant to them.
The rise of services like Readability and Safari’s Reader mode demonstrate that the overabundance of page cruft is being interpreted as damage and routed around.
The context problem—figuring out what a person is doing at the moment they visit a site—is really, really hard.
Responsive web design does not solve the context problem. It doesn’t even attempt to. The context problem is a very different issue to the viewport problem—which responsive web design does solve. As Mark put it:
It’s making sure your layout doesn’t look crap on diff. sized screens. Nothing more.
anyone that claims “responsive design” as a best practice clearly has never actually tried to support multiple contexts or devices.
Those are two different issues: contexts and devices. The device issue breaks down into viewport size and bandwidth. Responsive design is certainly a best practice when tackling the viewport issue. But Brian’s right: responsive design does not solve the problem of different contexts. Nor did it ever claim to.
The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.
If responsive design were being sold as a solution to the context problem, I too would be annoyed. But that’s not the case.
The mythical mobile context
As with the viewport issue and the bandwidth issue, the context issue—which has always been there—is now at the fore with the rise of mobile devices. As well as trying to figure out what a person wants when they visit a website, we now have to think about where they are, where they are going and where they have just been.
This is by far the toughest problem.
Bizarrely, this is the very known unknown that I see addressed as though it were solved. “Someone visits your site with a mobile device therefore they are in a rush, walking down the street, hurriedly trying to find your phone number!”
The data does not support this. All those people with mobile devices sitting on a train or sitting in a cafe or lounging on the sofa at home; they are all in a very different context to the imaginary persona of the mobile user rushing hither and thither.
We have once again created a consensual hallucination. Just as we generated a mythical desktop user with the perfect viewport size, a fast connection and an infinite supply of attention, we have now generated a mythical mobile user who has a single goal and no attention span.
More and more people are using mobile devices as a primary means of accessing the web. The number is already huge and it’s increasing every day. I don’t think they’re all using their devices just to look up the opening times of restaurants. They are looking for the same breadth and richness of experience that they’ve come to expect from the web on other devices.
Hence the frustration with mobile-optimised sites that remove content that’s available on the desktop-optimised version.
Rather than creating one site for an imaginary desktop user and another for an imaginary mobile user, we need to think about publishing content that people want while adapting the display of that content according to the abilities of the person’s device. That’s why I’m in favour of universal design and the One Web approach.
That’s also why responsive web design can be such a powerful tool. But make no mistake: responsive web design is there to help solve the viewport problem, not the context problem.