1. The http://technorati.com/contacts/ uses an older version of Brian Suda’s X2V which doesn’t seem to support PHOTO:
2. vCard doesn’t appear to support my favoured image format of PNG

To work around these we implemented our own web service wrapping the latest versions of the X2V transforms – you can read about that here, I then converted the image to BMP (the old timers format of choice!) However I STILL could not get the logo to show in any of the windows clients. Apparently Outlook and Windows Mail, etc. don’t support a URI for the PHOTO:, even though the vCard spec allows this.

In the end I had to use the little known used <img src= “data:image/bmp;base64,xxxxxxxx” /> with a base64 encoded bmp image replacing the xxxxxx to include the actual binary data for the image into the hCard, and thus into the transformed vCard.

The live page can be found here.

This is seriously cool – but doesn’t blog in text well so here’s a short video sample :)

Try here http://qik.com/video/1579855

A presentation in one (scrolling) web page.

Interaction Design

• Design inspires technology -> Technology inspires design ->

Dutch word – Vormgiver -> Formgiver -> Assembling individual component

Concept by design.

Lots of information about previous designs  by superfamous. (see http://cargo.superfamous.com/)

a jouney through merging  designer created and user created content. 

SpaceCollective main site with lots of side projects. Cards to stop you losing orientation @ http://spacecollective.org/recent

latest project is cargo – a personal publishing platform – blur the boundaries between blog and portfolio site – continuous feed of work

Cloud of people you like to follow + super simple portfolio site

Before the revolution business 101 says: client collaboration, in partnership.

This was dreamed up by a marketing department after a three martini lunch.

• Your waitress: What can i get your folks today?
• Your Mother: You’ll eat what you get and like it!

Viva la revolution!

1. Eliminate choices – You know best.
2. Like Yoda Be – There is no try, only do.
3. Just Say No! – This has a natural filtering effect.  Tip always make the logo smaller to start with!
4. Avoid the “clients of suck” – refer them on as quickly as possible

But:

1. You need lots of miles on your clock
2. You must be tall enough to ride this ride
3. You better not suck!

The result:

       Everyone is better off!

Q & A

        How does that approach work with communities online? – You already have data on what you need!

“The limitations to web design come not from the technologies or tolls we use but from our imaginations”

Layout – Make your site easy to use, don’t over complicate things, think about UI design, 

Design for experience – make it connect emotionally with users.

“Great design is supported by all browsers”

Typography – get creative with type, make it readable, it’s not about how many fonts you have, it’s about how you use them.

Copy – Harness the power of copy – great copy can influence your design.

Colour – Is beautiful and complicated, Learn about colour theory, steal dulux colour cards and pin them up!

Imagery – Harness the power of imagery.

Buck trends and Break conventions! – become a trend setter, stay away from css galleries – or go to smashing magazine, check out their 2009 design trends and avoid them like the plague!

Magazine your website – see what it looks like as a magazine cover.

“Learn from the past masters to catapult yo into the future”

Don’t obsess over tech.

Demo of Jaws (showing the bbc website)

346 Links on page – that’s a bit excessive!

It’s easy to get around if the content is set up correctly. e.g. press h to skip through headings.

BBC tv page has good support for accessibility 

• logical reading order
• nice and linear
• then apply styles

Big fan of mobile versions – guess m.normal-url.

New scientist has 134 Links and 76 Headings – will take a long time to get around this page!

Mobile version is much better – 37 Links and 23 Headings – this much better for accessibility

 Google maps has hidden option to produce much better output for accessibility ?output=html

Firefox supports aria – however google mail has lots of empty content and flash frames at the top of the page – we need better signposting to basic html pages – this is much better for accessibility – even if you are using JS.

- Example of google chat – doesn’t work (even with aria) – using a screen reader.

YouTube video – demo of bad CAPTCHA on You Tube.

Example of Google Account CAPTCHA – offer three lines of attack.

Image, very bad audio (distorted), screen reader help – will take you to option to have google setup account for you.

Disney makes it hard for people to use screen magnification – too much dynamic content and movement.

Some site use very small click targets or bad flash navigation – sign community is one example of good flash navigation – but also supports text only version.

Voice recognition does not work with flash, silverlight, etc.

www.abilitynet.org.uk

Q & A

sifr is not good for screen readers as the amount of flash will kill the screen reader if there are more than a couple of sifr fields

can turn off flash, but this may be needed for other sites, so will be a pain to toggle on and off.

Lots of groups will benefit from accessible websites not just blind or partially sited

Hello!
Today I’m going to talk about a passion of mine – Typography!
What does typography mean to you?

What do you mean I can only use seven fonts?

Breaks down into four things on the web.

• Type as language – Typography has one plain duty before it and that is to convey information in writing – emil ruder
• Type is Information – designer’s task is to bridge the gap between the author’s conceptual structure and the readers conceptual structure
• Type as Structure – Typography is currently treated as adornment, but it actually goes much deeper into the structure and is related to UX and IA design.
• Type as Data - 

There’s a bit missing…..

Everybody is a designer at the moment – see Design it Yourself – “wtf have they done to my layout?”

A lot of people screw it up! Comic sans is not inherently bad – it depends on context – they have the tools but not the experience\information.

Comic sans – 9 times out of 10 is the wrong tool.

Lot of talk about font embedding – not a good idea – yet – technical stuff aside  - Lot’s of fonts aren’t designed for the web – see Times New Roman.

Lot’s of designers go through life not being arsed about how fonts look on the screen as they will look different when printed – the font Georgia was designed the other way around.

Drupal(tm)

Mark is working on fixing Drupal for designers – 6 out of 7 Drupal sites will be ugly.

Drupal makes it hard for people to make good design decisions – current tools make it difficult to produce good designs.

Too much choice is not good – we need to scaffold the experience – we need to help users make good design choices. Don’t currently know how this would work.

The typographic cascade _

• Choose a headline typeface: Georgia or Helvetica
• Then cascade that font choice down the rest of the document e.g. body, lists, etc.

@font-face – let’s have a think before we open the flood gates.

Thank You.

Q & A.

Web Safe – just means that it’s installed on everyone’s machines – Verdana, Tahoma, etc. were designed for the web. Also the Microsoft “C” fonts.

Sifr is a pain in the arse – technically. The constraints on the web help us push the boundaries of type on the web.

Align best choices with customers needs. Type choice comes after hierarchical design.

The business end of web design
Buster Rhymes is the answer!

1. Design is a commodity – profit margins are being squeezed, more competition – 99 Designs 32,000 designers 1.6M Designs, $4.6M awarded – that’s a couple of dollars per design!

2. Websites. Are. Dead. – expectations are so much greater, websites are just the beginning! Learn how to code? – Wrong! (unless you have a passion for coding)

“Are you worth it?” – Strategy – you join the dots, Experts – know things you don’t. but how do you explain it

B-U-S-T-A

• Talk Business – Talk to the client, and try to understand their business. It’s not about the website it’s about the business.
• Understand why they want to go online – Continue the conversation.
• Talk Strategy – Connect the dots between their business and the web, make the uunderstand the importance of the web
• Set Business Targets – 3 to 5 business goals.
• Talk Action – Explain timeline, tools, what comes next, etc.

Why bother with busta?

• More effective websites.
• Less conflicts.
• Repeat Business
• Higher Profits

Remeber you’re awesome! :D

The number of mobile web users is increasing at around 20% per month.

“The mobile web is a hot topic”

Mobile web design seems really scary – I can relate to that.

Meagan is highly recommending Cameron Moll’s mobile web design book.

There are three levels of mobile support

• “naked” – “ad some style” – “deck it out”

Recommend “deck it out”  - although it has downsides of adding another site to maintain, and has the most initial design work.

Start simple and iterate to better design

Step 1 : Write clean accessible HTML – designing with web standards - Jeffery Zeldman

Step 2 : Mobilize your layout – One column, no large images

Step 3 : Stay Branded – Header graphic, colours, typography

http://bit.ly/mobile-stylesheet

http://mobify.me