web design in the multiscreen era
TRANSCRIPT
WEB DESIGN IN THE MULTISCREEN ERA
Addi RegevDirector of Product
The Product MentorSession 3Oct 14, 2015
MOBILE DEVICES CAN’T BE IGNORED ANYMORE
How do you choose between Native, Responsive and Adaptive to cover all screens?
MOST DIGITAL MEDIA TIME IS SPENT ON APPS
IT’S NOT EASY TO ACQUIRE AND RETAIN THE LOYAL APPS AUDIENCE
THE AUDIENCE OF MOBILE WEB IS A MILE WIDE AND AN INCH DEEP
NOTE: MOBILE WEB USAGE IS GROWING FASTER WITH LARGER AUDIENCES
Goals for acquiring and retaining customers
Digital Product?
Budget
Where are your customers?
Go-to-market strategy
UNDERSTAND YOUR COMPANY’S NEEDS, GOALS AND BUDGET
LOOK AT YOUR DATA TO IDENTIFY BEHAVIORAL PATTERNS
What do your customers use to become aware of products? How do they become customers? How do they interact with your product?
Your customer journey
Platform OS Device types Multiscreen behavior
Use web analytics to identify patterns Which activity main devices/common screen sizes When and how often Best touch points- most activity
NOW – DECIDE BETWEEN NATIVE AND WEB
Repetitive tasks Loyal customers Increase interaction Using unique mobile
capabilities
Discovery Casual user Multiple devices
maintaining feature parity Infrequent activities
... IF YOU DECIDED WEB IS THE ANSWER - CONSIDER WHICH METHOD TO USE
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
RESPONSIVE WEB DESIGN – SINGLE LAYOUT THAT’S ALWAYS CHANGING
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
ADAPTIVE WEB DESIGN – SET LAYOUTS THAT FIT A FEW SCREEN SIZES
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
WHICH TO CHOOSE- RWD VS. AWD
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
EXAMPLE FOR RWD
Abberdein, http://abberdein.com/ utilizes RWD in its WordPress Whiteboard framework, using fluid grids.
EXAMPLE FOR AWDScreaming Frog http://www.screamingfrog.co.uk/ utilizes AWD, set breakpoints at set pixel widths depending on the device recognized in the browser window.
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
RESPONSIVE DESIGN IS MANAGEABLE, BUT ISN’T STRAIGHTFORWARD
What’s important is the user journey – Your solution could be a hybrid!
KEEP IN MIND...
RESOURCES
• 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