Blogging And All That Malarkey

320 and Up

As Jeremy mentioned yesterday, just before An Event Apart in Seattle, I spent a few hours on a spot of guerrilla testing at an AT&T store. Specifically, I was looking at how Windows Phone 7’s Internet Explorer browser handles ‘responsive sites’.

As Jeremy described, I was shocked, particularly at how it rendered some of my latest work, in particular Hardboiled Web Design. This cemented a suspicion I’d had for a while — that starting with a desktop specific stylesheet and design, then pruning back elements to fit a smaller screen is the opposite of how we should be designing and building websites.

On the plane back from Seattle I started on a set of files to use in a ‘small screen’ or Mobile First design process.

A lot can happen in a week or two. A few days later Paul Irish, Divya Manian and Shi Chuan launched Mobile Boilerplate — a collection of mobile best practices that happens to include my previous Hardboiled CSS3 Media Queries but one that still starts, as I did previously, with a large screen first. Now, developing a ‘tiny screen first’ alternative/extension made even more sense.

So here’s ‘320 and Up’

Many CSS Media Queries boilerplates start with a desktop-specific stylesheet, then add queries and styles for progressively smaller viewports. This means that even the small browsers load desktop layout styles and potentially large assets, even when these are set to display:none;.

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design.

A few notes about what’s in the files.

I’ve been using HTML5 Boilerplate a lot lately — and digging into Mobile Boilerplate — so it made sense to combine the relevant parts of both of those together and maintain their conventions and structure. Then I added a few other polyfills that have been in my toolkit for a while:

Ethan Marcotte’s imgsizer.js: improve IE’s rendering of resizable images
selectivizr-1.0.1.js: bootstrap CSS3 selector support and DOMAssistant-2.0.min.js to boost Selectivizr

Plus (and bang up-to-date):

Mathias Bynens’ scripted fix for iOS Safari’s viewport scaling bug
Mathias Bynens’ bootstrap for HTML5 placeholder support in legacy browsers.
respond.js: bootstrap CSS3 Media Query support.

Speaking of respond.js. Scott Jehl was kind enough to spend his weekend extending it to include support for linked as well as inline Media Queries, ready for ‘320 and Up’.

Try it, use it and improve it

‘320 and Up’ works well as an extension to HTML5 Boilerplate (simply replace a few files) but if you’re not a boilerplate user, it works as a standalone kit too.

The ‘320 and Up’ page acts as a demonstration. Try it at different window sizes and on different devices, then download the files. The Zip file contains two versions: multiple linked stylesheets, or a single stylesheet with multiple Media Queries.

I’d love your contributions to improve it.

Leave your comment

Aurélien Foutoyet

April 12 2011 @ 02:46pm #

The idea to “inverse” the media queries for mobile first is really interesting.
I can’t wait to take a closer look to your different files.
Thanks for sharing, really.

Ryan

April 12 2011 @ 06:36pm #

Very grateful for this - once again you simultaneously manage to inspire and also make me realise how much I have to learn!

Raphael Essoo-Snowdon

April 12 2011 @ 07:19pm #

Brilliant job Mr. Clarke!

brad

April 12 2011 @ 07:47pm #

FYI: You have a double negative in your 404 page.

“Sorry, but the page you’re looking for doesn’t not exist.”

Billee D.

April 12 2011 @ 10:37pm #

Nice work, Andy. Any chance you would consider releasing this on GitHub or similar? I would love to contribute to this project.

John Albin Wilkins

April 12 2011 @ 10:42pm #

I have to agree with Billee D. Open sourcing this like the Boilerplate project has done is a great way to get interested parties collaborating closer.

Your approach is the exact one I was starting to research. Thanks so much for releasing this material. Its invaluable.

Andy Clarke

April 12 2011 @ 10:58pm #

In a week or so (after Easter), my friend Simon will help me get this going on GitHub. I am a complete moron with anything related to Git.

Billee D.

April 12 2011 @ 11:12pm #

Thanks, Andy. Looking forward to it and please feel free to enlist me for any help you might need. BTW, while I prefer the command line, that Tower App for Mac is an awesome Git GUI.

