A Suitable RWD Layout for Smartphones and Desktop
Foreword: The Top-Down Hierarchy Layout is ideal for smartphones and good for desktops of all resolutions; the reasons and details for responsive web design are given in this article.
By: Chrysanthus Date Published: 25 Jan 2016
Introduction
Top-Down Hierarchy Layout of Page
For this layout, you have a small narrow header horizontal section at the top of the web page, that runs from the left end to the right end of the page. 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="border:1px solid blue">
Bigger header, even though with footer element <br><br><br><br>
</footer>
<article style="border:1px solid blue">
principal <br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</body>
</html>
You should try the code. You are not obliged to have borders for the bars.
Responsive Wed Design
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)
In this case, the minimum width of any containing element within a bar, should be less than the minimum width of the smartphone screens (a lot of element wrapping should also be used). If the smallest smartphone screen width of your users is 320px, then the minimum width for any nested containing element (article, section, div) can be 300px. The width (maximum width) of the containing element should be in vw (percentage of viewport), so that the element can widen or get narrowed, as the screen resolution changes.
Any containing element to be floated, should be floated right. Any containing element adjacent to the floated element should have the inline-block display style (vertical-align:top). In that way, the containing elements will wrap downward from a desktop screen resolution to the smartphone screen resolution.
The above description works for home page and internal pages of the website. However, you can add some more design to the home page. You can give the principal sectioning content element a regular layout, using a table. The following table can be inserted in the principal sectioning content (article) element:
<table role="presentation">
<tbody>
<tr>
<td>
Banana: Text about banana . . .
</td>
<td>
Apple: Text about apple . . .
</td>
<td>
Orange: Text about orange . . .
</td>
</tr>
<tr>
<td>
Pear: Text about pear . . .
</td>
<td>
Berry: Text about berry . . .
</td>
<td>
Pineapple: Text about pineapple . . .
</td>
</tr>
</tbody>
</table>
Note the use of “role="presentation"”, when table is used for layout. The table cells have to be given width and height values. The values have to be in vw, as the cells have to enlarge and shrink evenly in wide and small screens.
The following shows a complete code for the home page. Note the CSS coding added; try the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Sample</title>
<style type="text/css">
h1 {text-align:center}
article {text-align:center}
table {display:inline-block}
td {width:30vw; height:30vw}
</style>
</head>
<body>
<header style="border:1px solid blue">
<h1>Fruits</h1>
</header>
<footer style="border:1px solid blue">
Bigger header, even though with footer element <br><br><br><br>
</footer>
<article style="border:1px solid blue">
<table role="presentation" border>
<tbody>
<tr>
<td>
Banana: Text about banana . . .
</td>
<td>
Apple: Text about apple . . .
</td>
<td>
Orange: Text about orange . . .
</td>
</tr>
<tr>
<td>
Pear: Text about pear . . .
</td>
<td>
Berry: Text about berry . . .
</td>
<td>
Pineapple: Text about pineapple . . .
</td>
</tr>
</tbody>
</table>
</article>
</body>
</html>
That is it for this article.
Chrys
Related Links
Surrounding a Web Page Image with TextAdvantages and Disadvantages of HTML Table for Layout
Layout Without Frames for the Web Page
Designing Iconic Hyperlink for a Web Page
A Suitable RWD Layout for Smartphones and Desktop
Knowing the Resolutions of Visitor Screens with ECMAScript
Enlarge and Reduce HTML Image with ECMAScript
HTML5 Image Gallery and Image Enlargement with ECMAScript
Designing a Video Gallery
Ajax Web Technology Explained
Perl Course
MySQL Course
Using the PurePerl MySQL API
Drawing Bar Chart in HTML Canvas
Drawing Pie Chart in HTML Canvas
HTML Canvas 2D Context
Drawing a Histogram in HTML Canvas
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library