The Blog

Responsive Web Design Hysteria

By On February 8, 2012 In Web, Web Design, Web Development With 7 Comments Permanent Link to Responsive Web Design HysteriaPermalink

If there was a word I’d use to describe the response to Responsive Web Design it’s ‘hysteria’.

I see meaningless polls asking “Will your next project be responsive” and tweets boasting that “my client understands the value of a responsive design.”

Andy Clark went one step further recently tweeted that you weren’t a real web designer if you weren’t building responsive sites. Or something to that effect; I think he deleted the tweet.

The brilliant Ethan Marcotte has a lot to answer for.

(Illustration by Kevin Cornell taken from http://www.alistapart.com/articles/responsive-web-design/)

But why the hysteria?

Responsive web design is one possible solution – there are many more.

You may choose a fully responsive site or you might choose a static site. At the moment I’m developing a responsive site down to tablet, whilst a colleague builds a mobile site with a separate codebase. Why? Because it makes perfect sense from a business perspective and a coding perspective.

It’s impossible for anyone to make a judgement about how you should build a site unless they know all the facts about your business and your codebase (particularly a codebase that has evolved over many years).

I was beginning to think I was the only person who thought like this, but a couple of high profile people have made a similar point.

At a recent event Paul Irish was asked, “You currently have two boilerplates, mobile and the desktop. Should we build mobile first or desktop first?”

Paul replied,

Mobile boilerplate is specifically for mobile web apps. We do have a bunch of responsive stuff, responsive CSS, in the HTML5 Boilerplate that allows you to scale things – so you can do mobile first, you can do desktop first.

I think there’s a continuum: You have blogs, and you have web apps and most sites aren’t either of those two things; you have to figure out where you are on that [continuum]. Blogs can be responsive. Web apps? Well you’re probably going to have a different web app for desktop Chrome versus mobile Safari. And so you have to figure out where you are. In many cases you can make it responsive and use the same codebase, but in some cases you have to split it and have two different code bases. Right now it’s a hard question to answer.

You might have also noticed an interesting footnote about responsive design in Bootstrap 2, which was recently released by Twitter:

Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove [media queries], we figure it best to enable it.

If your business will benefit from a responsive design, I think it’s an excellent solution. If, like our business, you need to provide a separate mobile codebase then that’s fine too.

Use the right tools for the right job. We never assume a one design fits all policy, so why are we now doing so for development?

Go make awesome things :)

The Next 30 Days

By On December 31, 2011 In Creativity, Video With No Comments Permanent Link to The Next 30 DaysPermalink

This year I’ve watched more and more on the Google Webmasters YouTube channel, and found myself really liking Matt Cutts.

And so in the spirit of New Year’s Resolutions, here’s an inspiring three minute video from Matt explaining how you can try anything for 30 days. Makes those big goals just a little more manageable…

Easy :)

iPhone Keynote 2007

By On December 31, 2011 In Creativity, Video With No Comments Permanent Link to iPhone Keynote 2007Permalink

This video, although nearly 5 years old, sums up 2011 for me. I remember watching it the day Steve Jobs died; it’s incredible viewing…

CSS3 Flexbox Helper Classes

By On September 5, 2011 In Uncategorized With 14 Comments Permanent Link to CSS3 Flexbox Helper ClassesPermalink

Here are some CSS3 Flexbox helper classes to accompany my recent article in Smashing Magazine.

There are two flavours here, CSS and Less. If you have a Sass version please let me know in the comments.

You can also download these files, together with the rest of the source code, over at https://github.com/richardshepherd/CSS3-Flexbox-Tutorial.

Pure CSS Version

/* Flexbox-Helpers.css
 * Helper classes to use with CSS3 Flexible Boxes
 *
 * http://richardshepherd.com
 * @richardshepherd
 *
 * Keep your eye on the spec because these
 * properties and values WILL change :)
 * http://dev.w3.org/csswg/css3-flexbox/
 * -------------------------------------------- */

.boxHorizontal {
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	box-orient: horizontal;
}

.boxVertical {
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}

