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 DESIGN 4. CONTEXTUAL EXPERIENCE DESIGN 5. PROJECT PROCESS
what is a website?
WEBSITE CONTENT + UI + UX CONTENT + UI + UX CONTENT + UI + UX CONTENT + UI + UX
where do websites live?
DIGITAL LANDSCAPE source : http:/ /static.lukew.com/uni fi ed_device_design.png
who are websites for?
USERS!
http:/ /m3.nicetransition.com “ Around 6.8 billion mobile subscriptions by the “ Around 6.8 billion mobile subscriptions by the “ Around 6.8 billion mobile subscriptions by the end of the year - just short of the Earth's 7.1 end of the year - just short of the Earth's 7.1 end of the year - just short of the Earth's 7.1 billion population ” billion population ” billion population ” 2013 source : http:/ /goo.gl/TNdUMS
90 % of American adults have a cell phone source : http:/ /www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
42 % of American adults own a tablet source : http:/ /www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
67 % of cell owners fi nd 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/
44 % of 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/
29 % of 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/
we’re all a bunch of weirdos
BUT
we love this stu ff
we want to be connected
we want to have consistent experiences
how can we start to make these experiences?
RESPONSIVE WEB DESIGN
what is RWD?
Responsive web design (RWD) is a web design Responsive web design (RWD) is a web design Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an approach aimed at crafting sites to provide an approach aimed at crafting sites to provide an optimal viewing experience—easy reading and optimal viewing experience—easy reading and optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, navigation with a minimum of resizing, panning, navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices and scrolling—across a wide range of devices and scrolling—across a wide range of devices (from mobile phones to desktop computer (from mobile phones to desktop computer (from mobile phones to desktop computer monitors). monitors). monitors). source : http:/ /en.wikipedia.org/wiki/Responsive_web_design
“[ yea], people just think of it as a squishy page ” – Adam Weis source : a conversation we had
“Basics”
RWD BASICS <meta />
RWD BASICS <meta name=“viewport” content=“width=device-width, initial-scale=1” /> Options: • device-width • initial scale = 1 • maximum-scale = 1 • width = #
RWD BASICS @media
RWD MEDIA QUERIES @media screen and (min-width: 25em) { @media screen and (min-width: 25em) { @media screen and (min-width: 25em) { /* CSS properties here */ /* CSS properties here */ /* CSS properties here */ } } }
RWD MEDIA TYPES •all •all •all •screen •screen •screen •aural •aural •aural •tty •tty •tty •braille •braille •braille •tv •tv •tv •embossed •embossed •embossed •handheld •handheld •handheld •print •print •print •projection •projection •projection
RWD MEDIA FEATURES •width •color •height •color-index •device-width •monochrome •device-height •resolution •orientation •scan •aspect-ratio •grid •device- aspect-ratio
RWD MEDIA QUERIES @media screen and (min-width: 25em) { /* CSS properties here */ }
“ Responsive Web Design: “ Responsive Web Design: Relying too much on screen size ” Relying too much on screen size ” – Luke Wroblewski source : http:/ /www.lukew.com/ ff /entry.asp?1816
Designing websites for today is more than Designing websites for today is more than Designing websites for today is more than Designing websites for today is more than Designing websites for today is more than fl uid grids, fl exible media, and media queries. fl uid grids, fl exible media, and media queries. fl uid grids, fl exible media, and media queries. fl uid grids, fl exible media, and media queries. fl uid grids, fl exible media, and media queries.
“They are fundamentally di ff erent platforms with di ff erent usability considerations” –Todd Anglin source : http:/ /www.kendoui.com/blogs/teamblog/posts/12-09-11/universal_mobile_apps_with_html5_and_kendo_ui.aspx
there’s a lot more
Understanding your user Understanding your user is the most important piece is the most important piece
UNDERSTAND YOUR USER collect data
UNDERSTAND YOUR USER create stories
how will pieces adapt?
CONTEXTUAL EXPERIENCE DESIGN
it's not just about the device, it's not just about the device, it’s context and device. it’s context and device.
the experience is focused on the user, the experience is focused on the user, the experience is focused on the user, the experience is focused on the user, the user’s device, and variable factors the user’s device, and variable factors the user’s device, and variable factors the user’s device, and variable factors
FOCUS ON USER •Demographics •Social •Third-Party Integration •Location •Date & Time •Personalized Content •Virtual T o Physical
FOCUS ON USER DEMOGRAPHICS Experience is tailored based on age, gender, locale, home town, and more.
FOCUS ON USER SOCIAL Experience is influenced based on user’s involvement on social networks and/or having more interactive involvement.
FOCUS ON USER THIRD-PARTY INTEGRATION The experience is improved through the use of third-party APIs and data sources that provide additional content.
FOCUS ON USER LOCATION Experience is enhanced by knowing the user’s location to present content that is relevant to that specific location.
FOCUS ON USER DATE & TIME Experience uses date and time as a filter to deliver relevant and time sensitive content.
FOCUS ON USER PERSONALIZED CONTENT Content is filtered and targeted to the individual user within the experience. Based on user's engagement and/or loyalty.
FOCUS ON USER VIRTUAL TO PHYSICAL The experience is expanded outside of the constraints of device by user’s engagement/ interactions with physical structures to share data and functionality back-and-forth.
FOCUS ON USER’S DEVICE •RWD •Conditional Fallbacks •Progressive Enhancement •Bandwidth •Input •Attentive User Interfaces
FOCUS ON USER’S DEVICE RWD Experience that provides an optimal viewing experience across the digital landscape.
FOCUS ON USER’S DEVICE CONDITIONAL FALLBACKS Experience is not dependent on enhancements. Fallbacks are in place if user does not opt-in to a specific functionality or contextual factors lessen the experience.
FOCUS ON USER’S DEVICE PROGRESSIVE ENHANCEMENT Experience focuses on content and emphasizes accessibility. Target lowest common denominator and then add functionality/enhancements.
FOCUS ON USER’S DEVICE BANDWIDTH Experience takes in account user’s connectivity. Bandwidth sensitive content can be delivered to users when their current connectivity is known.
FOCUS ON USER’S DEVICE INPUT Experience adapts based on user’s device inputs, features and capabilities.
FOCUS ON USER’S DEVICE ATTENTIVE USER INTERFACES Experience is extended by notifications that may exist outside of the experience. Rules can be created to alert the user about specific notifications.
CONTEXTUAL DESIGN •Demographics •RWD •Social •Conditional Fallbacks •Third-Party Integration •Progressive Enhancement •Bandwidth •Location •Input •Date & Time •Attentive User Interfaces •Personalized Content •Virtual To Physical
PROJECT PROCESS
PROJECT PROCESS CORE DEFINE ARCHITECT REVIEW
Recommend
More recommend
