How To Optimize Your Website for iPad & Mobile Responsiveness for Tablets

<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Even the cleanest, best designed sites can fall victim to the awkward middle-ground of responsive website design and development that tablets create. Then consider plugin content and a host of other issues and you’re sometimes not sure where to start. So how do you ensure that people experiencing your site on one of the world’s fastest growing hardware technologies receive the best possible experience on your site? The good news is…simply put: Your site doesn’t have to look terrible on iPad.<span id="more-3151"></span></span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;"></span></div><a href="" name="more" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;"></a><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Preparing Your Web Content for iPad</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">iOS 7 is here, the iPad Air is here, Apple keeps updating. This year tablets will outship PCs and laptops combined. So why is it when we visit sites they look like crap on our iPads?</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Here is how to get your web content in Safari on iPhone OS devices, with specific information for iPad – LOOKING AWESOME. Of course you can always just call us.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Safari on iPad is capable of delivering a “desktop” web experience. iPad has a large, 9.7″ screen and fast network connectivity, and Safari on iPad uses the same WebKit layout engine as Safari on Mac OS X and Windows. You can ensure that your website looks and works great on iPad, and even create new touch-enabled web experiences for your customers, by considering a few specific differences between iPad and other platforms.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">If you have access to an iPad, test your website using the iPad. If not, you can test your website in Safari on iPad using the iPhone Simulator (Hardware -> Device -> iPad). iPad is available in the iPhone Simulator in iPhone OS 3.2 SDK beta 2 and later, which is available to iPhone Developer Program members. In cases where it is possible to simulate iPad-like behavior in Safari on a desktop computer, instructions are given below.</span></div><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Test your website on iPad, and update user agent detection code if necessary</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Many websites perform server-side checks on the browser’s user agent string to determine whether or not they should serve the mobile version of their website. Safari on iPad is capable of delivering a “desktop” web experience, and users will expect this experience since iPad has a large screen and fast network connectivity. If you have a version of your website that is optimized for mobile devices with small screens, do NOT serve this mobile version to iPad users.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Listing 1-1 shows the Safari on iPad user agent string. It identifies the version of Safari that is running on iPad, and iPad is identified as a mobile device.</span></div><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;">Listing 1-1 </b><span style="font-family: 'Trebuchet MS', sans-serif;">Safari on iPad user agent string in iPhone OS 3.2 SDK beta 3</span></div><div style="text-align: justify;"><br /></div><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18px; widows: 1;"><code></code></span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><div style="text-align: justify;">Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10</div><code style="background-color: white; color: #333333; font-size: 12px; line-height: 18px; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;"><i></i></span></code><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18px; widows: 1;"><i><code></code></i></span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Note that the Safari on iPad user agent string contains the word “Mobile”, but does not contain the word “iPhone”. If you are currently serving mobile content to any browser that self-identifies as “Mobile”, you should modify your user agent string checks to look for iPad and avoid sending it the wrong version of your site. The version numbers in this string are subject to change over time as new versions of Safari on iPad become available, so any code that checks the user agent string should not rely on version numbers.</span></div><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Simulating Safari on iPad HTTP requests in Safari on the desktop</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">If you’re unable to test with an iPad or iPhone Simulator, you can simulate an HTTP request from Safari on iPad in Safari on a desktop computer. First, load your website in Safari on Mac OS X or Windows. Then, enable the checkbox next to “Show Develop menu in menu bar” in Safari’s Advanced Preference pane, as shown in Figure 1-1.</span></div><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;"><br /></b></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;">Figure 1-1 </b><span style="font-family: 'Trebuchet MS', sans-serif;">Enabling the Safari Develop menu.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><a class="cboxElement" href="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-1.png" rel="lightbox[3151]" style="color: #a50016; text-decoration: none;" title="Real 1"><img alt="Real 1" class="alignleft size-full wp-image-3156" height="366" original="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-1.png" src="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-1.png" style="-webkit-transition: opacity 0.2s ease-out; border-width: 0px; display: inline; height: auto; max-width: 100%; transition: opacity 0.2s ease-out;" width="540" /></a></div><div style="text-align: justify;">Next, select <b>Develop -> User Agent -> Other</b> from the Safari menu. You will be prompted to enter a user agent string. Copy the Safari on iPad user agent string above, then paste in it into the dialog box that appears, as shown in Figure 1-2.</div><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18px; widows: 1;"></span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><br /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;"><br /></b></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;">Figure 1-2 </b><span style="font-family: 'Trebuchet MS', sans-serif;">Customizing the user agent string.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><a class="cboxElement" href="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-2.png" rel="lightbox[3151]" style="color: #a50016; text-decoration: none;" title="Real 2"><img alt="Real 2" class="alignleft size-full wp-image-3157" height="177" original="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-2.png" src="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-2.png" style="-webkit-transition: opacity 0.2s ease-out; border-width: 0px; display: inline; height: auto; max-width: 100%; transition: opacity 0.2s ease-out;" width="384" /></a></div><div style="text-align: justify;">When you click “OK”, the User-Agent field in any HTTP request headers will be set to the string that you just entered, and the page will automatically reload. When the page reloads, you should verify that you’re NOT serving the mobile version of your website to iPad. You can verify that the Safari on iPad user agent string was sent to your server by inspecting request headers in the Resources pane of Safari’s Web Inspector, as shown in Figure 1-3. This user agent string setting persists on a per-window basis.</div><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18px; widows: 1;"></span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><br /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;"><br /></b></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;">Figure 1-3 </b><span style="font-family: 'Trebuchet MS', sans-serif;">Inspecting request headers.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><a class="cboxElement" href="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-3.png" rel="lightbox[3151]" style="color: #a50016; text-decoration: none;" title="Real 3"></a><a class="cboxElement" href="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-3.png" rel="lightbox[3151]" style="color: #a50016; text-decoration: none;" title="Real 3"><img alt="Real 3" class="alignleft size-full wp-image-3158" height="276" original="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-3.png" src="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/Real-3.png" style="-webkit-transition: opacity 0.2s ease-out; border-width: 0px; display: inline; height: auto; max-width: 100%; transition: opacity 0.2s ease-out;" width="540" /></a></div><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18px; widows: 1;"></span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Use W3C standard web technologies instead of plug-ins</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Plug-ins are not supported in Safari on iPad, nor are they supported in Safari on iPhone.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">If you’re using a plug-in to display user interface elements such as menus or other navigation elements on your website, these elements will not be accessible to Safari on iPad or Safari on iPhone users. Be sure to include a code path for platforms that do not support plug-ins, and for users on desktop platforms such as Mac OS X or Windows that may have plug-ins disabled.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">If you’re using a plug-in to embed audio or video in a webpage, you can use the HTML5 <audio> and <video> tags to deliver audio and video content in Safari on iPad and iPhone. These tags work seamlessly with HTTP Live Streaming, and it is easy to structure your HTML to fall back to plug-in content in browsers that don’t support these elements. For more information on using HTML5 <audio> and <video> tags, see the Safari Guide to HTML5 Audio and Video, and the HTMLMediaElement, HTMLVideoElement, and HTMLAudioElement class references in the Safari DOM Extensions Reference.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">If you’re currently using a plug-in to draw animations in your webpages, you can use a combination of JavaScript and CSS3 transforms, transitions, and animations to create animations in Safari on iPhone OS.</span></div><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Testing without plug-ins in Safari on the desktop</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">If you’re unable to test with Safari on an iPad or using the iPhone Simulator, you can verify that your website works well without plug-ins in Safari on the desktop. Begin by disabling the checkbox next to “Enable plug-ins” in Safari’s Security Preference pane, as shown in Figure 4.</span></div><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;"><br /></b></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;">Figure 1-4 </b><span style="font-family: 'Trebuchet MS', sans-serif;">Disabling plug-ins in Safari on the desktop.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><a class="cboxElement" href="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/iPad-Opt_1.png" rel="lightbox[3151]" style="color: #a50016; text-decoration: none;" title="iPad Opt_1"><img alt="iPad Opt_1" class="alignleft size-full wp-image-3159" height="524" original="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/iPad-Opt_1.png" src="https://gravityjack-wpengine.netdna-ssl.com/wp-content/uploads/iPad-Opt_1.png" style="-webkit-transition: opacity 0.2s ease-out; border-width: 0px; display: inline; height: auto; max-width: 100%; transition: opacity 0.2s ease-out;" width="540" /></a></div><div style="text-align: justify;">Next, visit your website. Elements on webpages which use plug-ins may be replaced with messages advising you to download or upgrade the required plug-in. In Safari on iPad, these areas may be blank.</div><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18px; widows: 1;"></span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Check your viewport tag settings</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">If you’ve specified viewport settings for your webpage in Safari on iPhone, verify that these same settings are suitable for Safari on iPad. Specifically, if you want the width of the viewport to match the width of the device, you should use the device-width constant instead of a hard-coded pixel value. For example, many websites use the setting shown in Listing 1-2 to set the viewport to a width that they consider suitable for iPhone.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;"><b><br /></b></span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;"><b>Listing 1-2</b>Incorrect: Using a pixel value for viewport width.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><code><span style="color: #cc0000; font-family: 'Trebuchet MS', sans-serif;"><i><strike>meta name="viewport" content="width=320" /></strike> <b><!--- WRONG //---></b></i></span></code></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Using the device-width constant as shown in Listing 1-3 is a much better approach, as it will set the viewport to the width of the current device.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;"><b><br /></b></span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;"><b>Listing 1-3</b>Correct: Using a constant for viewport width.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><code><span style="color: #cc0000; font-family: 'Trebuchet MS', sans-serif;"><i>meta name="viewport" content="width=device-width"</i></span></code></div><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Modify code that relies on CSS fixed positioning</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">CSS fixed positioning works in Safari on iPhone and iPad, but not as you might expect. While elements that use fixed positioning in Safari on Mac OS X and Windows always stay on screen, elements that use fixed positioning in Safari on iPhone and iPad can end up offscreen as users zoom and pan the webpage. Why does this happen?</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">By definition, the containing block of a webpage element that uses CSS fixed positioning is the viewport. This means that when you set position: fixed with a bottom and right value of 20px as shown in Listing 1-4, you have “fixed” the position of an element 20 pixels above the bottom edge of the viewport, and 20 pixels from the right edge of the viewport.</span></div><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;"><br /></b></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><b style="font-family: 'Trebuchet MS', sans-serif;">Listing 1-4</b><span style="font-family: 'Trebuchet MS', sans-serif;">CSS fixed positioning.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b><i><span style="color: #e06666;">#fixed {</span></i></b></div><code style="background-color: white; color: #333333; font-size: 12px; line-height: 18px; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;"></span></code><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; widows: 1;" /><div style="text-align: justify;">position: fixed;</div><div style="text-align: justify;">right: 20px;</div><div style="text-align: justify;">bottom: 20px;</div><div style="text-align: justify;">height: 100px;</div><div style="text-align: justify;">width: 100px;</div><div style="text-align: justify;">background-color: purple;</div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><code><span style="color: #e06666; font-family: 'Trebuchet MS', sans-serif;"><b><i>}</i></b></span></code></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><code><span style="font-family: 'Trebuchet MS', sans-serif;"><br /></span></code></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">In Safari on the desktop, the viewport is analogous to the window — as you resize a window, you are resizing the viewport. As you scroll, you are scrolling the viewport. Hence, in Safari on Mac OS X and Windows, the element always stays on screen.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position “fixed” to the viewport can end up outside the viewable content area, offscreen.</span></div><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Prepare for a touch interface</span></h2><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Although an external hardware keyboard is an option for use with iPad, the primary means of interacting with web content in Safari on iPad is through touch. The software keyboard appears in Safari on iPad and iPhone when a form control that requires text input — such as <i><b><input type=”text”> or <textarea></b></i> — gains focus. Users should not be forced to rely on a keyboard to navigate your webpage.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Additionally, Safari on iPhone OS users interact with your web content directly with their fingers, rather than using a mouse. This creates new opportunities for touch-enabled interfaces, but does not work well with hover states. For example, a mouse pointer can hover over a webpage element and trigger an event; a finger on a Multi-Touch screen cannot. For this reason, mouse events are emulated in Safari on iPhone OS. As a result, elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">You can handle touches directly or even detect advanced gestures in Safari on iPhone OS, using the DOM Touch events touchstart, touchmove, touchend, and touchcancel. Unlike mouse events which are emulated, DOM Touch events are specifically designed to work with touch interfaces, so their behavior is reliable and expected. For more information on using touch events in web content for Safari on iPhone OS, see the “Handling Events” section of the Safari Web Content Guide, the Touch, TouchEvent, and TouchList classes in the Safari DOM Extensions Reference, and the SlideMe sample code at the Safari Dev Center.</span></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Since touching and holding in Safari on iPhone OS will invoke the Cut/Copy/Paste dialog, you may also choose to disable selection on user interface elements such as menus and buttons using -webkit-user-select: none. It is important to only disable selection as needed on a per-element basis. Selection in webpages should <b>never</b> be globally disabled.</span></div><h2 style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 19.2000007629395px; font-weight: normal; margin: 0px 0px 10px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">Use textareas instead of contenteditable elements</span></h2><code style="background-color: white; color: #333333; font-size: 12px; line-height: 18px; widows: 1;"><span style="color: #e06666; font-family: 'Trebuchet MS', sans-serif;"><b><i></i></b></span></code><br /><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: justify; widows: 1;"><span style="font-family: 'Trebuchet MS', sans-serif;">contenteditable is not supported in Safari on iPhone OS. If you’re using contenteditable to enable text input within a styled element (for instance, <p contenteditable> or <div contentediable>), you can replace this styled element with a styled <textarea>. In Safari on iPad, iPhone, Mac OS X, and Windows, you can customize the appearance of <textarea> elements using CSS. If necessary, you can even disable any platform-specific, built-in styling on a <textarea> by specifying -webkit-appearance: none.</span></div>

