Guidelines for Responsive UX Design workshop as presented by Robert Stribley at SVA, March 23rd 2019, Manhattan, NY

1. Guidelines for Responsive UX Design
School of Visual Arts, 23 March, 2019 Robert Stribley

2. Today’s presentation will be available on SlideShare:
www.slideshare.net/stribs

3. Robert Stribley
@stribs
Introduction
My clients have included:
• Bank of America, PNC, Wachovia, Citibank, JPMorgan, Morgan Stanley, Oppenheimer
Funds, Prudential, Smith Barney, T. Rowe Price
• Boston Scientific, Nasonex
• AMResorts, Choice Hotels, RCI, Sotheby’s International Realty
• Computer Associates, EMC
• Ford, Lincoln, Mercedes-Benz, MBFS, Mercedes-Benz Vans, smart
• FreshDirect
• AT&T, Nextel
• Day One, Red Cross, Smithsonian National Air & Space Museum
• Pearson, Travel Channel, Women’s Wear Daily

5. About You
• What’s your name?
• What do you do for work?
• What do you do for fun?
• If you could see one museum exhibit—real or
imaginary—what would it be?
Introduction

6. Goals of this workshop
• Learn principles and guidelines for responsive
design
• Learn about user journeys and create a detailed
user journey as a team
• Develop a site map as a team
• Brainstorm and design a responsive home page as
a team
• Brainstorm and design a website and mobile app
experience as a team
Introduction

7. Agenda

8. Morning
• Responsive Design Principles
• Project
• User Journeys
• Lunch
Agenda

9. Afternoon
• Site Maps
• Team Exercise: Responsive Home Page
• Team Exercise: Mobile App
• Review & Feedback
• Q&A
Agenda

10. 52.64%percentage of web traffic via mobile globally in 3rd quarter
of 2018
up from 35.1% in 2015
now half of all global pages served
65.7% of all traffic in Asia in 2017
59.5% in Africa

11. Responsive Design

12. Responsive web design is an
approach to web design which
makes web pages render well
on a variety of devices and
window or screen sizes. —
Wikipedia
Responsive Design

14. “Rather than tailoring disconnected designs to each
of an ever-increasing number of web devices, we can
treat them as facets of the same experience. We can
design for an optimal viewing experience, but embed
standards-based technologies into our designs to
make them not only more flexible, but more adaptive
to the media that renders them. In short, we need to
practice responsive web design.”
– Ethan Marcotte, Responsive Web Design, A List Apart
Self Study
Responsive Web Design by Ethan Marcotte
Responsive Design

15. Responsive Design
Responsive Versus Adaptive Design
Responsive design is fluid and adapts to the size of
the screen no matter what the target device
Adaptive design uses static (or fixed) layouts based
on breakpoints which don’t respond once they’re
initially loaded
Self Study
Responsive vs. Adaptive Design: What’s the Best Choice for Designers? - Jerry Cao, Studio by UXPin

16. Responsive Design

17. Responsive Design
Responsive Web Design
by Ethan Marcotte

18. Responsive Design
The Responsive Web Design Podcast is co-
hosted by Karen McGrane and Ethan
Marcotte.
In each episode, they interview the people
who make responsive redesigns happen.

19. Responsive Design Characteristics
• Mobile first
• Break points
• Grids
• Handling navigation
• Handling tables
• Maintain content and features
• Maintain hierarchies
• Images
• Text
Responsive Design

20. Mobile First

21. Mobile First
• Design for “mobile first”—the smallest device first, then work
up from there
• The smallest device may no longer be a mobile phone
• “Mobile first” may encourage simple design, but it need not
be simplistic
Responsive Design

22. Responsive Design

23. Responsive Design

24. Break Points

25. Break Points
• Responsive designs adjust at different “break points”
corresponding to the dimensions of various devices, typically
desktop, tablet and mobile
• However, they’re intended to be content, not device-specific
• Typically at least two:
– e.g. 320px for mobile, 768px for tablet (portrait), desktop
– e.g. 320px for mobile, 768px for tablet (portrait), 1280px for desktop
• May also add “minor breakpoints” to address specific issues at
various dimensions
Responsive Design

26. Responsive Design

27. Responsive Design
Responsive design distributing the same modules across desktop, tablet and mobile
Desktop Tablet Mobile

28. Responsive Design

29. Grids

