Responsible Web Components

Following up on Jeremy’s thoughts on Responsible Web Components I asked this question when the picture element was released, in as much as I thought if you strip it back it is pretty much the principles of <object> , which barely gets used now, but couldn’t we just extend what that does to fit the need of the problem?Wasn’t there something a few years ago about creating your own html elements? Did I dream this? I’m sure there was a debate about that the processor doesn’t really know what a <div> is except that it is a block element so you could have a <monkey> element? I mean, this is no different to the so called shim for html5 elements in IE versions by having a reset sheet that lists out all of those new block elements and adding the attribute – display: block;

 

Agencies Feeling the Squeeze

Adaptive Path, Sapient, Razorfish, etc., achieved high billing rates because they had something new and valuable that large companies could not easily replicate and incorporate into internal processes. The larger companies leap-frogged their competition by hiring leading edge agencies. However, we drank our own koolaid and are today thinking that companies will still pay premium rates for something that long ago became common knowledge via UXmatters, UX Magazine, UIE, Cooper, UXPA, wandering UX minstrels, etc.

This is a comment from Paul Bryan on a post by peterme titled San Francisco Design Agencies Feeling the Squeeze. I have to agree. From the aspect of User Experience Design much of the objective should be to educate the client so they make better decisions in the future. The imparting of wisdom is at the forefront of creating something great. That doesn’t mean that the output would be the same if they attempted it themselves, it would be different individuals with different views but also they would be engrained with the office politics, and history of the organisation and this can still lead to being crippled by yourselves. Continue reading Agencies Feeling the Squeeze

Designing the URL

There’s been a lot of talk lately about the design of URLs which has been spawned from the crazy idea from browser vendors to start hiding the url for the page you are looking at and only display the domain. I’m not sitting on either side of this. I think that we are in a territory now that means you should be navigating websites through the user interface that has been designed and crafted within the browser portal – not the address bar. But I do also have an appreciation for good, sensible URL design.

As part of my ongoing bashing of the BTSport services, this subject popped into my head as i typed something that made sense to me.

http://www.btsport.com/watch

Now why would I do that? Well because the core service of BTSport is – dun dun duuunnnnnnn! to watch sports! Is there a view there? Is there fuck. Instead, this is the URL if you want to see what’s on and watch live sport:

http://sport.bt.com/watch-bt-sport-01363810618853

There are no words to describe how utterly shite that URL is. In some respects I can understand the domain redirect and it is good that they acknowledge that btsport.com is actually what people will search or type in. That’s OK – but they really should have considered whether it was OK for them to create an entirely different domain for this service rather than creating a sub-domain of the parent. A similarly gigantic site is BBC. Frankly, they do amazing URLs. You want news? /news, weather? /weather. They have designed their URLs and sub-sites to work on URLs people will instinctively enter. The value of a good domain URL is the difference between people getting to it regularly or not. In the last few years I have all but stopped using bookmarks. In fact, I think it will be a dead feature within the next 5 years on all browser. The devices we use today and the power of auto-complete from Google search, and its incorporation in the Chrome toolbar mean that having the ‘bookmarks’ page is just not that helpful anymore. I also believe that the majority of users use bookmarking as a compulsion and the majority of sites bookmarked will never be revisited.

Looking at photojournalism on the web

Last year I spoke at UXCambridge about how photography is treated on the web, my frustrations as a photographer and looked at a number of powerful photo-stories that have not conveyed as well on the sites they have been published to.

I’ve begun to rewrite my talk with the hopes of presenting it to a few crowds this year. In doing so I have rethought what it is that frustrates me with how photography is presented online, and my view is shared by many photographers from all sides of the craft whether it is photojournalism, fashion, portraiture or landscape. Continue reading Looking at photojournalism on the web

We are regressing web design with Zoetropes

Once in a while I’ll go on a handful of naff list sites like Creative Bloq and trawl through their ‘10 sites that have great blah’ posts and now and then I’ll find something that makes me think. Today it’s this http://www.eone-time.com/.

