Recently, quite a few people have been asking me how I’ve been getting on with my MacBook Air and iMac set-up, which I got about eight months ago after blogging about my plans for ‘a cloud-centric Mac set-up’ way back in April last year. In short: I couldn’t be happier. If you’re thinking of doing the same or simply want to read a bit more about this set-up, read on…

The definition of the cloud

When we say ‘the cloud’, we tend to think of Dropbox, and whilst it’s true that Dropbox is very much the key to keeping my two Macs in sync, there’s more to it than that. The thing that many people forget is that we’ve actually been living in the cloud — to some degree — for quite some time: IMAP email, for example, is one of the oldest and most common examples of data being stored on servers to allow access from multiple devices. So if you’re thinking of going to a two-or-more Mac set-up, you’ll be pleased to know that you’re already a fair way there. (Unless you’re using POP3, of course, in which you case you really need to get out of the 16th Century.)

There are many other elements of the cloud that we’re already using on a day-to-day basis that have nothing to do with Dropbox; activities such as reading our Google Reader feeds with an app like Reeder; or using online (as opposed to local) services, like listening to music on Spotify or Rdio. Taking your entire set-up to the cloud doesn’t actually take that much more effort.

The check-list for a cloud-based set-up

If you’re thinking of going the same route as me and getting two (or more) computers with the intention of keeping them in sync, here are some steps I recommend you take:

1. Use IMAP email. It pretty much goes without saying, but as I mentioned just a moment ago, it’s probably the oldest and most essential bit of cloud technology you’ll need.
2. Buy the biggest Dropbox account and put everything in it. I keep our photo library, music, TV shows, and movies on an external drive, but everything else is in Dropbox.
3. Set up as many apps as you can to sync using Dropbox. Sometimes it’s as easy as storing your library (like, say, for an app like LittleSnapper) in a folder within your Dropbox, but every app is different. See my note on the potential pitfalls further down the page.
4. Get an iCloud account. You don’t need to worry about email because you’re already using IMAP, but iCloud will sync iCal and Address Book, which is essential not just for multiple Macs, but if you have iPhones and iPads, too. You can also sync your photos via iCloud, but I choose not to as we manage our photo library separately. Oh, and you could also use Google Calendar and Google Contacts if you’d rather not pay for iCloud, but iCloud is so deeply baked into OS X and iOS that personally I find it’s easier to just have it all running automatically.
5. Work out what you’ll have to sync manually and remember to do it. Again, see my note below about the pitfalls.
6. Invest in an online back-up solution such as CrashPlan. It’s not just about being diligent in case you lose the data in your Dropbox; I also use my CrashPlan account to back-up the data from our external drives, such as our photo library, music, TV shows, and movies. And in the unlikely event you ever find yourself on another machine and are unable to access the Dropbox servers, you can restore selected files from CrashPlan.
7. It’s not essential, but I personally found it a lot easier to set up both new Macs at the same time, so that everything had a fresh — and equal — start. If you’re using an existing computer or computers, make your life easier and do clean OS installs on both.

Minor pitfalls of cloud-based syncing

Every application is different and will therefore each will have its own nuances when it comes to cloud-based syncing. In my experience, I’ve only experienced very slight hurdles with two applications: FontExplorer X and TextExpander.

Font organisation is something of a dark art at the best of times, which is why I use FontExplorer X in the first place, but syncing via Dropbox does unfortunately add another layer of complexity. Initially I’d thought I could simply store my FEX fonts folder within Dropbox, but for some reason this caused some conflict issues where FEX thought it couldn’t find certain files even though they were there, possibly due to the application preferences not being synced. After some fiddling around that lead nowhere, I eventually opted to store the fonts folder within my default user folder; in other words: outside of Dropbox. Unfortunately this means that syncing is a manual procedure, which involves me making a semi-regular back-up from the app’s preferences panel and storing that back-up in Dropbox, ready to be launched by the app on the other Mac. It’s not as bad as it sounds, because although it’s not automatic, the back-up can contain all of your fonts as well as your preferences. But yes, of course I’d like FEX to implement some proper Dropbox syncing.

TextExpander syncing is in a remarkably similar position, but is slightly more confusing in that TextExpander does actually offer Dropbox syncing out of the box. The problem with that, though, is that it uses a folder than has to sit in the root of your Dropbox, which slightly frustrates a pedant like me who wants everything stored neatly in its designated place. The solution, thankfully, is pretty close to what I do with FEX: I generate back-ups to a folder that lives wherever I want it to live inside Dropbox, and then launch those back-ups on the machine that needs to sync. Again, not that graceful, but one advantage is that TextExpander can generate those back-ups automatically.

