Drupal Template: 
UQ School Template

 

Responsive Web Design

Here at UQ, we are working toward  websites based on responsive web design which aims to optimise a page displayed on the web by multiple devices (http://zurb.com/word/responsive-web-design, 23/11/2015).  Three elements are required to achieve responsive web design, viz flexible grid, flexible images and media queries.

  • Width of the content is determined by the number of columns used.
  • Height of the content is determined by the amount of content
  • Spacing of the content is determined by a blank space called a gutter (padding) between the consecutive columns and consecutive rows
Flexible grid
The 12 column fluid grid arranges content based on percentages rather than pixels. The number of columns used to display the content determines the width, while the amount of content determines the height used. Between each column and row there is a blank space called a gutter (padding) to prevent cluttering of the content.

The display of the content is determined by the following factors.
12 Column Grid
 
Flexible images

The images are do not rely on a fixed pixel size by rather is set to a maximum setting (maximum width is 100%) and then resizes depending on the device that is used.  This is currently built into the system.

 

Media queries
Enables the use of different style rules for different media types/devices that have different screen sizes. When content is created and styles are applied, the default code that is applied is for mobile devices and large devices inherit these styles. If a different style is required on devices other than that applied to the mobile device, customised code must be inserted. The table below summarises the different screens sizes.

screen sizes

 

Example

The image below demonstrates the display small screens such as a mobile device.

display on a small screen

 

The image below demonstrates using the grid to insert an inline image and allow the rest of the text to wrap around the inline image when viewed on large screens.  The instructions for achieving this layout is provided in Insert an Image - using the 12 column grid.

Use of 4 columns of the grid for an image