 So, first of all let me introduce myself, I am Ram Singh and I started my journey 3 years back from the BCS, I have been working in Rupa. Today we will be talking about Drupal 8 mobile case DN. So, we will cover how Drupal is mobile friendly platform. So, prior to that we will just cover some facts why we are emphasizing on the word mobile and why every company and every company's website is going from mobile and then for tablet and then for desktop. Why this approach is important. So, there are lot of facts regarding groups factor in mobile. The one which is latest in Google has declared in the last May that Google search in mobile surpasses the desktop. So, this is this is the I think we start our surfing web surfing from Google only. So, this is the most important fact which will be which we can see in the growth of the mobile. So, next one is the there are lot of capabilities which you will get in small screen devices and which you want get in the normal desktop such as DPS, video images and all. In this list it doesn't end. There are lot of lot of factors which we will get in the small device and if you can see I am operating my presentation with mobile only. So, there are lot of lot of capabilities in a mobile you will get and there are lot of apps you will be getting in a mobile that you want get in the normal desktop. And third thing if you see from the developer and from the designer perspective you can see if we go with this approach we need not to concentrate much on design. We can arrange our blocks in the vertical section and we can be focused on more important data. And then we going forward in a tablet we can just introduce little bit of design. As you can see I can I introduce the design in matter of the blocks. And going for desktop for the large screen we can just introduce our least important data. So, in this case if we reduce our width from if we reduce our width from 1300 to 320 or up to maximum 700 we will be more focused on the most important data which we want to show to our customer. So, keynote of Brace which happened in Chicago in March 2011. What he said is if we were to start the Drupal 8 from the scratch he will develop it for small screens and then he will come for the desktop. So, from that onwards he appointed John Albin as a lead of mobile initiative. And here we are with the Drupal 8 with lot of lot of features which Brace would have granted that time and maybe more than that. So, responsive web design it is not only approach it is a strategy of saving money. We can we need as I have shown in my slide how we can approach building a base for a mobile and then we will go for a desktop we save lot of lot of money. So, let us see how Drupal 8 is mobile friendly. So, there are a lot of factors responsive things responsive images mobile administration HTML 5 friendly then ultimately these factors are leading to front end performance and SU and then web services. So, all these factors make Drupal not only mobile friendly, but it is a mobile first CMS all these five factors. Then we will cover now individual factors and we will see. So, first factor of the mobile in Drupal 8 is the responsive things. So, all the things in the code and the base things which are provided in the Drupal they are all mobile friendly you need not to worry about the mobile design. You when you install the Drupal and just in the Mozilla press shift control and then you will see the mobile view and all your horizontal blocks will be raised vertically automatically they will float to vertical direction and your main map you will be clapped to a button. You need not to worry about all these things are there in Drupal 8 code. And the very important aspect as of performance and as of SEO wise I can see I will see the responsive images. We normally use to neglect this factor, but let us see how responsive images why it is important. For example, a normal web page in that web page images cover almost 70 percent of the data usage. So, it is wasting lot of bandwidth of a customer and wasting a time also. So, we have to think some solution and that solution which was implemented and it is brought in the Drupal 8 code go wrong. So, one thing when we say responsive images it is not that the images will just collapse to a width of 320 it is not only that it is not only the case of fluid image, but it is there are another two cases which we need to keep in mind while developing the responsive images. So, first case is device pixel ratio. So, your different resolution devices should have images as per their resolution of the screen and r direction. So, I will just show the diagrammatically illustration of all these three cases prior to we will go to the technical aspect. So, this one so, if you can see this is the normal what we can say that it is normal come to the first thing in our mind water responsive images will be then it should squeeze to the screen width. But apart from this there are another two cases. First thing is if we go from 1 x q s is to 3 x they should be a different resolution image. And then we can see r direction here what as factor I need to explain is if you can see my desktop image is having clouds and a rocket. But in my water data in the desktop is only the rocket. So, in mobile I can just show the rocket so that it should be focused on the important data. So, all these three factors how we can implement is we need to tell the browser to know the width of image and which image we need to load in mobile and which in the desktop and what is the resolution of the image. So, let us see what your normal browser know a lot. So, your browser knows about the viewport in which the customer is going to open your website. Your browser knows about the screen density is it 1 x is it 2 x, but your browser does not know the image dimension and which image to render in case of r direction. So, but when we see our developer what he knows about image dimension he knows about render size and he knows about the which image to be rendered in mobile and desktop. So, these three are four to five tags which will help us in rendering the responsive images. Picture tag, source then media attribute, sizes that will be transferred, sources are sourced. So, let us see how we can implement through the source set we can just pass a set of images and we can specify the width of these images. Like my image 1 m 1 x is having these 3 year 7th and this is pixel image m 2 x is 11 pixel image and sizes is the viewport width which image is going to cover in your screen. So, by this image will be covering 100 percent of the viewport full screen. So, if we need we need to place these attributes into the source tag we need to implement into those. So, if you want now if you want a different set of images for mobile for desktop for tablet we will just introduce different sources for tablet and for desktop and through that we can render different sizes I want 30 percent of the width screen to be covered in desktop and I want 50 percent of the screen to be covered by image in tablet. So, I can just pass those attributes through the sizes and I can have different sources for the different devices and through the media query I can just pass the width of the screen. So, what do we do in the full screen itself we can resize right. So, in the desktop we say 30 percentage and if you resize the browser or resize these things how do you. So, in desktop it will be covering 30 percent of your width when you shrink the screen it will cover 50 percent when it comes to tablet. So, depending on these attributes if you automatically yeah depending on these attributes we need to cover all these source sets through the picture tag on top of all these attributes we need to implement our picture tag and there are questions around the community that if some browsers want to support the picture tag and all we have alternative for that fallback image and image source set we can just mention about our source set of fallback image. So, now the question come here is I will just cover the now if you can see what are browser or browser know about the image dimension. Through source set we have defined the dimension of the image is it 737 pixel or 1100 pixel then we have mentioned about the added size about how much it is going to cover I mean our image how much viewport it is going to cover. Then we can say during the art direction case we can just specify the different source sets I want different image for mobile I want different image for desktop and tablet. So, our browser know all these factors but the question comes here is if we need to implement these things we have to make so many images and we and here the cost will actually increase, but in Drupal 8 we need not to worry about these two cases when we have different resolution images we need not to worry about Drupal out of the box provides you some modules that is you will provide you break point responsive images and image time module. And during the art direction use case we have to bring image replace image replace module from the contributed term. So, prior to that we will just speak about little I will just speak about break points what break points are it is very much similar to media queries and it is having from media queries it is having another metadata as well. As you can see it is having mobile or my label then label and then media query tell machine name and it is having weight and multiplier through multiplier you can specify the different resolution of the image different resolution of the screen media query based on. So, other thing is that on top of this configuration we need to mention in a YML file you can specify either in theme or module theme name not break point YML file or module name not break point YML file. On top of this we have break point module which will keep on all this break point groups and it will keep on this clean bits also. So, it helps in creating the one theme break point with another theme break point or another module break point. So, that is why we can implement break point in our theme and we can call this break point in replace in responsive image module also as well. So, we will see how Drupal 8 is helping I will just open video of demo 1. So, prior to that we have this image implemented in one of the site and I want different sizes images in tablet and in mobile. I do not want to render my 1400 pixel image to be rendered in mobile. So, I will just show how we need to do it. So, go to configuration we will have an image type for mobile. So, this is the time I am putting the name of that image type mobile and after that we need to add effect to that image. I will just scale that image and I will add when effect to that image type that my width should be 736 pixel. For this image type I am having width only 736 pixel. So, as you can see I have added one image type and one effect is added to that image type. So, similarly I have added for desktop and for tablet different image types. So, another thing we will go to responsive style images and prior to that I will just that take my theme I have set break points as per the requirement and that break points we will be rendering in responsive image type. So, I am building responsive image case 1 and this is the break point group and this is for that image. So, in break point you can see lot of other break point groups are available and I have selected one rainbow which is my theme and I get I just break point model will just get those configuration and display over here. So, for desktop I am going to try to just say there are two things we can do in responsive image we can just specify a single image for that screen or I can just specify multi image for that screen if we want sets of the images. So, we will just see first in this demo we will just see only a single image screen single image usage. So, for this single for this split I am going to define my image type will be desktop 1400 pixel for this much break point my image type will be 736 and for mobile my image type will be mobile 736 pixel and I will define my fallback image as a desktop I have just saved it and now you can see my responsive image case 1 is saved and I will just open content type I have made this as responsive image 1. So, I will just attach this responsive image style to my content type. So, I will go to the manage display of my content type and banner image I will make formatted as a responsive image and in the settings of that image I will just select the responsive image case 1. So, as you can see I have opened the image in another browser and my screen width now is 1036 pixel. So, I will just open image in new tab and my image width is 1400 pixel I will just change the screen and my image width is 1024 and now my image width is 737. So, as you can see I have different images for different break points and what we did nothing we just uploaded one it switch just like on one time investment we just need to define the image type we just need to define the responsive image style based on our image style and the break points and then we need to call those responsive image style into our manage display of content type. So, we will get different sets of images for this one. This is the use case 2 for this I am using simulator of the home ok. So, as you can see iPhone Apple iPhone 6 I have the banner image and when I change to 6 plus the same banner image is rendering and there is another thing I need to highlight that another second image this one it is rendering as a 100 it is taking full screen view mode. I will define another image type mobile 1100 pixel I can use tablet as well the one which I defined as a 1024 it does not matter much but just for this example I have defined another image type with 1100 pixel and to differentiate between mobile 736 pixel and mobile 1100 pixel I will just add another effect desatulation effect. So, I have already added scale with 1100 and I will just add desaturate which will just make my image black and white just to differentiate between two images. So, here I am adding another image a responsive image type in which desktop and tablet I am using the same image type and for mobile I am changing my size is at 50 and I am selecting two sets of the images one is 1100 pixel and one is 736 pixel. So, I have two images in this case banner image and the body image and I have called responsive image case 1, case 2a and 2b for banner image I have called 2a and for body image I have called 2b. So, let's see what that is one thing we can notice the body image got straight to 50 percent width of the screen. So, from with the sizes attribute we can just adjust our viewport of the image how much it is going to cover in a screen and when I shift to iPhone 6 because my image is now black and white it means it is rendering 1100 pixel image for mobile and one thing you can notice here by another image it is not getting black and white because it is rendering responsive image case 2a only because it is covering half the width of the screen and it can go with the 737 pixel also it did not to be 1100 because if we see the half of that if it is covering half of the width of the screen we can go with the 737 pixel. So, it is all browser is deciding which image to be given to be rendered in this case. So, now we will say we will see a demo of art direction I will just explain about art direction what it is I want different images for different devices. So, here as you can see I am having Drupal con I am using Drupal con Asia image and what is the important data in my this image will be and then you can tell what is the important data I want to just highlight in this image what is the important message I want to pass. Yeah, Drupal con Asia. So, I can just skip through these things because in this much width of the screen I am not able to see the date and I am not able to see the most important data right. So, let us see how we can do we will enable that model contributed model image in place and I will add one another image time and I will get a responsive image in this list because I have enabled the responsive image model. So, I will just define that if this is the image style of my image it should be replaced by another image in small device. So, as you can see in responsive image case 3 I will go with the desktop 4900 pixel in tablet I will go with the default tablet but in mobile I will use the mobile art direction in this time which I just added. So, in responsive image content type 3 I will I need to do little bit 20 in mobile and field so for desktop image banner field I need to give my image replace case like in desktop I am having this image. So, in desktop if I am having this image. So, in mobile which image should be rendered as an after part of desktop banner image. So, as you can see I have defined two image fields desktop banner image and mobile banner image. So, I will just do this managed field if desktop banner image is taking mobile art direction use case it should be replaced by mobile banner image. So, I will just go to manage display and hide my mobile banner image because I do not need it. And in desktop banner image I will define the responsive image style case 3. So, it must be and it just pass 737 pixel by images rendering on different image. I have added two image for that content for that node of this node. The images are pretty loaded because as you are resizing the screen I can see that it replaces the image immediately. Are the images are ready in the client or are those retrieved as you are resizing. So, we need to resize it. Yeah, but I mean are all the images pretty loaded. Yeah, all the images are free. So, in that case it is using more bandwidth. In that case it is using more bandwidth. No, actually all these images will be cached. So, it is just we need to render the cached image. So, in initial node it does load all the questions. So, it will cache those all the images. So, your browser will decide based on the use case which image to get. So, it will get only that particular image. It will not get all the images. It will decide at the prior moment. And then it will see this image will be the best. It will call to that image and it will get better. So, these were the demo regarding responsive image style. You can see in Drupal 8 we have to just do some initial configurations and we need not to worry about all the different images. We should not forget Drupal 7 also. So, these two modules we can implement and contributed modules we can implement and we can have these effects on Drupal 7 also. So, I think I am making some little bit boring. So, I will just go couple of slides with some masala kind of thing. Yes. Let us find that we can define the image size and then we can approach two different images. But what we can do when find is the best in the images. We have a mobile version and we have desktop version and find is the best in some images. So, we cannot have elastic time to approach some other images right. So, any kind of that. There is one problem effect. So, if something is defined that we are going to just squeeze our image like in my case. I just need to squeeze my image. I need to cut the outer part. So, I can define problem effect in that as well. So, it means we should provide some third part to my image. No, no. How we are going to decide? In Drupal I am adding image size, I am adding scale effect, I am adding the saturation. You can see the problem effect also will be. Oh. So, just if we are pretty much sure that my image should be cropped with this much space only, with this much width only. Then only we should do. Otherwise we should upload two different images. Just we are uploading one desktop image. We will upload one mobile image. That means we should ask client to upload two different images. Yes. Because we are actually want two different images to be done. But we are pretty much sure that if we have this much width from this much width, we can use that effect. So, if I am having like I can give example, if I am having this water bottle image and I am just rendering my text, what from that? So, I know that my other water bottles will also be using the same image width. So, I can just cut that, I can just add one crop size and I can just render my. So, it means when client is updating these images. We are not sure that how much we need. Yes, that is correct. We are pretty sure. Yes. But if we are pretty much sure I will suggest go with the crop image. That is what we need not to worry in that case. We just have to upload one image and it will crop for the mobile. If the client has already defined where to cut it, then it is better if we use a crop, right? Yes. Otherwise it is better for them to upload a different image. So, I need not to read all this. You can just see one boy and girl just went to a date and boy's boss called and he has to go to office just for redirecting one crop. And this happened with my most of the friends. I need not to name these here only. But I think Drupal it brings a new ending for this comic. For these small edits we can just edit the mobile. We can just have the mobile theme in the mobile. We can just have the admin theme in the mobile and we can edit our site in the mobile as well. So, you can see in Drupal 7 I have taken this screenshot from a boy to a girl and you can see in small screen my Drupal 7 admin was like too much. I have to zoom in and click. And it is not sure that we will be pretty much happy in another task. So, actually Drupal 7 admin theme was not meant to be in the small screens. But in Drupal 8, right from the beginning installation the theme is responsive. Your icons in the manage admin toolbar your icons will be your desktop icons won't be there. So, it will just be behind the icons and all the admin blocks which are horizontally placed in the desktop they will flow to the vertical position in the small screens. So, I have said that all the blocks will be vertically aligned plus it will just remove the least important data like description of the module. We need not to have in mobile. So, it will just make the module name and just checkbox to enable that. And another thing for content editor there is an awesome specific tool for there we can just edit our site from mobile. We need not to worry to go to desktop, we need not to worry to open our desktop. And in most of the countries content editor are adding the content through Tablet only. So, this was this was the most important initiative which was taken in Drupal 8 and made awesome mobile. Another factor in this responsive image responsive is the tables. Tables were like it was too much harder to adjust the tables in the small screen. I got lot of you can say issues because of these tables and they are not fitting properly in mobile. So, we can Drupal in Drupal we came with a new solution that we can just the least important column and we can just show the most important data as you can see in modules also they are just using the same technique. So, how we can do it I will just show in that. So, I have built one view and in that view I have defined my format as a table format. So, I have defined the fields node ID, title, body and this is my image and when I squeeze the screen you see my body column especially it is going to be too long we have to scroll and scroll to get the line. So, what we need to do in this case I feel like my body field it is not that much important to be showing mobile. I just need node ID and I just need my load name. So, what we can do we will go to the settings and here we will get responsive image use case. So, we need to set the priority responsive table so, we need to set the priority as you can see there. So, I need node ID I need title in my mobile screen, but I need not to have a body in my mobile screen. So, I can just keep the priority low and author field I will give priority medium and I will save this screen. So, one thing I will go to my page and reload it. So, as you can see I have just in my tablets you put I do not have author and then when I went to my mobile you put I just do not have this body author field also. So, we can just we can just cut some column from our viewpoints. Another factor of the responsiveness in mobile interpolate is the html. So, all the html tags they have brought in interpolate. So, all the new semantics and all the new form elements date email telephone all these are in the code and fall back to this html. So, some browsers are there which do not know about the html 5 elements. So, modernizer yes is included in the code. So, they will have just fall back and this is in the interpolate code itself. So, all these factors why we are discussing about all these factor responsive images tables and all, ultimately they are leading to our performance. We want good performance we want awesome user experience and not only user content editors also. So, frontend performance if you can see why we are concentrating more on frontend performance in desktop your performance it will take 55 percent in the frontend ok. It is depending on the frontend more than the backend your performance of the site and in mobile this use case this case is going to be more interesting in mobile your frontend is responsible 90's frontend is responsible for 97 percent of the your performance. So, how we can see in the interpolate we have image optimization we have html