Monday, December 18, 2006

"Asking Why" - Neville Brody

Last session of the conference and I chose to hear Neville Brody, a well known designer and artist. He looked tired and slightly edgy. I got the impression that he's good at yelling.


The start of the session was rambling - I really thought I'd blown it coming to this and not going to Mario Klingemann's "Mash Up Baby!". The first half was a bit aimless but as he went on he got more and more interesting. When he hit his typography examples he suddenly lit up and the last quarter was fascinating.


At the start I put my notepad down thinking I wasn't even going to bother making notes. By the end I was scribbling furiously - well after he'd finished talking.

  • If we don't understand the context (which is often social) - we can't understand why we're doing stuff

  • Design is about image and type

    • About story telling

    • Creating emotion

  • Design, like programming is working with limitations, because you're working on something in a context with an end result.

  • Traditional management sphere in an ad agency is an inverted triangle to mirror the corporates who they work with - in order to communicate

    • His company's structure is normal triangle - something which has made communication with corporate customers sometimes difficult.

  • You should fire 1 client per year to keep your ego up

    • So often everyone is terrified of getting fired

    • In UK, clients tend to have an attitude that design services are a supermarket and try and dictate the creativity

    • But working for clients is compromise - as long as you don't sacrifice your ethical or quality standards

  • There are 2 levels in typography

    • The text = content

    • The delivery which often gets overlooked but is very important for visual communication

  • In design/communication there is no objective, only subjective

    • So be honest and give emotion

    • Leave it open-ended, an evolving process

  • Type is a contract between the sender and receiver

    • Contract that a certain config of elements means a certain thing.

    • Once you start playing with that you head into the realm of the abstract

  • Computers have done for type what cameras did for painting, i.e. liberated it

  • Started running out of time big time so started rattling through stuff

  • Too much stuff that looks the same is around these days

    • 100 channels on the TV

    • CD covers

    • Cities

    • High streets

    • Brands

  • Scream the differences

    • Colours

    • Shapes

  • Ask why - remember the context

  • We're under pressure to reply to 100 messages a day, so we become defined by our input and output

  • More spaces in life like TV or the Web are filled with waffle

    • We're so busy that we can't choose and just select from the dross

    • We don't have time to change stuff

    • The need to fill these vast spaces has reduced us from a million colours to 256

  • We're running faster and faster - our lives are filled with fear

    • Fear of losing a client

    • Not hitting a deadline

    • Someone will bomb us

    • Fear of failure

    • Fear of challenging the rules

    • Fear of changing

    • Fear of being different

  • No statements anymore, no risks

    • Because of the danger and fear around, people are terrified to take risks

  • We're forgotten how to be human

    • Need to use the technology we have to touch and enable people

    • Messages need to be more fluid so people change and no just accept it

  • We need to stop being frozen in our tracks and take risks

  • Embrace danger and the input

  • Listen not just broadcast

  • Put real meaning into the phrase "to think different"

  • What next?

    • If we don't risk we won't find out.

"The Power and Problems of Prototyping" - Chris Pelsor

