A review of mobile design trends, including a comparison of the Responsive and Adaptive design approaches.

1. Multiple Strategies
For Multiple Screens
Janine Warner
Web: DigitalFamily.com Twitter: @janinewarner

2. People use mobile devices
for 3 reasons

3. To save time

4. To connect
with others

5. To Kill Time

6. Designing for
the Mobile Web

9. San Francisco Chronicle in 1996 used a very simple design
(as you can see in the Internet Archive http://www.archive.org/)

10. Today, web sites are much more complicated, but not always better designed

11. Should web pages still be designed
to fit above the fold?

12. Where is ‘the fold’ today?

13. When ING redesigned their website, they made it more modular

14. Modular Design
The best web designs
today are long pages,
divided into sections

15. Critical content is ‘above the fold’

16. Content is divided into sections

17. Tap on any section on the Apple website
and it enlarges to fill the iPhone screen

18. Just because you can open a site on an
iPhone, does mean it’s ‘mobile friendly’

19. The Harvard and Stanford University websites
represent two good approaches to mobile navigation

20. Massachusetts Institute of Technology comparison
Native App on iPhone Mobile Web App on iPhone

21. Massachusetts Institute of Technology comparison continued
Native App on iPhone Mobile Web App on iPhone

22. Fat Finger-Proof

23. The best mobile designs:
• Are simple
• Use large font sizes
• Modular structure
• Big, touchable, buttons

24. Designing for Multiple Screens
Adaptive & Responsive Design

25. WML
In the early days of mobile
design, the Wireless Markup
Language was required.
WML is no longer used
for most mobile sites.

26. Markup Language : A History Lesson
• WML
Wireless Markup Language
• HTML MP
HTML mobile profile
• HTML5 & CSS3
Version 5 of the
HyperText Markup Language
& Cascading Style Sheets

27. Today’s most popular
choice for mobile
web design.
Superhero HTML 5
and
Sidekick: CSS3
Cascading Style Sheets

28. Design for Portrait and Landscape views

29. Today the challenge is to design for large screens and small screens

31. Soon we’ll have to design for devices
that support augmented reality

32. And Corning Glass can turn any glass surface into a monitor

33. Responsive Designs
Adjust the design to
best fit the browser
window size
Using CSS Media
Queries to target
Screen size

34. Responsive Design
1 HTML page + 3 (or more) Sets of CSS

36. With Responsive
Design, the
challenge is to
develop a modular
structure that
enables you to
rearrange the
elements to best fit
each screen size.

37. Adaptive Design
Requires a script
on the web server
& a device database
Enables different
designs optimized
for each device

38. Adaptive Design
The only way to
reach the broadest
mobile audience
Because CSS does
not work on
feature phones

39. Most mobile web
surfing is done on
smart phones
& tablets
Because it is so hard
to surf on handsets
with such limited
input options

40. Responsive Design
You rearrange the
design elements based
on screensize
Works best with a
simple design

41. But even big, complicated sites are
using Responsive Design now
The Boston Globe
one of the first
Newspapers to use
Responsive Design
They use RESS =
Responsive + Server Side

42. Responsive Design
• Simpler to design, but limited to smart phones
and tables devices
• One HTML document
• Multiple sets of style rules
• Media Queries make it possible to apply CSS
based on screen size
• Most designers target at least 3 to 6 screen
sizes: small, medium, large
• Best designs work on tiny cell phone screens
as well as giant monitors

43. Adaptive Design
• More complex, but reaches the broad
audience
• Device detection based on “user agents”
• Requires a device database
• Ability to generate multiple page designs
based on device capabilities
• Most developers target 5 to 15 device profiles
• Best option if you need to reach low end
devices because Media Queries don’t work on
feature phones…

44. Content is “Princely”
Goal: The most
valuable content to
each audience
with the best design
for each device

45. Janine Warner
janine@DigitalFamily.com