I am not a web designer, so I aimed for a simplified look, and, eventually, I ended up being influenced by the wireframes that I drew up in Photoshop for the site. Hence the use of dashed lines.

I went for a structure that would work for all screen sizes, therefore I decided to code a fluidly changing behaviour according to the size of the screen. This resulted in more media queries than what I would use if I chose specific screen widths to cater for.

I wanted to understand how this would all work exactly, so I decided not to use any frameworks like Bootstrap or Foundation.

One of the main learning points was that there are quite a few gems in the basic inner workings of HTML and CSS that can be harnessed. ‘Back to basics!’ could just be the simplest and quickest way to achieve the responsive behaviour you are aiming for.

I have learnt about and used the following simple solutions:

Responsive web design – basic concepts

Intrinsic Ratios: fluid, dynamic element height with padding-top trick

Avoiding using floats and using inline-block grid and justify instead

Font sizing