There’s one other application-related downside: the rather arduous task of having to install apps twice. For most apps it’s an easy task, but the doubled time spent installing Creative Suite was something of a chore, to say the least.

The downsides mentioned above paint a very clear picture of where cloud syncing needs to go: we need to stop worrying about files alone; we need preferences, installations, and in fact every type of data to be transportable. The recent update to Tweetbot is a great example of that, from keeping muted settings synced across devices to remembering your place in the timeline. As I said back in my original post about moving to a cloud-based set-up: you’re effectively only changing the chassis. The device itself is becoming less and less relevant.

(As an aside, quite a few people have asked me how I feel about security, since Dropbox has been hacked in the past. Personally, I’m not concerned at all. If my account was ever hacked and someone got access to my PSDs, it’s not the end of the world. If you have particularly sensitive information on your computers, you might disagree.)

Performance

Lastly, on a non-cloud-related point, one of the questions I get asked again and again is: ‘how does the Air perform with Photoshop or [insert name of another processor-intensive app]?’ And my answer is the same every time: amazingly. In fact, I’ve yet to notice a performance difference between the Air and the iMac, even though the latter is significantly more powerful in terms of spec. They both run on SSDs, which is possibly the biggest contributor to speed. Even my old MacBook Pro was like a new machine once I’d put an SSD in it. If you’re buying a computer today, make sure you pay the extra to get an SSD because it really is the best upgrade you can perform.

Both computers are a joy to use and even more so for sitting at the extreme ends of the spectrum: the iMac for its ridiculously huge screen and connectivity; the Air for its über-portability. This is — without a doubt — the best computer set-up I’ve ever had. If you’re thinking of doing something similar, do.

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/ideas-of-march-2-0/ 2012-05-03T15:24:19+01:00 2012-03-15T15:30:00+00:00
Wow, has it really been a year? Twelve whole months since Chris wrote that fateful blog post that got me back into blogging? It looks like it, as he’s blogged about this year’s Ideas of March and asked a whole bunch of us to join in once again.
]]>


Wow, has it really been a year? Twelve whole months since Chris wrote that fateful blog post that got me back into blogging? It looks like it, as he’s blogged about this year’s Ideas of March and asked a whole bunch of us to join in once again.

I’m extremely grateful for the kick-up-the-bum Chris gave me last year. It reignited my passion for blogging and I’m proud to say that I kept it up. In fact, looking back over the last twelve months’ posts shows that there are a whopping 48 of them (including this one). That’s an average of just under one a week.

Chris asked that we blog about blogging, so I’d like to briefly talk about two things specifically:

• My friend Daniel Howells (the man behind siteInspire) has been blogging a lot recently, and it’s all fantastic stuff, so I think he deserves a bit more recognition. As well as being a great curator, Daniel is a great writer, examining the how and the why with fantastic in-depth posts that ask important questions about our industry. I’m always excited when I see a new post from howells.ws show up in Reeder, whether it’s a detailed look at content consumption via Facebook, a showcase of an independent radio station, some thoughts on the future of iOS and OS X, or an honest description of UX decisions that go into Daniel’s side projects. And each time, with equal parts admiration and envy, I ask, ‘how on earth does he have the time?!?’ Then I remember that I should probably stop moaning about my lack of spare time.
• For extra special meta points, my second thing is a link to the first ever blog post on our new Viewport Industries website. (For those that don’t know, Viewport Industries is a new product-based company I’ve formed with Keir, enabling us to give up client work.) Anyway, yes, the post. Go and have a read if you’re interested in some of the design and build decisions that went into the site’s creation, in particular our implementation of Josh Emerson’s Responsive-Enhance script.

That’s all from me. Chris Cornutt is keeping a list of this year’s posts. Viva la blogolucion!

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/responsive-summit/ 2012-02-28T14:25:31+00:00 2012-02-28T13:00:00+00:00
Last Thursday, I popped over to London and met with a small group of folks to chat about the various tools, techniques, problems, and solutions surrounding the subject of responsive web design; a day we semi-jokingly referred to as ‘Responsive Summit’. As soon as we announced it, the hashtag exploded with all sorts of idiotic snark, but I’ll get to that later. For now, I want to discuss the day itself and some of its outcomes.
]]>


Last Thursday, I popped over to London and met with a small group of folks to chat about the various tools, techniques, problems, and solutions surrounding the subject of responsive web design; a day we semi-jokingly referred to as ‘Responsive Summit’. As soon as we announced it, the hashtag exploded with all sorts of idiotic snark, but I’ll get to that later. For now, I want to discuss the day itself and some of its outcomes.

