Eye Candy for Your iPhone Tricks to make your WordPress site look      more like a native iPhone appBrian Shimbrian@brians...
Things we can fix in Safari Mobile•    Change status bar color from     gray to black•    Hide browser address bar•    Sca...
Why do these things?•   They look cool.•   To get more pixels for your site.•   Clients want them.•   And…
Mobile Usage is ExplodingMobile Users > Desktop Users in 2014
How Users Access Twitter       More Use the Mobile Site than iOShttp://blog.twitter.com/2010/09/evolving-ecosystem.html(Se...
Hiding the Mobile Safari Address BarAdd this Javascript to the bottom of  your page:<script type = "text/javascript">// Hi...
Add the code to your theme footer..
Notes• Provides extra sixty pixels of height for your site!• Number One Mistake: Web page must be taller  than the browser...
Scaling the Browser WindowAdd this meta tag to the <head> section of your page:<meta name="viewport" content="width=device...
Add the code to your theme     <head> section..
Here are the results with       these two changes:Original    New (scale=0.5)   Or this! (scale=1.0)
This is NOT a replacement for atruly responsive mobile design! But, it’s better than nothing,   and it took five minutes! ...
Now let’s create a custom icon..Icon created by               Custom iconiOS (blah)
How to create a custom homescreen icon for iPhone/iPod Touch• Create a 57 x 57 pixel PNG file (square corners)• WordPress ...
It’s all about enhancing the user            experience..                         Ugly!
Custom Splash Screen• Create a 320 x 460 pixel PNG file• WordPress plugin: “Blog Icons”• Note, the splash screen will only...
Now for something more advanced…Permanently eliminating both toolbars fromMobile Safari! (aka “Full Screen Mode”)         ...
Full-Screen Mode• To get rid of both toolbars permanently:  <meta name="apple-mobile-web-app-capable"  content="yes" />• T...
Why is this “advanced”?Problem #1:  There is no “back” button. Your site is now  completely responsible for navigation.Sol...
Why is this “advanced”?Problem #2:  If the user clicks on any links, the browser  will drop out of “full screen mode” back...
Solution to Second Issue:       Use jQuery to Hijack Intra-Site Links<script type = "text/javascript">// This is needed to...
The Finished WordPress Site     Old           New
Again, not a substitute for a real mobile orresponsive theme..But, can be used in addition to a mobile orresponsive theme....
Example That Mimics a Native App    Using These Techniques  It is almost indistinguishable from a native app!             ...
Eye Candy for Your iPhone  Tricks to make your WordPress site look more             like a native iPhone app              ...
Upcoming SlideShare
Loading in …5
×

Eye candy for your iPhone

850 views
803 views

Published on

Tricks to make your WordPress site look more like a native iPhone app

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Eye candy for your iPhone

  1. 1. Eye Candy for Your iPhone Tricks to make your WordPress site look more like a native iPhone appBrian Shimbrian@brianshim.comSlides at brianshim.com
  2. 2. 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
  3. 3. Why do these things?• They look cool.• To get more pixels for your site.• Clients want them.• And…
  4. 4. Mobile Usage is ExplodingMobile Users > Desktop Users in 2014
  5. 5. How Users Access Twitter More Use the Mobile Site than iOShttp://blog.twitter.com/2010/09/evolving-ecosystem.html(September 2010)
  6. 6. Hiding the Mobile Safari Address BarAdd 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
  7. 7. Add the code to your theme footer..
  8. 8. 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)
  9. 9. Scaling the Browser WindowAdd 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
  10. 10. Add the code to your theme <head> section..
  11. 11. Here are the results with these two changes:Original New (scale=0.5) Or this! (scale=1.0)
  12. 12. This is NOT a replacement for atruly responsive mobile design! But, it’s better than nothing, and it took five minutes! So, why not?
  13. 13. Now let’s create a custom icon..Icon created by Custom iconiOS (blah)
  14. 14. How to create a custom homescreen 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
  15. 15. It’s all about enhancing the user experience.. Ugly!
  16. 16. 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" />
  17. 17. Now for something more advanced…Permanently eliminating both toolbars fromMobile Safari! (aka “Full Screen Mode”) Full Screen Mode
  18. 18. 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/appleapplic
  19. 19. 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.
  20. 20. 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”.
  21. 21. 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); // dont change links that go off-site var myRegEx = /lifetricks3/; Your URL here if (url.search(myRegEx)>=0) { location = url; return false; } }); });});</script>Note: this script assumes your WordPress theme is using jQuery!
  22. 22. The Finished WordPress Site Old New
  23. 23. Again, not a substitute for a real mobile orresponsive theme..But, can be used in addition to a mobile orresponsive theme. Some don’t do all ofthese tricks.Or, as an easy bonus to improve theappearance of your desktop themeif you are not able to use a responsivetheme for some reason.For more info, check out “Building iPhone Apps with HTML, CSS, andJavascript” by Jonathan Stark
  24. 24. Example That Mimics a Native App Using These Techniques It is almost indistinguishable from a native app! http://rustyfrank.com
  25. 25. Eye Candy for Your iPhone Tricks to make your WordPress site look more like a native iPhone app 8/10/2012Brian Shimbrian@brianshim.comSlides at brianshim.com

×