Front End Developer and Designer Stephen Smith helped us kick off season two with a deep dive into designing for mobile. Come get a little off topic with Captain Steve and your favorite VP trio. 

Roberts: Hello everyone and thank you for joining us. You're listening to A Little Off Topic, one agency's water cooler chat on digital marketing, business, and all the things that get in the way, presented by Speak Creative. Let's get into it.

Kindra: Alright. We're here. Season two. We talked in season one about design theory and making mobile a part of our strategy, but I think it's time in season two to not just answer why we do it, but how we do it. So, how do I design for mobile? What should I consider? So Stephen, welcome. Welcome to the podcast. Stephen Smith is a front end developer and designer for us at Speak.

Stephen: This is exciting. This is my first ever podcast experience. So just jumping in.

Kindra: We're glad to have you. Let's jump right in. Let me ask my first question. What's the first thing that comes to mind when you're thinking about designing for mobile and the importance of it?

Stephen: First thing that comes to my mind when thinking about mobile is really usability and the importance of it. It is such a big foundation and necessity within web design today. When I say usability, I mean, just being able to use it because the amount of people that are using their phones to look at a website above using their computers is so much more, in terms of percentages today. so having a website that functions and is easy to use on mobile to me is just so important.

Kindra: We see a lot of our clients who shifted somewhere three or four years ago to majority of their traffic being mobile traffic versus desktop, because people are just on the go and need to get the information no matter where they are. So I think a big portion of our audiences is that way.

Roberts: What are the things we're thinking about when we actually think about a mobile user and the things that we want to elevate in that specific break point?

Stephen: Yeah, I think for me, it will depend on the goals of a website, right? There are different goals depending on the type of organization or the message that people are trying to get across. But the way I see it normally is I try to strip down the functionality of the site to its barest bones and think, "okay, on a mobile site, what are the main goals for people? What do they need to be doing?" and strip it down to that. Let's say you're trying to drive them to purchase something, right? How do I make it the easiest and quickest thing for them to do on their mobile phone? If that is still achieved, I think it's still a success. I often even use the analogy of a boat that's in the water. Your website could be likened to a boat. On mobile, it might be a rowboat, but like your site still needs to float. It still needs to do what it's doing. It's going to be a lot smaller than your cruise ship. That is your desktop. But for me, it just needs to be achieving a goal that is on mobile and so that's like the most emphasis that I put on it.

Roberts: So can we start calling you captain or admiral?

Stephen: Yeah, of course. I'm totally fine with that. Captain Steve. Mobile Web Design.

Roberts: Hey, look, it's Admiral Stephen! Okay. I do think that there's a certain amount of familiarity that we all have with thinking about some of the best practices to keep in mind when it comes to mobile devices and how people use or browse the web on a mobile device, but maybe just for folks who aren't as well-versed in some of the things that we can do specifically in like a mobile environment, what are the things that we would want folks to know? For instance, we think about how far somebody's hand can reach and like where tap points are and how big they are. What are some of those just like key elements that are always in the back of your mind as you're thinking through designing a mobile site or site for a mobile device?

