Eye Candy for Your iPhone: Tricks to Make Your WordPress Site Look Like a Native App

Eye Candy for Your iPhone

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

Brian Shim
brian@brianshim.com
Slides 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 Exploding
Mobile Users > Desktop Users in 2014

How Users Access Twitter
More Use the Mobile Site than iOS

http://blog.twitter.com/2010/09/evolving-ecosystem.html
(September 2010)

Hiding the Mobile Safari Address Bar

Add this Javascript to the bottom of
your page:
<script type = "text/javascript">
// Hide the address bar
window.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 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

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 a
truly 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 icon
iOS (blah)

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

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 from
Mobile 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 iOS
jQuery(document).ready(function() {
jQuery('a').each(function() {
jQuery(this).click(function() {
var url = jQuery(this).attr('href');
// don't 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 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 theme
if 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

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/2012

Brian Shim
brian@brianshim.com
Slides at brianshim.com

Eye Candy for Your iPhone: Tricks to Make Your WordPress Site Look Like a Native App

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Eye Candy for Your iPhone: Tricks to Make Your WordPress Site Look Like a Native App

Similaire à Eye Candy for Your iPhone: Tricks to Make Your WordPress Site Look Like a Native App (20)

Dernier

Dernier (20)

Eye Candy for Your iPhone: Tricks to Make Your WordPress Site Look Like a Native App