{"id":1616,"date":"2014-09-12T22:53:06","date_gmt":"2014-09-13T05:53:06","guid":{"rendered":"http:\/\/www.joshworth.com\/?p=1616"},"modified":"2014-09-12T22:53:06","modified_gmt":"2014-09-13T05:53:06","slug":"whats-the-apple-watch-screen-resolution","status":"publish","type":"post","link":"https:\/\/joshworth.com\/jpw\/whats-the-apple-watch-screen-resolution\/","title":{"rendered":"Hey! What&#8217;s the Apple Watch Screen Resolution?"},"content":{"rendered":"<p>\t\t\t\tApple unveiled the\u00a0glamorous new <a href=\"http:\/\/www.apple.com\/watch\/\" target=\"_blank\" rel=\"noopener noreferrer\">Apple Watch<\/a> on September 9, but they failed to mention what resolution the screen would have. For designers looking to start creating apps for this fancy little device, we&#8217;re left with the question: &#8220;What size do I make my comps?&#8221; Let&#8217;s see if we can put on our smarty-pants and solve this mystery\u00a0right here.<\/p>\n<p>Some might say resolution-dependent comps are a thing of the past in this multi-device era of liquid responsiveness, but I still like to use Photoshop to quickly set up an initial visual style. With that said, let us begin.<\/p>\n<p>Firstly,<strong> how big is the screen?<\/strong> Already, we have a trick question. There are two sizes! A manly 42mm version as well and a dainty 38mm for the ladies. By performing a highly unscientific analysis of the screenshots from the <a href=\"http:\/\/www.apple.com\/watch\/design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Apple website<\/a>, we can get a good idea of the aspect ratio and then the width.<\/p>\n<p><a href=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/watchsize.jpg\"><img decoding=\"async\" class=\"lazyload alignnone size-full wp-image-1620\" src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/watchsize.jpg\" data-orig-src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/watchsize.jpg\" alt=\"watchsize\" width=\"1510\" height=\"696\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271510%27%20height%3D%27696%27%20viewBox%3D%270%200%201510%20696%27%3E%3Crect%20width%3D%271510%27%20height%3D%27696%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-200x92.jpg 200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-300x138.jpg 300w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-400x184.jpg 400w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-600x277.jpg 600w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-768x354.jpg 768w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-800x369.jpg 800w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-1024x472.jpg 1024w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize-1200x553.jpg 1200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchsize.jpg 1510w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1510px) 100vw, 1510px\" \/><\/a><\/p>\n<p>Next question: <strong>Do the two sizes have a different resolution?<\/strong> Or, to rephrase it, would Apple really add hours of frustration to the lives of developers and designers, just for 4mm? Let&#8217;s hope not, and assume they both display the same pixel dimensions, and that the small one&#8217;s just a little crisper than the big one.<\/p>\n<p>That still doesn&#8217;t tell us much about the actual <strong>pixel density<\/strong>. But neither did Apple. And that actually does tell us something. It means there was no major breakthrough in screen resolution to get a display to fit onto your wrist. If there was, we would have heard the disembodied voice of Jony Ive waxing poetically about it over semi-pornographic close-ups of polished aluminium chip-faces.<\/p>\n<p>So if it wasn&#8217;t a big breakthrough, then surely they&#8217;d use the best they&#8217;ve got &#8211; especially if they&#8217;re concerned about <a href=\"http:\/\/www.theverge.com\/2014\/9\/9\/6129023\/apple-designed-a-custom-typeface-for-the-apple-watch-just-like-google-did-for-android\" target=\"_blank\" rel=\"noopener noreferrer\">maximizing the legibility of typefaces<\/a> at such a small size. So the best they seem to have available was unveiled the same day for the iPhone6 plus.<\/p>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-overflow:visible;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"width:calc( 100% + 0px ) !important;max-width:calc( 100% + 0px ) !important;margin-left: calc(-0px \/ 2 );margin-right: calc(-0px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column fusion-flex-align-self-flex-start fusion-column-no-min-height\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:0px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:0px;--awb-width-medium:100%;--awb-spacing-right-medium:0px;--awb-spacing-left-medium:0px;--awb-width-small:100%;--awb-spacing-right-small:0px;--awb-spacing-left-small:0px;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div id=\"attachment_1621\" style=\"width: 2010px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/iphone_res.jpg\"><img decoding=\"async\" aria-describedby=\"caption-attachment-1621\" class=\"lazyload wp-image-1621 size-full\" src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/iphone_res.jpg\" data-orig-src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/iphone_res.jpg\" alt=\"iphone_res\" width=\"2000\" height=\"1043\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272000%27%20height%3D%271043%27%20viewBox%3D%270%200%202000%201043%27%3E%3Crect%20width%3D%272000%27%20height%3D%271043%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-200x104.jpg 200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-300x156.jpg 300w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-400x209.jpg 400w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-600x313.jpg 600w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-768x401.jpg 768w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-800x417.jpg 800w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-1024x534.jpg 1024w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res-1200x626.jpg 1200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/iphone_res.jpg 2000w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/a><p id=\"caption-attachment-1621\" class=\"wp-caption-text\">401 pixels per inch seems like plenty.<\/p><\/div>\n<p>So assuming the smallest size device (32.3mm x 38mm) is using the best possible resolution (401ppi), we can quickly run the numbers through Photoshop&#8217;s image size dialog.<\/p>\n<p><a href=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/watchres2.jpg\"><img decoding=\"async\" class=\"lazyload alignnone size-full wp-image-1622\" src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/watchres2.jpg\" data-orig-src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/watchres2.jpg\" alt=\"watchres2\" width=\"1536\" height=\"221\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271536%27%20height%3D%27221%27%20viewBox%3D%270%200%201536%20221%27%3E%3Crect%20width%3D%271536%27%20height%3D%27221%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-200x29.jpg 200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-300x43.jpg 300w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-400x58.jpg 400w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-600x86.jpg 600w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-768x111.jpg 768w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-800x115.jpg 800w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-1024x147.jpg 1024w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2-1200x173.jpg 1200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/watchres2.jpg 1536w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/a><\/p>\n<p>Flipping the millimeters to pixels shows a resolution of 509 x 600. 600 is a remarkably elegant number, but I&#8217;ve never heard of an odd number of pixels on a screen, so I&#8217;ll assume my measurements were off by a bit and call it:<\/p>\n<p><center><\/p>\n<h2><del datetime=\"2014-09-15T17:26:30+00:00\">510 x 600<\/del><\/h2>\n<p>&nbsp;<\/p>\n<p><\/center>That&#8217;s my guess, at least. Feel free to post your alternate theories in the comments.<\/p>\n<p><em>UPDATE: September 15, 2014<\/em><br \/>\nSomething important that was brought to my attention in the comments is that the entire watch face is not used for the display. There&#8217;s actually a generous black border around the rendering area. Once we take that into account, using the same 401ppi resolution for the 38mm version, we get a height of 480px (another number that commonly occurs in display sizes). The final dimensions then come out to:<\/p>\n<p><center><\/p>\n<h2><del datetime=\"2015-01-23T23:37:02+00:00\">386 x 480<\/del><\/h2>\n<p>&nbsp;<\/p>\n<p><\/center><a href=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/imagesize.jpg\"><img decoding=\"async\" class=\"lazyload alignnone size-full wp-image-1635\" src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/imagesize.jpg\" data-orig-src=\"https:\/\/www.joshworth.com\/jw\/wp-content\/uploads\/2014\/09\/imagesize.jpg\" alt=\"imagesize\" width=\"1880\" height=\"1134\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271880%27%20height%3D%271134%27%20viewBox%3D%270%200%201880%201134%27%3E%3Crect%20width%3D%271880%27%20height%3D%271134%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-200x121.jpg 200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-300x181.jpg 300w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-400x241.jpg 400w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-600x362.jpg 600w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-768x463.jpg 768w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-800x483.jpg 800w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-1024x618.jpg 1024w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize-1200x724.jpg 1200w, https:\/\/joshworth.com\/jpw\/wp-content\/uploads\/2014\/09\/imagesize.jpg 1880w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1880px) 100vw, 1880px\" \/><\/a><\/p>\n<p><em>UPDATE: January 23, 2015<\/em><br \/>\nThe answer to this question was answered when Apple released the <a href=\"https:\/\/developer.apple.com\/watchkit\/\" target=\"_blank\" rel=\"noopener noreferrer\">Apple Watch SDK<\/a> in November 2014. The correct answer is: <\/p>\n<h2>272\u2a09340 and 312\u2a09390<\/h2>\n<p>Thank you for playing.<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\t\t\t\t Let&#8217;s put on our smarty-pants and solve this mystery\u00a0right here.\t\t<\/p>\n","protected":false},"author":1,"featured_media":1620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,15],"tags":[],"class_list":["post-1616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-f-a-q-s","category-resources"],"_links":{"self":[{"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/posts\/1616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/comments?post=1616"}],"version-history":[{"count":0,"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/posts\/1616\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/media\/1620"}],"wp:attachment":[{"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/media?parent=1616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/categories?post=1616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joshworth.com\/jpw\/wp-json\/wp\/v2\/tags?post=1616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}