Stephen: There are a few different things. I'm glad that you brought up, for example, hand size and all these different things that can build into it or the size of your phone that you're using. Because even today, there are debates even within the mobile world about best practices that can go into a mixture of ease of use in terms of what we were just talking about of "how quickly can I click on something to get through it?" But also versus familiarity like one of the contentious points in the UX world is even the hamburger button, right? It's like the hamburger button on a mobile site for a lot of people, traditionally right now is in the top right corner of your phone. That's what we a lot of times come to expect. So for me as a web designer, that is something that I often will put on a website. But it's interesting because there's even research asking "why are we putting at the top right when that's like the farthest place from your finger to click on?" So then there are some debates on in terms of what if we looked into ways to move it? But the counterargument is that everyone's familiar with it being there. So they're just naturally going to feel more comfortable going there. So it's things like that I think like at least people like me are trying to think through. It really also will often depend on the site that I'm building for the organization. If I feel like the user base for an organization is going to be someone who is more used to traditional mechanics that we put into mobile sites, say the hamburger navigation. I might make that hamburger button maybe slightly larger, but make it very clear that that's what that navigation is. But at the same time, if I'm working with a company that wants to be pushing boundaries and wants to be known as someone who is trying to kind of make things different and have that be a wow factor or something that they're trying to move forward. I may look into some other kind of newer kind of way to make their site usable on mobile, which could even be something like quick links that people are starting to employ on mobile sites, which is something that I'm a fan of. Those are three or four links that are set apart by icons so they're easily recognizable on the bottom of your phone that you can click on. So, there are things like that that you might try to employ, but in terms of when I'm trying to think through it, it really comes down to how comfortable am I with pushing boundaries or how much I stay within what is already known because at the end of the day, we want something to be familiar and usable for someone on a mobile device. The last thing you want to do is confuse people with what they're doing, you know? That's something that I think a lot of designers can suffer from sometimes is trying to push boundaries too much and trying to put too much of something that's unique or cool or different into a design. Especially on mobile, when doing that can suffer the experience for somebody who's trying to navigate the site and get to the information or the action that they're trying to accomplish. So for me, that's just super important to keep in consideration is once again, making sure it's usable and familiar with. Going back to the kind of debate over the hamburger button, is this something people know how to use on the web?

Kindra: Speaking my love language talking about users first. That's awesome. I find it really interesting when you're talking about who's the user base and can we push the boundaries because the user base is maybe more apt to try something versus what's traditional. I know that we get asked a lot "well, what's the data say?" And there's a mix of how in the past the data says this, but we really think this could work. We just have an intuition about it. So that's really interesting.

Stephen: It's so important. It can be taken in so many different directions. For example, I worked on a website this last year for the Quality Trust organization which is an advocacy organization for people with disabilities in Washington, DC. So the way I approached designing their website and the way I approached trying to make it functional was so different than what I would do for some kind of let's say like a high-end fashion line or something. For me, my focus on that site was making it as usable as possible. So talking about UX or design decisions that someone might make. Like for me, I made the buttons on the side bigger than I normally would, because I wanted to make sure anyone who might have mobility issues could click them easier which to some people might say, "Oh, those don't look as sleek" or like whatever you want, but the counter-argument is, "no, but someone that's having trouble tapping on screen can access those easier." So that's really important to think through those things. The use case can be taking really any project. That's something I try to at least keep in my mind when I'm designing for mobile or desktop is very much like "who are the people that are going to be using the site and what design decisions are going to help best suit them for what they're trying to do?"

Roberts: So in thinking about taking a client through a process, every client is unique, every process is a little bit different because of the choices that need to be made in the audiences concern, and all that kind of stuff. But do you run into any issues with clients kind of not fully buying into how important the mobile presentation is? Do we still have clients where it will just be an afterthought? Like "make my make my desktop site look really impressive and pretty, and then scale it down and do whatever you need to do so that we've got a mobile site as well."

Stephen: Oh, for sure. One of the things about mobile is that it really is kind of for a lot of people an afterthought. They want to be wowed with the kind of beautiful design and graphics and everything else that you can put on a desktop site, which is still important. Once again, you really want to be impressing people and making them have trust in your company because you have something that's beautiful and functional. But it can very much just feel like an afterthought, but what's interesting is at least in my mind, if I show a client my desktop version of something, which is really complex and beautiful, and I show them the mobile version, the thing with mobile is there is only so much you can do. There is only so much real estate that you have to make something. So if look at it and say that's going to function and it looks nice and they don't see any issues with it, to me, it's already a success, right? Because at a certain degree, good usability in something that's going to be used well, and is not going to have too much thought put to it can almost just kind of be powerful itself, even if people don't realize it. There are sacrifices. I mean that's what happens going into the mentality of a designer when they think about mobile. What things do I have to sacrifice when I'm moving down to that screen size? There are sacrifices that get made along the way, which can be sad for some people because it's deciding what to keep and what not to. That gets into what I was talking about with stripping down to the core of what the goal is on the site, like when you're on mobile, because you do need to get rid of things and it could be even decision like taking off an informational section on the homepage that might be good for people to learn about on desktop, but might add more scrolling on a mobile site, which can actually hurt people when they're trying to get to what's important.

