Responsive Web Design Features
Responsive Web Design – Part 1
Foreword: In this part of the series I talk about the features of responsive web design.
By: Chrysanthus Date Published: 24 Dec 2015
Introduction
Pre-Knowledge
At the bottom of this page, you have links to the different series you should have read before coming here, in order to understand this series better.
RWD
Responsive Web Design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices (from desktop computer monitors to mobile phones).
An RWD site adapts the layout to the viewing environment by using fluid, proportion-based grids; flexible images, and CSS media queries, in the following ways:
- The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute 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 the site is being displayed on, most commonly the width of the browser.
Font
The font-size Property
This determines how big a character is. The value for the font-size property can be any of the following:
xx-small | x-small | small | medium | large | x-large | xx-large
The above are absolute sizes. You can make the font of the element in question bigger or smaller than that of the parent element, using the relative font-size property. The value for the “relative” font-size property can be any of the following:
larger | smaller
An example of the use of the “absolute” property is:
font-size: x-small
An example of the use of the “relative” property is:
font-size: larger
You can also use a number and unit as a value. You can use the percentage, pixel or em; em is a good choice. However, most of your problems will be solved using the reserved words above.
Distance absolute units are: cm, mm, q, in, pt, pc, px . Distance font-relative lengths (units) are: em, ex, ch, rem . Distance relative viewport-percentage lengths (units) are: vw, vh, vmin, vmax . I will talk only about some of these units.
Pixel
In simple terms, 1px is a dot on the screen.
em
1em equals to the value of the font-size (property) for the characters of the element in which it is used.
Percentage, %
Percentage means, out of one hundred. Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When dealing with width, % is usually relative to the containing block.
vw
I like this one. 1vw equals to 1% of the width of the initial containing block (viewport). This means, if the width of all elements are given by vw, they will be relative to the initial containing block (viewport). This is the good news: As the resolution of the screen reduces (page displayed in smaller and smaller screens) the width of all elements reduce accordingly.
vh
1vh equals to 1% of the height of the initial containing block (viewport).
Width
width
The width of an element is the width of the content box. When giving the width of an element, bear in mind that the overall width consists of the content width plus 2 times the padding width, plus 2 times the border width, plus 2 times the margin width. For responsive design, the width should have a relative unit.
min-width
This is the minimum width the element should have. The min-width should not be more than the width of the smallest resolution (device), minus 2 times the padding width, minus 2 times the border width, minus 2 times the margin width. So, for responsive design, min-width can still be in px. This is on the assumption, that as the page moves from high resolution to low resolution, elements are wrapping downward, until this element occupies the whole width of the smallest resolution.
For responsive design, the width of the element should be more than the min-width. As the resolution reduces, the element’s content should wraps downward, and you end up with the min-width.
height
Whenever you give the width or min-width to an element, the User Agent (browser) normally chooses a good corresponding height or min-height, for you. Avoid coding height or min-height value.
The pixel is the smallest dot that can be displayed on a computer screen. When you have a colorful picture on the screen, it is made up of pixel dots of different colors. The total number of pixels that a screen can display is called the Resolution of the screen. Different screens have different resolutions. From smartphones to desktop, some resolutions are: 320×480, 640×960, 1136×640, 1024×768, 1366×768 and 2048×1536. The first number for each resolution is for the width of the displayable screen and the second number is for the height. If you multiply the width by the height, you would have the total number of dots the screen can display.
Smartphone resolutions are say from 320×480 to 640×960. Computer screen (and iPad) resolutions are say from 800x600 to 2048x1536
Today, the same website can have two sets of pages: one set for iPads and computer screens and one set for smartphones.
Generally, the higher the resolution the wider the screen!
Layout
Layout should use inline-block display property for sectioning content elements. The following gives an example for a header-nav-article-sidebar-footer layout. It is for a 1024×768 resolution.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<header>
Preamble and some Links
</header>
<main>
<h1>Heading</h1>
<nav style="display:inline-block; width:220px; vertical-align:top">
<p>links</p>
</nav>
<article style="display:inline-block; width:52vw; min-width:240px; vertical-align:top">
<aside style="float:right; width:230px">
<p>aside info and links</p>
</aside>
<p>principal content</p>
<br><br><br><br><br><br><br><br><br>more principal content . . .
</article>
<aside style="display:inline-block; width:230px; vertical-align:top">
sidebar
</aside>
</main>
<footer>
Copyright 2016
</footer>
</body>
</html>
The header and footer element have not been given dimensions (widths). Under this condition, as the resolution reduces (from one screen to another) the content in each of these elements should wrap downward, still fitting in smaller screens.
The sectioning content elements (nav, article, aside) are inline-block elements. As the resolution reduces, these elements will finally wrap down, still fitting in smaller screens.
The principal sectioning content element is the article element. It has a width with the vw unit. As the resolution reduces, the width of this element reduces proportionally, still fitting in smaller screens. The content of the principal element should be made largely of inline and inline-block elements. With this, the content wraps downward as the resolution reduces.
The min-width of the nav or sidebar element is less than the width of the smallest resolution screen, minus 2 times the maximum possible border-width, minus 2 times the maximum possible padding width, minus 2 times the maximum possible margin width. With this, as the sectioning elements wrap down with reduction in resolution, they still fit in the smallest resolution. The whole page will still be seen in the smallest resolution (but longer).
Left or right floating of grouping or sectioning content element, should be done in the principal sectioning content element (article above). The min-width of the floated element, even if it is a sectioning element, should be less than the width of the smallest resolution screen, minus 2 times the maximum possible border-width, minus 2 times the maximum possible padding width, minus 2 times the maximum possible margin width. In this way, it will still fit in the smallest resolution screen.
With this floating scheme, as the resolution becomes smaller and smaller, the content in the principal element wraps downward as the floated element pushes it, until there will be no content on the side of the floated element.
HTML Table
Any table should be in the principal element. The table and its cells should not be given dimension. Each cell should have, inline or inline-block elements. It can have a floated element. With these, as the resolution reduces, the cell contents wrap down and the width of the table reduces. There is a limit to the reduction in table width: if the table has many horizontal cells, the least width arrived at during reduction, may be wider than the width of the smallest resolution screen.
CSS Colons
Colons should be in the principal element. The minimum width of each column should be less than the width of the smallest resolution screen. Colons are normally coded such that the number of colons increases or decreases based on the width of the viewport (screen).
Paragraph Element
When a paragraph element is not given dimension (width), it takes the whole width of its containing element. Under this condition, as the resolution reduces, the content of the paragraph wraps downward and the width of the paragraph also reduces. So, do not give the paragraph any dimension.
Image
The min-width of any image should be less than the width of the smallest resolution screen, minus 2 times the maximum possible border-width, minus 2 times the maximum possible padding width, minus 2 times the maximum possible margin width. The image should remain an inline element, or floated. With this, the image will still fit in the smallest resolution, as everything else wraps down.
Video
The min-width of any video element should be less than the width of the smallest resolution screen, minus 2 times the maximum possible border-width, minus 2 times the maximum possible padding width, minus 2 times the maximum possible margin width. The video should remain an inline element, or floated. With this, the video will still fit in the smallest resolution, as everything else wraps down.
Background Image
Similar to normal image, the min-width of any background image should be less than the width of the smallest resolution screen, minus 2 times the maximum possible border-width, minus 2 times the maximum possible padding width, minus 2 times the maximum possible margin width. If you want background image bigger for higher resolution screens, then you should use the CSS background-repeat property.
Printing
If you have a wide web page, you can print it landscape. You can also print it portrait, because the items on the page will wrap downward, to give a narrower page. All the information for the wide layout will still be there (in narrow page), but some will be lower down in the page.
Media Queries
You can use media queries, but know that basic mobile phones do not support media queries.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
NEXT