Tweet
Tweet

Slide 1

Slide 1 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 RESPONSIVE WEB DESIGN A UX PERSPECTIVE

Slide 2

Slide 2 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 LOVELY DATA

Slide 3

Slide 3 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Mobile data is growing 4x faster than broadband. http://www.readwriteweb.com/archives/mobile_data_explosion_75_exabytes_by_2015.php

Slide 4

Slide 4 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 By 2015 mobile devices will be used to access the internet more than PC’s http://www.idc.com/getdoc.jsp?containerId=prUS23028711

Slide 5

Slide 5 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 25% of US & UK internet users access the the web via a mobile connection http://ondeviceresearch.com/blog

Slide 6

Slide 6 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 More than 20% of internet users in the US/UK don’t access the web via a PC http://ondeviceresearch.com/blog

Slide 7

Slide 7 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 RESPONSIVE DESIGN

Slide 8

Slide 8 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011

Slide 9

Slide 9 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 A design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user's needs. - Ethan Marcotte

Slide 10

Slide 10 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Flexible Grids

Slide 11

Slide 11 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Flexible Media

Slide 12

Slide 12 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Media Queries

Slide 13

Slide 13 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 CONTROL

Slide 14

Slide 14 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011

Slide 15

Slide 15 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011

Slide 16

Slide 16 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Embrace Flexibility

Slide 17

Slide 17 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 THE HOLY WAR

Slide 18

Slide 18 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 One Web to Rule Them All

Slide 19

Slide 19 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Many Webs to...

Slide 20

Slide 20 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 It Depends

Slide 21

Slide 21 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 the audience It depends on...

Slide 22

Slide 22 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 business requirements It depends on...

Slide 23

Slide 23 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 time & technology constraints It depends on...

Slide 24

Slide 24 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 maintenance requirements It depends on...

Slide 25

Slide 25 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 politics It depends on...

Slide 26

Slide 26 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 CONTEXT

Slide 27

Slide 27 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Context is King: circumstances or conditions that surround a person, place or thing. Content is of little value if it does not address the context of where you are. - Cameron Moll

Slide 28

Slide 28 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 layout ≠ content

Slide 29

Slide 29 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 CONTENT FIRST

Slide 30

Slide 30 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 1. Build your content

Slide 31

Slide 31 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 2. Add semantic structure

Slide 32

Slide 32 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 3. Add the presentation

Slide 33

Slide 33 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 4. Add the behavior

Slide 34

Slide 34 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Progressive Enhancement

Slide 35

Slide 35 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 MISTAKEN PERSONA

Slide 36

Slide 36 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 We have once again created a consensual hallucination. Just as we generated a mythical desktop user with the perfect viewport size, a fast connection and an infinite supply of attention, we have now generated a mythical mobile user who has a single goal and no attention span. - Jeremy Keith

Slide 37

Slide 37 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Tailor the approach to the project

Slide 38

Slide 38 text

CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 FIN