Thought on screen sizes for Tablets and Phones

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.

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.

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.

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.

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.

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

Quote:

---

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.

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?

Quote:

---

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

Quote:

---

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.

Quote:

---

Originally Posted by Arpeggio

So a 320x480 image on an iPhone4 would only fill half the screens area (?)

---

No, the iPhone browser treats the screen as though the resolution is 320x480 even though it's double that. The browser would take the 320x480 image and expand it to fill 640x960. If you told the browser the image should fit in 320x480 and supplied it with a 640x960 image it would show the 640x960 image in all it's glory.

Quote:

---

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?

---

Yes, the computer doesn't care how big the pixels are.

Quote:

---

industry standard resolution limits

---

I have no idea what that means. There are no limits.

I'm not sure what your last point was. The table I gave a link to indicates the actual sizes and resolutions, it can never be definitive because new device come along all the time. All we can be sure of knowing is that the browser will have a display area of some size. From our point of view the actual resolution of the screen doesn't matter quite so much, but we can provide higher quality graphics to make use of any enhanced resolution.

It is complicated.

I just meant what resolution was the maximum that could be achieved at that time if there is such a thing. I suppose it wouldn't be as much an issue with the screen treated as 320x480 and scaling everything between 320x480 to 640x960 to fill the screen, If I've understood this right.

So if I make a website version at 640x960 to suit that, then I would need to make the content and buttons large and spaced apart enough for a person using a screen with a physical width of 56.1mm (iphone4 screen width apparently) regardless of how 640x906 looks on the computer monitor that I am using to create the website!?

I wonder if a website or image that is larger than 640x960, on the iPhone4, would be scaled down to fit the screen and appear smaller than intended, or would it go off the edge of the screen?

Certainly is complicated!

[QUOTE=Arpeggio;523177]I just meant what resolution was the maximum that could be achieved at that time if there is such a thing. I suppose it wouldn't be as much an issue with the screen treated as 320x480 and scaling everything between 320x480 to 640x960 to fill the screen, If I've understood this right.

So if I make a website version at 640x960
No, design the phone website for 320x480, which is what safari sees things at. Xara now has an option for generating graphics at higher resolution for retina-type screens.

make the content and buttons large and spaced apart enough for a person
http://www.lukew.com/ff/entry.asp?1085
Apple recommends touch areas of at least 44points ( 44 pixels on your web design ).

I wonder if a website or image that is larger than 640x960, on the iPhone4, would be scaled down to fit the screen and appear smaller than intended, or would it go off the edge of the screen?
Scrollbars.

Certainly is complicated!
It can be.

Thanks. Will bear all this in mind when using WD10. Am exited about making dynamic responsive websites.