If you have have ever read any of my Weekly Miscellany posts (or get the newsletter) you might have noticed a slight “obsession” with coffee. Well, thankfully for me, so did the kind folks at Kopi.

They recently got in touch and sent me a back of their Columbian Villa Espreanza to try out which I thoroughly enjoyed. Kopi is a coffee subscription service, here’s how they describe it:

Kopi are dedicated to bringing you outstanding single-estate coffees from around the world. Beautiful, freshly-roasted brews you won’t find in the usual places – delivered straight to your doorstep, once a month.

Plans start at £8.95 a month and include:

• A bag of a different outstanding coffee from around the world delivered to you each month
• Curated by Kopi coffee experts with over 150 years experience
• Roasted to order with our 14 Day Freshness Guarantee
• Choose from beans or ground
• A handy booklet is included with details on the coffee, tasting notes and brewing tips
• Free delivery through your letterbox

They also have a pretty neat shop (OK I admit bias, it’s on Shopify) where you can buy coffee and related equipment. If you like your coffee it’s well worth considering.

When Elliot and I sat down at the beginning of the year in one of the many great coffee shops in Bath we set ourselves the target of “shipping” three Viewport Industries projects in 2013. It’s no secret we really enjoyed our XMAS Special last December so repeating that in 2013 was a no-brainer – we’ll be back at The School of Life on December 16th.

Our second project is another print based endeavour and we think it’s going to be big, quite literally in fact — very big! More on that soon.

Our third and final project is called Insites: ConfShop. I blogged about the idea over on the Viewport Industries site last week but wanted to give a more personal take on why we think it’s an important day and why you should attend.

Inclusivity

ConfShop is small, only 110 tickets will be available. It’s small for a reason — we want to hear from everyone who attends. ConfShop is all about getting together and sharing our ideas, experiences and problems — every thought, experience  idea as valid as the next one.

It’s less about being taught something, more about sharing and learning from each other. If you are new to the industry or have been earning your crust using the web for many years we want you to join us.

We’ll get better at what we do by sharing, being open and inclusive.

Curators not Speakers

ConfShop is focussed around four “curated” groups. We are really pleased that Alex, Sarah, Drew and Rachel have agreed to help us out on the day. Along with Elliot and myself they will be helping keep the groups on track and ensuring that everyone is heard. Of course they will be happy to share their considerable experience too.

No Code, no Design

We’ll be doing some interesting show and tell in the breaks but ConfShop isn’t really about code and design. Rather it’s focus is more on the industry itself. Here’s what we’ll be discussing:

• Client work and products (how can we move from client focussed businesses to product focussed companies) — Curated by Rachel Andrew & Drew McLellan
• Business issues (VAT, tax, accounting, pitching, contracts, finding work and beyond) — Curated by Alex Hunter
• Side projects (how to find the time and create income streams) — Curated by Keir Whitaker & Elliot Jay Stocks
• Working in the industry (work/life balance, keeping up, learning and more) — Curated by Sarah Parmenter

Join Us

We know that ConfShop is a bit different and won’t appeal to everyone but that’s OK. For some it will be uncomfortable, let’s be honest not everyone likes to talk in front of others, but we encourage you to give it a go.

We think it’s going to be a great day and we’ll make you as welcome as we possibly can. As I said earlier I truly believe we’ll get better at what we do by sharing, being open and inclusive.

Learn more and register today »

Last week I travelled up to Milton Keynes to participate in the fourth installment of Milton Keynes Geek Night. Richard and David were kind enough to invite me along to chat about something geeky so I decided to setp outside of my own personal comfort zone and share some of my recent experiences relating to Google Page Speed.

Over Christmas whilst working on the Back to Front Show web site I ran it through Google’s Page Speed assessment tool and was averaging around the mid 80′s. This piqued my interest and so I set about learning how to increase the score and ultimately managed to reach 97/100.

Along the way I learnt a fair bit about caching, both server and browser, CDN’s, httpd.conf files and the inconsistency of online testing tools.

As I said on the night I am still learning and I encourage you to check out the articles at the end of the post. As usual the time others spent documenting their own experiences and expertise helped me a great deal. Special thanks to Harry Roberts whose post “Front-end performance for web designers and front-end developers” I found particularly useful.

The slides won’t make much sense in isolation so here are the 11 main points along with some useful links to help you on your way:

