Impossible web design

Audiffred.com

To capture Miryam Audiffred’s personality within a visual composition in internet is an impossible task.

Modern technology is simply not capable of reflecting the magic and energy of human beings like her.

The central part of the design is a panel focussing on what Miryam can offer as a professional writer.

We can be entertained by different approaches and get some help from the arts in order to break the enormous limits of digital screens.

In Miryam’s case we played with colours, we included a suggestive picture, we also managed to create illusions with CSS3 and Javascript, but, at the end of the day, we had to stick to one single focus: what flows from her pen.

And that was no mean feat. Miryam’s pen is agile, active, curious, full of fun and sharp. Now how do you design that?

Just drafts at first … sketch after sketch, on paper, with constant exchanges of ideas about what she wants to show.

Finally we decided on a grid where the user can navigate easily, browsing samples of her work. However, the central part of the design is a panel focussing on what Miryam can offer as a professional writer.

Responsive

The site was built in ExpressionEngine with HTML5 and CSS3 selectors.

The redesign of audiffred.com adheres to the principles of responsive web design

Much of this technology is still in the experimental stage, so part of the richest functionality of audiffred.com can only be perceived and enjoyed with the latest versions of Firefox, Chrome, Safari (and Internet Explorer 9).

Another key decision was to make her site a flexible one, able to respond to different screen sizes and resolutions. Inspiration and guidance for this came from Ethan Marcotte’s proposal.

Current projections suggest that it won’t be long before the majority of people in the developed world will be using mobile devices to surf the web rather than desktops.

Given this trend, publishers and media companies are attempting to get up to date, building mobile specific sites or apps, iPad versions and so on.

With a flexible foundation, elastic images and the use of “media-queries”, the redesign of audiffred.com adheres to the principles of “responsive web design”, a set of techniques that is changing the way we create websites.

Progressive

Like any digital project, audiffred.com is a work in progress and it is worth mentioning two major tasks we have pending.

First, we will re-work some details in a Progresive Enhacement mood in order to make the content more accesible and the design even more device agnostic.

Second, even though the target users are editors and managers with access to advanced technology, we will work on an alternative version for not so modern browsers, including here Internet Explorer 8.

Meanwhile, if you visit the site and find any bugs, please let us know and we’ll set about fixing it.

Please see below a list of acknowledgements. Without my heroes -tools they have created, books they have written- we would never have got this far:

Paul Irish | Jeffrey Zeldman | Luke Wroblewski | Andy Clarke | Ethan Marcotte | Jeremy Keith | Mark Boulton

As a designer, my dream is to give Miryam’s content its ideal display.

The boundless happiness, kindly dealings with people around her, the life she transmits to flowers and plants at home and to my own aspirations might be another project for the future with much better instruments.

Etiquetas: ,