How To Optimize Your Website for iPad & Mobile Responsiveness for Tablets

Even the cleanest, best designed sites can fall victim to the awkward middle-ground of responsive website design and development that tablet...

Read more »

3 Ways to easily Backup your Blogger blogs

<div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><a href="http://4.bp.blogspot.com/-oEFXWaQLUo8/VSF415_hL9I/AAAAAAAAAVY/S5pw3lO9tyw/s1600/Blogger%2BBackup%2BTips.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="background-color: white;"><img border="0" height="295" src="http://4.bp.blogspot.com/-oEFXWaQLUo8/VSF415_hL9I/AAAAAAAAAVY/S5pw3lO9tyw/s1600/Blogger%2BBackup%2BTips.png" width="400" /></span></a><span style="background-color: white;">First of all Happy Diwali to all the readers of All Blogger Tricks. May this Diwali bring lot of brightness and happiness in your life.</span></div><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br /></span></div><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;">Today I am going to tell you how you can easily backup your blogger blogs in 3 different ways. Backing a blog is a thing which must be practiced by every blogger. Though Blogger is owned by Google and is one of the most secured platform and can't be hacked easily still we never know if our password gets stolen or we by mistake delete a post.</span></div><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br /></span></div><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;">A blogger must backup his blog periodically and to make this task easier I am going to tell you how you can do this by 3 different methods. So here they are </span></div><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br /></span></div><h4 style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px; text-align: justify;"><span style="background-color: white;">Method 1 : The Traditional Way</span></h4><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br /></span></div><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><span style="line-height: 24px;">This is certainly the most common method and many of you out here may know it. In this method we Import the blog posts and download the blog's template from Blogger.com itself. A detailed post on the same can be find on the below link which I have wrote earlier.</span>- </span></div><div style="color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"></div><div style="font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><h4 style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; color: black; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px;"><span style="background-color: white;">Method 2 : Downloading Data from Google Dashboard</span></h4><div style="color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div style="color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;">This is probably the easiest method to backup all your blog's template and posts with just few clicks. So to make backup from this method follow the steps below -</span></div><div style="color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div style="color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;">1. First of all go to <a href="https://www.google.com/settings/dashboard" style="-webkit-transition: color 0.15s linear; color: navy; margin: 0px; padding: 0px; text-decoration: inherit; transition: color 0.15s linear;" target="_blank">Google Dashboard</a>. You would be asked to login there.<br /><br />2. After logging in, click "Download Your Data" link which will be on the left sidebar.<br /><br />3. Click on Create an Archive Button.<br /><br />4. A list of many Google Products will come, from the list select Blogger. After Selecting click on the button "Create Archive" which will be at the top of the list.</span></div><div style="color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; color: #3e3e3e; text-align: center;"><a href="http://3.bp.blogspot.com/-lEVUk3hsIzE/VSF6bHpaSAI/AAAAAAAAAVw/06k6depu-lE/s1600/Blogger%2Bselection.png" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="http://3.bp.blogspot.com/-lEVUk3hsIzE/VSF6bHpaSAI/AAAAAAAAAVw/06k6depu-lE/s1600/Blogger%2Bselection.png" width="640" /></a></div><div class="separator" style="clear: both; color: #3e3e3e; text-align: center;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"> 5. After clicking a Progress Bar will show the status of your archive being created. After few seconds a download button will appear. Clicking that you will again be prompted to Sign in for security reasons.</span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br />6. One you sign in again, you can download the backup of all the blog you have in your blogger account with their template and posts. The backup is now saved in your local disk.</span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><h4 class="separator" style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; clear: both; color: black; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px;"><span style="background-color: white;">Method 3 : Backup via Software</span></h4><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;">The third method is also quite easy. In this method we will use a third party software which is Blogger Backup Utility. This software helps you download the posts of your blogger blog <b>(no template backup) </b>easily with the help of the blog's feed. You get various options to workout with the software. To make a backup from Blogger Backup Utility follow the below steps - </span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><span style="color: #3e3e3e;">1. Download Blogger Backup Utility from </span><a href="http://sparkleloaded.blogspot.com/" rel="" style="-webkit-transition: color 0.15s linear; color: navy; margin: 0px; padding: 0px; text-decoration: inherit; transition: color 0.15s linear;" target="_blank"><span style="color: #cc0000;"><b>HERE</b></span></a><span style="color: #3e3e3e;">. Extract and Install the Software.</span></span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;">2. From the available blogs dropdown select Add/Update/Remove Blogs option.</span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;">3. Enter your Blogger ID and password and wait for the blogs list to be fetched. </span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;">4. Once the process is completed select the desired blog from the dropdown and get a look at the below options such as as save post in individual or single file etc.</span></div><div style="color: #3e3e3e;"><span style="background-color: white;"><br /></span></div><div style="color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;"><br /></span></div><div class="separator" style="clear: both; color: #3e3e3e; text-align: center;"><a href="http://3.bp.blogspot.com/-P8SM37QP7vA/VSF5-ggcYnI/AAAAAAAAAVo/nxds5c3vWQc/s1600/Blogger%2BBackup%2BUtility.png" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="http://3.bp.blogspot.com/-P8SM37QP7vA/VSF5-ggcYnI/AAAAAAAAAVo/nxds5c3vWQc/s1600/Blogger%2BBackup%2BUtility.png" width="640" /></a></div><div style="color: #3e3e3e; line-height: 24px; margin: 0px; padding: 0px;"><div class="separator" style="clear: both; line-height: 24px; margin: 0px; padding: 0px;"><span style="background-color: white;">5.  Lastly click on Backup Posts button and the backup will be saved in the folder selected. Thats it. Your posts are now backed up and saved in your local disk.</span></div></div></div>

