Slide 1

Slide 1 text

WEB NATIVE Paul Robert Lloyd DESIGNER Geek in the Park 13 August 2011 THE

Slide 2

Slide 2 text

WEB NATIVE v

Slide 3

Slide 3 text

WEB NATIVE NATIVE DEVICE v

Slide 4

Slide 4 text

WEB NATIVE NATIVE DEVICE &

Slide 5

Slide 5 text

WEB NATIVE

Slide 6

Slide 6 text

Happy 20th birthday! Photo by Robin Robokow http://flic.kr/p/AqLWt

Slide 7

Slide 7 text

What are the three core web technologies? QUESTION ? ? ?

Slide 8

Slide 8 text

HTML What are the three core web technologies? QUESTION ? ?

Slide 9

Slide 9 text

HTML HTTP What are the three core web technologies? QUESTION ?

Slide 10

Slide 10 text

HTML HTTP URI’s What are the three core web technologies? QUESTION

Slide 11

Slide 11 text

“ The primary design principle underlying the Web’s usefulness and growth is universality… it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. TIM BERNERS-LEE Long Live the Web: A Call for Continued Open Standards and Neutrality

Slide 12

Slide 12 text

“ Want to know if your ‘HTML application’ is part of the web? Link me into it. Not just link me to it; link me into it. Not just to the black-box frontpage. Link me to a piece of content… That is the web: The beautiful interconnection of navigable content. BEN WARD Understand the web

Slide 13

Slide 13 text

Fully responsive!

Slide 14

Slide 14 text

BAD EXAMPLES

Slide 15

Slide 15 text

As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. In these older browsers you may have trouble using certain features and eventually these apps may stop working entirely. VENKET PANCHAPAKESAN (GOOGLE) Our plans to support modern browsers across Google Apps “

Slide 16

Slide 16 text

JS CSS HTML

Slide 17

Slide 17 text

HTML Content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

CONTENT

Slide 21

Slide 21 text

In order to embrace designing native layouts for the web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out. MARK BOULTON A Richer Canvas “

Slide 22

Slide 22 text

CONTENT FIRST

Slide 23

Slide 23 text

TIP Design with real content.

Slide 24

Slide 24 text

CSS Presentation

Slide 25

Slide 25 text

RESPONSIVE DESIGN

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

CONTEXT

Slide 30

Slide 30 text

Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1Mb PNG of somebody smiling at a salad. MAT 'WILTO' MARQUIS Tweeted on 27 April 2011 “

Slide 31

Slide 31 text

NO SILVER BULLET

Slide 32

Slide 32 text

TIP Experiment and share your findings.

Slide 33

Slide 33 text

TIP Beware of fixed or device specific values. pt px PRINT SCREEN WEB % em

Slide 34

Slide 34 text

JavaScript Behaviour

Slide 35

Slide 35 text

THE MISBEHAVING BEHAVIOURAL LAYER

Slide 36

Slide 36 text

TIP Think of enhancements not fallbacks.

Slide 37

Slide 37 text

Erm... I thought this talk was about design?

Slide 38

Slide 38 text

DEVELOPERS = DESIGNERS

Slide 39

Slide 39 text

USER EXPERIENCE DESIGNER INTERACTION DESIGNER FRONT-END DEVELOPER ENTIRE TEAM

Slide 40

Slide 40 text

USER EXPERIENCE DESIGNER INTERACTION DESIGNER FRONT-END DEVELOPER ENTIRE TEAM

Slide 41

Slide 41 text

“ Being T-shaped means you can shift yourself and provide value at just about any stage or type of project—like sketching, wire-framing, visual design, and code. MARK OTTO Flatten those T’s

Slide 42

Slide 42 text

TIP Only use static images to aid collaboration.

Slide 43

Slide 43 text

(That’s what she said) This is hard!

Slide 44

Slide 44 text

paulrobertlloyd.com/archive/ @paulrobertlloyd Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc Thank-you.