WebPlus X4: Mobile Website Demo

[BrianE]

Update 12/1/11: I have an update in the works right now. It will be available soon.


Update 11/28/11: An additional note: with the introduction of very high-resolution devices such as the iPhone 4 with the "retina" display and the HTC Rezound's 720P display, it further complicates the issue of creating a mobile website. Carefully look at your audience and evaluate Google Analytics data before investing time in a mobile site. This article may be of help: http://www.practicalecommerce.com/ar...ile-Searchers-


Update 11/22/11: It has been almost two years since I originally created this tutorial. There is much to be updated, although much of the information is still working and relevant. I have plans to clean up this tutorial and add a few bits of new information, however, with the increase of devices featuring larger screens, mobile sites may no longer be necessary. At this point, there are no plans to further update this tutorial specifically for mobile phones.

Hello,

I've recently been attempting to make a mobile website (specifically for the iPhone) in WebPlus, and I've been quite pleased with the results.

I've decided to start a "how-to" thread, with HTML codes, a demo site, and tricks to getting your site to look its best on the iPhone. I will update the thread with more information as time goes on. I will test different features on the mobile site. As you can see, even the WPP file is very small, so the site loads very quickly. At first view, the mobile website won't appear to be much...but the less complicated the site is, the easier the user can read your site content.

::::demo link removed for maintenance::::

A good portion of these codes have been found via Google or with the help of other forum members. Feel free to use what you wish - I have only compiled this information for you to use.

Note: many of these codes will not work on Android or Blackberry devices.


iPhone HTML codes:

Basic Mobile Site Cofirmation:
This code asks the visitor if he/she would like to go to the mobile site based on the size of the screen. Paste to head:

 <script language="Javascript">

if (screen.width <= 640) {if (confirm("Do you want to go to the mobile site?")) document.location = "http://mobile.mysite.com";}
</script>

iPhone .htaccess redirection:
This code should be placed in the .htaccess file to redirect users to a specific iPhone site. This can be used as an alternative to the Basic Mobile Site Confirmation.

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule .* http://iphone.example.com/ [R]

iPhone .htaccess redirection on sub-directory:

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteCond %{REQUEST_URI} !^/my-iPhone-site/
RewriteRule .* /my-iPhone-site/ [R]

Mobile Site/Computer Site Confirmation with cookie to remember choice:
See this post. Thanks David for your help!

Mobile Site Detection Based on Operating System Type:
See this post. Thanks Blue Ape!

Default zoom - page width (set to site width) Add this code to any website you currently mange as it will help iPhone users not have to zoom in as much. Paste to head:

<meta name="viewport" content="width=320" />

Auto-Hide Address Bar (paste to head):

<script type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>

Call Phone Number (add as hyperlink):

tel:123-456-7890

Open in YouTube app (add as hyperlink):

www.youtube.com

Open in SMS app (add as hyperlink):

sms:12125551212

Open AppStore (add as hyperlink):

www.itunes.com/app/myfavoriteapplinkhere

Auto-Full Screen Mode (paste to head), (caution, may ruin site on desktop browsers):

<meta name="apple-mobile-web-app-capable" content="yes" />

Springboard Icon (paste to head, make sure you have the correct icon uploaded)

<link rel="apple-touch-icon" href="image.png"/>

Change iPhone Status Bar Color (paste to head):

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Tips:
1. It's best to make the size of your pages the same size as the screen you are making your site for.
2. Use the smallest amount of images as possible. Your site should load in 2 seconds or less. The demo site loads in about 1.2 seconds.
3. Icons help quickly identify certain areas of the site. Use them.
4. Make your pages as consistent as possible.
5. The more contrast you can add the better as it is sometimes is hard to read text from mobile browsers.
6. Here is a free tool to view how your site looks in the iPhone web browser.
7. To make your springboard icon, you must upload a PNG with the maximum dimensions of 60x60 pixels. More info here.