Firstly, I should talk about its inception. The previous week, Chris Armstrong and I had a Skype chat to discuss our own approaches to responsive web design. It was a productive talk and afterwards I tweeted that I had ‘just had a very cool chat with @armstrong, trying to work out the ideal responsive web design workflow. Good times.’ Our mutual friend Josh Brewer — over in England on Twitter-related business — replied: ‘We should chat. Been having similar conversations of late.’ Then Alex Morris made the suggestion of a get-together: ‘A big group powwow would be so helpful for all of us.’ The rest, as they say, is history, and — thanks to the efforts of Martin Beeby at Microsoft and a bunch of people on Twitter who expressed interest in participating in such a discussion — a week later eighteen of us were sitting around a room at Microsoft HQ in London, with five more joining in via Skype.

I should preface my notes that admitting I only noted down subjects that were of particular interest to me and I thoroughly recommend you read the blog posts written by the other people who were there on the day; there’s a list of them all on Lanyrd.

Please also be aware that none of this is being presented as conclusive. It was never the intention for us to sit down in one day and then come up with a set of rules to dictate to the rest of the world. To think that so many snarky comments assumed we would — or could — even do such a thing is ridiculous. Think of the day’s outcomes as a starting point; an opener to a much larger and much more involved conversation.

Workflow

• Designing (in Photoshop or Fireworks) every possible breakpoint for a website is impossible and a waste of time. We should focus more on designing style guides and thinking of those as systems that would help guide the designer, the developer, and the designer-developer without needing literal depictions of every stage in a design. ‘Keyframes, not wireframes,’ said Cennyd.
• Dan Mall noted that clients bring expectations and responsive design can pose surprises. It’s up to us to set those expectations.
• Mark Boulton suggested that the idea of the designer presenting an idea as some sort of ‘grand reveal’ is damaging — a good client should be happy with the mess we make along the way (because the process is inherently messy) and we should help educate them by explaining our processes before anything starts.

Layout

• I asked if our enthusiasm to move to fluid layouts has actually clouded our judgment to a degree and resulted in layouts breaking when they become too wide? What about optimal measures? What about massive images? I say we shouldn’t be afraid of using max-width where appropriate, although I think I’ll expand on my thoughts for pragmatic web design in another post.
• Mobile-first doesn’t always work. I suggested that it’s not just because of different contexts and different users, but also because of the type of design: if the mobile version only has a couple of changes from the desktop view, it makes sense to design the desktop version first and work back from there, which is exactly what we did with Belong. Again, I’ll probably follow this up with a separate post.
• Not enough is said about the mistakes we make. As an industry, we should not only be proposing conclusions, but also admitting to the scenarios where we’ve had to go back on something that just didn’t work, like Mat Marquis did in his recent article for A List Apart.

Sensors

This is not really related to sensors per se, but came up during that section:

• Using display:none is harmful, because if referring to an image, that image will still be downloaded by the browser. We need a new method to combat this; perhaps something like load:none for when browsers really shouldn’t load content at all.

Images

Responsive images is a big area of interest to me and it’s also the area where I’ve encountered the most problematic parts of the responsive web design equation. You can read about some of that in my last post, ‘Better Background Images for Responsive Web Design’, and I’ll be writing a lot more about it in the near future.

• I suggested that mobile shouldn’t always mean lo-res. Consider the iPhone’s Retina Display: you don’t necessarily want to load lo-res images if the phone has a higher pixel density. (We’re going to see the Retina Display become an even bigger consideration once the iPad 3 comes out and even more so if the rumoured new MacBook Pros support it. Does that mean all of our images on the web are suddenly going to look awful? Perhaps so, although again that’s another post.)
• We spoke a lot about the inline img element, but what about background images, too? Well, they’re actually in a better position: it’s okay to use media queries to selectively load different background images, as the images aren’t loaded until needed. (I must admit that I wasn’t aware of this!)
• Everyone agreed that the proposed picture element felt like the most sensible way forward as a replacement for img, as it follows the same source-selecting patterns as the audio and video elements.
• Scott Jehl has already created a JS-based polyfill for picture. Nice one!
• However, in spite of the unanimous enthusiasm for picture, we wondered if the best possible solution might actually lie with a new file format, rather than as a problem for HTML and CSS? Getting a new format approved and supported might sound like a pipe dream, but consider .WOFF: it happened very quickly because it’s effectively a wrapper around an existing file format. Could that be the answer?
• In terms of what can we do, right now, Josh Emerson’s solution could very well be the best: a lo-res image is loaded by the img element’s src by default, then, if it’s detected that the browser can support a wider image, a hi-res one is loaded in its place using Javscript. The fallback, therefore, is always the smaller file.

When I get a spare moment (ha ha), I’ll be implementing Josh’s method on this site. Jeremy has written about its benefits, too.

A sort of conclusion

