The Importance of Responsive Web Design

/in /by

Responsive Web Design

According to a 2014 study by Andreessen Horowitz, by 2020, over 1 billion more people will be coming online, all due to smartphones. In order to effectively reach smartphone and tablet users, HP is actively pursuing the implementation of responsive web design pages. Responsive web design pages are preferred to separate desktop and mobile pages.

  • Responsive Web Design (RWD) provides both customer and business benefits:
    • Provides customers with high quality, consistent customer experiences across devices of their choosing. RWD enables improved customer engagement & satisfaction, as well as increased lead capture & revenue conversion for HP.
    • RWD also provides HP with cost savings, by eliminating the duplicate spending associated with the development and maintenance of both desktop and mobile web pages, and their associated content.
  • Adoption Expectations:
    • All web section teams across HP, are strongly encouraged to adopt Responsive Web Design. RWD is required for all new Marketing pages, and by many other teams.
    • Confirm your pages are mobile-friendly: On April 21, 2015 Google implemented new mobile search ranking algorithms that penalize pages that are not considered mobile-friendly. Your SEO rankings may be at risk if web pages are not mobile-friendly.
      • Check out Google’s Webmaster Central Blog, to learn the criteria for the “mobile-friendly” label
      • Check to confirm that your web pages are mobile-friendly, using Google’s Google’s Mobile-Friendly Test tool.
      • Note, that page performance is also considered in mobile page rankings. Please take care to ensure good page rendering performance.
  • Responsive Web Design — content and other implementation considerations
    • In order to provide a high quality user experience, several factors need to be considered. Click here to learn more about Responsive Web Design needs and special considerations.
      • Accessibility
      • Agency Utilization
      • Content:
        • Customer facing content — think mobile first
        • Metadata
        • Image Guidelines
        • Video Guidelines
        • Iconography / Icon Fonts
      • Information Architecture:
      • Responsive and Adaptive Features
        • Breakpoints
        • Browser, device and operating system support
        • Feature/Device Detection
        • Typography
      • SEO Guidelines
  • Design, Development & Test
    • Web Standards, Style Guides & Design
      • HP’s Responsive Web designs are based on current HP Experience style guides and standards. Review the Style and design specifications for details.
      • Where needed, we have established supplemental standards for responsive design pages. See below.
    • Responsive Design Page Breakpoints
      • Responsive Design breakpoint standards help ensure a consistent user experience across HP.com.
      • Major breakpoint: Alignment with major breakpoint standards is strongly recommended.
      • Minor breakpoints: Alignment with minor breakpoint standards is encouraged. Note: additional minor breakpoints can be added by web teams as needed to optimize their web page designs.
    • Responsive Design Global Typography Standards
      • Responsive design requires that Typography presentation be adjusted depending on the size of the device’s display.
      • A standard global typography specification has been created, to ensure a high quality, consistent experience on responsive pages.
      • A world-wide default standard has been created, and should be applied to all pages, except where other language specific typography standards have been created; Simplified Chinese, Traditional Chinese, Japanese and Korean.
    • Iconography / Icon Fonts
      • Use icon fonts, to ensure icon presentation quality on devices with different screen sizes and pixel densities.
      • To ensure cross-browser compatibility, provide Icon font in the following formats: .ttf, .eot, .woff, .svg
      • Click here for additional information regarding the use, creation and implementation of icon fonts.
    • Responsive Design User Experience Quality Framework (PDF, 176KB)
      • To ensure consistency and quality of our Responsive Design pages, HP has established a quality framework, which outlines desired page behaviors, and features.
      • Please apply these guidelines to ensure that your pages conform to HP quality & branding standards.