This document discusses the need for websites and applications to be designed in a "future-friendly" way to accommodate unpredictable technological changes and new devices. It notes that the distinction between mobile and desktop is blurring as screens and usages vary widely. Responsive design is presented as an approach that can build sites optimized for all screen sizes through fluid layouts and flexible images. The document emphasizes making content worthwhile and relevant for users across contexts and devices.

1. The Theatre of the
Future-Friendly Website
Chris Cherrett
Senior UX Developer
Adido
@chrischerrett
#letsdodigital

2. “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

3. This is not the web.

4. This is not the web.

5. This is the web.
source: http://bradfrostweb.com/wp-content/uploads/2012/11/devices.jpg

6. This will be the web.
(we’re already seeing this…)
source: Brad Frost – “For a Future-Friendly Web“

7. Apple’s iWatch (?)

8. source: http://www.wallibs.com/newimg/

9. There is no such thing as future-proof

10. But we can be future-friendly

11. “The things that we create today will exist
beyond what we originally intended them for”
- Brad Frost, 2011
source: http://vimeo.com/29961436

13. You have to reach your target user, wherever they are,
whatever device they use.

14. Today's smartphones are sculpting the landscape of the web
• 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

15. source: Brad Frost – “For a Future-Friendly Web“

16. source: Brad Frost – “For a Future-Friendly Web“

17. source: Brad Frost – “For a Future-Friendly Web“

18. source: Brad Frost – “For a Future-Friendly Web“

19. source: Brad Frost – “For a Future-Friendly Web“

20. Give people want they want.

21. Make stuff that is worthwhile.

22. People’s capacity for non-relevant
content is rapidly diminishing.
source: Brad Frost – “For a Future-Friendly Web“

25. non-relevant
non-relevant
non-relevant
non-relevant
nonrelevant
non-relevant
nonrelevant
non-relevant
non-relevant
non-relevant
non-relevant

26. 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 mobile
optimised sites and native apps.
In fact, it is already the trend and the right path to follow.

27. “Design is how it works”
- Steve Jobs

28. Large-screen and Small-screen user
interactions are polar opposites
(or are they?)
Factors such as Click versus Touch, Screen-size,
Pixel-resolution, optimized markup and many
more have become crucial.

29. Today

30. Craft an optimal experience — easy reading and
navigation with a minimum of resizing, panning, and
scrolling — across a wide range of devices from
mobile 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

31. “Keep it light,
please!”
“Geek me up!”
(I want to know it all)

32. http://
live.adi.do
Network: adido
Password: digitalbetter

33. 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

34. <link rel=“stylesheet” media=“only screen and (maxdevice-width: 480px)” ref=“/css/iphone.css” />
source: @wilto (Mat Marquis)

35. <link rel=“stylesheet” media=“only screen and (maxdevice-width: 480px)” ref=“/css/iphone.css” />
source: @wilto (Mat Marquis)

36. 59%
44%
Watching TV
Commuting
80%
Downtime
66%
Shopping
71%
Waiting in line
source: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

37. 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.

38. 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…

39. While we can't know exactly what the future will bring, we can:
1. Acknowledge and embrace unpredictability
2. Think and behave in a future-friendly way
3. Help others do the same
The future is ours to make - friendly

40. source: www.futurefriend.ly

41. Thank You

42. Resources
Brad Frost – http://bradfrostweb.com
Future Friendly - http://futurefriend.ly
Medium - http://medium.com
Compete - http://compete.com
“If I have seen further it is by standing on the shoulders of giants.”
- Isaac Newton