Category Archives: Web Design

General content relating to web design

Responsive Prototyping

Recently Axure Co Founder and Product Manager Victor Hsu, posted in the forums that version 7 is going to be delayed so that they can spend more time with new features for responsive prototyping. Unless the application is going to be a complete rewrite of ode and concepts I can’t see how this will ever work. I like many people driven by employers and clients to use Axure for create ‘wireframes’ have on several occasions made mobile and desktop versions of a prototype in Axure with limited degrees of success. The overal problem with a tool like Axure when it is put into the modern (although not that modern if you enjoy the rants of Jeremy Keith this week who reminded us that many people have always worked with fluid layouts, is that Axure is fixed width at its core.

When I first used Axure back in 2007, it gave my team and I an opportunity to reduce the time wasted writing detailed functional specifications and designing detailed screens for an application that already had a defined layout. It gave us the ability to focus on features and not to concern ourselves with the application chrome.

For us; a development team consisting of database/system admins, php developers, front-end developers and systems testers, it saved us huge amounts of time.

Providing we wrote detailed notes on widgets and pages, worked with variables and state changes with panels we were able to maintain a virtual copy of the live application in Axure that could be validated with the product owner, give the dev team the necessary information to write and build the new branch of the app and meant that our tester didn’t have to write as much for her test scripts because there was something to validate against.

And this is where I would like to leave Axure. It is a fantastic tool for prototyping applications. Semantics aside we all know there is a clear difference between what the general public may call a website, and an application. Websites are the things we lose hours on looking at cats and reading drivvel, applications are the things that you put something in and you get something out.

I don’t know what is going to be in Axure 7, but they have some competition on the horizon from the big boys namely Adobe.

This week I got to see the preview for Adobe Edge Reflow. Although Reflow is being promoted as a responsive web design tool, I see some major opportunities here for creating prototypes by the audience that Axure is aimed at – people are are not able to write code.

During the demonstration, Piotr Walczyszyn walked through creating a simple site layout; header, footer content blocks, using the graphical interface that allows you to drag divs across a column grid system which you can set up specifying number of grids, gutter size and what the total width wil be in percentages.

The interesting part of Reflow is when you start to look at what happens when you resize the canvas. Using some drag controls you can expand/contract the canvas until something starts to look rubbish and then add a breakpoint. From here you can adjust the elements on your layout repeating ad infinitum.

Just from the demo it is clear that you can visually put together acceptable site concepts. I do however have some gripes with Reflow.

During the demo, Piotr regularly switched between using pixels to set maximum sizes and percentages. For example, when setting a breakpoint for a background image after a certain width he set the max-width of the image using pixels, this was after the introduction explaining about flexible images as described ages ago by Richard Rutter.

Classic Adobe code bloat. Edge Reflow uses HTML5 Boilerplate at its foundation for your creations. A good start yes, but as with the majority of these starting frameworks it is known for having a lot of shit in it you’re unlikely to ever use. The example html file created during the demo saw all the tell tale signs of html generated by an Adobe product. Every single div on the page had a derogatory id tag. box1,box2,box3,box4,img1,img2,img3,img and so on and so on. if that wasn’t bad enough, every image was given the class image. Stating the bloody obvious?

All your CSS is added to a reflow.css file and is normalised with boilerplate – not that it can be making an huge wins because as with the html the reflow.css is huge and contains a great deal of repetition (it has to when #box1,#box2, #box99999999999 are most likely going to be identical.

Finally, and I am sure this is just going to be in beta…… the generated code only works in Chrome. in fact, they have even gone to the lengths of putting a disclaimer into your page code for you so that on body load if the browser is not Chrome, it will instead show an annoying text block:

Preview HTML generated by Reflow is meant to be viewed in Google Chrome and may not display correctly in other browsers.

Now I wonder why they’ve done that?

Even with all of this said, I don’t think you should discredit the possibilities for Adobe Edge Reflow which is now in the preview on Cloud and you can download it now. It could become a great tool for responsive site prototyping and quickly learning where issues in the layout are going to arise without the need for knowing the code behind it.

 

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/