Screen resolution testing

Question

Hi everyone,
I'm wondering if anyone has any thoughts on this - and perhaps suggestions of resources to use.
Re: screen resolution testing for website display - I find that the various online tools all behave in a sort of strange way - and perhaps I'm not "getting" it.  
Example - if I test my old website, www.robcosh.com on any of these services to see how it displays, selecting iPhone 5 as the size simply means they create a tall rectangle and use that as a window to view my page - where I would have to scroll up and down, or sideways.   This does not represent the reality in any way, shape or form!   My iPhone 5 shows my entire site whether it's in landscape or portrait position, and it scales automatically to fit the page.  
With that, it seems these tools are useless to see how a site might behave with various screen resolutions.
Can any comment on this, and point me to tools that are accurate which I can trust the output from in order to evaluate my sites' appearance across a variety of resolutions?
Many thanks!
Rob

Answer 1

Designing between the traditional desktop computer platform and other types of devices, like smart phones, is not very simple at all.
While it is true any modern smart phone's web browser will automatically scale a "desktop" web site to fit its screen the phone user must use pinch-zoom techniques to make the page useful at all. When a desktop web page layout is scaled to fit the phone's screen the content on the desktop layout will often be too tiny to read and the navigation elements are too tiny to select with a finger. This is one of the reasons why so many web sites have separate "mobile" versions.
In recent years smart phones have radically increased screen resolution. Plenty of Android-based phones have 1920x1080 full HD resolution screens, some support higher resolution levels like 2560x1440. The phone screens are still the same physical size (big for a phone screen, but tiny in relation to modern desktop computer monitors), but they're packing in a lot more pixels into the same sized piece of screen real estate. This is complicating the situation for designing a mobile version of a web site. Some really old phones still in use have pretty limited resolution while some newer phones have better than 1080p resolution.
The traditional desktop platform isn't standing still either. A regular 960 pixel layout on its own probably isn't going to cut it anymore. HiPDI techniques are recommended to bridge the gap between the resolution levels of older computer monitors and the HD and better than HD settings used in newer monitors.
Solution? A fair amount of extra planning and work. Adobe Muse doesn't fully support a fully "responsive" web design approach, but it does support HiDPI and allows for separate mobile and tablet site generation. Vector-based graphics will grow in importance. SVG images can cleanly scale for a variety of screen sizes and work great in HiDPI layouts. But I think Adobe needs to do more work improving SVG support within Muse and Illustrator.