http:/ /m3.nicetransition.com CONTEXTUAL DESIGN Presented by Kevin - - PowerPoint PPT Presentation

▶
http m3 nicetransition com
SMART_READER_LITE
LIVE PREVIEW

http:/ /m3.nicetransition.com CONTEXTUAL DESIGN Presented by Kevin - - PowerPoint PPT Presentation

Sep 28, 2022 159 likes •880 views

http:/ /m3.nicetransition.com CONTEXTUAL DESIGN Presented by Kevin Mack @ nicetransition I GET EXCITED & MAKE THINGS CARDINAL SOLUTIONS COLUMBUS WEB GROUP OUTLINE 1. WEBSITES & CURRENT LANDSCAPE 2. USERS & USAGE 3. RESPONSIVE WEB

slide-1
SLIDE 1

CONTEXTUAL DESIGN

Presented by Kevin Mack

@nicetransition

http:/ /m3.nicetransition.com

slide-2
SLIDE 2

I GET EXCITED

CARDINAL SOLUTIONS COLUMBUS WEB GROUP

& MAKE THINGS

slide-3
SLIDE 3

OUTLINE

  • 1. WEBSITES & CURRENT LANDSCAPE
  • 2. USERS & USAGE
  • 3. RESPONSIVE WEB DESIGN
  • 4. CONTEXTUAL EXPERIENCE DESIGN
  • 5. PROJECT PROCESS
slide-4
SLIDE 4

what is a website?

slide-5
SLIDE 5

CONTENT + UI + UX CONTENT + UI + UX CONTENT + UI + UX CONTENT + UI + UX

WEBSITE

slide-6
SLIDE 6

where do websites live?

slide-7
SLIDE 7 source: http:/ /static.lukew.com/unified_device_design.png

DIGITAL LANDSCAPE

slide-8
SLIDE 8

who are websites for?

slide-9
SLIDE 9

USERS!

slide-10
SLIDE 10 2013

“Around 6.8 billion mobile subscriptions by the end of the year - just short of the Earth's 7.1 billion population”

source: http:/ /goo.gl/TNdUMS

“Around 6.8 billion mobile subscriptions by the end of the year - just short of the Earth's 7.1 billion population” “Around 6.8 billion mobile subscriptions by the end of the year - just short of the Earth's 7.1 billion population”

http:/ /m3.nicetransition.com

slide-11
SLIDE 11
  • f American adults have a cell phone
source: http:/ /www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

90%

slide-12
SLIDE 12
  • f American adults own a tablet
source: http:/ /www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

42%

slide-13
SLIDE 13
  • f cell owners find themselves checking their

phone for messages, alerts, or calls — even when they don’t notice their phone ringing or vibrating.

source: http:/ /www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

67%

slide-14
SLIDE 14
  • f cell owners have slept with their phone next to

their bed because they wanted to make sure they didn’t miss any calls, text messages, or other updates during the night.

source: http:/ /www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

44%

slide-15
SLIDE 15
  • f cell owners describe their cell phone as

“something they can’t imagine living without.”

source: http:/ /www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

29%

slide-16
SLIDE 16

we’re all a bunch of weirdos

slide-17
SLIDE 17

BUT

slide-18
SLIDE 18

we love this stuff

slide-19
SLIDE 19

we want to be connected

slide-20
SLIDE 20

we want to have consistent experiences

slide-21
SLIDE 21

how can we start to make these experiences?

slide-22
SLIDE 22

RESPONSIVE WEB DESIGN

slide-23
SLIDE 23

what is RWD?

slide-24
SLIDE 24

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an

  • ptimal viewing experience—easy reading and

navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

source: http:/ /en.wikipedia.org/wiki/Responsive_web_design

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an

  • ptimal viewing experience—easy reading and

navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an

  • ptimal viewing experience—easy reading and

navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

slide-25
SLIDE 25 – Adam Weis

“[yea], people just think of it as a squishy page”

source: a conversation we had
slide-26
SLIDE 26

“Basics”

slide-27
SLIDE 27

<meta />

RWD BASICS

slide-28
SLIDE 28

Options:

  • device-width
  • initial scale = 1
  • maximum-scale = 1
  • width = #

