Responsive Web Design principles

During the QA Techweek No. 2014 period, David Walker, chief technical expert of QA company, presented the principles of responsive web design at a conference using foundation for Responsive design. Walker mentions several ways to create mobile app sites from existing desktop sites: Native apps, developing an app for each mobile operating system, embedded HTML 5, using PHONEGAP or similar tools, and filtering on the server to create websites for desktops and mobile devices, and redirect between the two.

After analyzing the pros and cons of each approach, Walker proposes a responsive design (RWD) that uses HTML 5, JavaScript, and CSS to create responsive sites that instantly adjust the layout, format, and content based on the device. The main benefit of RWD is to avoid duplication of content, allowing the site to accommodate all devices, including the size of future devices. The downside is the need for excellent CSS and JavaScript skills, some of which are too large for the mobile network and Polyfill for older browsers.

To achieve responsive design, Walker recommends the following principles:

Create a flow layout (Fluid layouts). The width of all containers must be defined as a percentage of the browser viewport.

Use CSS3 Media Query. Different styles are used for different media types such as screen, printer, TV, etc., as well as different media parameters such as width, height, color, resolution, and so on.

Use the adaptive picture (Fluid image). The image size can be adapted to the maximum display width.

To determine which media type the style applies to, you need to determine what the different display widths are. View via Chrome extensions responsive Inspector. With these styles, the content of TIME.com is automatically laid out at the browser level, so the page does not need to scroll horizontally even if it is displayed on devices of different widths.

Walker says responsive web design also needs to be considered:

Optimize images for different devices and network speeds;

Change the navigation mode for mobile ui/ux;

Change the style of links and buttons so that they are suitable for touch;

Dynamically adjusts the font size to fit different screen resolutions;

Load content on demand instead of hiding it;

Provides a retina version of the graphic.