A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.
More thoughts on the lack of a performance culture, prompted by the existence of Facebook Instant:
In my experience, the biggest barrier to a high-performance web is this: the means of production are far removed from the means of delivery. It’s hard to feel the performance impact of your decisions when you’re sitting on a T3 line in front of a 30 inch monitor. And even if you test on real devices (as you should), you’re probably doing it on a fast wifi network, not a spotty 3G connection. For most of us, even the ones I would describe as pro-performance, everything in the contemporary web design production pipeline works against the very focus required to keep the web fast.
Brad points out the importance of supporting—which is not the same as optimising for—the non-shiny devices out there.
I really like using the Kindle’s browser as a good baseline for checking that information is available and readable.
SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need
A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.
A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.
Major caveat: make sure you still offer the ability to mask passwords too.
This a great step-by-step walkthrough from Rey on setting up a remote version of Internet Explorer for testing on Mac.
Mat unveils Boston’s open device lab, and provides a beautiful raison d’être while he’s at it:
Websites work everywhere by default, and they stay that way so long as we know how not to break them. That’s what the Open Web means to me: ensuring that entire populations just setting foot on the web for the first time will find it welcoming, regardless of the devices or connections used to get there.
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 handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.
Excellent tips and tools from Google’s Paul Lewis on performance testing.
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.
Carousels are shit. Auto-animating carousels are really shit. Now proven with science!
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 handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
Some cautionary tales of over-engineering solutions before doing some quick user-testing to establish what the real problems are.
It’s a pleasant delusion to believe that all our problems require hard solutions.
Do you know anyone in Antwerp who wants to be part of a communal open device lab? Point them here.
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.
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!
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.
Pictures and plans for building a plywood stand for your device lab. I definitely want one of these for the Clearleft office.
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.
A great in-depth explanation by Aarron on why Mailchimp dropped their Facebook and Twitter log-in options. Partly it was the NASCAR problem, but the data (provided by user testing with Silverback) also brought up some interesting issues.
This looks handy: a video-sharing service designed specifically to work with Silverback
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.
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.
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.
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.
First we take Manhattan…
Berlin now has a communal device lab. Wunderbar!
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.
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.
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.
It took me a while to get my head ‘round it, but this routing service from 37 Signals is handy for testing local sites on multiple devices (kind of like showoff.io).
If you’re based anywhere near Frome in Somerset, get in touch with Cole—he’s putting together a communal device testing lab.
An oldie but a goodie: this Bagcheck blog post contains a whole bunch of useful links to lists of mobile device testing suites.
This seems like a sensible way of separating capable browsers from legacy browsers: if the browser supports querySelector, localStorage and addEventListener, you’re good to go.
An in-depth look at the BBC News mobile testing process. I think it’s great that people are sharing this kind of information.
A handy performance testing tool from Pingdom, similar to Google’s offering.
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.
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.
A bookmarklet version of that handy multiple-iframe page I linked to the other day. Even more useful for testing responsive designs!
A handy little document to load pages into differently-sized iframes—useful for testing responsive designs.
This is really handy: a bookmarklet that will disable any CSS3 on a page so you can check that your fallbacks look okay.
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.
A very clever and tricksy way to sync up multiple devices so that when you refresh a URL or follow a link on one, it happens on all of them. It uses OS X’s Internet Sharing feature combined with locally-hosted Node.js. It’s positively McGyverian!
An alternative to showoff.io for sharing your locally-hosted sites.
Another browser-based tool for viewing the same site at different sizes, but this one displays them all the same time, side by side.
Another browser-based tool for testing your responsive designs at different screen sizes.
Remy created this tool for resizing a viewport to figure out where to put the breakpoints in your media queries.
A handy little service for viewing sites at different dimensions. Just be aware that it doesn’t actually emulate different devices.
Stephen and PPK are taking their two-day mobile workshop on the road, including two dates in the UK (one of which is Brighton!). There’s a welcome emphasis on testing.
Derek runs some tests on how screenreaders behave when block-level elements are wrapped in links, which is now legal in HTML5.
A nice overview of the increasing importance of UX on the web, written by Bobbie with soundbites from Andy.
This code could be useful in determining a user’s bandwidth.
All the tests and all the results, all in one place.
Monstrously beautiful images, accompanied by an eye-witness audio account.
A nice little case study in using Silverback.
A lesson from Google Buzz: a large sampling isn't always a representative sampling.
Cennydd delivers a slap of common sense to A/B testing. With science!
Hixie has been making changes to microdata in HTML5 based, not on opinion or theory, but on the results of user testing.
A very handy tool to help you check the outline algorithm in HTML5.
Neil explains how you can have your Safari cake and eat it.
A document outlining browser support standards for bbc.co.uk
The five second test is a simple usability test that helps you measure the effectiveness of your user interfaces.
Garrett's in-depth look at Silverback, the Mac app that we've been cooking up at Clearleft.
Excellent research into how screen readers respond to empty links (i.e. A elements with no text between the opening and closing tags).
For those times when you need to validate your markup but you don't have a 'net connection.
The YUI folks have released an add-on for Firebug that will analyse your pages and suggest ways of speeding it up.
A great hands-on article on the benefits of playing with paper.
Joe's notes make for great reading, specifically "Accessibility is a precursor to usability."
Flickr photo set, AIGA card sorting exercise.