Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Mobile website menu

  1. #1
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    Location
    South Wales, UK
    Posts
    554

    Default Mobile website menu

    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?
    Click image for larger version. 

Name:	Mobile Menu.JPG 
Views:	125 
Size:	29.3 KB 
ID:	2569
    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)

  2. #2
    Senior Member franko's Avatar
    Join Date
    Apr 2010
    Location
    Tasmania Australia
    Posts
    2,549

    Default

    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.

  3. #3
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    Location
    South Wales, UK
    Posts
    554

    Default

    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?
    Last edited by gprit; 12-15-2016 at 10:44 AM. Reason: added information

  4. #4

    Default

    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 !!)

  5. #5
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    Location
    South Wales, UK
    Posts
    554

    Default

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

  6. #6

    Default

    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.
    Last edited by Senior Paper Monitor; 12-15-2016 at 09:36 PM.

  7. #7
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    Location
    South Wales, UK
    Posts
    554

    Default

    No...I entirely understand Blisk - I am just baffled why, when I have created a simple page on NOF 2015 (and tried on separate site) that is 320 x xxx it does not fill eg iphone 4/5.
    It doesn't fill the screen in Blisk and it doesn't fill it on a real iphone 5 either (see post 3).....
    Last edited by gprit; 12-16-2016 at 09:56 AM.

  8. #8

    Default

    I think you will find this is to with pixels and points (which made my head hurt), which is part of the reason I rave on about Blisk- which provides what the eye is going to see on the device.

    A little light reading - http://blog.fluidui.com/designing-fo...d-resolutions/ (don't blame me if your head also starts to hurt).

    A one size fits all solution doesn't seem truly workable (although I believe it gets your google SEO points) which is why a resizing grid solution between breakpoints seems the only real answer.
    Last edited by Senior Paper Monitor; 12-16-2016 at 09:46 AM.

  9. #9
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    Location
    South Wales, UK
    Posts
    554

    Default

    Will read through later as I am just going out....but as the article says....original iphone is 320 pixels wide - and the NOF page/site I created was 320px wide,
    and if you look at the Page Source you can see it is (ok) 321px width.

    This is why I cannot understand why it does not fill the iphone simulated or real screen. I don't see anyway in NOF 2015 to set the width to Points (pt).

    I suppose I can simply make the NOF page as wide as it needs to be to fit which phone(s) are most popluar.....!
    Later:
    ....Which is what I did after reading the link from Post 8 - have read a bit about mobile websites but never come across that before - thank you.
    Anyway in practical terms.... for iphone 6 ....375px x 667px (and really all small group phones) the NOF page needs to be set to around 1000px x 1750px to fit the screen. The text on the pages is then increased in size to between 36 and 48px to display properly.

    Never come across anywhere that says that before - hope it helps others..!!
    Last edited by gprit; 12-17-2016 at 09:49 AM.

  10. #10
    Senior Member
    Join Date
    Sep 2010
    Posts
    136

    Default

    Quote Originally Posted by gprit View Post
    Will read through later as I am just going out....but as the article says....original iphone is 320 pixels wide - and the NOF page/site I created was 320px wide,
    and if you look at the Page Source you can see it is (ok) 321px width.

    This is why I cannot understand why it does not fill the iphone simulated or real screen. I don't see anyway in NOF 2015 to set the width to Points (pt).

    I suppose I can simply make the NOF page as wide as it needs to be to fit which phone(s) are most popluar.....!
    Later:
    ....Which is what I did after reading the link from Post 8 - have read a bit about mobile websites but never come across that before - thank you.
    Anyway in practical terms.... for iphone 6 ....375px x 667px (and really all small group phones) the NOF page needs to be set to around 1000px x 1750px to fit the screen. The text on the pages is then increased in size to between 36 and 48px to display properly.

    Never come across anywhere that says that before - hope it helps others..!!
    Did you ever solve this problem of trying to get a narrow page to fill the iPhone screen width? Im trying with a 540px page and it just stays small.
    Example at this time of writing here: http://www.solarlightcap.com/html/ebuy.php

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •