 Hello everyone. So, before I get started, I would like to take you guys back to school days. Chemistry class, periodic table. How many of you remember periodic table? A cool man, everyone, nice. So, a basically periodic table, hope you have known, is contains of a atomic number and the elements associated with that. It's a plain rectangle boring box. Let's visualize the same periodic table in the web way. This is not a video. This is a fully interactive HTML5 web application that could run across devices with lot of interactions, doing things, coming back. So, this mobile application, this application could be run across anything. So, I'm Selva Kanapathy Kalyamurthy and we are going to have a discussion on building experience for right ones run anywhere. I'm a UX engineer and also an invited expert at W3C. Internet is like water, flows without a constraint across devices. Starting from your desktops, mobile phone, tablets, smartwatches, cars, bulbs, you name it. And it flows across irrespective of their form factors. With the inception of Internet of Things, the connectivity of the Internet across devices have literally become limitless. Back in days, this was not the case. There was a days of static web where publishers published the contents and the users will be in a read-only mode. They have no choice but to read. Then came the age of user-generated content. Platforms like Facebook, YouTube provided a system in which users can upload their contents and other users can interact on that. This sort of participation reimagined the web as Web 2.0. What is basically Web 2.0? It is participatory. How cool is like a person uploads a content and other person sitting outside the world, outside the other part of the world, repeats it. So, the ironical part is these companies or these platforms like Facebook don't really own any of the content and allows people to use it and they make money off of it. How clever. So, Web 2.0 basically helps you to digitally express themselves. My dad never had a Facebook or a LinkedIn account. He uses the Internet. He still thinks in the read-only mode. On the contradictory side, my cousin's son was like five years old as a Facebook account. I am able to digitally express myself online. So, the third important part is Web as a platform. So, we're going to concentrate more on Web as a platform. A decade back, if someone asked you about Web App, you'll ask, what was that? Right now, we have this Web App across everywhere. Your Facebook, YouTube, starting from your Uber, everything is a Web App basically. So, when the inception of 2.0, W3C CEO Jeffrey had a vision to create a platform that has an innovation, consolidation as well as a cost effective. And that's where this whole thing has been formed. Web platform is right once, run anywhere. It uses common standards so that normal Web developers or any normal person could be able to build App and provide a cost effective solution. And it should always provide a better experience. This right once run anywhere was not a new term. It came quite long back. So, a company probably, there's like Java trying to crack this using Java virtual machine. I don't want to go much in technical detail. So, this Java virtual machine is a piece of a software which has been installed in different OS. And when the developers writes their application, this sits in between the OS and the application and tries to run this app. So, there was a quite fuss about this sometime. But the real problem is those were the days where they don't have auto update for this virtual machine. So, consider X as version 3.0, Y will be having version 3. So, one of my developer friend jokingly used to say, right once, I have to debug everywhere. So, then came browser plugins, applets, flash. It went quite really well. But the real problem with this, you have to rely on third party plugin. Consider, I'm using my laptop. I want to access some site which runs on Java applet. That's perfectly fine because my browser has that. Consider, I want to use my friend's one. If one of you doesn't have it, it becomes a problem. So, and along with that, it creates a lot of memory leaks and security issues, especially in mobile. Then came the hybrids. What is a hybrid app? The hybrid app is basically sits in between a web app and a native app. A web app is being runs on a browser which able to run, built using common HTML, CSS, and Java script and technologies. On the other hand, native app is built using proprietary softwares, say like Swift or Java. So, in 2005, a company named Hitobi wanted to sandwich in between both the features and create an app which uses both the functionalities inside. How awesome it is, you could able to access your contacts, your GPS, all your cameras and everything using a native wrapper and able to code using HTML and CSS. That's where the real hybrid app came in. So, in short, if you could notice, the browser is wholly dependent on mobile web. In the hybrid app, the outer layer is native code. The inside is a browser as simple as that. So, let's see a few of the environments and the frameworks available for building a native hybrid app. So, this for desktop, we have something called Node WebKit. Using this, you can build hybrid apps for desktop and for OS X. In mobile, we have multiple. PhoneGap is a popularly known one. Most of them known PhoneGap, I guess. So, there's something called Xamarin and Titanium. Xamarin and Titanium are a compiled code frameworks. Don't worry guys, I'm not going much technical on that. I just want to give a full side on that. Consider, I have a code base which I built using HTML, CSS and JavaScript, of course, on responsive. And I could cover all the platforms. Starting from desktop, mobiles, everywhere. How awesome it is. And your development time cut downs to zero. Cool. So, these are the few advantages of that. You can use reusable code. It is web developer friendly, cost effective, easy development. Okay. Is really a hybrid app we are developing is going to be a right once, run anywhere. Let's take a case scenario. I have an iOS. I have an Android, which basically runs on material design. Will the user experience an UI of same? No. It's totally different UI altogether. So, but to get implemented the hybrid app on both the platforms, you should be in a position to make the functionality similar just the UI different. Hope you guys where I'm coming. So, as I told after iPhone 5s and iPad mini, Apple have came out of their proprietary aspect ratio. And also they have came up with a retina displays. So, basically, we have a bunch of devices to be handled on iOS. On the other scenario, Android have a lot of manufacturers and each manufacturers as their own UI. For example, HTC has their own HTC sense. Samsung has touch ways, so on. So, how do I handle both the designing for both the devices with a wide range of spectrum with a single code base? That's where the challenge comes in. When you design a hybrid app, understand the design guidelines of each of the platform. What are the technical difficulties? What are the things you could able to rely on? Understand the guidelines. So, right now we have a proper guideline things for both iOS and for the Android. So, and when you're making for an hybrid app, make sure you have a cross-platform brand consistency. And use animation, subtle animations for micro interactions which would really help out. And most important thing, stick to this platform specific conventions. Don't push an iPhone like look like UI for an Android. And use the target platform daily. As a developer, when you are designing for any of the platforms, I suggest you have the device with you. Use it daily. For example, when I started it, I personally use Android smartphones and iPad as my tablet. So, by the way, I could able to correlate and things and find the difference and help me to design way too easier. When you're designing for iOS, forget about Android. Do the same for the other. And always start with iOS. When you start with iOS, you can able to extend it with the current material design platform for Android. It is much more easier. Last but not the least, talk to the developers. Developers can tell you what are the real issues they face in, what are the technical implement issues they'll come in. This is a typical example of Mashable. So, on your, you can able to recognize easily an iPhone versus an Android app. Most of the scenario, the design principle and considerations are taken care, but the branding has been maintained flawlessly. If you look at the bottom, bottom line up there, you could see the main level navigations out there, which is considered to be the same. And the top level, you see it follows your design guidelines. What do you, you have to keep your color palette as a consistent, your branding elements and your functionality to be constant. Don't change the notifications, custom share dialogs or lock screen, don't lock the orientation because this will annoy the user for a lot. And this is a typical example where card's design was basically provided by Android or Google. So as part of the material design, this is a subtle push from card design from Android to iOS. You could see that all the branding guidelines and everything are same and cards has been equally transmitted. Never, never do this. So, this is the app from NASA and that's an eatery app. So, basically they try to push the iOS UI into an Android phones. Follow guidelines or should I innovate? Or should I stand out from the, from the guidelines? This is a typical question people generally ask among themselves when they build a cross-platform or a hybrid app. It's always better to take the guidelines as your recommendation. Don't over-engineer things. Make subtle few changes. After all, what makes customer delight makes your app more successful. So, basically I would rank these things in like this way. Brand, guidelines, set up your clear expect user expectations and innovation. That makes your app look awesome. These are the two hybrid apps which has been done. How many of you know like Beach is an hybrid app? Okay. So, if you see what are the features I have covered or mostly out there that a Plains app consists of clearly shows the current whether the plane going to get landed and similarly it gives whether it's going to get a take off or it's going to land. With a small level of micro interaction, it gets the attention. Same scenario here. When we move the from one menu or one navigation level to another, the delay in the top menu grabs your attention. There is something called peripheral vision. It is inherited by humans. It is, it is one of the killing weapon which inherited when the humans were intercepted. So, whatever comes on your peripheral vision will drag your attention. So, use peripheral vision. That peripheral vision interaction is called micro interaction. Grab it. Use it. That will help a lot. You don't really need jazzy full animation to keep things move forward. Are we ready for the prime time? No. Basically, hybrid apps suffer a lot of issues starting from security and performance. But couple of weeks back, Facebook have released a platform called React Native which able to run your html services in JavaScript and convert that into a compile code which means they are moving out of native code. The whatever iOS based Facebook you are using is built on this framework. It means the next couple of years it's going to be only hybrid. And same case, Google is pushing updatable view which has all the powers of the latest Chrome browsers. Last but not the least, I want to finish with my code of a favorite writer. Details are not the details. They make the design. Thanks a lot.