{"id":51315,"date":"2011-06-16T14:15:11","date_gmt":"2011-06-16T18:15:11","guid":{"rendered":"http:\/\/wpmu.org\/?p=51315"},"modified":"2012-06-04T01:47:52","modified_gmt":"2012-06-04T05:47:52","slug":"building-your-wordpress-website-with-ipad-in-mind","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/building-your-wordpress-website-with-ipad-in-mind\/","title":{"rendered":"Building Your WordPress Website with iPad in Mind"},"content":{"rendered":"<p>Last week I looked at <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-meet-ipad-how-to-install-wordpress-from-your-ipad\/\" target=\"_blank\">how you can build a WordPress website on your iPad<\/a>. This week I am doing it the other way. <strong>How can you make your website look good on an iPad?<\/strong><\/p>\n<p>Arguably, I could be looking at all sorts of tablets. I could be a little more encompassing and look at Android as well. However, the iPad\u2019s market share makes it the device to be adapting to right now. Check out the market share for Q10 2010:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51600\" title=\"graph\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/graph.png\" alt=\"graph showing iPad share of iPad market at 90%\" width=\"600\" height=\"463\" \/><span style=\"color: #c0c0c0;\">Data from <\/span><a href=\" http:\/\/www.businessinsider.com\/ipad-share-2011-3\" target=\"_blank\"><span style=\"color: #c0c0c0;\">business insider<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>In fact, the iPad has become so popular that it the number of iPad users now surpasses the number of Linux users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51601\" title=\"pingdom\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/pingdom.png\" alt=\"graph showing iPad with higher market share than Linux\" width=\"580\" height=\"250\" \/><span style=\"color: #c0c0c0;\">Source: <\/span><a href=\"https:\/\/www.pingdom.com\/blog\/\" target=\"_blank\"><span style=\"color: #c0c0c0;\">Pingdom <\/span><\/a><\/p>\n<p>This is extremely impressive for a device that has only been around for just over a year and it\u2019s likely that we\u2019ll see the iPad\u2019s dominance strengthen.<\/p>\n<p>Last year I took a look at how you could get your <a href=\"https:\/\/wpmudev.com\/blog\/how-to-make-your-wordpress-website-mobile-friendly\/\" target=\"_blank\">WordPress website looking great on an iPhone<\/a>, now it\u2019s time to take a look at how you can get it looking fantastic on an iPad.<strong> iPad users interact with their devices quite differently<\/strong> to how desktop and laptop users interact with theirs. The absence of a <strong>mouse<\/strong>, the absence of <strong>Flash <\/strong>and the iPad\u2019s <strong>portability <\/strong>all affect how the iPad is used. Let\u2019s take a look at some of the factors and see how you can get your WordPress website working great on your iPad.<\/p>\n<h2>Transform Your Site<\/h2>\n<h3><span style=\"font-size: 15px;\">Onswipe<\/span><\/h3>\n<p>When it comes to the Native Apps vs Web Apps debate in relation to content delivery <strong>I\u2019m firmly on the side of web apps<\/strong>. I don\u2019t think it\u2019s necessary to produce a native app for a blog or magazine when an RSS feed\u00a0 can easily be pulled into an App like Flipboard. It seems like a bit of a waste of money to develop your own app simply for content delivery.<\/p>\n<p>The need for Native Apps has diminished even further for WordPress users with the <a href=\"http:\/\/wordpress.org\/extend\/plugins\/onswipe\/\" target=\"_blank\">Onswipe Plugin<\/a>.\u00a0 Check out the video:<\/p>\n<p><object width=\"549\" height=\"309\" classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"allowfullscreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/vimeo.com\/moogaloop.swf?clip_id=22611403&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0\" \/><embed width=\"549\" height=\"309\" type=\"application\/x-shockwave-flash\" src=\"https:\/\/vimeo.com\/moogaloop.swf?clip_id=22611403&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0\" allowfullscreen=\"allowfullscreen\" allowscriptaccess=\"always\" \/><\/object><\/p>\n<p>Onswipe founder Jason Baptiste\u2019s slogan is \u201c<strong><a href=\"http:\/\/www.fastcodesign.com\/1663888\/onswipe-gives-any-website-a-pretty-touchscreen-interface\" target=\"_blank\">Apps are bullshit<\/a><\/strong>\u201d and he\u2019s right to make that claim when you consider how easy it is to turn your WordPress website into a web app that can rival any of the major iPad content applications. Here\u2019s how my blog looks when it\u2019s been Onswiped:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51628\" title=\"onswipe\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/onswipe.png\" alt=\"Post image\" aria-hidden=\"true\" width=\"550\" height=\"413\" \/><\/p>\n<h4>Onswipe Features<\/h4>\n<ul style=\"clear: both; margin-top: 10px;\">\n<li>Accelerometer aware content<\/li>\n<li>Homescreen icon<\/li>\n<li>Loading screen<\/li>\n<li>Cover image<\/li>\n<li>Integrated WordPress comments<\/li>\n<li>Built in sharing and social media<\/li>\n<\/ul>\n<p>The only downside to Onswipe is that it\u2019s easy to recognise a site that is using it and WordPress sites are becoming <strong>homogenous <\/strong>when viewed on mobile devices. It\u2019d be nice to see some new Onswipe themes coming on to the market.<\/p>\n<h3>Responsive Themes<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51610\" title=\"madeflexible\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/madeflexible.jpg\" alt=\"Flexible WordPress Theme\" width=\"720\" height=\"386\" \/><\/p>\n<p>Responsive design is one of the more recent buzzes in web design but rather than just being a fad it\u2019s a <strong>solution to an emergent problem<\/strong>.\u00a0 The ways that people are browsing the web has transformed in the past few years \u2013 <strong>mobile browsers, smart phones, tablets, netbooks, big screens, small screens, low-res, high-res, even using Kindles or games consoles.<\/strong> Some devices can easily switch from portrait mode to landscape \u2013 like the iPad and iPhone. It\u2019s difficult to know how to get your site looking great across as many mediums as possible.<\/p>\n<p>Responsive design, put simple, is design in which the website responds to the medium in which it is viewed in. It uses a mixture of <strong>CSS3 media queries, fluid layouts and scripts <\/strong>that reformat the webpage according to your device \u2013 a website can look great in on an iPhone, and iPad or a high resolution screen. To read more about the principles behind responsive web design check out these great articles:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.alistapart.com\/articles\/responsive-web-design\/\" target=\"_blank\">Responsive Web Design<\/a> (classic post from A List Apart)<\/li>\n<li><a href=\"http:\/\/coding.smashingmagazine.com\/2011\/01\/12\/guidelines-for-responsive-web-design\/\" target=\"_blank\">Guidelines for Responsive Web Design<\/a><\/li>\n<li><a href=\"http:\/\/sixrevisions.com\/web_design\/understanding-the-elements-of-responsive-web-design\/\" target=\"_blank\">Understanding the Elements of Responsive Web Design<\/a><\/li>\n<li><a href=\"http:\/\/www.webmonkey.com\/2011\/06\/tips-tricks-and-best-practices-for-responsive-design\/\" target=\"_blank\">Tips, Tricks and Best Practices for Responsive Design<\/a><\/li>\n<\/ul>\n<p>If you\u2019re a WordPress Theme designer you can take these elements and integrate them into your theme. But what if you\u2019re not a designer? Are there any WordPress themes that are built with responsive design?<\/p>\n<p>Yes! Of course! But not as many as you would think. You can check out my post with <a href=\"https:\/\/wpmudev.com\/blog\/10-free-responsive-wordpress-themes\/\" target=\"_blank\">10 Free Responsive WordPress Themes.<\/a><\/p>\n<h3>Serving up a Different Stylesheet<\/h3>\n<p>If you don\u2019t want to use a responsive theme, or don\u2019t feel that you are comfortable designing with fluid layouts, you could use only <strong>different stylesheets <\/strong>when someone visits from an iPad. We\u2019re all pretty familiar already with using <strong><a href=\"http:\/\/wordpress.org\/extend\/plugins\/search.php?q=mobile+switcher&amp;sort=\" target=\"_blank\">mobile switchers<\/a><\/strong> that serve up a mobile version of the site when visiting from iPad. The problem with these is that, while serving up an optimized version of the site which is great for mobile, they can look pretty crappy on an iPad. Check out mine:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51629\" title=\"IMG_0111\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/IMG_0111.png\" alt=\"Post image\" aria-hidden=\"true\" width=\"550\" height=\"413\" \/>Not great, right? <strong>Good for an iPhone but not for an iPad<\/strong>.<\/p>\n<p>You could use a plugin like Stylesheet per page to achieve this or you could do this yourself. You can achieve the required effect by using either<a href=\"http:\/\/perishablepress.com\/press\/2010\/10\/20\/target-iphone-and-ipad-with-css3-media-queries\/\" target=\"_blank\"> media queries or by having a different stylesheet<\/a> specifically for your devices. You can check out this article for a discussion on the benefits of each.<\/p>\n<h3>Design Elements to Be Aware of on iPad<\/h3>\n<h4>Fingers<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51630\" title=\"fingers\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/fingers.jpg\" alt=\"fingers on iPad\" width=\"550\" height=\"413\" \/><\/p>\n<p>The way that most people interact with their iPad is using <strong>fingers <\/strong>(or perhaps styli). This has an effect on a couple of different design elements that you might have on your website.\u00a0 <strong>A finger is much less precise<\/strong> than a mouse.\u00a0 As a lowest common denominator I use <strong>my father-in-law with his massive sausage fingers <\/strong>and his failure to use a mobile phone correctly because of the tiny keys.<\/p>\n<p>Keep in mind that there is not just one standard pointing device but that there is <strong>as many different kinds of pointing devices as there are fingers in the world<\/strong>.<\/p>\n<h4>Hover<\/h4>\n<p>You know that nice menu that you have that drops down when a mouse pointer hovers over it? <strong>This isn\u2019t going to work the way that you want on the iPa<\/strong>d. Why? Because there\u2019s nothing that hovers. Seriously, hover your finger over your iPad and see if you can get that menu to dropdown &#8211; <strong>I dare you<\/strong>. In order to get your submenu appear the person has to tap on the top level, rather than roll-over. This means a different, and more annoying, user experience.<\/p>\n<h4>Navigation size<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-51633\" title=\"wordpressnav\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/wordpressnav.png\" alt=\"wordpress navigation\" width=\"179\" height=\"134\" \/>The size of your navigation can seriously affect your visitor\u2019s experience. \u00a0You only need to log into the WordPress backend via an iPad to see what the problem is. The menu links are<strong> too close together<\/strong> so you have to zoom in to be able to click the one that you want.<\/p>\n<p>Think about my poor father in law with his massive fingers. He visits a website with small navigation buttons on an iPad and he keeps end up <strong>hitting the link beside the one he wants<\/strong>. Knowing my father-in-law he\u2019ll chunter away and the iPad might end up broken into pieces on the floor at the other side of the room. You don\u2019t want to be responsible for broken iPads, do you? Keep your buttons at around 20px x 20px, ensuring there is <strong>adequate padding<\/strong> around the element.<\/p>\n<h4>No Flash<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-51632\" title=\"noflash\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/06\/noflash.png\" alt=\"No Flash image\" width=\"160\" height=\"160\" \/>A few years ago, when I first got my iPhone, it annoyed me that I couldn\u2019t view Flash on it. But reflecting back on that now, I realise that this has <strong>rarely, if ever, proved to be a hindrance to me<\/strong>. \u00a0The use of Flash on mainstream websites has been on the decline. I feel a bit sorry for Flash. Because Steve Jobs hates it so much it&#8217;s getting killed off. \u00a0It&#8217;s a sad story.<\/p>\n<p>Popular sites are starting to use <strong>HTML5<\/strong> instead of Flash. This makes the browsing experience even better for iPad users. As WordPress website designers and owners, the use of Flash design elements or plugins is out for the future if you want to make sure your site works perfectly on an iPad. <a href=\"https:\/\/wpmudev.com\/blog\/10-beautiful-html5-video-audio-players-for-wordpress\/\" target=\"_blank\">Sarah has written a post about HTML5 players that should help you to find the right one.<\/a><\/p>\n<h3>Final Tips<\/h3>\n<ul>\n<li><strong>Photographs and Video &#8211;<\/strong> Take advantage of the fact that a whole video or photograph looks fantastic on an iPad. If you\u2019ve got a photography website you could think about including full size image galleries that really show off your work.<\/li>\n<li><strong>Typography <\/strong>\u2013 get your typography right. Too small and your user will have to zoom in. Too big and there won\u2019t be enough words on the screen.<\/li>\n<li><strong>Contrast &#8211;<\/strong> The iPad screen is very <strong>bright<\/strong>. I frequently turn down the brightness because my eyes start to hurt. Instead of using black on white for your text, try a light grey or muted background with a dark grey for the text.<\/li>\n<li><strong>Test! <\/strong>Even if you don&#8217;t have an iPad yourself you can test using iPad Peek.<\/li>\n<\/ul>\n<h3>Further Reading<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.informationarchitects.jp\/en\/designing-for-ipad-reality-check\/\" target=\"_blank\">Designing for iPad Reality Check<\/a><\/li>\n<li><a href=\"http:\/\/webdesign.tutsplus.com\/articles\/how-the-ipad-and-tablets-are-driving-new-web-design-trends\/\" target=\"_blank\">How the iPad and Tablets are Driving New Web Design Trends <\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Last week I looked at how you can build a WordPress website on your iPad. This week I am doing it the other way. How can you make your website look good on an iPad? Arguably, I could be looking at all sorts of tablets. I could be a little more encompassing and look at [&hellip;]<\/p>\n","protected":false},"author":131844,"featured_media":205527,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[38,2395],"tutorials_categories":[],"class_list":["post-51315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-design","tag-mobile"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/51315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/131844"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=51315"}],"version-history":[{"count":3,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/51315\/revisions"}],"predecessor-version":[{"id":204331,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/51315\/revisions\/204331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/205527"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=51315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=51315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=51315"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=51315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}