On the 12th march of 2014, I held a presentation at TechHub Bucharest called "Responsive Websites - how to build a websites for all devices". This was a part of the Avangate Tech Sessions series.
Because RWD (Responsive Web Design) is a term that is often misunderstood or simply treated as a shortcut for CSS3 media queries, I thought it was a good opportunity to show how to practically build a responsive website with all the technology stack involved.
My agenda was composed of a short introduction to the technologies used, live coding a responsive website from scratch, then using Twitter Bootstrap, then using Zurb Foundation. I wrapped it up with mobile/feature detection and content strategy techniques.
One of the main reasons to watch this presentation is the prototyping of the website on paper (whiteboard) and then coding it from 0. I encourage web developers to develop a responsive website (fluid website) from scratch to see how the CSS is organized to better manage media queries rules. There are other things that get overlooked like splitting your content and code into modules, blocks or some kind of entity so you don’t have to repeat code over and over again.
I also touched on some of the important aspects of the grid, which in my opinion is the most important part of the website’s prototype. As a developer coming from the server-side part of the things, I considered a fluid grid to be something more or less voodoo. I hope I demystified some of the aspects of that in this presentation.