I love this image , spotted by @rishil :)
All posts in Web
Tilt to Scroll in Instapaper
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!).
CSS3 Media Queries and jQuery
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
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!
- Page Structure [COMING SOON]
- HTML5 Audio Unplugged
- Fun with HTML5 Forms
- Getting Started with HTML5 Video
This isn’t one of those blogs…
You know how there are those blogs that are updated regularly, and they have wonderful tutorials on everything? They keep you up to date with the latest trends. They have lots of regular commenters and a community of followers and evangelists?
Yeah. This isn’t one of those blogs. I barely have time to brush my teeth in the morning, and I certainly don’t have time to log in every evening and write something mega-awesome and valuable. Besides, there are plenty of those blogs out there and I encourage you to find them.
No, this is just a sporadic catch up with what’s going on with me. If I stumble across something I find useful then I’ll drop in a piece about it, and if you leave a comment or a question I’ll try to get back to you.
For a current run down on my brain, check out my Tumblog.
If you want a stream of my nonsense, I’m on Twitter.
If you want to read something useful, check out my articles for Think Vitamin.
And if you’re wondering about this lovely theme, it’s from WooThemes.
So hang around and enjoy yourself, but if this place is pointless then don’t blame me :)
rich
(Flickr image from mar00ned)
Custom Fonts in WordPress with Cufon
A couple of weeks ago I got an email from Ben who said
“I would love to know how you do those header custom fonts …!!”
Well, without wanting to turn this blog into an episode of Why Don’t You I thought I should really answer this question on the blog so that others could have a read. Continue Reading →
WordPress Custom Fields For Beginners
This is a tutorial for beginners, and we were all beginners once.
To a beginner I remember custom fields looking quite pointless. I couldn’t quite grasp what they were for.
Then, after building a few WordPress sites, I watched an excellent tutorial from Chris Coyier over at CSS Tricks and it really opened my eyes. There’s a link at the bottom of this post to Chris’s excellent video series. And that link was generated using a custom field.
Continue Reading →
Simplifying Forms
Sometimes you need to make bold decisions and really shake up conventions to get results. It can be scary, other people might point at you and laugh, but what’s the point if you’re not going to try something new?!
Here’s a case in point. This is how the old search forms from one of the sites I work on (www.packyourbags.com) used to look:
(NB. The form on the left has the newer design icons, but the form elements themselves are the same as they were on the old site.)
The convention for search forms is to put text above or next to the form field, explaining what the field is for. So we have ‘Destination’ before the destination dropdowns and ‘Duration’ before the number of nights. It makes complete sense. It’s logical. It’s even usable. To an extent…
How the competition fares
But could it be better? I think so. So I went hunting for inspiration and, surprisingly, most other holiday websites follow this convention. In fact, many of the market leaders have awful search forms. Take these examples from Thomas Cook, On The Beach and Direct Line Holidays:
Yuk!
K.I.S.S.
How can we simplify this? How can we make it more usable. How can we encourage our users to search. If you look at any of the search forms in this post so far they do the opposite – they discourage casual browsing because they are, frankly, scary to look at. So many fiddly options. So much text. It’s worth noting that Direct Line do have a more options/less options toggle – which is a nice idea. I’m just not sure they’ve done it the best way possible.
The fundamental question then is: why do we need all the text?
If we’re on a holiday website, and a dropdown’s default value is ’7 nights’, isn’t it obvious that the dropdown is for the duration of the stay? If we’re on a holiday website and the dropdown says ‘Spain’ isn’t it obvious that it’s a dropdown for destination? And so on, and so on.
The ‘A-ha!’ moment
And that’s when it dawned on me. Remove the text. Keep the label tags but hide them with CSS (we still want them there for accessibility). It’s implied what each form field does. It’s obvious. So I removed all the text apart from the adults, infants, and children bit:
Each form field is still clear, you can still tell what it does. I changed some of the text in the form fields, so ‘+/- 3 days’ became ‘give or take 3 days’ for example. It’s plain English. It’s simple. It does what it says on the tin. And, I’d argue, it’s easier to use and will (we hope!) encourage our users to browse more. We’ll have to wait a few weeks to get some stats which have any meaning, but the feedback so far as been positive.
Other things I changed included:
- Adding padding to each element, so the text can breathe inside it’s little box;
- Justified the width of the controls. Although if the date control was the same width as the destination control it would look odd;
- Added a light yellow (in-keeping with our brands strong yellow) to ‘pop’ the form elements off the page;
- Gave the calendar much bigger and bolder icon; and
- Introduced plain English in the controls to make them simple and obvious.
BTW – The reason I left in adults, kids and babies is because we want a default setting for adults – 2 – and so it needs to say ‘adults’ somewhere else. And as soon as we put an ‘adults’ label above the control we need to do the same for kids and babies just to maintain some consistency. It’s not perfect, but it’s not bad either. I’d welcome suggestions on how to improve this further!
A breakable convention
This is a big step, because it bucks the convention set and adopted by most of the other holiday sites. Conventions often exist for a reason, but I think this one needs to be broken. It may not be rocket science, and there are some much better looking forms out there, but in the context of our market (package h0lidays) we hope this new approach to search forms helps our user find what they want in less time.
Our search form is a work in progress, and there are many other areas on the site which we’re updating. I’ll share those with you, and the design process behind them, very soon.
Compare the old and the new
Alternate styling with PHP
First off, I can’t take any credit for this.
All the credit goes to Paul Denya for the answer, and Elliot Jay Stocks for the question.
EJS asked:
Does anyone know of a way (with PHP) to add an ‘alt’ class to every other <li> in a list? Like how WP does with comments.
(He did this over at http://twitter.com/elliotjaystocks/status/2688884863)
http://twitter.com/elliotjaystocks
And the answer came back from Paul.
<li class=”<?php foreach((get_the_category()) as $category) { echo $category->category_nicename . ”; } ?>”></li>
Clever yet simple – the hallmark of genius!
You can follow them both at @pdenya and @elliotjaystocks.
Thanks guys!