Recent Posts

Recent Comments

Search Result for 'Tips'

  1. 2010.09.13   Mobile Website Development Tips for iPhone #1
Waplestore:Watching 2010. 9. 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.


Comments

close

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