Planning Adaptive Interfaces [Breaking Development Nashville 2013]

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

PLANNING

ADAPTIVE
INTERFACES
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

© Brad Frost

“

Just four years ago the majority of our
visitors saw our website in Internet
Explorer on a Windows computer on a
minimu...

“

Windows users used to comprise
93.5% of our web visits. Now that
percentage is 72.4%. Visitors using a
Mac have more th...

“

The percentage visiting from a mobile
device or tablet … was just
0.1% in 2008. It has since grown
exponentially,

200-...

“

Four years ago 75.5% of our web
visitors used Internet Explorer. That
number has fallen to 37%. Firefox now
comprises 2...

“

In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2...

© Brad Frost

Perception

Perception

Perception

Perception

“

There is no WebKit
on Mobile

— Peter-Paul Koch

WebKit vs. Acid3

http://www.quirksmode.org/webkit_mobile.html

WebKit vs. Acid3

http://www.quirksmode.org/webkit_mobile.html

WebKit vs. Acid3

http://www.quirksmode.org/webkit_mobile.html

“

Surely there’s
platform
consistency!?!

— Any sane individual

“

There is no Android

— Stephanie Rieger

http://yfrog.com/z/ob5kndj

But Android
is NOT unique
in this

The culprits?
SCREEN SIZE

The culprits?
EMBEDDED VIEWS

The culprits?
BROWSER CHROME

The culprits?
ZOOM LEVEL

The culprits?
ZOOM LEVEL
(Ok, this one’s on Android)

6.8 Billion

2011

2012

2010

2011

2010

2009
2009

2012

http://mobithinking.com/mobile-marketing-tools/latest-mobile-s...

“

Smartphone sales accounted for

nearly 85% of all mobile
phone sales in the US in Q1 2013.
http://www.chetansharma.com/...

“

Smartphones have reached
50% penetration in the US…
http://www.chetansharma.com/usmarketupdateq12013.htm

“

…but that’s concentrated in

30% of households

http://www.chetansharma.com/usmarketupdateq12013.htm

Over 80%
of these are

FEATURE PHONES,
not smartphones

http://developinthecloud.drdobbs.com/author.asp?doc_id=253055&sect...

especially in

DEVELOPING
COUNTRIES

Internet in Kenya

MOBILE = 90%

http://www.cck.go.ke/resc/downloads/SECTOR_STATISTICS_REPORT_Q4_11-12.pdf

The reality

“The commoditization of smartphone
hardware is just the beginning … of a
huge new wave of cheap devices
about to invade ou...

© Brad Frost

© Brad Frost

We DON’T know

We DON’T know

Even when
we think
we know,
WE ARE
PROBABLY
WRONG

So how
do we COPE?

Progressive
Enhancement

Technological
restrictions

User Experience
BASIC

ADVANCED

Browser Capabilities

User Experience
BASIC

ADVANCED

Browser Capabilities

Content

User Experience
BASIC

Semantics

Browser Capabilities

Content

ADVANCED

User Experience

Design
BASIC

Semantics

Browser Capabilities

Content

ADVANCED

User Experience

Interactivity
Design

BASIC

Semantics

Browser Capabilities

Content

ADVANCED

User Experience

Accessibility
Interactivity
Design

BASIC

Semantics

Browser Capabilities

Content

ADVANCED

User Experience

ARIA
JavaScript
CSS

BASIC

HTML

Browser Capabilities

Text & HTTP

ADVANCED

HTML

HTML5

HTML
Microformats
HTML4

I like an escalator because
an escalator can never break,
it can only become stairs.

— Mitch Hedberg

Graceful
Degradation

Modern
Browsers
Older Browsers

Modern
Browsers
Older Browsers

a dynamic web page can
never break, it can only
become a web page.

๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading

And then
there’s speed

Graceful Degradation

Progressive
Enhancement

Content

Graceful Degradation

Progressive
Enhancement

on

Responsive
Web Design

Progressive
Enhancement
Mobile
First

PLANNING ADAPTIVE INTERFACES

Complex interfaces

PLANNING ADAPTIVE INTERFACES

Complex interfaces

