Let's start with what my website used to look like.
Boxy and segmented, it was built for a specific width and not on a grid. It looked alright on mobile because I used the meta viewport element correctly.
For the redesign I used bootstrap with its responsive grid and font awesome, which is as awesome as the name implies. Gone were the boxes, replaced with infinitely wide horizontal stripes and content suspended on an invisible grid. A grid which can resize its cells and stack them all vertically when down at a phone resolution — thanks to everything floating left.
My cat-based banner image previously was precisely cropped, but that wasn't going to work in a world where everything is infinitely wide. I went with the common approach of making the picture of my cat full width and centred, keeping the most interesting part of the picture in the middle of the viewport. I had to tweak the media queries in the CSS for smaller screens to prevent vertical repeating.
Overall the process was straightforward. Bootstrap lets you do a bunch of customization and avoid LESS. I removed the grid adjustment for the jumbo screen size which looked too weird to me. It would be nice if you could more easily disable the navigation menu on the tablet size; my navigation would look fine on a tablet. The Bootstrap grid is better because it requires less additional HTML; merely nest elements with the CSS classes container, row and span. No more clearing divs everywhere.
I am happy with the result and the fact it only took a day or two of effort to complete. Hopefully it looks better, no matter what device you are using to view it.