{"id":1746,"date":"2007-06-11T08:51:00","date_gmt":"2007-06-11T16:51:00","guid":{"rendered":"http:\/\/localhost\/web-design-for-theiphone"},"modified":"2017-01-20T13:18:00","modified_gmt":"2017-01-20T21:18:00","slug":"web-design-for-theiphone","status":"publish","type":"post","link":"https:\/\/needmoredesigns.com\/web-design-for-theiphone\/","title":{"rendered":"Web Design for the iPhone"},"content":{"rendered":"<p>So we\u2019ve had our <a href=\"http:\/\/apple.com\/iphone\/\">iPhones<\/a> here at Needmore for a couple weeks, and figured it was time to write a little bit about our observations.<\/p>\n<p>Just kidding. We\u2019re certainly looking forward to getting some, but we\u2019re not going to be first in line! Sometimes it\u2019s good to wait a little bit on brand new, very expensive gizmos like that. My cell phone works pretty well and was very affordable, thank you very much.<\/p>\n<p>Watching the iPhone videos, and Steve\u2019s last keynote in January, one can\u2019t help but notice that you only ever see <strong>a single website<\/strong> on the iPhone\u2019s Safari browser: <a href=\"http:\/\/nytimes.com\/\">The New York Times<\/a>. And I think the reason is pretty obvious \u2013 the narrow columns. The iPhone has a screen that\u2019s very tiny, a mere 480 pixels wide at a vision-impairing 160 dpi. They have a clever little click that lets you tap on a \u201ccolumn\u201d of text to zoom in, which works great on a site with columns no more than 350 pixels wide (and many as narrow as 180 pixels).<\/p>\n<p>That\u2019s a big deal. While the Safari browser on the iPhone is capable of showing real web pages, as opposed to the mediocre browsers on most small mobile devices, it does benefit from those narrow columns. They never show an <em>interior<\/em> page of the New York Times, with its 620 pixel wide columns. If they did, you might notice the text being a bit more difficult to read, although they do bump up the font size.<\/p>\n<p>The lesson the iPhone is going to teach web developers is to <strong>properly adhere to good line length guidelines<\/strong>. This has been worded a few different ways, but my rule of thumb is 10-12 words per line. If you get wider than that, it\u2019s going to be hard to read your pages on such a small screen (unless users are able to enlarge the text, or the iPhone has some built-in intelligence to compensate for this).<\/p>\n<p>I\u2019m sure we\u2019ll learn more lessons as more folks get their hands on an iPhone, but I think paying attention to column widths and line lengths is a good place to start.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So we\u2019ve had our iPhones here at Needmore for a couple weeks.<\/p>\n","protected":false},"author":2,"featured_media":15442,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/needmoredesigns.com\/wp-content\/uploads\/2013\/12\/washington-high-steps.jpg","_links":{"self":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/1746"}],"collection":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/comments?post=1746"}],"version-history":[{"count":0,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/1746\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media\/15442"}],"wp:attachment":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media?parent=1746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/categories?post=1746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/tags?post=1746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}