1247302 - Determine initially enabled devices from market research

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, defect, P1)

Description

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

The devices list will have some minimal set of devices enabled and shown in a menu out of a larger device DB.  Users can "promote" additional devices to the main list from other entries in the DB.

We should use market research data to:

* Determine devices to default enabled in the main, minimal set
* Add additional devices to the overall DB as needed

Comment 1

[Bryan Clark (DevTools PM) [:clarkbw]]

Attachment: BrowserStack - List of devices to test on.pdf

We reviewed a bunch of market sources which all give about the same information on company market share, but little information on the actual devices themselves.

http://www.gartner.com/newsroom/id/3169417
http://www.idc.com/prodserv/smartphone-market-share.jsp

However the browserstack team compiled a handy list of top current devices for testing purposes which is very much inline with our needs.  Attaching the PDF of the page for future reference purposes.

https://www.browserstack.com/test-on-the-right-mobile-devices

Comment 2

[Bryan Clark (DevTools PM) [:clarkbw]]

From the BrowserStack list the GROWING BUSINESS segment should provide a good set of default devices.

Here's that list:

# Phone
Apple iPhone 5s
Apple iPhone 6s
Apple iPhone 6Plus
Google Nexus 4
Google Nexus 5
Google Nexus 6
Samsung Galaxy S5
Samsung Galaxy S6
Samsung Galaxy Note 3
Nokia Lumia 520

# Tablet
Apple iPad Air 2
Apple iPad Mini 2
Google Nexus 7
Amazon Kindle Fire HDX 8.9

Comment 3

[Bryan Clark (DevTools PM) [:clarkbw]]

In addition to that list we should likely also include a couple "laptop" displays.  I'll try to find some data on popular desktop display sizes.

For example:

Laptop 1024x768
Laptop 1280x656

Comment 4

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to Bryan Clark (Firefox PM) [:clarkbw] from comment #2)
> # Phone
> Apple iPhone 5s
> Apple iPhone 6s
> Apple iPhone 6Plus

Added these iPhone devices to the list.

https://github.com/jankeromnes/devices/pull/6

Comment 5

[Bryan Clark (DevTools PM) [:clarkbw]]

Also there is now a page at http://jan.tools/devices/ for capturing device information

Comment 6

[Bryan Clark (DevTools PM) [:clarkbw]]

Here's the statscounter page on desktop resolutions:
http://gs.statcounter.com/#desktop-resolution-ww-monthly-200903-201602

These are the top three:

1366x768  30%
1920x1080 14%
1024x768  7%


There is a doubling of percentages with the resolutions here which captures almost 50% of the market.  I'm hesitant to not include the 1024x768 because it was so dominant but if we're short on room we could drop it.

Comment 7

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to Bryan Clark (Firefox PM) [:clarkbw] from comment #2)

> # Phone
...
> Google Nexus 4

According to viewportsizes a Nexus 4 is 384 x 598 (currently the devices.json lists width as 640)
http://viewportsizes.com/?filter=nexus%204
However according to phonearea it is 768 x 1280 with a 318 dpi which would be 384 x 640 with pixel ratio of 2 so I think its correct until we see otherwise.
http://www.phonearena.com/phones/Google-Nexus-4_id7531

> Google Nexus 5

Several sites confirm this to be
640 x 360 with 3 pixel ratio

> Google Nexus 6

A bit hard to find view port information for this one, it is not listed in the devices.json file.

According to gsmarena and phonearena
1440 x 2560 pixels (~493 ppi pixel density)
http://www.gsmarena.com/motorola_nexus_6-6604.php
http://www.phonearena.com/phones/Google-Nexus-6_id8626

Comment 8

[Bryan Clark (DevTools PM) [:clarkbw]]

Samsung Galaxy S5
https://github.com/clarkbw/devices/commit/6d12f00501ce9b1c51b5d8432eca19dca6324525

Comment 9

[Bryan Clark (DevTools PM) [:clarkbw]]

Samsung Galaxy S6
https://github.com/clarkbw/devices/commit/344333862df302bfc8cdc60b161d3078f88fc713