As I said at the beginning, there were no hard conclusions to come out of the event, nor were there intended to be. This is the start of something much bigger: a discussion that will, in its next stage, move to more localised ‘summits’ across the globe. The immediate goal for those of us who were there is to respond to all the questions we got on the day via Twitter and blog posts, which Josh has compiled into one Google document. Hopefully that alone should illustrate that our little gathering was for the benefit of the community, not ourselves.

[Photo by Chris Armstrong.]

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/ 2012-02-16T13:00:28+00:00 2012-02-15T17:00:00+00:00
Since publishing this yesterday, I’ve revised the post in response to many people saying that this is simply a stop-gap for browsers without background-size support. That’s true to a point, but the method proposed here offers several advantages to the CSS-only approach.
Responsive web design, we have a problem.
We apply percentage-based widths to our img elements to get fluid images and this is a very good thing. But what about background images? Support for background-size is pretty abysmal right now and still isn’t bulletproof, even when it is supported (I’ll get to that in a second), so we’ve been hacking our way around it, usually by using inline img elements and absolutely positioning them behind the content. This is all well and good, but at certain browser widths, it breaks.
And it breaks horribly.
]]>


Since publishing this yesterday, I’ve revised the post in response to many people saying that this is simply a stop-gap for browsers without background-size support. That’s true to a point, but the method proposed here offers several advantages to the CSS-only approach.

Responsive web design, we have a problem.

We apply percentage-based widths to our img elements to get fluid images and this is a very good thing. But what about background images? Support for background-size is pretty abysmal right now and still isn’t bulletproof, even when it is supported (I’ll get to that in a second), so we’ve been hacking our way around it, usually by using inline img elements and absolutely positioning them behind the content. This is all well and good, but at certain browser widths, it breaks.

And it breaks horribly.

The problem with inline images

I found this out the hard way while designing and building the Belong site (which we launched yesterday, by the way). Consider this:



And then this:



It’s true that you could attempt to avoid this situation by creating really tall background images, but that not only means massive files; it means you’d always have to ensure your content never gets too long. Impossible for dynamic sites.

There’s another problem, too: our faux background image has no idea where its own horizontal centre is. On the original JPG, I’ve placed a horizontal line at 300px from the top and 300px from the bottom to indicate its centre, but that line will almost never be in the centre of the element because the img displays from its top. Consider our example again:



At this point you might be wondering if this really matters, and for some images, it doesn’t. However, for Belong, this was a major problem: it meant that — at some widths — there was no way you’d actually see the t-shirt design:



You can play with the problem demo page in the browser. Be sure to resize the window.

The problem with background-size

So they’re the problems with using inline img elements, but what about going for a CSS-only approach and using the experimental background-size property, as suggested by commenters below? It offers a key advantage in being able to detect its own centre (using background-position:centre centre) and does quite well in most scenarios. However, it still breaks when a containing element become very narrow.

The reason for this is that width:100% is given priority. You could change it to height:100%, but then it would break at wider sizes instead. You could give both width and height a value of 100%, but then you’d lose proportion as the image fails to maintain its correct ratio. And the really key thing here is that you’d need to know your preference in advance, which just won’t work for dynamic content: add more text and suddenly your container’s height could be way more important than its width.

To see this action, play with this additional problem demo page in the browser. Again, be sure to resize the window to see the points at which this approach fails.

Correction: as pointed out by Chris Mousdale in the comments below, background-size does indeed work. Rather than using 100% or auto size values, be sure to use cover instead; e.g.:

div.div01, div.div02, div.div03 {
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}

​

A cross-platform solution

So what we need is a way for the image to fill both its width and its height at all times, while retaining proportion; like background-size:cover, but for all browsers. It shouldn’t matter if the container is wider than it is tall — or taller than it is wide — at any given point; it should be able to give priority to the appropriate dimension no matter how they’re changed by either the amount of content or the actual browser window size.

I was aware of a jQuery plugin called jQuery Backstretch, written by Scott Robbin, that does exactly this. It’s a fantastic script and I’d already used it on a client project, but the problem was that it only works on the body. I asked the Decode boys (the chaps behind Belong) if they might be able to modify the code so that it could works its magic on any element.

And they did. Say hello to jQuery Anystretch.

As well as being able to apply Anystretch to any block-level element, an additional refinement is that you can use multiple instances of it:

$('.div01').anystretch("img01.jpg");
$('.div02').anystretch("img02.jpg");
$('.div03').anystretch("img03.jpg");

Further advantages of using Anystretch include being able to change the background image on click, set a fade-in speed, and turn the whole thing into a gallery with just a couple of lines of code. I won’t go into all that here; you can find jQuery Anystretch on GitHub.