Kindra: Functionality definitely has its place there as at the top.

Roberts: Well, I'm curious too. I know that sometime in the somewhat recent past, Google started considering mobile load time in how it ranks sites. So we have this other dimension of consideration when thinking about mobile is not just what do we strip back because we're just moving to a smaller viewport? but what do we need to optimize so that Google looks at the mobile site and says, "Hey, this loads quickly" and obviously that's important for users too. We want the mobile site to load quickly. How much of that is in the back of your mind as you're going through this process?

Stephen: It's so important. Luckily a lot of what you might try to do for mobile can translate into the desktop and so there are some best practices that can help with both. But there are some larger things that you definitely have to keep in consideration when you're moving from desktop to mobile. Let's say videos, for example, video backgrounds, or really just any video content in general, you're putting on a desktop page, right? You can still load those pretty quickly when you're using your computer, but things like video content will just destroy load time on a mobile device. So that's where it could even be deciding to switch to a photo rather than a video on mobile, which we can do. But even those small decisions can make drastic differences on a mobile load time.

Kindra: The other thing we run across too is not just the load speed of the site, but when people are on the go with their mobile phone, they might not have 5G. They might still be stuck on 3G or whatever.

Stephen: Do you want me to use all my data trying to load this video that's on the site? Even with talking about images as well, there are the best practices that are already important for desktop, but optimizing all of your images and trying to get them the smallest size you can get on a site and that is especially important on mobile. If you're not optimizing your images, if you're not trying to get them to the smallest size that you can get, it'll just kill your load time. So that's just one of those best practice things that are important. It can even get into functionality things too that people have to consider. Let's say hover states. Let's say you have a design piece where some of the key information is a hover state, you might need to get that rearranged in a way that it can be usable on mobile, because you're not gonna be hovering a mobile. But going into the speed aspect of things, for me, imagery is the most key thing. So it could be even once again, a decision of maybe stripping out some of the images on mobile, because it's just taking too much time to load and also just forcing users to scroll more trying to find things.

Kindra: That feels like probably the most overlooked thing on mobile, right? I mean, I know that you cringe when I send you an image that's even 500 KB.

Stephen: I'm being triggered, like even hearing that. Best practice is getting images to the smallest place that they can be without distorting quality. But trying to get things under a hundred KBs, but as small as you can go is best. Obviously, it's difficult for some people, because to do the proper justice to an image, it often takes a software like Photoshop, but then also using online tools, even like tiny JPEG that our company likes to use to get things a bit more small. But it is so important. I think as you said, Kindra, it's overlooked. Sometimes people think, "Oh, it's just one image that I'm putting on here. This isn't going to kill my mobile load time" But one small image that you think is small, but it's actually like a megabyte on mobile is going to kill your page speed, which will be increasingly important in the future. As Matt was saying earlier about Google and how they look at sites, it will affect that and I think in the future, mobile is going to be even more on their radar, even more important. Because that's the way things are trending. Mobile is going to increasingly become more and more important, so we have to keep trying to find ways to stay with it.

Ervin: There are other things you can take advantage of too to help with mobile page speed. We use a CDN that in a lot of cases will transform images to WEBP instead of PNG or JPEG if it detects a mobile device. So we actually with SiteWrench auto-optimize images for mobile in a lot of cases. One of the other things that we see a lot that people don't often consider is that an iPhone, even though it is a really powerful machine, it's still a very thin client. So expecting a mobile browser to do a lot of JavaScript processing and do a lot of crazy CSS rendering, and all those things are really processor intensive. You have to cut that stuff out on mobile because it's just not going to perform.

Stephen: I agree. I was going to mention more complex animations and stuff like that is just some of the things you have to look into stripping out when you're going to mobile, because like you said, it's not even just that like certain animations can't even work on mobile. It's just that they take the processing power to even accomplish them.

