This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Thoughts on Simpler Responsive Mobile Design and Viewport Width
Currently, when taking a Desktop-based design and coding it to be responsive, we typically add this viewport line:
<meta name="viewport" content="width=device-width, initial-scale=1">
Then simply work backwards, making the body 100% and adjusting things down to the smallest breakpoint, 320px (iPhone). Usually at that width though, fonts and paddings will be too large and further adjustments will be necessary.
A different approach, would be to simply code the design to have a minimum width of 640px, then use javascript to inject a viewport tag that sets the width to 640px. This will essentially put the device into “Zoom” mode, meaning that the text and padding will still be proportional.
An Excellent example is this website:
http://guildisgood.com/
Here’s how it looks, at it’s smallest possible width of 640px, which is how it would look on a mobile device:
If instead, it was set to “device-width” and allowed to go down to 320px, it would look like this, with type and padding that is too large:
So how do we achieve this result? Pretty simply. Set the minimum width to 640px in your css, and add the following script at the top of the page:
if (screen.width < 640) { var mvp = document.getElementById('viewport_meta'); mvp.setAttribute('content','width=640'); }
About north street
We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.