To fully appreciate the power of the script — and everything I’ve bleated on about in this post — be sure to check out the third demo that illustrates the Anystretch solution, or, for the best working example, check out wearyoubelong.com, which includes the gallery functionality.

All credit for this fork goes to Dan Millar of Decode and of course to Scott Robbin for the original jQuery Backstretch.

To the inevitable nay-sayers complaining about the use of Javascript for presentational elements: there are more important things in life.

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/review-mantis-stand-for-ipad/ 2012-02-15T17:39:31+00:00 2012-02-10T15:00:00+00:00
Do you make cool stuff? Send me your product and in return I’ll give it a fair, unbiased review on the blog, along with some photos.
Just before Christmas, I received an early present in the post: the Mantis Stand for iPad, courtesy of the folks at Flatscreen Arms. Such a generous gift definitely deserves a review!
]]>


Do you make cool stuff? Send me your product and in return I’ll give it a fair, unbiased review on the blog, along with some photos.

Just before Christmas, I received an early present in the post: the Mantis Stand for iPad, courtesy of the folks at Flatscreen Arms. Such a generous gift definitely deserves a review!

The first thing that struck me about the Mantis Stand is its level of Apple-like craftsmanship. The whole thing is solid aluminium and sturdy as hell. The balance is spot-on: enough weight to stop it from being knocked over, but light enough to move around easily.



I was half-expecting the swivel to feel awkward, like it does on many stands, but this, too, is spot-on: rotating between portrait and landscape orientations is incredibly easy and yet nothing feels loose. It’s the same when adjusting the angle of the tilt: everything feels just right. That’s extremely handy for when you want to lie the iPad flat, like when you’re playing two player games.



One thing that really surprised me is just how usable the iPad is when docked in the stand. So usable, in fact, that I’ve hardly ever taken it out. It’s great for flicking through your feeds over breakfast and my neck feels so much better for not straining to look down at the iPad sat on the table.



To be honest, though, my favourite use for it — as you may have guessed from the header photo — is in the kitchen: pop the stand next to your ingredients on the worktop, fire up your recipe on a web page or cooking app, and away you go!

I couldn’t be happier with this stand. In terms of both aesthetics and usability, it’s brilliant. Wonderful, in fact. I don’t ever want to part with this stand. However, it would be remiss of me to avoid mentioning its price, because — at £99.99 — it’s not cheap. In fact, it’s a sizeable chunk towards a new iPad! But if you’re in the market for a premium iPad stand, it’s worth the cash. Considering the material and craftsmanship, it’d be hard to imagine them being able to sell them any cheaper.



One other thing I should probably note is that it’s worth making sure you get the right one — I was sent the iPad 2 version and it’s resulted in my iPad 1’s corners getting ever-so-slightly damaged. But hey, that’s entirely my own fault.

All in all: highly recommended!

Many thanks to Dan Lindfield and the folks at Flatscreen Arms for making this fantastic stand, and of course for sending me one! You can view my hi-res photos on Flickr.

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/dog-days/ 2012-02-28T08:31:19+00:00 2012-01-25T16:00:00+00:00
Today, I interrupt the normal flow of web-, tech-, and design-related blog posts for something a little more personal. It’s not profound, not particularly important, and of no relevance to anyone but me. But it’s something I wanted to write down for posterity. Because today was an entirely normal day and, in hindsight, it’s normal days that warrant remembering the most.
I took Ozzy out for his regular lunchtime walk, across the fields near where we live. He loves the fields because he has the chance to run around, investigate all the strange smells, and attempt to find the occasional tasty poo snack. I love the fields because you can see for miles across the rolling hills and the countryside is spectacular no matter in which direction you look; even on a dull, grey, rather nondescript day like today. It’s relaxing, and I think we both enjoy the fact that we very rarely meet another soul; not even from afar. We get to enjoy all this open space and it’s just us.
]]>


Today, I interrupt the normal flow of web-, tech-, and design-related blog posts for something a little more personal. It’s not profound, not particularly important, and of no relevance to anyone but me. But it’s something I wanted to write down for posterity. Because today was an entirely normal day and, in hindsight, it’s normal days that warrant remembering the most.

I took Ozzy out for his regular lunchtime walk, across the fields near where we live. He loves the fields because he has the chance to run around, investigate all the strange smells, and attempt to find the occasional tasty poo snack. I love the fields because you can see for miles across the rolling hills and the countryside is spectacular no matter in which direction you look; even on a dull, grey, rather nondescript day like today. It’s relaxing, and I think we both enjoy the fact that we very rarely meet another soul; not even from afar. We get to enjoy all this open space and it’s just us.

