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.

]]> http://nathanstaines.com/photos/italia/feed/ 0 http://nathanstaines.com/articles/a-responsive-redesign/ http://nathanstaines.com/articles/a-responsive-redesign/#comments Fri, 19 Aug 2011 11:00:05 +0000 Nathan http://temp.nathanstaines.com.s131562.gridserver.com/?p=322 Continue reading »

I’ve finally decided to do the responsible thing and go responsive with my website.

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…

]]>

A redesigned mock-up of the logged out homepage

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.