Author: Edit Olah

Barefoot in the Park website project

Responsive Web Design

I wanted to build a responsive web site from scratch to understand the methodologies and practices in depth. That is why I built this website, Barefoot in the Park. (Psssst! I also needed a portfolio website.)

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

Related blog posts

  • Font sizing

    Font sizing

    px, em, and rem

    Font sizing is a fundamental topic to get your head around when starting...

    More details >>

  • Avoiding using floats

    Avoiding using floats

    Using inline-block grid and justify instead

    Utilising built-in basic behaviour of HTML and CSS can give you a break...

    More details >>

  • Intrinsic Ratios

    Intrinsic Ratios

    Fluid, dynamic element height with padding-top trick

    One of the main learning points of building this website was that there...

    More details >>

Contact Edit

Get in touch

If you are interested in hiring me, please drop me an email. I would be happy to send you my up-to-date resume.

Drupal Association member
Image of Edit