The minimum you should do for responsive design

Responsive design is a website design method that makes your website work on a variety of screen sizes/resolutions. The idea is that you don't have separate websites for mobile phones, tablets, desktops and TVs, but have a single design that scales appropriately.

...but I don't want to re-do my website just at the moment

Fine. But there is still just one thing you can try to see if it makes your existing website work better on a mobile device.

In the HTML code at the top of every page is something like this (you can view this in most browsers with a right-click, then left-click View source or similar):


<head>
	<meta charset="utf-8" />
	... more stuff here ...
</head>

To make your website mobile-friendly at the first level, add in a line after the charset (character set) line - as shown in bold below:


<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	... more stuff here ...
</head>

Incidentally, this can usually be done on the underling layout or master page, so you shouldn't have to trawl through all the pages individually.

It's good practice to have the character set (charset) directive first and then the viewport directive second.

Test it! This technique works better on some designs than others. If it doesn't work, then a new website structure will be required.

Other options for viewport

If your website is not going to function well below a certain pixel width, then you can effectively specify a minimum size and if the display is bigger than that, the page will accommodate it. In the example, the minimum width for sensible viewing has been set at 420 pixels:


<meta name="viewport" content="width=420, initial-scale=1" />

You can stop the user from scaling the page by adding and extra parameter, but this could cause paroxysms of rage if the user can't read the page at the scale you have specified.


<meta name="viewport" content="width=device-width, user-scalable=no" />

Browser support

Be warned that implementations of the viewport parameter may vary across browsers. We just have to live with it.