Post on 08-May-2015
description
Chris CherrettSenior UX DeveloperAdido
@chrischerrett#letsdodigital
The Theatre of the Future-Friendly Website
“The future of web and mobile design is that there is no distinction between
the two.” - Tarun Mitra, 2013
source: https://medium.com/i-m-h-o/587b66677bf3
This is not the web.
This is not the web.
This is the web.
source: http://bradfrostweb.com/wp-content/uploads/2012/11/devices.jpg
This will be the web.
(we’re already seeing this…)
source: Brad Frost – “For a Future-Friendly Web“
Apple’s iWatch (?)
source: http://www.wallibs.com/newimg/
There is no such thing as future-proof
But we can be future-friendly
“The things that we create today will exist beyond what we originally
intended them for”- Brad Frost, 2011
source: http://vimeo.com/29961436
You have to reach your target user, wherever they are,
whatever device they use.
• Mobile web users are estimated to have reached one billion
• Mobile internet adoption has outpaced desktop internet
adoption by 8x
• Smartphone sales surpassed worldwide PC sales in 2011
Today's smartphones are sculpting the landscape of the web
source: Brad Frost – “For a Future-Friendly Web“
source: Brad Frost – “For a Future-Friendly Web“
source: Brad Frost – “For a Future-Friendly Web“
source: Brad Frost – “For a Future-Friendly Web“
source: Brad Frost – “For a Future-Friendly Web“
Give people want they want.
Make stuff that is worthwhile.
People’s capacity for non-relevant content is rapidly diminishing.
source: Brad Frost – “For a Future-Friendly Web“
non-relevant
non-relevant
non-relevantnon-
relevant
non-relevant
non-releva
nt
non-releva
nt
non-relevant
non-relevant
non-relevant
non-relevant
Responsive Web Design allows us to build websites that are optimised for screens of all sizes; small mobile devices, tablets and large
desktop monitors.
RWD will drive the decline of standalone mobileoptimised sites and native apps.
In fact, it is already the trend and the right path to follow.
“Design is how it works”- Steve Jobs
Large-screen and Small-screen userinteractions are polar opposites
(or are they?)
Factors such as Click versus Touch, Screen-size, Pixel-resolution, optimized markup and many
more have become crucial.
Today
Craft an optimal experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices
frommobile phones to large monitors
• Fluid• Media queries
• Rules based on device characteristics
• Proportion-based grids• Percentages — rather than
absolutes• Flexible images• Progressive enhancement• Context
• Quantitative & Qualitative
“Keep it light, please!”
“Geek me up!”(I want to know it
all)
live.adi.dohttp://
Network:adidoPassword:digitalbetter
Fixed Fluid
vs.
• A wrapper with a fixed width
• Percentage or fixed width columns
• Same width seen by all visitors
• A 960-pixel width has become the “standard”. Most website users are assumed to browse in 1024×768-pixels or higher.
• Percentage widths• Adjusts to screen resolution
<link rel=“stylesheet” media=“only screen and (max-device-width: 480px)” ref=“/css/iphone.css” />
source: @wilto (Mat Marquis)
<link rel=“stylesheet” media=“only screen and (max-device-width: 480px)” ref=“/css/iphone.css” />
source: @wilto (Mat Marquis)
source: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
71%
59%
80%
44%
66%Waiting in
line
Commuting
Shopping
Downtime
Watching TV
isruption will only accelerate. The quantity and diversity of
connected devices
— many of which we haven't imagined yet — will explode, as will the
quantity and diversity of the people around the world who use them.
Our existing standards, workflows, and infrastructure won't hold up.
Today's onslaught of devices is already pushing them to the breaking point.
They can't withstand what's ahead. Proprietary solutions will dominate
at first. Innovation necessarily precedes standardisation.
Technologists will scramble to these solutions before realizing (yet again)
that a standardised platform is needed to maintain sanity. The standards
process will be painfully slow. We will struggle with (and eventually
agree upon) appropriate standards.
But there’s hope…
1. Acknowledge and embrace unpredictability
2. Think and behave in a future-friendly way
3. Help others do the same
While we can't know exactly what the future will bring, we can:
The future is ours to make - friendly
source: www.futurefriend.ly
Thank You
Brad Frost – http://bradfrostweb.comFuture Friendly - http://futurefriend.ly
Medium - http://medium.comCompete - http://compete.com
“If I have seen further it is by standing on the shoulders of giants.”
Resources
- Isaac Newton