
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
Related blog posts
-
Font sizing
px, em, and rem
Font sizing is a fundamental topic to get your head around when starting...
-
Avoiding using floats
Using inline-block grid and justify instead
Utilising built-in basic behaviour of HTML and CSS can give you a break...
-
Intrinsic Ratios
Fluid, dynamic element height with padding-top trick
One of the main learning points of building this website was that there...
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.
Edit Olah, Web developer
