Last weekend, one of my best friends Sam and I had a hack-weekend. One weekend of non-stop design and build. It was a pretty brutal affair considering we were only making a tiny portfolio site; a weekend of 4am nights, junk food, beer and dangerous amounts of Red Bull.
I’ve just about recovered now, and here is the result: Sam Penrose Design—Creative designer and graffiti artist based in Leeds, UK
This was a really cool build for me, Sam was a great ‘client’ in that he instantly ‘got’ progressive enhancement, he was totally cool with the fact that differences between browsers may be quite obvious (and glaring). He was fine with his idea of a design ending up being more like three designs, when different browsers are accounted for.
Buzzword time! This build was:
- Heavily progressively enhanced
- Content-out
- Mobile first
- Responsive
- Designed in browser
I’ll touch on each of these in a little more detail.
Progressive enhancement
Basic really; this site uses loads of gradients, round corners, shadows, all that stuff. None of it works in IEx but that’s cool. Sites don’t have to look the same in every browser (and we took that to a bit of an extreme where media queries are concerned).
It uses my fluid carousel which doesn’t even behave like a carousel in IE, it acts as more of a promo. This is fine, though, as we were careful to only put non-essential content in here. Got a good browser? You get a pure CSS carousel. Got an older one? You get what looks like a nice, fluid promo panel.
In case you’re interested here is a screenshot of IE8:
Content-out
We started off with just the content; I built pure markup to start, with no CSS whatsoever. We got the content into the page and then Sam decided how he’d like to design around that. It worked a treat and kept everything really really clean.
Mobile first
With the content in place, we looked to build the site mobile first. This was really simple, but we spent most of the time on it. We simply created a fluid, single column design. We spent ages working on the mobile, most stripped back version to ensure that it was a perfect base. We wanted to make sure that anything on top of the mobile version would be taking the site up to 11.
Investing so much time on the mobile version was really fun and really sensible, it made the next bit a breeze.
Responsive
Naturally, the site is responsive. The interesting thing is, though, that we’ve not bothered getting media queries to work in IE. The beauty of having spent so much time on the mobile version is that it’s not just an okay state to serve IE, it’s actually a really nice one! The site is all fluid and built with min-width media queries to size the site up from mobile as opposed to down from desktop.
Designed in the browser
Other than to process some portfolio images and create the dotted background image, Photoshop wasn’t used once. We built the whole site in the browser. The interesting thing about our process though was that Sam doesn’t code, but nor was he Photoshopping.
As he was learning the theory of exciting techniques in 2011 web design, he was applying them just as fast in order to art direct the design and build. He switched on to the idea of progressive enhancement and mobile first instantly so he didn’t struggle to adapt to a new way of thinking. He called the shots, saw how designing in the browser allowed us to test, iterate, drop and ultimately refine and create his ideas. Such a lean and neat process. He didn’t get precious about things, he didn’t beat a dead horse, he suggested, we tried, we reworked, we settled on the most pragmatic options.
So yeah, quite a fun and productive hack-weekend, if a little tiring.
Sam, by the way, is a newly freelance designer, so if you need any stuff doing you know where to find him. He’s also on Twitter at @sam_penrose.
By Harry Roberts on Wednesday, November 2nd, 2011 in Web Development. Tags: Content-out, Mobile first, Progressive Enhancement, Responsive web design, sampenrose.co.uk | 5 Comments »
+
Danny said on 3 November, 2011 at 12:44 pm
Hi, this is a very nice and concise writeup of the process, and something I will surely refer back to. Although unrelated to the build itself I thought I’d throw in my 2 cents regarding functionality. Being a portfolio site, I think it’s missing the ability to click through to larger images, especially from the front page slider. If I was looking to hire, I would definitley want to be able to see more detail.
Harry Roberts said on 3 November, 2011 at 1:38 pm
Hah, we’ve got that one on the todo list:
Andreas Gehrke said on 4 November, 2011 at 10:23 am
As a developer and long-time user of IDEs, Im curious about what tools you use when you “design in browser”.
Peter Butler said on 22 November, 2011 at 2:20 pm
That looks like basecamp to me, quite a nice product :)
joey said on 3 February, 2012 at 2:08 am
the result is ugly on ie8. but it’s ok because your paradigm is proactive. eer sorry your content out in-browser design is mobile first and responsive.
sometimes it’s good to stop learning buzzword and how to label your work with them (2.0, xHTML 1 strict W3C validation…) and use your eyes.