Waplestore:Watching
2010.09.13 19:51
That is because, we thought developing both web and mobile versions of the website is ineffective, and moreover, it's very hard to maintain two different versions for the small company, like us.
Therefore, we decided to develop just one version of the website, but used several tips to enhance both readability and usability for mobile environment, especially iPhone and iPod Touch.
I'll show you one of the tips what we used today, that is concerned with " Webpage Icon for Web Clip".
You can enable users to add your webpage link to the Home screen, and to make these links, represented by an icon and called Web Clips, the user just tab "+" button and then tap “Add to Home Screen.” on their Mobile Safari.
It's quite simple and very useful, however, the problem was only few people know about this function.
One of our Woogoons, @ejang, gave us a chance to solve this problem, and we finally found the solution, which is what I'm going to share with you now! :)
The hint was YouTube's mobile website.
A tooltip pops up to explain 'Add to Home Screen' function for Mobile Safari users.
A tooltip pops up to explain 'Add to Home Screen' function for Mobile Safari users.
To explain 'Add to Home Screen' function, we decided to show a tooltip, which is the same as YouTube's.
Let's getting started now!
First, you need to import JavaScript Libraries, which make implementation more easier.
I used jQuery and it's Cookie, Timer Plugins here.
Then, I wrote a few lines of JavaScript code to pop a tooltip up with animation and drop down after 5 seconds, only if the user access from Mobile Safari. (see " Using the Safari User Agent String")
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var
userAgent = navigator.userAgent.toLocaleLowerCase();
if
(userAgent.indexOf(
'iphone'
) != -1 || userAgent.indexOf(
'ipod'
) != -1) {
var
mobile_notice_height = 129;
var
mobile_notice = $(
'#mobile_notice'
);
mobile_notice.css(
'top'
, $(window).height());
var
mobile_notice_top = $(window).height() - mobile_notice_height;
$(document).ready(
function
() {
mobile_notice.animate(
{
"top"
:$(document).scrollTop() + mobile_notice_top +
"px"
},
500
);
$(window).scroll(
function
() {
mobile_notice.stop();
mobile_notice.animate(
{
"top"
:$(document).scrollTop() + mobile_notice_top +
"px"
},
1000
);
});
});
$(document).oneTime(5000,
function
() {
mobile_notice.animate(
{ top:$(document).scrollTop() +
mobile_notice_top + mobile_notice_top +
"px"
},
1000,
function
() { mobile_notice.hide(); }
);
});
}
|
And finally, I adapted the tooltip layer image, which is designed by Kay, and we're done!
Actually, we have one more problem, that is, the tooltip is too small for our website.
It's because the width of our website is quire larger than the usual mobile website's. ^^;
It's because the width of our website is quire larger than the usual mobile website's. ^^;
I, as a developer, was happy to find new features and implement it, but I didn't think hard about how I show and explain it to our users.
However, I could have a chance to remind about what the good service is and what I have to do for making it, by this practice.
See you on next posts. Thank you! :)
(+) You can download the entire source code here, which is really simple to apply on your website.
Hi, this is Haebin!!! Anyway, thanks for the tip! I'm going to apply it to my toy project when I get back home! Thank you!
So happy to see you here, Haebin!
Why don't you visit our office? I'll bake a waffle.. no, no.. "many waffles" for you! :)
great!
hi, great works!!! but i have a problem... i'd tried to work with this tips on jqtouch frameworks... but it's seems doesn't work... do you have any idea?? Thanks :-) Gaia
yesss! it's works... but when i start from my web clips, the tootlip is always visible :-( do you know the reason???
We used browser cookies to popup the tooltip only once, so you need more code for creating and checking the cookies.
We believe that the following url is may helpful to you.
<a href="http://waplestore.com/js/script.js" onclick="return openLinkInNewWindow(this)" rel="external nofollow">http://waplestore.com/js/script.js</a>
Thank you for your visiting our blog, and we are very happy to be able to help you! :)