Mobile Website Design: Responsive, Adaptive or Both?
8 likes•5,076 views
Responsive, adaptive, or both? There is no one-size-fits-all approach. Leveraging the right balance of techniques can tailor a mobile solution to meet audience and business needs. Responsive design uses fluid grids and media queries to automatically adjust content across devices. Adaptive design detects device characteristics to select variations. Separate mobile sites optimize each experience. The best strategy considers purpose, goals, and audiences. Skilled developers can combine techniques effectively.
Mobile Website Design: Responsive, Adaptive or Both?
- 1. Mobile Website Design: Responsive, Adaptive, or Both?
- 2. there is no– one size, fits all strategy „ „ „ Leverage the right balance of technology options to fit the audience’s & website’s specific needs Skilled developers can combine techniques to tailor a mobile solution to fulfill the design requirements and deliver on performance expectations In all cases, the website solution needs to consider the purpose of the website, the goals of the business, and the goals of the target audience.
- 3. research: behavior trends & device differences
- 4. Research SMARTPHONE TRAFFIC AS % OF TOTAL global mobile traffic is rapidly increasing Cisco VNI Global Mobile Forcast, 2/2013 „ „ „ North America leads Europe in mobile traffic, However Japan and Korea are the countries with the most mobile traffic. Business mobile data traffic in 2012: North America's grew 59%. Western Europe's grew 34%. Central & Eastern Europe's grew 48%. Consumer mobile data traffic in 2012: North America's grew 65%. Western Europe's grew 47%. Central & Eastern Europe's grew 74%. TABLET TRAFFIC AS % OF TOTAL Germany 38% now 52% in 2017 1.84% now 22% in 2017 UK 41% now 56% in 2017 1.49% now 21% in 2017 France 40% now 52% in 2017 0.91% now 19% in 2017 Russia 25% now 59% in 2017 0.50% now 16% in 2017 US 48% now 52% in 2017 2.08% now 28% in 2017
- 5. Research PHONE tablets are used more like PCs „ 70% more pages viewed on tablet vs. smartphone The State of Mobile Benchmark, Adobe 2013 „ MINI TABLET 3 times greater conversion rates on tablet vs. smartphone The State of Mobile Benchmark, Adobe 2013 „ Top activities: reading news & entertainment, searching for information, and watch videos 2012 Mobile User Survey, Keynote Systems While tablets have touch screens, the user goals & tasks associated with the tablet ux are more similar to the user goals associated with the desktop ux than the smartphone ux. TABLET
- 6. Research phones are social & search tools „ 46% of smartphone users use their phone to access social media vs. 16% of tablet users. State of Media: The Social Media Report 2012, Nielson and NM incite „ 79% of respondents have their phone on or near them for all but 2 hours of their waking day. Always Connected, Facebook sponsored 2013 IDC Research report „ Top activities: accessing local information, searching for information & participating in social media. 2012 Mobile User Survey, Keynote Systems Provide smartphone users with easy ways to search and sort information, and tools to share and email content. SHARE SEARCH
- 7. Research it’s a multi-device experience „ 54% of digital consumers in the US engage on both computer & device Marketing to the Multi-Platform Majority, comScore 2013 „ 26% of research & decision activity conducted in tablet will drive sales online via desktop computer A Mobile Path to Purchase Retail Report 2013, xAD, Telmetrics, and Nielsen „ the full impact of mobile cannot be measured without tracking conversion activities beyond the mobile device Marketing to the Multi-Platform Majority, comScore 2013 The brand experience & information architecture should be consistent across all devices but relevant to the user’s device.
- 8. Research mobile best practices „ „ „ „ „ remove distractions not content, start with function over form include only vital fields on forms and make fields and buttons larger-easier to tap think about how the device will be held & how that impacts navigation and button placement optimize content for devices (readable text, shorter descriptions & less scrolling for phones than tablet & PCs) users can find more information by drilling down through options. build lightweight mobile sites with fast performance (82% of smart phone users expect a web page to load within five seconds) 2012 Mobile User Survey, Keynote Systems „ „ „ provide security reassurance (explain to users that their data & financial transactions are safe) take advantage of geolocation (mobile location tracking) and one-touch calling (tap phone # to call) simplify checkout process by offering fewer steps, showing progress, offer guest checkout
- 10. Technology technology overview „ „ „ „ review case studies that showcase technology considerations compare technology options (responsive, adaptive, separate sites) compare technology from a user experience stand point highlight considerations for decision-making
- 11. AVAST responsive case studies: Avast & Webroot MOBILE DISPLAY PROBLEMS MUST BE DEBUGGED The Avast site displays the desktop site for mobile for the business section & the cart. Avast & Webroot compare tables have some display issues on mobile. LEVERAGING MOBILE SOCIAL FEATURES CAN BE DONE WITH RESPONSIVE Avast & Webroot don’t leverage social tools (like, share..) on product or content pages LEVERAGING ROBUST SEARCH TOOLS CAN BE DONE WITH RESPONSIVE Avast & Webroot don’t have a search feature on the site. Search is especially useful to mobile users when there is a lot of pages and content to parse. CONTENT PARITY MAY NOT PRODUCE THE BEST UX Avast & Webroot should be optimized for mobile and show only content relevant to the device. (example: mobile sites should only show downloads that are relevant to the mobile device) For both, contact is positioned in the same place and represented the same amount on all devices (contact should be weighted more on mobile- especially for business) For Webroot, promotional banners on the mobile UX push down content significantly For both, very long content should be sectioned so that users can drill into or expand for more content. This helps mobiles scan easier. WEBROOT
- 12. INTEL separate sites case studies: Intel & Target SEPARATE SITES WORKS WELL FOR OPTIMIZING ROBUST SOLUTIONS Intel & Target presents different content specific to desktop and mobile . Mobile solutions are more visible on the mobile device. Content that is not as desirable on mobile is removed or minimized. TAKES ADVANTAGE OF OPTIMIZED FEATURES FOR EACH DEVICE The Intel homepage has an interactive module that is replaced with a vertical simpler version on mobile. This shows the benefit of optimized features. Target’s homepage content is geared towards the device audiences. Mobile products are featured on the mobile experience. Target has a mobile optimized gift finder and a desktop optimized gift finder. Intel compare tables are represented differently & optimized for the best desktop and mobile display. Intel & Target allow users to share at the product level. This is especially useful to mobile users Intel & Target’s search improves all experiences but is especially beneficial on mobile TABLET EXPERIENCE SHOULD BE OPTIMIZED FOR TABLETS There should always be special considerations for tablets (don’t just use the desktop version) so that portrait display and navigational elements are optimized. Intel doesn’t do this. OPTIMIZED NAVIGATION Intel & Target leverage intuitive navigation optimized for mobile considerations. (Intel navigation slides over page content, Target uses an off-canvas navigation) TARGET
- 13. additional case studies BOSTON GLOBE WORLD WILDLIFE FUND NIXON MICROSOFT The Boston Globe is an example on an effective responsive design solution. Allows users to save content for later. Fast performance due to it being image light. The navigation is harder to use on mobile because it doesn’t show the same depth as the desktop version. Handles search well. World Wildlife Fund is a good example of a well executed responsive solution that uses an adaptive navigation module. The navigation is a tailored experience for mobile. Nixon is a good example of a simple responsive ecommerce site that uses an adaptive elements. The off-canvas navigation (adaptive element) on the smartphone design leverages a popular mobile design trend that was first used by Facebook. Grid filtering is handled well across all devices. Search & social media are being handled effectively. Microsoft is a good example of a responsive design with adaptive elements that has effective mobile navigation. Microsoft uses a mobile first responsive only model for navigation. It handles deep navigation gracefully on mobile but it only surfaces deeper navigation on click on the desktop experience.
- 14. Technology definitions Responsive Design creates a layout that scales to the browser by using fluid, proportion-based grids, flexible images, and CSS3 media queries. The same media is delivered to all devices and adjusted at the time of display, which may impact performance on more limited devices. For Example, column and text size adjusts and reflows based on page width. (Example site: http://thenextweb.com) Adaptive Design detects the characteristics of a device to select among several available variations of site elements. Adaptive design may be implemented with either server-side or client-side (JavaScript) logic and can optimize the set of delivered media for the device. For Example, a collapsed, self-contained navigation replaces page navigation for smartphones. (Example site: http://www.screamingfrog.co.uk) A Separate Sites approach involves creating different sites for mobile and desktop web users optimized for each device. Mobile-First Design is a mobile friendly technique to creating a website whereby you start with the smartphone first and then optimize it for tablets and desktops, rather than trying to degrade a complex, image-heavy desktop site to work on mobile phones. Mobile-First Design is a best practice for responsive design.
- 15. technology comparison Technology SEPARATE SITES ADAPTIVE DESIGN RESPONSIVE DESIGN enabling technology Server-side redirect CSS/JavaScript/Server CSS3 resources needed HTML/JS developers HTML/JS/ Server developers HTML5/JS developers LOW LOW - MEDIUM HIGH no constraints few constraints content/feature parity unless adding adaptive elements HIGH LOW - MEDIUM LOW manage multiple sites may be same effort as responsive one set of content to manage HIGH* MEDIUM - HIGH* LOW - MEDIUM* building multiple sites building alternate components content parity but testing may increase cost FEWEST SOME SIGNIFICANT depends on enabling technology one set of code/assets delivered to all devices ux design constraint maintenance cost implementation cost performance concerns optional knowledge of css framework (ie. Bootstrap) * There are various scenarios where each could be more effort than another option
- 16. ux comparison Technology ADAPTIVE DESIGN RESPONSIVE DESIGN 100% control more control than responsive less control tightly coupled code to design causes problems customizable - content & features can be unique across devices customizable - content & features can be unique across devices content & features remain the same on all devices LEAST LESS MOST design separate sites for each device designs for each major device type design all layouts for breakpoints set flexible design strategy navigation is optimized for each site navigation is optimized for each site should design mobile-first, may be navigation usability issues degrading from desktop to mobile SEPARATE SITES pixel perfect design content parity design layout instances navigation
- 17. Technology responsive „ „ „ separate sites Responsive design should be less costly to maintain but your CMS may have role in weighing the difference Responsive design requires the same content and features are used on all experiences (or a smaller set) unless adaptive is added SEO should be ideal for responsive, but there may be work arounds with the other solutions „ „ VS „ „ May be quicker route for design & approval process Content & design can be entirely different across separate sites Most CMS can accomodate serving single set of content to seperate sites May be able to leverage an existing solution from a development standpoint Technology recommendation requires understanding the full set of technology constraints and the desired solution Timeframe for each option is dependent on the resources available and capabilities of the CMS
- 18. Technology responsive & adaptive design overlap „ The terms "responsive" and "adaptive" tend to be used inconsistently in the industry, sometimes even interchangeably. Our working definitions are captured in these articles: http://www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/ http://www.rasmussen.edu/degrees/design/blog/web-design-101-adaptive-vs-responsive-design/ „ Most websites designed to serve multiple devices use some mix of responsive and adaptive techniques. This is not an either-or decision. For example, RESS (Responsive Design with Server-Side Components) is essentially a blend of responsive and adaptive strategies. For an example, see http://www.nd.edu
- 19. Technology mobile technology considerations „ „ „ „ „ „ „ „ some features (i.e. navigation, comparison tables) can be adaptive modules within a responsive design if you would like to customize or optimize some portions of the ux across devices responsive design techniques can still be used in combination with adaptive design responsive design should adopt a mobile-first approach to avoid changes to existing solution, use adaptive or separate sites performance will be a consideration for any mobile solution the technology decision should be informed by UX solution and dev team capabilities if content parity is desired, responsive is a good choice. if you have concerns about your CMS and want a high degree of separation between UX/visual design/ UI development, then separate sites are a good choice.