1. Make fewer HTTP requests – The fewer requests you make the quicker your page will be to download. Regardless of size every asset has a cost, whether it be a DNS lookup, bytes to download or a redirect to handle. The fewer the better.
2. Minify and concatenate CSS and JS – As a rule of thumb aim for one CSS file and one JS file per page. I use Mixture to achieve this.
3. Optimise images – Use tools like ImageOptim to squash your image file sizes.
4. Only use what you need – Before including yet another JS library ask yourself the question, “do I really need it?”
5. CSS at the top, JS at the bottom – Put simply JS stops the page rendering, by putting at the bottom the page renders quicker.
6. HTTP Compression – GZip compression is probably the quickest win in terms of reducing the size of your files before they are sent down the wire to the browser. HTML5 Boilerplate provides the necessary code for your .htaccess file (search for # Gzip compression).
7. Browser caching – Use far future expiry headers to keep assets cached in the browser. Again HTML5 Boilerplate provides the necessary code for your .htaccess file (search for # Expires headers).
8. Enable keep-alive – Very simple to implement and will keep one connection open so that your browser doesn’t have to keep requesting new ones for each request. The relevant code is available on the HTML5 Boilerplate site (search for # Set Keep-Alive Header)
9. Cache dynamic content – If you use WordPress I receommend WP Super Cache to cache your pages and posts. Additionally most frameworks have caching facilities built in. Investigate and use wisely.
10. Use a CDN – Consider using a CDN to serve your static assets. Amazon CloudFront is very easy to implement and can grab assets from your web site automatically the first time they are requested.
11. Beware of boilerplates – If you use a boilerplate ensure any referenced assets are in your site. Remember that every file referenced but not present will result in a 404 error page being requested and downloaded. Instead of a 1kb favicon you may well end up with a 1mb 404 page being pulled down in the background. (h/t to Andy Davies for this gotcha!)

Resources

• Front-end performance for web designers and front-end developers by Harry Roberts
• Let’s Do Simple Stuff to Make Our Websites Faster by Chris Coyier
• Speed is Essential for a Great Web Experience by Andy Davies
• High performance web sites blog by Steve Souders
• .htaccess made easy by Jeff Starr
• Google Page Speed
• YSlow
• Web Page Test

Listen

• Adventures with Google Page Speed on Soundcloud

Thanks again to Richard and David for having me along and being very hospitable hosts. If you get the chance to attend MK Geek Night I thoroughly recommend it.

Shopify Brighton Meetup

On Thursday evening I headed along to the Old Ship on the seafront for the first UK Shopify Meetup. Bang on 5.30 the bar was full, much to the surprise of the hotel manager and myself.

It was great to meet everyone who came out the night before Friday’s conference. Swag was given out, t-shirts remain every popular and the scarcity of the Shopify hoodie meant the few that I had went like hot cakes.

There was plenty of Shopify and web chat followed by a number of us heading out to a diner for shakes and burgers. Beer and milkshake aren’t a great mix, just in case you wondered!

Responsive Day Out

(Photo: Marc Thiele)

The following day after taking in the first of many flat whites at Small Batch I headed over to The Dome for Responsive Day Out – as the name suggests a conference devoted to discussing Responsive Web Design (RWD).

On arrival the Shopify supported Small Batch coffee cart was in full swing serving folk, so much so I sadly missed out.

Jeremy had put on a packed agenda and a new, at least to me, format. Three short twenty minute talks followed by a curated Q + A on the sofa.

There were 12 talks spread over four sessions and I managed to see all of them before heading back up the hill to the station for the long train ride home.

Themes

Looking back it’s hard to believe how impactful Ethan’s A List Apart article has been. It’s not yet three years old but RWD as a discipline is now firmly part of our everyday working lives as web designers and developers.

The talks covered lots of ground. Everything from design process, design philosophy, performance, navigational patterns and how big organisations such as the BBC and the Guardian are tackling the problems thrown up by RWD.

One thing that became very apparent, and to paraphrase Sarah, is that we are still very much “winging it”. There’s plenty of unchartered territory and many problems to solve.

In no particular order here are some of the key things I picked up on:

• There’s no right or wrong way to approach RWD in the design process. Our toolset is still being defined. For many of us integrating RWD into our work has been messy and problematic. Some go straight into mark up others spend a little longer in image editing software.
• That said bringing RWD into our workflow is a shift in thinking similar to moving from table based layouts to CSS based layouts.
• Navigational design patterns for small screen sizes are emerging. David Bushell showed a few examples during his session as well as discussing a number of approaches to handle this in your own projects. David’s Off Canvas article is worth your time.
• Large organisations such as BBC News and the Guardian are employing the “mobile first”, or in their case “base experience” approach to development. JavaScript tests are used to determine a modern “cutting the mustard” browser and the “experience” is then progressively enhanced. This ensures the content is available to all, including older browsers.
• Using web fonts on mobile devices, whilst of course doable, requires some planning. We don’t have access to the wide variety of system fonts as standard so picking your fall back font-stack is important. There are a number of ways to deal with the loading of fonts, for example waiting for the files to download and hiding text or using scripts like the Google Web Font Loader to style text whilst the web font is loading.
• We should all consider using asset fonts in our projects. Sites like Ico Moon allow you to create very small asset fonts that can be base-64 encoded and placed directly in your style sheets and conditionally loaded if required.
• Additionally we should also think about using SVG more in supported browsers. It’s also possible to target elements of your SVG with CSS, coupled with media queries this becomes a powerful way to offer different graphics depending on certain criteria, such as viewport size.
• Game console browsers are getting better but are problematic. By offering a “base experience” we can cater for these browsers.
• We need to be conscious of page load times. How we progressively load scripts and stylesheets makes a difference to how quickly we can push our pages to a device. Pragmatism (more on that in a moment) sometimes take precedent over being “future friendly” in this area.
• There’s plenty to get excited about in CSS3, in particular flexbox. This will offer us new and less JavaScript dependant ways to move content around without changing markup.
• The proposed picture element offers us ways of “art directing” imagery in relation to viewport size.
• RWD is not about a handful of break points. It’s about a handful of break points and many “tweak points” – small changes, likely inline (this is relatively straightforward with tools like Sass) and fixing small issues with the layout and design as it bends and flexes.

Pragmatism

Finally a quick word on pragmatism. During his “Anatomy of a responsive page load” session Andy Hulme uttered the “technique that dare not speak it’s name”. That is of course user-agent detection.

I know it’s fraught with difficulty, that browsers are very sloppy at identifying themselves and that the user-agent strings are liable to change but it was refreshing to hear Andy say that for now the Guardian use services like Device Atlas and WURFL. Pragmatism, plain and simple.

Is there ever a case for using these techniques? I would argue in certain contexts yes. The Guardian have a team constantly working on their web presence. They can add, amend and remove at will. This is a very different context to me handing over a responsive site to a local business. It’s unlikely that they will have a budget to keep me on a retainer so using these techniques could ultimately, and inadvertently, break their site moving forward. Again, at least for me, context is as important as content.

Until next year

There was a lot to like about the conference. As always it was great to see old friends and make new ones. The format really worked. The price point was perfect and the content thought provoking. What say you to Responsive Day Out 2014 Jeremy?

Conference audio

Jeremy has kindly made the audio available via Huffduffer. It’s well worth a listen, especially the chat sections.

1. Sarah Parmenter: The Responsive Workflow
2. David Bushell: Responsive Navigation
3. Tom Maslen: Cutting the Mustard
4. Jeremy chatting with Sarah, David, and Tom
5. Richard Rutter: Responsive Web Fonts
6. Josh Emerson: Asset Fonts
7. Laura Kalbag: Design Systems
8. Elliot Jay Stocks: RWD The War Has Not Yet Been Won
9. Jeremy chatting with Richard, Josh, Laura, and Elliot
10. Anna Debenham: Playing with Game Console Browsers
11. Andy Hume: The Anatomy of a Responsive Page Load
12. Bruce Lawson: What’s Next in StandardsLand
13. Jeremy chatting with Anna, Andy, and Bruce
14. Owen Gregory: Antiphonal Geometry
15. Paul Lloyd: The Edge of the Web
16. Mark Boulton: In Between
17. Jeremy chatting with Owen, Paul, and Mark

In 2012 we went on the road and delivered five “Shopify for Designers” in the UK and USA. Not only were they a lot of fun but the feedback was very positive.

If you missed out last year we have good news. Over the last couple of months we have been hard at work putting together a full global programme of workshops and meet ups for 2013. We’ll be visiting cities in the USA, Canada and the UK. Exciting times.

Responsive Day Out Meet Up

We’ll be kicking off with a meet up in Brighton, the night before Responsive Day Out. Join me at The Old Ship from 5.30 – 7pm for a drink, e-commerce chat and even pick up a free t-shirt!

Following that we’ll be visiting Seattle to tie in with our partnership with An Event Apart. We’ll be spending the afternoon of Sunday 31st March at The Easy going over theme building and much more. You can register for the FREE workshop over on the new Shopify Meetups site.

Manchester – Finally!

I wanted to head North last year but it didn’t quite happen. I am really pleased to say that I’ll be at The Studio (pictured above) in Manchester for the first UK workshop on Monday 13th May. As always the workshop is free to attend and you can register now.

Schedule

We are still working on the full programme – confirmed dates are as follows:

• Brighton, UK – Thursday February 28th 5.30pm [Register]
• Seattle, USA – March 31st 1pm [Register]
• Manchester, UK – May 13th 1pm [Register]
• Boston, USA – June 23rd 1pm [Register]
• Chicago, USA – August 25th 1pm [Register]
• San Francisco, USA – December 8th 1pm [Register]

We’ll be announcing further meet ups and workshops in the coming weeks.

Venues

If you are in Boston, Chicago or San Francisco and know of a great space we could use/hire for our workshops I’d love to here from you. Please do get in touch.

Workshop Outline

“Shopify for Designers” is designed to introduce web designers and front-end developers to all aspects of building a theme, from the basics right through to more advanced techniques.

This session will also introduce you to the Shopify Partner Program which allows designers and developers to build a successful business around the Shopify platform.

Here’s what we’ll cover:

• Stores – An appreciation of some of the most well known Shopify stores
• The platform – A look at the main features of the platform and how the admin functions relate to themes
• Themes – A solid look at how a theme is structured as well as an intro to Liquid, the Shopify template language
• Advanced theming – Going deeper into Liquid, you’ll learn how to really customize your themes, for example producing product specific templates and how theme settings can enable your clients to easily customize their site.
• Integrating Shopify – Learn different approaches to integrating Shopify into existing projects
• Resources – A quick whizz round the amazing resources on offer for designers and developers using Shopify, including the theme and app stores

We hope to see you at one of our upcoming events. If you have a question please feel free to get in touch with me via email keir@shopify.com.

A couple of weeks ago I attended the third and final instalment of New Adventures in Web Design in Nottingham (official photos on Flickr). I have been lucky enough to attend all three events and once again it proved a great start to the year.

For the past three January’s the trip up to Nottingham has provided the perfect opportunity to meet up with old friends and make new ones. 2013 was no exception.

It will be sad to see it go but I fully respect Simon and Greg’s need to have a hiatus. Running events, especially ones with over 600 attendees, is a mammoth task for their three person team. There’s promise of it returning in some form, let’s hope that happens.

The Warm Up

The night before the main event I headed over to the Second Wednesday (official photos on Flickr) event hosted by Christopher Allwood who I had the privilege of meeting at the first Pragmatic Web Design workshop Elliot and I ran last year.

Chris put on a great night in a fantastic venue – if you are local and haven’t attended I recommend you get along to the next installment. Both Rob (AKA “The Voice of Newport“) and Rachel gave great talks – be sure to catch them if they are speaking at a conference near you. Oh and buy Rob’s book – apparently I never plug it ;)

A very special mention, with tongue firmly in cheek, must also go to Louise who not only showed off her exceptional driving skills in an impossible to exit car park but also managed to drop us off in another impossible to exit car park miles from our intended destination before heading home to feed her dog! Thanks for the lift.

The Conference

As always the day was packed with great talks. My 2013 favourite was the session by Wayne Hemingway, the co-founder of Red or Dead and now heading up Hemingway Design.

I read lots of interviews and articles on companies and people from other industries as i find that it helps give perspective on the way I work. As such I found Wayne’s talk very inspiring and a rallying cry to take a few risks and see what happens.

Kieran and I talked about our highlights of the conference on Episode 2 of The Back to Front Show and Marcus blogged about the sessions over on the Boagworld blog – well worth a read for more in-depth analysis. Further reviews and photo sets are available on the NA site.

The Newspaper

2013 also saw me get involved in the conference. As well as helping get Shopify on board I was very proud, along with Elliot, to contribute to the conference newspaper.

Towards the end of 2012 Colly got in touch to ask if Elliot and I would be interested in interviewing him and Greg about the New Adventures journey. It was a very easy decision – of course we would.

I have known Simon for a number of years and he kindly gave up his time to be part of the Manchester leg of Insites: The Tour as well as being one of our 20 interviewees in Insites: The Book. A third interview for the third and final New Adventures, very fitting.

We chatted on Skype with Greg and Simon for about an hour and the newspaper team did a great job of trimming our dialogue down into a readable form. It’s a very open and hopefully engaging “insight” into the why, the how and the question of what happens next.

You can download the PDF version as well as previous issues from the NA site.

What’s next?

I have a feeling New Adventures will be back in some form or another. It will certainly leave a hole in the January calendar. If you are reading this and decide to put on something to kickstart the year do let me know!

A couple of weeks ago I blogged about the new podcast Kieran and I are attempting to do weekly. So far so good – the first two episodes are in the can with the third planned for later this week. Here’s a quick summary of what we discussed on the first two show:

• Episode: 002 - In this episode we discuss a wide range of development tools that we both use on a daily basis. Also featured are Graham Smith and his legendary baked goods, our micro review of New Adventures and the delights of a Premier Inn continental breakfast.
• Episode: 001 — In our very first episode we discuss the difficulty of writing your own online biography, the pros and cons of co-working, the move towards flat file site generation, the upcoming New Adventures in Web Design conference, the shiny new Rode iXY microphone and end with bespoke fixed gear bikes.

You can subscribe via iTunes and follow updates on Twitter (@backtofrontshow), you know if that’s your thing!

It seems that 2013 is already turning into the year of the podcast. Andy and Anna launched “Unfinished Biz” earlier this week and today I read that Rachel is launching “Beyond Ink” in the near future.

In the spirit of “the world needs yet another podcast” I am happy to introduce my own return into the fray of regular broadcasting. The Back to Front Show, hosted by me and good friend and regular code collaborator Kieran Masterton, will be coming to an earphone near you very soon.

The what

Here’s the idea. Two Blue Yetis, a so so broadband connection, two coffee obsessed West Country based web dudes, Audio Hijack Pro and topics focusing on working in the industry, backend tech, front-end development with plenty in-between.

Let’s say we have a loose structure that we’ll try to stick to but forgive us our digressions – especially the “in-between”. In other words it’s a not so serious weekly round up of the world we love and work in.

The why

Back in early 2010 I started to host Think Vitamin Radio. Mike, Ryan and I managed 34 almost bi-weekly episodes. It all fizzled without explanation after 18 months, mainly as Mike and I had moved on to work for ourselves and were focussing elsewhere. It was a good run and faired pretty well – we even almost won an award! I have wanted to get back into podcasting ever since but the opportunity never really presented itself.

Elliot and I briefly discussed launching a Viewport Industries podcast but other work got in the way and the idea got parked on the ideas list. However the desire to get back to the mic burned strong. At last years “Insites: Xmas Special” I talked about how I wanted 2013 to personally symbolise less talk (ironic considering I am  launching a new weekly podcast) and more “shipping”. So here we are – let’s see how we get on.

The where

You can find more about the show on our new web site. There’s not much there for now but the site is ready to go once we have recorded our first show. You’ll be able to listen on the site, download the mp3 and all being well grab the iTunes feed before too long.

The when

We’ll be recording weekly, at least that’s the plan. Each episode will go live every Saturday morning! You could say it’s “something for the weekend”. Oh and Tom May if you are reading this I hope your cleaning routine gets back to the good old days.

We hope you enjoy it and it foes without saying that you can follow our Twitter account – @backtofrontshow.

It’s getting a bit dusty around these parts but with good reason. Over the last few months Elliot and I have been completing our first major project and are proud to say that Insites: The Book is now available.

You can grab it in the following formats:

• Limited boxed paperback edition — £23.00
• Digital edition (PDF, EPUB, MOBI) — £9.00
• Physical & Digital Bundle (Limited boxed paperback + PDF, EPUB, MOBI)— £29.00

It’s available from our shop now. We actually opened up sales a couple of weeks ago and couldn’t be happier with the response. If you bought a copy THANK YOU!

You can learn more over on the Viewport Industries site.

If you are a fan of the guitar then this 12 minute video will be of interest to you. I’ll stand corrected but I don’t think he puts a note wrong in all 100 riffs – stunning.

Watch 100 Riffs (A Brief History of Rock N’ Roll) from Chicago Music Exchange on Vimeo.

(Found on Flipboard)