This mixture of scrolling + css animate = animation, isn’t anything new really but it is become more and more common place and I really wish it wasn’t. Continue reading We are regressing web design with Zoetropes

If you don’t read it there and then don’t save it

For the last 2 years I have been using readability to bookmark things I want to read but not at that moment and for a while it worked well.

In the last few months however I have noticed a shift in my reading habits. I’ve moved away from the routine of clipping a few things in the morning then going back at lunchtime or after work to forgetting what I have snipped and then when I open Readability on my iPad I’m bombarded with a stream of new articles.

As a sat last night I felt that I was wading through. These articles weren’t keeping my attention, I was drifting, thinking of other things and other places and eventually I made a decision. I painstakingly deleted everything in my list – the whole 36 saved articles. Continue reading If you don’t read it there and then don’t save it

What is a Landing Page?

Work with any marketer on a website and they will talk to you about landing pages, the money spent on optimising and designing landing pages and why they want them. So, what are they?

The term ‘landing page’ comes from web analytics. The ‘landing page’ is the page which a visitor first comes to when visiting your site. You can put money into banner ads, adwords and other campaigns to generate traffic to this page and tailor it’s content to reflect the terms that a user searched for before clicking through. Continue reading What is a Landing Page?

Barriers to entry – Email marketing foul ups

A pattern I am seeing become more and more common is excessive data requirements to sign up to newsletters. There should only ever be one mandatory field to enable someone to sign up to your newsletter and that is an email address where they can read it.

Looking at a number of charity and non for profit sites today I am seeing a varying range of mandatory fields from needing your full name all the way to your postal address, date of birth and telephone number, all to sign up for an email newsletter. Continue reading Barriers to entry – Email marketing foul ups

I can’t understand how Myspace have gone so far past the mark

I accidentally clicked a link and it took my to a band myspace page. I don’t even know how it happened I thought the domain had expired by now.

More terrifying was the grey abomination that presented me when the page loaded up. The sideways scrolling twaddle that constituted content was illegible on my laptop. I then took a look at the NiN page which consists of a tome of a biography split into text columns across several side swipes (down scrolls on the mouse for me). Continue reading I can’t understand how Myspace have gone so far past the mark

What I learnt about UX from Fast ‘N’ Loud

Over the years we’ve had some addictive bad telly brought to UK shores by Channel5. But something has changed and in the last 12 months Discovery, a channel traditionally respected as the younger, perhaps late teen sibling of National Geographic has become the home of what @jvbates has referred to as Red Neck TV.

Lately, my favourite has been Fast ‘N’ Loud, a show where the boys at the Gas Monkey Garage buy old cars, put a bit of work into them and flip them by the end of the episode. Watching how Rich and Aaron, the founders of the business operate, I’ve become inspired by what they do and how they put it all together, but more importantly what they consider a good job well done.

Defining the User Experience

Ultimately, car restoration is a true user experience. If you’re a mechanic, the sound of an original 68’ Coupe DeVille is like sweet music, the craft put into the blend of design and power of the American classic could be equated to the love some of us in the web have for Swiss Type, or the nuances of a well defined stylesheet. To the consumer there is the dream of owning something they could never have from new, or because they weren’t born when the ‘77 Bandit Trans Am hit the dealership. For some it will be the opportunity to relive their youth, the glory days of an era gone by.

Then you have the collectors & petrolheads, fanatical about the finess of a well laid out dashboard, the blends of steel, carbon, plastics, wood and the smell of leather and gasoline.

All of these personas must be considered when they set out to find something in the auctions or local ads for a ride to buy and bump After all, it is no good putting your resourcing into a car that will never be bought, never be driven, never be cared for.

Roles and responsibilities

The GMG workshop is a small team. Richard and Aaron run the business, they pick the cars that get brought in and between them work out what they need to do in order to get it into the state they need to turn a profit.

Sounding familiar? It should. We are doing this every day, except where many of us fail is where the Gas Monkey boys succeed. They don’t try to create the perfect example.

It’s got to be-e-e-e-e-e perfect

