Thoughts on Simpler Responsive Mobile Design and Viewport Width

By North Street, A Creative Studio

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:
Screen Shot 2015-08-19 at 11.16.59 AM

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:
Screen Shot 2015-08-19 at 10.55.10 AM

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.

More Notes

London Biedron Header

Team Spotlight: London Biedron, Client Development Specialist

Rebrand

How to Roll Out a Rebrand

12 Mood Boards to Inspire Your Rebrand