>> Cole: You can't make like 20 different designs for all these screen sizes. Like, how, do people approach this?

>> Chad: I don't think the answer is designing specifically for every breakpoint possible. You know it's going to be different per site, but targeting the breakpoints that your analytics say you get the most often designing specifically for those.

>> Discussing Stupid Intro Speaker: You're listening to Design Discussing Stupid, a podcast sponsored by High Monkey. Join your host, Virgil Carroll and others as our podcast helps you transform bad digital experiences into teachable moments you can use.

>> Virgil: Happy St. Patrick's Day, everyone. Or I guess in real terms, happy St. Patrick's Day yesterday. Do you ever kind of run into times in which, through whether it's a website or something else, you develop that frustration about the disconnect from one side to the other? Well, that's kind of what today's episode's about. We've, been actually going through and redoing our website. When I say we, I mean myself and Cole, who is often on the podcast with me, because nobody else has any other time. And I hadn't done this in a long time. But it's funny, even after years of experience in doing this for a long time, you go through a design process where you kind of try to figure out the design and then you try to put it into the framework of a responsive website. And it's just amazing. Even from years and years ago when things were much more simplistic, there's a lot of times a disconnect on there. So today's topic is really going to be talking about that, why that disconnects there, what the problems tend to be, and what are some of the things we can do about it. So I'll be joined by Cole and Chad today while we talk about this, after coming down from our St. Patty's Day celebration. and I hope you enjoy.

>> Cole: Do you guys like analogies?

>> Chad: Love analogies.

>> Virgil: Oh, definitely.

>> Cole: All right, sweet. Because I am going to start us off here today with an analogy. so let's say designing your website is a game of checkers. But when it comes to actually building your website, and especially if you want to display well across a variety of devices and screen sizes, that is a game of chess. Okay, how's that? How's that analogy?

>> Virgil: Wow, you just offended probably a lot of designers in that. because I always think of checkers as a much simpler game than a game of chess.

>> Chad: I think, maybe I can give you a different analogy that has nothing to do with tabletop games.

>> Cole: Okay.

>> Chad: So a lot of times when you're, when you're building something, something, a house, landscaping, whatever, you get a contractor over, they may drop some plans. The designer on that team will kind of create your vision for what it should look like in the end. But when somebody's actually building the thing, they run into issues, they run into things that aren't possible. They run into things that need to change based on the current, the architecture, the framework, the stuff around what they're building. There's a tree sitting there that you can't just uproot. so the plan has to change in the building to accommodate the real world.

>> Cole: Right?

>> Virgil: Yeah. For some reason you made me totally think of. I mean, so maybe we could just make this entire, you know, session about analogies. But you maybe think of those building shows where they always had the plans and then they dig into the wall and all of a sudden there's something in, in the way. And now they have to figure out a, a creative way of getting around it. But yeah, I mean that, that's kind of what it is. It's about, you know, and this, this podcast episode is really about how things don't translate well a lot of times.

>> Cole: And kind of why we're talking about it though, right, Is you know, thinking about how it will translate, in the actual build. That is a step that begins in the design. Like it's not something that you are going to.

>> Virgil: You mean it's a step that should begin in the design? Yeah, I would say throughout all history, I think it's rarely ever, but it's a step that should have begun in the design. Yes.

>> Cole: Right. So that's kind of what we're here to call out today when, you know, designers aren't factoring in how things will translate, on web, when they're actually building out their design. And I kind of wanted to, you know, pick your guys brains on what are some of the most common ways you guys see that in web development?

>> Virgil: Oh man, you, know, I would start with, you know, fonts, layouts, animations, you know, everything man. The reality is, and we're not just trying to pick on designers here, it's, you know, exactly what you're saying. It's the way things translate. And frankly it's less about how one to one. So if I'm a designer and I'm building, you know, a design and you know, whether I'm using, you know, one of the Adobe products or maybe something like Figma or something like that, and I'm putting in a fidelity design and I build it for a typical screen size like 1440, which is probably when we see designs, the most common one there. That's great in that. And I would say that any developer worth its salt can probably mimic the 1440 screen size and get it to look the exact same, or at least most of the way. There's always subtle differences just because of the way things translate in a website versus a design program. but then you go to, okay, how's that going to look at 1600, how's that going to look at 1925? How's that going to look at 800, how's that going to look At 420? You know, for, mobile, in that. That is where you have the most problems, is that designs are done typically for a very specific. And even designs that are done showing, a desktop view in a mobile view. Well, that's one mobile view and that's one desktop view versus the thousands of different devices, the thousands of different screen sizes. I mean, there's so many variables, and it's really a lot harder than people think. And so a lot of times designers build themselves into a box and then the developers are supposed to figure out how to get out of that box, and they want everything to look pixel perfect. And sometimes that is. So what you should say is that what really should happen is that all those considerations should be happening during the design process, but most of the time they don't.

