eye candy for your iphone
DESCRIPTION
Tricks to make your WordPress site look more like a native iPhone appTRANSCRIPT
![Page 1: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/1.jpg)
Eye Candy for Your iPhone
Tricks to make your WordPress site look more like a native iPhone app
Brian [email protected] at brianshim.com
![Page 2: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/2.jpg)
Things we can fix in Safari Mobile
• Change status bar color from gray to black
• Hide browser address bar
• Scale the window properly
• Hide bottom nav bar (if user saves to home screen)
• Custom home screen icon• Custom splash screen
![Page 3: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/3.jpg)
Why do these things?
• They look cool.
• To get more pixels for your site.
• Clients want them.
• And…
![Page 4: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/4.jpg)
Mobile Usage is ExplodingMobile Users > Desktop Users in 2014
![Page 5: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/5.jpg)
How Users Access TwitterMore Use the Mobile Site than iOS
http://blog.twitter.com/2010/09/evolving-ecosystem.html(September 2010)
![Page 6: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/6.jpg)
Hiding the Mobile Safari Address Bar
Add this Javascript to the bottom of your page:
<script type = "text/javascript">// Hide the address barwindow.addEventListener("DOMContentLoaded"
,function() {window.scrollTo(0, 1);
});</script>
Note: I use “DOMContentLoaded” rather than “load”, because “DOM” works faster and doesn’t wait for images to be loaded before getting rid of the task bar.
For more info check out: http://davidwalsh.name/hide-address-bar
![Page 7: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/7.jpg)
Add the code to your theme footer..
![Page 8: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/8.jpg)
Notes• Provides extra sixty pixels of height for your site!• Number One Mistake: Web page must be taller
than the browser window for this to work!• During page load, address bar will slide down
momentarily and then slide back up – can cause sea-sickness if you have a lot of page loads.
• Address bar is still accessible if the user swipes down on the page
• Should work for Android (but I have not tested)
![Page 9: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/9.jpg)
Scaling the Browser Window
Add this meta tag to the <head> section of your page:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
• Play with the “initial-scale” value until your site looks the best. Higher numbers zoom in. Lower numbers zoom out.
• For more info, check out:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
![Page 10: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/10.jpg)
Add the code to your theme <head> section..
![Page 11: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/11.jpg)
Here are the results withthese two changes:
Original New (scale=0.5) Or this! (scale=1.0)
![Page 12: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/12.jpg)
This is NOT a replacement for a truly responsive mobile design!
But, it’s better than nothing, and it took five minutes!
So, why not?
![Page 13: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/13.jpg)
Now let’s create a custom icon..
Icon created by iOS (blah)
Custom icon
![Page 14: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/14.jpg)
How to create a custom home screen icon for iPhone/iPod Touch
• Create a 57 x 57 pixel PNG file (square corners)• WordPress plugin: “Blog Icons”Manual Method: add a meta tag to <head>• <link rel="apple-touch-icon" href="images/iOS_button.png" />
Or• <link rel="apple-touch-icon-precomposed" href="images/iOS_button.png" />
• “precomposed” means no gloss effect• More info (including Retina support) at http://
mathiasbynens.be/notes/touch-icons
![Page 15: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/15.jpg)
It’s all about enhancing the user experience..
Ugly!
![Page 16: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/16.jpg)
Custom Splash Screen
• Create a 320 x 460 pixel PNG file• WordPress plugin: “Blog Icons”• Note, the splash screen will only appear if the
user has saved the site to the home screen!• If you don’t create this, the last visited page of
your site will flash briefly during startup.. UGLY!Manual Methods:• Add this to the <head> section:<link rel="apple-touch-startup-image" href="your_file.png" />
![Page 17: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/17.jpg)
Permanently eliminating both toolbars from Mobile Safari! (aka “Full Screen Mode”)
Now for something more advanced…
Full Screen Mode
![Page 18: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/18.jpg)
Full-Screen Mode• To get rid of both toolbars permanently:
<meta name="apple-mobile-web-app-capable" content="yes" />
• To make top status bar black (looks better than gray):<meta name="apple-mobile-web-app-status-bar-style" content="black" />
• Caveat: These only work if user has saved your site to their home screen!
• More info at:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
![Page 19: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/19.jpg)
Why is this “advanced”?
Problem #1: There is no “back” button. Your site is now completely responsible for navigation.
Solution: Can solve this with JavaScript or plug-in; left as exercise to the user.
![Page 20: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/20.jpg)
Why is this “advanced”?
Problem #2: If the user clicks on any links, the browser will drop out of “full screen mode” back into normal mode.
Solution: All intra-site links must be hijacked by JavaScript to stay in “full screen mode”.
![Page 21: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/21.jpg)
Solution to Second Issue: Use jQuery to Hijack Intra-Site Links
<script type = "text/javascript">// This is needed to avoid the animation when going to new links
in iOSjQuery(document).ready(function() {
jQuery('a').each(function() {jQuery(this).click(function() {
var url = jQuery(this).attr('href');// don't change links that go off-sitevar myRegEx = /lifetricks3/;if (url.search(myRegEx)>=0)
{location = url;return false;}
});});
});</script>Note: this script assumes your WordPress theme is using jQuery!
Your URL here
![Page 22: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/22.jpg)
The Finished WordPress Site
Old New
![Page 23: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/23.jpg)
Again, not a substitute for a real mobile or responsive theme..
But, can be used in addition to a mobile or responsive theme. Some don’t do all of these tricks.
Or, as an easy bonus to improve the appearance of your desktop themeif you are not able to use a responsive theme for some reason.
For more info, check out “Building iPhone Apps with HTML, CSS, and Javascript” by Jonathan Stark
![Page 24: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/24.jpg)
Example That Mimics a Native App Using These Techniques
It is almost indistinguishable from a native app!http://rustyfrank.com
![Page 25: Eye candy for your iPhone](https://reader033.vdocument.in/reader033/viewer/2022052623/559e97861a28abfc1f8b45d5/html5/thumbnails/25.jpg)
Eye Candy for Your iPhone
Tricks to make your WordPress site look more like a native iPhone app
8/10/2012
Brian [email protected] at brianshim.com