 Good morning folks. This doesn't say Elasticsearch, so if you're here for talk about Elasticsearch, you've come to the wrong camp. My name is Mark Conroy. Someone who was supposed to speak about Elasticsearch has cancelled, or couldn't make it to that. I'm putting it instead. This is a presentation I gave a number of months ago in Cork, in Ireland. It's based on our use of pattern lab and our district error, let's say, for Photoshop and English and sketch and other static mock-up creators. So the presentation won't be as polished as I might like it because, out of the last night, I had quite a number of breaks. If I could fill in, and I'm filling in. Okay, so my name is Elasticsearch Mark Conroy. I'm a lead front-end developer with Anarchec. We're Ireland's leading group of agency, listening to one Irish red agency a year, which is nice. We build mostly websites for government and non-profit organizations. We're starting with some for-profit clients now, but most of our work has been non-profits and government. What we're going to look at today then is the idea of using Photoshop, or the idea of stopping using Photoshop for designing websites. Then the idea of using something else for designing websites instead of Photoshop. I don't mean something else. I don't mean envision. I don't mean sketch. I don't mean anything like that. Then looking at the benefits of that and why that can allow us to have projects that, God forbid, come in on time. Come in on budget, maybe even under budget. Sometimes web agencies make a profit rather than just break an evening. We'll look at that for a little bit as well. I'm going to guess this sounds familiar to lots and lots and lots of people. The client signs off on a designer. Then you build a website and it's based on these designs. Then you look at it again and you think, it's quite like the designs. To my mind it's exact same as the designs, but it's not exactly like the designs. It's not what we call pixel perfect. You have a design and the design were 960 pixels wide. The CEO of the company looks at it eventually and his monitor is 800 pixels wide. He's still using IE6 and it's not exactly like the designs. So we don't get the pixel perfectness of what we're looking for. That's not your fault. You've done your best job. You've got the design and you've built the spec and the website according to what the design said. That's not your fault. That is not exactly like the designs anymore. But at the same time it's not the client's fault. All the client did was sign off on designs and said, these are designs I want. Is that too hard to ask for? No, it's not. So what went wrong? Something went wrong. Something is to blame. The client now has a website that they're fairly happy with. You've got a website that you've built and you're fairly happy with. And it probably went over time. It probably went over budget and nobody's happy enough. But everyone is fairly happy. So the problem we are discovering more and more is often the content that you get a design for a news listing page. And every single news item on that news listing page has a title called LORUM. It's a dollar set and it's five words. The longest word has five letters. We've climbed it all. It's a local government agency. There's five words in the name of that department. The day their website goes live, when they say the name of their department launches a new website, they've got nine words. Not five, they've got nine. So this goes on to two lines, not one line. Now this is nothing to design because it goes on to two lines. And you as a developer or as a front-end developer, obviously it goes on to two lines. We've got more words. But it doesn't go on to two lines in designs. Can you not think it's smaller? Sure. Yeah, we reduce the font. Then we get a 25 word, you know, local government agencies. The Minister for Health and Finance and whatever else he is meets with the local person for charities and something else, something else to discuss. And that's the headline. One headline with 25 words down. Okay, we can reduce the font size, no problem. And then we've got two pixel fonts. And our websites are WCAG, 2.0, whatever it is. Two pixel fonts, don't cut that. Next problem is the designs are static. They're just photographs. They're not websites. They're an approximation of what your website might look like. So this is one version of one rendering of your page. And what I designed is exactly, or what I built is exactly the designs with a different rendering, with different content, with a different aspect ratio, with a different width, whatever it is. The designs are basically completed in what I call my most hated design tool. That's Photoshop. I don't consider it a design tool. I think the name says it. It's for manipulating photographs, not websites. A website is not a photograph. If you want to get a website and take a screenshot and manipulate that, you might guess, use Photoshop, no problem. Don't come near me, please, with a Photoshop designer. This is what we use to design websites. So this is a screenshot. This is an image we created for our blog post. We wrote about design wars. It was a series of blog posts. But each of those Photoshop layers that you can see there, each of those is from a Photoshop document that we received from client. So I've got a layer there called subheading 2. That's probably inside group 15. So why is subheading 2 in group 15 not the same as heading 6 in group 11? Just a different color. I don't know. What is subheading 2? I've got a layer called dot capital letter DOC1. I don't know where to start. I really don't. This is the bullshit that we have to deal with day in, day out when someone comes to us with Photoshop. So like I said, it's a great tool. It is a fantastic tool. Well done Adobe. You've got something brilliant there and you've got a product. You can make lots of money out of it. It's brilliant for editing photographs. It is terrible. If I was less polite, I would say it is shit for designing websites. I'm glad I'm polite. I wouldn't dare use that language. In 2017, if your designer is using Photoshop I think you hired a wrong designer. If they're still using Photoshop, except for manipulating photographs you hired the wrong designer. One of our competitor agencies and we're very good friends. We like them a lot. At the end of this session I asked what do you do if you have designers use Photoshop and only use Photoshop for design? And my answer was very simply fire them. That's what you do. If these people are clever enough to understand how to use something as complex as Photoshop they can write a little bit of HTML. It's not that hard. If they want an image on the left they don't have to drag this thing and drag it across on Photoshop and have it on the left. They can write 10 characters. Float left. That's nine characters. There's a code on it in the middle. Browsers render fonts differently. Again, we're in another local agency or local government agency that we're working with at the moment. They can't understand why they have a font and it is size 72 and it's bold. And on Photoshop it looks whatever way it looks to sign off designs, let's say. On Chrome it looks a little bit different because Chrome renders fonts different than Photoshop does. On Firefox it looks a little bit different. They're seeing you don't use windows. It's a little bit different again. So there are these changes and these discrepancies that we just cannot account for. We can't say enough it's not our fault how Firefox renders a font. It's not our fault how Chrome renders a font and it's not our fault that your designers use Photoshop. So if you want to make a minor change then in Photoshop you want to change something small. Say for example a button. We don't like the background color in the button. We don't like the green. We'd rather if it was yellow. Well, I've got 46 and again I'm trying to have 46 desktop designs in Photoshop. You want to change that button. You've got to go through 46 Photoshop files and God knows how many groups and layers inside your door you get down to it to get the buttons to change all the buttons. If you use HTML and CSS and JavaScript you go to your dot button class that sounds better to me. So it's not responsive. Like I said, I've received and I've been literally 46 desktop designs more than 50% of our clients are on mobile and they tell us we want mobile first and they give me 46 desktop designs and six mobile designs and zero tablet designs So what I have now is I know exactly what it's going to look like on a desktop at 1700 pixels about 900 pixels not 1200 pixels not 1700 and one pixels at 1700 pixels only that's what I know it's going to look like and that's what the CEO knows it's going to look like. I also know what it's going to look like at 320 pixels. So that's nice. So for between 320 pixels and 1700 pixels I haven't got a clue. So where we have a grid of tree items and tree items I'm guessing on a tablet we have two and they'll be a bit wider. But I don't know. So the client gets the designs your guest gets the robot's eye back and says this doesn't look like designs. You're doing fucking right this doesn't look like designs. You're on a tablet and you give me no tablet designs. What do you want to do? But on mobile it's got one column. Grand, okay we're making one column. Now you've got 800 pixel wide image and it's 1500 pixels high. Couldn't have done that on the browser. You would have seen exactly what it was going to look like very very quickly. So with Photoshop we have I should have stopped using Photoshop but static model, popups. We have one version of one page of the website at one specific viewport and that is it. We don't have the responsiveness. We don't see what's going to happen when someone's on a life one when someone's on a galaxy when someone's on a tablet we also don't see what's going to happen when you're I've lost my train of thought so I'll go to the next slide. This is a disaster. This is a total disaster. This is one of our own websites we designed so the designers in the disaster. The disaster is clients zoom out. You get a Photoshop file and you zoom out and out and out so you can see the whole page. You can see the header and you can see the photo and the sidebar of everything in one go. That's not how people look at websites. That is not how people look at websites. You look at that. I'm guessing. Can anyone read one word on that? No. Or you handle the designs and you go to the big client brief and everyone's going to be really happy. You're going to chest pump each other all day long and they have it printed on an A4 piece of paper. You know, is that how people look at websites? No, it's not. So you can zoom out. You need to at least have that 100% so you can see, okay, when I load this website this is how much it's been going to see. I'm going to see the header. I'm going to see the hero slider that shouldn't be there in the first place but the marketing department decides that we need that. So our second most important piece of content will see that and slide number two. We're going to see it. But you need to be able to see these things. You can't be zooming out. When you use that in mock-ups it's too easy to have bonkers ideas. Here's three examples and each of these examples gospel truth. These are things I've been asked for. Not as paramount I would say but at home and we're kind of small local clients. Someone says, when you click on my products or when you click on, you know, say for example, we work with say Oxfam and other big charities in Ireland and they might have a campaign about the war in Syria and when you click on Syria it would open up a light box that gives you information from Wikipedia about Syria. I wanted to do that but it has to look like our branding. We couldn't have someone thinking that we actually use Wikipedia's content. Let us find Photoshop. No problem at all. We take a screenshot. We stick them over the Android and we do some stuff and yeah, we have Wikipedia art deals looking like whatever a client's branding. There's a website in Ireland called Dundeeel. It's basically either really popular for selling cars, but it's selling everything. I would find he sells stoves and he tells me I don't like the look of our stoves on Dundeeel. What can you do about it? Take a different photograph I suppose add something else to it. No, no, no, it's the colours. I don't like the branding background. Can you change that? I don't own Dundeeel but look at the brand. Can you make that the same colour as our branding? And can we... And no amount of talking to him would let him know that I don't own eBay when you're trying to sell your stoves. But on Photoshop, that's not a problem. Yeah, sure, I can take that and look any way you want. My job down here. We spend a week and this is funny but, you know, you're paying developers whatever it is a thousand years or something a week. We spend a week doing gradients on images. Try once the image, it's in colour because the image is in colour and you upload the image and we strip out the colour. And after we strip out the colour we add some output transparency for contrast and after we do that we add a gradient that's one colour to the top after 24%, it's a different colour and it treats another colour. But at the end of the different gradient it goes from the bottom up. And on top of that there's another gradient that has, I don't know what it is. We spend a full week, literally one full week doing this. Then we see an email from the designers. A lot of our work is building websites that somebody else has designed. An email from the designers to the client to tell them, we don't think this is possible in code. But the client says, that's the design that we signed off on, we've got to build that. So we spend a week doing it. Why don't you just upload the original image? Then it will be exactly like it is in designs. And then the client decides, eventually, do you know what would be nice? If we had none of those layers on it, none of those gradients on it, none of the output transparency, none of the black and white, just have another image. It's much more vibrant. So after spending a week doing this, they decided, no. So you know, these kind of bonkers ideas that these lens layers pop out and glow and do stuff, they're simple in Photoshop, or at least achieve with Photoshop. But we're dealing with what has to get rendered, which is CSS, HTML, JavaScript. And that's more tricky than that. So what's better? Well, Sketchup is better. I'm not going to go into Sketchup, which I actually love Sketchup. I think it's great. It's really good for designing user interfaces. It's really good for doing things quickly. It's really good for kind of talking to a back-end or to say, here's the kind of things we want to do. We want to open a front-end. Here's the general approach to the layout that we're going to use. But ultimately, it fails. Because again, once you're finished designing, you're sending this image off to a client. Well, they're just going to look at exactly what you've done with Photoshop. It's a specific image of a specific page, a specific viewpoint, and it has all the problems then that we have with responsiveness and whatnot. So, I have no idea why I have to slide up. This is a passive timer. It's our in-house timer app for whatever tasks we're working on. Anthony built it. I made it look... I'll say pretty. I made it look like this, let's say. I use Sketchup once very quickly just to put together, like I said, I've no idea where to slide through. So, I'll move on again. Well, I would say be like Clark. I don't know who Clark is. Oh, he's the owner of InVision. Anthony! My thoughts on InVision are... I'm not a fan of it. So, I did a tweet. You turn on InVision and again, this is loading 46 Photoshop files in InVision. It has this lovely thing saying, loading your experience. Yeah, you're going to load a shit experience for me. So, I said that on Twitter, and Clark, the CEO of InVision, he said, unfortunately, you're correct, sir. I'm all over it. Expect significant improvements soon. I think the team in there can InVision next week. The term... I think they don't have to talk about it. They can make it better. But... Yeah, Clark recently. Shit problems. So, the solution then really is design in the browser, or at least design for the browser. Back in the early days of the web, there was this old technology called HTML. A little bit there, called CSS, called JavaScript. Can you imagine that if we're going to hand over a website, eventually to our clients, in HTML, CSS, and JavaScript, we designed the damn thing in HTML, CSS, and JavaScript, and we give them a prototype of what they're going to receive eventually. We don't give them an approximation. We don't give them a specific viewport. We give them the exact target they're going to receive just with the content. So, what we do is we send them a URL. We do our designs, we use patterned out or whatever generator we use. We tell the client, here's your designs. It's called maracomri.anrotech.com and that URL will be forever more your style guide. Here's your approach to doing that. So, we do some discovery. We all meet our clients. We ask them what they want. We do some research. So, rather than asking the client what you want, and they tell us all the things they want, if you were to use this website, what would you want? And then we do some rapid prototypes. So, we get our pens and papers and we draw them into sketches and that's fine. It's very, very quick and we can draw them out very quickly. They're responsible. Then we might do some more rapid prototypes something balsamic or sketch up. Now, we don't start the client these things. We do these very, very quickly ourselves. Just to say, if we were to have a slider here, or if we were to have a listing page like this, and if we were to change that, just how much less work would it be? Then we agree on different design components. So, we know we have a homepage. What are the components of a homepage? We know we have a header. We know we have a photo. We know we have a listing page for news. We agree on those design components. Then we build them. And it's very simple. I'm not coming to much of a pattern here because I'm guessing everyone has heard of and they understand the idea of atoms, molecules, organisms, templates, and pages. But when we build these out there and HTML, we have the CSS and if needed, we have JavaScript if there's some little interactivities or animations or something that we need. In terms of pattern lab and Drupal phase two, we have a great version of pattern lab that integrates with Drupal. You can write your front-end and pattern lab and the templates that you write for the pattern lab are templates since they're intrigued that you will be using in Drupal later on. So, they can kind of match one-to-one. So, we create these component designs in the pattern lab. We create the templates in Drupal. We extend the templates from Drupal to use the pattern lab templates. So, for example, we have a template in Drupal called node-teaser.html that's where you get your teaser if you go to template. What we do inside that is you have to install the components module as well. And I would say this template here you will find the file for this template here up inside the pattern lab folder called templates, called listing page, called small or something like that. And then we do one more thing inside that and we've got the variable. So, in Drupal you've got the content variable only. What we'll do is we say content.fieldimage equals patternlab.image and content.fieldbody equals patternlab.fieldlongtext or whatever it is. So, we've got the same templates in patternlab and then in Drupal we map the variables we want with whatever variable name we used in the JSON for patternlab. And then when it's complete and it's signed off, that would be your Drupal team. So, if your client is looking at a pattern lab version that's generated on it, the exact thing they see is what you're going to hand over. And while you're building that front-end, while you're designing that and showing the different components and they're signing off from them, that's that part signed off. So, you're doing your design and your front-end build at the same time. Here's an example. On the top we have a menu with five menu items, home about us, our work log contact. They're just five random words I put into a JSON file in patternlab. You can see the shortcuts and the Drupal stuff. That's the Drupal version. And you can see it exactly like what's above it except the words changed. Because in Drupal we're using the menu so whatever words we have in our menu that's the words I get put into the menu obviously and in patternlab we're using dummy content. So it's handy to have just those five words because they're generating up that we can reuse them on a new website. Then we go once there further and we add in the branding block. And under that you've got the Drupal version. And you can see the logo is exactly where the logo is in patternlab. The slogan is exactly where the slogan is in patternlab and the menu is in the exact same position. So again, what the client gets is what the client's was expecting to get. And then we go another step further and here's a version of an old article. This is just random I don't know if it looks quite ugly but it's good enough for a presentation. And again, we've got the title in patternlab and in Drupal it's called Save Female. We've got an image that was with us when we went to Web Awards four or one night. And then you've got the same image with the same dimensions in terms of the widget but we haven't skewed it and we haven't chopped off the kitten's head and things like that. And that looks the exact same then in Drupal and in patternlab so again the client gets what the client expects. So this is on the left hand side it's called horizontal-menu.tweak so I've got two menu files one called horizontal menu one called vertical menu and the only reason I've got two is that in that class you can see in line 34 called menu underscore underscore horizontal and that's only so I can have things displayed in line and things like that. So that's actually the menu.html.tweak file from Drupal I cut it in the page that opened to patternlab and this is the exact same markup mostly because I'm clever enough to work out how macros and things like that work so that kind of solved the problem and on the right hand side then you've got the Drupal file so menu.html.tweak.tweak in Drupal all it does is it says include items, menus, horizontal horizontal menu.tweak so when you write the front end on the left left hand side yeah this is the exact this is exactly what you're going to get from Drupal anyway and then what you have on the right hand side is the it's just one line of code say stop reading this file and find it up in a different file the next step then the branding block code here this is taken from phase 2 so you've got your branding logo and your branding medium and your branding slogan and you've got a couple of variables and one called line 4 has URL line 5 called psych logo and there's a site slogan there line 17 so what we do then is when we're having that html on the left hand side we come to one on the right and that's a block hyphen hyphen system hyphen branding hyphen block.html I would say this one here will include a molecule called branding that branding that html that's the one on the left hand side except the variable url that you'll see on the left will use the drupal path to front page for that so we swap out those variables that's what I was saying but that's where you would say that for content.field hyphen image you swap that in there so we see that then here this is our article content type it has a class of articles then it's got four fields article title image article body and article tags and on the right hand side then we say use pages content types article.true and swap out the following variables so when you see title in the left use drupal's label where you see body on the left use content.body and the same then with tags and the image field so it's quite simple that drupal then each template we need we just have to find it somewhere else and interchange some variables so why isn't it good? well what's on the left is static mockups what's on the right is design and browser type stuff so content isn't like the background color on buttons like this when you're around you've got to go through every single pst or I think there's some ways you can import or reuse things but whatever way it is it's more work to do this in Photoshop to change things if you're talking about using a pattern app or something you go as simple as find.btn or that button class and change your background color if you want to update everywhere in terms of qa the designer on the left hand side designs the website the developers build it it goes to the client client looks at it and says yep happy enough I think there's a bug on whatever it is we come back and we fix it and it goes back to them and there's never an issue we come back and we fix it and it keeps going and going and eventually we get sign off what we're doing on the right hand side in terms of like mockups well this sign off and this qa is done up front so there isn't a big long here's the discovery phase here's the where here's the content phase here's the design phase here's the build phase here's the qa phase qa becomes part of the process rather than item on the tone you get a little style guide so our clients at any time can go to clientname.amatech.com and they can see what their works are going to look like the new feature I won't go to that oh it's a two side sign ah when we want a new feature we build a new feature they can look at it and they can say yep that's the feature I want that's exactly the way I want it to look let's put that live and we do that but they're seeing this on an interactive prototype first the CEO you know it doesn't come along five weeks later and realize oh there's a problem here we get a new component we can add in Backstop.js or one of those kind of regression units and we can see ok here's a screenshot of the website today here's a screenshot of the website after we build a new feature has anything broken and we can solve that now we're rather than realizing in two months time that something broken on the donation page and that's mission critical for charities so the CEO doesn't have a hard stack and everyone's happy is everyone happy no one's happy any questions? if you are given a PSD based design no choice about firing the design out because the client is the designer that's more sort of a work yeah yeah what you recommend is the best way to start adapting it to work with something like pattern lab is it really just a case of actually some poor front end sold as the pain of building pattern then moving forward exactly yes yeah at some stage you're going to have to write the CSS and the JavaScript so whether you're using Drupal files for that and then you write your SAS and you write your JavaScript you might as well have a pattern lab up front so it's kind of all the one where you write in the pattern lab and then you've got your front end build and you've got your front end build so yeah if you get static mobs you basically tell the client you want to get yourself a free style of writing that's a problem too empty though because I always find clients with the best of intentions you say to them here you've got 50 shades of grey here can we rationalize this way yeah by all means I don't know what the designer was at we don't want all those things we want to sustain about so we knock it down to maybe 35 shades of grey and we've got 15 different font sizes because the line on the listing page only goes to one line for the title so the designer gets to 4 shots and makes it a little bit smaller so you've got 15.6 pixels for this title but you've got 16.2 for this and your base font is 16 pixels so we rationalize this yeah by all means that's what we want we want something good why do we do that this doesn't look at the designs now no we kind of do that 15.7 are all going to be 16 yeah but it's not like the designs I don't mind being 16 but I have to be like the designs so there is that problem that we rationalize things and we ask them to be saying or about it but it ends up not looking like the designs to me that's an education problem as much as yeah it's a client problem for just having clients easier if you're doing this first as you recommend is there any distinction you can make then in terms of implementation was it all one activity I don't see a difference so you don't have a designer base then you just expect implementation that was not my intention yeah I think if someone wants to be a web designer then you don't understand the web if you want to be a web designer at least you should be a right HTML it's not hard to write p-tag it's not hard to add a class and at least you should know how to flow through it it's not hard to work out background whatever hex code or whatever it is so yeah I've seen front end and design is pretty much one of them not necessarily implementation of the front end I have no problem I'm not a great designer but I think I'm quite a good front end developer and I wouldn't have a problem with someone besides me I'm them using sketch to say this is the way I want it and me quoting at the same time but I certainly wouldn't hand over to a client a sketch file say again is there a video of your talk somewhere because that's what it is apparently everything has been recorded all the talks not the video but the slides are recorded I presume they've been on the website I don't always tell you that as the kind of the sign is okay you want to build mockups that work and I should not be using the sign I don't know it's just like something I hate I can't I haven't used it you know when it comes to the web I kind of like the idea that HTML, CSS and JavaScript costs very little money I mean it's so cheap it's free I just don't see the point of paying thousands of euros to Adobe every year for an inferior product space because you know write some dibs or some CSS and there is the idea that we would I just don't understand I don't know why it happened isn't that nice I don't understand I think designers historically were designing for magazines and things like that and then the web came and disrupted that and designers were too lazy to go and learn about the web I just wanted to continue using their old fashion tools and teaching this in science courses I have no idea actually isn't that the place where you have to go and say like look you are the sign of the web now and not the magazines yeah I'm not sure because I know one or a hundred or seventeen of us and as far as I know two people went to college to study computer science everyone else, Anthony is a civil engineer I'm an English teacher somebody else is a geneticist somebody else is a stellar biologist she's an astrophysicist and teaching that in college I'm guessing most people here call yourself Todd as well as designers and that you know but yeah it certainly should be if you're doing that in college you shouldn't do that but at the same time I guess academics are lazy and they're not up to current standards maybe either so they might see HTMLC as some JavaScript as programming languages rather than design languages so the graphic design school might not teach it but they might compare some of their um but yeah it should be