What is Responsive Design?
This is a web design approach that is aimed at crafting websites so that 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 smartphones.
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 call 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, 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.
Fluid layouts
With the ever-expanding width of computer monitors and being able to view the Web on your TV screen, which is also getting wider, fixed layouts show wasted white space when viewed on a screen larger than the specified width. Solutions have included background colors 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 the type of device or its size or screen width, because your website through its design will adapt to the size of the device used.
Proportion-Based Grids
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 devices 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.
Media Queries
These consist of a media type and at least one expression that limits the scope of the style sheets by using media features, such as width, height, and color, 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 a 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 have CSS rules for mobile, tablet and desktop.
HTML5 Boilerplate
With the responsive design that has already taken off and many websites moving to make their 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 websites 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.
Features
- 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.
- Protection against any stray console.log causing JavaScript errors in IE6/7.
- 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, proportionally based grids and media queries to aid in the creating of easy to read, easy to navigate and user-friendly and device friendly designs.
