SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question The best screen width to design to?

    Hi all,

    I am now designing a mobile site, my question is what is the best screen width to design and build to?

    Should I use 320px x 480px?

    or

    640px x 960px?

    I understand that non-retina display iPhone have a resolution of 320px x 480px however retina iPhones have twice that. Should I build my website to the retina resolution and then allow non retina displays to just scale the website down, as they do with traditional sites?


    Thanks for any help clarifying the issue.

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Most people who browse the internet from their mobile devices are not using an iPhone.
    Think on that for a moment. Here ponder on this: http://www.slideshare.net/bryanriege...e-web-by-yiibu
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,819
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by garydavison View Post
    I am now designing a mobile site, my question is what is the best screen width to design and build to?
    If you don't mind a bit of extra work, you can use media queries to serve a different stylesheet to larger devices.

    If you want to have just one mobile stylesheet, I would forget about designing for a width altogether. Just give a linear page, flowing from top to bottom. That will work on any CSS-capable device without having to worry about the screen size. If people don't like that, you can give them the option to switch to the "regular" site and have the device scale it and adjust it as necessary.

    Personally, I am quite happy to use "regular" sites on my smartphone (basic Nokia), as long as they don't go overboard with scripts, fancy-pants styling and large images etc, and allow the phone to adjust the design as I go. I often find this easier to work with, especially for sites that I'm used to using on a PC, because then I know exactly where everything is, and don't have to worry about the site being different.
    (That's my own view, and may or may not be shared by other people...)

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels. Suddenly, we’re all designing for two different screens.

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the responses, I appreciate that the iPhone isn't the only smart phone on the market, and if you look at the stats it isn't the market leader. However rightly or wrongly the general perception is that it is. And I have certainly found that when pitching mobile website to clients the iPhone market is the one that they are most interested in.

    I was just curious what resolution everybody designs and builds to? I assuming most of us use every Photoshop or Fireworks to mock up a design, what resolution do you use at that point? And is it the same when you come to build the site. I appreciate that you could ignore width as Stevie D suggested, however what about image assets what size do you build them to, do you use CSS to constrain the max width?


    Thanks
    Gary

  6. #6
    SitePoint Member MetaMago's Avatar
    Join Date
    Nov 2011
    Location
    Stuttgart, Germany
    Posts
    4
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Gary,

    for a few years now I am managing to build mobile friendly (I call them "universal") sites. My aim always is to keep every site I build as fast loading as possible. In case of the iPhones I decided to serve only the "old" 320 px width (always taking portrait view as standard orientation) what refers to image setup. This is because I think that all this retina obsession is too much to take it for.. Retina capability is perfect for rendering sharp and detailed pretty small text, but the classical resolution is enough for website images, I think. So I acustomed to give all the real images on an "universal" site a real pixel width of maximum 300 px (because I usually give the linear site on the iPhone a margin of 10 px each side). That is, for instance: a 3 column screen design (320 width for each column = 960 total) has teaser images of that size too. If larger images for reader pages are required on the screen I load them as CSS background images only on the regular screens, and on the iPhone I use the same small (already cached) teaser image... Sorry, my english is not so perfect at the time, but I hope you got me..!?

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most people who browse the internet from their mobile devices are not using an iPhone.
    Think on that for a moment. Here ponder on this: http://www.slideshare.net/bryanriege...e-web-by-yiibu
    That's a very good slideshow and should be taken seriously. My market is the UK only for one of my sites and the iphone accounts for 45% of mobile device visits, followed by the ipad at 9%.

    Quote Originally Posted by rushpcb View Post
    For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels. Suddenly, we’re all designing for two different screens.
    Yes I have this dilemma at the moment. It's not as if they have doubled the actual width of the device, that is still the same as before.

    I am a bit confused by it: Does that mean we can now use a larger physical image size or should we keep to the 300/320 max for this device?

  8. #8
    Non-Member
    Join Date
    Apr 2010
    Posts
    298
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    Most people who browse the internet from their mobile devices are not using an iPhone.
    Think on that for a moment. Here ponder on this: http://www.slideshare.net/bryanriege...e-web-by-yiibu
    In the US, iPhones are the top mobile browser devices in terms of shear numbers. I think if you are to make a mobile version of a site, optimize it for the iPhone.

  9. #9
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by grannygotgoat05 View Post
    In the US, iPhones are the top mobile browser devices in terms of shear numbers. I think if you are to make a mobile version of a site, optimize it for the iPhone.
    Wrong on several levels. iPhone is not the top browser. Nor should you optimize for one phone. Thats like saying "Best viewed in IE 6" DO NOT DO THAT.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  10. #10
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,042
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Just recently I created some mock-ups in Illustrator for a mobile site and the dimensions used where 356 x 460. That seems to establish common proportions pretty well. Though the height could really be anything and change as necessary. I have several views that have a larger height so that the wire frames are refined as they can be to take the guess work out later down the road. Though in all this you have to remember that dimensions, font-size, colors, etc can change based on device. So all you can really achieve with wire frames are content, layout and general branding in regards to colors perhaps some small graphics. Just fyi because I know some one will come around and bash my method saying something like "the web isn't fixed" – no sh*t Sherlock. To that I say everything isn't as simple as a small static site – larger scale projects require taking time to understand every aspect in the simplest form before investing development time in them so you don't find out weeks or months down the road something was overlooked that could have easily been considered had there have been visual mock-ups of page flow and structure. Though there really isn't a whole lot creative that you accomplish with a phone given the availability of space and patterns people are familiar with. Every mobile site pretty much follows that standard application like work flow and feel for useability reasons and hardware limitations.
    The only code I hate more than my own is everyone else's.

  11. #11
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    Wrong on several levels. iPhone is not the top browser. Nor should you optimize for one phone. Thats like saying "Best viewed in IE 6" DO NOT DO THAT.
    I agree with this. You should try and cover as many devices as possible. I was just stating some stats for my site and even though the iPhone is the top browser in terms of visitors, I would not narrow my options by focussing on that device alone.


    Just recently I created some mock-ups in Illustrator for a mobile site and the dimensions used where 356 x 460.
    That's good info. I was hoping for some guidance on the maximum image width; the actual file size width to use; would it be 356, 320, 300px for example?
    I am aware that you can serve different size images based on the device detected, but as a baseline starting point if I was to kick-off with one image size, what would you recommend?

  12. #12
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,313
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There are several articles which have addressed this. See the "Mobile Makeover Guidelines" section of my resources page: http://iphonedevlog.wordpress.com/ph...va-crib-sheet/

    Also check out responsive web design: http://simonmacdonald.blogspot.com/2...-multiple.html

  13. #13
    SitePoint Zealot
    Join Date
    Apr 2003
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if creating a 320 pix, FIXED width design.
    Won't the higher resolution mobile, ZOOM it to accommodate screen anyway ?

    I hesitate between a fluid and fixed width design, but realized that mobile browser will resize (zoom in / out) the site anyway, to I might just go for fixed width.

    Thoughts ?

  14. #14
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Hi Koros,

    Using media queries as Stevie D suggests means that you don't have to worry about screen zoom, as the browser adapts the site to the screens default display size. I use media queries and design for @media screen and (max-width: 400px) {} and @media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) {}; this combined with fluid designs and no fixed width/height sized items anywhere, seems to work well on a wide range of smart phones (even 3-4 year old models);

    Regards,
    Steve
    ictus==""

  15. #15
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,042
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ServerStorm
    Using media queries as Stevie D suggests means that you don't have to worry about screen zoom, as the browser adapts the site to the screens default display size. I use media queries and design for @media screen and (max-width: 400px) {} and @media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) {}; this combined with fluid designs and no fixed width/height sized items anywhere, seems to work well on a wide range of smart phones (even 3-4 year old models);
    If you not using fixed dimensions for anything how do you handle icons and photos?
    The only code I hate more than my own is everyone else's.

  16. #16
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,819
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by oddz View Post
    If you not using fixed dimensions for anything how do you handle icons and photos?
    Small images will need to appear at their natural resolution. Large images should ideally be pre-scaled to several different sizes, appropriate to the different media-query sizes. Obviously you fix the size of the images, but the rest of the sites is built around them.

  17. #17
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Small images will need to appear at their natural resolution. Large images should ideally be pre-scaled to several different sizes, appropriate to the different media-query sizes. Obviously you fix the size of the images, but the rest of the sites is built around them.
    Hi, this is exactly how I handle images, I don't let the scaling re-interpolate the images as they will look bad.

    So, when a media query size dictates that the layout will break or look bad if the image is not resized, I create a new image of that size/layout. For the phone sizes, I generally work harder at streamlining the images so that they load fast and don't hog too much data on people's mobile packages.

    I guess to oddz question, the images do get fixed sizes, what does not generally get fixed sizes is contain blocks of HTML, so that the natural flow of the page wraps these blocks underneath each other. If using mulitiple columns, when the browser window shrinks I drop columns and continue with the natural flow.

    Regards,
    Steve
    ictus==""

  18. #18
    Non-Member
    Join Date
    Feb 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ServerStorm View Post
    Hi, this is exactly how I handle images, I don't let the scaling re-interpolate the images as they will look bad.

    So, when a media query size dictates that the layout will break or look bad if the image is not resized, I create a new image of that size/layout. For the phone sizes, I generally work harder at streamlining the images so that they load fast and don't hog too much data on people's mobile packages.

    I guess to oddz question, the images do get fixed sizes, what does not generally get fixed sizes is contain blocks of HTML, so that the natural flow of the page wraps these blocks underneath each other. If using mulitiple columns, when the browser window shrinks I drop columns and continue with the natural flow.

    Regards,
    Steve
    Someone brought up your chart in a discussion about typical screen resolutions. I found it quite peculiar at the first sight and after some thinking I have come to realize that it provides very wrong data.

    The culprit is the top 3 resolutions, which account for over 42% of your total visits, and which are not very common in general. There is only 1 brand that offers them as standard (not upgrades) on its devices: Apple. Your No. 1 is standard on 13″ MacBooks, No. 2 is on 15″ MacBook Pro, and No. 3 is on either 15″ MBP or older 17″ MBP. Meanwhile, all those devices account for 20% of worldwide market at most.

    That being said, your chart proves one important point: the majority of modern screens are wide with the aspect ratio either 16:10 or 16:9. The most common current resolution for laptops is 1366768 and for desktops it varies for screens under 20″ (anything more than 20″ is 19201080).

  19. #19
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Butler3 View Post
    Someone brought up your chart in a discussion about typical screen resolutions. I found it quite peculiar at the first sight and after some thinking I have come to realize that it provides very wrong data.

    The culprit is the top 3 resolutions, which account for over 42% of your total visits, and which are not very common in general. There is only 1 brand that offers them as standard (not upgrades) on its devices: Apple. Your No. 1 is standard on 13″ MacBooks, No. 2 is on 15″ MacBook Pro, and No. 3 is on either 15″ MBP or older 17″ MBP. Meanwhile, all those devices account for 20% of worldwide market at most.

    That being said, your chart proves one important point: the majority of modern screens are wide with the aspect ratio either 16:10 or 16:9. The most common current resolution for laptops is 1366768 and for desktops it varies for screens under 20″ (anything more than 20″ is 19201080).
    The fact is, that display sizes are changing so rapidly that designing for just one size - outside of kiosk or certain specific business applications where people have standardized hardware - that it no longer makes that much sense to develop for one size. Even though people may connect using that ultra-wide dazzling next generation large display doesn't me that connections won't happen on an iphone 2 or adroid 2.1.

    Design responsively. learn how to use CSS media queries, JavaScript to rearrange most important content blocks on small devices and build semantic code.
    ictus==""

  20. #20
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,313
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://adaptive-images.com/

    "Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques."
    Steve Husting

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,593
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by StevenHu View Post
    "Adaptive Images detects your visitor's screen size"
    Surely it detects the browser viewport size rather than the screen size. There wouldn't be much point in rendering the web page so it would fill the entire screen if the browser is only one of several applications visible on the screen at the same time. It would also mess up if the person had multiple screens and had the browser open across more than one screen.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  22. #22
    SitePoint Member MetaMago's Avatar
    Join Date
    Nov 2011
    Location
    Stuttgart, Germany
    Posts
    4
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Surely it detects the browser viewport size rather than the screen size. There wouldn't be much point in rendering the web page so it would fill the entire screen if the browser is only one of several applications visible on the screen at the same time. It would also mess up if the person had multiple screens and had the browser open across more than one screen.
    Hi there!

    Exactly my case! This is what I also don't like with Adaptive Images.

    Wouldn't it be possible to detect the actual size of the browser window - at least in the moment of requesting the page once?

  23. #23
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by garydavison View Post
    ... what is the best screen width to design and build to? ...

    [(]Thanks for any help clarifying the issue.[)]
    And the answer is: don't. There are two vastly different kinds of "mobile web", unfortunately spelled the same way. They need to be treated quite differently.

    Many cellphone browsers don't have the smarts to make layout decisions (in particular they often don't calculate widths correctly), so for them you need to produce a fixed-width layout (120px? 160px?). They also have minimal or no Javascript, and minimal or no CSS. You should make sure your website looks decent and works with no Javascript nor CSS at all.

    Smartphones and tablets on the other hand are an entirely different breed. They have plenty of smarts, and can be relied on to correctly make complex layout decisions themselves. For them you want to produce a "responsive" (or "liquid") layout. They all have quite usable Javascript and CSS, which you can (and should) assume is available to you. (In fact the Javascript and CSS support is often better than you'd find on an average-aged desktop.)

    In other words, you should use fixed with for entry-level devices, but you should not use fixed width for the higher end mobile devices (even though the same words "mobile web" are used for both).
    Last edited by ckollars; Apr 24, 2013 at 09:26. Reason: fix typos

  24. #24
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Surely it detects the browser viewport size rather than the screen size. ....
    Bzzt.

    Both are possible. It's up to your design preferences which one(s) to use where. Having a layout change as you grow and shrink the window might be a good idea ...or might be something you want to avoid. For giving different potential layouts to different sizes of devices, you probably want to test against the screen size rather than the window size.

    With CSS Media Queries you can do either one: things like max-width check against the window size and things like max-device-width check against the screen size.

    Likewise in Javascript both are available (albeit with a little more trouble to be completely browser-independent) For finding out the size of the screen, things like window.screenX are supported pretty much everywhere. For finding out the size of the window, it's likely something like .innerHeight, but different browsers attach it to the body or the documentElement, or even somewhere else, and sometimes the variable is named something different.

  25. #25
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,593
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ckollars View Post
    Both are possible.
    But the screen size is irrelevant except if you are using JavaScript to try to open a new window. Web pages can only display in the browser viewport - they can't visibly extend beyond it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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