Armen Chakmakjian

Posts Tagged ‘RIAUnleashed’

#RIAUnleashed – notes from “UX for the development minded”

In Social Media, technology, web 2.0 on November 13, 2009 at 10:21 pm

The slides will probably do this more justice, but these are my notes:

The presenter was Andy Powell from Universal Mind

We are surrounded by great experiences – nice cars, satellite radio online service (pulsar), gourmet food delivered inexpensively…the iphone (which changed the way we view what a phone can do)…the movie Pulp fiction (ok this was a stretch)

Defining Experience Design

people’s guesses

  • looks nice
  • works the right way
  • how it works in its context

But what is really is is users/technology

The user wants to be inspired and makes the user come back.  If you can get them into the immersive place, where they have to be there, then you have got a good design

Styling is not design…skin and style at the end is NOT design.   Design is more immersive and is part of the process.

There are 4 steps to making a good design

  1. Discovery (figure out what the need is)
  2. Design (wireframes, user testing, prototyping, gives the user a good idea of the look and feel)
  3. Development (making the design bring up tangible results for the underlying application)
  4. Deployment

The presenter called this the 4D process

the process is a marriage of Ideas (users ideas) and Technology (the thing that is the right one for the problem)

Why are we doing this?   Because the technology facilitates a great design…look at the Dyson vacuum cleaner

The art & science of experience design

The path you eye follows is a circular clockwise movement.  There’s a reason that the apple on an apple is in the top left corner and the default icon sort starts on the right side of the screen.  Your eye will start on the top left in western society (it will be different for other cultures of course)

misused technology hinders experience

I’m sure we can think of examples

understand our audience/users

in order to do this we need to establish trust, so that they will give us feedback honestly and openly.  Trust goes both ways…the app can’t blow up (like twitter when crashes) on the user

Triggering emotion

we want to trigger a positive emotion.  Then he showed this ikea ad which showed this pathetic lamp in the rain…and then someone steps on the screen and says “what are you crazy, its just a lamp”

Emotion is the added value of design.  “reason lead to conclusions, emotion leads to action”

environment also affects perception

think about different people’s reactions to snow (people who live in different parts of the country

What’s the story / goal?

good stories connect the user.    The elements of the story are lead character, ambition, conflict, resolution

How is the story being told?

must be from the user’s perspective — This is where Personas arise

Title (picture) overview characteristics goals frustration influenceers questions knowledge

Personas create Empathy

as developers we should be asking from the users perspective, he hits the button — what does he expect to happen?

Features are Dead –

focus on the solution and features will follow

Create User Stories

chart interactions, data access, system persona, actors, even inanimate things can be viewed this way.  These stories are crucial…developers write the stories.  This is the point where we take the wireframes from the designers and define what can be built.

Good UX arises from a collaboration between designer and developer

Notice the experiences around you…and bad experiences will start annoying the $#|+ out of you.  The ENTIRE experience is the key, the whole immersive experience.  That includes people interaction as well as RIA.

#RIAUnleashed – notes from “keeping front end dependencies under control session”

In technology, web 2.0 on November 13, 2009 at 4:52 pm

The real slides are going to be posted at some point by the coordinators, but just for my own sake here is what I typed as fast as possible

5 simple rules for better client performance  (these are yahoo’s recommendations)

  1. organize and plan
  2. location matters
  3. load a component smart and once
  4. maximized caching opportunities
  5. optimize, minify and compress


over time you keep adding libraries because something is missing

website application continuum

spry jquery prototype YUI EXT.hs Dogo GWT


keep all your scripts in one central place

Classic pairings of libraries:

  • cf + ext
  • cf + spry (adobe)
  • jquery + jqueryUI  (nice theme roller DOM manipulation)
  • YUI + YUI (very comprehensive…followed their own advice)
  • Prototype +

Externalize (java)scripts at the bottom.

because scripts load their own stuff, you can’t render anything while the scripts are loading.  Only caveat, some scripts only run in the head.  Anyway will improve performance

Try to get your scripts load only once

manage loading from the client-side.

Yui has a loading component

Ajile?  yes with a j

Server-side script bundling – coldfusion example given.   scriptalyzer

Minify and Compress

YUI compressor strips out whitespace and comments to minimize

optionally obfuscate your code

There are other examples of

GZip over 1 or 2k

serve compressed files from the server to browsers that support it

don’t compress files already compressed

Browser Cache

use external scripts

set expire headers for caching (Google-hosted)

set expire headers on common scripts

configure entity tags (e-tags) on clusters (

She gave some example of the tags to use for these various options


will help you write more efficient code

CSS/Style Sheets

externalize the CSS files at the top

embedded styles are a bad practice

use core style sheet when developing

if you use YUI you can link to their common style sheets

the import directive will not be invoked until CSS is completely loaded.  (you’ll see the page loaded without the style then zap the style gets applied)

Use a link tag to avoid the problem

Minify for CSS

cascading nature of css is not effective as javascript

cssinclude Custom Tag

manage them on the server side (recommendation)


o Comment Your CSS

o declare your most global rules first then the page structure

o try to minimize the declaration and stack/cascade the styles and then the classes

o put your rules as high up in the stack as possible (to avoid redundancy)

Reset CSS

comprehensive eric meyer (


Toward Modular CSS

  • build a grid system
  • blueprintCSS

Working with Multiple CSS files

Good-organize by purpose

  • framework
  • core/skin
  • hacks
  • application sections

Problematic-organize by rule type (but useful for user-skinnable apps)

  • colors/images
  • typography
  • positioning

Images: Organization and planning

  • keep them in a central place
  • separate structure and skin
  • keep logos in one place
  • use a naming convention for commonly repeated files

Images: Minimize file size

  • PNG files are your friend
  • jpegs for photos and continuous tones
  • GIFS for simple illustrations
  • use the comparison views of your image editor
  • Fireworks to do the compress slightly better than photoshop

Images: Loading Smart

  • minimize your image needs
  • use css sprites for nav tabs
  • do you really need an image—Use CSS3 for nonfunctional enhancements (like rounded corners)
  • trim images to minimal dimension
  • small tile backgrounds (if you do it 10000 times it reduces performance)

Essential tools

  • firebug
  • yslow
  • firefox web developer toolbar
  • safari web developer toos
  • ie web developer tool extensions