 Good afternoon, so everybody's up after like heavy lunch Okay, so So today, I'm going to represent on mobile first approach the key to cross platform interface design Myself wake, but I don't waste time on much to telling about myself You can connect me on my Twitter like handle at that be pariah So I can like take this time to really cover my topics So the first thing that I we always try to talk about Mobile first so why mobile first? So before going ahead we can really let's see some study that I really gather from a lot of a lot of like sites like Google Flickr and Like these big sites So 75 75 percent of mobile users Use their mobile for shopping like a lot of plug like your shopping We are doing from like all the from our mobile phones right now 56 percent of people own a smartphone out of total the phone that is have like have been sold out till now 75 percent of mobile users respond to mobile optimized site when They are making any purchase that means for any e shops or e-card it's very important They have their mobiles that have to be up like sites has to be optimized for mobile 99 percent of smartphone users daily check their web browser on their phone By 2014 mobile internet usage will overtake desktop internet usage 80 percent of time on mobile is spent inside the app so all these statics is clearly giving an indication that web is exploding out of Computer shaped boxes and coming to the mobile as well and mobile is becoming very integrated part for any web app or Or any application that isn't used by and users So it's so that that's really a good good part to start to and start thinking towards mobile first approach And if you see like how many devices that have been sold a smartphone every day is like 1.3 million It's huge android and ios devices alone are being sold every day every day We are not talking about any like blackberry and nokia. It's just alone android and ios market 91 percent of people on earth have mobile phone. That's quite amazing 50 percent of mobile phone users use mobile as their primary internet source so So like half of the people you already using Internet on their mobile browser on or itself a mobile app or inside the app And yeah, this is a common syndrome that every each of us have this syndrome that we try to have their mobile or tablet all these gadgets Are like in a in a win in our reach By 24 into 7 every time every minute we keep checking our mobile. Okay. What happened? What's the mail? What's what facebook? Sitter what what is the what is happening on twitter? so So this is the this is the changing behavior of users and users the everything is becoming very handy Every day everyone wants to be things very fast and quick the while coming To banglore like when I bought a cab the cab driver asked me, sir. Can you please? Like check a status of a train for me from puny to deli. It's very urgent. So can you give me that like Can you check me for it? So while i'm trying. Okay. I said, yeah, I why cannot But the important part is I don't have any Like any these clear trick make my trip or i3d is a mobile app But what I have I have my bowser with me and I just quickly open it and I type clear my trip clear trip. Sorry make my trip I just saw so clear trip dot com Sorry clear trip if anybody's there So the good thing is that the moment I type it out it just show me only four or five List of Like what you can say tab or buttons in which I found a train and I just click on it and I just navigate to the like page where I can just Like tapped on my start destination on a source and a date and that's all Boom everything's done. I just told her like what is the availability? What is the next train and that's done. It's quite easy. Correct. So everything is becoming very handy So, okay, so this is a part that buy mobile first But when we are approaching towards this mobile first approach So we always Like come up to the question like what is the first thing that end user wants to see When they are coming through mobile Or through any app on our application So it should be the core idea With a principal highlight what we are going to highlight and the idea that we want or we are going to sell in our app You should be able to interact consume action amount action upon that core idea using a mobile phone What happened like let's select if we are if we given like huge number of like content to the user at that time only So you just because the screen size is very small and we cannot Think that user can really determine where to click and where to go So we have to very minimize the like just user interaction for that and we have to concentrate on the primary use cases So what are the use cases of our application? So we have to focus on that only and just make the Priority, okay. These are the like my primary goal of my application. These are my secondary and these are my third flesh out the most important feature of content and make sure that the user see this at the first thing that I That I'm telling the clear trip when I the moment I just type clear trip comm it just show me four tabs what I want flight search Train search bus search or hotel search. So it's a very nice Please the content that is closest to conversation. So it's it means that what is the conversation? What what we are trying to convey to the user. So if the conversion is matching either or not Let's say if somebody's like Like when I type like click on the like on a train search and if you're also showing like what are the suggestions for this Train search they're Showing suggestions for flight like these are the good flight deal. So this is like very wrong conversion that is happening there facilitate user by providing proactive input inputs using exclusive native hardware. So As we are moving to the mobile so we can use a lot of mobile features mobile Native hardware features that can really help us think if we are using four square on our desktop Correct. So it doesn't make sense out of there So the on mobile if we are using four square it very easy to just click any snap and upload it and okay I'm here. Thank you. Whatever it is Precise direction or question to minimize user efforts So the movement it should be very streamlined when I click when I like drop to the website or web app I click on something and I got something at that has to be very particular about what I what what I'm trying to convey So these are the questions that always team keep coming to over like uh, keep coming to our mind what how we can really achieve this Okay, second thought is is it better to like it is a better approach towards responsive design So yeah, it's it's very important that uh that we have to understand responsive web design and like it's good But it doesn't work for each and every type of application because let's say responsive web design doesn't work for clear tray web because Done that the input box is very small user cannot type it out there. Correct. So we have to have very precise mobile site that is optimized for a user for mobile app itself So I don't want to cover this topic because it's already covering like workshop by upon So, yeah, mobile first philosophy allows us to use of new capabilities like touch gesture geolocation barcode camera front and back Gyroscope accelerometer ambient light sensor Bluetooth and NFC and audio So these are the like examples that I'm familiar. How can we use touch gesture geolocation for force car tender barcode? We can use like QR code For skype and for nearest tube is like a augmented reality application Facebook paper that is something new that is happening Accelerometer run cheaper and a historic historical landing game that is very old and very popular game Bluetooth so you can easily send a file around a lot of people around you Audio like again the much skype another thing So that there are three basic fluid interface one is like native mobile site and responsive site So native you can see like how how it is really different from the From the native and the desktop side with different from user. So we are really focusing on very important part of audit But it's very important. We don't just go for any native application We might want to use a mobile set as well because in this case Mobile set is very very useful because you can just directly go to the mobile web and type it clear make my trip and that's all Responses I do work well with when you have any content like any news or block sites So now the second part is very important. It's optimized content structuring So we can have limited the size of theme So call for relevant or optimized content layout So what we can do is like we can really understand gestion behaviors manual navigations stalls and accordions progressive disclosure of content Carousels and avoid using videos when we are using a lot of mobile apps and do away with the pop-ups We don't have to use pop-ups and when we are building anything for our mobile site like these are the behavior that you can see Carousels menu navigation the tab one stalls and accordions Yeah, thank you. I think I covered it in 15 seconds Okay, any questions? I just really Like far because I have a very limited time. So I do have it still there. Yeah, any questions? See depend like how much you want to customize the responsive side, correct? So it would be easy because you can really Describe the content. Okay when you're doing a particularly mobile site for your application, correct as I show you like for the clear trip Correct or to make my trip as example So you cannot do like you can have a responsive site for that other But the user behavior is very very vague for that because you want quick search and path The application has to load very fast the response time should very fast because the average response like user can wait for Not more not more than few or four second. Correct. It's very important. We have to really understand that perspective as well Just respond. We don't have to just go with a like RWD always we have to think what is a use case how it can really Make our life better when we are using any mobile set or have to use Like RWD Thank you. Okay. Thank you guys