Website for Desktop Monitors and Smartphones
Responsive Web Design – Part 3
Foreword: In this part of the series I explain how to design websites for desktop computer monitors and samrtphones.
By: Chrysanthus Date Published: 24 Dec 2015
Introduction
Resolutions
Smartphone resolutions are say from 320×480 to 640×960. Computer screen resolutions are say from 800x600 to 2048x1536
Today, the same website can have two sets of pages: one set to iPads and computer screens and one set for smartphones. Do you have the budget for that? Do you have the budget for two sets of pages? If no, then you have to make a compromise.
The website for smartphones is summary, in every sense of the word. The website for desktop has details. To have one website for desktop and smartphones, the site content (text), should not be detailed and should not also be summarized; it should be in-between.
If you are designing one website for smartpnones and desktop, it means the resolutions are say from, 320×480 for smallest smartphone to say, 2048x1536 (largest desktop). You then follow all the rules of the previous parts of the series, and you are done.
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. It has a floated aside element within principal sectioning content element. Read and try the code:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<header>
Preamble and some Links
</header>
<main>
<h1>Heading</h1>
<nav style="display:inline-block; min-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; min-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; min-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.
Float
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.
Spaces between Sectioning Elements
You must make sure there are enough spaces between the sectioning content elements, otherwise, one of them (the right most) will wrap downward in the widest screen. You achieve this by not giving extreme (limit) widths to the sectioning elements.
Why it works
Why does the above scheme work? The width of images and videos, and the widths of nav, aside and float elements, are the min-width, not just width. So in wide screens, maximum widths should be attained. To be sure, always give such an element its widest screen width (in vw).
Top-Down Hierarchy Layout
For this layout, you have a small narrow header horizontal section at the top of the web page, that runs from the left end of the page to the right end. Below this, you have another horizontal section, which is taller than the first and it also runs from the left end of the page to the right end. Then you have the principal element (running from left to right). This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>A Major Layout</title>
</head>
<body>
<header style="border:1px solid blue">
Smaller header <br><br>
</header>
<footer style="vertical-align:top; border:1px solid blue">
Bigger header, even though with footer element <br><br><br><br>
</footer>
<article style="vertical-align:top; border:1px solid blue">
principal <br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</body>
</html>
This layout is ideal for smartphones and good for desktops. If the site is to be used for both smartphones and desktops, then the minimum width of any element in it, should be less than the minimum width of the smartphone screens (a lot of element wrapping should also be used).
That is it for this part of the series.
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
BACK