.boxFlex,
.boxFlex1 { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
.boxFlex2 { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; }
.boxFlex3 { -webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; }
.boxFlex4 { -webkit-box-flex: 4; -moz-box-flex: 4; box-flex: 4; }

.boxStart {
	-webkit-box-pack: start;
	-moz-box-pack: start;
	box-pack: start;
}

.boxEnd {
	-webkit-box-pack: end;
	-moz-box-pack: end;
	box-pack: end;
}

.boxCentered {
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
}

/* Additional Classes written by/adapted from Alex Russell's great work
 * http://infrequently.org/2009/08/css-3-progress/
 * -----------------------------------------------*/

.boxHorizontal > *,
.boxVertical > * {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
	display: block;
}

.spacer {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}

.boxGroup1 {
	-webkit-box-flex-group: 1;
	-moz-box-flex-group: 1;
	box-flex-group: 1;
}

.boxGroup2 {
	-webkit-box-flex-group: 2;
	-moz-box-flex-group: 2;
	box-flex-group: 2;
}

Less CSS Version

For anyone using Less, this version includes some handy mixins:

/* Flexbox-Helpers.less
 * Helper classes and Less mixins to use with CSS3 Flexible Boxes
 *
 * http://richardshepherd.com
 * @richardshepherd
 *
 * Keep your eye on the spec because these
 * properties and values WILL change :)
 *
 * -------------------------------------------- */

.boxHorizontal {
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	box-orient: horizontal;
}

.boxVertical {
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}

.boxFlex(@boxes: 1) {
	-webkit-box-flex: @boxes; -moz-box-flex: @boxes; box-flex: @boxes;
}

.boxPack(@packed: start) {
	-webkit-box-pack: @packed;
	-moz-box-pack: @packed;
	box-pack: @packed;
}

.boxGroup(@boxGroups: 1) {
	-webkit-box-flex-group: @boxGroups;
	-moz-box-flex-group: @boxGroups;
	box-flex-group: @boxGroups;
}

/* Additional Classes written by/adapted from Alex Russell's great work
 * http://infrequently.org/2009/08/css-3-progress/
 * -----------------------------------------------*/

.boxHorizontal > *,
.boxVertical > * {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
	display: block;
}

.spacer {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}

Battle of the Browsers

By On July 29, 2011 In Web, Web Design With No Comments Permanent Link to Battle of the BrowsersPermalink

 

I love this image , spotted by @rishil :)

 

Tilt to Scroll in Instapaper

instapaper
By On March 3, 2011 In Web With No Comments Permanent Link to Tilt to Scroll in InstapaperPermalink

I love the Tilt to Scroll feature in Instapaper. It’s such a natural thing to do, and it’d be great if mobile Safari introduced a similar feature.

If you’re not familiar with Instapaper it’s a great way to catch up on articles and webpages whilst you’re offline (for example when you commute, like me!).

ALF Love

By On February 17, 2011 In Funny, Image With 1 Comment Permanent Link to ALF LovePermalink

I think I loved ALF as much as this kid…

CSS3 Media Queries and jQuery

CSS3 Media Queries in action on Vouchercodes
By On December 14, 2010 In CSS3, HTML5, Web, Web Design, Web Development With 12 Comments Permanent Link to CSS3 Media Queries and jQueryPermalink

When you work on a site as complex as VoucherCodes.co.uk, with (almost exactly) the same number of visitors browsing with IE6 as using an iPhone, it’s often hard to design and build bulletproof pages.

Recently however we’ve had an opportunity to work on a page that doesn’t use any existing templates. This meant we were able to start form the ground up – and as soon as I heard this I thought HTML5, CSS3 and media queries!

You can view one of these pages at http://www.vouchercodes.co.uk/printable-offers/askrestaurants.com/6/.

Take a look at the source and you’ll spot some HTML5 and the wonderful HTML5 shiv from Remy Sharpe. This is all pretty standard stuff now that has been written about before but I did come across one problem, the solution to which I thought was worth sharing.

Media Queries and Internet Explorer

Media queries, which are part of the CSS3 draft spec, don’t work in Internet Explorer 6, 7 or 8. Hardly surprising, but certainly annoying. So, we need a JavaScript solution.

The one I found seemed to work perfectly in my dev environment, but when I was testing on our staging server it seemed to break. Here’s why…

