Eye candy for your iPhone
Upcoming SlideShare
Loading in...5
×
 

Eye candy for your iPhone

on

  • 774 views

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

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

Statistics

Views

Total Views
774
Views on SlideShare
774
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Eye candy for your iPhone Eye candy for your iPhone Presentation Transcript

    • Eye Candy for Your iPhone Tricks to make your WordPress site look more like a native iPhone appBrian Shimbrian@brianshim.comSlides at brianshim.com
    • 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
    • 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(September 2010)
    • 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
    • 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 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)
    • 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
    • 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! So, why not?
    • 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 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
    • 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 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" />
    • Now for something more advanced…Permanently eliminating both toolbars fromMobile Safari! (aka “Full Screen Mode”) Full Screen Mode
    • 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
    • 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.
    • 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”.
    • 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!
    • 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. 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
    • Example That Mimics a Native App Using These Techniques It is almost indistinguishable from a native app! http://rustyfrank.com
    • 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