High Noon Shootout: Design vs Implementation

A presentation at @media 2007 in June 2007 in London, UK by Drew McLellan

Slide 1

Slide 1

High-Noon Shoot-out Implementation Drew McLellan allinthehead.com

Slide 2

Slide 2

nxoc01.cern.ch

Slide 3

Slide 3

We Are Implementers

Slide 4

Slide 4

Know Your Enemies “Know thy enemy and know thy self and you will win a hundred battles.” - Sun Tzu Wu

Slide 5

Slide 5

Fixed Width Layouts

Slide 6

Slide 6

“Visual designers on the Web hunger for precision. It’s something we’ve long been denied, largely due to the fact that the way people access and use the Web is so variegated that no matter what we do design-wise, people are simply going to be looking at our designs using different resolutions, window sizing, and browsers.”

  • Molly E. Holzschlag, molly.com

Slide 7

Slide 7

“I favour liquid layout – it seems a more intuitive, appropriate and elegant method for a medium where the canvas is unknown.”

  • Richard Rutter, clagnut.com

Slide 8

Slide 8

Flash for non-media presentation

Slide 9

Slide 9

“Although multimedia has its role on the Web, current Flash technology tends to discourage usability for three reasons: it makes bad design more likely, it breaks with the Web's fundamental interaction style, and it consumes resources that would be better spent enhancing a site's core value.”

  • The Fonz

http://www.useit.com/alertbox/20001029.html

Slide 10

Slide 10

i.
Flash breaks the basic nature of the web whenever it is used for anything other than as a player for graphical or audible content

Slide 11

Slide 11

ii.
Every instance of the Flash Player has a tangible impact on the performance of a web browser

Slide 12

Slide 12

Text Replacement

Slide 13

Slide 13

i.
Text on a web page is a solved problem

Slide 14

Slide 14

ii.
Serif Sans-Serif

Monospace

Fantasy Cursive

Slide 15

Slide 15

Styled Form Elements

Slide 16

Slide 16

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Slide 17

Slide 17

“In order to style form controls in any sort of meaningful way, it will be necessary to invent a whole bunch of new properties and pseudo-classes and describe how they behave and interact. That's much more easily said than done. It's taken more than five years to not finish CSS 2.1, and that’s just a reduced and clarified version of CSS 2. Just imagine how much longer it could take to not finish inventing a whole new branch of CSS.”

  • Eric Meyer, CSS über-boffin

Slide 18

Slide 18

Potent GETs

Slide 19

Slide 19

“The convention has been established that the GET and HEAD methods SHOULD NOT have the significance of taking an action other than retrieval. These methods ought to be considered "safe". This allows user agents to represent other methods, such as POST, PUT and DELETE, in a special way, so that the user is made aware of the fact that a possibly unsafe action is being requested.”

  • http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

Slide 20

Slide 20

Slide 21

Slide 21

i had ur data but i eated it

Slide 22

Slide 22

Controlled Heights

Slide 23

Slide 23

Controlled Text Size

Slide 24

Slide 24

Colour Schemes & Contrast

Slide 25

Slide 25

“Color is fluid. It interacts and changes based on its surroundings. Some colors can appear lighter
or darker based on what color they appear on or next to.”

  • Jason Santa Maria

Slide 26

Slide 26

The User Agent

Slide 27

Slide 27

The Fold

Slide 28

Slide 28

Slide 29

Slide 29

THERE IS NO FOLD