A JavaScript media query script simply scans the CSS files for the queries, and then implements them as normal CSS when the page is resized. It’s a simple enough idea but the code itself is reasonable complex; it actually loads the external CSS files using AJAX, and herein lies the rub.

Like most large sites we host our assets (images, scripts, CSS files etc.) on a number of different domains to the main site. In our case the HTML is served from www.vouchercodes.co.uk but the images might come from static3.vouchercodes.co.uk. As a security feature AJAX won’t retrieve information from another domain, and so when the JavaScript media query fix tries to find the CSS file(s) referred to in the head of the document it couldn’t.

It worked on my dev machine because all the files are hosted in the same place. It’s only when we deploy that they get split across the various domains, and with no CSS files to process the media query JavaScript solution didn’t work for Internet Explorer. Major downer.

A sidenote here – media queries are often used to format for handheld devices, like Android, the iPhone and the iPad. Indeed, that’s exactly what they do here. But it’s worth remember that many users still have 1024×768 monitors, and those that do rarely maximise the browser window. You end up with someone viewing your site at a random size like 928×704 and this immediately breaks your lovely 990px/980px/960px design. This is why you need a flexible design process and why media queries are so important.

Furthermore, whilst media queries aren’t essential for flexible design they do help as at some point you need to start moving elements around the page, rather than just adjusting their % widths.

Back to the story… AJAX couldn’t see the CSS files hosted on external (albeit sub) domains so I needed a new approach.

And that’s when I stumbled upon another (admittedly more basic) media query solution – css3-mediaqueries.js. The major difference from a build point of view was that I have to now include a separate stylesheet for each media query; not that this is a particularly difficult task. So rather than one glorious stylesheet peppered with queries I have the following in the head:

<!-- Media Queries for our flexible grid :) -->
<link rel="stylesheet" href="http://static.vouchercodes.co.uk/css/signup/L6-signup820.css" media="only screen and (max-width: 820px)" />
<link rel="stylesheet" href="http://static.vouchercodes.co.uk/css/signup/L6-signup500.css" media="only screen and (max-width: 500px)" />

<!-- Checkout the hotshot with the fancy iPhone/smartphone! -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
<link rel="stylesheet" href="http://static.vouchercodes.co.uk/css/signup/L6-signup-iPhone.css" media="screen and (max-device-width: 480px)" />

And then at the bottom of the page I include the media query JavaScript:

<script type="text/javascript" src="http://static.vouchercodes.richdev/script/signup/css3-mediaqueries.js"></script>

This particular file, which is a jQuery plugin, simply loads the relevant CSS file when the screen is resized to the relevant resolution. As this is not parsing a remote CSS file it doesn’t fall over even when these files are hosted on a different domain. Shweet!

The combined weight of the HTML5 shiv and css3-mediaqueries.js is just 6.4k, which is easily saved by smushing a few images. Using HTML5 and good CSS3 also shaves bytes and kilobytes of your pages simply by cutting out unnecessary markup. And when you’re delivering millions of pages those bytes add up very quickly ;)

It’s great to be able to use latest technologies like this, and still see the results in IE6. I believe that media-queries are probably as useful to IE6 users (who are probably viewing the site using a small browser viewport) as they are for iPhone users, and I hope to use them more and more as the site continues to evolve.

HTML5 Beginners Guide

HTML5 Beginners Guide
By On December 14, 2010 In HTML5, Web, Web Design, Web Development With No Comments Permanent Link to HTML5 Beginners GuidePermalink

I’ve been writing a series of article for Think Vitamin recently focusing on HTML5. It’s a hands-on course including examples and tutorials on how you can include HTML5 on your website today, and covers everything from Video to Forms.

Here are all the links you’ll need!

iPhone Screenshots

By On October 11, 2010 In Uncategorized With Comments Off Permanent Link to iPhone ScreenshotsPermalink

iPhone Screenshot

There’s a quick and easy way to grab screenshots from the iPhone. Just hold down the home button (the big round one at the bottom) and then click the On/Off button on the top the phone.

The screen should flash white, and the screenshot will be waiting for you in the Camera Roll folder of your photos gallery. Easy.

← Older Entries