 Hi, um It's good to see a lot of people here. I know it's a small room, but it's nice to see lots of people Hi, I'm Amelia. I'm merely on triple.org and merely Jane on Twitter I used to be lead developer at a company called Godel where a web agency based in Melbourne But now I work at Equium And specializing in front-end development there We're one of the biggest and most exciting triple projects in Melbourne Where equity may you on Twitter what we do is we make an awesome product that connects communities and precincts around office buildings co-working hubs residential precincts and the product allows like all this convenience amenity and management tools so for There's like a shopping. There's an e-commerce site. There's building management tools There's all this other really cool stuff. So I work with them doing the front end of that and I work really closely with designers in planning UX and Doing a lot of really fun stuff. I've been working with Drupal for about four years or so And I've worked on lots of different theme systems and made lots of different cool things from very big e-commerce sites to small crazy experimental JavaScript fashion sites and cutting-edge theme stuff and also really old-school IE eight compatible theme stuff So that's who I am and This is about this talk. So it's called red flags It's a resource for web designers front-end theme is but also project managers It's gonna the point is that this talk is about the the relationship between all these people in doing responsive web development and I'm gonna identify some red flags and things to watch out for in the course of that project every time I flag something You'll see a flag. So if you're taking notes and looking down for things to talk to your team about you can take those down So show of hands. Who's a developer here? Do we have any designers some designers do have any project managers and Who's who's working with responsive websites must be pretty much everyone cool We all want to work mobile first But you can't always get what you want We all know that this is like the dream that we want to like have these mobile first designs these mobile first build It's gonna be so beautiful and so easy But it's just not always the way that it goes and that's the reason why this talk exists because we don't always end up with this like very simple mobile first process and You know responsive design is web design taken this from yump who gave a talk about this But we're looking like every year more and more people are using their mobile devices to access To access the web welcome to everyone who is coming in And we know that now when you talk to a client about a site You know, it's not optional that you do a responsive designs pretty much mandatory So this is not like this is a shift that's happening in the last years and it's something that I think we're all gonna have to Start doing really properly and really plan for and all get really good at So instead of working mobile first, what do we end up with? Sometimes a desktop design and a developer's choice of modern responsive theme with instructions from the designer to just see what works Often we get designs that are intended to be pixel-perfect for one particular state of the website or browser or device But just indicative only for everything else or three or maybe zero breakpoint designs with no design instructions for the fluid bits in between Which is a red flag It's sad It's really sad for developers. It's sad for clients. It's sad for projects that's been out of control But actually like maybe that's really reasonable right designers can't be expected to be to provide pixel-perfect designs for every possible permutation I mean, this is true to an extent right as always though the devil is in the details It's you know, you can't you can't make a design and make you a website There's too much to ask for but what we're talking is how can we get it closer to something that a developer can actually use a surprising amount of design decisions end up in the hands of the developers red flag But it doesn't actually end up saving that much time for the project overall Like is that really where the decision should be made being made or should they be made sort of earlier on in the piece? And this can result in the whole thing getting way more expensive Way taking way too long these iterations are going to happen at some point So what we're talking about is like where are these iterations best like where are we going to do them? Are they going to be at the start of the project? Are they going to be at the end of the project at the review? Are they going to be like interspersed in between and Our designers are trying the hardest, but you know, maybe they don't have the right tools for the job Maybe they're still using Photoshop to create plans for something fluid Maybe they come from a print background a lot of designers that I've worked with have come from a print background And I don't really know how CSS and HTML work, especially in terms of fluid designs Maybe they just don't understand Drupal or what parts of it they can change or maybe they do understand Drupal But only enough to know like the bits that they think are holding them back Oh, I can't do this because of all forms look like this in Drupal or all admin systems look like this in Drupal It happens a lot Project managers are trying really hard too, right? Developers might be asked to improvise because the design budget might be restrictive Compared to the development budget So the decisions are given to the developers because that's where the money is and Project managers are strongly tempted to do this because it makes sense for their projects and The concept of client or stakeholder sign-off for designs is deeply deeply powerfully entrenched in the minds of many great and Successful people in the web industry as well as pretty much every client ever a good luck telling a client that you don't want to sign off from their project And combating this attitude is not something a loan designer can do on their own Remember that they'll be held accountable today for their work as well, right designers Even when they're making these big decisions, they are taking responsibility for them red flag if they don't feel that because they should But wait, wait, wait. What did I just suggest that client sign-off is a bad idea? Well, yes, but like many things it depends But because of what most project manager designer and developer teams are doing right now This is a red flag for responsive design. I think this is a good thing. Let's be clear I think the the idea that client sign-off is Is needs to be talked about is really important And I think that's because when a client is signing off on something, especially if it's a PDF or a PSD It's nothing like the website that you're actually going to build. It's really really different thing And I don't think you can sign off on a pair on like a PDF if what you can be building is a fluid responsive website They're completely different. So I don't think that sign-off means anything There's two primary hurdles to that design being sign-offable and clear industry trends mean that these two hurdles are getting bigger and more important every year Development and design have to be iterative and innovative which means that one sign-off isn't really going to be sufficient anymore and Allowing for a single waterfall design based on a single wire framing session is counterproductive to both of those goals and Of course the tools that people are using especially Adobe suite Are just like getting further and further away from what we're actually building So here's an example a Designer using Photoshop needs to represent a page containing some basic rich media like a custom video player So maybe it's a it's a video player and it needs to not be YouTube of immune So they've used some basic tools in Photoshop like filters and they've made a translucent overlay that applies like a blur on the underlying content that seems simple enough in Photoshop, but when the developer gets that they're like well Not every browser supports this blur feature and not every video player is going to look like this on all of the Browsers so this idea that was like really easy for the designer to make in their PSD Turns out to be really problematic when it gets to the developer and The clients already signed off on it. So now we're in a problem Web standards such as CSS and JavaScript plus old Internet Explorer browser versions are really poorly equipped to handle every single thing That can be done in Photoshop There's no like one-to-one comparison of what can be done in Photoshop and what can be done online and as a result project managers end up having to do all this work Analyzing every design seeing what's possible going over it over and over again trying to document everything and the larger the project is The worse that that becomes so much time gets spent on doing that And then of course responsive design just adds this whole other level of problem into that like this video player now Also has to work on all screen sizes. There was only one design provided Just goes on and on so simple assumptions can end up being even geometric impossibilities So that's sort of an outline of the problem. So now I'm going to talk about what we can do about it The first thing I think we can do about is get designers to do things better. So these are some tips for designers Number one is use the right tools Photoshop I'm still even last year even this year being I've seen designs handed over in Photoshop It's just not really the right tool anymore So if you're a designer or if you're working with a design using Photoshop, you should flag it and offer them a better option Layers don't really make sense for presenting different pages They're just not like Photoshop is a photo editing tool essentially the idea of like using it web design is really outdated now You either have to export it to a PDF or access it in a Photoshop file Both are pretty bad hard to use hard to measure hard to see how much padding margin What type of font is being used? Well, that stuff becomes really problematic Photoshop is also really expensive and it causes a lot of double handling which makes it even more expensive You can't prototype anything in Photoshop. You can't see how anything is going to look online And it only has a really loose like if any sense of hierarchy So the DOM structure is really difficult to represent you can't really say what's in any semantic elements What's a header? What's a footer? It's all just sort of one big flat image style In design, it's better, but it's still not perfect. We've used like I've used in design a lot I've worked with designers using in design a lot You can create a style guide in design that works much like CSS You can actually export paragraph and character styles in InDesign, which is really cool They actually export to CSS. You can put it in your site You can design across multiple layouts There's like a new option in InDesign where you can put the same page into different screen sizes, which is really cool You can snap items to a grid, which is really important You can create master pages which can represent ubiquitous elements like headers and footers And you can do this liquid layout thing, which is also really cool I'll put these slides up later so all of these things are made clear the URLs But this is our tool of choice. It's called Webflow It's there are other browser-based responsive tools that are new and shiny that are very similar to Webflow But Webflow is really cool. It's like Dreamweaver, but it's like in the browser It's so much better than Dreamweaver. It's pretty mind-blowing what this tool can do So you can design using actual CSS. You can learn about CSS while you design But it's like a drag-and-drop clickable interface with buttons instead of writing code You can create reusable classes that you can apply to elements You can prototype basic animations or you can use their pre-made JavaScript snippets or import your own There's revision history so you can go back and forth through time to see your designs over time and you can export it as Working HTML5 ready code Developers also think you're really smart because you give them a really awesome handover package But if you've never built a website before by hand, there will be a learning curve This may be the first time they've encountered technical concepts like the DOM So if you're a designer and you've never even thought about how things happen on the internet It's going to be like a little bit of a learning curve, but a good one. This is what Webflow looks like It's really rad. I'm trying to I feel like we should have a different view for this Thing this slides. Yeah, maybe we'll use this instead. I don't know if it will. No, it won't control from there Okay, I had some technical issues. We'll have to use this Basically, it's a there's like a panel of buttons on the right and they are all like positioning overflow All the all the basic like block block level stuff height width And they're all configurable in like fields that you can actually type stuff in and it makes the UI happen in front of you And then you can export it and it's working code, which is really cool designing for Drupal is One thing that designers need to it's a little bit of a shift. So Using Webflow or InDesign or Photoshop is really a question like what you're choosing is really a question of what you're actually Designing I wouldn't tell anyone to use one tool indiscriminately because if you're designing a holding page Or if you're designing an e-commerce store if you're designing like a feature page, they're all really different So maybe you need to use a tool that allows you to do certain things Maybe you need to use a tool that is a lot a lot simpler So we often use a combination of these tools depending on what we're doing not everything needs to be prototyped So maybe some things can be done in the style guide. Maybe some things need to be done in Webflow. It's up to you consider what responsive functionality you actually need to describe for each page that you're designing and Yeah, just use your best judgment and where possible look at what Drupal provides you in terms of markup So if you can find out the basic elements that Drupal are giving you on this page that you need to design so you can start there But I'll talk a bit more about that later Prototyping Prototyping is really cool. I'm a developer. I obviously think that We live in a world where the web isn't just a static image cut from the page We can't just like take a PDF and put it on the internet anymore contemporary websites include animations interactions Even little gradual hub effects and fades all of that stuff is really important and so important to specify in your design as well A static design provided to a developer like in a PDF or a PSD pretty much never includes any sort of animation spec It's just overlooked and then at the end while the project is being built Those changes start to be made and often can take time because they haven't been specified at the start So if you're not getting one you should ask for one This might sound crazy, but I actually think that designers can learn to prototype as well And I think it can make designers better at their jobs. They can provide those prototypes to developers Prototyping is really cool. These are some of the tools that you can use to prototype Invision is a really cool app that allows you to have clickable hotspots Webflow we've talked about McQuarr is similar to webflow. Code drops is a really cool website where you can actually see patterns that people have created and look at the code and Give that to a developer as an example Code pen is another website like that where you can sort of there's three different panels of coding and then for like HTML CSS JavaScript and then a result so you can see the results of your code and simply test me is an awesome Drupal site that Allows you to spin up a Drupal instance and actually look at what it provides you at that time and so if you're trialing a module or Someone has offered you a theme that you want to use you can spin it up and look at what that provides you straight away So all of those things are completely open to designers And I think it's really important that designers get involved with that and start prototyping stuff before jumping in So you don't just like create something that's impossible to actually build especially in Drupal That said designers can provide us some prototypes that sometimes are a bit tricky to actually build in reality And you don't it's it's worth talking to a developer before you hand it over like I found this prototype Is this actually possible? Can we make this? The thing I think that designers should do is create a star guide John album is currently doing a talk on star guy driven development. So if you're really interested in that you should leave And go to his talk Yeah, it's a boss later as well. So there's a we can all get together and talk about it But say I have rough early designs or wireframes provided and we look at the content structure And there's a few pages that haven't been designed. This happens all the time, right? What's the best way forward? Should we ask the designer to make more designs and get more clients sign off? Probably not because that's just going to spin us around in circles But we've got a better idea which is to use the star guide. So star guides follow the 80 20 80 20 rule They do 80% of the work in about 20% of the time They're automatically responsive because once you build the elements you're building them on element level You're styling making styles that can be responsive at the point of the actual element as opposed to the page And they make the world a happier place We believe in star guide driven development And that means that the the star guy isn't just created for the benefit of developers or for the benefit of design is for Everyone it makes the design process better and it also makes the development process better So if your designer hasn't heard of a star guide at all That's probably a red flag and we think that you should request one for every single site that you're doing It just it just means that like there's all these awesome benefits for style guides So we originally started doing star guides in InDesign because as we were doing these designs We'd set up the paragraph in the character styles at the start of the process And then those would create consistency as we themed up elements in InDesign And then when we hand it over to a developer developer It's all sort of it's from a base set of styles as opposed to sort of made up on the spot And that limits like sort of weird new styles being introduced on page four or page five It speeds up development quite significantly Basically developers can start by putting the star guide in place gets typography in place. It gets image styles Forms lists all that stuff sort of already looking good Maybe even it will get some object level styles Maybe some divs or borders or things like that are happening So once that's already in place globally when you go to this page that you haven't cleaned up before it's actually like Maybe 50% done just needs a bit of judging Okay, we when I was working with Godel I Created a document called the style guide guide which we would give to designers Who were like what is a style guide? How do I make a web style guide and the style guide guide which it will probably Will put it online somewhere I don't know where it is at the moment is a list of like pretty much like a bunch of Drupal elements like almost everything that you Need and it just is like it's Instructions for a designer to design styles for all of these things So instead of being like oh, I gave you like styles for all of the typography And then when the developer gets to making a table and has no styles for it It's actually like a pretty exhaustive list of elements that you need to think about So it's that's one thing is that like even the best designers will sometimes forget something like this Like maybe they've forgotten what a drop-down looks like on a form or maybe they've forgotten like What a link looks like in the footer Just like these little things that as people change content around the sign actually need to have patterns ready so We've created a style guide guide, but anyone can create a style guide guide and it's a really sort of It's something that you can reuse across every project, especially if you continually working with Drupal and Yeah, the the great benefit for this is responsive design really it's just perfect for it because if you have If you've styled an element, especially for using sass or breakpoint mix-ins You can actually have that the styles for that element and at a mix-in style guide level So that when that element appears in the wild on a page that you haven't themed up It already looks right on the different breakpoints, which is really important This is for designers to get on the grid Have you ever been this is a question for developers? Have you have been working on a responsive site and the designers told you that an element is their wrong exact pixel widths Red flag if anyone actually tells you that because when we work on the grids things don't really have exact pixel widths anymore Because they can't because otherwise they might spill over the side of the screen when they start adding up together Getting on the grid is really awesome. If you're a designer and you're not on the grid Does any other any designers here who don't know about grid-based designs? probably everyone knows but basically There's some really cool grid tools out there for developers now, especially one called Singularity grid system that we work with which I'll talk about a bit later But if you're not designing to a grid and more importantly if you're not designing to a responsive grid You should start looking into that because it's going to increase it will just make life easier for the developers by 100-fold it's it's so different getting a grid-based design where someone tells you this element is actually three columns as Opposed to this element just looks like it's maybe three and a half Maybe three and three-quarters columns and then trying to figure that out so if you're if you're using tools that allow you to design to a grid and You're handing over design packages to developers with the grid involved You are a gem and you should keep doing that Basically the fluid grid idea allows developers to work with fractions and percentages to position elements and to give them width and that's Pretty much the core of responsive design at the moment. So it's really important This is a small point for designers, but please stop using the same law and for every single element Because it just it never happens that these elements are ever the same size It might seem like a small point. It's actually a really big point It's never ever the same case and a developer can demonstrate this to you very very quickly by firing up the develop module Which will give you many many different text bits for all of the different elements and they won't look like this In fact, they'll actually look like this and when that screen gets smaller you can imagine how much worse that that looks and It's a red flag because if you ever see that in a design or if you ever do that in a design You should rethink it immediately Section two about developers These are tips for developers to do things better with their responsive designs The first tip is the most important is to ask questions and analyze It's so so important. It's like basically the whole part of this talk Is that if you see one of these red flags do something about it? Don't just notice it have your heart sink and then think about all the terrible times that you're gonna go through When you get up to making that bit. It's the worst thing to do It's really really important that you set aside actual time to analyze the designs flag the things that aren't gonna work and And and and do something about it and that means you need to make sure your project manager or project lead Is aware that you're gonna need time to do that as well You need to annotate designs wherever possible a tool like envision is really good for this Google Docs works as well And you need to be constructive. So don't just say that's not gonna work. I'm not gonna build that. That's terrible You need to Work constructively to actually offer solutions of how things are gonna work over responsive breakpoints. So if you see something That is problematic You should have the knowledge or try to do the research to figure out a way that it's gonna work because the designer can't always do that Don't be judgy. You're annotating it to point out red flags not to judge it if you like it or not and Keep your tech stack in mind. So always consider what base theme what grid system and what Drupal provides So you can actually offer solutions that will work with what you actually build in the future This leads into learning best practice Drupal and responsive web technologies and recommending them It's your responsibility to keep up. These are like five points But there's probably five million out there because as we all know like Responsive web technologies are changing literally every day But these are some that I think would be useful for developers to recommend to designers SVGs and icon fonts So if you've got a design that has lots of little icons in it and they're getting sent to you in a package of P and D's Maybe think about asking for those to be provided to you in SVGs So you can create an icon font Implement them in a way that's going to work with Retina devices also Retina ready images If someone sends you a design with a full screen background image or a full width banner image You need to tell that designer that that image probably needs to be twice the width that they have actually provided it in and Make sure that the clients okay with that if they're going to be actually uploading those images Singularity grid system which I've mentioned briefly, but it's an amazing grid system where you can Set an arbitrary amount of grids for any element on a website And then you can put grids inside of elements on a website So you can have a base grid of 12 columns and then when a designer gives you a menu with five items you can set Another grid inside your header with 10 columns and then Like onwards into infinity. So whatever sort of option is given to you in terms of fractions. You can keep doing that There's lots of other grid systems out there, but it's my favorite Responsive video approaches something that goes on all time How is my video going to look on mobile on iPad or whatever fit vids is a really awesome library that allows Embedded videos to scale according to screen size and Full-screen background images very fashionable at the moment everyone likes them. They look beautiful Everyone struggles to find great assets for them, but they're nice Backstretch is a really cool library that takes a lot of hassle out of implementing that There's a small selection of non-drupal ones, but here's some awesome Drupal tools base themes Obviously Probably the most important thing when you're choosing your text in terms of front-end theming. We use Aurora which is a beautiful Minimalist simple base theme basically comes with pretty much nothing prescribed and allows you to use its Sort of the things that it likes like singularity modernize or in sass And Omega 4 which is really similar also uses those technologies, but it gives you a bit more to work with So if you wanted to provide a base theme to your Designer that would be a good one to go with but we use Aurora because what we'd our designs are super custom They don't really represent anything. We've ever seen in a base theme. So it works best for us. We can start from scratch But I mean there's lots of themes out there. These are the two that I found at the best for responsive responsive design Third thing for developers is remember that all browsers just can't responsive This is really important and it means that you need to make sure that everyone is aware that your responsive behaviors fluid screens and other Fancy things just won't happen in Internet Explorer 8. You'd be surprised how often this comes up Which is good because people don't use I8 on their phones yet But this is important like it happens all the time that we get to the point that We're looking at in the old browser. Why does it do the same thing because it doesn't need to So the last part of the talk is red flags in the wild so I'm gonna identify some patterns That you might have seen you might be currently using You might be thinking about using They're not very complicated, but it's sort of to give you an idea of the thing that I'm talking about So number one is teases with images This is a common summary style. You see it everywhere. It's got a red flag because it is problematic It's a bit of a nope for me every time I see it. I'm like so many problems Want to keep the height the same on both sides with the responsive thing We get some problems with our image getting squished and more squished and Then really squished and you can't even see my sushi cat's face But the more lines that you have means the left hand section gets taller which makes the right hand section taller and skinnier As you can imagine it gets worse and worse. Why don't you just keep the image a square or a mule? It's a good idea. I mean the sushi cat's a square it'll work It's working so far, right? But when we get to this point where this left-hand side is like this tall It's the same size as when we So, you know what I'm saying is that this requires planning It and it requires planning when you're thinking about what happens in those in-between points between your break points The best solution that we found at this is keeping the text really short If you can't force someone to write short text like if you can't put a character limit on Think about using text overflow ellipsis or read more button which you can get at this dot dot dot Library, which is really cool Make the text a lot shorter than you think you're gonna need because remember as that scheme that the screen gets smaller The text splits over multiple lines and just grows and grows Also considered that the content of the image will inform the decision about how to handle it responsibly And this is one thing that like always gets missed in this process that we're thinking about what? What is this image actually gonna be like is this an image that I can squish is it someone's face? Is it someone's body? Do I want to like what can I or is it just an abstract? It's like a tree or something that it's maybe okay Think about what the design intention is if you're a developer You need to ask about like what the design intention here. Does this image always have to be four by six Does it always have to be portrait? Does it always have to be landscape people forget to ask these questions and then when you've decided to implement it And you get to it and the designer looks at it and he said well when I make the screen this big It's not right. It's sort of this thing that we need to talk about right at the start when you see this pattern some designs won't so use the square they just won't and Manual crop module is something that I'll be mentioning over and over in this section But it's a really really clever module that allows you to upload an image like on a node and choose different Coppings for that image so I can upload a simple image and crop it landscape and crop it portrait And then I can display those crops on different parts of the site using views or display suite or whatever so it's really clever Next one is this menu pattern, which you'll see everywhere It's fixed probably doesn't really matter It's hard to do and you feel like this sometimes when you're making it for the amount of times that you have to change it Because what are you gonna do when this happens? This is actually a problem especially when the client's able to change the amount of menu items So if you're making a menu like this Definitely clarify whether those menu items are going to be changed or whether they're fixed because they're likely going to be changed It's pretty much always going to be changed Solution is pretty simple, right? Maybe at this point we take off the borders at this point the logo disappears We've just got a little icon triple eights navigation menu does a bit of this until it hits the mobile breakpoint Except even when you're doing that when someone's adding more menu items it gets out of control because you've you've targeted those Patterns to come in at different breakpoints based on the amount of menu items you had at the start So red flag if you see that Best solution that we found is also to switch to that mobile style Hamburger menu as soon as is humanly possible like maybe when you get to 960 pixels make it a hamburger people are starting to get used to this idea that this mobile style menu will Appear on desktop screens and it really fixes problems like this quite well number three image ratios Probably the most common thing that we've ever found with this developer designer client sort of triangle is people not really understanding How image ratios work or how the same image can work in different ratios across the site? Using the same image for a thumbnail in a hero image always seems like such a great idea in the design doesn't it? Except she could just go so wrong suddenly we've got someone with half a head and it happens over and over again Same goes for full-screen background images looks great on mobile. We decapitated her on desktop Especially if that image is user uploaded and you have no idea what someone's gonna put in there or whether it's gonna look Right this actually happened to us It was a fashion website the design had a banner image and every image they uploaded Was an image of catwalk models which is just obviously not gonna work in this landscape thing This is what I mean about talking about what the content of images are gonna be before you start designing them And if that hasn't been talked about and maybe the developer needs to mention it then they should mention it too So get some representative actual content when you're designing like talk to the client about Give me some examples of images. You're actually gonna put in the site It might take time, but if you find that someone's uploading catwalk images into their banners It's probably not gonna be great You could also the developers could actually allow the users to choose their copings using the manual module manual crop module Which is really awesome Or just use abstract imagery with no faces I can't really tell anyone to do that because they're just gonna upload whatever they want Provide an image guide with your site and hope for the best. I wouldn't really recommend that Number four grids with images and text or even just the text This might look familiar. We've talked about it before Because it's very problematic every time it happens. We need to talk about how is this grid gonna work? How do you want them to be? Masonry, do you want them to work on responsive screens? Maybe we want them to like tile together in this like brickwork way Not always right. I want to introduce this solution because we found it and we thought it was really awesome where Each of these blocks ends up being the same size like across a row like irrelevant of what content is inside of it It's called match height. It's what makes it makes developers very happy So across this this these three on each column on each row On each row It's using JavaScript to calculate the height of the tallest item and make all of the things in the road the same height So it looks pretty and it's a really easy way to solve this grid problem Here's another one image teasers with hovers These are all articles about sushi cats, which is awesome because when I hover over it I can tell with my mouse that it says sushi cats easy, right? Everyone forgets that you can't hover on a touchscreen, right? So if you see this pattern in your desktop design and you're a developer You need to make sure that you tell someone that you can't hover on a mobile and you need a different pattern for mobile and Also every time the screen gets smaller these titles can sometimes start spilling over or not working anymore So you need to make sure you let your designer or maybe even your client know that the titles in the box Isn't your character limit unless you've got a budget to look into scaling text, which we still haven't had so maybe one day It's never really the solution that we go for And that you need to let them know that there'll be some sort of non-hover based pattern to use on mobile devices and you need to ask about it Number six, how do you solve a problem like an e-commerce menu? This is a typical menu on an e-commerce store, right? Men's women's contact on desktop It's pretty simple. We can hover over men's and then we see the men's subcategories and if we click the men's Top-level nav item we go to the men's overview if we click shirts, we just see shirts. It's pretty normal, right? When we get to mobile suddenly we need this like two-way navigation thing where we've got men's and then when we click on men's It takes us to the men's subcategories And then we can't see the men's overview anymore because we're in the subcategories So how do we get back to the the overview one? So we need this one that goes back and forth So maybe when you click men's when you tap men's it takes you to the men's overview and you tap this arrow It opens the submenu But when we drill down to that submenu we have to put this like all men's item back in So we've created a new menu item that we have to add into our submenu that wasn't there Before on the desktop one We only had shirts as we've shirts shorts jumpers and accessories So when we get to here we need this all men's item which is new So that means and like this might seem like trivial in the design, but for a developer that means we need a different menu It's actually a different set of markup that we're using now So what you need to consider is should you actually be showing the same menu on desktop and mobile? Like maybe you need an actual different block of Markup to be using and maybe you should be switching between that block and the actual menu that you wasn't using on desktop with With your sass or with your context or whatever module you're using to do this Maybe you need the client's input at this stage. Are you okay with us using a different menu on mobile? Is that does that make sense? And think about how your choice of choice of mobile menu and how you design that mobile menu is actually going to you like Affects the user's ability to navigate the site like have you made a mobile menu that means users can't access the overview page anymore Which is going to be problematic Number seven quickly is maps How do we get our desktop map to be a mobile map? One in maybe this one is just in a block and this is full screen If your design is sent you an image of a map, maybe that's a red flag Because there's better solutions out there and you might want to introduce them to leaflet Which is a mobile-friendly touch optimized amazing resizable flexible map library and super easy to use and if you see Rick Dabur he will tell you all about it because he loves it and he talks about it all the time So the summary for this talk is for designers. You need to use the right tools Prototype and be open to feedback from developers create style guides and design to a fluid grid For develop developers ask lots of questions and properly analyze designs when they're given to you Keep an eye out for common problems that impact dynamic layouts offer solutions based on your tech stack Use the right tools and choose a good base team and get acquainted with the responsive tools that your Drupal offers and other non-Drupal tools And for everyone developers and designers use this list and create your own list of red flags to watch out for So you can identify them in designs and immediately mention that it might be problematic for fluid designs I'll put these slides up online, but here's a list of pretty much everything I mentioned These are all the Drupal modules that we've talked about And these are all the cool design tools that we've talked about if you guys I will I can go back and let you take photos of these if you're taking photos of These are the tools for responsive designs And this is the other libraries and resources that we really love for responsive web development It's the end. There's a little bit of time if you have any questions So the the other two that you mentioned are really cool they they sort of There's almost a bit more like magic going on behind the scenes You choose the bit that you like and then the computer decides what it displays We found that even when we've done that the crops that come out of the wash are not really right for clients They're like, oh, I chose this bit, but actually it's still not quite right manual crop Literally allows the client to choose exactly the crop that they want. So for someone who wants more fine-grained Control over the actual look and feel of their website. It seems to work better It's nice to use as well. I mean, they're all nice to use but yeah, that's been our preference Um Well, I think especially with a home page I encourage designers to try and provide an actual design of it But the style guide is almost like a mandatory thing it that you provide alongside your designs I probably wouldn't ever trust the developer to make something like a home page based on a style guide Just because it's such you're right. It's like a big reveal. It's a really important thing for a client So it's sort of about getting your designers to design up the key really important bits of the website and choose Which ones don't actually need full designs like maybe your contact page doesn't need a full design maybe like the node page for Something really simple like a reference or something doesn't need a design Maybe that can be done by developer using the style guide, but they should and it's almost like doing like a Moscow style like Comparison of what is and isn't important get the client to be like I want to sign to this page this page But these ones I don't really care about Hi, Josh Thank you Yeah, I might be Macau. I don't think Webflow does that Webflow allows you to sort of bring up the grid as an overlay on what you're designing But there's there was a tool that I put in the references that in it and end up talking about Which is really good for if you've been given a design without a grid you can overlay your own grid in the browser So you can upload that design into the browser and overlay your own good on it and try to figure out where the grid was Correct. Yeah, so we do like a bit of I mean we haven't Fully like rolled this process out But the idea is that you'll get your export from Webflow, which will be CSS like nice CSS They pride themselves on the good CSS that they produce, but then turning those into mix-ins And making them nested and doing whatever you need to do to make it sass And yeah, and then I think especially with the grid because the grids can be so complex Like with designs as they're coming up that it's almost best that you don't get that provided to you by a program Like it often like requires a bit of developer magic to make it work So yeah, but I mean even at that point if you've been given a whole Export of CSS that really works even turning that into sass is still faster than writing it yourself