30. Grids
• Grids are fluid within a responsive design—they
change according to screen dimensions
• For example, a desktop design might utilize a 12-
column grid, tablet a 9-column grid, and mobile a
4-column grid
• Depending on the screen, modules may shift both
in size and in placement
Responsive Design

31. Responsive Design

32. Navigation

33. Handling Navigation
• Navigation may be repositioned
• Often repositioned at tablet, but especially on mobile
• On desktop, navigation elements may be activated via
hover instead of click, since users are utilizing a cursor; but
in tablet and mobile, these main nav elements must be
activated via touch
• Design navigation to be touch friendly—e.g. large, tactile
targets
• Detailed dropdowns and filters could be presented in an
overlay in mobile
Responsive Design

34. Responsive Design

35. Responsive Design

36. Responsive Design
Heavy mobile direction
• Beware the “hamburger menu”

37. Handling Navigation – Tabs
• Tabs may just reduced in size
• They can also be replaced with
– Accordions
– Dropdowns
– Carousel slides
• Consider the content to determine, which of these
solutions works best
Responsive Design

38. Responsive Design

39. Responsive Design

40. Tables

41. Handling Tables
• Simplest solution for handling tables with multiples columns
is to reduce the number of columns (to one if necessary) and
stack them in mobile.
• You can also allow horizontal scrolling
• Or turn columns into individual slides users can swipe
through
Responsive Design

42. Responsive Design
Desktop
Mobile - Scrolling
Mobile -
Stacked

43. Responsive Design

44. Responsive Design

45. Responsive Design
Not ideal for mobile

46. Content & Features

47. Maintain Content & Features
• Goal: Wherever possible, maintain content and features
across devices
• Occasionally, content or features can be dropped to
save screen real estate or if they’re not device
appropriate
• Establish a clear rationale and principles for dropping
any content or features at the mobile level
• Reducing content can reduce keywords, which can
reduce your site’s ranking on Google
Responsive Design

48. Responsive Design

50. Hierarchies

51. Maintain Hierarchies
• Modules may be repositioned but hierarchies should be
maintained
• Cluster related content and features
Responsive Design

52. Responsive Design

53. Responsive Design

54. Images

55. Images
• Generally, images should be “fluid”
• They will scale down in size as the screen resolution
changes
• They may maintain their size, but be cropped if they’re
primarily decorative
• In this case, images must be selected carefully so
important elements aren’t automatically cropped out
• In some cases, if the image isn’t needed, it may be
dropped entirely for mobile
Responsive Design

56. Responsive Design

57. Responsive Design

58. Pay special attention to images with text within them or in overlays

59. Text

60. Text
• Maintain text size where possible, though headings and
headlines may be reduced in size
• Text blocks will change in width from desktop to mobile
• However, keep lines of text to a maximum of 70 or 80
characters
• Do not automatically hyphenate text
• Use ellipsis or a “read more” CTA to shorten text if necessary
• Provide character limits for titles, captions, etc, so they
display gracefully in mobile
Responsive Design

61. Responsive Design

62. Responsive Design
Avoid just shrinking content

63. Our Project

64. Develop a museum experience for MoMA which
utilizes both a responsive desktop design and a
mobile app experience, so users can engage
with it both at home on their desktop computer to
prepare for their trip and during their visit via
mobile app.
Our Project

65. Guidelines
• Since the responsive website will display on a mobile
phone, the app must not simply repeat the website
content
• Give thought to how the app can help visitors during
their onsite visit, but provide some value to users
before and after their trip, too
• Assume visitors have access to Wi-Fi throughout the
entire museum space
Our Project

66. Personas
Our Project
Plan an engaging and
educational trip for her
art class.

67. Competitive Review

72. Key Findings
• Ability to highlight multiple exhibits
• Access to collections
• Display of upcoming events
• Focus on membership
• Visitor information
• Education and learning information
• Ability to view different locations
• Any key differentiators?
• Anything else?
Competitive Review

73. Lunch Break

74. User Journeys

75. User Journeys
“Design is all about
entrances and
exits.”
—Rem Koolhaas

76. User Journeys
Definition:
“A user journey, or journey map, visualizes a path or flow
through a Web site, application, or service experience—
from a starting point to an end objective—based on the
user’s motivations and experiences. Journey mapping
helps us to create a mental model of an experience that
the user goes through to achieve a goal. This valuable
information lets us document and visualize existing paths
that the user takes and, in turn, analyze and improve
upon them.”
- Shean Malik, Mapping User Journeys Using Visual Languages

