Thought on screen sizes for Tablets and Phones

**Davidwh20123** · 24 February 2015, 09:41 AM

I was wondering if you guys had any thoughts about mobile variants on a responsive site. I have been playing around trying to develop alternative screen sizes for tablets and mobile phones.
Up to now, the three variants I have are:

Main desktop - 1100px (for use with flash)
Tablet - (portrait) 580px (landscape 960px) (for use with either wowslider or visual light box)
Mobile - 580px

The problem that I have is that I do not have any hosting packages to test on-line so I have to copy the site to the SD card on my tablet
The tablet in question is a Hudle 2 with a pretty decent screen 8.3 inch (1920 * 1080 pixels 273ppi) and the dimensions above fit the screen like a glove.
I have not be able to test on a mobile phone or a larger screen tablet like an Ipad yet and I was wondering what other people were using to cover all the bases regarding the various screen sizes.
If the sizes above are reduced much more then the main desktop variant comes into play in landscape mode on my tablet....and as you know flash is not supported on IOS or android and will not work.

Any comments will be much appreciated.

**Albacore** · 24 February 2015, 10:52 AM

Why don't you do it and test your site on your own computer. I use Wordpress a lot and always test my PHP and sites on my old computer before going live on my host sites and use XAMPP to do this. Now I have not done this from any Xara developed sites so I wouldn't know if there would be any problems but wouldn't think so. You could even use windows to do this as well as you don't need a database. Do as search for "testing a website on computer" as there is a lot of help here.

**xtom** · 24 February 2015, 12:12 PM

Usually I would try to stick to two variants at most, Desktop/Tablet & Mobile and as you say use javascript sliders instead of flash. By the way do you not have a free hosting account with Magix to test online, I think it comes free if you bought a Xara program.

**pauland** · 24 February 2015, 12:25 PM

Just remember that people's fingers don't shrink according to screen size, so your buttons on the mobile variants need to be big enough for people to click reliably and you will have no mouseovers.

Many people on TG create the phone version as though it was a small desktop, when in fact it should be a focused version, with only the most important content.

**Arpeggio** · 25 February 2015, 10:46 AM

I'm learning about this recently. I'm thinking of making 3 versions for my website too, because the graphics & layout of my content would be compromised on tablet screens for a version that works on smartphone screens also. If you get your website online please post it I would like to see.

**Donald33** · 26 February 2015, 02:16 AM

Do more research and experimenting before locking into a set pixel width and more than one variant. Many people are using just one breakpoint between 400 and 600 or the standard 320. Most tablets will show a desk top layout fine if not too busy. And devices like the I-phone/pad fit the page automatically at 960 and above. At what point does your layout look bad, that's where the variant needs to be, and it might be different on every page. If your making a separate site for phone then "scale to fit" or "supersite" with scrolling pages may be an option if limiting content. Others say design for mobile first or just one size fits all. The fox news weather site here in Grand Rapids looks kind-of grade school on my 30" monitor at work but is ok on my I-phone 6 and smaller monitors at home. At this point there appears to be no right or wrong about web design, only your choice or your clients. And plenty of people to support every kind of layout possible and their way is the only correct solution, of course. So think about content for any given layout, what and why are you trying to convey. And if it takes longer than a few seconds to load most people will move on. Put the heavy duty stuff on another page other than the home or opening page.

Just a few thoughts.
Donald

**Egg Bramhill** · 26 February 2015, 05:05 AM

Just remember that people's fingers don't shrink according to screen size, so your buttons on the mobile variants need to be big enough for people to click reliably and you will have no mouseovers.

Oh, I wish almost all designers would bear this in mind Paul. How many sites do you visit on a mobile that are just downsized versions of their desktop counterparts and you end up pinching and scrolling just to see the section you want with the text at a readable size.

**Arpeggio** · 26 February 2015, 09:19 AM

I have a feeling this is a stupid question but here goes: What if a phone came out with a 3.5 inch wide screen and 1100px resolution?

**pauland** · 26 February 2015, 09:38 AM

Originally Posted by Arpeggio

I have a feeling this is a stupid question but here goes: What if a phone came out with a 3.5 inch wide screen and 1100px resolution?

It's not a stupid question at all.

The software screen resolution used by the browser may not match the raw resolution available on the screen.

For example, the iPhone4 has a screen with a resolution of 640x960, but the browser will see that screen as 320x480.

It sounds crazy, but it isn't. Text rendering uses the extra pixels to render text more finely and images can still use the native resolution to show more detail.

So an image sized at 100x100 on an iPhone web page, could actually use an image sized at 200x200 for the display. If a 100x100pixel image was supplied for that image, safari would stretch it to match the raw resolution!

This web page shows how iPhones map screen resolutions to virtual browser pixels (called points): http://www.paintcodeapp.com/news/ult...ne-resolutions

(forget that the page is trying to sell some software).

**Arpeggio** · 26 February 2015, 07:05 PM

Originally Posted by pauland

It's not a stupid question at all.

The software screen resolution used by the browser may not match the raw resolution available on the screen.

For example, the iPhone4 has a screen with a resolution of 640x960, but the browser will see that screen as 320x480.

It sounds crazy, but it isn't. Text rendering uses the extra pixels to render text more finely and images can still use the native resolution to show more detail.

So an image sized at 100x100 on an iPhone web page, could actually use an image sized at 200x200 for the display. If a 100x100pixel image was supplied for that image, safari would stretch it to match the raw resolution!

This web page shows how iPhones map screen resolutions to virtual browser pixels (called points): http://www.paintcodeapp.com/news/ult...ne-resolutions

(forget that the page is trying to sell some software).

Complicated stuff, took a while getting my head around that. So a 320x480 image on an iPhone4 would only fill half the screens area (?)

Would I be right in saying no computer has ever known the real world size of its monitor screen, just the resolution it puts onto it?

If I've understood this right then for a content creator it doesn't seem future proof, if say a tablet comes out in year 2017 breaking the industry standard resolution limits. Perhaps if a protocol was made between the physical screen size and computer device I guess you could just use the same common resolution variants from year 2014-2015 and just enter in your preferred physical screen sizes for change points instead.