A Model for Responsive Web Design

Responsive Web Design – Part 2

Foreword: In this part of the series I present to you a model for responsive web design.

By: Chrysanthus Date Published: 24 Dec 2015

Introduction

This is part 2 of my series, Responsive Web Design. In this part of the series I present to you a model for responsive web design. You should have read the previous part of the series before coming here, as this is a continuation.

The Model
We read text from left to right, down the next line, left to right again, down the next line, left to right, and so on. This same text can be placed on a wide paper or on a narrow paper. On a narrow paper, the text (and any images) wrap downward. Responsive web page can be designed like that:

Within a sectioning content element, HTML elements can be arranged from left to right, down the next line, left to right, down the next line, left to right, and so on; with few floats. The sectioning content elements themselves should be arranged like that too: left to right, and maybe a <br>, then sectioning content elements below, left to right; and so on (for a very long page).

What do you gain from this? – As the page is displayed from high resolution to lower resolution screens, the content within a sectioning element, wraps downward; the sectioning elements themselves also wrap downward.

Implementation
Within a sectioning content element, most of the content is made up of inline and inline-block elements; there may be just a few floats. The sectioning content elements themselves are inline-block elements. Each sectioning element, may have the “vertical-align:top” property, to raise content, up.

Design Procedure
You design the web page for the widest screen you think your users have. As the page is displayed from higher resolution to lower and lower resolution screens, the sectioning content elements reduce in width, while their contents wrap downward. Ultimately, the sectioning content elements themselves will wrap downward (in smaller resolutions).

Example 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. It has a floated aside element within the principal sectioning 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.

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).

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.

Websites
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 for iPads and computer screens and one set for smartphones.

So, the set of pages for iPads and computer screens, can be design for resolutions from 800x600 to 2048x1536, while the set for smartphones can be from 320×480 to 640×960.

That is it fort his part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

A Model for Responsive Web Design

Responsive Web Design – Part 2

Introduction

Related Links

Comments