What is Responsive Design?
This is a web design approach that is aimed at crafting websites so that an optimal viewing experience is provided. This is easy reading, navigation and usability with minimum use of resizing, panning, and scrolling across a wide range of devices, i.e. desktop computer monitors, to tablet computers, to mobile smart phones.
A website designed according to this approach will adapt its layout to the viewing environment. New websites will typically use some of the following concepts including fluid layouts or proportion-based grids, flexible images, and CSS3 media queries. These concepts are summarised below.
Fluid layouts and proportion-based grids calls for page element sizing to be in relative units like percentages, rather than absolute or fixed units like pixels or points.
Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
Media queries allow the page to use different CSS style rules based on characteristics of the device which the website is being displayed on.
With the ever expanding width of computer monitors and being able to view the Web on your TV screen, which are also getting wider, fixed layouts show wasted white space when viewed on a screen larger than the specified width. Solutions have included background colours or even images to fill the space but this leads to the problem of how big and what size.
Fluid layouts provide an easier solution and use relative measurements such as percentages which are flexible and give you more malleability and fluidity when compared to fixed layouts. As a designer you won’t need to think about type of device or its size or screen width, because your website through its design will adapt to the size of the device used.
This concept expands on fluid layouts. In this concept a maximum layout size for the design can be specified. There is a grid and this is divided into a specific number of columns. This keeps the layout tidy and easy to work with. Each element such as images, div tags, and so forth, has proportional widths and heights instead of fixed pixel based dimensions. These elements can be manipulated using media queries to suit each category of device such as mobile, tablet and desktop so that whenever the device or screen size is changed, the elements will adjust their widths and heights by the specified proportions.
These consist of a media type and at least one expression that limit the scope of the style sheets by using media features, such as width, height, and colour, and are resolved to either true or false. When a media query, such as viewing the website on a tablet computer, is resolved as true, the corresponding style sheet or style rules are applied. When false, such as website is not being viewed on a tablet computer, the corresponding style sheet or style rules are not applied.
This concept allows a web page to use many different CSS style rules based on characteristics of the device which the website is being displayed on. As shown above, a web page could in fact have a CSS rules for mobile, tablet and desktop.
With responsive design having already taken off and many websites moving to make there websites more accessible we examine HTML5 Boilerplate – the basis of a majority of responsive frameworks.
This is a professional front-end template method for building fast, robust, and adaptable website and apps. It has formed the base for responsive website design for some of the latest design and development software such as Dreamweaver, Expression Web, and used companies such as Google and Microsoft to name a few.
- HTML5 compatible.
- Cross-browser compatible. This includes Chrome, Opera, Safari, Firefox and IE.
- Includes Normalize.css for CSS normalizations and common bug fixes.
- The latest jQuery and Modernizr build for feature detection.
- IE-specific classes for easier cross-browser control.
- Placeholder CSS Media Queries.
- Default print CSS, performance optimized.
- An optimized Google Analytics snippet.
- Apache server caching, compression, and other configuration defaults for Grade-A performance.
- Cross-domain Ajax and Flash.
- “Delete-key friendly.” Easy to strip out parts you don’t need.
The HTML 5 Boilerplate benefits responsive design by combining the concepts of fluid layouts, proportional based grids and media queries to aid in the create of easy to read, easy to navigate and user friendly and device friendly designs.