By session 4 on day 3, it definately felt like the conference was easing off. Especially since I'd chosen mainly design-orientated sessions to finish off with.


  • Why prototype - Prototyping gives cheap answers to expensive questions

  • Standard project dilemma - triangle with one of these at the points: fast, cheap, good

    • For each project you only get 2 - you can never have 3

    • Pelsor's Collarary: Reduce the size of elements in your project and you can reduce the discrepancy between these factors

  • Who should prototype? - Ideally a designer and a developer together

  • What is it?

    • Representation of functionality not dependent on words

    • It's a tough one to define

    • Examples

      1. wireframe

      2. mock-up

      3. elemental prototype

      4. fully functional prototype (bad - they've got you to make the final product)

    • Everyone has their own names for these things

    • So most important thing at the start is to "agree on definitions"

  • Create a playbook which is a record of the prototyping and design decisions

  • Cheap and dirty is ok

    • Get it done quick to answer the questions

    • Do it properly later

  • Check out Fuse Generator to do animations

  • Designers and developers have a different goal

    • Designer: create visually unique and beautiful stuff

    • Developer: to do it quickly with no bugs

  • Solving problems: http://www.lettekkendecide.com

  • Asked how many people had been in Agile process and hardly anyone raised their hand

    • Prototyping can be weird in the Agile process

    • But it can receive results

    • But you have to be careful that your prototype code doesn't accidently slip into a release by stealth - this would be very bad!

  • Recommended work-flow:

    • Wireframe

    • Mockup

    • Elemental prototype

    • Test/critique

    • Repeat

  • Most common workflow

    • Mockup/designer sketch

    • Elemental prototype/launch

  • Second workflow can be caused by

    • Delivery pressure

    • Lack of understanding by project owners

  • How to avoid this??

    • Keep banging on that this is not production code

    • Stress long-term value

    • "Remember: cheap answers to expensive questions"!

    • Curb their enthusiasm

    • It doesn't have to be right first time - don't get stressed by it

  • Prototyping helps answer (or at least discover) design questions before the hard work starts

  • Non-disclosure agreements (NDA) - how to get round in interview?

    • Basic functionality tasks

    • Nothing to do about what we're doing

    • Discovering if they can come up with solutions quickly

      • Process

      • Workflow

      • Problem solving

  • Motion can be the hardest thing to convey between developer and designer

  • At this point a plonker in the audience started raving about his convoluted textField class and how it did so much blah blah.

  • A lot of this is about trust i.e. prototyping

  • Its about getting involved early in the process to root out those inevitable design problems.


"Photoshop to Flash: Optimizing Pixels and Workflow" - Michael Ninness

Michael Ninness broke the ice by handing out sweets to the crowd to sweeten them up (sorry, the bad joke was mine). He commented on how reserved the Brits were. I think the American speakers at the conference have felt that we're a tough crowd!

  • Aimed to cover 5 things

    1. Layered PSDs into Flash

    2. How Flash handles embedded bitmaps

    3. Loading external bitmaps at runtime

    4. Photoshop to Flash colour issues

    5. Quick image enhancement technique

  • 1. Importing PSDs into Flash

    • Demo-ed doing it straight away. Image looked fine but it was a composite image (i.e. all layers in one)

    • Alternatives:

    • 1. Export layer by layer

      • Duplicate layer to a new file

      • Helps if layers are numbered by depth

      • Imported layers are all put on one layer

      • Select all of this and use Distribute to Layers to spread them about

      • Compositing bottom to top to import correctly

      • But imported files come in with bounding boxes for while pic not just contents of the layer

    • 2. Automate the process

      • File > Scripts > Export Layers to Files - but no PNG (only format for transparencies)

      • But ImageReady has... Export Layers to Files

        • You can optimise each layer separately

        • Layers aren't named - boo!

        • Format is PNG24

        • Bounding boxes are ok

    • 3. Export from ImageReady as a SWF

      • Usually turn off Keep Appearance

      • Choose Lossless 32 (which is actually PNG)

      • No layer names come in - Boo!

    • 4. Plugin from MediaLab - PSD to FLA extension

      • From photoshop - File > Export > PSD to FLA

      • Good bounding boxes

      • Layers named

      • Symbols named

      • No blend modes go across

        • Note them and add the equivalent in flash

      • Clipping layers - clipping mask

        • Narrows the layer to just the contents of that layer

      • You can achieve most stuff with a bit of trickery

    • 2. How Flash handles embedded bitmaps

      • When you bring in a PNG it get exported as a JPEG!

        • Flash doesn't recompress JPEG and GIF

        • But does to PNG

      • JPEG quality slider in Publish Tab effects only PNG!

        • Unless you change the defaults of the image in the library

      • In general, do your JPEG compression in Photoshop

        • Will go out of Flash as they came in

    • 3. Loading external bitmaps at runtime

      • Lots of rookie stuff which, none of which I bothered with...

    • 4. Photoshop to Flash colour issues

      • Flash only has one colour profile: sRGB

      • Photoshop has loads and tends to use Adobe RGB

      • So when file comes into Flash, Flash ignore the colour profile and just uses sRGB

      • When opening a file in Photoshop, always choose to use the embedded colour profile

      • Then copy the file and convery (edit > convert to profile) and choose sRGB

        • You can hardly tell the difference

      • There is also a cross platform Gamma issue

        • PCs show colours darker than Macs

        • You can use View > Proof Setup to show the differences

        • Switch back and forth to check

        • Best way - duplicate files

        • Tile them next to each other

    • 5. Quick image enhancement technique

      • Hold alt key when doing things stops the popup alerts - calls the "Make better" key

      • Resolution doesn't matter - its only for print

      • Its all pixels!

      • When resizing, use Bicubic Sharper (when reducing size)

      • Good to change your preferences so this is the default

      • Best way to sharpen files

        • Make a duplicate layer and add filter HiPass (highlights only the edges)

        • Put the radius to around 2.5

        • Add adjustment layer of overlay (removes the grey)

      • Ctrl-shift-B - autocolour command

        • 90% of the time this will sort out any colour issues (i.e. if its too blue)

"Accessible Flash: Oxymoron?" - Niqui Merret

Niqui Merret's accessibility session saw a big turn out - the Pavilion was almost full and people were packing in even past the start. Its good to see that people are interested in accessibility in regards to Flash. The session was mainly an introduction to the concepts of accessibility and didn't really go into the murky depths of Flash accessibility.


I was pretty disappointed that the problem with tab order going crazy in a Flash movie when MSAA is active wasn't mentioned. This is an undocumented issue which I'm sure vexes many people trying to make accessible Flash movies. I'm going to try and get a tutorial up on this blog soon explaining how its works and how to make it work properly.


But for now, my notes on Niqui's session...

  • Show of hands for people who had tested with disabled users and also tested their flash apps on screenreaders was impressive.

  • Target?

    • Accessibility is for everyone or

    • Accessibility is for people with disabilities

    • Niqui took it as the later for this talk

  • Why accessibility? - Discrimination is wrong

  • Side benefits

    • Improves general usability

    • Increases support for low literacy

    • Increased support for users with little or no knowledge of the language

    • More potential customers

  • DDA 1995 UK - Part 3: Access to Good and Services

    • This is the key clause

    • "Make reasonable" effort to make site accessible

    • So for a small company it may not be economically viable (or therefore not reasonable) to make their site accessible

    • Big corporates and the government on the other hand have no excuse.

  • Myths of accessibility

    • A text-only site can be truly accessible - MYTH

    • Accessible sites are bland - MYTH

    • Accessibility is expensive - MYTH

    • Accessibility is not possible in Flash - MYTH

    • Clients should choose if a site is accessible or not - MYTH

    • A tool can be used to automate accessibility testing - MYTH

    • Accessibility is only about screenreaders access to the content - MYTH

  • Statistics

    • UK - 8.6 Million registered disabled users (14%) - source DRC

    • 2 million users have a sight problem - source RNIB

    • 9% of pop with colour blindness

    • 3.4 million can't use standard mouse, keyboard and screen setup without difficulty

    • 12 million users aged over 60 (so more chance of a disability)

    • Companies are potentially losing £50-60 billion pounds of revenue a year from disabled users

  • Which screenreader should you optimise for?

    • Tough one to call

    • Look at what is most used in the community

    • WindowsEyes and JAWS are a good starting point (Ed note: every test I've done with Hal has handled Flash content very badly. I'd recommend not using it as your baseline)

  • Forcing a screnreader to start reading a page again

    • Apparently can be done by switching to another frame - (Ed note: I haven't tested this to see if it works categorically)

  • MSAA

    • Current Flash accessibility is dependent on MSAA - so is only available on a PC

    • Would be great if Adobe supported Apple Voiceover which is supposedly good and free

      • But which only came out in last version of OS so can't blame them for not (Ed note: I doubt unless the Mac version is using something like MSAA that this will happen anytime soon)

    • No standards for screenreaders so it is difficult for product creators to support them all in the same way

  • Pushed SWFObject again but no one has mentioned that same problem - no JavaScript enabled = no Flash, even if they have a valid Flash Player

  • I realise at this point that the guy in front of me smells really bad

  • Raised idea of an audio brand (a quick and unobtrusive jingle) to differentiate your site

    • Example: www.axistive.com

    • Ed note: Could be really annoying for non-screenreader users. Could use a 1 pixel flash movie to detect if a screenreader is present and play the jingle only if it is

  • Dyslexics with Scoptic sensitivity syndrome struggle with too much contrast

    • Best to have high contrast as an option, not as a default

    • Ed note: Nice example demonstrated how accepted "standards" for accessibility can actually be deceiving


"Flash in a Web 2.0 World" - Geoff Stearns

The last day of Flash on the Beach. First up, Geoff Stearns from New York with a cracking session...

  • Invented SWFObject for embedding Flash

  • What is Web 2.0

    • State of mind, not a specific technology

    • Easy way for people who "get it" to talk shop

    • Using technology available to you in the best way possible

  • Flash 2.0 - he used the term very tongue-in-cheek

    • No intro

    • Flash as style and behaviour (XML/database as content)

    • Flash video

    • Progressive enhancement

    • SWFObject (Detecting flash/flash version)

    • Using flash what it is good for

      • Remember, its not always the best tool for the job

  • Philosophy of Web 2.0 (or one of them anyway)

    • Use progressive enhancement

      • Content HTML

      • Style CSS

      • Behaviour JavaScript

    • Flash can be all 3 - where does it fit in?

    • Flash as a Web 2.0 technology

      • 1. Separate content from the behaviour

      • 2. Use progressive enhancement

      • 3. Recreate basic browser functions

      • 4. Only use it when you need it

  • 2. Progressive Enhancement

    • Build HTML version and/or upgrade message

  • 3. Browser functions

    • Provide back button and browser linking

    • Don't break searchability

    • Tools to do this

      • SWFAddress

      • StateManager

    • Users JavaScript to update URL and back button

      • Needs Flash 8 and JavaScript

      • Not just for flash - Can also be used for Ajax

  • 4. Only use it when you need to

    • Don't be stupid!

  • HUF Technique - HTML Under Flash

    • Build HTML first

    • Then add Flash

    • Google gets HTML

    • User gets Flash

    • About providing alternate content

  • SEO

    • Google can read swfs but why would you want it to as there's no content in them.

    • Want Google to index your HTML content

    • HUF Technique + "Crawl Pages" = SEO for your site

  • Into the future - we need:

    • Browser makers need to fix <object> tag

    • Built in plugin version detection

    • Really need to sort out plugins in browsers

      • Working group or something like for HTML and CSS

  • Progressive Enhancement applies to Flash more for content rather than applications

  • To avoid having to duplicate content its good to generate HTML using include

    • Content in the XML can be XHTML

  • Bugger with SWFObject is that you can't use it if you want users with JavaScript off but Flash on to get content - it seems silly to lock out these users (example could be a corporate or school)

  • Links


"Flash Lite 2" - Richard Leggett

For my last session of day 2, I caught Richard Leggett on Flash Lite 2, Flash's mobile phone platform.


  • Good resource - http://flashmobileforum.org

  • Has a book coming out "Flash Applications for Mobile Devices"

  • What is FlashLite 2?

    • Flash 7 Player + extra functionality (i.e. backlight, vibrate, signal strength)

    • Bundled with phones (Nokia, Sony Ericson)

    • Create with Flash 8/9, Adobe Device Central + a few IDE updates

  • New in 2.0

    • AS2 Classes

    • XML/LoadVars

    • Video/Audio (mp4, 3gp, midi, gif)

    • Colour object and drawing API

    • Major text improvements

      • HTML

      • TextFormats

    • Text metrics (_height)

    • Local (Mobile) SharedObjects (MSO) - work differently from desktop

    • Depth sorting - better control over screen elements and positioning

  • V2.1 (released recently)

    • Inline text inputs

    • XMLSocket

  • Content types - what is it good for?

    • Screensavers

    • Backgrounds

    • Animated ringtones

    • Browser content

    • Standalone apps/games

  • Mobile applications

    • Remember the device you are designing for

    • Users tend to want "productivity" or "life" tools

    • Users expect stuff to just work

  • Good ideas for mobile games

    • Keep them simple

    • Action games - difficult to pull off

    • Strategy/RPG - great, use MSOs to save progress

    • Sport - simulations are no good, but strategy (i.e. football manager) is good

    • Skill - can work well

    • Multi-player - yet to be proven

  • Structure

    • Simple - timeline based

      • Rapid

      • Good for small projects

    • More complex - Pure AS2

    • Both have pros & cons and it depends on budget

  • No keyUp event so movement is constant

  • Re-use graphics to cut down overhead

  • KISS - Keep it Simple Stupid!

  • 16fps is the new 31fps - good speed for phones

  • _focusRect = false - gets rid of yellow tab state

  • Fscommand2("SetSoftKeys", "", "exit")

    • Sets the keys under the screen

  • ExtendedKeyClass - SOFT1-15 for different keys on phone

  • Video formats -

    • System.capabilities.VideoMIMEType (or something to that effect - missed the actual syntax)

    • Video can stream (from Real Media Server)

    • Can be local

    • http:// getURL()

  • SMS

    • Really easy to do

    • Instead of mailto: use sms:

    • Pops open message editor

  • SUSHI XMLSocket

    • Is good for FlashLite2 multi-user stuff

    • Helps minimise data

    • Polling wastes a lot of data but is necessary in FlashLite 1 (but not FL2)

  • General note - its good to put attachMovie linkage in a static property so you get an error thrown if you get it wrong

  • Bandwidth is expensive

    • Do everything to reduce amount of data being passed about

    • Put config in the SWF to save data overhead in loading an extra file

  • Future of FlashLite

    • Convergence - FlashLite extends desktop onto the mobile

    • Hardware is speeding up

    • Bandwidth costs are going down

    • Controls - are always going to be an issue (i.e. 1 button games will always be good on mobiles)

"Ajax: Flash Killer?" - Jeremy Keith

Jeremy Keith preparing for Ajax: Flash Killer?

Over to the Pavilion for Jeremy Keiths Ajax session...


  • Short version - Is Ajax a Flash Killer - NO!

  • Long version...

  • Ajax was coined by Jesse James Garret to describe existing technologies

  • Buzzword

    • Sounds cool

    • Myth based

    • Has the letter x in it

    • Gets associated with web 2.0 along with rss etc (Note: he refused to say "web 2.0" - only inferred it)

  • What is it?

    • XML is not necessarily intrinsic to it

    • Javascript is integral

    • Asynchronous is the key

      • Server sends bits to you as you're interacting with the page on browser

      • Result is an apparent increase in speed

    • If traditional web was letter writing, Ajax is instance messaging - Didn't catch who he was quoting here.

    • His def: Ajax is a way of communicating with the server without refreshing the page

  • XMLHttpRequest - not snappy enough for buzzword

    • Been around since IE5

    • Invented by Microsoft

    • Mozilla, Opera and Safari eventually took it on

    • W3C is turning it into a standard

    • Samples

  • Diagram of a line. The far left end of the line represents basic, HTML documents. The far right of the line represents full-blown web applications

    • Ajax is useful at the left of the slider, less useful at the right

    • Flash is opposite

  • Principle of Progressive enhancements

    • Positive spin on degrading gracefully

  • Workflow

    • 1. Start with content which is semantically structured (HTML)

    • 2. Add presentation layer (CSS)

    • 3. Add behaviour (AJAX)

    • Take away any layer and it still degrades down to the last layer and works/content is viewable

  • New term - Hijax

    • Termed by Jeremy Keith

    • Workflow

      • Build your application old-fashioned way

      • Get completely working with conventional calls

      • Then use JavaScript to hijack calls and replace with XMLHttpRequest

    • So when something goes wrong - app still works

    • Not many people doing it this way

    • If you can't apply progressive enhancement then you've crossed the line - Ajax is no good - use Flash

  • Pattern recognition

    • Do small stuff with Ajax

      • Logon feedback

      • Add to cart

      • Rate this

      • Add a comment

  • The alternative to progressive enhancement is the Plugin

    • If you're going to cross a technological boundary (i.e. user must have JavaScript) then go for a boundary which is a rich experience (Flash)

    • When?

      • Widgets (i.e. sliders)

      • Audio/video

      • Image manipulation

    • Choose best tool for the job - ask: "Why am I doing this?"

  • Design challenges

    • Not letting technology get out of control

    • Keeping the user at the core

    • This is something Flash devs have been doing for years

  • Beyond the Browser

    • Ajax screws back button and bookmark

    • Something that Flash has had to deal with for years

    • If bookmark of back button doesn't work and needs to, then you're changing too much of the page!!!

    • User feedback for clicks - need to tell user what is happening (i.e. load bar)

    • What happened feedback for user

      • Let people know what changed

      • Conventions

        • Yellow fade (37Signal.com)

        • Visual effects

  • What is good design?

    • "Being able to justify every pixel" lookup author

    • Why does it do that?

    • User testing!!

  • Accessibility - Ajax has really bad accessibility

    • Ajax can't pick up if a screenreader (SR) is present

    • Myth that SRs don't do JavaScript

    • They do part of JavaScript

    • So instead of locking out all JavaScript func and dropping down to presentation layer - it tries to do it and screws up

  • Answer? Flash + Ajax

    • Use a Flash movie (1px) to detect if a screenreader is present and then tell the Ajax via a JavaScript method

    • Analogy was Flash Gordon movie: together Flash and Ajax (Gordon's spaceship) combined to kill Ming the Merciless ;)Ming the Merciless impaled on the spike of Flash Gordon's spaceship

  • His DOM Scripting book looks really good

  • Numbers for Ajax enabled browsers is hard as different factors

    • JavaScript enabled

    • XMLHttpRequest in IE5/6 is activeX control so activeX needs to be enabled