These buttons have been made by utilising the CSS :before attribute and Modernizr to ensure that browsers that don’t support CSS transitions but do support the :before attribute don’t break. However, even without Modernizr or JavaScript enabled these buttons will degrade gracefully.

The HTML markup is about as simple as it gets:

<nav id="btns">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a> 
</nav>

Next we have our basic button styles:

#btns a {
display: inline-block;
position: relative;
width: 5em;
padding: .25em .5em;
border: 1px solid #aaa;
font-weight: bold;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.3);
color: rgba(0,0,0,.6);
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#eee));
background: -webkit-linear-gradient(top, #fff 0%,#eee 100%);
background: -moz-linear-gradient(top, #fff 0%, #eee 100%);
background: -ms-linear-gradient(top, #fff 0%,#eee 100%);
background: -o-linear-gradient(top, #fff 0%,#eee 100%);
background: linear-gradient(top, #fff 0%,#eee 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,.1); }

#btns a:hover {
border-color: #aa305e;
background: #ec528d;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f874a4), color-stop(100%,#ec528d));
background: -webkit-linear-gradient(top, #f874a4 0%,#ec528d 100%);
background: -moz-linear-gradient(top, #f874a4 0%, #ec528d 100%);
background: -ms-linear-gradient(top, #f874a4 0%,#ec528d 100%);
background: -o-linear-gradient(top, #f874a4 0%,#ec528d 100%);
background: linear-gradient(top, #f874a4 0%,#ec528d 100%);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.3) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.3) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.3) inset; }

#btns a:active {
border-color: #832448;
background: #f76499;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#f76499));
background: -webkit-linear-gradient(top, #ea4383 0%,#f76499 100%);
background: -moz-linear-gradient(top, #ea4383 0%, #f76499 100%);
background: -ms-linear-gradient(top, #ea4383 0%,#f76499 100%);
background: -o-linear-gradient(top, #ea4383 0%,#f76499 100%);
background: linear-gradient(top, #ea4383 0%,#f76499 100%);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; }

Then for the directional arrows:

.csstransforms #btns a.prev {
border-left: none; }

.csstransforms #btns a.next {
border-right: none; }

.csstransforms #btns a:before {
display: block;
position: absolute;
top: .25em;
left: -.625em;
z-index: 1;
width: 1.4375em;
height: 1.4375em;
border: 1px solid #aaa;
border-top: none;
border-right: none;
content: "";
background: #fff;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fff), color-stop(100%,#eee));
background: -webkit-linear-gradient(-45deg, #fff 0%,#eee 100%);
background: -moz-linear-gradient(-45deg, #fff 0%, #eee 100%);
background: -ms-linear-gradient(-45deg, #fff 0%,#eee 100%);
background: -o-linear-gradient(-45deg, #fff 0%,#eee 100%);
background: linear-gradient(-45deg, #fff 0%,#eee 100%);
-webkit-border-radius: 0 4px;
-moz-border-radius: 0 4px;
border-radius: 0 4px;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.075);
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.075);
box-shadow: 0 2px 0 rgba(0,0,0,.075);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }

.csstransforms #btns a.next:before {
left: auto;
right: -.625em;
border: 1px solid #aaa;
border-bottom: none;
border-left: none;
-webkit-box-shadow: 2px 0 0 rgba(0,0,0,.075);
-moz-box-shadow: 2px 0 0 rgba(0,0,0,.075);
box-shadow: 2px 0 0 rgba(0,0,0,.075); }

.csstransforms #btns a:hover:before {
border-color: #832448;
background: #ec528d;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f874a4), color-stop(100%,#ec528d));
background: -webkit-linear-gradient(-45deg, #f874a4 0%,#ec528d 100%);
background: -moz-linear-gradient(-45deg, #f874a4 0%, #ec528d 100%);
background: -ms-linear-gradient(-45deg, #f874a4 0%,#ec528d 100%);
background: -o-linear-gradient(-45deg, #f874a4 0%,#ec528d 100%);
background: linear-gradient(-45deg, #f874a4 0%,#ec528d 100%);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 0 rgba(0,0,0,.1); }

.csstransforms #btns a.next:hover:before {
-webkit-box-shadow: 2px 0 0 rgba(0,0,0,.1);
-moz-box-shadow: 2px 0 0 rgba(0,0,0,.1);
box-shadow: 2px 0 0 rgba(0,0,0,.1); }

.csstransforms #btns a:active:before {
border-color: #832448;
background: #f76499;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ea4383), color-stop(100%,#f76499));
background: -webkit-linear-gradient(-45deg, #ea4383 0%,#f76499 100%);
background: -moz-linear-gradient(-45deg, #ea4383 0%, #f76499 100%);
background: -ms-linear-gradient(-45deg, #ea4383 0%,#f76499 100%);
background: -o-linear-gradient(-45deg, #ea4383 0%,#f76499 100%);
background: linear-gradient(-45deg, #ea4383 0%,#f76499 100%);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }

.csstransforms #btns a.next:active:before {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }

If you feel as though this technique could be improved upon or you end up using it on one of your sites then please let me know via Twitter.

I was initially going to bite the bullet and purchase a brand new Macbook Air but figured I’d probably want to upgrade again within the next 12-24 months, so despite the fact that everyone seems to be raving about the Air at the moment I thought going with the SSD upgrade instead would save me some money in the long run.

Choosing the SSD

Obviously the most important part of this process is in deciding which SSD to go with. As always our trusty friend Google had plenty to say on the matter but not everything it spat out was entirely helpful. I did however find this article from MacGateway had enough information to get me started.

There are already a number of good quality Solid State Drives to choose from and this is only going to increase as the technology behind them improves. I decided to go for a mixture of price, space and all-round speed settling on the 128GB Crucial M4 in the end.

Installation

I’ve always been a bit of a clean freak when it comes to computers. I love reformatting my HDD (now SSD) about every 6 months in an effort to trick myself into thinking I have a completely new machine. I had an external HDD lying around that I used that to back up all of the files I wanted to keep and took this opportunity to install a clean version OSX Lion.

Replacing the HDD with the SSD couldn’t have been simpler (assuming of course you have the correct tools), whereas swapping out the SuperDrive with the HDD was a little bit trickier. To get the job done I basically followed these step by step instructions from ifixit.com and watched this guy take his machine apart on YouTube:

• Hard Drive replacement tutorial
• Optical Drive replacement tutorial

Conclusion

So far everything seems to be a lot snappier than it was before, applications are responding a lot quicker and waiting for my machine to boot up in the morning is now a thing of the past. If you’re thinking about performing a similar upgrade on your machine – do it, you won’t regret it.

Today, sites are being viewed on a number of different devices and browsers each with differing dimensions and screen resolutions, gone are the days of the one size fits all design philosophy.

A responsive redesign

Ethan Marcotte outlines in his game changing book ‘Responsive Web Design’ that fluid grids, flexible images and media queries are the three technical ingredients that are needed for responsive web design, but that it also requires a different way of thinking.

So equipped with this new found knowledge I set out to create a WordPress theme that would allow users to easily read the content on this site regardless of screen size. I decided to take what I already knew from working with Starkers HTML5 and mixed it together with the HTML5 Boilerplate and Andy Clarke’s 320 & Up boilerplate extension.

A fresh coat of paint

While I was at it with the whole responsive thing I also thought I’d go with a new WordPress inspired colour scheme, a homage to Flight of the Conchords on the homepage and the inclusion of Maykel Loomans’ pull quote technique on some of the blog posts and pages.

Updated projects

I also took this opportunity to add some of the more recent projects I’ve been working on over the last nine months, such as the newly designed Well Studio site, some Which? Local refactoring and Mishcon de Reya responsifying.

What next?

I still need to complete the contact form on the contact page and at some point I’d like to start posting about my photography, but before I can do that I really need to make sure that what I have in mind will work in a responsive manner.

In the meantime I’m hoping this new look will inspire me to write blog posts a little more frequently but as always, only time will tell…

From the moment I arrived at St Pancras train station it felt like I was playing a real life version of ‘Where in the World is Carmen Sandiego?’ it seemed like I had just missed other conference goers by only a matter of hours when I checked in on Gowalla.

This trend continued until after I had checked in at the Premier Inn (where everything’s premier but the price) and headed on out to the now famous:

Erskine Bowling

Bowling shoes • photo by Marc Thiele

As far as the bowling was concerned everyone seemed to peak early except wee @jackosborne who improved only slightly as the night went on.

Now I haven’t exactly been to a lot of web design conferences but I’m pretty sure it’s safe to say that the people who go look forward to these sort of social events almost as much as the conference talks themselves.

During the course of the night I had the pleasure of meeting some amazing people from within our industry where many great conversations were had.

And even though I wasn’t lucky enough to be apart of a bowling team I did get the opportunity to knock over a few pins every now and then.

I didn’t stick around to see which team was crowned champions but overall the night to me was plenty of fun.

Conference Speakers

Albert Hall • photo by Simon Collison

Over the course of the day there were some brilliant ideas and opinions presented from some of the industry’s most respected voices like Dan Rubin, Mark Boulton, Sarah Parmenter, Elliot Jay Stocks, Jon Tan, Tim Van Damme, Greg Wood, Veerle Pieters, Andy Clarke and Brendan Dawes.

All my favourite talks in one way or another seemed to revolve around the content. From Mark Boulton’s idea of designing from the content out, not the canvas in, to Greg Wood’s personal experiment with art directed/editorial design and whether or not this works on the web, then finally Andy Clarke’s idea of telling stories with ‘Once upon a time on the web’.

For me the conference accomplished everything it set out to do:

New Adventures… will be carefully curated; chock-full of integrity, opinion, and fresh content, with an emphasis on shaking things up and challenging convention. This event has inspiration, thinking, and intelligence at its core. It will encourage debate, enthuse, excite, ask questions, and look for real outcomes.

Now although New Adventures was always billed as having a fast-paced punchy format, my one and only criticism would be to say that 10 speakers in a day is a lot to take on – and a lot to take in.

The After Party

Argh! • photo by gablaxian

A few hours later and we arrived at Escucha to find plenty of fellow web geeks catching up on the days events.

There’s always a few factors at play when it comes to hosting a successful after party (in my opinion at least). The venue, the free tab at the bar and the volume. All of which were spot on!

Final Thoughts

Overall the New Adventures in web design conference in my eyes was a huge success, I love the opportunity to catch up with other people in our industry to discuss and/or question the direction in which we’re all headed.

• For more reviews and write-ups of the conference check out lanyard.
• And for all the photos of the event there’s no better place than the New Adventures flickr pool.

Thanks @colly and team for such an entertaining and inspiring conference.

Everyone’s doing it… ok, so maybe not everyone but it’s definitely starting to gain some traction amongst the designers who are prepared to push the boundaries – or at the very least experiment with them from time to time.

Hicks Design

How do we use them?

First we need to set the viewport to device-width

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then we can either link to external stylesheets

<!--[if !IE]>-->
    <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />
    <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="ipad.css" />
<!--<![endif]-->

Or we can add them to an existing stylesheet

/* target the minimum width of the browser window */
@media screen and (min-width: 900px) {
    .class {
        background: #FFE11A;
    }
}

/* target the maximum width of the browser window */
@media screen and (max-width: 600px) { }

/* target both the minimum and maximum width of the browser window */
@media screen and (min-width: 600px) and (max-width: 900px) { }

/* target the maximum width of the device */
@media only screen and (max-device-width: 480px) { }

/* target the maximum width of the device and it's orientation */
@media only screen and (max-device-width: 480px) and (orientation:portrait) { }
@media only screen and (max-device-width: 480px) and (orientation:landscape) { }

/* target the iPhone4 retina display */
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { }

Is it supported?

The browser support for media queries is actually pretty good. The latest versions of Firefox, Safari, Chrome, and Opera are all using it. Internet Explorer 9 will be, but IE8 and below do not :( however there is a jQuery media queries plugin – for those not-so-capable browsers.

Final thoughts

One thing to keep in mind – Although we can now tailor our designs to suit different devices we’ll still be dealing with the exact same content. (CSS3 flexbox can help rearrange some content if necessary) So even if we decide to use CSS to hide images on the iPhone, they’ll still be downloaded by the user.

Notable Mentions

• Mediaqueri.es – A collection of responsive web designs.
• Less Framework – A CSS grid system for designing adaptive web­sites.
• CSSgrid – A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.
• A Jason Grigsby article – On media queries for mobile being fools gold.

Ed Merritt

Simon Collison

If you’re anything like me, then there’s bound to have been times where you’ve written something, clicked the send or submit button and then realised later that you’ve left a typo in your wake.

Sure, we should all take the time to check over our text before setting it in concrete but then again we’re only human.

Thanks to our tendency to rush into things I decided to go in search of a WordPress plugin that would allow people to edit the comments they leave on this site… Editable Comments by Julien Appert was what I found.

The plugin allows users to edit their own comments based on a time limit set in the admin section. Although it wasn’t entirely what I was after right out of the box, I was able to disable the plugins CSS and use my own by doing the following:

Add code to comments.php

Or functions.php depending on where your comments code is.

<?php if ( class_exists( 'WPEditableComments' ) ) { WPEditableComments::link('Edit'); } ?>

Remove plugin styles

You’ll need to add this to your functions.php file.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
    wp_deregister_style( 'dialog' );
    // deregister as many stylesheets as you need...
}

Then use the following CSS identifiers

Just work your CSS magic in your stylesheet.

.ui-dialog-titlebar { }
.ui-dialog-title { }
.ui-dialog-titlebar-close { }
.ui-dialog-titlebar a:hover { }
.ui-icon { }
#dialog.ui-dialog-content { }
#dialog_content { }
#dialog_commentform { }
#dialog_loader { }
#dialog_comment { }
#editable_comment_buttons { }
#editable_comment_buttons input { }
#editable_comment_buttons input:hover { }
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

In closing

Hopefully this will be useful to those of you that would like to add this feature to your own WordPress site.

Please feel free to leave a comment below and check it out for yourself. I’ve since disabled comments so unfortunately you won’t be able to see it in action here. However, you can still check it out on the plugin authors website.

It’s been roughly 2½ years since Elliot Jay Stocks first released Starkers, a completely naked WordPress theme for designers and developers to build on.

Like so many others I found Elliot’s theme invaluable, and so about 7 months ago I decided to create an HTML5 version that others would be able to use.

Starkers is a bare bones WordPress theme created to act as a starting point for the theme designer…Elliot Jay Stocks, Starkers

With the introduction of WordPress 3.0 I’m pleased to unveil the new version of Starkers HTML5, just like the previous version this one has been based on Elliot’s Starkers, which in turn was based on the new default theme known as Twenty Ten.

So what’s new?

Thanks to WordPress 3.0 theme developers now have new APIs that allow them to easily implement custom backgrounds, headers, shortlinks, menus, post types, and taxonomies.

The Twenty Ten theme shows off all of these new features, whereas Starkers leaves the functionality but strips back the styling.

For a more comprehensive look at everything that has improved in WordPress 3.0 you can check out the 3.0 Codex page.

Final notes

Starkers HTML5 comes packed with Modernizr, a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

For a more in-depth look into HTML5 you can check out the following websites:
HTML5 Doctor, Dive into HTML5, the WC3 working draft and the WHATWG working draft.

Karl Dawson also has a similar yet slightly different HTML5 version of Starkers available on his website called Brave New World, make sure you check it out.

Although Starkers HTML5 is a great starting point for any WordPress theme development I highly recommend you take the time to check out and dig through Paul Irish and Divya Manian’s HTML5 Boilerplate.

Download from GitHub →

There are plenty of different options out there for you when it comes to making your site go sideways, firstly the horizontal way have a template that you can download and have a play with.

Chris Coyier has also come up with this solution using jQuery to create a table based layout on the fly, while Antonio Lupetti discusses this option of manually setting the width of your containing element.

How I Went Horizontal

I think I may have decided to go the road less traveled with the QCD Boards website, choosing to dynamically set the width of the containing element using jQuery.

Sure it may be considered bad mo-jo to handle page layout with JavaScript and it may not degrade as nicely as I’d like but has anyone really come across a bulletproof technique yet?

Well the idea behind this method is to come up with a set width for each post, multiply it by the number of posts you have and then include that figure in the CSS file, which in turn forces the browser to grow horizontally.

This is achieved by first setting the width of the post element in the CSS file:

.post { width: 800px; }

Then all you need to do is include this simple jQuery function:

$function() {
    var numElements_single = $('.post').size();	
    var wrapperWidth_single = numElements_single * 800;
    var wrapperWidth = wrapperWidth_single;

    $('#wrapper').css( {width: wrapperWidth} );
});

And you should end up with a layout structure similar to this:

Obviously if you want to employ this technique on your own site then you could change the values to something that better suits your needs. Also, if you require more detailed instructions on how to implement this method just let me know and I’ll do my best to help you out.

In Closing

I know that there are plenty of horizontally scrolling websites out there so if you’ve come across a different/better solution for scrolling against the grain then please let me know.

A Helpful Tip: if you hold shift while using your mouse wheel, most horizontal websites should scroll sideways for you.

Websites and consequently WordPress have come a long way since the Kubrick theme was bundled with the core version back in 2005. As sad as it may be, there comes a time when even the best designs need to be put to rest.

With the addition of drop down menus, custom header images, gallery styling, author information, more widget areas and valid HTML5 the new theme seems like a decent step in the right direction.

At this stage WordPress 3.0 is set to be released to the public in early May 2010. However, if you can’t wait till then you can go and download yourself a copy of the nightly build and have a tinker with it today.

I’m looking forward to getting my hands on the final version, stripping it back and making another theme similar to Starkers HTML5.

My journey of self discovery started with the release of my new WordPress theme which was initially going to be called ‘Genesis: an HTML5 variant of Starkers’ but seeing as there was already a theme framework with a similar name, Elliot Jay Stocks and myself decided on ‘Starkers HTML5′ instead.

So my confusion lay in the use of ‘an HTML’ instead of ‘a HTML’. At first I thought it was a simple typo by Elliot but then it dawned on me (thanks to a little bit of Google searching) that not all people pronounce the letter H the same way I do… weird I know.

Aitch vs Haitch?

H is the eighth letter in the basic modern Latin alphabet. Its name in both British and American English is aitch, plural aitches, though it is also pronounced haitch if you’re cool like me.

There is plenty of information as to why there are two different pronunciations of the letter H but I’d personally like to thank the Catholics.

We conducted a survey of the television programme Wheel of Fortune over a period of some weeks, just to see how many of the participants were aitchers and how many were haitchers. The results: 40% aitched and 60% haitched… Australians from a wide variety of backgrounds are haitchers these days. –Ab(h)ominable (H)aitch, by Frederick Ludowyk

So is it an HTML or a HTML?

The rule of thumb is that you use ‘a’ before words that start with a consonant sound and ‘an’ before words that start with a vowel sound, so depending on how you pronounce the letter H will determine how you write it.

I personally say haitch instead of aitch and I understand that it’s most likely the lesser of the two alternatives but I’ve always been one to cheer for the underdog.