77. User Journeys
Methodology:
• Keep personas in mind
• Determine users’ primary needs
• Consider their pain points as well
• Brainstorm different ways to help their needs and address their pain
points
• Develop the journey according to a time-based progression
• Consider the various moments within, which can be handled digitally
• Create relevant hooks and calls to action (CTAs)
• Strike a balance between freedom of movement and an ideal path
Self Study
“An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows

78. User Journeys

82. Class Exercise:
Develop a user journey, which incorporate features
applicable to Andy’s persona
• Divide into teams
• Discuss what you expect a typical user to do
– At home
– At the museum
– With a specific exhibit
– Back home
• Develop a high-level diagram, which depicts
Andy’s journey
– What are the touchpoints? What technology does he
interact with?
User Journeys
20mi
ns

83. Features Identified
Let’s discuss some of the features your team
identified.
User Journeys

84. Afternoon
• Site Maps
• Team Exercise: Responsive Home Page
• Team Exercise: Mobile App
• Review & Feedback
• Q&A
Agenda

85. Site Maps

86. Site Map

87. Site Map

88. Class Exercise:
Develop 2 high-level site maps based on features
you discovered in your user journey, plus any
additional content needed to flesh out the
experience.
• One for the MoMA web site
• One for the MoMA mobile app
Site Map
20min
s

89. Review Site Maps
Let’s review your site maps
Site Map

90. Team Exercise:
Design a Responsive
Home Page

91. Design a Responsive Home Page
In your teams, design a responsive home page for MoMA’s
web site
1) Discuss features needed for a homepage
2) Sketch your ideas for a homepage individually
3) Share your sketches with your team mates
4) Collaborate on a single home page wireframe –
for both mobile and desktop
Team Exercise

92. 1) Discuss features needed for a homepage
Team Exercise
20min
s

93. 2) Sketch your ideas for a homepage
individually – Both desktop and mobile
versions
Team Exercise
10min
s

94. 3) Share your sketches with your team
mates
Team Exercise
10min
s

95. 4) Collaborate on a single home page
wireframe – for both mobile and desktop
Team Exercise
20min
s

96. Break

97. Team Exercise:
Design a Mobile App

98. Design a Mobile App
In your teams, design a mobile app for MoMA
1) Discuss features needed for the app and
determine 3 key screens you want to develop
2) Collaborate to design your key screens
3) Review your work as a team to determine what
changes should be made
4) Make any necessary revisions
Team Exercise

99. 1) Discuss features needed for the app and
determine the 3 key screens you want to develop
No sketching yet
Team Exercise
10min
s

100. 2) Collaborate to design your 3 key screens
Team Exercise
20min
s

101. 3) Review your work as a team to determine what
changes should be made
4) Make any necessary revisions
Team Exercise
20min
s

102. Gather Your Materials
If you’re finished, start collecting your app and
responsive homepage wires so you can present them to
the class as a team
Team Exercise

103. Team Exercise:
Review & Feedback

104. Bonus Round

106. Q&A

107. Books:
• Information Architecture for the World
Wide Web – Louis Rosenfeld, Peter
Morville
• Information Architecture: Blueprints for
the Web – Christina Wodtke, Austin
Govella
• The Elements of User Experience –
Jesse James Garrett
• Designing Web Navigation: Optimizing
the User Experience – James Kalbach,
Aaron Gustafson
• Design of Everyday Things – Donald
Norman
• Responsive Web Design – Ethan
Marcotte
Video:
• The Right Way to Wireframe by Russ
Unger
Further Studies:
• School of Visual Arts
• Continuing Ed classes
• MFA in Interaction Design
• Pratt – Course in Information
Design
• Rosenfeld Media
• General Assembly
• Skillshare
• The Information Architecture
Institute
• The IA Summit
• Nielsen Norman Group
• User Interface Engineering
Additional Resources
Local Events:
• Brooklyn UX Meetup
• Content Strategy Meetup
Web Sites:
• Alertbox
• A List Apart
• Boxes & Arrows
• wireframes.tumblr.com

108. My article on how to find a UX job:
UX: Your Guerilla Guide to Breaking In

109. My next class

110. Slideshare address:
http://www.slideshare.net/stribs
@stribs
stribley@outlook.com

111. thank you