My blog updated to responsive design

John Avis by | June 21, 2013 | Responsive Web Design Web Development

For too many years my own blog has been out-dated, still with its’ decade old HTML 3.2 markup. I decided to update it and put into action my responsive design techniques.
For too many years my own blog has been out-dated, still with its' decade old HTML 3.2 markup. I decided to update it and put into action my responsive design techniques.

My intention was to make the layout as responsive as possible with just CSS floats, without JavaScript, and supporting as many browsers as possible, including right back to IE6. Then if the browser window size changed beyond what my layout was intended for, either smaller or larger, then certain elements would be show, hidden or moved.

The content area of my blog was designed to always be 600 pixels wide, unless the browser window fell below 650 pixels wide (600 pixels plus 25 pixel margins either side). Once below this point the content area should change to auto width to fill the browser window (with margins). Then I have another breakpoint to reduce the horizontal margins to only 10px when the display width falls below 620 pixels.

I also wanted anyone browsing full size on a 1920 by 1080 pixel monitor to make more use of all the available space. So I decided to have the comments element positioned to the right of the main content area at display widths above 1890 pixels.

Planned layout

To accomplish the changes at the maximum width of 650 pixels and the minimum width of 1890 pixels I used my Cross-browser responsive design without media queries jQuery to apply different classes to the BODY element at these breakpoints.

This type of design is a simple way of doing effective responsive design without resorting to a more complex grid based layout. Basically my design uses fixed width building blocks which only become fluid when the browser width falls below the standard width of the main content area. To sum up here are some tips:

* Create fixed width elements
* Use CSS floats to position these items
* Add a media query (or equivalent) to change to fluid widths once the width falls below the width of your main content

Also in use is my Image resizing solution for Responsive Design which uses jQuery and server-side image resizing to request the correct sized image from the server for the current browser window size.

Related Posts

Computers & Internet Web Development Website Hosting

500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


Jquery/Javascript Web Development

tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.


ASP.NET Web Forms Web Development

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

Tags

About me

...random postings about web development and programming, Internet, computers, electronics and automotive topics.

Subscribe

Get the latest posts delivered to your inbox.