Hi benbob. Thank you for the compliment
I am re-building the old EasyDigging pages to be responsive. If you dig a little deeper into the site you will start seeing some pretty ugly old fixed width pages
The responsive pages are built with Twitter Bootstrap, which has already figured out all the basic CSS to make it responsive. Twitter Bootstrap (TB) has some tutorial pages at their site, which I definitely made use of. The rest I taught myself, with occasional help from the good folks here at SitePoint Forums.
Here are some tips I learned...
Never mess with the two Twitter Bootstrap CSS files. One is general CSS rules, the other is responsive CSS rules. Instead create a 3rd CSS file for each site that overrules particular small bits of CSS from the TB CSS files
- build a responsive page in horizontal layers, like a cake.
- build each layer from left to right.
- build on a wide monitor, with the TB device widths marked on the top of the monitor frame.
- Use % widths for images where possible. In TB the % width is a % of the invisible column the image is placed in. So a 90% image will shrink with the screen width, but never stray out of it's invisible column. And 4 images each sized at 45% will always appear as two rows of paired images (a block of 4) that all shrink proportionally to the screen width.
- Use square images if possible, especially when images are displayed side-by-side and you want them to all vertically align. As the screen width narrows and the pictures shrink, the heights will continue to align.
- If you must use rectangular images in a side-by-side arrangement, first use a photo editor to first make them all proportional. Like all the heights are exactly 3/4 of the widths. This allows them to stay vertically aligned as the screen shrinks.
These were probably the most important rules. The other technique is this:
After every major addition or edit grab the right edge of the screen and narrow the width through the full range.
a) You will see that each "cake layer" gets narrower and taller. (if there is text in the layer, if there are only images then layer will get shorter)
b) At the different device widths you marked on your monitor (PCs&laptops / Tablets / Big-phones / Small-phones) you will see noticeable jumps in the layout.
c) Tablet views can get might skinny. You may need to set a few "tablet only" CSS rules
d) Phone views turn any columns inside your "cake layer" into a new set of cake layers. If a layer has a right, middle, and left column then on a phone it will display all the right content on top, then all the middle content below that, and finally all the left content. So make sure you put them in a logical order when building your initial wide-screen layers...
e) frustration can be minimized by using Text Only layers and Images Only layers. This is because text and images behave in opposite ways as the screen width narrows (text gets taller, images get shorter)
Twitter Bootstrap is free. It's easy to use. I suggest just downloading it and playing with it. Experiment with re-creating one of your old fixed width pages. I mostly just cut-n-paste text from my old fixed pages into my new responsive pages. Though I do have to spend a little time using a simple photo editor program to crop the old photos into squares or equal rectangles