 So I'm going to speak on designing the browser. I don't know how many of you understand what I'm going to speak on. For that, what designing on the browser means, in simple words, is making a mock-up in marketing. That's the simple definition. Does anyone have any problem in understanding this? I would appreciate if you could hold this one. OK, markup is primarily in HTML, if I have to make it in HTML. You want to design a mock-up in HTML. That's what in plain language it means. And designing the browser is something that is not new, but over the period of time, somehow Photoshop, Illustrator, Firework, and all these graphic editors, they came in between the process and the exact thing. Whenever I use Photoshop for all my presentation, it's going to simply mean any graphic solution. OK, don't run after Adobe for that, all right? That's what I'm doing. So if you're in the wrong room, this is the right room. I'm solving music, photography, coffee, food, more food, more food. Goes by the name of Mirals. We are located in Delhi, and how smugly we are as small as this room. I'm not sure if it's set up to be like this, but unfortunately, it looks like this. So. It's pretty cool because he's in that side. I think so. He has a smile about it. Anyways, so we can say it's a combination of people who put it. Definitely, it's not a simple design. There is art, there is technology, there is process, there is engineering, a mixture of lots of things. That is what the design is. And I can say that it's. So when the background program is working, and these two general users, it looks like that's not creative enough. He's just coding something I don't understand anything. But when you see a website, you think, oh, this is program, and this is creative, this is new, this is good. So most of the projects start off. So there's an idea, worst way of doing it. Because most projects that we have come across, many projects that we have come across, many clients we have come across, many people we have come to a different set of needs, have totally forgotten this. They already come up with a solution or idea. They say, okay, I want to create this thing, but where is the purpose part, and that is completely lost. It's just gone. But I feel in this process, what should have happened is, instead of flowing like this, purpose and design combined should actually create that. And the designs would actually come much further before you actually start thinking of the idea of the solution. And this can further a design, and development should actually form the product. Instead of going in a step by step thing, where you first think of the idea, and deal with the next person, do the coding, give it to the users. It should happen differently. And you have these four stakeholders you can see in this entire process. Keeping it simple there is a stakeholder who can be a product owner investing in that idea. There's a designer involved. There's a developer involved. And throughout this thing, I've only been front-end developer. And developer, of course, his hands are tied. The designer gives. This is what you have to do. The user cannot react to that. He has only experienced whatever the final product is. And in this process, what happens is, the stakeholder actually communicates to the designer. The designer gives his output to the developer. The developer finally, the output goes to the user. And what is given is the stakeholder gives a brief to the designer. The designer works up a solution and many a times produces a photoshop mockup for a static raster image mockup. Gives it to the developer. This is usually pixel-perfect mockup. The developer on the other hand, now I'm interested in coding. Now you have a working website which goes to the user. This thing has a problem. And I want to play a video on this. So what Akash experienced for most is when there's a different designer and there they throw it over to the world. They think the entry starts implementing that. They realize there are a few problems in that. They have few changes in the design proposed. But they can't in itself. So if a designer and a developer is working in silos or if they are not interacting with each other, that's a problem. So what is the problem? Lessons. Basically they can align things. To align things. To align things. To align things. Is the role in the grid to just act? In the grid I think the problem is that what do you do? In what form? What should be the outcome of the design? Design is the problem. I somewhat agree with that. So what the problem is that the grid is not a class of hands. An image that a model of the image that is produced by a designer is better explained by works. Not how it looks or feels because a visual design in images is just a visual. That is just how it will look and it cannot tell how it works. Then the work of a designer is much more than that. If see that the rendering in a Photoshop is very different, it includes different things like in a pixel-perfect manner. Unless it will have a consistent bit of a cross. That is a problem. Similarly, responsive design is more that a lot of hard work that you have to do on Photoshop to do it. Similarly, we will look similar across for any client. So the model is trying to show that this is how my website is going to look. But the website's look will change depending on which browser it is opening in. And that is something that a client or the person who is trying to understand the model will never experience how it changes. That can be the same in every Photoshop. And if you go there, it doesn't matter, it still works. It's still giving a different experience for that person, but the experience is still complete. If you go i7, it is very much like a i6. So, any client, you cannot show how the model is going to change. You cannot have any more boxes working. How will the errors follow? Is it going to change? This cannot be demonstrated on a flat dimension. It's very marvellous. A lot of photodynamic software is these days, but we will change this. There are some complexities. Now, when you take a report, there are lots of complexities that are, that contain. And that is something that perhaps your designer never saw before, because perhaps, because he's not good at it. So if you have a varying text, which is something that you cannot do in CSS today, and you try to put it there, then it's on the same way. There's a hit of the semantics as well. So, these things are automatic. You don't see that. And say 30 characters, or 40 characters. How does the browser behave in that case? You cannot demonstrate that inside a strategy machine. Browser supports better features. The more recent features, for example, if your browser supports CSS 3, you can put a browser on it. If the browser does not have CSS 3, it's okay. Box. But it works. It still works, right? And similarly, if there's no JavaScript in that, there should again not be a browser at all. So if you assume that it's a wrong assumption to make that there will always be JavaScript in the client's computer. So, at times, we actually change the entire static image buffer that you make and only show the final image. It will not show what will occur since there was no JavaScript in that. The solution to this is perhaps to come simple because that is what has to be judged. For that is what you would want to see and understand how the website feeds. How comes in designing the browser? Because if you design the browser, then the mock-up that you create is a functional website in itself. It may not be feature-complete, but in the next few operations, you'll keep adding the details inside it. The flow that we follow about this, we first look at the UI flows. What we try to use is, there's a very simple technique shown by 27 Signals, which is a shorthand to show UI flows. You just Google it and you'll find it. And what he says is simply know what is in the user scene, what are the options he has, and say you go to the second page. That is a simple diagram flow. Then you decide what content goes in your website, as to where the layout is going to be and then we jump into the content. The content will not have any styling because even without CSS, the content should be perfectly displayed using the default browser styles. And once we jump into the code, we let the design go incrementally and vibrate it. So we make one iteration, say we are working in a 1B vibration. We'll make one iteration of the design, show it to the user, and you see it, you evaluate it, and then you say, okay, this is the direction that I like. You tell us, and then we, and then we scratch, but an improvement already shared in a certain set of limitations that we have. But apart from those benefits being overcome, there are other things. Firstly, it's the real deal. It's the real system that the users are going to interact with. And in order to view your website in the browser suit, design it, the browser does have several constraints, and it can automatically answer the constraints of your strategy. The moment you start designing things are used, it's just the font I use. There are certain platforms to be used, others will not work for different purposes. So you automatically understand to use the right things. You should, you would also be able to answer, should the mouse button look like this, which is something that you cannot define in your Photoshop mouse. Uh, yes. It can demonstrate that, and the moment you, and you can do quick migrations. And this is what JCB decided, let's say you make changes, because if you want to make changes in Photoshop, then you have to go back to code, and make changes there. You have to do one of these, go back to code. Now that is a slow process, and it's not meant to do that. Happen with that. Another thing that we can now do is collaboration. If it's in a code base, and if the design is in a code base, then you, you want to go on a page, someone else is trying to put a bottom line on the page. That can now be done, if you have actually done it. It is usable right from the start. The moment you make one iteration of your design, you can actually put it out to the users that will then start using it. So if you have a, let's say a simple, if you have a software that is, is large in size, you first want the users to sign up. Then you can send it to the sign up, put it out to the user, the user starts signing up. Then you can do the other part of the design, and put it out to the users again. Now you can sign up, now you can log in as well. So that is something that is excellent, because if you put the sign up, you get the user feed. You also have enough time to improve on that, while the product is being done. So that's good. So all over states, how does one enter the name, what are the JavaScript calls that have been made, some changes in the layout that might be happening. Everything can be done. Two is because of certain things, and one of the things that I just found out, that is something that is assumed for that, and every time a client comes to us, many times, many times they say, okay, I have developers with me, so give me a static mock-up, I'll give it to my developers and we'll work that in the code. But we reply back that I have to design a system in CSS, and they be surprised because they've been starting off. Now, this is a problem, they also had to design the manufacturing process, how it will work, how does the machines hold this very complex, very complex type of machine that has to hold this part and manufacture it all throughout the processing life and then produce it. So by the end of the day, they started designing the body and not just a bit of website, the code in the CSS is the industry process to get it onto the web. Something that Zedman said, we are the designers, I hope, or many staff or in this way, they are designers who might not be able to write actual code, but probably this reply by Zedman, he is, I would say, he can mark out the excellent telephone, but you are designing it. But you do need to know how much possible to mark out the CSS. If you don't know the possibilities, what is possible with CSS and HTML and JavaScript, and you go on designing, then there's a problem. So you may choose to go on designing, but you should know how the markout works. Now, in the worst case, if you come out of code with your own blood and willing to learn how to code, I think the solution is this, but this is definitely the worst case solution. What you need to do is you will clear up the error. Keep the error about this idea because you want to design the experience as well and not just the visuals. And that is something that was very affected by the first session by Rahul and Akash over here, where they explained where the designer and developer were going to find out where the process was. Now, if you can go out, then you actually don't need to clear up that is all. The thing is, another problem is designers love Photoshop. The contrast is not there but there's a variety of things. Okay, designers love Photoshop. Okay, say you can code but you still love Photoshop. I love Photoshop and design other things. There are limitless possibilities and this is creativity of very powerful tool. It's possible to do things with it or design things with it. Now, I don't have to talk about this much. I told you the importance of the code to be able to do things. Now, about but you see, browsers are probably right on the right side. I don't know where it can be any more powerful than that. That is, as much power that you can have on the line. You can do rounded corners. Today with CSS3 you can do rounded corners. You can do radians. You can do shadows. Everything that you have slowly, Photoshop and other graphic designers is going becoming less and less relevant for these kind of processes. Basically, creating creative models. Now, it just tells you these are the things that I can do and these are the things I cannot do. And if you're trying to do that, something that I cannot do you are going to take that somewhere else. That is, probably you would try to make a image slice and put it there, which is not the best way to do the make internet. So, it's a constraint that is following you which has to be enthrased and speed. Okay, and take this button so, I go and it starts slow, but the pace picks up like anything. Today, you have a blue thing you want to convert it into a red thing. Try doing it in Photoshop. You have to put it right in front of your site. Try putting it into red. All of them. But if you have it built in, browsers, at that point of time, two lines of code that you can change in CSS and that thing will send. So, then it becomes fast. And this is how probably the graph leaves if you are designing the process. Like this at a later point of time, and in Photoshop, it will work. But actually, it starts slow. That's what it does. That's also put up there. Go ahead. Since it's touristy, the cost will change as well. You cannot build a house today and tomorrow you say, okay, I'll go and see what I should have done. Go and bring it all up. It's not that quick. It's not that cheap. It's not that easy to do. But that's why that's how it's going to be. And change is much easier than this. It's not complicated. But there are a few reference over here. Three links. These links are also I put these links over here. The difference that's right there. How we work with something that I already stated and we define the flow and then we get the coordinate with the jump to the core and we do everything. That's exactly how we continue doing it. Paper mockup is something that we are not expected to be clicked on. It's not on the screen and we create other slides to say that process. But even if I'm going to release the presentation model see how good it is. And Photoshop has a significant role. Now I don't deny that Photoshop is completely dead. It's you don't use Photoshop that you have designed. That's because you still have to design your products. And all these things Photoshop has been made and it's a popular tool. It has good things. It can do good things. But its power does not incline to the web. For the web for designing models for the web. Now if you have any questions you can ask me but what I think is the design of the browser makes sense is something that it's not a silverware. You have to understand aesthetics you have to understand accessibility you have to understand every design of the browser. Without that you wouldn't be designing good websites by statement and that's all you have to understand. So I try to design models because I don't have Photoshop and I'm going to work with the design of the browser is a simple task of choosing the background of my header and the external these two things it took in all this work because it was going to look like this. So I go to a site which gives me different color themes and I think about them. I try that it doesn't work now because I can click on that element and this is good and then click on the text okay that can show feedback it's not there it's just okay. So I think visual changes in photography is I suppose not as the responses we shown on one of the browsers I change the image I click on the text which one of the things you can perhaps you can use color switch the color see the color but you have to actually see it whichever color shape you like you copy the text value and paste it there and that is something that is once approached but for the even better than that is the image web inspector in the browser it will show you what will happen and there are tools that are coming up I don't I don't use it myself but after the session this talk to me there are I don't know how to use that but you can these are things in CSS these are special keyword values right the text as soon as you go there you can change the shape of the text something different yes you cannot do that but surely I see that there will be something which will be easy to do again photos I am not denying the power of Photoshop at all as a matter of time Spino divorce still been for doing this but I find designing on the browser will be so efficient and it gets better with time and the speed accelerates as I said initially you might be worrying about these color tones and that color tone at the later part of time the browser will be changed to change the port the browser immediately changes the color slowly and slowly and you will be able to pick now picking the right press me it remains hard it can always be on on top of that as you choose the right color it is not you are not sure that is the exact color that you will see on every modicum you will see it on some other modicum it will look different so if you have to go as you have different advantage if you are doing if you have a comment supposedly or a comment you might be going to monitor some things but this is not a base that is there but over a period of time you that is too small limitation might be so maybe just make sense that your graph your time the graph process that initial part it makes sense that we improve that just to get now just look at iterative processes that I am saying in our can you start making it? I don't know I wouldn't do that but maybe it is like it is in my head I want to get it as a picture or something that I can see okay to get that then we focus on it like what is the what is the if it works for you it is good like changing this method changing the process is more to do with what works for you if you see an advantage and this will slowly say that I don't need to do that but as I said it is so bad Photoshop are at times better than I just use the right face and whether it is looking good or not now if Photoshop is not giving me the right thing which I can see on the browser which is how the browser will show me bits of fail so that is what is the closing process you think yeah that is what can you do like you can make it public now also that is how good this process works the first thing that I pointed out in my presentation is you have separated relatively different roles these are actually a role that should come closer to each other with each passing day for front end code designers need to be able to code and developers need to understand because what happens in your case is if the company is lost if the model is made given to the developer when he goes on to make the working code there are lots of problems that he runs into at that point of time he is the person who is making design decisions which he should not be the designer should be responsible because the designer never intended to do it at that right you guys have a difference I don't think it will say what you are doing is the app itself so are you trying to accomplish the working or are you trying to play simple jazz with HDM and cases we go from such so what I mean is let's say you are trying to play jazz with I what I am doing is what we start with is playing jazz with HDM and code which is separate from the design the the buttons are working but that the output of this is actual HDM then the problem is after you integrated using to prove out the same is I can use to do the template is something done from scratch template done from scratch now if you choose to not do it that is a very difficult thing we can take the same my question wouldn't you actually start at your own screen it would be easier to show you can do You have to have that data inside your database module to actually throw the different outputs. You cannot hard forward. That is the reason I want to use the template because I can do it differently. Okay, time has begun this morning.