Be responsive Design ! <br />Enjoy this great white paper.
Tech Chops | Business Cred Responsive Design Guide A Human Response to Modern Technology By Matt Crist, Alec Francesconi, Andrew Paradise, George White Tech Chops | Business Cred Contents at a Glance Responsively designed pages display content optimized to the aspect ratio of the browser window. Narrow windows might dis- play a single column, suitable for a smartphone; wider windows would display full-sized images and multiple columns, providing the rich experience one expects on a desktop browser. Overview: ........................................................................Page 3 Defining Responsive Design......................................... Page 4 The Benefits of Responsive Design.............................. Page 4 An Approach to Implementing Responsive Design.........................................................Page 5 The Challenge of Managing Mobile Expectations Based on the Desktop Experience............................... Page 5 Incorporating Legacy Design, Apps and Assets into the Mobile Experience............................... Page 5 The Process of Delivering a Responsive Design.........Page 6 The Requirements Phase is Expanded to Include Mobile Parameters...................................... Page 6 Key Considerations...................................................... Page 7 A User-Centric Focus Will Meet Customer Needs....... Page 7 The Logistics of the Responsive Design Process The Highlighted Takeaways.........................................Page 10 Benefit: Better Managed Mobile Presence................. Page 10 Impact: A shift in Approach to the Development Process................................................ Page 11 Benefit: Better User Experience................................. Page 11 References....................................................................Page 11 About Cantina.........................................................................12 2 15 Cypress St., #200, Newton Center, MA email@example.com?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred Responsive The recent increase in Design Guide smartphone and tablet penetration raises the importance Overview Responsive design is a human response to modern technology. of responsive The term ?responsive? in this sense was first used in the fusion design of art and architecture, referring to spaces that are influenced by its occupants and the ways they interact with it. An unused room might shrink to accommodate the overflowing room next door. Similarly, a responsively designed website adapts itself to the needs of the reader. The tools which enable responsive design have been in motion for the last decade. In April of 2001, the first W3C proposal for media queries was published. Cameron Adams built a proof of concept for responsive design in 2004 simply to improve the readability of websites in standard browsers. Browsers began supporting media queries in 2009 and are now installed on all modern smart- phones and tablets. The recent increase in smartphone and tablet penetration raises the importance of responsive design. It is estimated that 40% of all mobile devices in the US are now smartphones and the global audience is even larger. It is increasingly likely that a customer will consume a website via a screen other than the desktop the site was built and tested on, and there is a good chance that their experience will be comprised if the site was not designed with a responsive approach in mind. 3 15 Cypress St., #200, Newton Center, MA firstname.lastname@example.org?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred Defining Responsive Design Simply stated, responsively designed pages display content optimized to the aspect ratio of the browser window. Narrow windows might display a single column, suitable for a smart- phone; wider windows would display full-sized images and multiple columns, providing the rich experience one expects on a desktop browser. A responsively designed website will read well on many devices. By embracing the web as a medium distinct from print a single responsive website unifies good and engineer- ing and good graphic design. This approach has become increasingly important in the current technical climate, with users accessing web properties on desktops, smartphones, tablets in a variety of orientations, and increasingly on TV displays. The Benefits of Responsive Design What are the benefits to a responsive approach to building web interfaces? Why should an organization go through the extra effort? The main benefit is that a responsively designed site will provide the best, most consistent experience of a web property for its user base. Anyone who has tried to use an unoptimized desktop-formatted site on an iPhone or An- droid phone has experienced the frustration of scrolling and zooming to find what they need. With the ever-increasing number of devices and platforms and the attendant number of potential site-viewing combinations, building responsive standards-based sites has become critical to maintaining flexibility and user experience. Another important benefit is that a responsive approach relieves the enterprise of the need to create multiple mobile versions of their web site, saving development time and bud- get for more important activities. In some cases a respon- sively designed site can even alleviate the need to create and deploy a native application. 4 15 Cypress St., #200, Newton Center, MA email@example.com?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred An Approach to Implementing Responsive Design The benefits of responsive design seem clear, a better user expe- rience and more efficient use of development resources. Imple- menting responsive design also require some changes to the traditional approach to site/app development. Ideally the responsive design process starts from the small screen and works out to the big screen, and in some ?green field? proj- ects one may have the luxury or working this way. In practice, though, this approach is not practical. The Challenge of Managing Mobile Expectations Based on the Desktop Experience A significant challenge is often posed by the expectations and thought habits of stakeholders who are used to thinking of the web through the lens of their desktop experience. They may not be comfortable providing feedback on the mobile view Zoom as their first experience with a new design. As consultants, our clients? input into the user experi- & ence and design is critical to the success of the ven- ture, so it is important that they feel comfortable with the process. Therefore leading with the desktop design Scroll Scr is usually more effective than putting the mobile experi- ence first. However better results can be achieved by creating a mobile layout in parallel to the desktop layout and present them together. Designing the mobile view as early in the process as possible will help avoid potential implementation gotchas. Incorporating Legacy Designs, Apps and Assets into the Mobile Experience Very few organizations are building their mobile presence in a vacuum; they must take into account the legacy of prior efforts. This doesn?t mean just legacy systems, but rather adapting exist- ing designs and apps to a mobile paradigm after being designed and deployed for the desktop. 5 15 Cypress St., #200, Newton Center, MA firstname.lastname@example.org?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred First consider how to adapt existing designs to meet mobile users priorities and assumptions. For each page on the current site, Very few identify the small screen use case that best characterizes the page. This will serve as the central experience when viewing the organizations page on a mobile device. are building their Next itemize the other elements of the page, including naviga- tion, branding, and disclaimers. These elements are candidates mobile presence for reduction in the mobile experience, by shrinking their size or replacing them with links to other pages. Although elements can in a vacuum; be removed in mobile views, Cantina advises caution. Users com- ing from the full site experience may expect the presence of these they must take elements, leaving them without a means to achieve their goals. Finally take stock of the mechanisms by which users traverse into account the the site. Avoid the widgets that are frustrating to use without a mouse as some of these widgets will not work on mobile devices legacy of prior and in most cases can be re-platformed using HTML5 for better cross-device support. Of course the functional requirements of efforts the widget or application may preclude the ability to make it truly ?responsive.? The Process of Delivering a Responsive Design The Responsive Design approach will impact the development process, potentially across every phase, depending on the scope a project. The Requirements Phase is Expanded to Include Mobile Parameters When defining business, functional and technical requirements it is important to consider the responsive, multi-device perspec- tive from the beginning. There has been a shift in the way project requirements are captured and documented in light of responsive design techniques. 6 15 Cypress St., #200, Newton Center, MA email@example.com?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred Additional Key Considerations Device/platform/browser support: Prior to mobile, docu- menting supported browsers was the best practice. Now the platform and type (or level) of the device needs to be includ- ed as part of the support structure. Mobile priorities: Prioritizing requirements is another standard Non-Responsive Design Displays Same Un-optimized Content to all Platforms best documentation practice. In responsive design it?s important to also track mobile presentation priorities, at least at a broad func- tional level (i.e., search access is a high priority throughout the vari- ous responsive permutations) Mobile user stories: Organizations which leverage user stories as the main requirements approach should also create specific stories for the mobile user. It may even be necessary to create stories for specific device users (smart- phones vs tablets) although this may prove to be overkill. Revisit responsive approach: Having gone through the mobile project requirements in detail, is a responsive approach still the best path? Or do the require- ments point to the need for a separate mobile site or native app due to the level of interactivity and the user activities required to meet the requirements? A User-Centric Focus Will Meet Customer Needs When designing a responsively designed website Can- tina recommends a user-centric information architecture approach. 7 15 Cypress St., #200, Newton Center, MA firstname.lastname@example.org?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred The typical tasks that mobile users execute tend to be more nar- row and more focused than what happens on the desktop. The small screen reduces context, making exploration or open-ended creation tasks more difficult. Primary mobile tasks are simple fact- based research, short-form communication, and the browsing and consumption of curated content. It is essential to keep this in mind when beginning the design-related activities of the respon- sive development process. Start by creating or using organi- zation-specific user personas, the Responsive Display Detects Platform and Displays Optimized Content archetypes of the users of the site. If an organization already utilizes personas to define functionality or design layouts it may be nec- essary to augment those profiles with specifics about mobile usage and needs, or to create new sepa- rate personas. Next, identify the goals these us- ers will have when they use the site, for each different use case of the site. Capture these goals with agile-style user stories by includ- ing the user role and the user?s desired outcome when describ- ing the features the site should support. Finally, compile a sitemap by grouping and prioritizing the user stories. Stay mindful of mobile devices? strengths and weak- nesses. Be especially mindful of the top-level content categories since this will be the primary navigation for mobile users. Try to keep the number of top-level categories below eight. The end result should be a clean, small site map, where the most fre- quently requested information is readily accessible and logically categorized. 8 15 Cypress St., #200, Newton Center, MA email@example.com?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred The Logistics of the Responsive Design Process Cantina believes Wireframing: Wireframing is the first step in the site design pro- cess, unfortunately, this is the step that benefits the least from the that for most responsive design approach. It is still important to design wire- frames for every delivery platform the site is required to support. organizations Fluid grids may bridge the gap between similar layouts, such as portrait and landscape tablet. One of the CSS Grid systems pro- the extra viding basic fluid grids may be useful here, for example, the 1140 CSS Grid system provides a basic 12 column layout. Develop- investment will ment time can be saved if the site wireframes can be expressed using this grid system. yield improved Graphic Design: With dynamic layouts, there is a greater impor- tance on traditional branding elements of graphic design. A co- results and herent use of color schemes and typography along with a recog- nizable logo at all resolutions will help tie together the customer long-term experience regardless of the delivery platform. Also consider typographical principles such as optimal reading line lengths. savings and User Experience Testing: Responsive design can have a big that the benefits impact on user testing, depending on approach. No matter what type of usability testing is used it is recommended that some por- will outweigh tion of the time is dedicated to the ?small-screen? experience. If there are functioning responsive prototypes simply scaling down any negative to the appropriate size may be sufficient to evaluate the user?s mobile experience. It is particularly important to test the naviga- impacts tion at the smaller screen size, as well as the presentation of core functionality. For instance there might be a problem ?hiding? a form input field behind a link when scaling from the largest to the smallest size. Functions that rely on information retrieval need to be tested within the mobile experience as these sorts of tasks may vary from layout to layout Content Design and Development: Traditionally content devel- opment may not have started until the site was built, and been a part of the final validation and testing phases of the project. When developing responsively understanding the content becomes more important than ever. The difference between the desktop and smartphone is screen size and real estate. Add in naviga- tion and graphics and the space available for the presentation of 9 15 Cypress St., #200, Newton Center, MA firstname.lastname@example.org?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred content becomes even smaller. Cantina recommends devising the content strategy early on, and creating the content as early as possible as well. Prioritizing what needs to be presented to the user in the mobile realm will help avoid overly long content pages or the need to break a piece of content into multiple pages, which all but guarantee longer download times and potential user attri- tion due to impatience. The Highlighted Takeaways Given what has been described a responsively designed web site or app will probably require more time and resources than a traditional development process, at least initially. Cantina believes that for most organizations the extra investment will yield improved results and long- Avoid for Use with Use it term savings and that the Feature Now Caution Today benefits will outweigh any HTML5 Audio X negative impacts. HTML5 Video X Benefit: Better Managed Web Storage X Mobile Presence Web SQL DB X With the deep and expanding Indexed DB X penetration of mobile devic- Data URLs X es every organization?s web HTML5 Data Attributes X presence is being consumed Geolocation X on multiple mobile platforms and devices. Every organiza- Web Workers X tion needs to respond to this Web Sockets X new environment, and it is Servers-Sent Events X far more efficient in the long Canvas (2D) X run to build one code base to Canvas (3D/WebGL) X serve multiple devices than to build separate stand-alone SVG X sites each with a different SVG Filters X interface and code base. CSS3 Animations X The ever-changing mobile CSS3 Multiple Backgrounds X landscape will require ongo- CSS3 Transitions X 10 15 Cypress St., #200, Newton Center, MA email@example.com?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred ing reviewing and re-testing against new devices and platform permutations. Authors Impact: A Shift in Approach to the Development Process While at first blush it may seem that responsive design makes site and app development larger and more complex by adding new platforms and viewports to the mix, in reality most organizations are already involved in app and mobile development. Responsive design principles can help standardize and regularize what is be- Matt Crist is Cantina?s Senior coming for many businesses a chaotic approach to mobile imple- User Experience Consultant mentation. An explicit focus on the mobile experience should allow for better allocation of resources and priorities to better suit the needs of users, perhaps even de-emphasizing the desktop experience that has dominated development for the better part of fifteen years. Benefit: Better User Experience Most importantly this approach should bring about a better Alec Francesconi is SVP, Client overall experience for the user base, as their key mobile tasks are Services at Cantina and runs the Online Video Practice Group. driven by an explicit design process that allows for the neces- sary decisions to be made at the right time and not as an after thought. References: Responsive Web Design ? http://www.alistapart.com/articles/responsive-web-design/ Andrew Paradise is Cantina?s Line Length Readability Senior Technical Consultant ? http://baymard.com/blog/line-length-readability Responsive Design Resources ? http://cantina.co/2011/10/31/responsive-design-resources/ HTML5 and Related Technology Video Evaluations ? http://cantina.co/the-lab/ html5-and-related-technology-video-evaluations/ George White is Cantina?s Principal Consultant, Technical Architect 11 15 Cypress St., #200, Newton Center, MA firstname.lastname@example.org?|?cantina.co?|?1-800-775-2714 Tech Chops | Business Cred About Cantina Cantina is an emerging technology consultancy that combines business acumen with hands-on know-how to craft the right solution for our client?s business problem, using the best available technologies. Cantina?s clients include Fortune 1000 firms in industries including financial services, consumer products, media and professional services. Core capabilities include strategic technology consulting and app development on all platforms. Strategic and service capabilities include mobile strategy and development, video, social, user experience, emerging technologies consulting and technology auditing. Core technologies and platforms include HTML5, iOS, Android, Brightcove, Ruby on Rails, Grails, Java, J2EE, .NET, and PHP, Flash, Flex, Adobe AIR, and AJAX. You can reach us at our site www.cantina.co, email at info@ cantina.co or at 1-800-775-2714 12 15 Cypress St., #200, Newton Center, MA email@example.com?|?cantina.co?|?1-800-775-2714