Results 1 to 2 of 2

Thread: Optimal Tablet and Smartphone/Mobile Device Screen Width

  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    29

    Default Optimal Tablet and Smartphone/Mobile Device Screen Width

    Hi,

    Would anyone have optimal estimates for screen width (in pixels) for a website designed mainly for a) tablets and b) smartphones/mobile devices.

    It seems 320 might be good for smartphones/mobile devices.

    This is probably going to be a stupid question but I was just thinking, for a website designed for either a tablet or smartphones/mobile devices, in general the design will be much thinner and longer relative to a Full Size computer screen and be mostly text. For the website I am going to try and port I have the Navigation Buttons on the left hand side of the site. This may be stupid but can the buttons be made to display vertically instead of horizontally? As stupid as it sounds, that would reduce the area needed by about 80%.

    Instead of

    |---------------|
    | Homepage |
    |---------------|

    |----|
    | H |
    | o |
    | m |
    | e |
    | p |
    | a |
    | g |
    | e |
    |----|

    There is a description on p.266 of the User Guide but that seems to determine whether the buttons are horizontal along the bottom of the top MasterBorder or vertical along the left MasterBorder.

    Thank you
    Philip

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

    Default

    320-360px is ideal for a smartphone; however, tablets vary as, for example, tablets with Apple's Retina screen (manufactured for them, ironically, by Samsung) is a double-pixel resolution display and so has a 2048px horizontal resolution while single pixel resolution displays have only around half that.

    I would strongly recommend reading up on Responsive Web Design. This is the concept that a web site should be liquid in design to adjust itself to display well on whatever device is being used. There are a number of RWD boilerplates out there but no way of importing them into NoF at the moment. Sitepoint.com has a very good e-book on RWD, "Jump Start Responsive Web Design" that is reasonably priced, comprehensive yet simple to follow.

    NoF also has a few smartphone templates in its styles that you can use to develop a smartphone site. YOu can then develop a tablet sized version and a desktop browser version and use javascript and/or .htaccess to direct the user to the appropriate site based on their screen size.

    They're your various options. Whichever way you go, responsive or multi-sized sites, it's a lot of extra work but in these early days of designing for a range of different sized devices that's the way it is. Good luck with your endeavours.

Tags for this Thread

Posting Permissions

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