Ervin: As a grumpy member and minority of the population, roughly 10%. I would like to know if left-handed people are ever considered in mobile design because it doesn't seem to be the case.

Kindra: No.

Stephen: I don't know if that's been at the forefront of my mind.

Ervin: I think we might need to make a change.

Roberts: We need to be able to switch the orientation of the mobile site.

Stephen: Yes, exactly. The same argument could be made for so many products, even physical products.

Kindra: Scissors.

Roberts: Now he's trying to rationalize

Stephen: I have to. Even those desks that you slide into that are made for right-handed people.

Ervin: Oh man. At school, they used to always have to go find another one for me that was backwards from everybody else and so then when you're supposed to stand up in your row behind everybody, I'm on the wrong side of the whole row and that was awkward my entire childhood.

Kindra: I just remember there being lone per class and it was like, who can get there first because there are two left-handed kids.

Roberts: It was me and Matt Ervin elbowing each other for the same desk.

Kindra: That's funny. All three of us are left-handed.

Ervin: I have more left-handed stories, but we can save those for later.

Roberts: You've mentioned a few times, and I know that you know what you're saying when we talk about stripping stuff out for a mobile presentation or a mobile size. Maybe to put a fine point on how that happens, essentially, this is a mystery to me, other than I know that it can happen and I know that there are mechanics that go into making it happen. But so for somebody like me, explain the mechanics of actually how that happens.

Stephen: Yeah. That's a very great question. Because as you mentioned, this is what I do every day, so I don't even think about that. A lot of what happens, for people that want to know, in the background of website when we're scaling down and going from one size to the other is what in the web design and front end development world, we call media queries. When I say media query what I mean by that is it is a piece of code that I put into my CSS, which is the styling or the skin of the website, but it's what makes things look the way they need to organize this content the way they need to. But if you want to think of it this way, a lot of developers now will start on mobile, which is actually best practice. So I'll even start to build a website on a phone size. I'm looking at it that way first because it's easier to add things as I'm moving up than it is to subtract. From that though, I'll set things up on my mobile size. Then literally though, it's like you're adding an additional set of rules to the website as I'm moving up. So let's say I had it looking good at my phone size, now I want to think about tablets. So once I have enough real estate for a two column layout rather than a one column. I get to a size, in our world we might say like 768 pixels or 992, but we get to what is considered a standard size for a tablet, which is debatable. At that point, I will introduce an additional set of rules to all the content that's already living there. So some content may have been hitting right before that on mobile. So at this break point or this part, I will say "browser, now I want you to actually show this thing" I can tell it at this point to show something. Or if it's a container that's one column. I can at that point, say, "okay, we're at a tablet now. Go to two columns now because we have the space for it." So, it's about, it's about introducing new sets of rules to the look of what I've already put all the way up. Often after the tablet, we get to a part of the site where it's desktop and I say, "okay, now we have so much of this space. Let's add everything in." I can add an additional set of rules. So it really is just additions and instructions given to the computer in the browser about the way things need to be looking at different points or different sizes, but it's all size based, like at this amount of pixels do this or not.

Kindra: We got really in the weeds there. Super nerdy. I like it.

Stephen: I was gonna say, yeah we can go deeper into media query.

Roberts: Oh man. We're just getting started on media queries.

Stephen: Philosophy and all that. So, it's because you can go either way too. Some people even design for desktop and then will go the opposite direction. You can tell a browser to do something like only under a certain size rather than only over a certain size. But it is, I would say a best practice nowadays to start at mobile because that's really what you want to be looking good first, because that's the most important.

Ervin: So one of the things that I've seen just because I'm, again, old and grumpy is the entire mobile experience or requirement was introduced in the middle of when I've been working in this industry. So I got my first iPhone when I was probably 30 something. My first touch-based device. How old were you, Stephen, when you got your first one?

Stephen: Oh gosh. Okay. We're going to play this game.