Thomas

April 13 2011 @ 04:00am #

Nice work, nice try. I really like the mobile-first-idea and responsive/adaptive design. And your 320andUp-website is a nice standalone website.

But I simply not getting it, how you will create a blog with “mobile first”, because the post-images. Now you upload your big post-images (max-width: 100%) and on lower viewports it will automatically scale down.

But if you start with mobile first and you don’t want to load potentially large assets on your smartphone, how will you handle that?

Billee D.

April 13 2011 @ 04:52am #

@Thomas: Web design has always been, and will forever be, about compromise. Unless I’m missing something this isn’t about any comprehensive optimization for the mobile user experience. That’s a whole different realm which requires content negotiation at the server level. For just a small glimpse at how tricky that can be you can check out the mobile-web group at Yahoo! with by Peter-Paul Koch and others.

This framework is about trying to hit the middle ground for most devices, no matter what the screen size. Posting large images on blog posts — no matter what screen size the end user may have — is not ideal for anyone simply because a large portion of folks out there are still on dial-up Internet. You still need to optimize your images. I also believe that we are in a whole new era of web consumption where a desktop-centric view of the web is pure folly.

That’s just my 2px. :)

Thomas

April 13 2011 @ 02:12pm #

@Billee
I totally agree about the new era-thing. And I think that 320andUp is great. I even tried to make something with it, but then i thought “what’s about images?”. If mobile first, my blog-posts images wil have a 300px or so as max-width. Even a portfolio-section will have max-pics wit round about 300px. Ok, you could do a mix. Every image about 300px with, but portfolio-images will be larger and you’ll set it to max-width: 100%.

I have to think about it.

Mike Badgley

April 14 2011 @ 02:11am #

Interested in your take on WP7 and whether or not you’ve considered including support for it. After some initial (albeit very basic) testing, it appears that respond.js has no effect on the IE browser for WP7.

Jesse

April 14 2011 @ 04:43am #

Call me a dumb schmuck, but for the life of me I can’t figure out something in the style sheet - from min-width: 992px, you come up with width: 80% /* 896px */. Isn’t 80% of 992px something like 793.4px? Thanks.

Andy Clarke

April 14 2011 @ 05:15am #

@mikebadgley: I’m excluding Respond.js from Windows Phone 7 with a conditional comment: <!—[if (lt IE 9) & (!IEMobile)]> I tested WP7 on my HTC HD7 handset.

@jesseracine: Sorry, that is confusing. 896px comes from the Lessframework 4 grid proportions. It’s the number that matters. The 80% is me sticking in a nominal figure when I hacked the demo page design together. I’ll explain the grid I used properly in a blog post.

Yann

April 14 2011 @ 07:44am #

Awesome stuff… Thanks!

If you want a quick intro to Git, you should check out the peepcode video. It’ll take you a couple hours to know enough to use it. And Textmate has an awesome Git bundle that makes it trivial to pull, branch, etc…

Willan Correia

April 14 2011 @ 10:20am #

Thank´s for doing such a wonderfull job!..

I have one question: what if i want to place like a image slider or something that will load a lot of stuff, that is for the big screen resolutions???

I have been using the less framework 4 and html5 boilerplate a lot, and the only solution that i came up was to use the .hidden class on boilerplate. I realy like this concept “mobile first” but then this problens come up

Do you have any solutions??

About the images sizes discussions that have been going on, i use this solution:

Just use media queries in the image tags to specify different image sizes.

Hope this helps

DESIGNfromWITHIN

April 14 2011 @ 05:16pm #

Great stuff, combined with HTML5 Boilerplate this is really powerfull!

Sergio Acosta

April 16 2011 @ 08:35pm #

Great resource, I am learning a lot from it. MANY THANKS, Andy.
Just a minor detail: I think this comment is misplaced in index.html
<!—mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site’s ID—>

Commenting is not available in this channel entry.

320 and Up

A few notes about what’s in the files.

Try it, use it and improve it

Leave your comment

Thomas

Thomas

Hardboiled Web Design by Andy Clarke