Building Mobile Friendly Websites - Ankit Gupta - Google India SearchMasters '09

Key Takeaways

hi uh my name is anit uh I work in the mobile team here uh and I'm going to talk about uh a lot more than just uh building mobile friendly websites uh I'm going to talk about uh uh why uh first of all why they are why they important why we need to build them then of course I'm going to tell them how to build them and then uh I'll move on to uh what what the relationship is uh with uh with Google search so oops yeah why should mobile friendly websites uh you might say that yeah I have a perfectly good website that works on uh on my desktop uh I get a million to care about people who are on mobile phones well the answer is very simple and uh you might many of you might know about it already uh perfectly visible or not but uh we have uh we have close to 50 million internet users today uh but as compared to that we have 330 million mobile phone subscribers out of which 80 million uh mobile phones are GPRS uh you might get a million million page views every day but if you want to go to 10 million uh then tomorrow then maybe mobile phones way to go uh then you might say okay uh so I have a good website why don't I just show that to all my uh all the people who are using mobile phones uh well the answer to that is uh uh is not only is not only uh device considerations here uh but also because uh the user a mobile phone user is very different from uh from a desktop user his intent uh on visiting a website may be may be very different so uh a user the mobile be someone who is like waiting in a line he must be he may be going to his college or uh he just know he's just going and wondering maybe his train got late but he doesn't know how to how to know uh uh maybe he just got someone he maybe lecture so maybe some of you uh may be a good mobile user uh someone who is looking for a place to eat uh he's in a new place uh Chinese food uh and he's on the road he just wants to know where to eat uh and of course uh the input output patterns are about them in detail in the future slides so uh so now that uh to go after mobile phone users but I don't really know how a mobile website should look uh how what the flow should be is it the same as not uh so the next question is what should I consider uh while designing a mobile friendly website uh so these things uh also make sense for a desktop website but they matter a lot more uh on a on on a for a for a mobile for a mobile friendly uh as I as I said before it is a different user uh a mobile user needs some spe is looking for some looking to get there quickly so he may be someone who just wants to know stock coach he's not interested in anything else but he wants to know stock CS of a particular of a particular share uh every minute or so or he's someone who's just looking for help he's in an unknown place and he doesn't he doesn't know the to the the way to the nearest uh bus stop or anything so a mobile user is looking for a specific information and he's looking to get there quickly uh it's a different device it's a it's a after all it's a mobile phone it's a completely different device uh screen size the main things that that you need to worry about as a as a web developer uh so screen size on a mobile phone is uh is very different uh it's not it's not a 19in screen uh in fact uh it's it's not it's nearly equal to 2 in by by 3 in on a good mobile phone uh it may be less than 2 in on a on a on a mediocre one uh so a screen size is very different and not only different it's very diverse across many mobile phones uh as it's as it's shown in the image which again I think is not up to the mark uh it may range from 128 CR 128 uh SS uh 320 cross uh 480 for an iPhone and not only and not only uh does the screen size differ it's the also so some so some of the mobile phones may may have the length great than breadth but it may be the opposite for some other phones and now with the F which have very really good accelerometers it just they keep on changing so if you like hard Cod the hard Cod the side then you're going to be in trouble because as soon as the mobile phone turns uh the layout completely changes uh the next next thing is uh next thing is the keypad right uh typing is really painful uh don't make your users type a lot on your on on a mobile phone they won't like it and they will find someone else who does the job better so even with even with the really cool are that are there it's just very difficult to get your hands both your hands on the keypad and be on the mobile phone at all the times the third is is more of a more of a piece of advice which is uh don't expand your website horizontally do it vertically uh uh one of them being uh if if if the website is more horizontal then people just whether uh many people they just don't discover uh uh horizontal in the site but they tend to go vertical uhon is uh is that uh many of the older mobile phones uh on many of the older mobile phones uh the web browsers they don't even let you horizontal try to do horizontal scroll it will still scroll vertically and so it's just not technically possible to scroll horizontally the third and which is uh I think the most important is that uh it's a it's a different network it's not a it's not a 4 MVPs or 8 Mbps broadband connection with a uh uh with a really good uh with a really good uh uh with a really good uh reliability uh but in fact it's very slow it it's like 40 kbps uh and so uh it's so in stud that the that the packet loss may vary about may go up to till 40% uh or 50% which means that one of every two packets is going to get lost so it's very unsteady uh if if the website uh has has some secure Pages uh then uh the SSL latency goes up to as as big as uh uh as much as 7 folds so uh a normal a normal a normal web page uh when uh a normal web page may take 5 Seconds uh https page may go up to 30 seconds which is just a deal breaker for uh many things uh the third is uh we still don't have very good unlimited data plans in our country so uh they uh uh I think they just arrived but they're still very very costly something like 78 800 rupes per month so still uh uh you have to design a website considering that the user would be on many cheaper data plans data plans which are uh which are not so reliable the third is uh the fourth one is uh the 3G and 3.5g networks are still uh are still uh not very uh still away uh in fact I just heard the news that BSNL just in many uh in many cities but uh it will be a while before other place enter that market and it it becomes really uh it becomes a good reality like like in Japan and other Advanced countries so uh now now that you know how to uh uh how what to consider there are some other design tips uh that I that I thought I should mention uh which which are uh keep the mobile site very simple uh don't try to cram all the use cases that you that you have on your desktop website on a mobile phone because the user just gets intimidated he doesn't know what to do so keep it very simple uh keep it task oriented uh so a user should know what to do uh if he has certain use case in mind so let's take the example for of of orcut so if a if if a user wants to scrap someone else then he should know uh in one or two then he should be able to do so in one or two clicks he should not take more than uh more than five clicks to do something uh uh keep the load link density uh keybard density very very low uh not only because uh it looks it looks very crammed but also because on some even on some of the newer devices like the iPhone or the or the Android or the Android G1 uh it's very it's very difficult to tap on the mobile phone with the if the if the density is too high uh the next point is that the top of top of page is really valuable uh it's valuable even on a desktop website but but the the value even increases on a mobile on a mobile phone so uh don't try to show off ads on the top of the on the top of the page uh keep your primary use cases in mind and show only those uh breakdown complex oper uh always have a handlink to go to the home or back uh this is very important uh if if the if the website has many pages uh and there are some complex flows then try to to make sure that if a user gets lost then he has a way to come back very easily uh break down complex operations into smaller operations and with feedback uh the feedback is very important as I said uh because the network is very steady uh unsteady uh and so if the if the if an operation is taking like 20 seconds then the user doesn't know whether his request went through or not and he's he's trying to wait for some feedback to come and so if so uh please give prompt feedbacks on every smaller even the smallest of operations on the website uh the website should be usable if all if all the styles are turned off this is important because many of the phones they don't uh support CSS or if they do they have a different different uh uh they have uh uh different compliance levels so a particular CS property may work on one phone and may not work on another phone so just try to switch the CSS off and see if the website is usable or not uh uh the website should adjust with changes to screen SI and orientation so please don't uh hardcode the length and breadth uh try to catch uh resize events and if you're not try if if you're not able to try uh if you're not able to catch those events then make the site in such a way that it automatically uh uh it automatically adapts so don't try to uh keep pixels in mind but work in percentages so uh now now now you know uh that I need to create a mobile website and uh I know how it looks on paper uh I have sketches made up of made up of the website but I need to see it on the mobile browser so how do I build it so so the question to ask is uh what markups protocols and Technologies are available today to help me make one uh so you might have heard of these acronyms a lot I'm I'm sure but uh I just thought I would uh spend one or two minutes on these for the sake of completeness uh VAP uh so the full form is wireless access protocol and this protocol was designed uh in early to mid '90s for Wireless Communications to for wireless devices to interact with the server and uh the markup associated with this uh with this protocol was uh initially was wml which is Wireless markup language uh wml in its uh the intent behind wml was actually very good uh the designers actually uh wrote the specs in way so that a VB site could actually make phone calls uh it could actually interact with some phone properties and also like message and stuff but uh uh what happened was uh uh many of the phones many of the phones actually didn't comply with it and so what you actually got in the end was a different markup altogether which didn't do anything else other than what HTML already does uh and so uh uh uh basically website developers didn't like this that they had to learn another language and they totally gave up on wml uh so what what evolved was xhtml uh and what xhtml is uh is it's basically XML uh uh it's basically a very well-formed HTML uh so HTML as you know is uh is very flexible uh you you can even get away with uh uh with unmatched tags uh tags but uh xhtml doesn't allow you to do so so xhtml is basically well formed HTML but also with with a limit on with with a limit on on what tags you can use and what script elements you can use uh by the way if there are any questions I can take them at any time so uh the current version of VAP which is most uh which is most popular is VAP 2.0 and the markup associated with it is xhtml mp uh MP stands for mobile profile so xhtml MP is nothing but just XML but uh with uh uh with uh uh with even lesser tags that are that are that are allowed and even lesser scripting elements like onload events or uh or on Focus events not all the events are uh allowed so apart from uh so all so if if I uh if I if anyone says that my phone is uh is capable uh uh is a VAP enable phone uh that particular that means that uh uh he can view he can view xhtml websites on his mobile phone uh the next Technologies uh is uh with the Advent of newer browsers and newer mobile phones is uh the newer uh the newer mobile phones the the newer browsers uh are pretty much capable of rendering simple HTML with uh CSS JavaScript and more recently ax also uh so so your normal websites if if if the layout is good and if uh if if you keep the latency in mind it can pretty much work on the newer phones uh so you might say what about about security so ssl2 is is ssl2 is also supported uh on most of the on most of the mobile phones even the older ones so you don't need to worry about whether https is supported or not they are uh Google gears uh so Google gears is already available on on the windows on the Windows mobile so your web app can make use of all the gears apis to to do fancy stuff like offline functionalities or uh you could uh uh you can uh you can also access the location to the gears API so but right now it's only uh available on uh on Windows mobile uh uh Apple has been talking about a lot about location API so what the concept is that uh it's basically JavaScript API that the that the web app can use to access the location and so basically the app can become a lot more location uh HTML 5 you might uh you might have heard of of this also uh HTML 5 uh so the the most popular uh HTML standard today is HTML 4 and HTML 5 is is is a pretty new one and what it allows more is uh is basically it has good sensible tags uh which means that uh tags like audio and video which let you embed audio and R media content without without without actually embedding uh flash objects or or window media objects or basically YouTube objects and so basically uh adding audio and video tags uh audio and video content becomes very easy uh it also has a location local database uh which actually gears has already uh so uh local database uh allows you to keep your content uh in a cache and basically if the if the network goes down you can still use the cache to uh to to to show uh the previous content that has been faed uh HTML 5 can R animations uh without plugins uh it already has a canvas support So a user can basically draw using these canvas tags and you don't need very uh very JavaScript to do that uh messaging uh messaging between two documents in a browser has been very tough uh till now uh uh even if if if you have an if frame on a site on your site it very it becomes very difficult to communicate between two if frames but HTML 5 has a message infrastructure which makes it very easy actually uh so most of these things uh uh Google gears location API Ajax all this is what what happens on the client side so you might you might ask about uh what okay so what happens on the server side and the answer is very simple again uh the server side is actually pretty much the same uh you don't need to do anything special what you have on the desktop type is pretty much uh is pretty much okay the only thing that you need on the server side basically is uh uh is basically user agent detection so user agent is a field which goes in the HTTP header of any request and which basically tells the server where the from what kind of a device or from what device the uh the the request is coming from and and so basically on the Bas on the basis of user agent the server can decide uh what what template to show and basically uh What uh What uh What uh uh basically what HTML to render so uh I'll concentrate for the next 2 3 minutes on uh on building an xhtml website uh the reason for doing so is the still uh the long tail of users uh most of the most of Indian users carry only uh xx and xhtml uh capable capable phone um things like iPhone and and Android phone are still not very popular in India so uh xhtml is where where uh is where most of the user base sits now so uh I'll skip the part uh which says what what is xhtml because I already told you so uh but uh I'll just skip to how you're going to build an xhtml website uh so uh the first thing you need is is a simple htmlcss authoring tool which I'm you all of you already have because you have been developing websites for uh for the desktop uh and that that is actually enough uh you need a web server so again whatever web server you use Apache or uh whatever it will work uh the uh the only thing that you need on the server side special is is a user agent uh detector which already is there in all of the web servers uh you need to know uh what xhtml compliance levels your Target phones have so X so there are two or three xhtml compliance levels in the market today uh and basically they each uh so you have compliance levels like strict or transitional which actually tell uh what kind of what kind of uh uh tags uh this this phone will support and you should already know basically what the phone is supporting before you build the app uh the next thing is uh so wall and image transcoders uh so before uh before uh talking about wall uh I'll talk about uh Wireless Universe uh Universal resource files so each phone has a wireless Universal resource file attached with it which actually tells what the what what are the capabilities of this phone and basically it's an XML file which which tells you what the resolution is whether the browser uh gives you a file a file system access uh whether browser has CSS support or not so basically all the capabilities and a simple true and false associated with each property which tells you what the phone can do and what the phone can't do so is just a Java API to u to read this XML file so on the on the server side if you get the user agent you just make a wall call and and it will tell you whether this whether a particular functionality is available or not and so basically in the templates you can just uh uh decide to uh decide to embed some certain functionalities and Skip another ones uh you need a browser with capability to switch uh user agents uh so I won't name any browser in particular but uh uh but uh most of the browsers some browsers have plugins or already have a functionality to to uh uh to switch user agents uh the reason you need this is because you might you might not have each mobile phone that you in your hand that you would like to Target so a user agent so basically in your normal in your normal desktop browser if you just change the user agent the server won't actually know what uh that the the request is coming from a desktop it will think that the request is coming from a particular mobile phone and it will render the templates that you actually want to test uh next is mobile emulators uh so each SDK uh whether it is a Symbian or or or a or a Sony SDK or or iPhone SDK the each of them comes with a mobile emulator and most of them uh and most of the emulators already have uh have a browser uh browser emulator so basically you can just use that to to actually see whether the layout is coming correct whether your uh whether internationalization is working correctly or not whether it is able to render specific fonts fonts or not so mobile emulators are actually pretty helpful uh and the last thing you need is is a is a is some sort of a xhtml validator so a validator uh would actually just validate whether the xhtml uh meets the compliance level that you have specified in the document or uh uh what are the mistakes and it can and a good validator uh can actually can actually tell you that these are things missing in your xhtml and you need to correct these uh one of the pretty helpful uh validator is a is a is an online one which is uh which you can access on uh ready. Mob so uh here's actually a screenshot uh so uh I tried this morning to uh to actually validate the xhtml of of the Google results page on this site and actually it showed that the that the page was uh uh what was overall good and so basically these bar graphs they tell you what the latency is like from certain geographical areas and so they have basically uh they have infrastructure to measure the latency from many other uh geometric geographical areas and it will tell you uh uh on the bottom of uh uh I don't think you you can see this but it will have 23 tests passed uh three warnings uh zero fails uh comments also so it can tell you actually that you should do this and you should not you should not be doing this so uh what are the what are the other dos and don'ts of an xhtml website uh do make use of the access Keys uh again uh there are there are many reasons for doing that uh the most important of them is uh is to make your site more usable uh so basically if you if you if if a page has two or three actions associated with it uh you should bind them to keys so you should have one two to do something two to do something else and three to let's say log out or four to let's say log out uh one maybe to go to home or anything so you make use of access Keys uh second is uh resize images based on the device size uh uh I say this not because uh it's important for layout it's also because important for latency so if you are sending a big image where your mobile mobile where your Mobile screen size is just like 1 and a half in or 2 in you don't need to send uh very five uh very big 5 megapixel kind of a photograph you need to resize it on a server and then send that uh do keep the xhtml code semantic uh so things like uh having uh uh H1 tags before H2 tags these are pretty important uh make sure the right dock type and the correct encoding is set so even though your document may be a good xhtml document it may be well formed but since you have mentioned the do doc type as wrong many phones will outrightly reject it and not try to even pass the xhtml so it's very important that the right doc type and right encoding is Set uh do not use if frames and tables uh even though the xhtml uh the even the most basic of xhtml compliance levels tells that uh uh tables are actually okay but uh the phones that promise to comply with those levels even they don't support tables so it's actually sad uh uh uh that things like tables that are used very often in the desktop world don't work well on the xhtml front uh do not do not use fancy form elements uh so don't have things like file uploads and all uh unless you're pretty sure that the that the uh that the you sending only you're sending this functionality to phones that actually have it in fancy form elements and they'll just say page not rendered or they won't even try to render it uh keep uh uh do not keep uh multiple Scrolls uh as I said scrolling is very difficult uh try to try to pag it in a way so that you have uh after a one screen you have more more kind of a link or a next kind of a link do not do not uh uh do not uh tell your user to scroll a lot uh do not have links to unsupported doc types this is very important uh so maybe your page is totally okay you have the right doc type set and everything and the content looks good but actually the links that you have to other sites they may not have the not uh the wrong they may not have the right doc type set so uh so basically when the user is on your side he's happy but when he goes when he clicks on a link he he gets a he gets a page not rendered and this actually frustrates the user Yes Yes actually I'm I'll come to transport uh uh afterwards in the future slides yeah uh do not have popups uh I think anyone everyone knows this uh this is true for uh desktop also uh do not have even uh JavaScript do not have JavaScript alerts uh and do not have even soft popups like uh which you basically render from the server s side uh because things like Z index and everything they don't work well on a mobile phone so uh you have made a pretty good xhtml website and 50% of users are very happy because they were not they were not able to visit your desktop website before uh on on their mobile phone uh and so they're very happy but but the users that have an iPhone or they have a G1 uh they're not happy they say I didn't pay 40,000 rupees for this uh uh they want something more they want some flashy stuff they want a very basically they want a very good user experience so how to take a next step with JavaScript and Ajax uh so first of all let me say let me tell you what what uh uh JavaScript andja can do uh I can kind of assume that everyone knows what JavaScript is and what Ajax is uh in one line I can just say that uh uh Ajax Ajax is nothing but just a an asynchronous call to the server and uh the server basically just sends the data back and so so the basic the basic Point here is that uh the page does not change and so the call back on your client site it may it may just read the it may just read the data it may render it or it can even just store it for future use so the main point is uh it is asynchronous it doesn't take the user away from the page and you can Sim simultaneously fire two or three Aja request to the servers so uh what what can Ajax do uh Ajax and JavaScript can actually really speed up a web app uh there are three three main ways in which you can do so uh one of them being uh prefetching so let's say let's say uh you are on your homepage and let's say uh you're pretty you're pretty sure that 80% of your users after visiting the homepage they they they they visit a particular link so let's say let's take the case of orot if if on a home if someone is on a homepage then he he may like to visit his scrapbook more than often so the most likely link that he would uh he would visit is a scrapbook link so what what ax can do is uh it can just preface the data from the Scrapbook and whenever the user just whenever the user first reads the homepage and visits visit the Scrapbook the data is already there and basically the phone doesn't take any time to to read uh to to show the scraps it's instantaneous uh the the second thing is caching so not only can you can you prefet this can you prefet the Scrapbook data you can also store it so even afterwards whenever the user uh goes to goes to the Scrapbook you don't have to you don't have to make another request it's already there and so uh caching caching really helps uh the third one is uh you can have incremental fetches of updates uh instead of the whole the whole page and uh so what I what I mean is let's again let's take an example let's say let's say the user is on a scrapbook which is basically a list of scraps and uh he he's pretty sure that he got a new scrap uh and so let's say he he he clicks on a link called get more scraps uh or get new scraps uh so what what that link can do is is just just fetch the update and don't doesn't fetch the whole scrapbook page so so the data that is coming now maybe something like just 5 500 bytes whereas earlier it used to be something like 10 KBS or 20 KBS so an Ajax uh uh an Ajax uh Ajax basically can really speed up a web app uh it can immensely improve the user experience as I said you you you have a case of instantaneous clicks which are which are really uh good to have uh you can Implement a lot of user actions in line so uh in fact I I have a small demo to demonstrate this uh let me uh an Android phone and uh this is our arot web app for for this phone uh so I can I want to demonstrate a couple of points that I already and the that I'm going to make next time on the hom page and it has uh it has already fed uh some of the data so when I press on uh let's say friends it's already there uh yeah it's already there and so it doesn't spend any time on basically fetching it from the server now it just it it was already stored in in the in the cache and it just uh that I made was caching which is if I let's say go to photos and I want to go come back to friends then I don't want to make the request again so I just press on friends again and it's already there so uh you can base your cash uh based on the uh uh the basically the the lifetime of the cash can be based on uh how how how quickly the data changes another point I was trying to make was uh uh uh Ajax can really improve the user experience uh and one of the sub points was uh you can do a lot of stuff in line so let's say this was not an Ajax app uh and let's say I wanted to scrap a lth uh what I would do was uh there would be a link instead of instead of this uh object uh I would press on the link uh I would go to his profile then I would click on scrapbook I would come to his scrapbook and there I would see a input form and on which I would submit the scrap but uh since I'm uh as an output developer I already know that scrapping is the most basic use case what I can do is uh is something like this I just press L it tells me to it tells me a scrap button there itself with a scrap and uh it just opens a it just opens a uh the uh the box there itself and I can and I can just uh submit the scrap here so I can just submit the scrap here and it says crap send successfully as I said feedbacks are very important on a mobile network and it just took me a couple of seconds and I think a couple of clicks to do the thing that would take me something like eight clicks before uh not to mention the extra request that I had to send an extra data usage the user were doing yeah uh so apart from this uh you can also have offline functionalities uh if if if the browser allows you to do so uh if the HTML if the browser has HTML 5 support or if Google Gaz is available then JavaScript API let you do uh let you introduce offline functionalities uh it it can immensely improve the user experience by eliminating blank screens so if if it's a simple website you click on a link then you wait for 10 seconds to for the for the next page to come until then the screen is just blank and that's just plain bad so instead of because because now you are doing uh ajx stuff so basically the user doesn't go away from the page the the page is not blank till then he can do something else that he likes till the data comes so you can just eliminate blank screens and the last is which is very important in Indian scenario is you can save a lot of bandwidth and a lot of money uh money both uh on of the user and also and also your uh so because uh uh basically what you're are doing is eliminating extra request which means less load on your servers and less data usage on the user part so you're basically basically saving a lot of money I forgot uh now uh now that you know uh how to design and how to build a website I just thought uh I would like to uh I would add a slide on what are the popular browsers mobile browsers today and what rendering engines they do they use uh so basically uh uh these are pretty much the six or seven uh uh most popular browsers that there are they are certainly not not not exhaustive uh they would if I if I try to compile an exhaustive set that would go about 50 or 100 100 browsers with different versions that keep coming out every month uh pocket I is the browser that that window mobile uses uh it's basically its rendering powers are the same that that Internet Explorer five or four had so it's actually behind on some reasons but uh it's still pretty good uh if you if you if you attach Google gears onto it uh iPhone Safari is is is is the state ofth art uh it's it's present on the iPhone and on the uh uh on the iPod Touch uh Opa mini is actually Opa mini is actually very popular uh uh it's the I think it's the it's one of the most downloaded softwares uh for mobile platforms uh I'll talk about what technologies Us in the next section uh then there are other browsers netfront browsers uh the S60 web browsers that already come on uh on most S60 phones uh and the Android web browser of course uh uh and what are the rendering engines they use uh so most of the most of the rendering engines today are proprietary uh so Internet Explorer uh sorry uh the pocket I has has its own rendering engine uh operam mini comes actually actually comes in the category of online rendering uh and the and one web uh uh and one rendering engine actually which is taking off is webkit uh the iPhone Safari uses it uh the S60 browser uses it uh and uh uh the Android browser uses it uh and it's actually open source uh so you can actually uh know and you can suggest uh uh improvements to it uh so what online rendering is uh uh is pretty fancy which is uh do not render do not render the page on the mobile phone because it may not have the capability uh render it on online on in the cloud and then send it as an image because image is easy to render and that's for R Min does uh uh so uh very complex HTML Pages it renders uh uh on it server somewhere and then sends an image and the image is actually pretty it's pretty intelligent so wherever you are on the image uh it tries to zoom and uh collect more information so uh what helpful tools are there to build a website uh Firebug and viow I think are the most important uh um for most of you who don't know uh Firebug uh is a Firefox add-on uh it tells you uh What uh uh it it it lets you debug JavaScript and HTML very easily uh and and V what VW is uh basically viow grades grades the website on uh on many components uh as you can see U actually I have the viceo uh viow Page open uh and I'm trying to grade uh m.com uh which is the mobile uh version of orot uh on this so it tells me uhu so it has basically 13 criteria that that it grades the site upon uh make your HTTP requests uh G components add expired headers and these are actually you might think they are trivial but on most the sites on most of the sites that you see on the web they get an f grade on at least five or six of them so please don't uh please watch out for these uh that's why I think vow is is a really uh must do kind of a thing for a mobile friendly website uh you need a user agent switcher uh other Firefox plugins are very helpful like uh live HTTP headers they let you debug HTTP headers and there are some others also which let you debug JavaScript in a very efficient way uh you need xhtml validators uh emulators uh Google web transcoder uh again uh I think I'll skip it here I'll I'll uh it's already I have a couple of slides totally dedicated to it so I'll come later on this uh uh and RSS feed Transporters so uh most of most of the websites on desktop I think you already would have an RSS feed if it's kind of if it's if it's a blog or it's a it's a News website or basically where people read information more uh so now there are RSS feed Transporters for for mobile too and uh I think many many many products like feed burner they do it for you already uh more tricks uh just just some friendly advices uh test with real devices very soon uh do not play with uh emulators and simulators for for for a long uh you will find that devices behave a lot differently in in some cases then as compared to uh as compared to the emulators uh test with real data plans uh especially if your web app is ajaxy or it has some animations you would find that uh suddenly the network uh suddenly the network went away and your animations are totally screwed up or basically uh the flow that let's say uh there was a complex task containing uh containing to 8 to 10 clicks uh and the user is just stranded between the fifth and sixth and so test with data plans at a very early stage uh think about internationalization especially if your if your product is global so norcot we had a lot of trouble with this because we had to worry about Brazilian translations and we didn't do so about uh till uh two or 3 weeks before launch and uh and uh I just tried to see if if I set my country to Brazil what it would look like look like and actually totally screwed up the UI because all the wids and Heights that I had set they they didn't just work for a bra aan words so if if your if your product is truly Global then think about it from an early stage uh have as few HTTP Pages as possible https Pages as possible uh as I told https latency is really pathetic so keep secure keep the pages secure only when it is most required uh do not forget to write the set the right cach headers very very very important even V will tell you to do so uh gzip the data most of the phones today are gzip capable so don't think that uh whether the whether if I compress the data on the server side whether the uh the browser will able to will be able to uh decode it it will uh Sprite the static images more the number of HTTP requests increase more site more the site will go sluggish so uh just Sprite the static images into one and on the CSS mention from which uh width and height you need the and for which length you need this uh image uh compile the JavaScript uh it will make a lot of difference an uncompiled JavaScript let's say it is if it is 200 KBS a compiled one would actually after gzipping would come down to something like five or 10 KBS that's like 20 20 20 times compression uh remove the fire space and reduce the number of htps requests uh so now that you you have made a mobile friendly website I just thought uh I would spend like uh uh uh the rest of the presentation on on the relation with Google search so what what the screenshot shows here is that if I search for mail let's take the example of Yahoo mail uh if I if I if I search for maale Yahoo uh appears third and this may not be the case today I took it like a month or two ago so it may change uh yaho M actually surface as third but uh on the mobile phone if I search for ma it hit it hits our mobile Google search adults page Yahoo mail comes on the first uh because they have a good mobile product so that's what uh that's what a mobile friendly website can do it can actually boost your rankings if you have a good mobile offering so uh so Google uh actually classifies uh a website as mobile friendly or not and it does so based on uh a lot of signals like page layup out uh markups that I used uh encodings and whatnot and uh and the settings and the settings page on mobile search actually lets the lets the user to use uh phone friendly websites or classic for a search results so what it does is whenever user searches only for mobile websites so the the websites that have classified sorry uh the classif the sites that have been classified as Mobile by Google only they will show up and so if your website is not mobile compatible it won't even show up to that user which is actually really bad uh if a user for searches for everything so he's pretty sure actually that his mobile phone would be able to render uh more stuff uh Google will still blend mobile websites and it will they will get a far better ranking than a non-friendly mobile website mobile friendly website uh the last section is uh on Google web transcoder uh so just just a minute on what Google web transcoder is uh Google web transcoder is basically a tool which Google offers to to transcod your uh your desktop website to a mobile friendly one so uh I'll just I'll just show a small demo of that also uh transporter interface and uh so basically let's take an example let's take an example of CNN.com uh so that's how a CNN.com web page looks like on a desktop and if I see the transported version this is the transported version uh so you you you'll see that it's it's a lot mobile friendly uh so if if you don't want to if you don't want to if you have the bandwidth to create on a a separate mobile friendly website Google transcoder actually does a really good job and it does so in real time so a user can uh so basically you can give give out links to this transcoder and it will just work real time uh just a small fact about it it's it's the most uh computationally expensive real-time service that is offered at Google right now uh pretty impressive uh uh when transporting is active for a device uh the pages are more uh are made basically more suitable for display uh by the transcoder so if if the mobile phone is such that it is not uh it is it let's say it's very old uh it's it's capable of doing just certain things uh and if you access Google search uh the search result won't be won't be to the actual page but to a transcoded version of that page uh so basically what that means is uh instead of instead of communication being client to the website the communication will now happen to from client to the transcoder and transcoder will in fact uh talk to the website uh so you may so you may worry that uh this may cause an increase in latency and actually you are right uh this may cause uh this may cause high latency but what we can do is uh if if the if the data on the side doesn't change too often you can set the right cash headers and so basically what transporter will do is basically just cach the uh just cash the transport version u in on it server and basically uh the the git the GT2 website communication will just cut off and you'll actually just talk to the GW in of the website uh one more important thing it does is not only just transports uh the images and the layout and everything it also transports the out outgoing links so you're pretty sure that uh if if my if a user is going from my site to someone someone someone else's side he will also see the other side also to be transported