Ervin: Just guess.

Kindra: Elder versus millennial.

Ervin: I'm going to berate you when you get done telling me so get ready.

Stephen: Let's do this. So we're talking like a smartphone, right?

Ervin: Something that actually had a browser.

Stephen: I had my first cell phone when I was in eighth grade, so I was probably 12 or 13, but that was just like a T9. I probably got my first smartphone, honestly, when I was in college. So it was probably my freshman year of college, which would have made me 17 or 18.

Kindra: Yeah, but you hung onto the old iPhone for a long time too.

Stephen: Oh yeah. I am a slow adopter of new technology. Like people have like an iPhone whatever. I can't even tell you what the newest one is. I'll be trying to hold on to my iPhone 5 or something. But I did, I had one of the 4s for way past when normal people would say you should have that phone.

Kindra: I think I had like a 7 or 8 and he was on a 4.

Ervin: Well, I guess my point was though that at the point you started considering mobile is when you were learning all of this stuff.

Stephen: For sure.

Ervin: There's a generation of people coming up now who have always had a mobile device. Like my daughter who is six, for years has touched my televisions and computer screens thinking that she should be able to control them just by touching them.

Kindra: I mean, I think my kiddos were under 2 when they were swiping to unlock something.

Stephen: I think it's a great point that you brought up though about how your kids are now swiping on a TV, like that blew my mind to even think about.

Ervin: It’s really annoying because there are fingerprints all over everything.

Stephen: Honestly, if we want to get into the difficulties of web designers or even UX designers or everyone, that is trying to think about this world. How do I design things that are going to be useful for your kids' generation? But also the generation that's above us who was thrown into the web world and is trying to figure it out now. It'll be interesting to see what web designers in 10 or 20 years are doing, because things are going to be changing so much more with this generation of people who have grown up and have a complete native feel for all these kinds of different things.

Kindra: Well, Stephen, now is the point where we rewind and do the entire interview in French.

Stephen: Alright.

Kindra: So, no, I'm kidding. I'm kidding.

Stephen: [speaks French]

Kindra: There we are. A little off topic, as we do.

Stephen: That's all I'll give you. That's it.

Kindra: Okay. Alright. Let's talk about something else you're passionate about really quick. Just so people get to know a little bit more about you. For those of you who aren't in the office, maybe don't know you're quite the chef. You have a passion for food. Quite the foodie. So I'm going to ask you this. What would your last meal be if you had to pick one thing to eat.

Stephen: See the thing, the thing about that question is... I have an answer. I already know what I would tell you. But it's not what people want to hear.

Kindra: Sweet potato?

Stephen: Not a sweet potato. I would definitely have a peanut butter sandwich with a banana on the side.

Roberts: Ah, foodie. Foodie.

Stephen: I say that having done like a 12 hour bone broth for ramen, like two weeks ago. When I decide to put effort into cooking, I really do get into it. I'm someone that people wouldn't associate with being a foodie because I will microwave a potato at work and I will eat that because it's easy. I will microwave ramen at work. Like I think we were talking about that the other day. I'm so into convenience when I don't want to put effort into something. This is another one of the reasons I wear like the same thing every day. I have like two outfits. I don't want to think about things. So I even take that to food. If you're talking about my favorite food ever, it's peanut butter. I will swear by peanut butter for the rest of my life.

Ervin: So what's interesting is that your last meal would be my last meal because I can't eat peanuts. I'm allergic.

Stephen: That's true.

Kindra: That turned dark.

Roberts: From myself, our panel today, and all of us at Speak. Thanks for getting a little off topic with us. If you liked today's episode, you'd love the content our team is cranking out on our blog. Head over to madebyspeak.com to check out the latest and greatest. If you enjoyed the show, subscribe and leave a review on your podcast platform of choice and we’ll see you next time.
 

Let's Chat 

Did you get a chance to listen to the first season of A Little Off Topic? We cover all the bases, from impostor syndrome and leadership, to navigating scope and content plans, you'll surely be informed and entertained. 

Get In Touch