Published on March 7, 2014
Mobile Website Design: Responsive, Adaptive, or Both?
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.
research: behavior trends & device differences
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
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
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
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.
Research mobile best practices remove distractions not content, start with function over form include only vital ﬁelds on forms and make ﬁelds 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 ﬁnd 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 ﬁve 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
technology: options & limitations
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
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 signiﬁcantly 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
INTEL separate sites case studies: Intel & Target SEPARATE SITES WORKS WELL FOR OPTIMIZING ROBUST SOLUTIONS Intel & Target presents different content speciﬁc 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 beneﬁt 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 ﬁnder and a desktop optimized gift ﬁnder. 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 beneﬁcial 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
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 ﬁrst used by Facebook. Grid ﬁltering 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 ﬁrst responsive only model for navigation. It handles deep navigation gracefully on mobile but it only surfaces deeper navigation on click on the desktop experience.
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 ﬂexible design strategy navigation is optimized for each site navigation is optimized for each site should design mobile-ﬁrst, may be navigation usability issues degrading from desktop to mobile SEPARATE SITES pixel perfect design content parity design layout instances navigation
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
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
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-ﬁrst 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.
Responsive Website Design; Responsive or Adaptive ... for mobile: use responsive or adaptive web design? ... design. Both adaptive and responsive ...
Different approaches to implementing mobile websites ... of both their mobile design ... Adaptive design is a version of responsive ...
Responsive vs. Adaptive Design: ... to both build and maintain. Responsive layouts are also ... thought that around 1/8 websites now use responsive ...
... is meant by responsive vs. adaptive web design. ... rendering websites on mobile ... that they both allow websites to be viewed in mobile ...
Responsive vs adaptive ... While you have a very simple guide to follow with adaptive design, responsive ... Browser testing responsive and adaptive websites.
Both responsive and adaptive web design are ... designs, if you visit a website with a mobile ... difference between adaptive and responsive web ...
Responsive Web Design; Mobile Website; ... there is no reason why a business can’t have both a mobile website ... Stand alone mobile adaptive designs ...
They are both, after all, methods ... make an existing website work passably well on mobile devices ... dive deeper into the realm of responsive design ...
Abgrenzung zur mobilen Webseite ... einer mobilen Webseite und einem responsiven Design besteht ... einer Website in Adaptive, Liquid, Responsive und ...