Samsung Galaxy Note 3 (already included in devices.json)
3 PR x 360 x 640

Comment 10

[Bryan Clark (DevTools PM) [:clarkbw]]

Nokia Lumia 520

There is lots of conflicting information on the Nokia Lumia 520.  
Our devices.json lists it as 1.4 PR 320 x 533 while other places list it as 1.5 PR 320 x 480.  I'm not sure which one is more correct.

Comment 11

[Bryan Clark (DevTools PM) [:clarkbw]]

These two Surface books cover the laptop use cases, though we should probably just keep them generic.

Microsoft Surface : 1 PR 1366 x 768
Microsoft Surface Pro 2 : 1.5 PR 1280 x 720  (1920 x 1080)

Also worth considering the MacBook retina screens.

MacBook Pro 13-inch Retina : 2 PR 1280 x 800 (2560 x 1600)
MacBook Pro 15-inch Retina : 2 PR 1440 x 900 (2880 x 1800)

Comment 12

[Bryan Clark (DevTools PM) [:clarkbw]]

Same specs for both the ipads:
Apple iPad Air 2 : 2 PR 1024 x 768 (2048	 x 1536)
Apple iPad Mini 2 : 2 PR 1024 x 768 (2048 x 1536)

https://github.com/jankeromnes/devices/pull/10

Comment 13

[Bryan Clark (DevTools PM) [:clarkbw]]

> Samsung Galaxy X

https://github.com/jankeromnes/devices/pull/9

Comment 14

[Bryan Clark (DevTools PM) [:clarkbw]]

Amazon Kindle Fire HDX 8.9 : 2 PR 1280 x 800 (2560 x 1600)

https://github.com/jankeromnes/devices/pull/11

Comment 15

[Bryan Clark (DevTools PM) [:clarkbw]]

Google Nexus 7 : 1.325 PR 966 x 604  (1280 x 800)

Note that the Nexus 7 (by Asus) also seemed to have a second version with different specs; v1 in 2012 and v2 in 2013.  The above is the v1 and below is the v2.

Google Nexus 7 (2) : 2 PR 960 x 600  (1920 x 1200)

Our devices.json already has the specs for the v2 device and I'm not sure which is more popular but the 960x600 size would be more common than the v1 sizes.

Comment 16

[Bryan Clark (DevTools PM) [:clarkbw]]

Here are the laptop specs I think we should add: 

# Laptops
Laptop (1366 x 768) : 1 PR 1366 x 768
Laptop (1280 x 720) : 1.5 PR 1280 x 720

These specs match the Surface as I said in comment 11.  Previously, in comment 6, I thought we should also include the 1024 x 768 case however that resolution the common size for the iPad so I think we can safely assume it is covered by those.

Comment 17

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to Bryan Clark (Firefox PM) [:clarkbw] from comment #16)
> Here are the laptop specs I think we should add: 
> 
> # Laptops
> Laptop (1366 x 768) : 1 PR 1366 x 768
> Laptop (1280 x 720) : 1.5 PR 1280 x 720

https://github.com/jankeromnes/devices/pull/12

Comment 18

[Bryan Clark (DevTools PM) [:clarkbw]]

Once all the pull requests go through I'll mark this bug resolved.

Comment 19

[Bryan Clark (DevTools PM) [:clarkbw]]

And.... the last pull request has been closed.

(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #0)
> We should use market research data to:
> 
> * Determine devices to default enabled in the main, minimal set

check.

> * Add additional devices to the overall DB as needed

check.

Comment 20

[Bryan Clark (DevTools PM) [:clarkbw]]

Here's the final list of default devices, all of these have been validated and are in the devices repo now.

# Phone
Apple iPhone 5s
Apple iPhone 6s
Apple iPhone 6Plus
Google Nexus 4
Google Nexus 5
Google Nexus 6
Samsung Galaxy S5
Samsung Galaxy S6
Samsung Galaxy Note 3
Nokia Lumia 520

# Tablet
Apple iPad Air 2
Apple iPad Mini 2
Google Nexus 7
Amazon Kindle Fire HDX 8.9

# Laptops
Laptop (1366 x 768)
Laptop (1920 x 1080)