web design in the multiscreen era

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...

CONTACT ME

addiregev@gmail.com

@addiregev

www.linkedin.com/addiregev

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