Responsive web design refers to a web page adapting to the screen size of the device being used to view it, whether that device is a desktop, tablet or mobile. In other words, the page responds to the user’s environment.
There are two main ways to achieve responsive web design:
- Creating a separate build for mobile devices and desktops
- Using media query breakpoints for different size screens
Separate build
This is where there is more than one physical version of a web site, for instance, a desktop version and a jQuery mobile version. The separate build method requires more work. This could be used where a single set of content is not appropriate or not adaptable to differing screen sizes. Strictly speaking this method is not responsive in the true sense in that one set of content does not adapt to the viewing environment. This method uses a script, such as JavaScript or PHP, to detect the device used to access the site.
Media query
Media query is the method by which true responsive design is achieved. A media query is a statement in CSS that is called into effect by the size of the browser and then applies appropriate styles for that size. Breakpoints are defined screen widths such as 320, 640 and 960px. Styles are created to arrange content for display at these sizes. The styles are defined either within a single CSS document or as separate CSS documents. In either case, changes in the layout are achieved by employing the cascade. That is, the same selectors are used in the CSS for each breakpoint but, through use of the cascade, the properties are adapted to alter the effect on layout.
Designing for a responsive layout
At the design stage (prior to build), there is an accepted philosophy that says design for mobile content upward. Content at the smallest size is likely to be in one column. Content can be rearranged into further columns for tablet and desktop display.
At the build stage, create the phone version first and then create the larger versions at the required breakpoints.
In regard to sizing for main structural container elements such as <divs>, depending on the requirements of the layout, a general approach is that for desktop you can use fixed widths and for the smaller breakpoint layouts you can use percentage or width: auto.
Think about making image and media content responsive in size in order to expand or contract as required. Any large background images in the desktop version, such as ones that may be used in headers, can be substituted with smaller versions from the CSS or removed completely. This will help with bandwidth on a mobile device.
In responsive design:
- Content can be resized
- Number of columns changed
- Content re-ordered