Slides Addi Regev recently used in his discussion w/ mentees of The Product Mentor. The Product Mentor is a program designed to pair Product Mentors and Mentees from around the World, across all industries, from start-up to enterprise, guided by the fundamental goals…Better Decisions. Better Products. Better Product People. Throughout the program, each mentor leads a conversation in an area of their expertise that is live streamed and available to both mentee and the broader product community. http://TheProductMentor.com

1. Addi Regev
Director of Product
The Product Mentor
Session 3
Oct 14, 2015

7.  Goals for acquiring and
retaining customers
 Digital Product?
 Budget
 Where are your
customers?
 Go-to-market strategy

8.  What do your customers use to become aware of products?
 How do they become customers?
 How do they interact with your product?
 Platform
 OS
 Device types
 Multiscreen behavior
 Which activity
 main devices/common screen sizes
 When and how often
 Best touch points- most activity

9.  Repetitive tasks
 Loyal customers
 Increase interaction
 Using unique mobile
capabilities
 Discovery
 Casual user
 Multiple devices
maintaining feature parity
 Infrequent activities

10. Users really do not care what method you choose,
as long as they can
effectively navigate
and interact with your
website on any device
they use

11. No matter how much you resize the
screen, that same layout will
automatically respond to that size,
like a single ball growing or shrinking
to fit through several different hoops.
 Fluidly change and respond to fit any screen or device size
 The optimal viewing experience of a website, no matter what
type of device the user is seeing it on
 Done by using fluid grids, and fluid elements

12. Instead of a single ball going
through several different-sized
hoops, you’d have several
different balls to use depending
on the hoop size.
Changes to fit a predetermined set of screens and device sizes
Uses static layouts with specific breakpoints in screen widths
 Specific layouts are made in advance and specifically for the
device dimensions

13. Responsive
 Requires more code
 One code fits all
 Harder to design and build
 Guaranteed to work well on
all devices, including new
 Loads faster- only 1 layout
 A bigger investment upfront
 Good investment for the
future
Adaptive
 Streamlined code
 6 HTML/CSS combinations
 Need to design each layout
separately
 Less flexible in displaying on
wide variety of screen sizes
 Slower to load all layouts
 Cheaper and faster to make
 Good for retrofitting existing
sites to support mobile

14. Abberdein, http://abberdein.com/ utilizes RWD in its WordPress
Whiteboard framework, using fluid grids.

15. Screaming Frog http://www.screamingfrog.co.uk/ utilizes AWD,
set breakpoints at set pixel widths depending on the device
recognized in the browser window.

16. What responsive gives us is a way to maintain content and
functionality parity between different devices. The differences
are in the interaction patterns.
 Navigation patterns
 The fold
 Tables and grids
 Graphs and charts
 Progress steps
 Lightboxes
 Custom elements
 Complex visual designs
 Webforms and microinteractions

18. @addiregev
www.linkedin.com/addiregev

19. • http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The-2015-US-Mobile-App-
Report?
• http://marketingland.com/apps-eat-digital-media-time-with-top-3-capturing-80-percent-143555
• http://marketingland.com/morgan-stanley-no-apps-arent-winning-the-mobile-browser-is-144303
• http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-
web-design/
• https://css-tricks.com/css-font-size/
• http://www.mediumwell.com/responsive-adaptive-mobile/
• http://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/
• http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-
web-design/
• http://mag.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/
• http://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/
• http://thenextweb.com/dd/2015/09/01/is-adaptive-better-than-responsive-design/
• http://www.webdesignerdepot.com/2014/05/responsive-vs-adaptive-webdesign-which-is-best-for-you/
• https://developer.mozilla.org/en-
US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
• http://insights.mobify.com/m-dot-vs-responsive-vs-adaptive-whats-the-right-solution-for-your-company/
• http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1
• http://www.epagecity.com/blog/responsive-adaptive-mobile-websites
• Smashing Book 5- Real Life Responsive Web Design. Chapter 2: Responsive Design Patterns and
Components. Vitaly Friedman