{"id":1420,"date":"2009-01-08T21:38:16","date_gmt":"2009-01-09T04:38:16","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=1420"},"modified":"2015-02-25T19:42:58","modified_gmt":"2015-02-26T02:42:58","slug":"38-basics-tips-on-designing-for-the-iphone","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/38-basics-tips-on-designing-for-the-iphone\/","title":{"rendered":"#38: Basics & Tips on Designing for the iPhone"},"content":{"rendered":"
Designing a web page that is optimized for the iPhone isn’t rocket science. It’s the same HTML, CSS and JavaScript that you already know. The difference is that browsers and screens do not vary, you know exactly what you are dealing with. You can use that to your advantage and think about that experience when you create your UI. I start out with how to get your page formatted correctly, how to have differnet stylesheets for portrait and horizontal mode, how to create a “Back to Top” button, and then show some iPhone pages I’ve made.<\/p>\n
Links from video:<\/strong>\t\t\t<\/p>\n Designing a web page that is optimized for the iPhone isn’t rocket science. It’s the same HTML, CSS and JavaScript that you already know. The difference is that browsers and screens do not vary, you know exactly what you are dealing with. You can use that to your advantage and think about that experience when […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":20018,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/004-a-photoshop-canvas\/","url_meta":{"origin":1420,"position":0},"title":"#004 – A Photoshop Canvas","date":"January 28, 2013","format":false,"excerpt":"From the last video, we know we have five major points to consider when starting into the design of this site. We'll keep those at the top of our mind as we move forward. We're starting \"mobile first\" of course, and we're going to start figuring out the design in\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3392,"url":"https:\/\/css-tricks.com\/video-screencasts-3\/","url_meta":{"origin":1420,"position":1},"title":"Video Screencasts","date":"August 12, 2009","format":false,"excerpt":"#40: How z-index Works Running time: 18:37 Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it's tied to positioning, some quirks, and some general advice. #39: How to Use sIFR 3 Running time: 22:10 sIFR (Scalable Inman Flash Replacement) is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3892,"url":"https:\/\/css-tricks.com\/snippets\/htaccess\/iphone-catcher\/","url_meta":{"origin":1420,"position":2},"title":"iPhone Catcher","date":"September 6, 2009","format":false,"excerpt":"RewriteEngine On RewriteCond %{HTTP_USER_AGENT} .*iPhone.* RewriteRule ^index\\.html$ http:\/\/www.mobile.mydomain.com [L] RewriteRule ^\/$ http:\/\/www.mydomain.com\/index.html [L]","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5785,"url":"https:\/\/css-tricks.com\/snippets\/html\/set-iphone-bookmark-icon\/","url_meta":{"origin":1420,"position":3},"title":"Set iPhone Bookmark Icon","date":"March 1, 2010","format":false,"excerpt":"Place this in your \n