 Okay, hi, sorry, sorry to keep this quick on schedule, but We have three more talks, and I think they're all fun ones, and I want to fit them all in today Before I go on some announcements all of you have got feet. Wait first important announcement Did somebody lose a key? Down in the dining area if you did I've got a key it says link on it if you've lost one if you find you've lost one Find me later All of you have got feedback forms Do let us know how we've done so far. Oh, well how has geek has done just as an FYI I Am not part of has geek and so I cannot give you free beer But do fill in the feedback forms and drop them at the registration counter after you're done today Also, when you're leaving if you could just leave your NFC badges as well, that would be really helpful okay, our next talk is by arpan who runs a Hyderabad based design and development firm called horde software and he's going to be talking about Responsive design which is designed. I'm sure most of you know what responsive design is It adapts to context. So He will show us tools and techniques to do so Hi guys, I am arpan and I will already introduce me. So I'm not going to talk more about myself I've really been enjoying this conference so far a lot of fantastic talks So I've got really big active many big acts to follow. Hopefully you find this informative anyway So I'm talking today about responsive design. So responsive design is about designing a size to respond and Adapt to different screen sizes to different resolutions and different input types Actually, I talked about a similar topic last year and when I talked about that, this was the Image that I used. So these are all the devices that they are designing for but the reality is a little bit more complex than that We have a few more devices than that. Now, this is a few of the devices that were on sale in 2011 in the US and today we have many many more devices than that and these are just the Android devices You also have iOS. You also have BlackBerry. You also have Windows phone So we have a lot of devices that we need to support and that our users are using Let's think about just some of the popular devices. Let's say just take four of these iPhone 4 5 the Galaxy S3 and the Galaxy Note. Now, just look at that this phone that the Galaxy Note is over twice the size of that one So what do you do when you're designing a site? You can't do you give both the devices the exact same experience exact same layout because that's not optimal And these are just the phones right when you add the tablets you have a few more and these are just some of the popular ones you have several hundred more devices that we are supporting and Well somebody at Lenovo thought hey, I need a bigger tablet. So they came up with a 27 inch tablet. This is not a joke This is an actual device that's on the market. I thought about getting it, but I don't think it'll fit in my pocket So decide to pass Right, so these guys at OpenSignal, they ran some stats on some of the devices that their application is running on and Look at that you have screen sizes from three and up What do you notice? It's not just that there are so many different resolutions Yeah, it's not like you have like four or five or ten resolutions that I can test on and okay My site works great. You have every possible resolution. That's one second There is no clear gap between what is a mobile phone and what is a tablet? They are just you have six inch phones now and you have tablets that are relatively small as well So there is no clear gap So you can't say that I'm going to give one layout to a mobile phone and one layout for the tablet We need to think about what the screen sizes rather than worrying about what device they are using Okay, so this was a quote that was recently on Twitter So how do we make sure that our responses are not like that that we you have you used to have layouts that were for Mobile and then you have layout setup for desktop and response to design is just a compromise How do you make sure that our designs are not a compromise that they are not just Accessible on all these different devices, but that they can be used easily that a person who is using them will actually enjoy using your site On any device. It doesn't matter. What do I say? So basically thinking about all of this looking at all the devices that we just saw and all the different screen resolution sizes Retina displays input devices and let's not forget when we are thinking about responsive design when we are saying they're going to support every device We also should not forget those assistive devices. You have already heard a lot about accessibility today So I'm not going to talk too much about that, but let's not forget when we are talking about responsive design We are saying they're targeting each and every device has there It doesn't matter who the user is it doesn't matter what device they use. They should be able to access our site So where do you begin? Well, so here's some bad news. I don't have some super secret formula to give you today There's no one formula that's going to work for everyone each of us each one each designer things differently Inspiration strikes is differently at different times. The fact is even when I'm working on different Projects my process changes from one project to the next it depends upon the requirements of the project it depends upon the client and how he understands things But yeah, there is no one process that's going to work for everyone But there are a few strategies a few techniques that you can use to improve your workflow to improve your responsive designs So, let's see what can we do The first thing to remember is that responsive design can't be bolted on you can't first design a site that is for desktop Screens and that is all static and fixed fixed with and then add this as an additional feature Responsive design if you want to create a good responsive design it has to be built from the ground up It's not like okay. I'm going to add shadows and effects and Some special feature to this the responsive design has to be thought about from the beginning from the design phase itself Don't keep it for the last. It's not at the very end second think about In your design in your design elements try to aim for resolution independence as much as possible What does it mean that means that use CSS 3 features like drop shadows rounded corners radiance Whenever possible rather than using images so that as you are changing the layout for different devices You don't have to keep track of 20 or 100 different images for every size CSS 3 is actually very very powerful if you take a look at it and see how well it can work It can you can create some very sophisticated layouts and designs with just these features next Yeah, in addition to this now you cannot Do everything with CSS 3 you need you still need to have icons you still need to have images So what about icons you can create sprites image sprites for multiple different sizes multiple different resolutions But it is better a better option is to use icon fonts which icons are already vector They're already scalable you can change the color you can change the size and they're very easy to manage And there are a number of different tools that are there which will help you with this There are pictures shift icons and symbol set and there are many different sites I will share some of the links at the very end. Yes a Couple of problems that come when you use icon fonts is one the monochrome You cannot have multicolor. You can for instance have two shades of gray in your icon Okay, and two shades of gray is a very common pattern SVG works a little better for that except SVG doesn't work in older browsers again so that's one point and The second thing is hinting an icon fonts is usually problematic You know on a regular desktop when you're trying to display an icon font at 13 pixel or 14 pixel Which is the size of your text it usually turns out to be a resolution that the icon font designer is not optimized for Yes, and which means that the vast majority of users using it on the desktop get the worst experience so This has been my experience as well unless icon font is designed really well or unless it's used at larger sizes It's not going to be optimal at screens that are at low resolutions, especially on desktops and laptops But hopefully that will improve in the future But this is just an option that we have right now The other option is to use image rights at multiple resolutions both SAS and less can help you in Creating those image rights without having to every time create a bunch of different images in Photoshop That's one then the other option is there was an article on a list apart talking about res So that's actually quite a big topic which I am so I would encourage you to go and take a look at that Take a look at the site because if I talked about it now, I won't have time to talk about anything else So, please take a look at that site. I'll also be sharing some of the links related to dealing with Images at different screen sizes and at different resolutions So now let's get to the actual process Now as designers all these years we're used to creating designs in our graphics apps we Photoshop illustrator fireworks and We create many different Versions so you create one two three versions you go and share with the client to get feedback from your Colleagues and you make more changes and we are used to working in different several iterations to create a design that we are finally happy with right now We continue doing that But at the browser to each of those iterations as well So you create a design that you think works that you think looks good Then you need to create a quick prototype. Maybe it doesn't need to be perfect But check take a look at what your design that you have implemented. How is it going to look in the browser? All right, so at every stage so you might find that a design that you think works great That looks beautiful when you actually look at it in the browser when you test it on your mobile phone. It might Give a very bad experience. So you might need to go back and make changes Maybe the changes might just be some minor changes in the markup and the CSS or you might need to go back to the Graphics app and now it depends upon your Where you are comfortable making the changes But you need to remember this make sure that the browser the actual testing in the browser and testing in the Devices is a part of that iteration But now you can't keep doing like when you go to clients you often have to go with three four different design concepts or layouts Now you can't do that responsibly and spend create three four different designs get some changes again do three four different designs again Get changes and test in all the different devices. So one of the options that has been put forward is this thing called style So what are style tiles? So basically? Design tiles are basically a design deliverable So basically you have a bunch of you have a set of fonts colors and certain layout elements So rather than going with the finished layout and saying this is what it's going to look like on the desktop You look you're trying to create look at what the brand identity of the site is going to be on the web And you create a few of these and check how they are going to look so based on this So you start with us you start with a certain base with a certain foundation of typography of colors and of certain design elements and then you go start designing responses Now when you are once you have done that you Have to go and start actually designing the site. So the first thing Which have been if you are designing if you are designing for responsive design The first thing that has always been taught is mobile first, right? And we are very very We are all very disciplined and we always follow the rules. Well Anyway, so here's the thing that you need to do You start with the mobile layout first, yes But as you are defining breakpoints, you have media queries which say that at this size I the layout has to change Don't define these media queries Don't define this breakpoints based on the devices that you have don't say that this is the iPhone So this is a breakpoint or these all mobile phones. So I'm putting a breakpoint at this point rather Define breakpoints based on your design requirements. What does that mean? Let's say you started with the mobile layout You have everything is in a single column at the beginning now We are looking here as the screen grows bigger larger screen on a different device This layout that you have designed for the small mobile might not be optimal for a different device for a larger screen So at that point to define a media query you define a breakpoint and you add a layout you decide maybe you might add a column you might shift certain things around and You keep doing that. So you keep your as the screen size keeps growing you define breakpoint But define the breakpoints based on what your design requires And I'm going to actually demo how you could do some of that, but let's take a look at the next thing Okay, when we are designing responsive sites, let us not think of our site as a bunch of separate columns So you have on the desktop layout you have four columns or three columns the screen narrows The column drops to the bottom again the screen becomes narrower and the column drops to the bottom But rather think about how your content in the site on the page is related to each other What does it mean? What is what I mean by network of content? Let's take a look at this site. So you have an article, right? You have the article title and the content you have some information about the author and You have some full course and images now in the old method What you would do if you just drop the column is this full code This might be related to one of these paragraphs at the top drops all the way to the very bottom Which doesn't make any sense Instead think about how this and these way what is the connection and where they are connected? So in this case what I've done as a screen Rather than this for going to the very bottom it merges into the column into one of the places in this Based on where it is relevant. So think about your code your Design you should be starting it at the html level itself make sure that the markup is in the right order So that when you merge the things in when you decrease or increase columns you have the content coming into the right locations and Again when you go to the smallest layout for the mobile there are slight changes But essentially you have kept the order of the content based on their requirements So this is thing prioritize the order of the code the design in the browser should start. Yes Yes, I it is mobile first. I just wanted to demonstrate how the article page was If you're doing it mobile first, how would you know the source order on a desktop side would look Okay, so that's the point So when you're designing rather than looking at what is going to look like in the desktop browser You should be looking at the order of the priority of the content on your site What where does the title come in where does the content come in where should the navigation and the sidebar Then as as the screen size goes you use CSS features to lay out the content to move the content around Sometimes it can get a little bit complicated and it's not always easy to do this But if you follow this technique if you follow this method, it can make a big difference. What do I mean? Just take a look at now in this on the site, so this is related to your question on the site you have the Tagline which is probably like the close to the logo you keep it should be at the top of the page While you have the sidebar things like the Twitter feed and subscription which are not as important as the content, right? So although they might be together on the desktop page What you should be doing in your source code is to make sure that that is at the top This comes next and that one comes to the last so design your markup accordingly, then you can use the CSS to move things around That's not too difficult, right? So this is so if you start with the mobile first and you have prioritized the content in terms of what comes first So that in the in the source order that is first the tagline the content comes next and the Footer elements the sidebar things that are not as important are still there on the side, but they are at the bottom as your screen size Grows you don't just as I said don't just think about it I in terms of Columns that I have to have two columns or three columns and these columns everything in this column stays together Although these two column these two are in a single column in the source order They have been put in completely two different places so that when you are on the mobile phone You have the content where it needs to be and if you do this It's not just helpful for mobile devices it is also helpful for assistive devices because a user doesn't a user should not have to go through and read all the Sidebar before they get to the meat of the Any questions regarding How do you do this kind of layout? So if you look at your desktop layout, yes now Are you doing absolute positioning? Because then in which case you're also assuming browser width or do you have some other way of making sure things fall in place? So basically today, I haven't really planned a lot about the code itself But it depends in this particularly you could use You could figure out how we are going to be using padding How we are going to be using this at other times in a particular layout if it does if you are not able to do it Using CSS or you need to resort to something like absolute positioning The other option is have the content in two different locations in your markup. That's that's the last resort That's not the best option but that repeats your content and makes increases bandwidth usage for mobile Yeah, so that's the thing you need to figure out it depends on the layout like in the previous layout the In this page the way has the way they have done it is rather than putting things in just separate columns They have separated each column into a set of Several columns several content each element has so you have first in this main article You have this article then that sidebar is in the markup and then you have the other thing Yeah, this is the this is pretty straightforward No, this is the actually the one that I can't make sense of how you're done. So you look at the pull code Yeah, it comes after the first paragraph not after the first paragraph. It comes after the fourth of the Yeah, so now how the heck did it jump up over there? How was it positioned? You are using floats to say float right. So then so float right doesn't take it up It takes it to the right. So it has to be absolutely positioned to go up If this is floated to the left So the interesting part here is that quote is in the middle of this column. Yes, okay So how did the next one come back in the middle? It can't have been floated That's why it's actually trying to go to the parent of the column and then going to the right side of that That's my best guess I'm looking at this or it could be absolute I I don't see how to do how this can be done without absolute positioning. Okay challenge accepted Yeah, so actually I have done stuff similar to this and different not exactly like this but stuff similar So it is actually not like not as complicated when you actually get right to the core to the CSS It can be done without too much difficulty. So let's work on that after this I'd really like to see the code that makes this possible So I haven't designed this particular site So but we can take a look and we can also try our own stuff. So anyway, the idea Behind this is that the fact is don't think about your content just as a bunch of columns But think about how the different elements are connected to each other and design according like as we said some of these things They seem quite complicated and it's not they're not easy You need to have a really really good grasp of CSS to be able to do this and you need to not only that Even if you have a good grasp, you need to challenge yourself And if you do that you can achieve this occasionally you might need to do JavaScript But I would prefer I would say that many of these layouts can be done just with the estimer and so So I'm sure Yes I actually you are talking about creating websites Responsive right from the scratch. So we are that's what we are talking about here So have a scenario where we already have developed one application So do you have or do you suggest any strategy which we can follow to make it responsive? So keeping in mind the way you just all just to make sure Keep the order in mind order of the content in mind and then do that So here's the thing responsive design preferably you start from the From the base, but it's not always possible. You might already have a page that you might already have a site That is there in you want to add a mobile layout or a responsible layout to that So the idea is to add add media query specifically for mobile and do that You want to hear more about that watch the video that I spoke last year at meta refresh Okay, that covers a little bit more about this and you can talk to me after sure. Thank you Okay, so back to this Don't dumb things down for mobile. I already heard this today some but I'm going to tell you I say it again Today the mobile devices that we have today many of them many of the browsers that we have on a mobile device Are far far more powerful than the devices that we had earlier So don't just assume that a user who is on the mobile does not want to do it does not want all the So let's here's a simple set of pages set of designs responsive design that is done for different Now here if you notice how you have the same content you have the title you have the metadata like the author and the Date and you have the content and at the largest size They have made some changes so that to improve the layout further at a larger screen But here's the thing you might say but what about the sidebar in this layout you have the sidebar You have the bunch of all the links related to other articles while on the mobile layout that's missing But it's not it's there in the title in at the top They have a button which will display that but what they have done in the mobile layout is they have taken a look at What is most important on the mobile you come to an article you want to read the article You don't want to see all the sidebar and everything else at the beginning right so that is hidden But if you want to access that if you want to go to a different site You want to look at articles that are related to this it is still there the point is not to say that because it's a smaller screen I'm going to I'm not going to add these features are going to remove this features instead Take it as a challenge figure out. What is the best way for me to lay it out? What is the best way for me to utilize this limited screen space and Don't you don't do this if you want to hide certain elements a certain element should not be displayed on the mobile Mobile layout or on a specific layout don't just say display none because if you if it is hidden It is hidden completely for all devices, especially if someone is accessing from an assistive device They might not know that it has to be clicked or different instead Use negative margins use there are many techniques the easiest way is just given a negative margin to the element So it's moved off the screen. It is not visible on the screen But an assistive device can still access it and again mobiles are not less capable devices The fact is many times mobiles have certain features that desktops don't have For example, take a look at this For the mobile layout, they've added two buttons at the top You know what that does if you click on call us it opens the phone it opens the phone up in your phone with their number filled in You click on find us your maps opens with their address selected So there's just a thing this is something that you probably could not do on the desktop But they have done it for the mobile because the mobile has certain features that the desktop does not and Okay, so Performance good performance is good design Remember this always so yes, actually I don't really have time to tell you the full story But there's a story this is what happened at YouTube So the video page was 1.2 MP size in size and this guy was somebody was writing about it So this guy decided to fix it. So Chris Zacharias. So he changed it. He edited it made many optimizations to change the file size from 1.2 mb down to 98 kb and They tested it they added a opt-in feature and they launched it So if somebody like wanted this layout, they could use it But you know what happened that after a week they looked at the data What what would I what would you expect the site would load faster, right? But the data showed that the site was taking longer to load Does anyone know why? Exactly. So people who are previously not able to access the site where they were suddenly able to start access the site They looked at load times from countries like Africa South America and Southeast Asia and they were sometimes as long as two minutes So people were willing to wait two whole minutes for the page to load before the video is even displayed Now if it was taking two minutes on this new layout That means it was taking 20 minutes on the old layout not for the video just for the page So suddenly users who are never able to access their site were suddenly able to access the site and that's Something that we don't think about because we generally have broadband We have 3g which is not always there, but we are used to having good performance So we need to think about users who don't and finally testing You need to be testing your designs continuously through the iterations as you are doing it on actual devices You cannot just make your browser screen smaller and say hey, I have tested it on a small screen You need to actually look take out a mobile take out a smartphone Open the site and take a look at what it's gonna look like now You might not be able to afford like like some companies have 50 different devices You might not be able to afford that have maybe three or four devices are few different screen sizes Now smartphones in India are actually quite cheap and you can get a second-hand device the point is have a few devices and test on the actual device and I've been told that in Bangalore there's an open device lab which allows you to go in which has many devices I get 50 hundred devices to test them on so Utilize that if you are in Bangalore, then you have that option if you're not then you still need to have a few devices and Finally published Though when you're creating your design, especially when it's responsive design Don't wait until it's perfect. It's gonna take a lot of time. Don't wait for perfection Once you are satisfied once it's at once it's good enough launch it you get feedback from your users See how they are using it. You might have some brilliant idea that you think is so brilliant but your users might hate it and Alternately you might think that's there is this problem this really big problem that I need to fix and nobody else might care about it So get it out to your users because remember once you have published your site once is online That's not this that's not the end of your design process. You need to get feedback from your users You need to iterate you need to experiment need to try new things and see what works and what doesn't and Finally, if you are trying something new some a new technique a new design that somebody else has not thought about Then publish it on your own site or share it on Twitter share it with us So that we could also try that out and maybe some of us might be able to give you some more insight on that There are a few tools different tools that are there one is just testing out you Firefox as a plugin This is a bookmark that can be used to test it in different layouts. You have this app called remote preview Is something similar to I guess open-device lab has things like this So you basically load the page and it loads in all the different devices that you have Then there's this app image-optim which is for optimizing your images if you're on the Mac You can use this if you are not you have there is smush dot it which smush it which does the same from the web And finally there are a lot of different sites So I have covered very very little in this topic. There's still so much more You could probably sit for a day and several days and still not know enough about this topic. Please go to the sites I will be sharing more links online on Twitter as well as I Was planning to create a checklist, but I was not it's not ready yet But I'm here's the plan. There's a lot of things about responsive design that Many ideas that all of us have and I'm sure there are many of you here who know a lot more about responsive design The plan is I'm going to set up a GitHub repo with some of the checklist some of the items some of the ideas And I'd like all of you to contribute. So if I'll be sharing that link on Twitter later today and that's it any other questions Okay, so responsive design has finally hit the mainstream and there are offices and designers all over the world who are using it Except that responsive design in the web Isn't it is in its infancy specifically when it comes to web apps when people want to build working machines? Canonical example is that the Gmail team refuses to make a design that works on desktop and phones. They're actually separate code basis They're separate experiences Is there any sort of direction that you think the web is heading towards where we will have responsive behavior on pages? I completely get on websites on static websites and content It seems to be now it's boiling down to a layout problem But it seems like we don't even have a clear direction in the web app space yet when it comes to applications Yes, so that is a pretty big it depends upon the project It depends upon the thing like something like Gmail could easily be made responsive because you do have you already have a clear way to do it You already have a mobile app which does that but it's not just a viewing thing It's like the actual behavior the JavaScript the nature of the JavaScript being executed changes at different resolutions Yeah, so that's it's difficult to say depends on the project It depends upon that because we are currently working on one small project where we are We are working on it responsibly, but that's not live yet There are other projects where we decided that the client decided to have a mobile app And did not want to spend for a completely responsive design But we made it responsive so that it works on tablets and desktops while if you're on the mobile you have a separate mobile So it depends upon the complexity of the application and it depends upon your budget for example Although responsive design is really really nice and I find it exciting. It's not like a silver bullet It's not going to work for everything. So there might be pages There might be times when you need to have a you want to have a rich client You want to have one rich client for larger devices and one rich client for smaller I would still go with responsive I would still say that design responsibly and if you still want to have a separate mobile apps Go forward with that start with a responsive design So that should be the first thing it should not be though I want to have a responsive design or a mobile app you start with the mobile you start with a responsive design mobile first design it and Then in addition to that you want to have certain refinements You want to have a native app or the iPhone or for the for Android go ahead and do that but your User should not have to download an application just to access your site Yeah, I wanted to answer Sunil's question in different way I think the problem that you're getting at is a technology limitation right that we have with our current CSS and JavaScript So I think it's for us people who are implementing size to figure out what the limitations are like for example before media queries were invented or implemented Someone realized that if we had this capability then it would be easier to target different viewports right now We are realizing it's really hard to customize our behavior our app behaviors on different viewports So we've got to figure out what the difficulties are and then propose the solutions and hopefully the browser vendors will start implementing them and We get truly responsive or I don't know if that's even it's something our end goal is to deliver a good Optimized experience no matter what your viewport. So if today that means serving different code bases and so be it and Figure out ways that will help us reduce this Diversity of code and maybe use the same code with right So actually if I could add to that Ethan Markwood actually talked about that I think last year where he's talking about not just having a responsive design but on the server side customize so you have a responsive design but in addition to that on the server side you customize the Markup that is given to different devices. So you have a combination of device Detection and responsive design So it depends upon the complexity of the site because like he was like I talked about source order and We said it's not always that easy to just decide what source or what something should be To keep something at the top in a desktop layout and at the bottom in a different layout So in that case one of the solutions that they had for one of few of their applications was to Customize the layer markup that is submitted given you still have a responsive You start with the responsive layout, but then customize the markup at different resolutions I'm not sure about it would depend upon your requirements, but that is one of the things They didn't actually what they were doing was not necessarily JavaScript But they were actually giving different HTML markups to the different. It was the same markup just Reordered differently. I'm actually, you know picking on this instead of sniffing User agent to decide what JavaScript is so is there any accepted way of Linking your media queries with JavaScript See media queries for instance are the right now the pretty much the only way to detect whether you're on a small screen or a large screen So, well me media queries detect the media queries of we are using media queries based on the width of the screen But JavaScript can also detect the same thing Exactly. So have you seen have you seen standardization in terms of saying that if a screen is a certain size then load the script I think Yeah, it was a market in that same talk or it or discusses about advertisements So the one of the issues was you have a responsive layout where everything is flexible except for an ad which is a fixed width Yeah, and what do you do with that ad and also? What about? In a in a desktop layout you have the ad at the top in the side column But that column is at the very bottom and advice is not going to be happy if your ad is that like is never going to be seen So what they did is they inserted different elements three elements for ads in each column and based on the screen size They inserted the ad in that column So it was a single script. It was just single markup But based on the media based on the screen size they inserted the ad in a specific place as it was as required So that was one option that they gave So, but have you seen examples of standardization of saying that this is how you load JavaScript based on screen size, you know media query for instance is well established anybody who does responsive will do it in the same way Okay, so basically saying that one JavaScript file for this Resolutions know like I can do something like if my the browser supports touch I will load all my touch behaviors So now the question is if the width is just less than 360 px load this behavior. Yeah I haven't actually Done that So one more input here is that you might want to Have a shift in the paradigms where you are also thinking towards, you know developing desktop apps in the first place So say for example, you can use events like tap which are abstracted As well for pointer events and you know touch events So at the end of the day, you are essentially not worried whether this this application is being used on a mobile or on a desktop and Secondly Just about desktop like if you look at jQuery mobile, so they have like paradigm shift in terms of even desktop apps that They try to enforce people to develop so that they chill well with different sizes of You know mobile as well An addition you need to add to what you just mentioned I am not a big fan of big libraries like bootstrap or jQuery mobile They are pretty good tool to start for prototyping But if you want to have a really good app when you want to think about in detail about how the different columns How that content is fixed together? I would prefer to write it by write it by hand if you are just having a simple like an admin page Where the layout is simple and you don't want to have to spend a lot of time That's fine, but a user facing site where you are going to be customizing a lot of the layout and where you want to really think Not just okay. These are the layouts. These are the columns just put one below the other But actually think about how the content different pieces of content are linked to each other It is it will be impossible for you to do that. You need to write your own Hi, this is not just with responsive design. I just wanted to check with the community I E6 user can we consider them as disabled? Okay, so here's the thing I see six I seven they don't support media queries So the thing that was a big discussion at Alistair part was this the absence of a media query It's a is itself a media query. So if a device doesn't support Media queries then by default they get the mobile layout Now if you want to add specific CSS for IE six seven eight you can do that by using conditional comments but For I might consider doing that for IE eight, but for IE six I'm just as I'll give them the mobile layout. They'll still the user will still be able to access it It might not be optimum But they'll get the mobile layout. So that's one option that you have you have to decide what how many percentage of your users are on No, the reason why I asked is most of us designers hate IE six And Most of us I said Considering that and we hate IE six we don't want to do for IE But we still talk about activity and stuff like so what do we do about users who have IE six? at a majority it can be at a browser center or People who have old OS Can we ignore them? So here's the thing if you are writing write markup and You use a media query as a media query itself saying that this is the base layout So what will happen is mobile stab that's all of that will get the new will get enhanced layout while IE will just get The content which is formatted. So you might have the this is this is a header to this is a header one So just do it in such a way that either they don't get any style styling at all So you just have a plain page which they can access or Create special styling which is there which is outside the media queries Which can be accessed only which IE six is going to apply and all the other layout will be given to the Browses which can handle the reason why I asked is I got a leaflet from registration counter from clear tip. They said we do that we do this and we also hate IE So just wanted to check So IE six users are not disabled. So here's the thing. Yeah, so IE six users are not disabled A person who is blind doesn't have a choice a person who has IE six I'm pretty sure he could change at least twice IE seven. I do support IE seven on some of the sites Again, it depends on your client. It depends upon your requirements Just to add to it. I think for IE six, you don't you don't consider them to be, you know, inaccessible There's this concept of progressive enhancement So you give the least common denominator functionality to IE six and then you decorate on top of it So Chrome guy gets a much better experience, but that does not mean IE six does not get anything So the simplest way to do that is just to use a media query So anything that's in the media is for everything, right? No, yeah So anything that's outside the media query like typography and forms IE will get that while anything that's in the media query will be hidden to IE So you're using the absence of media query as a media query itself Yeah, one more thing is, you know, that's a great point that people missed, you know, progressive enhancement But one more thing is I'm not sure of the people using IE six whether they have a choice or not because I know many IT companies in which the IT departments Say that you only have IE six and you don't have any admin privileges and you cannot install your own browser and There people are stuck with IE six over there. So Yes, that is changing that is changing but still Still, you know, the situation still persists So if your if your web application deals a lot with those kinds of people if your clients are those Then definitely you have to keep those people in mind and use progressives progressive enhancement and all that kind of stuff Hello, hello One small question like Responsive Hello, just to clarify about the we don't support IE six. In fact, we we've stopped supporting IE six any new Development that we're doing. We're not really looking at IE six We're probably going to do what our partners suggested that we'll probably load our mobile site So it's accessible But I think we've spent too many hours and blood and sweat trying to support IE six. So we're going to stop doing that Okay, so just one thing to add to that, right? So we have limited time and we are talking about accessibility So we need to figure out how much time we have to spend on that So are we going to spend a lot of time supporting IE six or are we instead going to spend time working on improving Accessibility for other uses. There's something something to think about. Thanks