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?”

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.

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 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.

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.

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.

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.