I’m taking part in a one and half day hackathon today and tomorrow, and I’ve decided to build a thing. It’s called Dicey Devices and it’s a responsive preview tool with a difference.
The focus of Dicey Devices is to remind us:
- about the huge diversity of devices that access the web;
- about how many people are multi-device users;
- the importance of testing on real devices.
I’ll be pushing it live as I make it, over at stevebarnett.github.io/DiceyDevices. The code behind it will be up on GitHub. Right now it’s empty!
Why build another responsive testing tool?
There are lots out there already. I feel that one thing that most of the tools get wrong is focusing a little too much on specific sizes or devices. This isn’t a very Future Friendly approach. Although some let you enter widths and heights, most have either “mobile, tablet, desktop” or, worse, “iPhone, iPad, MacBook.” Brad Frost’s ish is perhaps my favourite: it has a random setting that is great for testing (and even the preset sizes are labelled like t-shirts, rather than being specific).
Seeing Luke W’s photos from Breaking Development of the lots of devices reminded me of Brad Frost’s this is the web slides: “This is not the web, this is the web, this will be the web”, and of PlaceIt.net, where you can add screen shots and see them “in real life.” These in turn led me to revisit Justin Avery’s Am I Responsive. This got me thinking that the existing tools don’t do a great job of reminding us that testing with real devices is very different to testing in a smaller browser window.
What I want to do with Dicey Devices is pull these things together a bit more. Like Brad’s last slide mashed up with Am I Responsive, but with the devices on display being randomised. If I have time I want to add “special effects” to the displays. Things like adding cracks to the screen, adding noise or glare, fading the colours to simulate an old or poor display, and so on.
Of course, Dicey Devices still only really looks at viewports as a variable, which is not great (see Luke’s post, Ethan’s response, and Luke’s response response). It’s more of a reference and nudge than a tool for proper testing.
Why “Dicey Devices”?
The Dicey refers to two things: the randomness of the selection (like dice, so that we don’t get hung up on specific resolutions) and the special effects simulating real world problems (like a dicey, dodgy, device, to remind us to test on real devices).
Also, I like alliteration.