I have written in the past about my disliking for working with anyone who has the notion of pixel perfect design, a print-bred notion that you can’t control on the web. Well here we have a group who are taking the anti-pixel perfect approach to physical products.

Quite often the cars brought into the garage are pretty beat up. On the outside there could be tragic rust spots, clapped out interiors, but the engine block may be OK. Most certainly it needs a service and it may even need a major component completely replacing.

Still sounding familiar?

Aaron sets about the strategy for getting the car to the point they need it. They have a fixed budget usually set in man days in which to turn the project around plus an idea of expenses before they buy the car. You can tell that this is a pretty accurate estimate based on experience.

Meanwhile, Rich is off getting in the next project, he wants a car in the parking lot ready to be wheeled into the garage once the last one is finished.

Teaming Up

During the procurement phase of a project Rich will often consult with friend Dennis Collins, a car collector on whether it’s a good project to go into. Occasionally Dennis will also invest in the project to get it off the ground.

With the overal concept for what they want to do mapped out, Aaron assembles the team, this may include one or all the mechanics in the workshop, a paint sprayer and when required he’ll call in specialists like detailers, surface experts or upholsterers.

With a team put together they get cracking. There’s just the one primary job going through the garage at the time and having the whole team work on it at the same time means that things come in on-time.

Incomplete to you – completed to me

Crucially what has inspired me is that their projects are not complete. They work on how do we get this shitpile rat run and turn it into something that does what it needs to do. It isn’t always about delivering the wrap around bow, that may well be the fun part that the next owner wants to get their fingers on – so let them!

In doing so, more often than not the guys turn a profit on the project and things still look good but crucially every car they restore gets driven away – not towed.

In one of my favourite episodes the crew needed to get an engine block cleaned up and sent it away to be resprayed. When it came back it had been completely restored in a striking cherry red to match the engine bay. Unfortunately, they’d purposefully left the patina of the chassis giving this hot rod a rather nice Mad Max vibe. What did they do? They dripped paint stripper and brake fluids all over the block and bay to allow the paint to corrode back to match the outside.

Don’t over design one area only for it to get let down by its surroundings (there are few examples of this I have seen lately).

Takeaway

  • Assess the damage
  • Come up with a tangible delivery
  • Get your team together and bring in help when you need it, don’t be limited by your own capabilities
  • Don’t over do it, it’s a car all it needs to be able to do is drive on the road legally
  • Not everything needs go faster stripes

What is a web app?

My colleague @adactio wrote today about his frustration around the question – what is a web app, along with thoughts following on from a conversation we had yesterday about our mutual frustration of people showcasing HTML5 when they actually mean javascript/browser API et al.

Indeed we all have our thoughts on this web app-ness. So, with a quick glance over my shoulder (my living room is troll free) here goes…

My view of a web app Vs a web site stems from my experiences working at a software company. We had two applications. One written with Visual Basic and it’s successor written in C#. At the time, Microsoft were emerging a new platform called .NET. It was dubbed as being the bridge that would allow desktop applications such as ours to be able to talk to other applications over the interwebs.

This could provide us with an entirely new audience and give us the chance to forge new partnerships with other software companies who wanted to create this app to app chattiness. We liked the idea, we wanted to know more.

After some experiments, we began to wonder whether we should in fact build the next version of our application so that it used a web browser as it’s window, instead of the one that gets launched from the .exe. This would solve our two biggest problems.

We wanted to remove all the tabs we had bloated our GUI (Graphical User interface) with as it had grown and evolved. We also wanted to alleviate one of the biggest gripes from our sales guy when returning from pitches which was that people said it seemed “very small” because physically, it was; compared to their monitor. Could this be a way to provide a more concentrated and focused experience for our users who were busy buying Windows XP machines and 17” (holy shit!!!), 1024×768 resolution (double holy shit) monitors without losing the large number of customers still working on Windows 2000 PCs with monitors that had a maximum range of 800×600?

We had already harmed part of our business by releasing our C# version of the application with an application frame of 1024×768, could this help us bring some of our less technologically capable users along with us on our product journey?