PLANNING ADAPTIVE INTERFACES

There is no image…
<p class="entry-image"
data-image-src="/alztheme/images/news/sample.jpg">...

PLANNING ADAPTIVE INTERFACES

Until there is
<p class="entry-image"
data-image-src="/alztheme/images/news/sample.jpg"
data...

PLANNING ADAPTIVE INTERFACES

Adaptive widget logic
Lazy load the
images

Images

Yes

No
images

No

Yes

JS?

No

PLANNING ADAPTIVE INTERFACES

Adaptive widget logic
Lazy load the
images

No
images
LIVE

Images

Yes

No

Yes

JS?

No

H...

PLANNING ADAPTIVE INTERFACES

Complex interfaces

PLANNING ADAPTIVE INTERFACES

Complex interfaces

PLANNING ADAPTIVE INTERFACES

No need to link
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.pn...

PLANNING ADAPTIVE INTERFACES

Adaptive widget logic
Create
the link &
make image
clickable

Click to
Enlarge

Image

Yes

...

PLANNING ADAPTIVE INTERFACES

Complex interfaces

PLANNING ADAPTIVE INTERFACES

Make the connection
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/larg...

PLANNING ADAPTIVE INTERFACES

Complex interfaces

PLANNING ADAPTIVE INTERFACES

Complex interfaces

PLANNING ADAPTIVE INTERFACES

Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
<div class="section">
<h2>...

PLANNING ADAPTIVE INTERFACES

Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img ...

PLANNING ADAPTIVE INTERFACES

Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img ...

PLANNING ADAPTIVE INTERFACES

No JS, basic CSS

PLANNING ADAPTIVE INTERFACES

Widget logic

Linear

Split
the content &
make some
tabs

Yes

Tabbed

JS?

No

PLANNING ADAPTIVE INTERFACES

On DOM ready
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">
<secti...

PLANNING ADAPTIVE INTERFACES

Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface" data-tab-threshold="800"...

PLANNING ADAPTIVE INTERFACES

Adaptive widget logic
Split
the content &
make some
tabs

Linear

LIVE

Tabbed

Yes

No

Yes...

PLANNING ADAPTIVE INTERFACES

Adding ARIA

role="tablist"

85

PLANNING ADAPTIVE INTERFACES

Adding ARIA

role="tab"
aria-selected="true"
aria-controls="folder-1"

PLANNING ADAPTIVE INTERFACES

Adding ARIA

role="tab"
aria-selected="false"
aria-controls="folder-4"

PLANNING ADAPTIVE INTERFACES

Adding ARIA

role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"

PLANNING ADAPTIVE INTERFACES

Adding ARIA

role="application"
aria-activedescendant="folder-1"

PLANNING ADAPTIVE INTERFACES

Result!

http://is.gd/lazyloading_demo

Now it’s time
for YOU
to do
some work

PLANNING ADAPTIVE INTERFACES

Interfaces
๏

Carousel

๏

Complex Navigation

๏

Video Gallery

๏

Timeline

๏

Tab Interfa...

PLANNING ADAPTIVE INTERFACES

Carousel

PLANNING ADAPTIVE INTERFACES

Video Gallery

PLANNING ADAPTIVE INTERFACES

Tabbed Interface

PLANNING ADAPTIVE INTERFACES

Data Tables

PLANNING ADAPTIVE INTERFACES

Scorecard

PLANNING ADAPTIVE INTERFACES

Complex Navigation

PLANNING ADAPTIVE INTERFACES

Timeline

PLANNING ADAPTIVE INTERFACES

Modal Dialogs

PLANNING ADAPTIVE INTERFACES

Accordion

PLANNING ADAPTIVE INTERFACES

Shopping Cart

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1066413 views
Storytelling For The Web: Integrate... by Chiara Aliotta 986196 views
Artificial Intelligence, Data and C... by OECD Directorate ... 930965 views
How to Leverage AI to Boost Employe... by SocialHRCamp 396116 views
2024 State of Marketing Report – by... by Marius Sescu 223818 views
Everything You Need To Know About C... by Expeed Software 238978 views

View on Slideshare

1 of 112 Ad

View on Slideshare

1 of 112 Ad