The latest wpp file is attached to this thread. I used the icon set from this page. There are more beautiful iPhone icon sets here.

More to come soon! Please share tips and ask questions.

By the way, the link really only looks good on an iPhone. I chose black for good contrast, you can do whatever you want. Drop shadows are applied to the white boxes in case you choose to change colors.

Please try not to quote this entire post. Thanks!

Current Revision:
Main Revision 2

Coming soon:
1. Moving this to the Serif Wiki.

[mjh]

Brian

Nice work. Thanks. Many will benefit.

[BrianE]

Originally Posted by mjh Brian Nice work. Thanks. Many will benefit.

Thank you!

[New2This]

+1 from me

[Neil J]

Very useful, thanks for taking the time

I'll have a good look when I get a min

[BrianE]

Originally Posted by New2This +1 from me

Very useful, thanks for taking the time I'll have a good look when I get a min

Thanks a lot guys!

[AlfredP]

That looks very promising, Brian, but I wondered about this bit:

Originally Posted by webmasternapa Mobile Site Cofirmation: This code asks the visitor if he/she would like to go to the mobile site based on the size of the screen. Paste to head: if (screen.width <= 640) {if (confirm("Sending you to the mobile site.")) document.location = [URL="http://mobile.mysite.com/"]http://mobile.mysite.com[/URL];}

Shouldn't that code go in the body of the HTML (perhaps in the <!--Page Body Start--> section) rather than the head? And doesn't it need to be preceded by <script type="text/javascript"> and followed by </script>?

Alfred

[BrianE]

Originally Posted by AlfredP That looks very promising, Brian, but I wondered about this bit: Shouldn't that code go in the body of the HTML (perhaps in the <!--Page Body Start--> section) rather than the head? And doesn't it need to be preceded by <script type="text/javascript"> and followed by </script>? Alfred

Alfred,

Thank you for pointing that out as I forgot to check that one.

It should be:

<script language="Javascript">
if (screen.width <= 640) {if (confirm("Do you want to go to the mobile site?")) document.location = "http://mobile.mysite.com";}
</script>

Paste to head works fine. Cleaned up site to use 2 master pages.

[kevin_hill54]

Great work.

Thanks for starting point.

Kevin

[djln10]

Hi Brian,

Thanks for the Mobile Website Demo!! I've added the javascript code to my website and have also added a similar one (but with the screen width >= 640) to my mobile site. Seems to work but is there a way of only asking the question at the first visit to the website?? At the moment every time I load the home page it keeps asking if I'd like to go to the other version of my site.

Also I use a Nokia 6500s and when I try to view my full size site on it I don't get the question. It just tries to load the full size site.

If any of you are able to see if the mobile re-direct works that would be great - any comments from mobile users on my mobile site would also be appreciated as I don't really know what it looks like on many other divices.

If you'd like a look the address is: www.dotted-line.co.uk for the full site and www.dotted-line.mobi for the mobile version (unsurprisingly!).

Many thanks.

[BrianE]

Originally Posted by djln10 Hi Brian, Thanks for the Mobile Website Demo!! I've added the javascript code to my website and have also added a similar one (but with the screen width >= 640) to my mobile site. Seems to work but is there a way of only asking the question at the first visit to the website?? At the moment every time I load the home page it keeps asking if I'd like to go to the other version of my site. Also I use a Nokia 6500s and when I try to view my full size site on it I don't get the question. It just tries to load the full size site. If any of you are able to see if the mobile re-direct works that would be great - any comments from mobile users on my mobile site would also be appreciated as I don't really know what it looks like on many other divices. If you'd like a look the address is: www.dotted-line.co.uk for the full site and www.dotted-line.mobi for the mobile version (unsurprisingly!). Many thanks.

Hi,

That would involve using cookies and I don't have the knowledge to do that yet.

However, what you could do is make a blank index.html file for your mobile site containing just the mobile re-direct code/screen detection code.

For example, the user is asked "would you like to continue to the computer site?" If the user decides to click "NO" or "CANCEL", the user is left on the blank index.html page with a 1 second re-direct (configured within WebPlus on the mobile index page) to your real mobile home page. If the user clicks "YES" then the user is taken to the computer site through the code that you configured. Does that make sense? I'd be happy to explain more and will make a WP file if you can't figure it out.

Can you see if that works?

I will add your "larger than" detection script to the list as it might help someone. It would be a helpful feature if someone landed on your mobile site instead of your standard site.

Thanks,
Brian

[djln10]

Originally Posted by webmasternapa Hi, That would involve using cookies and I don't have the knowledge to do that yet. However, what you could do is make a blank index.html file for your mobile site containing just the mobile re-direct code/screen detection code. For example, the user is asked "would you like to continue to the computer site?" If the user decides to click "NO" or "CANCEL", the user is left on the blank index.html page with a 1 second re-direct (configured within WebPlus on the mobile index page) to your real mobile home page. If the user clicks "YES" then the user is taken to the computer site through the code that you configured. Does that make sense? I'd be happy to explain more and will make a WP file if you can't figure it out. Can you see if that works?

Hi Brian,

Thanks for the quick reply. I see what you're saying and I had a look at my mobile site in WP. The trouble is I am forced to have my index page included in the site navigation - I can't deselect it from the page properties as it's grayed out. I'd need to remove it from the navigation for your suggestion to work - then the normal links to the home page would indeed be a page called 'home' rather than the real index page which would just have the script and a timed re-direct.

Am I missing something or is there another solution? Does anyone else know how to do it with cookies?

Many thanks.

David.

[BrianE]

Originally Posted by djln10 Hi Brian, Thanks for the quick reply. I see what you're saying and I had a look at my mobile site in WP. The trouble is I am forced to have my index page included in the site navigation - I can't deselect it from the page properties as it's grayed out. I'd need to remove it from the navigation for your suggestion to work - then the normal links to the home page would indeed be a page called 'home' rather than the real index page which would just have the script and a timed re-direct. Am I missing something or is there another solution? Does anyone else know how to do it with cookies? Many thanks. David.

David,

I forgot you have to include the index file in navigation.

Hopefully we can get some help on this one.

Thanks,
Brian

[djln10]

Hi Brian,

This has been driving me nuts all weekend so I've been doing lots of digging around online and I think I've cracked the cookie solution. I've tried it on my mobile site and all seems good so far. Please have a look and see if it works for you: www.dotted-line.mobi

The first time you visit the site it should ask if you want to be re-directed if you view the site from a normal sized PC. After that first visit it shouldn't ask the question again if you visit the page within 1 day. (I just picked 1 day as it suited me). I've left a test button lower down the page to delete the cookie. I'll remove this once I'm satisfied it all works properly. The code is below if you're interested;

The following is pasted into an html fragment - paste to header - ignore page position:

<script>
function getCookie(NameOfCookie){
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1) {
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}

function setCookie(NameOfCookie, value, expiredays) {
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));