At five months old, Ozzy is generally getting better at leaving those all-too-desirable objects he’s not meant to eat, mainly thanks to us calling him away with treats. And today he was pretty good at that, and I was pleased with myself for remembering to load up my pocket with dog biscuits. But having snuck into the bushes out of my eyesight, he found the remnants of a baby bird carcass and the temptation was simply too great. I tried asking him nicely to drop it, then offered him treats, then shouted at him, and then attempted to grab it off him; all to no avail. With the bones planted firmly in his mouth, he bounded around the field, darting my every move, happy playing this most entertaining of games. Eventually I managed to grab his collar, pry the gore from his jaws, and reward him with some treats, hiding it behind my back as I did so. We walked further along and I threw it into the bushes, which was rather silly, as once we’d turned around he picked up the scent again and started searching for it once more. I only managed to distract him by running off, convincing him that we were playing another game. He chased me, drool flying from his flaps. Every time I gave him a treat my gloves absorbed yet more of the disgusting fluid. I was laughing all the time, though.

When we were nearly back at the start of the first field, he disappeared as I neared the stile. I went on, fully expecting him to reappear, and then realised that he’d been just a little too long. The pause was too great. I knew exactly what he was doing and I should’ve known he’d use my limited field of vision to his advantage. Running back into the field and over a small mound, I found him happily devouring his own poo and had to physically drag him away from it. I scolded him and told him how disappointed I was in him, but he couldn’t see my point of view. He looked up at me with eyes that said, ‘if you could make your favourite food come out of your bottom — and hot — wouldn’t you eat it?’ Well, that’s a fair point.

In between the field and pub car park where I always put his lead back on, there’s a bridge that crosses the River Chew over a small waterfall. Suddenly Ozzy decided he was going to explore the steep bank on the higher side of the waterfall and before I could stop him, he was standing in the shallow water. Rather impressed with himself, he stepped forward and suddenly dropped into deep water. Being so near the ledge of the waterfall, a gentle panic washed over me, but thankfully it also washed over Ozzy (along with a fair amount of water) and his instinct returned him to the path. It turns out he can swim.

Once on the bridge, he realised that being soaking wet was a rather exciting experience and he decided to spin wildly to mark the occasion. He came close to spinning off the side — into the waterfall proper — about three times, but luckily span close enough for me to grab his collar and re-attach the lead. It all worked out quite nicely, as his run-in with the river had washed off all the mud from the fields.

When we got home I attempted to dry him whilst wrestling the towel from his jaws and thought, I always want to remember days like this.

(Photo taken at Christmas by my fiancé Samantha)

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/ 2012-02-15T17:42:07+00:00 2012-01-20T16:00:00+00:00
In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).
Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!
]]>


In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).

Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!

Here’s the PSD. And, in the interest of showing how a static Photoshop file can translate into a fluid web page, here’s an HTML demo.

But what about our precious 960 grids? I hear you cry. That holy number has served us perfectly well, dividing easily into multiple columns and accounting for browser chrome on 1024 screens to define an accepted ‘safe area’. But the 960 grid was born in a world of fixed-width layouts. If we’re building fluid designs, the simple reality is that your grid can be whatever size you want, because we’re concerned only with relative widths. The days of worrying about absolute widths have passed.

I should point out here that I’m not proposing a new framework. In fact, I’m not even saying that we should all start using grids whose containers are specifically 1000px. The point is that it’s about making our lives easier, and 1000px happens to be an extremely easy number to deal with.

Caveat 1: margins

A small caveat is that the 1000px grid assumes you’re not bothered about gutters on either side of the container, which might bother some people depending on the way you do your column margins. I’ve included guides in the PSD to indicate where they’d usually be, if that helps. I expect some people will also complain about there only being six columns, but personally I like to keep things simple: nice big numbers and nice big columns. Adapt as you see fit.

Caveat 2: rounding errors

In Webkit browsers, an error with the way the rendering engine treats percentages means that although we’re dealing with whole numbers, the widths can actually appear as if they’re slightly off:



If you’re a pedant, this might keep you awake at night, but I tend to take a more pragmatic approach to web design and accept that a little inconsistency never killed anyone. In the example the misalignment is obvious because of the way the columns are shown, but in the real world it would barely be noticable, especially when dealing with ragged-right type.

I’d love to know if you find this useful!

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/2011-in-review-goals-for-2012/ 2011-12-29T15:15:07+00:00 2011-12-29T14:00:00+00:00
As the end of the year rapidly approaches, it’s time for me to write my annual review of the year that has been and my hopes for the year that will be; my main hope being, of course, that the world does not end. That would be bloody annoying.
]]>


As the end of the year rapidly approaches, it’s time for me to write my annual review of the year that has been and my hopes for the year that will be; my main hope being, of course, that the world does not end. That would be bloody annoying.

