In order to clearly understand the process of how to build a responsive design website, there are two concepts that must be addressed:
- What is the difference between a mobile device that is responsive and one that is mobile friendly?
- The meta tag that will make or break the functionality of a responsive program.
‘Viewport’ is the term that represents the visible area of a computer screen, any screen, including mobile devices.
Initially, the viewport designation was made to represent just the computer desktops, which maintained a fixed width and height, as mobile devices were a thing of the future. When the Internet started to transform into the World Wide Web and smartphones (and tablets) were materializing to become the primary ‘viewport’ for searching the web, the desktop fixed width and height forced the mobile phones to scale down (push to size) the entire website on those small mobile screens. This is what’s called mobile friendly.
Mobile friendly phones were the accepted, yet not a convenient solution, as readers had to either bring the phones close to their eyes to read the small print or to ‘pinch and pull’ the screen so that the fonts would become a visible size.
Adding responsive design code to mobile devices allowed the browser to read commands that told it essentially to alternate the website in a way that it would make be easily viewable and readable, subsequently, avoiding the small print and the ‘pinch and pull’ inconvenience.
Some of these alternate functionalities are: increasing the font size and providing a more convenient navigation menu.
Adding ‘Viewport’ to the Meta Tag
Entering the meta Viewport tag element will allow the mobile device’s browser to control its page’s dimensions.
The first attribute is “width=device-width”, which will read the screen-width of the device and adjust the website accordingly.
Next is “initial-scale=1.0” which gives it a default scale of 1.
Together, the tag is: <meta name=”viewport” “width=device-width, initial-scale=1.0”>
Without the meta viewport element, the mobile device will not be responsive.
Examples follow: (Note: Must be viewed on a mobile device)
This is an HTML page with the Viewport meta element.
This is an HTML page without the Viewport meta element.
Below is a side by side comparison.