3 Ways to easily Backup your Blogger blogs

First of all Happy Diwali to all the readers of All Blogger Tricks. May this Diwali bring lot of brightness and happiness in your life. Toda...

Read more »

How to Change Blogspot Domain Name

<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><a href="http://4.bp.blogspot.com/-EOTHY3qJyss/VSFzWRG-HWI/AAAAAAAAAU4/EetGjXizaa0/s1600/blogspot%2Bdomain.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-EOTHY3qJyss/VSFzWRG-HWI/AAAAAAAAAU4/EetGjXizaa0/s1600/blogspot%2Bdomain.png" /></a><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">Ever wondered if you can change the blogspot domain in your blog ? The answer is Yes you can. Suppose you have a domain name </span><b style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">loadedsoft</b><b style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">.blogspot.com</b><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"> and you wish to change its domain to </span><b style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">loadedsoft.blogspot.com</b><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"> then what would you do ? Download template and posts and upload in a newly created blog updates the widgets and hell lot of things. The answer is NO. You can simply change the URL of your blog.</span><br /><br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" /><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">Below is the step by step guide to show you how you can change the blogspot domain name in your blogger blog.</span><br /><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"><br /></span><br /><h4 style="background-color: #f9f9f9; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px;">Step by Step Guide</h4><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><ol style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px 0px 0px 35px; padding: 10px 0px 20px;"><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px;">Go to Blogger.com</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px;">Click the arrow button which is beside your Blogs name and select <b>Settings</b></li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px;">In the Basic Tab (Open by Default) you would see three categories Basic, Publishing and Permissions.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px;">Under the Publishing settings click the Edit text which will be be beside your blog URL<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-FaiToyYB5bI/VSF1jDNKslI/AAAAAAAAAVM/CMRm6DJlpiU/s1600/tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="http://2.bp.blogspot.com/-FaiToyYB5bI/VSF1jDNKslI/AAAAAAAAAVM/CMRm6DJlpiU/s1600/tutorial.png" width="640" /></a></div></li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px;">Enter your new desired domain and click save. You will see a confirmation popup showing that your desired settings has been saved.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px;">Now you can see your blog on a fully new URL.</li><div style="line-height: 24px; margin: 0px; padding: 0px;">This setting can be useful for those who want to change their blogger domain name. Blogs with personal names decrease it value in such cases this can be the best solution.</div></ol>

How to Change Blogspot Domain Name

Ever wondered if you can change the blogspot domain in your blog ? The answer is Yes you can. Suppose you have a domain name  loadedsoft .bl...

Read more »