>> Cole: Yeah. And honestly, we're kind of speaking largely from experience here because we've been redesigning our own, website, HighMonkey.com for the past, like, few months. And Virgil and Chad, they've both been, you know, hard at work, you know, building out my designs. And I now realize, why there is so much pushback at the start with a lot of my design proposals. And even with all the pushback and with a lot of the designs that we've, or that were rejected, we've still run into some issues with, you know, building out some of those components.

>> Virgil: Yeah, well, first, I want to be very clear. Virgil has been working very hard on it. Chad helped out occasionally. and that's mostly because Chad's busy with other things, but that's beside the point. And it was part of Virgil having to relearn how to do all that stuff again, which he hadn't done, in a long time. but yeah, I mean, you know. It's, it's something that you have to take into consideration up front. I mean you really do. I think back to the earliest versions of the web and you know, how many times we used to get something from, you know, a designer or we do our own designs with our own designers or whatever it was. And usually the first comment that you heard from a customer was that the text doesn't look the same in that. And that was frankly because the way a design program smoothed text wasn't possible in the web in that it got a lot better, but it wasn't possible up front. And so a lot of times you had this thing or how spacing happened years ago it was really hard to space things well, in web and now you have a lot more granular control over that. but that's still a problem is because they look at it and they say, here's the picture I gave you and this is what I want. and it just doesn't always translate the way you'd hope.

>> Chad: Well, that spacing and sizing example there is true, you do have a lot more control over it now. But even then it's that if you have a desktop version, a larger version, that 1440 size we talked about that have text at one size, at the phone version you have another size, a smaller size. How well does that translate? Where do you make the leap? when you're scaling up in between a tablet, a small desktop, a larger phone, whatever. so there's a lot of points that you can make changes but that leads to more time and effort to tackle all that.

>> Virgil: Right. And you know, a lot of the tools have come out. You know, we talk about Figma because obviously that's something we use a lot, where you can kind of make responsive designs inside of it. But, but don't kid yourself, that's a lot of work, I mean to make it. And the reality is the way Figma is responsive is never really going to be the way your website's going to be responsive because again, you're controlling things very differently there. Here I'm dragging and dropping something and putting it over here and doing this and that, that doesn't really translate to the web where you're doing things as percentages and you know, and compartmentalized and you know, I think one of the things that I'd maybe forgot is that one of the things in between it is, you know, when you, when you target sites with like break points, and that is what happens between this breakpoint and that Breakpoint, usually for the most part it's okay, but once you get down to those lower sizes, so almost feel like, do you have a site that, you know, has like 750,000 breakpoints to, to compensate for everything?

>> Cole: So with all these breakpoints and you know, different screen sizes, browser sizes, are you kind of saying that people need to like, you know, design several different, you know, of the same designs depending on like the amount of, like, how can, how can people factor in all these different screen sizes? Well, you know, what am I trying to ask right now?

>> Chad: It's like I get what you're going for here.

>> Cole: You can't make like 20 different designs for all these screen sizes. Like how, how do people approach this?

>> Chad: I don't think the answer is designing specifically for every break point possible. You know, it's, it's going to be different per, per site, but targeting the breakpoints that your analytics say you get the most often. designing specifically for those. So pick a phone, pick a tablet, pick a desktop. And then really it's about making sure that the in between points kind of flow smoothly as you scale up and down. instead of trying to get everything pixel perfect on every, every specific level, it's about making sure that you're doing well for your audience, but then really just kind of making sure that those fewer that come to your site aren't going to have a bad experience. They might not have that pixel perfect experience, that exact design experience that you've laid out, but that there's nothing wrong, there's nothing that prevents them from using the site and using it effectively.

