My game is using tooltips fow showing some game functions and some members asked me to make a mobile-version of the game.
I am a bit at loss here, how am I supposed to convert it? i just have to change the view part? load a css expecially for a media?
and, what about jquery/javascript?
Thanks.
First off look into jquery touch
http://www.jqtouch.com/ since i imagine you're going to be moving from a more tradition mouse enviroment into a touch based enviroment. Next up is figuring out what your target size is. What is the screen size of your target audience? Next up is smushing everythind down as small as you can get them, most mobile users aren't exactly on good connections and thus every extra KB that you spend trying to download your page is more time in agony for them. Next up is as you already have said make special css rules for them, beyond that you have to completely resize everything make it all fit within 800x480 pixels maximum, that includes every interaction that you're going to have the user be doing. I chose that since that's what most of the 'droid' phones are and the ios devices have much larger screens and thus it wouldn't bother them as much since you can just send the tablet owners to the normal site but with the optimized touch ui. Also remember mobile browsers are slow, really slow compared to the desktops. We're talking sub 1ghz cpus on average with only the more 'top of the line' people using even 1ghz for the OS and the browser so your performance on the desktop is going to be drastically cut back. After you've sat down and used google's closure compiler
https://code.google.com/closure/compiler/on all of your javascript once you have it written, also remember that jquery already does this.
Once that's done be sure to minify all html, all of your css and of course use page speed/yslow. Optimize your page since you're going from 1GB+ of ram guarnteed, to 512MB and below being the norm. After that be sure that your text inputs are easily accessible and thus are easy for them to get into. Plus you have to remember people's thumbs/fingers are going to be larger than the mouse pointer so make sure to increase the target area of all interactions with your UI.
now, all of the above is what i'm going to do once i am working on version 2.0 of the game since for the start it's just about getting it all to run. I have not built a mobile friendly site and thus i cannot guarntee it but i would also say to go read this.
http://www.w3.org/standards/webdesign/mobilwebBasically, remember ping times are going to be doubled in most cases, throughput's going to be down, performance is going to be horrible compared to what your site is now getting. You're going to have to work through that to deliver a good mobile experience. And i wouldn't waste much resources on it unless you have enough members saying that they'd actually use it since it adds to the amount of work that you're going to have to do. If your game's rather stablized right now and you have the time then by all means go ahead since you'll deliver a better experience ot the mobile web users.
Also, don't even worry about the old school phones like the old phones from 2+ years ago, they don't even pass acid 1, or sunspider. my old 8330 cannot do the acid 2 test and barely passes acid 1 so there's your standards with them. The upside is for the more modern ones they all behave the same so to speak. Basically everyone's page will look how you want it to with less work. And that's because android uses chrome mobile so to speak and all apple devices safari mobile, also microsoft, i imagine, is making sure that their browser passes all standards tests. The upside of all of this is that you have to design for one browser and that's it since they all conform to the standards unlike designing a site for the desktop users.
