May 6, 2015
As the technology that powers the internet has evolved, the devices that we use to retrieve web pages have become equally diverse. This demand for usable mobile interfaces has generated several new technologies aimed at providing more intuitive and simplistic design patterns.
Two buzz words commonly thrown around the mobile development world are ‘responsive’ and ‘flexible’ design approaches. To clarify, responsive design dictates that HTML elements use relative units of measure to scale proportionately to the screens of different devices. On the other side, a flexible design approach uses different instructions for different device ranges such as phone, tablet and desktop.
However, beyond the design requirements of a mobile optimized website, the site must use the proper meta viewport tag to scale the page properly. The width property provides instructions on how to scale the browser’s viewport while the initial-scale property sets the browser’s zoom level.