Optimized Ecommerce EP 030 – Mobile Responsive Design and Optimization for Your Ecommerce Store
In this week’s interesting episode of The Optimized Ecommerce Podcast, Eric Kwoka joins Tanner Larsson to talk about an extremely important topic which is mobile optimization and mobile responsive design for your Ecommerce store. Listen to this week’s episode to learn the importance of having a mobile-optimized website and a well-structured mobile responsive design
Welcome to Episode #030 of Optimized Ecommerce – Mobile Responsive Design and Optimization for Your Ecommerce Store. I’m your host, Tanner Larsson CEO of BGS.
BGS means Build Grow Scale! It is a community that we founded where eCommerce entrepreneurs and physical product sellers come to learn how to take their businesses to the next level.
Eric Kwoka has been with BGS for almost two years, he is our mobile revenue optimization expert. He has deep knowledge and expertise in mobile optimization and responsive design for Ecommerce stores.
Here’s just a taste of what we talked about today:
The difference between desktop and mobile, why do these two need to be treated differently?
Compared to desktop mobile screens are much smaller and show bits of information about a certain product or service. In this case, store owners should pay more attention to what’s being shown on those small screens.
People act differently when they are on their phones compared when they sit comfortably right in front of their desktop or laptop. With mobile phones, distractions are more likely to occur due to a bunch of information they see on their feed while desktop or laptop offers easy and more digestible information and calls to action.
The difference between mobile responsive design and mobile optimization, how do store owners cram everything consumers see on a desktop into mobile phones.
Many people screw up on mobile optimization because they often optimize their site through a computer rather than a mobile phone.
Store owners should not think their site is all good because of the mobile responsive theme. Having this type of theme means a quasi smart template that’s going to take your desktop version and scale it down for mobile phones. This does not mean that the site is optimized well for mobile.
It is better to think about the designs on a mobile phone first and think of the desktop design afterward. This is because it is much easier to work on the small site and add additional functionality onto the desktop.
We also discussed a few other fun topics, including:
- Eric’s mobile responsive design recommendations for store owners and designers.
- How do different behaviors and consumer interactions translate into Ecommerce results and performance?
- What does mobile-optimized design mean?
- Eric discusses the best practices people can start utilizing when it comes to mobile optimization design.
- How can Ecom stores effectively optimize the hero space on mobile?
But you’ll have to watch or listen to the episode to hear about those!
How To Stay Connected With Eric Kwoka
Want to stay connected with Eric? Please check out their social profiles below.
- Website: BuildGrowScale.com/author/eric/
Also, Eric mentioned the following items on the show. You can find that on:
- The 3 Reasons Your Store Needs a Mobile-Optimized Banner by Eric Kwoka
- Scaling a Struggling Brand Like Crazy! From $0 to $10M in 9 Months with Archer Worsham
- Material.io – is a design system that helps in building a high-quality digital experience.
Tanner Larsson 0:07
Hey everybody, welcome back to the optimized ecommerce podcast. I’m Tanner Larsen, your host for this episode. And today we’re gonna be talking about something pretty important actually not pretty important, let’s just say extremely important. And that is mobile optimization for your Ecommerce store and mobile responsive design and everything that goes into that. Now the reason this is so important is because as social media has taken over the world, as smartphones have gotten more and more smart, so to speak, the buying traffic that are visiting an Ecommerce store has become predominantly mobile based in almost all markets, it’s unusual to find a market now, that does not have a 70 plus to 80% or more customer base that’s buying through mobile, most of most of the sales come through mobile, only a small percentage come through desktop now. So it’s very, very important that you actually have a mobile optimized website and mobile optimized buying process, not just the site that the entire buyers journey needs to be customized for the mobile experience, which is very different from desktop or even tablet. So today, because this is an area that I know, at a very high level, and I know what like what needs to be done. Our guest, Eric Kwoka, who’s a BGS revenue optimization expert has been with us for going close to 18 months, almost two years now is the Brainiac in that regard. He’s super, I mean, he’s a Brainiac anyway. But when it really comes down to optimization at a mobile level, he really knows this stuff. So Eric, let’s go ahead and dive in to Well, I guess let’s start with what’s the difference between desktop and mobile and how why they need to be treated differently.
Eric Kwoka 1:50
Well, of course, the easy one, right off the bat is just like the physical size of the screen is so much smaller on a mobile screen. Like even with, you know, fancy note 20 ultras that have massive screens, they’re still smaller than the smallest laptop that you can find, yeah, that physically makes it so that not as much information can show. So from a, like a design level, you need to pay attention more to like what’s actually shown there. But also, when users are on their phones, they’re in a very different, you know, engagement level, then they might be on the desktop, or laptops, they’re not sitting down comfortable, you know, ready to look at lots of information that could be, you know, in line somewhere, just check in the feeds, waiting for something else to go on easily, to be taken away.
Tanner Larsson 2:41
So, you know, I mean, there’s different behaviors that come out of this, right, so like, you know, a desktop screen, they’re obviously designed there on that website, or the laptop, they’re looking at a intent to consume information, right, in a very easy, digestible format, where you can lay things out more calls to actions, more everything. But that translates different on a phone, whereas there’s obviously more distractions and less real estate. So those are the two big things like you just talked about. And that’s where the difference between like remote mobile responsive and mobile optimized comes into play. Because the concept is how do you cram everything that they can see on a desktop into a mobile, right? Because everybody optimizes for desktop, but not for mobile? Right?
Eric Kwoka 3:26
Yeah. And for a long time, it was really easy to handle this design aspect, because we knew everybody was sitting down with their computer when they were going to do mobile phones could barely load a basic image. Yeah, but now with everybody moving over you, you don’t know what people are doing, when they’re choosing to actually end up at your site, or maybe not choosing, there’s just the social medias, you know, influencing them, making them go on their own. But that just dramatically changes how you need to approach the information that you give to the users. And when they actually keep their attention when so many other things can be dragging them away. Totally. So the difference, there’s basically
Tanner Larsson 4:05
there’s different behaviors that are happening on desktop versus mobile and how they interact. So how do those different behaviors translate into ecom results like Ecommerce, performance and what not.
Eric Kwoka 4:17
So a big part of that is one most people are consuming a lot more ads on their mobile feeds, like Instagram and Facebook are where they’re doing that kind of mindless browsing. So it gain, a lot more traffic through mobile, but this kind of is not to invest in traffic. They’re just kind of going to say anything like, Oh, that’s cool. Or maybe that’s interesting, and they want to see more information. While on desktop, they’re less likely to find the coming from ads, and they’re more likely to be seeking out specifically, what that actually translates into, like really dive into the data, most stores use that huge amount of mobile traffic could be 80 plus percent of the traffic over there. When you look at conversion rates, the desktop tends to be a lot higher. And this could be because users one just when they end up at the site, they’re in a spot where they’re less distracted, they’re more able to sit down the screens, serving them more information more easily. But also, many users may start their browsing on mobile, and then later move over to desktop, especially if you have an older customer base, they might feel like buying on the phone’s not secure enough, or they just want to be able to go to the desktop, so they can get that full, full information, a full picture of the product.
Tanner Larsson 5:35
Before they buy. I also find that a lot with higher priced products too, right, that there’s more consideration made to the purchase. So they wind up taking that extra time to go to the laptop to finish the purchase for the higher price stuff.
Eric Kwoka 5:47
Yes, because we really want to read a lot of information, mobile’s very difficult. Just a lot of eyestrain, just thumb cranking up, just not gonna work out very well.
Tanner Larsson 5:58
So going from that, like, the important thing to realize, guys, if you’re new to this, if you’re an old, old head to ecom, you may already have this dialed in. But so many people screw this up that just because you’ve dialed in your site on, as you can see, cuz like you’re optimizing your site on your computer, you’re not optimizing your site on your phone, like you’re actually doing the optimization work on your computer. So it looks great, that loads, great, and Safari and Chrome and all this stuff. That does not mean that it’s going to translate to a good experience on mobile, oftentimes, it translates to a really crappy experience. And the thing that catches people and prefacing this before Eric gets into what he’s going to go through next is that so many feet, whether it’s Shopify themes, or bigcommerce, or Magento, or whatever, they all have these, you know, themes or templates that they use, and they all say mobile responsive, and people think, Well, hey, I’ve got a mobile responsive theme. I’m good. Okay, now, there’s a huge difference. And the kind of the reason for this podcast is there’s a big difference between mobile responsive, and mobile optimized, all mobile responsive means is that it’s a quasi smart theme, or template that is going to take your desktop version and scale it down to fit. And if it has to stack things, it’ll stack things, but it’ll try to scale it and squish it down and make it fit on your site. That in no way means that what the squash down version is optimized for the mobile buying experience. Okay, so there’s, I want to make sure you realize that just because your theme is mobile, optimized, or mobile, responsive does not mean you’ve optimized your buyers journey. Okay. So a lot of people get back confused, and they take it for granted, because they think the theme is supposed to take care of that for you. And that couldn’t be further from the truth. So with that little ramble, Eric, that brings us into mobile ecommerce designs, like specifically mobile design, for an e commerce store. What does that actually mean? What is mobile e commerce design? And optimized specifically? Let’s talk. Let’s back up. It can’t just be designed, right? because anybody can design something, we want to talk specifically about mobile optimized design. So what does that mean?
Eric Kwoka 8:09
Yeah, so as you mentioned, like with the mobile responsive, it’s just kind of moving the same things around. And oftentimes, things can’t go beyond that, because so much is contextual. Like because of how you want to communicate your information is often where you’ll find those opportunities to optimize for mobile, and kind of goes into the new kind of, you know, web standard stuff is to do mobile first. Like always think of your designs on a phone first, don’t even think about desktop until afterwards, because much easier to take that small site and you know, blow it up or add additional functionality onto the desktop. While it’s very difficult to go the other way around. Like it’s easy to add extra hover menus, it’s hard to figure out how to deal with no longer having hover minutes. But one of the big, big things that can make a huge difference on store is when thinking about mobile optimized, it’s not just on the actual technical aspects of it, like all of these things are easy to interact with on a phone, and where’s the positioning, but also the psychology of it. If a user is on mobile, they want to be caught up quickly, they have a lot of other things. If they don’t immediately find something that’s going to keep them going further, they can just go right back to their Instagram thing. It’s easy for them to find something else to do. So you can actually adjust your messaging to send like more important tips right away, or to push get the user into the flow a lot quicker. So a lot of big sites like like kayak and Airbnb, when you look at Mobile, it’s like very much just straight to reservations. While on desktop. They kind of have some extra little flair before you actually get to that stuff. And this happens quite a lot with big stores because they’re really paying attention to stuff but they like really make sure That they actually adjust the messaging to fit more with how mobile users behave.
Tanner Larsson 10:07
And it is a big difference, right? Because like, just just think of yourself as a shopper, right? That’s your when you are shopping on mobile, it’s usually either one out of boredom or out of extreme need. When you’re browsing on your phone, you’re either bored, or you need something like, I got to find this, the nearest gas station, or I got to find, or, man, I’m stuck in line at the bank. Ooh, what this is a cool t shirt, like you’re just bored. So there’s, there’s two different kind of things you have to take into consideration there. So when it comes to mobile optimized design, though, and this is you touched on a really big point, which is, when you design and optimize your store, start from the mobile side first, which is very counterintuitive to what everybody else does, because they build their store on their desktop. So they usually build it for desktop view.
Eric Kwoka 10:51
So even as our rows, when we’re working with our client stores, oftentimes, we can still get stuck into just only ever looking at the desktop site, maybe, you know, giving a token look to the mobile site. Sometimes you just have to close the laptop goes lay down on the couch, not the worst part of the job. No, just just, you know, go through the site, like a customer really look at everything touch everything I found on some sites we’re doing audits for is like things that you just touch these two things in this order, the whole site like crashes, you have to restart your phone.
Tanner Larsson 11:26
Yeah, and that’s a good point. There’s bugs that are specific to mobile that don’t show up on desktop, right? And vice versa.
Eric Kwoka 11:35
Yeah, absolutely. So a big recommendation to any like store owners or designers that are going your site is spend even a few days maybe not even looking at the desktop site, just like intimately familiar with how the mobile experience is, and then see where things can actually be different. Like you can have entirely different layouts between desktop and mobile, like one that I see a lot is having in product descriptions, you have vertical collapsing tabs on mobile, while on desktop, you just have everything out there. Because the way users have to scroll through mobile along sales page could get tedious to go through. And the user has no idea how much is there. on desktop, it’s very quick and easy to be like, oh, okay, this is where the information I want is.
Tanner Larsson 12:24
And it goes into guys. Like it’s not just you know, the how things look. It’s also how things function. So a lot of stores. Now BGS has not subscribed to this practice at all. But a lot of stores love these mega drop down menu functionalities that just drop these crazy pop sliding out menus that have some category or subcategory and they on desktop. Yeah, they’re atrocious in our opinion. And they obviously don’t add to conversions, because we know that but people use them. But they’re not that bad. But you have a mega drop down menu show up on mobile, it makes cover your entire screen or to or as it goes down in and you go down to the sub category, that sub category may show up off your screen, they may not be able to navigate to it, it covers things up another thing that happens really big is on product pages, people have the hover or pop up enlargement of the image right when they hover over the image, the image enlarges and pops up like a mock up. Well, a lot of times that gets stuck. And then they can’t the x out is off the screen, the user can’t get out of it. And it creates like this snafu of user experience. And again, if you create that you’re blue, you’re just going to bounce, you’re just going to hit back on their on their phone, go back to Instagram, they’re not going to pay attention to your store anymore.
Eric Kwoka 13:39
Absolutely. And on mobile, we already have a very common behavior that you have the pinch to zoom. And a lot of sites you actually have to your site will naturally allow pinch to zoom, unless the code goes in and tells it not to. And for some reason, a lot of stores actually do that. They go in and say no, don’t allow pinching to zoom, which in some cases can be helpful, because there’s weird technical stuff that people can like attack the site, sort of probably not very relevant in e commerce setting. But then you can still go and have it be Oh, the image will zoom but everything else. So the developers, you know, thinking fully through this, they’ll be able to do that properly, where it’s like these parts won’t zoom in the image well, but we have that behavior that users know to do. And we’ll see them try it a lot before they even tried to do a tap to do normally they tap accidentally or just kind of like half scrolling and you do that weird tap. But then they’re like, Oh, where’s this image, press back, it doesn’t even get rid of it. It goes back somewhere else. They totally lose where they are.
Tanner Larsson 14:45
So we’ve we’ve, that’s great. That segues into the next piece, which is we’ve talked a little bit about some of the things the do’s and don’ts and like pinch to scroll or pinch to zoom you want to have that you don’t want to use mega menus, things like that. But what are some other, you know, mobile optimized Design best practices that people can utilize now to kind of start working on their store.
Eric Kwoka 15:07
There’s, there’s a whole lot and Google, of course, being one of the big mobile technology pushers with Android, they put out an insane list of design standards that app developers have to go through. But oftentimes, web developers won’t be intimately familiar with the law. So they actually say like, anything that’s meant to be tapped, needs to have like its own space that’s at least 48 pixels tall and 48. wide. And you can end up finding especially some of these little small extra links that stores have like a size chart mix, the sizes will often be too small into clump, close to the other things,
Tanner Larsson 15:46
yeah, you hit too many things when you try to tap it with your fat finger.
Eric Kwoka 15:51
Yeah, or just, you miss it, even because they make the contact so small, that then you’re just not even sure why it’s not working. So a big one there is make everything at least 48 pixels and give stuff more, more breathing room than you might on desktop, which seems counterintuitive, because you have a smaller screen. So you feel like you should be packing things in tighter, but you actually need to give things more room because of how touch is so different from clicking.
Tanner Larsson 16:19
Okay, that’s I didn’t even know I knew there was like spacing thing. And I didn’t know there was actually a specific pixel definition for what the minimums should be.
So what else
Eric Kwoka 16:31
As I mentioned, you need to really pay attention to where there’s hover menus and stuff, a lot of times, you can just replace that with an actual Click Link behavior. For that word called progressive disclosure. It’s like, Oh, you know, fast shipping. And then if you hover, it says, oh, ships within 24 hours or whatever, you can put that as an app? Or actually, you can just pull a lot of that stuff out of being a link and just put it directly on the page.
Tanner Larsson 17:00
What about, uhm, go ahead finish.
Eric Kwoka 17:04
Yeah, so then you don’t actually have to worry about the interaction, and how users might mess that up. Because you just take it out. Like, obviously, if it’s way too much information becomes a bit of an issue to figure that out. But if you spend the time focus on mobile, you’ll find out those better ways to communicate it, we don’t have the luxury of just a huge screen.
Tanner Larsson 17:25
So you mentioned earlier about where you’re talking about progressive disclosure just now. But in line with that you mentioned collapsible horizontal, like content content blocks that they can use, talk a little bit about that and how you can condense information, but still have it available, you know, when they need it.
Eric Kwoka 17:46
So one of the benefits of having everything out on the page and not using tabs is that users can very quickly scroll through and just just randomly discover information, like as they’re going, words might just pop out, hopefully you’re using, you know, the appropriate amount of bolding and formatting to help make sure they see the correct the best things. But it just allows them to very easily discover information about seeking it out. Because one big issue with tabs in general is that users may be looking for a specific piece of information, but not know where it’s supposed to be. And when you run into tabs kind of becomes that tab titles, people make them short and very non descriptive. Yep, but you find on mobile when you’re doing these vertical tabs. One, because you have the whole screen loaded the whole width of the screen to write out the tab title, you can be very specific. And then that allows you to also split the overall description up into smaller chunks, to where this like tab title, or heading can actually communicate some good information to the user, even if they never go inside of it. So while the user doesn’t get anything from seeing a tab labeled details, or spec sheet, they see one that says a wide angle camera phone wide angle camera, like okay, as a wide angle camera, then if you click on it, you can see more examples of you know, why would you want to want to a wide angle camera, or other details about it. But immediately the user gets that information that’s valuable to them.
Tanner Larsson 19:22
And another piece on these tabs guys is to make them very obvious that they are clickable, they are tabs, you know using the plus and minus or whatever, but some people try to get too artistic in their design, which is counterproductive on mobile and desktop for that matter. But everything needs to be so intuitive on the on the phone that they know okay, I just tap this. It’s going to give me more information without saying click this to get more information. You need to have that just obvious design intent in the way you lay things out.
Eric Kwoka 19:55
Yeah, it’s always, when you’re working on the store all the time, you know how everything works. It’s You put it there, you know how it works, you know why it’s supposed to work and where the information is. That’s why you do user testing. Because the moment you put it the site in front of a random person, they’ll immediately run into something that you were just like, how could anybody mess that up? But you’ve seen it a 1000 times they’re seeing it for the first time. It doesn’t make sense for them.
Tanner Larsson 20:20
Yeah. And that’s a huge aspect of it. Right. And that’s interesting anything, and we talked about this before in other podcast episodes, guys, but you are the store owner, you know how your store works, because you created it, or you touch it every single day. And there’s so many times when we’re looking at a store, and we get hung up, and then the store owner goes, Oh, well, yeah, you have to go over here to do that. And we’ll always ask him, like, are you standing behind over the shoulder of every one of your customers? Well, no, well, then it shouldn’t be like that. Because obviously, it needs to be intuitive. So the user testing aspect is great. Now, there’s great companies out there that can provide user testing try my UI is great. But another one that you simple things like Eric was talking about laying on the couch, handed over to your girlfriend, or your wife, or your husband or whatever, and just say, Hey, kid, or kid, yeah, just say go for them, give them a simple set of instructions, like, start on the homepage, and I want you to add a product that you’d like to cart and checkout, or whatever the test is, but then just shut up, stand behind them and watch. And I guarantee you every single time, you will be surprised every time you hand it to a new person or a new set of instructions, they will not do it the way that you do it. Because you know the intricacies of how your store works.
Eric Kwoka 21:35
I was recently because I like to do all kinds of courses and learn more and more about all this stuff. There’s one example I saw today, where’s the insurance company, that they had a thing that said laptop cover, and they’re talking about laptop coverage for like insurance. But any any random person you say laptop, cover them think a case for the laptop, they’re not gonna ever think of insurance. But within that company, maybe that’s just what they internally always refer to it as. And that’s what it technically is, from their perspective. But no user is going to see that they’re immediately going to just be really confused about what exactly, you’re trying to sell them.
Tanner Larsson 22:14
Cool. Any other best practices you want to leave these guys with? Before we move on the next question?
Eric Kwoka 22:19
One of I mean, good segue to maybe what we’re going to talk about next is actually have Make sure your your main landing areas like your hero, space hero banners are actually this is the main areas that you really need to focus on making sure it’s distinct and optimized for each desktop and mobile theme, you need to think about them. Probably in isolation, you could have different headlines, different images.
Tanner Larsson 22:45
So with that.
With that, that’s, that’s great, because the next area I want to talk about is the area that really seems to be the hardest one to squish. And that would be you know, the hero space on your homepage, right? This is you’re above the fold. It’s the it’s the big area on the land. And it’s one of the hardest pages to squish down to mobile performance, because it usually has a large banner, it has a lot of other wider bigger elements that are not as stackable or whatever else. So how can the store really optimize that hero space effectively on mobile, when it’s obviously much easier to do on desktop.
Eric Kwoka 23:25
So the one thing that a lot of stores easily forget is that you can actually provide totally different images and spaces on mobile and desktop. And there’s a lot of cool modern tech that actually makes it like work really, really well. Because there’s a lot of old ways that developers would kind of like work around it. And it kind of makes everything worse, because users end up having to download a bunch of images they’re not even seeing, but like new modern ones, handleless fantastical, but you can actually have like a nice big desktop image that goes all the way across the screen and is designed like that, your header in the specific spots. And then you can actually provide a totally different image, it could just be like the same one kind of adjusted to fit the screen ratio a bit better. Or you can provide a totally different thing that better satisfies the type of user. Because as we mentioned, the desktop user might be more considerate to all your information, like they’re really looking to gather that information and see it for what it is, while mobile, they’re kind of looking to get lost in it really quickly. So you can provide something that’s possibly more compelling and dramatic on mobile, while something that’s a bit more informative on desktop.
Tanner Larsson 24:38
And guys, just as a touch point there for those of you who are whether you’re new to Ecommerce or unfamiliar with code or whatever else, when I say I’m familiar with code, I can’t call it at all Eric probably can code a little bit but neither one of us are really code. We have developers that do all this stuff. What I want you to understand those Eric’s talking about two separate images and this is handled all automatically on the back end. You provide the images, but there’s very easy code snippets that go in that say that detects the device type, automatically when a user loads your website, and it will serve the appropriate code base and image and layout and buyers journey to pay on their device type. So you could have one specifically for desktop or mobile, you could even have another specific set of elements for tablet type stuff. And your store can automatically filter that and adjust and show the right one for you to the customer based on what they’re using. So don’t think this is something that gets really complicated and stuff for you. It’s that’s something for a developer to worry about. And most themes, and most, especially on Shopify, but also big commerce. Magento is one of the bigger platforms, it’s part of their native code base. Now, it’s just, it’s just common, it’s part of everything. So what he’s talking about is not something super techie, that you have to spend a lot of money to figure out how to do.
Eric Kwoka 25:54
Yeah, we actually it was, unfortunately, it was only recently, but we actually got this into the BGS super theme, I helped I actually worked with the team at Bosta that works on that to actually get all this put in and properly put in. But one thing is like while coding is obviously not necessarily when you’re a store owner, and learning to code is probably not the best use of your time, it can be helpful to know at least a bit about the tools that are available so that when you are giving a you know you’re writing your deliverables to a freelancer developer or just talking to your own in house developer, that you can communicate in a manner that makes it clear what the standards are. They’re always see with freelance developers, you can say, I’ll make it mobile optimized. But what does that mean? Yeah, as a deliverable, and they can easily be like, yeah, it works on both done and they’ll take your money, and you you’re not that wiser, you don’t know what they’re doing. But in this case, all you just got to know is picture element. If you’re talking to a developer to do anything on your homepage, just tell them I want to have a mobile image and a desktop image that using the picture element, you just say that there’s no way they can get that wrong. This is very clear, because these design standards and the actual language changes all the time, the coding language changes very rapidly. But at this point, this has enough support that you don’t even have to worry about users ending up at your store that don’t support that, because they’re probably using a phone from 10 years ago, and they probably aren’t gonna buy your stuff.
Tanner Larsson 27:35
Yeah. So the picture element is a bit of a big little buzzword type thing. But that relates specifically to the dynamic image serving, right? Yes, how it’s so your dynamic image serving as dynamically choosing which image to serve to the audience to the viewer. And the picture element is the piece of piece that you want to tell the developer to utilize to make that possible, whether with your mobile banner and your desktop manager, is that
Eric Kwoka 28:00
correct? Yes. And it can even go a lot further, which this is also a bit technical, but like Shopify, is one of the reasons why Shopify is the biggest and best Ecommerce platform is kind of because they do a lot of this back end support stuff that a lot of stores don’t even realize happens. Like Shopify, you can give it a huge image like a 20 megabyte product image, and then actually, for banner, and the code itself can actually like squish that down to the correct size and make it super tiny, way tinier than you could, like this came up in a jam session where some of the store owners were like, I’ve been putting all my images through tiny PNG to make them smaller and find out the right size. You don’t need to do any of that Shopify actually does all of that for you, if the code is set up properly to do it. Correct. So if a developer knows their stuff, and is actually willing to put in that a lot of freelancers, if you don’t ask them for that, specifically, they want to move on to the next contract. That’s like picture element. Search that there’s image object, Shopify, whatever, there’s a lot of technical stuff. But like you kind of like make that clear, something that you want. And this actually then allows you to when you have those big images that you put in that are super high quality, and they’re ready for the future. They’re ready for 5, they’re ready for 6, whatever, you can get huge images really quickly. But also, it allows that you get like the perfect image for that user, specifically, a lot of times you may take like, oh, how big should I make the product image 600 by 600, 500, because I need it to be small enough so that it loads fast, but also high enough quality. Once again, Shopify in the code can do all of that so that the user goes up. It’s the browser itself, or the device will say, this is how big the images which one of these images that we’ve been given fits that and they’ll just pick the perfect one. Then users with like high speed connections in big, big 4k displays, they’ll get huge beautiful images, they’ll fantastic. While users that are on Data Saver or Battery Saver, as well as being on small phones, they get a small ones. So you don’t have to bog down their mobile connection and slow down the site for all those users on possibly slower and smaller phones.
Tanner Larsson 30:20
Yep. So that’s actually really cool, guys, because there’s a, this is a big thing, because there’s a lot of misinformation. And it’s not even misinformation. It’s just technology has gotten better, Shopify has gotten better, because there was a time when you really, really needed to optimize every single image individually. And the fact that Shopify is changing that functionality for people that they don’t have to and the reason they’re doing is not so that you don’t have to it’s that so many people weren’t because they didn’t know any better and may receive shopping, I’ve seen performance drop across the thing, because all these massive images were causing massive load times and the sites were bogging down and everything else. So they said, hey, let’s not rely on the store owner to actually do this, even though they should, let’s just build the technology to take care of it, which is great for the smaller stores out there. They didn’t know what they were doing before. And they’re getting the benefit of it now. But with what Eric was also talking about when you’re you got to be very specific when you’re hiring a developer. And that’s another thing is really, really important to try to find a good developer, even if you have to go through several of them. But once you find one, stick with them, even if they’re a little more expensive. It’s worth it. Because what we see too often through some of our programs and stuff, and we’ve taken steps to, you know, solve this for them, but is that they go to, I don’t know, go to Fiverr. And they’ll find a developer on Fiverr, who will do this little job. And then they go to Upwork next time and find a different developer. And then they go back to Upwork and find a different developer. And then just pretty soon they’ve had they’ve had 10 different developers on their site, each doing a little thing, or maybe a big thing or whatever. But the problem there is multiple multi fold, the biggest thing is that you’ve got too many cooks in the kitchen. And there’s with code, there’s more than one way to write code that does the same that has the same end result, maybe basically more than one way to skin a cat. And just because someone writes in one way, and another one writes something else differently, doesn’t mean those two are going to work
Eric Kwoka 32:14
together. So you open up. There’s a lot of those, there’s actually a lot of those coding options. But even in like the CSS HTML guidelines, they say like this is a bandage, you should use this actually, yes, but it could get this done. And if a developer is you know, you’re just paying them 50 bucks for this specific job, they’re going to get that done as fast as possible, they’re going to use all the bandage. Yep. And then the next person that comes along that may have to adjust that will be like, their stuff won’t be working, because this bandage is blocking it somewhere else in a way that it’s not supposed to.
Tanner Larsson 32:46
Yeah. And then you’re gonna have to pay someone else to go in there and figure out what that code conflict is that’s causing that problem, and then fix it and repay him to do the work that should have been done right the first time. And it’s just problematic. So yes, I totally understand that it is problematic to find a developer, it takes effort and work and there’s a lot of crap, more crappier ones. And there are big good ones out there. I mean, that’s one thing we did within the BGS customer universe with our programs is if you’re one in one of our programs, we actually have developers available that you can hire that know our methodology and know how to do things, because it was such a big problem. But obviously, if you’re not when I’m not telling you how to become a customer of ours by any means, but definitely find yourself a developer that you can trust that you can rely on. And they can get to know your store your code and what you need. So very important there,
Eric Kwoka 33:35
that goes a bit back to your episode that you had with Archer, who said that, finding people that can do the things that you don’t know how to do, like, find good people and give them the money that they need to like do the job. And that will make your business way better. Like it may seem like an expensive developer now may seem like a lot, but if they’re doing the job, right, and you have consistency with them, like it, it compounds over time. And you’ll just have a much better running site. Much better photos, if it comes to photographers or anything, just be willing to go above the bottom, the bottom rung of cheap people.
Tanner Larsson 34:15
Yeah, you get I mean, you get what you pay for it in anything, right? I mean, cheap stuff typically works out less great than something that’s actually of quality, not just for the most expensive, just something of quality. You get the same thing and people and and professionals. So yeah, Eric so we’ve covered kind of a lot today. Obviously there’s a lot more we could dig into but we wanted to keep this episode fairly short, typically we can consume it, you know, on the drive or whatever. But where can people find more of this? I know you’ve already written about some of this stuff and talk about this and other places. So where can people find more of kind of
Eric Kwoka 34:48
your brilliance? Well, on this topic, there’s gonna be a two part blog post one that’s very simple. It should be coming out possibly before this episode airs. And the second part will be a bit more technical. And that could be more for passing to a designer that you have on your team or developer on your team, or just whoever handles that communication. Just to be like, Hey, can you make sure this is being done? properly? What’s the title
Tanner Larsson 35:15
of that? I’m gonna be?
Eric Kwoka 35:19
I don’t even remember.
Tanner Larsson 35:20
What’s the working title?
Eric Kwoka 35:23
basics, mobile option how to mobile up it has mobile optimization in the title one and part two.
Tanner Larsson 35:30
Okay, and guys, you can find that at build, grow scale.com forward slash blog, or you can go to build grow scale.com and click on the button that says blog, but it’s over there, you can run a search for mobile optimization. Eric’s one and two part article will come out any other resources you want to give him?
Eric Kwoka 35:45
That is it. Everything else I know of is probably way too technical. And I know I get lost in a rabbit hole doing that stuff.
Tanner Larsson 35:51
So if someone does want to find
those, if someone does want to find those Google like the Google best website practices, where can they go to find that? Is that just through research? Or is there
Eric Kwoka 36:01
like a. That. There might be Google search. I know they have the site material.io. And that talks all about their designs. It even gives a bunch of free icons, if you need icons is like the official Google approved icons for everything under the sun that you could imagine.
Tanner Larsson 36:19
So that’s material.io.
Eric Kwoka 36:21
Yes, color schemes, and all kinds of some of its very app specific, but a lot of it can help with just a mobile site design. Awesome. Well,
Tanner Larsson 36:31
cool. Eric, thank you so much for your time today. Guys. If you’re listening right now, make sure you’re subscribed to this podcast. We have a lot of great stuff coming out every single week. You can subscribe on iTunes, Stitcher, wherever you listen to podcasts. We’re also a video podcast. So make sure you head over to the YouTube channel and subscribe on YouTube as well to get the links in the show notes for all the episodes and where to go and how to subscribe and all that and go to build gross scale.com forward slash podcast and then again if you love the episode, if you like the podcast, please leave us a review wherever you listen to your podcast and let us know what you think and what you like and what you’d like to see in the future. All right, with that, guys, we’ll see you later. See on the next episode.
Ecommerce Store Audit
Want us to do an Audit on your e-commerce store and show you how you can make some quick changes that will dramatically increase sales and profits without increasing your traffic?
Ecommerce Store Audit
Want us to do an Audit on your e-commerce store and show you how you can make some quick changes that will dramatically increase sales and profits without increasing your traffic?