 So, if you want to follow the slides on your system, you can open the slides on your system. The URL I have tweeted. This is my Twitter handle. This is my GitHub handle. We know it. Okay. Yeah, am I audible? I work at TCS. And I will be talking about responsive web design. And responsive web design in law scale projects. And how jQuery plugins help us in law scale projects. So, we have some time till other people come in. So, let's have a quick audience. How many of you love responsive design? Okay. I have a perfect audience. So, responsive web design is not a complete package by itself. So, there are several challenges. So, when you combine responsive design with the jQuery, you will be able to achieve the true potential of responsive design. So, for those of you who are not aware of responsive design, let me do a quick demo. This is the BBC News website. So, this is the desktop layout. So, they have a two column page layout. And at the bottom, they have lots of links in multi-column layout. So, let us see how this page responds to mobile view. Now, I start resizing the window screen. So, this is the tablet view. Now, it has shifted to a single column view. You resize further. This is the mobile view. So, the navigation has changed to a collapsible menu. So, this is responsive web design. And on a law scale project like this, we use several jQuery plugins to make it work. So, I have grouped the challenges under three categories, devices, browsers, and testing. And at the center of this is jQuery. So, we will see how jQuery comes to our rescue. So, device neutral design. So, we are very lucky to have responsive design. So, if you are a old timer, you will remember how we used to detect the devices at the server side. And we used to modify the content at the server side. We used to do server side content adaptation. Nowadays, we can do client-side content adaptation through media queries. Nowadays, the devices we have on our hands are as powerful as laptops. So, it is possible to do the content adaptation at the mobile, using the mobile. So, what are the challenges? So, earlier, when we had 5, 6 years back, when we had only the iPhones and the iPads, we could write media queries only for the iPhones and the iPads. Now, there is so much of device screen fragmentation. If you look at all the phones and roids in the world, there are 40-plus unique screen resolutions. If you take all the tablets in the world, there are 40-plus unique screen resolutions. So, it is no longer possible to write media queries for each screen size. So, what is recommended is writing, designing for continuous range of resolutions. Similar to the BBC website, we saw for each and every pixel size change in the browser's screen width, it will respond. So, we saw that we can follow device-neutral design for user interface. What about user experience? You cannot ignore user's device-specific features like swipe navigation, pop-up keyboards, tap-to-call, zoom, and print support. So, for mobiles, you will need a mobile menu for that. We can use the jQuery plugin, slide-out.js. On desktop for accessibility, we can use the bootstrap plugin. And if you need print support on old Android devices, we can use the cloud printer. So, many of you people will be busy with your mobiles and laptops. So, let's have a quick online research poll. Can you research online whether there are touch events or WTC standard? You can do this. I will be continuing with the presentation. I come to the next challenge under responsive design, namely the browsers. Everybody hears browsers. So, progressive enhancement. So, on a large scale project, we don't have control on the capability of the device connecting to our website. Suppose you have a very old Nokia or Blackberry device which is connecting to your website. So, how do we manage that? So, it is recommended that we have text-based layouts for all the pages. Suppose you have a rich graph-like chart. You should still be able to show it as a table on those devices. So, how can we do this? So, there is a JavaScript library like Enhanced.js. This we can do to check the browser features and then progressively enhance the UI. So, whenever we say browsers, people will ask about IE browsers, old browsers. So, we can handle them with respond.js and conditionally statements. And what about mobile devices? If you have done a large-scale project, you would have faced issues with CSS properties like Float Fixed and Overflow Auto. Further, there are also plugins called Fixed.js and Overthrow.js. I have sub-categorized the challenges under browsers into three categories, content, table and images. We will see how jQuery plugins will help us in these cases. In 2015, the average base size has increased to 2 megabytes. So, if you open a web page, you are downloading two MBF content out of which around 1.4 MB is just images. We will see how we can optimize this. So, in the earlier days, we used to download the whole desktop page on the mobile and then hiding the contents which is not required. This is no longer recommended. It is recommended that we conditionally load only the required content on mobile devices. So, how can we achieve this? So, there are several groups which have done already this and they have shared their plugins. So, through this, we can conditionally load only the required CSS and JS on mobile devices. There are a few more plugins like Mediatek, jRespond and conditional.js. So, these plugins also we can use to conditionally load content. So, it is difficult to visualize. What do you mean by conditionally loading content? So, let me do a quick demo. So, I have opened a web page in mobile size. It is showing only a single image. I have resized it to tablet size. Now, it loads the complete Therosil. It is the same page. I have just resized it. So, this is conditionally loading content. So, images. So, if you open any web page, we can categorize the image content in that page into two categories. Namely, the navigation images, left arrow, right arrow, all those things, and the photos. It is recommended that you convert all the navigation images into SVG sprites. So, what about photos? Responsive design is all about percentage. Photos are fixed size width. It is all about pixels. So, how do we handle it? Let us see. Nowadays, we have a new format called WebP. So, most of the people are aware of it, I think. So, if you use that, we get a 40% reduction in image size. So, earlier we saw that average page has 1.4 MB image content. So, if you use WebP, you can reduce it to 0.8 MB. So, how to start using WebP today? So, if you use a picture element, there is a type attribute. So, using type attribute, you can deliver both WebP and older formats. If there is a new browser, it will download only the WebP images. So, after taking care of WebP images, suppose I don't want to deliver desktop size WebP image to mobile device. How to do that? So, in picture element, there is a new attribute called media. So, here you can start writing media queries. And based on the media query, the browser will download. So, if I open this web page on a desktop with screen size more than 650px, it will download only the large image. So, if I resize the window to below 650px, it will download the medium image. So, how can you start using this today? You can use a jQuery plugin called Pixity. It will do the same things as picture element. So, from 0.8 MB, you can start delivering only 0.5 MB images to mobile devices. So, let me do a demo again. So, here I open the web page on mobile size. I have started Pixity. It has downloaded a small image. When I resize and start Pixity again, it will download a tablet size image. So, this is how picture element will also work in the future. How are we doing on time? I think you are behind. Yeah, images of plugins. On a large scale project, you might have 10 plus breakpoints. So, you can't start writing 10 media queries. It will be very time consuming and you cannot generate 10 images. So, what can you do? You can use an image resizer plugin. It is a node module. So, it is developed by BBC website. So, using this, it will automatically resize the images to all the breakpoints used in your website. Apart from plugins, we can also use polyfills. So, set polyfill and picture fill. So, if you have carousels on your website, if you want to make it responsive, you can use all carousel. For videos, there is a plugin fitwitters.js. What about infographics? I was just doing some online research. And it is almost impossible to make infographics responsive. So, welcome to SVG. So, here are 10 sections of an infographic or a layer around a wheel. This is the tablet view. Now I start resizing the content. Just watch this space. This will rearrange. For mobile view, it has come here. So, using the concept of Timeline, we can interactively display all the contents of an infographic one section at a time. So, it is rotating around the wheel and it is displaying the content at the top. So, what about tables? There is a plugin called FoodTable. At the top, I'm showing the tablet view at the bottom. And this is the mobile view. The same table will render as a two-column table. So, let me do a quick demo. So, this is the FoodTable. It has several features, like sorting of columns, searching content, and also filtering content, apart from responsive design. So, now I start resizing the window. This is the tablet view. It has two, three-column view. I'm resizing further. It is showing the two-column view. When you click on the plus sign, it shows all the non-key column content. So, nothing is impossible. So, you have to spend time to make responsive design work for all the components. So, this is another online research poll. You can research whether you put meta tags on W3C standard. This is the third challenge under responsive design testing. So, on a developer system, you can use a combination of PhantomJS and CasperJS to check UI on developer systems. Suppose you have a mobile device that you cannot connect to a system to check the errors. You can use jsconsult.com. They provide a library. You can embed this library in your web page. Once this is done, you can connect to your mobile page DOM and another browser on your desktop. Suppose you have your own lab. Suppose you have 10 plus devices and you want to check 10 pages on those 10 devices. It will take, you have to do test under times. How can you avoid this? We can use a remote preview. So, basically here, if you navigate to a particular URL on the primary device on all the secondary devices, the navigation happens. The other option is community sharing. So, if there is any company who is sharing their lab, you can visit their lab and do the testing. The final option is the subscription option. So, you can take monthly subscription. They provide all combination of browsers and platforms. So, we have been doing several responsive projects and we came up with a framework. It is a four-step framework. First stage is formulate. Second step is the reimagined redesign. Third step is for some approach and fourth step is digitally directing the customer. So, in the first step, we select the frameworks, we select the plugins. In the second step, we come up with information architecture and the UMA cups for all the devices. And responsive design will fail very good if you don't take a wholesome approach to the project. We have to come up with an automated testing plan. If you do all this, we can deliver the customer with a SEO-friendly website and universal access. This is the final poll. Do meet a query since I have directed the real screen size of the page and document. You can develop a test page and check it out. Any questions? Okay, this is supporting thoughts. This is the takeaway from the talk for product managers. Don't miss out on any internal experience. Nowadays, the customers are not doing the complete purchase workflow on a single device. So, if you don't miss out on the mobile device, you're missing out on revenue. So, the solution for this is to design for HTML4. All devices can run HTML4 and then progressively enhance for HTML5. Don't door slam the users. And be prepared for new browser releases. Nowadays, browser vendors are rapidly releasing new browsers. So, during the course of the project, you'll have multiple new version releases. So, please be prepared for it. If you find responsive design too challenging, follow it for WD. So, this is the takeaway for architects. Set up a performance budget and ensure a lot of underscore at the page test dot over G. Basically, divide the content in your page between primary content and secondary content. Make sure that your primary content loads within the first one second and you delay load all the remaining content. For UI designers, promote VP images, SVG sprites and provide UI design for progressive enhancement. For developers, for a progressive enhancement and have component-level testing for all browsers and explore Flexbox. We have been doing responsive design through float and all those things. It has its own side effects. Explore Flexbox is a better way to do that and create reusable jQuery plugins and make it open source. Thank you. So, it depends on the complexity of your project. So, if it is simple, you can use the respond.js. If it is too complex, you can use jrespond.js. Only from the size perspective. Yeah. So, we can download, we can provide both VP and PNG and JPG. If the mobile is capable of downloading rendering VP, it will download VP. Otherwise, it will download PNG and JPG.