RWD

<meta name=“viewport” content=“width=device-width, initial-scale=1” />

BASICS

slide-29
SLIDE 29

@media

RWD BASICS

slide-30
SLIDE 30

@media screen and (min-width: 25em) { /* CSS properties here */ }

RWD

@media screen and (min-width: 25em) { /* CSS properties here */ } @media screen and (min-width: 25em) { /* CSS properties here */ }

MEDIA QUERIES

slide-31
SLIDE 31
  • all
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

RWD MEDIA TYPES

  • all
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv
  • all
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv
slide-32
SLIDE 32
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-

aspect-ratio

  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

RWD MEDIA FEATURES

slide-33
SLIDE 33

RWD

@media screen and (min-width: 25em) { /* CSS properties here */ }

MEDIA QUERIES

slide-34
SLIDE 34

“Responsive Web Design: Relying too much on screen size”

source: http:/ /www.lukew.com/ff/entry.asp?1816 – Luke Wroblewski

“Responsive Web Design: Relying too much on screen size”

slide-35
SLIDE 35

Designing websites for today is more than fluid grids, flexible media, and media queries. Designing websites for today is more than fluid grids, flexible media, and media queries. Designing websites for today is more than fluid grids, flexible media, and media queries. Designing websites for today is more than fluid grids, flexible media, and media queries. Designing websites for today is more than fluid grids, flexible media, and media queries.

slide-36
SLIDE 36 –Todd Anglin

“They are fundamentally different platforms with different usability considerations”

source: http:/ /www.kendoui.com/blogs/teamblog/posts/12-09-11/universal_mobile_apps_with_html5_and_kendo_ui.aspx
slide-37
SLIDE 37

there’s a lot more

slide-38
SLIDE 38

Understanding your user is the most important piece Understanding your user is the most important piece

slide-39
SLIDE 39

collect data

UNDERSTAND YOUR USER

slide-40
SLIDE 40

create stories

UNDERSTAND YOUR USER

slide-41
SLIDE 41

how will pieces adapt?

slide-42
SLIDE 42

CONTEXTUAL EXPERIENCE DESIGN

slide-43
SLIDE 43

it's not just about the device, it’s context and device. it's not just about the device, it’s context and device.

slide-44
SLIDE 44

the experience is focused on the user, the user’s device, and variable factors the experience is focused on the user, the user’s device, and variable factors the experience is focused on the user, the user’s device, and variable factors the experience is focused on the user, the user’s device, and variable factors

slide-45
SLIDE 45
  • Demographics
  • Social
  • Third-Party Integration
  • Location
  • Date & Time
  • Personalized Content
  • Virtual T
  • Physical

FOCUS ON USER

slide-46
SLIDE 46

Experience is tailored based


  • n age, gender, locale, home

town, and more.

DEMOGRAPHICS

FOCUS ON USER

slide-47
SLIDE 47

Experience is influenced based

  • n user’s involvement on social

networks and/or having more interactive involvement.

SOCIAL

FOCUS ON USER

slide-48
SLIDE 48

The experience is improved through the use of third-party APIs and data sources that provide additional content.

THIRD-PARTY INTEGRATION

FOCUS ON USER

slide-49
SLIDE 49

Experience is enhanced by knowing the user’s location to present content that is relevant to that specific location.

LOCATION

FOCUS ON USER

slide-50
SLIDE 50

Experience uses date and time as a filter to deliver relevant and time sensitive content.

DATE & TIME

FOCUS ON USER

slide-51
SLIDE 51

Content is filtered and targeted to the individual user within the

  • experience. Based on user's

engagement and/or loyalty.

PERSONALIZED CONTENT

FOCUS ON USER

slide-52
SLIDE 52

The experience is expanded

  • utside of the constraints of

device by user’s engagement/ interactions with physical structures to share data and functionality back-and-forth.

VIRTUAL TO PHYSICAL

FOCUS ON USER

slide-53
SLIDE 53
  • RWD
  • Conditional Fallbacks
  • Progressive Enhancement
  • Bandwidth
  • Input
  • Attentive User Interfaces

FOCUS ON USER’S DEVICE

slide-54
SLIDE 54