document.cookie = NameOfCookie + "=" + escape(value) +
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}

function delCookie (NameOfCookie) {
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

function DoTheCookieStuff()
{
visited=getCookie('visited');
if (visited==null)
{
setCookie('visited','yes',1)
if (screen.width >= 640) {if (confirm("This is the mobile version. Do you want to go to the full size site?")) document.location = "http://www.myfullsizewebsite.com";}
}
}
</script>


The following is then pasted into the body of the same html fragment:

<body onLoad="DoTheCookieStuff()">


If you want the cookie to last for longer then change the number 1 in the line:
setCookie('visited','yes',1)
so for the cookie to expire in a year it would be:
setCookie('visited','yes',365)

I think I've grasped the basics but don't pretend to know anything much about cookies at all - it was trial and error on my part!

Hope this helps make the screen width test more usable. Thanks again for your help.

David.

[grovesie]

David,

Using Firefox, if I close the browser, it deletes the cookie. I don't knpow if you can change it from a session cookie?

Also, having visited the site and clicked to go to the full size site, if I then close the tab (not browser) and then visi the site again, it takes me to the mobi site without the confirmation box.

Steve

[AlfredP]

Hi Steve,

Originally Posted by grovesie Using Firefox, if I close the browser, it deletes the cookie. I don't knpow if you can change it from a session cookie?

I'm sure I know even less about cookies than David claims to know, but it looks as though the "expires" date/time isn't being set properly. Take a look here for an alternative script accompanied by some useful background information.

Also, having visited the site and clicked to go to the full size site, if I then close the tab (not browser) and then visi the site again, it takes me to the mobi site without the confirmation box.

I think that's to be expected. You always start from the mobi version, and in David's example the cookie only remembers whether or not you've visited the site before: if it's your first visit it asks if you want to leave the mobi version but it doesn't record which version you choose to view.

Alfred

[djln10]

Hi Steve & Alfred,

Thanks for your comments. I've had a look at my mobile site in Firefox and it behaves for me (same in Chrome & IE). I'll look into the expiry issue though - thanks for the article Alfred - I had looked at that before during my search for any and all cookie information but came away more confused than I already was. Now I understand cookies a little better I'll give it another go.

Alfred - you're also right about the cookie only records that the site has been visited so does not ask the question again. It would be great to get it to remember which answer was selected and do the same again without asking but I wouldn't know where to begin with that! It's a miracle I managed to get cookies working at all!

David.

[AlfredP]

Originally Posted by djln10 Alfred - you're also right about the cookie only records that the site has been visited so does not ask the question again. It would be great to get it to remember which answer was selected and do the same again without asking but I wouldn't know where to begin with that! It's a miracle I managed to get cookies working at all!

Hi David,

I think you just need to put up the confirmation box before you call setCookie() (in the DoTheCookieStuff() function in your example) and then use the reply to determine whether you do

setCookie('visited','full',1)

or

setCookie('visited','mobi',1)

On the next visit, your if (visited==null) test would fail and you could then do a further test for if (visited=='full') to find out whether or not to leave the mobi site.

Alfred

[BrianE]

David,

You are fantastic! Have not had a chance to test it on my site, however, the one problem is if you select "yes" while on your computer, you are taken to the computer site (normal) but then if you try to re-visit the mobile site, you are taken only to the mobile site. With cookies, you should be able to make it default for the user to go to the computer site if they click "yes" or always go to the mobile site if they click "no". Does that make sense?

Thanks for your help. Did you really learn cookies that fast??

[djln10]

Hi Alfred & Brian,

Thanks again for the comments. I agree with what you're both saying and have tried for hours tonight to get this to work so that the cookie is set to one of three states: 'null'=show the dialogue box, 'fullsize'=just go straight to the full size website and 'yes'=do nothing and remain on the mobile site.

I've fiddled around with the code but just can't get it to behave. It really does show how little I know about cookies. Anyone who knows what they are doing would probably look at the mess I've made and just laugh. As it stands it doesn't work! There is now an error message at the bottom of IE and regardless of whether you select 'ok' or 'cancel' it just goes to the main website.

I won't paste all of the code as the only bit that needs changing is the function. This is as far as I've got with it:

function DoTheCookieStuff()
{
visited=getCookie('visited');
if (visited==fullsize)
{
document.location = "http://www.dotted-line.co.uk";
}
}
{
visited=getCookie('visited');
if (visited==null)
{
if (screen.width >= 640) {if (confirm("This is the mobile version. Do you want to go to the full size site?")) setCookie('visited','fullsize',1); document.location = "http://www.dotted-line.co.uk";}
setCookie('visited','yes',1)
}
}
</script>

If you (or indeed anyone else reading this) can shed any light on what I'm doing wrong it would very much be appreciated!

If not - I suspect it will end up being the simple version that just detects a previous visit which could just be set as a session cookie. It'd be great to find the proper solution though.

Many thanks.

David.