Mobile website menu

[gprit]

OK, while I try other responsive products I thought Ii might as well try and build a NOF site for use on a mobile.
Don't see too many issues in doing this, but I have two questions:
a) How do I get the 'bar' type menu to expand on pages as per attached?

b) what is the best way to detect what device is being used and to link to the mobile pages? (am building site 320 x xxx)

[franko]

Don't know the answer to the first question but as to the second, there are many selection scripts available on the internet that read the viewport size. Here's one resource; there are many others.

[gprit]

Many thanks Franko - not to worry too much about the first question, I have got around it.
The link is very informative (and takes time to read!) and I'm sure will get to work.

One interesting comment was why not make the mobile the default and then detect larger screen and redirect to desktop version.
As my client says that around 80% of her clients use mobile phones I might just do that!

Addendum....
http://www.libertybs.co.uk/clients/parkwood
or direct on mobile..
(btw the home page carousel images seem to have gone blurry - aware of that...)

http://www.libertybs.co.uk/clients/p...practic_m.html

For the moment I have just put a link from the the desktop version (RH side of Home Header) to two mobile pages (Home and About Us) to see layout.
Now....I don't have a mobile phone (luddite...) but when I look on my wife's iphone6 the page is very small on her screen, although the actual NOF page is 320px wide, which should FILL the screen?

Any thoughts why that is?

[Senior Paper Monitor]

gprit - can I recommend that you look at the 'Blisk browser' to help develop the mobile versions, particularly if you don't have a suitable smartphone in your pocket (I of course upgraded to smart phone, solely for website viewing during development a couple of days before discovering Blisk !!)

[gprit]

Ah...that seems useful! Still cannot fathom why my NOF 320 (ok 321px) webpages do not fill an iphone screen....!

[Senior Paper Monitor]

Which Iphone - (from Blisk) do you mean:

4 - 320 x 480
5 - 320 x 568
6 - 375 x 667
6 Plus - 414 x 736
7 - 375 x 667
7 Plus - 414 x 736

... that's before you consider other makes, let alone tablets !

The switching to another page on 'size X' solution may work in terms of 'google friendly. BUT something more sophisticated is necessary to give premium presentation on a variety of devices. I no longer use NoF for this reason. I (and most people I believe) prefer to use a combination of break points (the somewhat more sophisticated solution than divert on set size), combined with flexible grids that flex to fill the screen of larger devices or re-adjust content layout for smaller sizes within the range between breakpoints.

Blisk will show you what your current pages look like on a variety of devices.

Using blisk was without doubt my biggest single step in understanding how responsive really works - and how different solutions perform.