How to design a responsive website
Over the time that I have been developing this website there have been vast changes in the way that web content is being consumed. Web standards have improved tremendously since I started and there are a wider range of devices that are used to access this information.
My Responsive evolution
My design evolved over time by looking at examples. It includes a "Clearfix", which at the time I first used it was now I believe a symptom of developing web standards.
Web standards have moved-on alot since I first came across some of the "fixes" for browser differences
I am in the process of re-evaluating my original Responsive design which was based on the W3C example. At the moment it seems to work quite well on all the devices that I use, the iPhone 6 amd 8, the iPad Pros and my computer. I am not sure if I need an like the "aside" (right hand column) and the menu is too wide. The result is that the space for content is less. I am continuing with the evaluation and I am holding off creating a new rwd?.css file and making changes to the template.
The template will have to be changed to reflect the new class names, getting rid of the rcontent and rcontent menu div designation. I am not sure that the W3C explanation of why they have so many col classes defined and that the columns on the layout span the columns that they say. At the moment the desktop looks like 3 columns 25%, 50% and 25%. This will become clearer with more experiments.
Experiments with a new layouts
- New 3 column fixed left design
- The W3C example (as is)
- 3rd version - with 3 columns as I didn't want to break the first version
- Version 4 with no aside
- Version 5 changing class names - and simplifiying Media Query
- New Layout Test - with new rwd_min.css
CSS Pertinent to responsive design
- CSS Media Query
- Responsive Web Design - The Viewport - the meta tag that needs to be on all pages
- Setting the Viewport- Where I came across Allen Pike
- CSS [attribute*=value] Selector - how a column layout can be controlled
- Pseudo Class - the selection of menu items for a responsive menu
- Clearfix - not a responsive technique per say but features in my layouts