My blog updated to responsive design

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

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

Jquery/Javascript Responsive Web Design

Yet another enhancement of the simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | November 16, 2017

I have made another change to the modified version of Mediademons Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.


Jquery/Javascript Responsive Web Design

Enhanced simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | April 13, 2017

In response to a request, I have made some improvements to the modified version of Mediademon's Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.


Jquery/Javascript Responsive Web Design

Simple jQuery Plugin To Create Pinterest Style Grid Layout

by John Avis | March 9, 2016

When I was looking for an alternative to Masonry to produce a responsive Pinterest style grid that was a lot simpler and lighter weight I came across this jQuery plugin on www.jqueryscript.net that is very simple and works well. However, It has a few issues which I needed to fix before I could use it.

Comments

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

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.