What is responsive website design and how is it used?
In today’s world, more and more people opt to use their mobile devices to surf the web. The challenge however, is that mobile devices tend to be restrained by display size and more often than not need a different approach to the manner in which content is laid out on screen and unfortunately not much of the web is optimized for mobile devices.
In his 2010 article Ethan Marcotte said “mobile browsing is expected to outpace desktop-based access within three to five years.” Indeed it has and so too grew the need for an approach to website design that responds to a mobile device user’s behavior based on screen size, platform and orientation, in other words responsive website design.
Responsive website design seeks to respond to the needs of a mobile device user as well as the device they are using. The idea is that the layout of a website should change based on the capabilities as well as size of the mobile device being utilised. What this means is that resizing the browser window will result in screen elements resizing themselves to suit the device being used. For instance on a tablet users would see content in two columns while on a cellular phone the same content would appear in a single column.
There exist countless web capable devices on the market and because they come in a multitude of screen sizes it is essential that a website is able to adapt to any screen size. This essentially involves three main principles that form responsive website design namely fluid grid, fluid images and media queries.
Fluid Grids
Wikipedia defines a fluid as “a substance that continually deforms (flows) under an applied shear stress.” In responsive website design the fluid refers to the layout or design while the shear stress refers to the user’s mobile device or the screen size.
Traditionally, websites have been defined in terms of pixels, an idea which stems from the print industry, where a magazine or a newspaper was always the same size. The focus was on pixel based layout design. Times have changed and now the focus is on creating percentage based designs which are known as fluid designs.
Using fluid grids in responsive website design allows for the maximum layout size for the design to be defined so that whenever the device or screen size changes content and elements adjust their widths and heights accordingly.
Fluid Images
Images tend to maintain their size and orientations and are cropped should they be too large for their container. With responsive website design, as the mobile device browser window narrows, images are scaled to fit their container.
Media Queries
Normally a smartphone is used in portrait mode so that the screen is taller than it is wide. This does not always work well for wide layouts and that is where media queries come in. A media query is made up of a media type as well as at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. Media queries, allow for the presentation of content to be tailored to a specific range of output devices without having to change the content itself. That means that when a design is too large or too small, a media query can be used to detect the site width and serve CSS that appropriately rearranges the site’s content.
In the field of web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Creating a website version for each new resolution and device is impractical however with responsive website design this is not even necessary. Responsive website design enables an automatic response to a mobile device user’s preference and thus eliminating the need for different website versions for each new resolution or device.