Previous years’ posts: 2010, 2009, 2008, 2007.

2011 in review

This last year was a relatively big one for me personally, especially towards the end, when Keir and I formed Viewport Industries and announced our plans for the Insites: The Book, one of the bigger projects we’ll be putting out in 2012.

There are two things directly related to this site that I’m particularly proud of: firstly, the fact that I got back into regular blogging, thanks to Chris Shiflett’s motivational post ‘The Ideas of March’, and ended up averaging a new blog post every 1.2 weeks. Secondly, I finally got round to redesigning this site. It’s changed a little since then, with me making the odd adjustment here and there, and I hope that next year will see it transition into something that feels a little more ‘complete’.

As planned, I spoke at fewer events this year, but still ended up doing seven. Some went well and some went so-so, which was interesting, because — with the exception of The Brand Perfect Tour and Insites: The Tour — I did the exact same talk, ‘With Great Power Comes Great Responsibility’, at all of them. I think the highlights were New Adventures in Nottingham, An Event Apart in San Francisco, and Interlink in Vancouver. All incredible audiences.

Speaking of Vancouver, Sam and I were lucky enough to turn our trip into a holiday after the event and we stayed up in Tofino — an absolutely beautiful part of the world. It gave me the chance to take some photos with my brand new (at the time) GF1.




And speaking of events and travel, a personal highlight was being able to see so many good friends on these various trips; something made considerably easier thanks to many of us sharing the stage at multiple conferences. It’s always a pleasure to hang out with folks like Sarah, Andy M, Andy C, Christopher, Dan D, Dan R (bonus photo set: ‘Dan Rubin taking a photo of me taking a photo of him’), Jessica, Ben, Marc, The Doctor, Naomi, Colly, Aarron, Matthew, Aral, Kyle, Brendan, and of course Keir. And don’t even get me started on the awesomeness that was Brooklyn Beta: I don’t think there has ever been a finer collection of creatives in one room. Thank you, Chris and Cameron, and the wider Analog and Fictive Kin families. Just wish I could’ve seen more of my buddies Sam and TVD (congrats on the new baby, Tim!).




Collaboration is always fun and 2011 was full of team-ups with the boys at Decode: they continued to manage and improve the 8faces.com back-end and shopping cart experience, we launched their new site (which I designed and they built), and we collectively organised the first ever Activate — an outdoors day for web geeks.




In January, Decode will be releasing another new project we’ve collaborated on, which I’ve started teasing on Dribbble.

I’m pleased to say that I pretty much achieved the goals I set out for myself at this time last year, with the exception of releasing more music. That is happening, though: I’m in the middle of the scoring a short film, and music from that should form the skeleton structure of a new EP. At least I managed a mix tape.

My last two highlights of 2011 are purely personal: in October, Sam and I adopted Ozzy, our wonderful black Labrador puppy, and right before we wound down for Christmas, Sam landed a job at Future Publishing, where she’ll start in the new year. It honestly couldn’t be a better start to 2012.




Goals for 2012

Next year is going to be an exciting one. The Viewport Industries stuff is the most important thing on the radar, and with it the move away from client work. We have about six ‘products’ (in the loosest sense of the word) planned for release throughout 2012. On top of that there will be another two issues of 8 Faces and an overhaul of the magazine’s site, which will raise the prominence of its online presence. More on that soon.

On a personal level, the big thing is the fact that Sam and I are getting married at the end of summer. I’d better get designing those invites! Oh, and start working off all that culinary Christmas indulgence…

Thanks, as always, for all your support throughout the year.

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/announcing-insites-the-book/ 2012-01-11T14:27:36+00:00 2011-12-21T10:00:00+00:00
Although I’m concerned that my recent blog posts are starting to resemble nothing more than a long list of project announcements, this is a big one, and one I couldn’t keep quiet about before the end of the year. Please forgive me, because hopefully you’ll find this as exciting as I do!
Last month, when I blogged about Keir and I forming Viewport Industries, I alluded to a ‘sequel’ to Insites: The Tour (the series of small evening web-focused events we ran across the UK over four nights) and many believed it to be a follow-up tour or perhaps even a bigger, all-day event. It is neither. The sequel is Insites: The Book.
]]>


Although I’m concerned that my recent blog posts are starting to resemble nothing more than a long list of project announcements, this is a big one, and one I couldn’t keep quiet about before the end of the year. Please forgive me, because hopefully you’ll find this as exciting as I do!

Last month, when I blogged about Keir and I forming Viewport Industries, I alluded to a ‘sequel’ to Insites: The Tour (the series of small evening web-focused events we ran across the UK over four nights) and many believed it to be a follow-up tour or perhaps even a bigger, all-day event. It is neither. The sequel is Insites: The Book.

