How to build a device lab | Tutorial by Destiny Montague and Lara Swanson
A set of slides from Destiny Montague and Lara Swanson at Etsy with their advice on setting up a device lab. Lara also wrote about the device lab on the Etsy code blog.
A set of slides from Destiny Montague and Lara Swanson at Etsy with their advice on setting up a device lab. Lara also wrote about the device lab on the Etsy code blog.
An early look at the just-in-time interactions that Scott has been working on:
Nearby works like this. An enabled object broadcasts a short description of itself and a URL to devices nearby listening. Those URLs are grabbed and listed by the app, and tapping on one brings you to the object’s webpage, where you can interact with it—say, tell it to perform a task.
John peers behind the surface veneer of the web’s current screen-based setting:
The challenge for us as developers and designers for the web becomes less about screens and pixels and buttons and much more about how the web augments our lives, both actively and passively; how it makes us know ourselves and our homes and workplaces and environments better.
Here’s a nifty way of building stands for your device lab: LEGO!
I like Matt’s observation here that the simple combination of a barebones data format like HTML delivered over HTTP is a good-enough low-level API for joining up all kinds of internet-connected things.
In the last 60 years, the biggest software platform for interop and integration – for new products, services, businesses, and value creation – has not been Android, or iOS, or Windows, or the PDP-11. The biggest and best platform has been the web.
One implication is that successful products are not necessarily those with seamless, beautiful, tightly-controlled “experiences”, but rather the ones that are capable of talking to each other.
Small things, loosely joined.
A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!
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.
Got an old phone lying around that you don’t need any more? Why not donate it to a device lab? You know it makes sense.
Craig recently had a piece published in the New Yorker called Goodbye, Cameras. It’s good …but this follow-on piece on his own site is truly wonderful.
Read. Absorb. Ponder.
Being close to the network does not mean being on Facebook, thought it can mean that, too. It does not mean pushing low-res images to Instagram, although there’s nothing wrong with that. What the network represents, in my mind, is a sort of ledger of humanity. The great shared mind. An image’s distance to it is the difference between contributing or not contributing to that shared ledger.
Some excellent practical advice on progressive enhancement.
Some excellent research for web developers: find out which unicode characters have the widest support—release useful for choosing icons.
This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.
Warning: it does get quite ranty towards the end.
Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.
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.
Iain M.Banks and dConstruct, together at last.
A state of the connected union address, with soundbites from smart people in the world of ubicomp, internet of things, everyware, or whatever it is we’re calling it now.
This is a really well-written and worrying piece that pokes at that oft-cited truism about kids today being “digital natives”:
The causes of this lack of digital literacy can be traced back to school:
We’ve mirrored corporate networks, preventing kids and teachers access to system settings, the command line and requiring admin rights to do almost anything. They’re sitting at a general purpose computer without the ability to do any general purpose computing.
Also, this article has the best “TL;DR” description ever.
I, for one, welcome our new recycling bin panopticon overlords.
You might want to put your phone’s MAC address into this form.
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.
A great call-to-arms from Tim, simply asking that we create websites that take advantage of the amazing universality of the web:
The web has the power to go anywhere—any network, any device, any browser. Why not take advantage of that?
Inevitably there is pushback in the comments from developers still in the “denial” stage of coming to terms with what the web is.
A vision of neurotic network-enabled objects, as prototyped by dConstruct speaker Simone Rebaudengo.
This echoes what Scott Jenson has been saying: the current trend with connected devices is far too reliant on individual proprietary silos instead of communicating with open standards.
So instead of talking directly to one another, devices on today’s nascent Internet of Things now communicate primarily with centralized servers controlled by a related developer or vendor. That works, after a fashion, but it also leads to a bunch of balkanized subnetworks in which devices can communicate perfectly well with each other - but can’t actually talk to devices on any other balkanized subnetwork.
A profile of Tom’s house.
It’s weird how normal this is.
A fascinating analysis of a super-cheap phone from another world.
Welcome to the Galapagos of Chinese “open” source. I call it “gongkai” (公开). Gongkai is the transliteration of “open” as applied to “open source”. I feel it deserves a term of its own, as the phenomenon has grown beyond the so-called “shanzhai” (山寨) and is becoming a self-sustaining innovation ecosystem of its own.
Just as the Galapagos Islands is a unique biological ecosystem evolved in the absence of continental species, gongkai is a unique innovation ecosystem evolved with little western influence, thanks to political, language, and cultural isolation.
This looks like it could be a handy app for synchronising a whole bunch of devices when testing. I’ll have to give it a whirl on the device lab.
Also, it has a perfectly fair one-off price, rather than the Mafia-style protection fee model that Adobe uses for Edge Inspect.
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.
Trent hammers home the point that the kind of compartmentalisation that’s traditionally been part and parcel of the web dev workflow just won’t cut it anymore.
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.
This is the full text of Owen’s talk at the Responsive Day Out. It makes for a terrific read!
Do you know anyone in Antwerp who wants to be part of a communal open device lab? Point them here.
The slides from Anna’s terrific talk at the Responsive Day Out.
These device holders/stands look really nice, and they’d be a real help keeping my spaghetti cables in check.
I believe this may be Australia’s first open device lab. I hope it’s the first of many.
A great meaty piece from Cennydd, diving deep into the tricky question of context.
The guys at Cover Up are great: they make accessories for tablets and e-readers, so they have lots of those devices. They’ve made them all available for web developers to test on. Like I said: they’re great!
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?
A great breakdown of mobile traffic to The Guardian website over time.
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.
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.
Pictures and plans for building a plywood stand for your device lab. I definitely want one of these for the Clearleft office.
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.
Ryan describes the research and process behind putting together a device lab for Happy Cog in Austin. Good stuff, with handy links gathered together at the end.
This is an excellent resource from Anna. She’s documenting the browser capabilities of games consoles.
A communal device lab in Stockholm.
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.
A great article that looks at everything you need to know to set up a communal device lab in your town.
There’s an open device lab starting up in Washington DC. If you’re in the area, get in touch and share your devices.
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.
This looks like a great idea: a centralised place for listing open device labs (and hopefully getting some sponsorship from device manufacturers).
Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.
There’s also a call for more community device labs. I approve.
Jason has set up a mailing list for open device labs. If you are running one, or thinking of setting one up, you should sign up to share ideas and knowledge.
There’s an open device lab in Cape Town now. Excellent!
A list of open device labs around the world (mostly Europe).
An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.
Helsinki now has a communal device lab. It looks great!
Dan makes a very good point about Little Printer: it’s not the “printer” part that matters; it’s the “little”.
There’s a communal testing lab just outside London and they’ve got a very nifty set-up for their devices.
Now Amsterdam has a communal device lab.
Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.
Those articles about the “Internet of Things” I linked to? Here they are in handy Readlist form.
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.
First we take Manhattan…
Berlin now has a communal device lab. Wunderbar!
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.
London now has its own device lab (at the Mozilla offices).
If you’re in London and you have an old phone you could contribute, please, please add it to the contribution.
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.
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.
Now there’s a communal device testing lab in Malmö, Sweden too.
If you’re based anywhere near Frome in Somerset, get in touch with Cole—he’s putting together a communal device testing lab.
See now, this is why liquid layouts are the way to go.
Another call for design-based (rather than device-based) breakpoints in responsive sites.
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.
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.
Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.
A great examination of the default settings for pixel density and how it can effect reported device width values on mobile.
Luke outlines three different solutions to delivering a site to multiple devices.
An acid test for mobile browsers. Point your device at rng.io and it will report on how much or little mobile shininess is available.
Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.
A rallying cry for a content-focused—rather than device-focused—approach to responsive design. Despite the awful title and occasionally adversarial tone, this article is making a very good point about being future friendly.
Another plea for content-out rather than canvas-in design.
Yes! Yes! Yes!!!
Progressive enhancement is the only sane approach to today’s massively divergent landscape of devices. It can’t be repeated often enough.
Stephanie details all the things we have to know about when designing for today’s broad range of devices: performance, capabilities, form factor, pixel density, and network latency.
These are all good points but I worry that if we just concentrate on the current device landscape, our processes won’t adapt to the future.
Stephanie focuses on Android but this is a cautionary tale about trying to impose control over what you’re sending to the multitude of mobile devices out there.
Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.
Bill Buxton’s collection of input devices going back thirty years.
This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.
Some interesting questions (and one or two answers) about how responsive design affects publishing on the web.
The class of device formerly known as mobile.
An excellent article from Bryan, hammering home the point that there is no sharp dividing line between desktop and mobile.
Remember as well that the most ubiquitous of technologies, the common thread throughout many connected devices, is the browser. Browser-based experiences may not always be as sexy, but they are often far more capable of adapting to different contexts. In times of rapid change, adaptability—rather than features—may be your product’s greatest ally.
This is really cool: a real-time map of bluetooth devices currently at the Reboot conference.
Mike has a really nice stopgap technique for improving your site on mobile devices.