The best screen width to design to?

Mobile
1

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

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/bryanrieger/rethinking-the-mobile-web-by-yiibu

3

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

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

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

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

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%.

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

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

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.

10

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.

11

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

There are several articles which have addressed this. See the “Mobile Makeover Guidelines” section of my resources page: http://iphonedevlog.wordpress.com/phonegapcordova-crib-sheet/

Also check out responsive web design: http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

13

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

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

15

If you not using fixed dimensions for anything how do you handle icons and photos?

16

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

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

18

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 1366×768 and for desktops it varies for screens under 20″ (anything more than 20″ is 1920×1080).

19

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.

20

“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.”