Viewport?

[Bob Chapman]

I'm using NOF 2015 and have done the upgrade. I am trying to make my site mobile friendly and (think) I need to insert meta name="viewport" content ="width=device-width, initial-scale=1" but I don't know how to do this. I have found the meta tag tab on page properties, but there is no 'viewport' option. Do I need to get viewport from somewhere else and add it to NOF? I've read as much as I can find but don't really understand much of it. Help please.

Bob

[antonsvideo]

click anywhere in the masterborder to focus the property palette

click the html button

select head inner and paste the entire tag starting with < and ending with >

however, I doubt that the viewport tag alone will please google

[Bob Chapman]

Thanks Anton,

I've done it, but you are right. Google still wants more. I need to read more and experiment, but thanks for getting me over that hurdle.

Bob

[franko]

There is much, much more to making a responsive web site than simply adding a viewport tag. You need to design the content on a grid such that each block slides below the next in the correct order to make the content meaningful at smaller viewport sizes. You need to write the appropriate media queries. You need to set breakpoints and optimise your images accordingly. I'd suggest two things: 1. Google responsive web design and educate yourself on what is required. 2. In the meantime, use NoF to design a mobile and/or tablet version of your website and use a selection script to send the visitor to the appropriate page. There are many scripts available on the internet.

I usually only design a 360px wide variant as I find these days most tablets have such high resolution they can display the desktop version quite adequately, unless you insist on making web pages at 1980 px width, in which case you might want a couple of other variants. However, I still design web sites at 960px width floating in the centre of the browser window which I find more than adequate for all screen sizes above about 640px; the 360 px version takes care of those smaller.