January 05, 2015
My first iteration of turaew.io proved successful but when I shared the site with my wife, she could not get past how horrible it looked on her mobile phone.
I intended for her to view it on her laptop but she insisted on checking it out on her phone (no doubt fueled by my request to use a laptop).
I was not going to make my site public until I had some responsiveness but my wife’s reaction underlined the importance of this task.
Learning to apply Bootstrap I also wanted to know a little bit more about how responsive design came about.
Responsive design was primarily and initially written on extensively by Ethan Marcotte in 2010. Marcotte said that responsive design has three main tenants:
A fluid grid is one that’s built using a relative unit of measurement like ems or percent instead of pixels.
Flexible image means that the images resize as part of the design, they generally display larger on a big-screen, and they scale down as the size reduces.
Media queries allow you to define different styles for different screen widths.
Prior to the creation of responsive design there was adaptive layout which was written about by Marc den Dobbelsteen.
Adaptive design uses a fixed width grid system in which a screen will resize once specific widths are reached. One major distinction seems to be that adaptive design will not always fill up an entire screen the way a fully-responsive design does.
Read more here: http://www.abookapart.com/products/responsive-web-design