Best Practices in Responsive Web Design

The following best practices can be used as a reference for responsive web design projects.

Media Query Placement

Between the top-down and bottom up approaches to media query placement, the top-down approach is generally easier to implement and maintain. It allows you to rely on the cascade order inherent in CSS to layer your design for different devices.

Mobile First And Cross-Platform Capability

Some versions of RWD call for a mobile first strategy whereby the mobile version of a site is considered first. In 2012, 3% of total IEEE.org traffic is coming from smart-phone and tablet devices and this number will be rising dramatically in the next few years. Any new sites or major site upgrades need to take into consideration. One of the distinct advantages of the top-down approach to is that styles can be layered and built up from the small to large devices, with subsequent style  sheets adding to or overriding styles from the previous environment type allowing for automatic cross-platform compatibility, regardless of whether a specific platform support media-queries or not. Rather than creating a unique style sheet for each device (small, medium, and large) — each of which would contain redundant styles — a style sheet for small devices can serve as the basis for the overall design and the minimum requirements for styles on any device or platform. Then the medium can be used to scale the design up as needed for tablets and the final large style sheet is applied for any styles that are needed explicitly for desktop/laptop computers. From a conceptual standpoint, this style sheet strategy also forces you to consider the simplest design (the mobile design) first and then build up to the more involved designs. This can lead to a more streamlined design for desktop/laptop designs as you ask, “Is this really necessary to add?”

Layout

Allow columns to reduce in width up to a point for tablets (medium), but they should then collapse under one another, allowing the user on smart phones (small) and on smaller tablets to scroll through the content.

Content

Once the decision has been made to retrofit an existing site to be responsive, carefully consider the content being presented on the page, especially any content that is not the primary point of the page. Often, page content is surrounded by auxiliary content. Ask yourself whether a content block should be hidden? Visitors will expect a fully functioning website where they can access all of the content they could on desktop/laptop version. Consider three possible ways of dealing with content:

  • Content is moved: Auxiliary content is moved above or below the main content using responsive layout.
  • Content is hidden: Do you need to display all of the sidebars, ads, or various auxiliary content immediately? Consider the value of displaying the content, or whether the content should be better hidden initially and then shown through user action.
  • Content is removed: Although generally frowned upon, there are cases where content for larger screen simply does not make sense and should simply be removed. One common example is for printing web pages, where navigation does not need to be shown.

Images

Images should be scaled up or down relative to the screen size using either relative image sizes (percentage or ems). Alternatively the RESS techniques to provide different image sizes at different resolutions. One alternative to provide images tailored to the device is to used the Adaptive-Images. This requires the site to be set-up on Apache using PHP, but once implemented, will automatically re-size and cache images for specific breakpoints.

Video

Web video is currently shifting from Flash format to newer HTML5 supported formats including Web-M, Theora Ogg, and H.264. In order to be fully compatible, you will need to support all four formats, allowing the application to choose the format that it supports.

  • If a YouTube video is being used, it will generally be able to adapt to the screen in which it is being displayed with no additional work.
  • If you are using a video from a Flash player, you will need to consider converting it to HTML5 based video using relative sizes to allow it resize in the interface and allow for a Flash fall back for systems that do not support Flash. Easy HTML5 Video provides a free tool for video conversion from flash to the three main HTML5 formats.

Typography

Typefaces should be carefully considered since clarity is important, especially when being read on smaller devices. Keep the following in mind:

  • Web fonts should be used wherever possible to ensure consistency across platforms and to reinforce the IEEE brand. Web fonts are supported on virtually all devices, including tablets, smartphones, and desktop/laptop browsers including all current versions of Internet Explorer.
  • Many handheld and tablet devices (most especially iPhones and iPads) actually have a higher resolution than most desktop/laptop screens. This means that text can be crisper and easier to read on those screens.
  • Use relative units for web font-sizes to provide sizing versatility. As a rough guide, though an equivalent of 14px font size is recommended as the base size, with body copy recommended to be at least 16px as a better screen equivalent to 12pt printed type.

Iconography

Interface icons (home, print, arrows, social media, etc.) using image files should be replaced by a single web font file containing all needed icons for the website. This allows the icons to be scaled as needed for the screen without loss of fidelity and can reduce file size. A useful tool for creating this font is IcoMoon App, which has a pre-set list of the most common icons, but also allows you to upload SVG files can be created in Adobe Illustrator or most other vector editing software.

Touch Controls

Touch controls are how users will interface with the design, yet these interfaces are by necessity different from the desktop/laptop mouse pointer paradigm. Here is what to consider while optimizing a for touch:

  • Touch control placement is important to consider. Options in the lower half of the screen will be generally easier for control holding with a single hand than in the upper portion of the screen.
  • Touch control target sizes are also important. The general rule of thumb established by Apple, is that touch controls should be a minimum of 44px in width or height at 72dpi. For icons, it is recommended that you use the web font icon technique which allows icons to be scaled as desired.
  • Since the hover state is not applicable to touch devices, styles or actions keyed to a mouse hover should not be relied upon. This is especially true of drop-down and pop-up interface elements.
  • Interactive touch controls — such as sliding menus — should be supplied using specific JavaScript frameworks such as JQuery Mobile which have been thoroughly optimized and tested.