FOCUS ON USER’S DEVICE

Experience that provides an

  • ptimal viewing experience

across the digital landscape.

RWD

slide-55
SLIDE 55

FOCUS ON

CONDITIONAL FALLBACKS

USER’S DEVICE

Experience is not dependent

  • n enhancements. Fallbacks

are in place if user does not

  • pt-in to a specific functionality
  • r contextual factors lessen the

experience.

slide-56
SLIDE 56

FOCUS ON

Experience focuses on content and emphasizes accessibility. Target lowest common denominator and then add functionality/enhancements.

PROGRESSIVE ENHANCEMENT

USER’S DEVICE

slide-57
SLIDE 57

FOCUS ON

Experience takes in account user’s connectivity. Bandwidth sensitive content can be delivered to users when their current connectivity is known.

BANDWIDTH

USER’S DEVICE

slide-58
SLIDE 58

INPUT

FOCUS ON

Experience adapts based on user’s device inputs, features and capabilities.

USER’S DEVICE

slide-59
SLIDE 59

FOCUS ON

Experience is extended by notifications that may exist

  • utside of the experience. Rules

can be created to alert the user about specific notifications.

ATTENTIVE

USER INTERFACES

USER’S DEVICE

slide-60
SLIDE 60
  • Demographics
  • Social
  • Third-Party Integration
  • Location
  • Date & Time
  • Personalized Content
  • Virtual To Physical
  • RWD
  • Conditional Fallbacks
  • Progressive Enhancement
  • Bandwidth
  • Input
  • Attentive User Interfaces

CONTEXTUAL DESIGN

slide-61
SLIDE 61

PROJECT PROCESS

slide-62
SLIDE 62

PROJECT PROCESS

CORE DEFINE ARCHITECT REVIEW
slide-63
SLIDE 63 DEFINE STRATEGY CONTENT STRATEGY CONTENT EVALUATION DEVELOP CONTENT REVIEW CONTENT REVIEW CONTENT BUSINESS REQUIREMENTS SYSTEM DISCOVERY FUNCTIONAL & NON-FUNCTIONAL REQUIREMENTS TEST AGAINST REQUIREMENTS BRAND IDENTITY & DISCOVERY CONCEPT LOOK & FEEL (PSD) UI TOOLKIT (Pattern Lab, etc) WHITEBOARDING WIREFRAMES STRUCTURE/GRID SYSTEM GRAPHIC PRODUCTION DEFINE PERFORMANCE MEASUREMENT REVIEW & ADDRESS SITE PERFORMANCE MEASUREMENT PLANNING ANALYTIC REVIEW REVIEW & ADDRESS ANALYTICS APPLICATION DEVELOPMENT CORE DEFINE ARCHITECT REVIEW TECH STACK/PLATFORM
slide-64
SLIDE 64 HEADER FOOTER 2 3 4 5 1

PROJECT WIREFRAMES

slide-65
SLIDE 65 HEADER FOOTER 2 3 4 5 1 HEADER FOOTER 2 3 4 5 1

SMALL SCREEN LARGE SCREEN

slide-66
SLIDE 66 HEADER FOOTER 2 3 4 5 1 HEADER FOOTER 2 3 4 5 1 Section Title Block of copy CTA

“ZONE 1”

slide-67
SLIDE 67

Architect Modular Solutions

PROJECT PROCESS

slide-68
SLIDE 68

“modularity is a requirement of maintainable systems"

– Ben Callahan

“modularity is a requirement of maintainable systems"

source: http:/ /www.seesparkbox.com/foundry/the_sum_of_the_parts
slide-69
SLIDE 69

Let experts lead their craft

PROJECT PROCESS

Plan, collaborate, and communicate LISTEN TO YOUR USERS LISTEN TO YOUR USERS

slide-70
SLIDE 70

“My goal is to make the web as accessible and beautiful as possible for the people who are trying to access it”

source: http:/ /www.creativebloq.com/netmag/ethan-marcotte-how-responsive-web-design-came-about-61411189 – Ethan Marcotte

“My goal is to make the web as accessible and beautiful as possible for the people who are trying to access it”

slide-71
SLIDE 71

thank you!

–@nicetransition