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