Responsive Interview with Jack Roscoe

Novni Responsive Design Layout

A few weeks ago I received an email from Jack Roscoe telling me about a site he had just launched,

On first look and without looking into it too much I was really impressed with the layout, responsiveness and above all the speed (finally someone paying attention to performance as a high priority).

The content and concept of the site alone was awesome and worth a feature, so throwing in great responsiveness and he had a winner. I emailed Jack back similar feedback and asked if he would answer a few questions about himself and the site. Here are Jacks answers.

An Introduction

I’m a 24 year old web developer based in the Leeds, UK. I graduated in 2011 with a New Media degree which was a broad course covering digital media in general. I’ve always had an interest in technology and the web, but it was at this point that I became interested in web development.

During my final two years of university I ran a small company with a course mate where we designed and developed websites for local businesses. I joined a digital agency in Leeds straight after I graduated and have been there ever since. I really enjoy having the ability to be creative with web technologies and that’s one of the things that keeps me interested.

Why I Chose Responsive

One of the main goals of the site was to make it as quick and easy to use as possible. I don’t think I could have achieved this without a responsive design. I wanted users to be able to visit the site while on the move or away from their desktops, without any constraints.

I spent a lot of time mobile testing to make sure the site could run on as many devices as possible, including older, low end handsets. The key was to make the service really accessible. Three days after my launch, I’m seeing that 17% of my visitors so far have come from mobile. I’ll be interested to see how that number changes over time. However, as an initial impression it’s a very strong indication that Responsive was a good choice.

The Approach

I started off with research. Before writing any code I thought hard about what would make me want to use the website. I then decided on the key features and at this point I had a vague idea of how the site might look. Next, I spent a lot of time wire-framing and planning how best to utilise colour within the design. I knew I had to design some successful feedback loops that would give users gratification from what is largely a one-way experience. I took a very step-by-step approach, holding off on coding to think things through and slowly piecing things together.

Once I had decided on the basic user flows and visuals, I started to design the site in browser. I made rough sketches for any of the more significant features. My design is quite simple, and this approach meant that nothing was added to the site for the sake of it.

With the core features in place, I started to write the copy and test what I had already built, making modifications as I went along. Following a large number of revisions I ended up with a site that looked nothing like it did when I started. Personally I think that’s a good sign!

The Build

I can turn my hand to most aspects of web development, however my strengths lie in the front end. Some parts of the build I found particularly tricky (especially the server set up!). The site is built on CakePHP. Sass was my CSS preprocessor of choice and I used jQuery for some of the front end behavior. I also used a few additional plugins; Modernizr, iCheck, Autosize and FastClick. My server is with Digital Ocean and is running a LAMP stack with Varnish.

Focussing on Performance

As always with mobile, speed and performance are crucial. The server setup I have in place plays a key part in keeping the load speeds down. I’ve also tried to keep the number of visual components on the site to a minimum. I’m using Modernizr to add some progressive enhancements. This means that any fancy nice-to-haves, which could potentially impair the site for mobile visitors, are only loaded for desktop users who have extra bandwidth and processing power available. I’ve also added a few more subtle changes for example replacing ‘click’ instructions with ‘touch’ and other minor details.

Additionally, I did all the usual tricks of CSS and JS minification and set up gzip and cache-control on the server side. Finally I used the FastClick plugin to remove the 300ms tap delay imposed by many mobile browsers, which makes the site feel that bit faster.

It was awesome to have Jack as a feature site, I highly recommend checking it out and reading or sharing a story yourself.

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>