UX How-To with Luke Wroblewski - YouTube
A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.
Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.
A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.
Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.
A concise case study from gov.uk:
Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.
John echoes some of my recent thinking about what qualifies as a web browser and, by extension, what qualifies as the web:
We shouldn’t think of “the web” as only what renders in web browsers. We should think of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.
That said, I think he is perhaps underestimating the power of URLs. Addressability—particularly over an extended time period—remains the powerful feature of the web.
A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.
This is a really great idea—a portable open device lab. It’s UK-based and you can hire it out for a few days at a time.
A great write-up of the design process behind The Guardian’s responsive site. It’s really gratifying to see UX designers talking about performance.
I think Chrome is doing the right thing by removing the 300 millisecond tap delay on sites that set width=device-width — it’s certainly better than only doing it on sites that set user-scalable=no, which felt like rewarding bad behaviour.
Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
The case may be a little overstated, but I agree with the sentiment of this. The web is always playing catch-up to something. For a while, it was Flash; now it’s native.
Flash was a great stopgap measure. But it outlived its usefulness and has been reduced to niche status.
Today, we’re seeing the nearly exact same scenario with native apps on mobile devices.
Native mobile apps are a temporary solution. We’re just over 4 years into the Appstore era and this has already become apparent. Open web technologies are catching up to the point that the vast majority of web apps no longer need a native counterpart.
A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.
I heartily concur with Lyza’s mini-manifesto:
I think we need to try to do as little as possible when we build the future web …putting commonality first, approaching differentiation carefully.
It’s always surprised me how quickly developers will reach for complex, potentially over-engineered solutions, when—in my experience—that approach invariably creates more problems than it solves.
Simplicity is powerful.
Scott gives us an excellent State Of The Web address, looking at how the web can be central to the coming age of ubiquitous computing. He rightly skips through the imitation of native apps and gets down to the potential of just-in-time interactions.
Preach it, Karen!
“Why would someone ever want to do that?” is the wrong question. It doesn’t matter why they want to do it. The fact is that people do. The right question, the one that we all should be asking, is “how can we make a better experience for them?”
A look at the degree of diversity in Android devices, complete with pretty pictures. The term “fragmentation” is usually used in a negative way, but there are great points here about the positive effects for web developers and customers.
You say fragmentation, I say diversity.
Good news from Google: it’s going to start actively penalising sites for perpetrating the worst practices for mobile e.g. redirecting a specific “desktop” URL to a the homepage of the mobile site, or for shoving a doorslam “download our app” message at users.
I wish that we could convince people not to do that crap on the basis of it being, well, crap. But when all else fails, saying “Google says so” carries a lot of weight (see also: semantics, accessibility, yadda, yadda, yadda).
Joking aside, this is a useful resource for keeping track of the current spread of Android versions.
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.
I think it’s a bit of a shame that Brett is canning his mobile-first device-detection library, but I totally understand (and agree with) his reasons.
There is a consensual hallucination in the market, that we can silo devices into set categories like mobile, tablet, and desktop, yet the reality is drawing these lines in the sand is not an easy task.
An excellent explanation from Tom Loosemore on why the Government Digital Service is putting its energy into open standards and the web, rather than proprietary native apps.
A very handy technique from Cennydd for answering the “it depends” question of when you might need a separate device-specific site (‘though I think that a separate can be a good option in addition to a responsive site, rather than instead of).
And this is why user-agent sniffing not a future-friendly technique. A new mobile browser comes along, and it has to spoof a fake UA string to all of these sites.
It’s a Red Queen arms race.
A great meaty piece from Cennydd, diving deep into the tricky question of context.
I think this is kind of brilliant.
I share Tom’s frustration with news apps that should be websites:
I wouldn’t download a BBC app or an NPR app for my computer. Why would I want one on my phone?
Spimify your household with these bluetooth location stickers. Now you can google your shoes.
Amen, Brad, Amen.
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
A great piece by Jason analysing the ever-blurring lines between device classes.
Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:
What’s a web app?
All the videos from last year’s Breaking Development conference in Dallas are up on the site. They’re all excellent.
A great breakdown of mobile traffic to The Guardian website over time.
The best “Mobile First” strategy is an “API First” strategy:
“Mobile first” companies really are just a front end selection accessing a solid API driven backend infrastructure.
I think Luke would agree. He built a command line interface for Bagcheck, for example, before there was even a UI—mobile or otherwise.
David takes a look at worldwide trends in web browsing, pointing out where mobile traffic exceeds desktop …and we’re not necessarily talking about smartphones here either.
It would be possible to travel from the Niger Delta on the west coast of Africa, to the horn of Africa on the east coast, without passing through a country where people surf more on desktop than a mobile phone.
This looks like it could be one alternative to Adobe Shadow or Edge Inspect or whatever they’re calling it now that they’re charging $120 a year for using it.
I know how Brad feels. I find it hard to muster any enthusiasm for any specific new device these days. But that’s okay. It’s more important to step back and see the trends and directions instead of getting caught up in the specifics of this particular phone or that particular tablet.
My remedy for device fatigue has been to take a step back and let my eyes go unfocused. Much like a Magic Eye, I can then see the hidden pictures behind the stippled noise that is the device landscape. This remedy helps me cope, gets me to stop caring about things that don’t really matter, and gets me to care about the broader trends the Magic Eye unveils.
Andrea looks at support for HTML5 input types in IE10 Mobile.
I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.
Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:
Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.
Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.
A behind-the-scenes look at how Gov.uk is handling mobile devices. Spoiler: it’s responsive.
I found this particularly interesting:
When considering the extra requirements users of different devices have we found a lot in common with work already done on accessibility.
Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.
Celebrating the work of the tireless men and women who shorten headlines so they’ll fit on your iPhone.
Therefore, from a business perspective, and my excitement in doing this blog post is that RWD is especially important for mobile-centric markets such as Africa.
Remember when I linked to the Github repository of The Guardian’s front-end team? Well, now—if you’ll pardon the mixing of metaphors—you can start to kick the tyres of the fruits of their labour. This beta site shows where their experiments with responsive design might lead.
Smashing Magazine are publishing a book on mobile and the web. I’m writing the foreword. I should really get on that.
Amen, Lyza, Amen. Instead of treating web development for the multitude of devices out there as an overwhelming nigh-on-impossible task, let’s accept the fact that there are certain things that are beyond our control. And that’s okay.
Let’s build on the commonality core to the web where we can. To do this, I think we need to let go of a few things, to lay down our burdens.
Related: do websites need to look the same in every browser? NO!
Wow. This might be the stupidest behaviour from a browser that I’ve ever come across: mobile Safari behaves differently depending on the top level domain of the site! Madness!
Mind you… it’s kind of poetic justice for having a ridonkulous .mobi domain in the first place.
Oh, dear. Adobe Shadow gets a new name and a hefty price tag. Yesterday it was free. Today it is $119.88 per year. It’s useful but it’s not that useful.
So, lazy web, who’s working on an open-source alternative?
Andy makes a good point here, point out the difference between device testing and design testing:
When I’m designing, it’s incredibly important for me to quickly gain an affinity with how my design feels when I hold it in my hands.
Excellent! Scott has his own URL now. If you haven’t read everything he has written so far, start from the start and read every single post.
A list of open device labs around the world (mostly Europe).
There’s some great practical advice for building accessible mobile web apps here.
Those clever chaps at The Guardian are experimenting with some mobile-first responsive design. Here’s how it’s going so far.
An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.
Luke collates some useful mobile browsing statistics once again. Most of it is quite US-centric, but this closing point is a whopper:
36 countries more than doubled their Opera Mini user bases in one year.
Tim shows how to make a scalable three-line navicon in CSS.
A nice visualisation of Apple’s transition From desktop to mobile over ten years, one Daring Fireball article at a time.
Oh, and happy birthday, Daring Fireball.
Now Amsterdam has a communal device lab.
Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.
A little something to whet your appetite for dConstruct: Scott’s superb talk from this year’s Mobilism conference in Amsterdam.
A really fascinating analysis by Jason into the apparent disparity in web browsing between Android and iOS devices: it turns out that the kind of network connection could be a big factor.
An in-depth look behind the scenes of the responsive relaunch of People Magazine’s mobile site that Josh, Karen, and Ethan were involved in. I love it when people share their process and build stories like this.
I’ve seen Heiko present with this gizmo at Mobilism and it worked a treat. I’m very tempted to get one for future presentations.
Remember when I linked to the story of Twitter’s recent redesign of their mobile site and I said it would be great to see it progressively enhanced up to the desktop version? Well, here’s a case study that does just that.
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.
A great behind-the-scenes look at the redesign (and redevelopment) of Twitter’s mobile subdomain silo. Man, I would love to see this progressively enhanced up to the current widescreen view for “desktop” browsers without the need for separate URLs for any class of device.
But I digress …this is good stuff.
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!
Anna reports on her experience testing on a device we don’t often think about: the Nintendo DS …very popular with the young ‘uns.
Kyle’s Matryoshka phones are as cool as they are cute.
A great article on the importance of sketching for mobile-first responsive designs, complete with practical ideas for workshopping.
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
This is kinda funny (because it’s kinda true).
A great article by Karen pointing to the real problem with the mobile strategies of so many companies: they are locked in by their CMS.
If you’re based anywhere near Frome in Somerset, get in touch with Cole—he’s putting together a communal device testing lab.
Another call for design-based (rather than device-based) breakpoints in responsive sites.
A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.
This is my short explanation of Remy’s explanation of a BBC news article which is an explanation of an academic paper about battery performance of mobile devices when accessing websites.
Albert-László Barabási and Robin Dunbar are among the authors of this paper — it’s the scale-free network equivalent of the Avengers.
An excellent longish-zoom article by Alexis Madrigal with an eerily accurate summation of the current state of the web. Although I think that a lack of any fundamentally new paradigms could be seen as a sign of stabilisation as much as stagnation.
Josh responds to Jakob Nielsen’s audaciously ignorant advice on siloing mobile devices. Josh is right.
Nielsen says his research is based on studies of hundreds of mobile experiences, and I don’t doubt it. But because he’s finding tons of poor mobile websites doesn’t mean we should punt on creating great, full-featured mobile experiences.
I had a chat with the guys from Pingdom about performance’n’stuff. If I sound incoherent, that’s because this is a direct transcription of a Skype call, where, like, apparently I don’t, y’know, talk in complete sentences and yeah.
Taking apps out of phones and embedding them in the world around us …there’s a lot of crossover with what Scott Jenson has been writing about here. Good stuff.
It’s great to see the Future Friendly call-to-arms being expanded on. Here it’s university sites that are being looked at through a future-friendly lens.
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
An oldie but a goodie: this Bagcheck blog post contains a whole bunch of useful links to lists of mobile device testing suites.
An in-depth look at the BBC News mobile testing process. I think it’s great that people are sharing this kind of information.
BBC News are using the mobile subdomain to plant the seed of responsive design. It’s a smart move that’s been really nicely executed.
The hitherto unnoticed connection between the names of Android phones and the names of condoms.
Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.
Yet another great post from Brad:
Whenever I think of the concept of “One Web” and providing universal access to information on the web, I tend to break it down into something much simpler: give people what they ask for.
A great examination of the default settings for pixel density and how it can effect reported device width values on mobile.
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
Mozilla will be supporting H.264 …but they’re not happy about it.
I won’t sugar-coat this pill. But we must swallow it if we are to succeed in our mobile initiatives. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.
A sweet little meditation on the nature of the web and responsive design.
Jason reiterates Bruce’s rallying cry: Performance First!
If you could only do one thing to prepare your desktop site for mobile and had to choose between employing media queries to make it look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.
Bruce hammers home the importance of speed and performance on mobile (and frankly, everywhere).
So perhaps some of the time and effort put into media queries, viewports, avoiding scrolling, line length would actually be better employed reducing HTTP requests and optimising so that websites are perceived to render faster.
Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).
Adobe have launched their version of Weinre, the tool that allows you to refresh and debug iOS and Android browser views from your desktop computer.
A great post that discusses exactly what we mean when we talk about “supporting” different browsers.