An attempt at explaining my Responsive Web Design

My approach to RWD was started in 2017.

The "Meat" of how this works

Well as far as I have worked out.

Basically the approach is to use a "viewport" element in the Meta tag and then use CSS Media Queries to change the layout depending on the device use to view the page. My css file was based on my "side" menu, hence some of the strange <div> names.

The viewport meta tag

The viewport tag on this page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

rdw.css - The Style Sheet in more detail

* box-sizing: border-box

The * is Universal box-sizing and adds paddding and borders (or sets them to zero) to all elements that inherit.

The Clearfix - the class that I have defined is .row (normally this is just .clearfix)

.row::after {
    content: ""; 
    clear: both;
    display: block;
}

I was not really sure what the ::after was at first (I do have a comment in the css about a pseudo-element adding cosmetic content to an element). I admit I copied this from somewhere.

class*="rcontent-"
    float: left;
    padding: 15px;
}

Here I define a class rcontent -

Other general formating

Style declarations for html, p and headers h1 and h2

.header class defined

This is a header div that appears at the top of all my pages.

At this stage it might be an idea to state my overall design stratergy. I have 4 main divs, a header div, a menu div, a content div and a footer. The menu and the content divs reconfigure depending on the screen size of the device viewing the page. The Header is 95% screen width and the Footer 50% both centered on the screen.

.menu class

This is the declaration of the way that ul li tags display as buttons. This was similar my earlier menu.

The aim here was to have the menu buttons on the left except for the case of a Smartphone display, screens max-width: 500px. The media query described below tries to explain this.

media queries

Again, I admit to copying. However this is where I an setting what I refer to as Breakpoints. The W3C site may be of use here if you want to understand this in more detail.

Looking at the examples that W3C have on their website showing how media queries can be implemented I see a menu system rather like I was using on my "side" menu. This s very reassuring as I had adapted a menu system that was far more complex than what I have here and it looked pretty similar. The menu buttons are "stylised" example of <ul> <li>, the positioning on the screen depending on the screen size again is similar.

@media only screen and .....

I am only dealing with computer screens, tablets and Smartphones.

The .rcontent class definition has two sub-classes, main and menu. This is a little confusing as the menu is actually referred to as .rcontent-menu menu.

To get the correct display on Smartphones and tablets of varying screen widths I have attempted to set breakpoints. This is reasonably sucessful but could do with some more work. As I was saying the design is not perfect.

Finally there is a definition of .rcontent- which sets both rcontent-main and rcontent-menu to 100% for screens with max-width: 500px.

Box Shadows

An additional feature that I am particularly pleased with are the shadows on the header and menu items. I have purposely made these subtle.

I have tried to deconstruct this shadow and the header formating in my page on css box-shadow

The example for box-sizing. The Universal Selector can be used on all elements.