We figured by using .NET; a platform that was sold as being for building applications on the web, we could port our current application(s) into this new online format. After all, our flagship was in VB and that was what ASP.NET used (and very soon after C#). It also meant we would dramatically reduce our development and support costs. No more desktop support (pff), no more runs of update CDs and postage costs, no more deadlines for ‘you must upgrade by xxx’. It seemed a win win.

From this experience, my opinion became that web sites, was a destination with a URL that had read-only content (excluding right click, save as) that was informing you of something and consisted of (at the time) static html pages. A web app was a desktop application; a tool for achieving a certain goal, which ran in a web browser and didn’t require you to install anything locally.

Listening to Jeremy talk about this occasionally, and reading how often the debate comes up, semantically, you could argue that yes, today the two are in fact the same, but our perspective has changed. All destinations online, actually are tools for us to complete a given task. The majority of which is find information on subject X.

But…

If I ask my mum to give me the 5 websites she uses the most she would reply:

Yahoo
Amazon
Ebay
Youtube

If I ask her to give me the 5 web apps she uses the most she would reply:

Intranet at work
Sage
HSBC business banking online

In Contrast if I asked my younger brother (Late 20s) the same questions I would get:

Pitchkfork
The Quietus
The Stool Pigeon
bbc news

And

Soundcloud
Basecamp
BBC iPlayer
Google Maps

Taking that comparison, you could say there is an informed understanding or impression of an web app(lication) and a web site based not far from my own opinions. Both are in some way differentiating informational, or observational content with entering commands into a GUI.

Do I still hold this opinion? What should we take away from this?

Simply put – whoever is using whatever, whenever doesn’t care what you classify your online product/service as, providing it does what they want it to and what you said it would. If they don’t give two flying fucks care why do you?

The next site I design will not be for ‘desktop’

The average evening in my house involves eating, maybe a glass of wine and watching whatever we can find on Netflix whilst trying to decompress from a day at the coalface.

Both my Girlfriend and I work on the web meaning at least 8 hours of the day is spent in front of a laptop screen or a computer monitor.

Since becoming a freelancer last year I have made more of an effort to not use my trusted, albeit tatty Macbook Pro after 17:30. The lid gets shut and it stays in the office, or my bag if I am working on-site with a client. My girlfriend does the same, although for her this has never been as big a problem, rarely using her laptop whilst at home.

This hasn’t stopped us trawling the internet however. Instead, like many of the population, we are looking up things from our true personal computers; our mobile phones. Continue reading The next site I design will not be for ‘desktop’

A month with TextMate

For April I used TextMate exclusively for creating html, css, javascript and php files. I did this with an out of the box install, no playing around with packages or bundles or extensions, just as it comes.

In all, I found it quite a struggle. I know this is where life is made easier by installing a bundle, but I like to take things as they come.

It took about a week to get used to some of the frequently used shortcuts which were for quite standard actions in an IDE, for example, having to type cmd+alt+. to close a tag was an exhaustive process which made me realise that Adobe has spoilt me for some time with auto closing tags.

The find and replace works quite well, but again seemed to require a deal of effort.

The interface itself is faultless, completely clear of any junky UI, it is clear that in developing Brackets Adobe have done more than a casual nod to TextMate.

Which brings me onto my next trial. For the month of May I am going to work in Brackets exclusively. Currently on Sprint 24, I shied away a few months back due to the frustration of having to grab a DMG every few days with updates.

The current version seems quite stable and some of the new features that were shown off during yesterdays’ AdobeMax Keynote have caught my eye, for example, the live view is a novel idea as is the visual colour palette picker from your stylesheet along with those oh so familiar shortcuts and features.

Why I take issue with the build_off

Every few months I buy .Net. for the few hours I spend flipping through reading what’s relevant to me and skipping over what’s not there has always been one section which can make my blood boil over, temperature soar, and fists clench – the ‘build_off’.

I have never understood this section. Across on average 4 pages we’re presented a picture of a home page for a fictional site all nicely sized to somehow conveniently fit into the width of a magazine page with some nice callouts a brief intro and explanations of what each of these areas might be like if it were real.

I don’t know how long it takes for contributors to put together these quaint ideas, or how they are selected in the first place but I can’t help but feel this is and has always been completely against what we as an industry are so determined to move away from – showing shitty comps to shitty clients.

There are other sections which I take issue with, top lists for CMS which never shows or describes anything they’ve done with the CMS, CSS and Javascript that never show or explain what is significant, all get on my nerves, but these are not anywhere near as frustrating as the build_off.

The fact that the contributors are given a sufficiently loose brief ensuring that they produce wildly different page designs (because that’s all it is – it’s not a site) means that it is also impossible to compare them on any kind of contrast. For example, this month Kat Thompson, Rob Barwell & Natash McDiarmid were given the brief to “mock up a website design promoting an imaginary museum. Consider how to broadcast its brand values, integrate social media and get the most out of different devices.”

It’s impossible to meet this brief in reality. We don’t know what the brand values are so how can they promote them? We don’t know what social channels they currently use, how effective they are, whether they’re focussing on the right communication tools and they can’t produce something best suited for different devices because they’re only going to show a one-shot for a home page.

Taking part in the .Net build_off is like trying to win a project on a site like 99 designs, or people per hour; wooly loose brief with no context, no ability to talk to an actual person in order to get the data you need to make expert decisions and a backwards team that are going to waste time putting together a design in photoshop (or fireworks or something else – I really don’t care what you use) which you then have to encourage someone to imagine having “parralax scrolling image appears as endless as the real night sky”.

To add insult, there has been a recent introduction (it could have actually been there for years) of urls to see the pages in full which link to jpegs, the same jpeg you’ve looked at on the page only bigger. Well big whoop!

I’d like to suggest that people stop taking part until the concept changes so that you have to make a full site.

Working from content diagrams

This week I have been working with Rich and Paul at Clearleft on a quite different project to what I would normally be involved with – designing an intranet.

With Rich leading the project we met with the client to talk about the main objectives for the project and were pleasantly surprised with the amount of background, research and thought they have already put into what is going to be the primary resource for everyone within the organisation.

The biggest thing that has been highlighted is that they want to avoid one common pitfalls of many intranets, becoming a dumping ground for documents which quickly become out or date or have infrequent use. Instead, the intranet will centre around the people within the organisation and the work that they do. It is intended to facilitate collaboration and communication between individuals. By making people the heart of the service they hope to get more mingling going on between groups and new ideas coming out of that mingling.

We kicked off by writing a list of all the things we want to see on each of the page types and spent about a day checking that we hadn’t missed anything as well as throwing in some ideas which were a little different to what you would normally see.

By the end of it we had a pretty comprehensive list. We’d merged items which were too similar, refined some that were too broad and had a complete map of the system using nothing more than some pen and paper and an itemised list.

The next step was for me to take this list and put each item on it into a hierarchy. As I had been doing this as we were going along already, this afforded us some extra time which I used to take each of the page content diagrams and throw them into html pages. At first, I just put everything from the list in as h1 tags; basically showing where each section would start. By going about it this way you’ve suddenly got the beginnings of a simplified mobile-first page layout.

Over the last few days I have extended these page diagrams by sourcing similar or exact content to populate these diagrams, again keeping away from marking it up with anything that could be considered layout related, it is still purely text content and a few images semantically ordered.

I wanted to get the markup to be as rich as possible and provide the ability to interact with other systems if it needs to in the future. I’ve done this by applying microformats to certain patterns within the system. For example, being centred around people, it is was more than obvious to add vcard/hcard formatting to the people pages. But I’ve gone a step further than that, events are covered, as are references to peoples publications whether print or online using bibliography microformatting.

Hopefully in a few weeks I will be able to write more insight into approach on taking a UX project quickly through discovery and into a prototype state without the need for faffing with wireframes and design mockups – something which I am very much enjoying on this project. That’s not to say there is no place for these tools and methods, of course there are, but with the nature of this project and the way we’re working through it, these would only be relevant for a few hours if not minutes.