Pixel Perfect = Designing to Fail

We’re forever hearing the phrase ‘make it pixel perfect’. It is a phrase which I have throughout my career retorted with a blunt NO. For me those who are still trying to force designers to be pedantically accurate over a box being 1px left or right, or a font being ever so slightly too big or too small are the type of middle management or clients who have been around a long time but have not had their foot on the gas or a toe anywhere near the peddle for well over 5 years.

There is no such thing as a pixel anymore, it is not a single unit of measurement the way it was meant to be or even worked prior to the HD revolution. Apple have completely changed the resolution playing field with the Retina display providing screens with double density pixels.

Last week at CES, the playground got even bigger and harder to work towards as almost every manufacturer on display showed off their latest displays; introducing the ULTRA HD revolution. These new 4K displays; capable of delivering twice as much horizontal and vertical resolution than your current 1080p display, albeit out of everyone bar the rich and famous’s price range right now (Samsung’s flagship display comes in at 95″ and approximately $12,000) will be the standard within 18 months at the longest.

To make the situation graver, this is only one of the two formats which comprise the UHD revolution with Red One, manufacturers of the leading HD Video recorder used on many high budget movies are already working on the production of an 8K camera!

In stark contrast, emerging markets like India and certain territories in Africa are going online predominantly through mobile handsets, these themselves vary in dimension and quality with a mixture between low-budget introductory phones from the likes of HTC, whilst Nokia spent a great deal of time researching these countries to bring out their range of Asha devices, some with keyboards, some with touch screens some with both. The landscape is vast.

With all this in mind, how can it be possible to create a pixel perfect design and in turn a pixel perfect website?

Where we are today

Today many agencies and designers are getting their heads around how to adapt their design process and many are failing. The ones which are struggling, over quoting, under quoting, under valuing their teams are those that are still building sites in a production line. These are the scenarios where cost on a project is being worked out by how many pages need to be designed in Photoshop for the client to sign off on. Even when designing at a page template level it’s wrong.

Many have shifted to the idea of producing work that is more reminiscent of mood boards in the shape of style tiles. I endorse this concept but it still doesn’t give us a visual reality to work towards.

The problem is all down to context. With a few carefully chosen words we can fix this. What if instead of designing a ‘pixel perfect’ site we create a visual representation of the site in a specific environment. For example, here is how Site A will look on a 15″ Macbook with standard display in Chrome.

Now we have something that is tangible and provides us with a working goal. It doesn’t solve the issue of what does it look like in Internet Explorer 7, or on the iPad, but we do have something to work towards.

Paul Lloyd, a front-end developer at Brighton User Experience Consultants Clearleft wrote a series for netmag.com on his methods behind designing a responsive site in a week in which he works towards two design files for a page layout, a desktop and a mobile scamp. Paul then says he works on the middle ground of the layout during development where it can be clearly seen what happens in certain scenarios.

I believe this is the best way of working right now and I do believe in still using a graphical editor to create visual representations of the site. There are always going to be team members and clients who need to see how something is going to look before they want to feel it, this will never change, however using these documents as the absolutely be all and end all of everything that is output at the end is just folly.

Code Igniter: Getting started fast

I’ve opened a Vimeo account to be able to share what I am finding as I go along with Code Igniter. I’m still getting my head around Camtasia, the software I am using in this video for screen casting, but check it out anyway. It’s un-edited and a bit rough, but here is a guide on how to do the basic setup for Code Igniter.

A quick start guide for Code Igniter 2.1.3 from Andy Parker on Vimeo.

Digital Marketing & Web Analytics from Darren Ware

I worked with +Darren Ware for just over a year on some pretty chunky projects as well as some work for startups and small e-commerce teams. His Marketing and Analytics work is astounding, the information that he produces is deep. His insight into what was happening on existing websites acted as the right hand in any of the strategy and planning we put forward for redesigns helping us define the difference between what was fact and what was fluff.

Darren is now offering businesses of any size his services as a consultant to anyone in the South East of England including Kent, Sussex, London and Essex. His results really have been integral to the success of a number of organisations I have worked with on projects over the last year and he was even kind enough to help me set up some sensible analytics and goals for this blog and my main site byandyparker.com

