Search Result for 'Waplestore:Watching'

  1. 2010.09.13   Mobile Website Development Tips for iPhone #1
Waplestore:Watching 2010.09.13 19:51

Mobile Website Development Tips for iPhone #1

  • 비회원
We had to consider using the special technologies when we first designed our website.

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.



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.
^^;


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.


신고

Trackbacks

http://blog.waplestore.com/trackback/390

Comments

  1. Haebin
    Haebin 2010.11.30 18:15 신고

    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!

    • Jay Cho
      Jay Cho 2010.12.01 01:20 신고

      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! :)

  1. edse83
    edse83 2011.02.01 17:46 신고

    great!

  1. gaia
    gaia 2011.03.09 07:40 신고

    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

  1. gaia
    gaia 2011.03.09 17:54 신고

    yesss! it's works... but when i start from my web clips, the tootlip is always visible :-( do you know the reason???

    • Jay Cho
      Jay Cho 2011.03.09 21:41 신고

      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! :)

close

Install this web app on
your phone: tap + and
then 'Add to Home
Screen
'