{"rowid": 231, "title": "Designing for iOS: Life Beyond Media Queries", "contents": "Although not a new phenomenon, media queries seem to be getting a lot attention online recently and for the right reasons too \u2013 it\u2019s great to be able to adapt a design with just a few lines of CSS \u2013 but many people are relying only on them to create an iPhone-specific version of their website. \n\nI was pleased to hear at FOWD NYC a few weeks ago that both myself and Aral Balkan share the same views on why media queries aren\u2019t always going to be the best solution for mobile. Both of us specialise in iPhone design ourselves and we opt for a different approach to media queries. The trouble is, regardless of what you have carefully selected to be display:none; in your CSS, the iPhone still loads everything in the background; all that large imagery for your full scale website also takes up valuable mobile bandwidth and time.\n\nYou can greatly increase the speed of your website by creating a specific site tailored to mobile users with just a few handy pointers \u2013 media queries, in some instances, might be perfectly suitable but, in others, here\u2019s what you can do.\n\nRedirect your iPhone/iPod Touch users\n\nTo detect whether someone is viewing your site on an iPhone or iPod Touch, you can either use JavaScript or PHP. \n\nThe JavaScript \n\nif((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { \n if (document.cookie.indexOf(\"iphone_redirect=false\") == -1) window.location = \"http://mobile.yoursitehere.com\"; \n}\n\nThe PHP\n\nif(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) \n{\n header('Location: http://mobile.yoursitehere.com');\n exit();\n}\n\nBoth of these methods redirect the user to a site that you have made specifically for the iPhone. At this point, be sure to provide a link to the full version of the website, in case the user wishes to view this and not be thrown into an experience they didn\u2019t want, with no way back.\n\nTailoring your site\n\nSo, now you\u2019ve got 320\u2009\u00d7\u2009480 pixels of screen to play with \u2013 and to create a style sheet for, just as you would for any other site you build. There are a few other bits and pieces that you can add to your code to create a site that feels more like a fully immersive iPhone app rather than a website.\n\nRetina display\n\nWhen building your website specifically tailored to the iPhone, you might like to go one step further and create a specific style sheet for iPhone 4\u2019s Retina display. Because there are four times as many pixels on the iPhone 4 (640\u2009\u00d7\u2009960 pixels), you\u2019ll find specifics such as text shadows and borders will have to be increased. \n\n\n\n(Credit to Thomas Maier)\n\nPrevent user scaling\n\nThis declaration, added into the , stops the user being able to pinch-zoom in and out of your design, which is perfect if you are designing to the exact pixel measurements of the iPhone screen. \n\n\n\nDesigning for orientation \n\nAs iPhones aren\u2019t static devices, you\u2019ll also need to provide a style sheet for horizontal orientation. We can do this by inserting some JavaScript into the as follows: \n\n\n\nYou can also specify orientation styles using media queries. This is absolutely fine, as by this point you\u2019ll already be working with mobile-specific graphics and have little need to set a lot of things to display:none;\n\n\n\n\n\nRemove the address and status bars, top and bottom\n\nTo give you more room on-screen and to make your site feel more like an immersive web app, you can place the following declaration into the of your document\u2019s code to remove the address and status bars at the top and bottom of the screen. \n\n\n\nMaking the most of inbuilt functions\n\nSimilar to mailto: e-mail links, the iPhone also supports another two handy URI schemes which are great for enhancing contact details. When tapped, the following links will automatically bring up the appropriate call or text interface:\n\nCall us\nText us\n\niPhone-specific Web Clip icon\n\nAlthough I believe them to be fundamentally flawed, since they rely on the user bookmarking your site, iPhone Web Clip icons are still a nice touch. You need just two declarations, again in the of your document:\n\n\n\n\nFor iPhone 4 you\u2019ll need to create a 114\u2009\u00d7\u2009114 pixels icon; for a non-Retina display, a 57\u2009\u00d7\u200957 pixels icon will do the trick.\n\nPrecomposed \n\nApple adds its standard gloss \u2018moon\u2019 over the top of any icon. If you feel this might be too much for your particular icon and would prefer a matte finish, you can add precomposed to the end of the apple-touch-icon declaration to remove the standard gloss. \n\n\n\nWrapping up\n\nMedia queries definitely have their uses. They make it easy to build a custom experience for your visitor, regardless of their browser\u2019s size. For more complex sites, however, or where you have lots of imagery and other content that isn\u2019t necessary on the mobile version, you can now use these other methods to help you out. Remember, they are purely for presentation and not optimisation; for busy people on the go, optimisation and faster-running mobile experiences can only be a good thing. \n\nHave a wonderful Christmas fellow Webbies!", "year": "2010", "author": "Sarah Parmenter", "author_slug": "sarahparmenter", "published": "2010-12-17T00:00:00+00:00", "url": "https://24ways.org/2010/life-beyond-media-queries/", "topic": "code"}