Responsive testing using the unsemantic GRID


Get back to the main site here: www.hmmm.ip3.co.uk
Looking at responsive web design using the unsemantic grid system

Header image and some text - large logo to see it resize on a mobile device.
This element will be 100% width on both a desktop and mobile.
NOTE: The DIV elements for this test have been shaded so that visitors can see how the grid system works.

I'm putting a few pages together just as a test/demonstration for the unsemantic grid system.
March 2015 - more coming soon... Responsive examples: Images / YouTube videos / AdSense
#RWD - Responsive Web Design.
The 'unsemantic grid' is the successor to Nathan Smith's popular '960 grid system'
You can read more and download the grid system from unsemantic.com

grid-33 and mobile-grid-100
33% on a desktop, 100% on a mobile.

The unsemantic responsive grid system works with IE8 which LOTS of people still need.
Lots of the visitors to my websites are still using IE8 so it would make sense for things to work for them!

grid-66 and mobile-grid-100
66% on a desktop, 100% on a mobile.

I've looked at LOTS(!) of responsive frameworks...
Most don't seem to play nicely with IE8 so at this point in time don't suit me.

grid-50 and mobile-grid-100
This column will take up 50% on a desktop and 100% on a mobile.
This column will take up 50% on a desktop and 100% on a mobile.
This column will take up 50% on a desktop and 100% on a mobile.

Responsive images:
For IMAGE RESIZING add this CSS style:  img {max-width: 100%;}
and don't specify actual image sizes in the HTML.

grid-50 and mobile-grid-100
This column will take up 50% on a desktop and 100% on a mobile.
This column will take up 50% on a desktop and 100% on a mobile.
This column will take up 50% on a desktop and 100% on a mobile.

grid-33 and mobile-grid-100
This column will take up 33% on a desktop and 100% on a mobile.
This column will take up 33% on a desktop and 100% on a mobile.
This column will take up 33% on a desktop and 100% on a mobile.

grid-33 and mobile-grid-100
This column will take up 33% on a desktop and 100% on a mobile.
This column will take up 33% on a desktop and 100% on a mobile.
This column will take up 33% on a desktop and 100% on a mobile.

grid-33 and mobile-grid-100
This column will take up 33% on a desktop and 100% on a mobile.
This column will take up 33% on a desktop and 100% on a mobile.
This column will take up 33% on a desktop and 100% on a mobile.