What we learned from running Insites was that it didn’t matter whether we interviewed a designer, a developer, or an entrepreneur; everyone has a fascinating story to tell and everyone wants to hear it — we can all relate to the tales of how people get started in the industry, have their big successes, and deal with the occasional failures, only to move on to new and exciting things. And when talking to some of the most well-known, influential thought-leaders in our community, those stories are all the more interesting and inspiring.

So we’re interviewing twenty designers, developers, and entrepreneurs from the web / tech industries who you may have heard of: people like Jeffrey Zeldman, Jason Santa Maria, Kevin Rose, Brendan Dawes, Mandy Brown, Ian Coyle, Sarah Parmenter, Jim Coudal, Ethan Marcotte, Tim Van Damme, Simon Collison, Trent Walton, Tina Roth Eisenberg, and more we’ve yet to announce.

And we’re releasing those interviews as a book.

Not just any old book, though. This is where it gets really exciting. I’ve learned a lot from doing 8 Faces for the last two years and I’ve never been more passionate about creating a physical artefact. Insites: The Book will be truly special. In terms of production values, think 8 Faces on acid. We have some really exciting printing and packaging techniques lined up and, like 8 Faces, the print run will be extremely limited.

The book is shaping up nicely. We’ve completed over half of the interviews at the time of writing and we’re aiming for an April release. I’ll be blogging about the process throughout early 2012 for sure, but to be the first to hear of anything at all, please feel free to sign up to the mailing list and follow @insitesbook on Twitter.

It will be an honour to have you guys along for this next amazing ride!

]]> Elliot Jay Stocks http://elliotjaystocks.com/blog/with-great-power-comes-great-responsibility/ 2011-12-16T02:28:47+00:00 2011-12-16T02:00:00+00:00
Greetings from San Francisco, where earlier this week I spoke at An Event Apart. I’ve done seven events this year — New Adventures (Nottingham), FOWD (London), The Brand Perfect Tour (London), Interlink (Vancouver), Insites (Bristol), Flash On The Beach (Brighton), and now the aforementioned An Event Apart — and with the exception of the panel discussion at The Brand Perfect Tour and the informal chat at Insites, I’ve stuck to one presentation throughout the year: With Great Power Comes Great Responsibility. Now that I’ve done the final event that uses this talk, I thought now would be a good time to put it online and share some notes.
]]>


Greetings from San Francisco, where earlier this week I spoke at An Event Apart. I’ve done seven events this year — New Adventures (Nottingham), FOWD (London), The Brand Perfect Tour (London), Interlink (Vancouver), Insites (Bristol), Flash On The Beach (Brighton), and now the aforementioned An Event Apart — and with the exception of the panel discussion at The Brand Perfect Tour and the informal chat at Insites, I’ve stuck to one presentation throughout the year: With Great Power Comes Great Responsibility. Now that I’ve done the final event that uses this talk, I thought now would be a good time to put it online and share some notes.

I’ve never been a huge fan of putting slides online, because I think their meaning can be completely lost without the accompanying commentary. But for those of you who have attended a talk and want to look at the slides again, you can now find them on Speakerdeck. (If you haven’t seen the talk and this is the first time you’re looking at the slides, please prepare to be relatively confused, especially with the Spider-Man references.)

One thing I never thought of — but got reminded about by an attendee in Monday’s audience — is the fact that many of the sites and designers I reference in the talk might be completely new to some people, and it can be hard to make accurate notes. So here’s a load of stuff I’ve mentioned in the talk, some of which are URLs listed on the slides, and some of which are casual references I’ve made in my commentary…

Sites showcased in the slides

Nike Better World
WebKit Clock
3D Text
Nizo for iPhone
Ben The Bodyguard
Typograph: Scale & Rhythm
Typecast

Influential people

Ian Coyle — possibly the most talented designer / developer hybrid I know working in the industry right now.

Jon Tan — close friend, occasional studiomate, frequent 8 Faces collaborator, and co-creator of Fontdeck.

Rich Rutter — co-creator of Fontdeck, long-time writer about type on the web.

Tim Brown — Type Manager for Typekit and authority on on-screen font rendering.

John Boardley — creator of I Love Typography and Codex: The Journal of Typography.

Don Norman — world-renowned thought leader on the concept of ‘affordance’ and author of The Design of Everyday Things.

Other references

Web Font Loader — Javascript for advanced font-loading, co-developed by Google, Typekit, and Fontdeck.

Destroy The Web 2.0 Look — my talk from FOWD New York in 2007.

Hope some of that proves useful! Photo by Drew McLellan, taken at FOWD.

]]> Elliot Jay Stocks