For more on Darren’s servies, visit http://www.darrenware.com/digital-marketing-analytics-consulting/

adding CSS, Javascript and images in Code Igniter

Last week I started learning Code Igniter. This has come about because I have been working with a great team building websites over the last year or so in Expression Engine, a CMS built on Code Igniter. There are a lot of things that frustrate me about Expression Engine and I am sure that knowing a bit about how the Code Igniter framework operates will help me in resolving some of those pesky EE issues.

After losing half a day trying to mess around with routes.php because I couldn’t seem to pull in my CSS files I discovered a reference to placing these directories in the root. Now I thought this would be the application root; everything under one roof. It turns out that when guides reference root in Code Igniter they are in fact talking about the root of the site. I think this is a bit sloppy. It means that I now have an uploads folder, images, css and js folders in the same places as system and application. I’d much prefer to have them in application and perhaps there is a way of doing that but I haven’t found it yet.

I’m going to be putting up videos on how I am getting along and the settings in Code Igniter on my new vimeo account. The first of these videos is here http://vimeo.com/57220196

Freeagent 30 Day Trial

I have signed up with freeagent.com, an application for managing your accounts. It’s designed for small businesses and sole traders like myself. I saw Roan Lavery, the co-founder of FreeAgent talk at Dibi in 2011 on the startup day. At the time I wasn’t interested in his application but I did admire his ability to present in public and I was impressed with his talk about starting a business.

It clearly helped because almost two years later here I am looking up FreeAgent and giving it a go.

I have been trading now since the end of October, this puts me in a fairly good place to be starting accounts as there isn’t all that much to enter into the system.

I started off by creating my bank accounts which was a simple process, however I had some trouble with CSV uploads for bank statements finding that the QIF and OFX files are more reliable. My business bank account is with HSBC which disappointingly doesn’t support any kind of data export. This makes no sense to me as my personal accounts with Nationwide did. Fortunately, Aral Balkan has also encountered the same problem. He has created a Bookmarklet which creates an Microsoft Quickbooks or CSV extract of any statement you view on your HSBC account.

I didn’t look at any help guides at all to see whether I could find my way around. I confess, I do have a bit of background when it comes to book keeping and accounts. My first job was supporting an accounts software package for solicitors, and I also developed and designed some of the screens and user workflows.

With the opening balances in, I began recreating invoices for the work I had done, logging mileage and expenses and then setting up projects. In hindsight, I should have started off by creating the projects I had worked on and am currently working on. This is because once you have the project created, you can start to tie things up from invoices right through to the bank reconciliation with your imported statements.

Being only in my first few months, a lot of my purchases have come out of my personal bank account. I don’t want to set this account as the primary as all of my invoices are being paid into the correct business account. However, the only items in that need to be reconciled in the Banks section of the app are those that are related to your primary account.

Regardless, I went through my now already bloated spreadsheet of purchases and receipts and began reconciling items in all the accounts.

All in, it took me around 4 hours to setup and get all the figures to date in the application, to the best that I can. I don’t know how accurate that is yet until I check the bank balances in the app with what is in my accounts which I am going to do at the start of next month as there are some payments pending, but I have so far found FreeAgent very simple to pick up and go.

I did have a few problems however. Firstly I managed to import a CSV for a bank account into the wrong profile. It took me half an hour to delete out 60 transactions that were in the wrong account.

I couldn’t work out what to assign certain purchases to. For example, I have bought a lot of domain names in the last few months and I have currently put these under Web Hosting, not technically true, but there wasn’t another option that made clear sense.

I also haven’t been entirely clear on the opening balances process. I think that it is showing that I have been using my own money that I had saved to support myself (rent etc) but I am showing a negative profit, I guess that this could be correct and that I should be working on paying myself back the money I have spent in setting up.

The dashboards are very clear and the whole thing sings quite soundly. The only thing I have to query is the price. It is £15.00 per calendar month for a subscription. That actually makes it more expensive than Sage’s Cloud version of Line50, it’s not by much but if you’re talking about accounts package benchmarks Sage is always going to come into view. That said, you’re paying extra to not have the confusing that is often created from using Sage.