>> Virgil: Yeah, I mean, and that's why like grid systems were built. And that's why definitely, you know, you know, five, 10 years ago, I mean, one of the big movements in kind of web design was kind of more of the boxy, angular designs type of thing, because you had it in there. And it's really funny because, you know, let's say you have an area of a page that's like a three by three grid or something like that, you know, so you got three boxes and three boxes and that, getting that to fold well and responsive and do really good is actually really easy. it's more when you have those elements where you're like floating things around and you, you want the text to be related, you know, in a certain combination with the image or something like that. And the challenges that go along there, when you start, you know, increasing and decreasing a size. But I mean, it's not only that it's, it's sometimes also, another thing that we see a lot that I always think of from design that happens is very rarely in anybody doing design are they actually testing for like, you know, color contrast or accessibility and that kind of stuff. They're looking to make things pretty. and, you know, when I've spoken in the past, I've always spoke about how, like, you know, if you want to understand really good layout, you know, look at like, the way magazines and newspapers are laid out, because they have this unbelievable ability to be able to put a ton of information on a single page and not make it feel overwhelming. But at the same time, most designers come from a print background and kind of print principles, which means, you know, doing a shade of blue on blue on blue on blue is a very common thing. But in reality that is a big problem, from kind of readability, on the web. So it's not just about screen size. It's also about kind of how things translate in general. you know, from look and feel. Well, from compliance, but also aesthetics.

>> Cole: Yep. You, know, this is a big problem. people who are watching our content and not liking and subscribing and sharing it because that's how we grow as the Discussing Stupid podcast and continue to provide everyone with great content on improving your usability in the digital world.

>> Virgil: Yeah. And I think, yeah, I think that this is definitely when we look at this topic, I mean, you and I, especially Cole, have spent a lot of painful days with, our own website going through this. I mean, you know, not Chad  and his teams. I mean, they've been doing this for a long time and they always deal with it. But definitely it's, it's hit a little bit closer to home, both me kind of being refreshed and you kind of learning that stuff. But yeah, I mean, you know, what do you do about it? I mean, really from the fact of the matter is you need to be looking at your design from the fact of what is going to happen and how you're going to make that happen. and you need to engage your developers, you need to engage the people that are going to build the site and maintain it on some of the ramifications. Because sometimes we do really cool little animations or we have very specific things and we want this picture to sit right next to this image at all time or, sorry, this text or something. And you have to look at that from kind of a practicality. So definitely, organizations that kind of do at least A desktop, a tablet, and a mobile version version of their site. But one of the things you should absolutely be looking at if you're trying to figure out what you really need to target is you should be looking at your analytics, you know, because what we did is, you know, we have, we have on our site we have, five breakpoints, but we're actually targeting eight screen sizes in that that we know are, like, when you look at, like, our visits over the last year, those eight screen sizes basically fit, the most amount of our visits. You're never going to be 100% perfect, but if you can hit those, you know, you're going to be doing pretty good.

>> Cole: Yeah, so it's kind of about creating the most optimal experience possible for, like, the most users possible based on your analytics.

>> Virgil: Yep, absolutely.

>> Cole: Yeah.

>> Virgil: That's a good, realizing that design is not the end, you know, I mean, designers are great people, but a lot of times they tend to be very, possessive of their work and, want everything to look exactly like it. And they, you know, just like developers have to be flexible in working with a designer. A designer needs to be flexible and working with a developer and kind of understanding how those two pieces really fit together and how to work it out from there. and, you know, the key to that is really having a really good collaborative process.

>> Cole: Right. So be less possessive designers and engage with the developers throughout the process.

>> Virgil: Or be in the designer's boss and just tell them that you can't do that. That works too.

>> Cole: All right, well, happy St. Patrick's Day, everyone. Happy, kind of late St. Patrick's Day. I think that was yesterday. Right. But got, some good green shirts going today. and thank you everyone for tuning into episode 11 here and look forward to the next.

>> Virgil Carroll: Just a reminder, we'll be dropping new episodes every two weeks. If you enjoyed the discussion today, we would appreciate it if you hit the like button and leave us a review or comment below. And to listen to past episodes or be notified when future episodes are released, visit our website at www.discussingstupid.com and sign up for our email updates. Not only will we share when each new episode drops, but also we'll be including a ton of good content to help you in discussing stupid in your own organization. Of course, you can also follow us on YouTube, Apple Podcasts, Spotify or SoundCloud, or really any of the other favorite podcast platforms you might use. Thanks again for joining and we'll see you next time.