Monday, April 6, 2015

responsive design - Are there devices narrower than 320px (and data on their usage for web browsing)?



Most organisations I know of when testing responsive designs (and responders to the question What is the smallest screen size you design for) use 320px as the narrowest device width they test for, when testing if layouts still make sense, images are still clear, and any responsively-scaling interactive items are still clickable.


As far as I can tell, this is based on the fairly arbitrary assumption that there are no popular devices in widespread use for web browsing that have a narrower width than an old iPhone held in portrait orientation ("width" measured in virtual/CSS pixels, see below).


Is this true? I'm looking for evidence on which to base such a rule of thumb - particularly for building new sites where no user data exists yet.


The ideal would be some kind of device-size equivalent of browser usage stats. Failing that, info on devices that are this narrow plus relative sales figures would also be a useful rough gauge.




Obviously, if you have a large, established site, you could get data about existing users from Google Analytics and similar, but this is no use if:



  • Your site is new or under development

  • You're trying to reach out to a new demographic

  • You're aware that some devices are underrepresented due to past poor usability



To quickly avoid a common confusion, this is 320px virtual pixels aka "CSS pixels" aka "density independent pixels" etc. Most modern devices have many more actual physical pixels - device pixels - than this (pixel density / "retina display"), but interpret content as if the width was the virtual pixel width so that it doesn't become tiny.



Answer



I have used the following listing to justify a minimum of 320 wide:


https://viewportsizes.mattstow.com/


While it's not completely exhaustive, it's expansive enough to make the point that there are only a few phones in the last few years that have <320px screens, and I have never had anyone argue that the number isn't de minimis.


If you're doing this for responsive layouts, I usually do set a <320 viewport font style, but set the minimum body width at 320... those almost nonexistent users can damn well scroll :-)


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...