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-BenzVans, smart
⢠FreshDirect
⢠AT&T, Nextel
⢠Day One, Red Cross, Smithsonian National Air & Space Museum
⢠Pearson,Travel Channel,Womenâs Wear Daily
4.
5. AboutYou
⢠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
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
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
13.
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
ResponsiveVersus 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
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
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
25. Break Points
⢠Responsive designs adjust at different âbreak pointsâ for various resolutions
⢠These correspond 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
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
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
36. 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
40. HandlingTables
⢠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
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
51. Maintain Hierarchies
⢠Modules may be repositioned but hierarchies should be
maintained
⢠Cluster related content and features
Responsive Design
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
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
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
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
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 UsingVisual 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
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
30mins
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
20mins
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
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
10mins
101. 3) Review your work as a team to determine what
changes should be made
4) Make any necessary revisions
Team Exercise
20mins
102. GatherYour 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