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.

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.