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.
Monday, March 3rd, 2014
Monday, December 10th, 2012
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.
Tuesday, September 11th, 2012
Monday, July 16th, 2012
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.
Sunday, March 18th, 2012
A sweet little meditation on the nature of the web and responsive design.
Monday, January 30th, 2012
When I wrote about responsible responsive images a few months back, I outlined my two golden rules when evaluating the various techniques out there:
- The small image should be default.
- Don’t load images twice (in other words, don’t load the small images and the larger images).
I also described why that led to my dissatisfaction with most server-side device libraries for user-agent sniffing:
When you consider the way that I’m approaching responsive images, those libraries are over-engineered. They contain a massive list of mobile user-agent strings that I’ll never need. Remember, I’m taking a mobile-first approach and assuming a mobile browser by default. So if I’m going to overturn that assumption, all I need is a list of desktop user-agent strings.
I finished by asking:
Anybody fancy putting it together?
Instead of assuming the device is a desktop, and detecting mobile and tablet device user agents, Categorizr is a mobile first based device detection. It assumes the device is mobile and sets up checks to see if it’s a desktop or tablet. Desktops are fairly easy to detect, the user agents are known, and are not changing anytime soon.
It isn’t ready for public consumption yet and there are plenty of known issues to iron out first, but I think the fundamental approach is spot-on:
By assuming devices are mobile from the beginning, Categorizr aims to be more future friendly. When new phones come out, you don’t need to worry if their new user agent is in your device detection script since devices are assumed mobile from the start.
Friday, December 30th, 2011
Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.
Thursday, December 1st, 2011
Documentation of an ongoing project to create a mobile-first responsive MediaWiki theme.
Saturday, October 29th, 2011
#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub
This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.
Thursday, September 15th, 2011
Boston Global Scope
After giving my language-centric talk at the Breaking Development conference I found it interesting to listen out for the terms that attendees and speakers were using to describe desktop-centric websites. Some of the adjectives I heard were:
- full site,
- standard site,
- regular site.
Once again, I think that this kind of language can constrain our approaches to web design and development. In truth, a mobile site should be the standard, full, regular site; you can still go ahead and add more stuff for the desktop environment, but to think of it as the canonical instantiation isn’t helpful. It hinders our ability to think in a mobile-first responsive manner.
Jason made a great point in his closing talk at Breaking Development. He said that clients are always asking how much extra it’s going to cost them to have a mobile site. But it should be the other way around. The mobile site ought to be the default and they should be asking how much extra it will cost to optimise for the desktop (which is not very much because, let’s face it, the desktop environment is a piece of piss compared to mobile).
It can be tough to convince a client that a mobile-first responsive site is the right approach. It’s always better to show rather than tell, but up until now there haven’t been any poster children for responsible responsive design—much as I like the mediaqueri.es site, the majority of sites showcased are shrinking down from a desktop start.
This reminds of the situation with web standards ten years ago. There were plenty of great sites that has switched over from table layouts to CSS but they were mostly blogs and portfolio sites (again, take a look at mediaqueri.es). It wasn’t until large commercial entities like ESPN and Wired.com were brave enough to make the switch that the CSS floodgates opened.
As of this week, we have a poster child for responsive web design: The Boston Globe. Actually, that does it a disservice …it’s a poster child for excellence in web design and development best practices.
I was lucky enough to have Scott do a show’n’tell at my dConstruct workshop. Seeing the thought and care that went in to every step of the process was humbling. There were a lot of tough challenges but they kept their eye on the prize: universal access—regardless of what device you’re using—without compromising on visual and interactive richness.
I’m going to let the site speak for itself but I just wanted to send my heartfelt congratulations to Ethan, Miranda, Scott, Todd, Patty and everyone else at Filament Group, Upstatement and the Boston Globe. Their hard work will benefit everyone designing and development for the web. Thank you guys.
Here are some reports in their words:
- From the Boston Globe itself, here’s a look at the strategy and business goals that informed the site.
- Ethan wrote about his role in the process.
- Upstatement have a beautiful portfolio page (itself responsive) showcasing the Boston Globe.
- Patty documents Filament Group’s experience with this project.
Lots of other people are writing about the Boston Globe launch, although much of the commentary focuses on the forthcoming paywall/fence rather than the design or technology. Jeffrey has written about the site, also comparing it to Mike’s visionary work on ESPN back in the day.
I could go on and on about how well the site works on touchscreen devices, tablets and mobile phones of all kinds but I think the essence of what makes the site great is captured in Grant’s screenshot of The Boston Globe site running on… an Apple Newton.