How to optimize your store for mobile devices

sponsors. 

Clocked in a time clock for Shopify.

With Clockedin your team members can easily clock in and out of their shifts from anywhere. You can manage your team's hours as they work remotely with an intuitive interface that can be used from desktop, tablet, or mobile. 

show notes.

• Opportunities:
• [13:21] Tap targets
• [14:16] Thirdlove
• [16:54] SWOT analyses and popups
• [20:08] FOMO apps
• [22:21] Font size
• [25:16] Reduce scroll time for add to cart button
• [26:15] Optimize your images
• [28:01] Use the appropriate image file type
• [29:33] Reduce the number of taps on your mobile menu to reach your collections and products
• Examples of good mobile sites:
• [31:41] Thirdlove
• [34:14] Allbirds
• [37:11] Everlane
• Store shoutouts:
• [42:30] Olive and June
• [44:02] Modern Geek

transcript.

 Kelly (00:00):
It's no surprise that for most merchants, at least 60% of your traffic comes from mobile. It also isn't a surprise that as merchants, we tend to run our business on a desktop or a laptop. This week on the podcast, we're telling you everything you need to know about optimizing your store for customers shopping on their phones. Let's dig in.

Rhian (00:24):
Welcome to Commerce Tea, a podcast to help you succeed on Shopify. I'm Rhian.

Kelly (00:29):
I'm Kelly. Grab a mug and join us as we talk about all things commerce.

Rhian (00:40):
Hello, Kelly.

Kelly (00:41):
Hello, Rhian. How are you doing today?

Rhian (00:44):
I'm doing very well. How are you?

Kelly (00:47):
I'm doing all right, doing all right.

Rhian (00:50):
Yeah?

Kelly (00:51):
Yeah, I am tired.

Rhian (00:54):
That's fair. I can empathize. I couldn't think of the word empathize. I was like, I can relate? I can empathize.

Kelly (01:05):
But also that.

Rhian (01:07):
But also, both words. Okay, relatively synonymous. What has been the highlight of the last seven days of yours?

Kelly (01:18):
What has happened in the last seven days? I don't want to say I made spaghetti.

Rhian (01:23):
It's very on brand.

Kelly (01:25):
It was good. I feel like I've done something more important than that though. I don't know. We hit some cool business goals but I don't feel like... that's boring.

Rhian (01:39):
First of all, we celebrate all business goals so yay.

Kelly (01:43):
Yay.

Rhian (01:44):
Because right now, it's so important to celebrate our successes, so let's celebrate your success with a dance party. Bah, bah, bah, bah, bah, bah. Okay, everyone, just so you know-

Kelly (01:56):
[inaudible 00:01:56].

Rhian (01:55):
... we had a dance party. You can have one at home if you want.

Kelly (02:00):
Thank you for joining in on the dance party.

Rhian (02:01):
Yes, yes, absolutely.

Kelly (02:05):
I am excited for Thanksgiving and Black Friday because they are days off work.

Rhian (02:14):
You know what I'm not excited about? This is going to be the first year I ever cooked my own turkey and I-

Kelly (02:19):
Me too.

Rhian (02:20):
I have concerns.

Kelly (02:21):
I found a recipe that I'm going to use and it says it's easy, so I am going to write a strongly worded email if it is not easy. Actually, I'll just write a strongly worded comment on their blog post because it's a blog post. [crosstalk 00:02:35].

Rhian (02:35):
Yeah, I'm concerned. I bought brine from Instacart from Costco, but then I told my-

Kelly (02:42):
I'm making my own.

Rhian (02:43):
Huh?

Kelly (02:44):
I'm making my own.

Rhian (02:45):
Brine?

Kelly (02:47):
Yeah.

Rhian (02:47):
Are we supposed to brine a turkey? I have literally no... if I could know less about making a turkey, I could not know less if I'm making a full turkey. I don't understand it, I know there's a lot of butter involved or at least when my mom makes it there's butter everywhere. I am very concerned about this but it'll be okay. I mean-

Kelly (03:10):
It'll be good.

Rhian (03:10):
What can go wrong?

Kelly (03:12):
Worst case scenario, you have all these great sides to eat.

Rhian (03:18):
That is my favorite part. I could actually do without the whole turkey and just eat mashed potatoes.

Kelly (03:24):
So because of the pandemic, we're not seeing anybody so we're just celebrating Thanksgiving by ourselves, so it's just the two of us. We're still doing the full thing.

Rhian (03:34):
Same.

Kelly (03:34):
It's a turkey, stuffing, mashed potatoes, green bean casserole, cranberry sauce, rolls, I don't know if I'm missing something or not, but.

Rhian (03:45):
Our turkey is 16.8 pounds for three people.

Kelly (03:49):
A lot of turkey.

Rhian (03:49):
It feels a little excessive, but this is what came in my butcher box so that's what we got.

Kelly (03:57):
I just realized that I forgot to buy some ingredients so I'm going to have to place another Instacart order for the rest of my ingredients, but that's okay.

Rhian (04:04):
Okay, so we do know that Thanksgiving is not this week, right?

Kelly (04:08):
Yeah.

Rhian (04:08):
Okay, because I actually did not know that and I pulled my freezer. I pulled the turkey out to start defrosting. My mom was like, "Uh, Rhian, it's actually the week after." I was like, "Are you sure, though?" So that means I either want the year to be over, I don't know what that says about me. I was just like, yep, next week's Thanksgiving.

Kelly (04:28):
So that's a good question for you. Here's your quiz. When do you take your turkey out of the freezer for thawing?

Rhian (04:38):
Okay, well if it's 16.8 pounds, it's about one day for every five pounds. So to be safe, four days before but to be really safe, five days before.

Kelly (04:56):
You did it. See, you know what you're doing.

Rhian (04:57):
I had Googled that earlier in the day so that's why.

Kelly (05:00):
It's so cool, you retained that information and now that I just quizzed you on it, now you're never going to forget it.

Rhian (05:04):
Yeah, it's like a knowledge graph.

Kelly (05:05):
It's going to be like April 15th, and you're going to be like, hey, it's tax day. Also, here's the math calculation to do for when you got to pull out your turkey. You're just never going to forget it now.

Rhian (05:17):
No, no, never. For those of you listening along, I hope that you are having a good build up to your Thanksgiving. Well, if you're in the United States, if you're not, I hope you're-

Kelly (05:29):
I hope you're having a good build up to next Thursday.

Rhian (05:34):
I hope you're having an awesome day, I don't know what to say. By the way, this is my second Thanksgiving of the year because my husband's Canadian. So I did cook a turkey breast but it came in a bag. So I don't think that counted.

Kelly (05:47):
It's different.

Rhian (05:48):
It was way different.

Kelly (05:48):
Did you get a roasting pan? Did you buy an actual roasting pan or a disposable one?

Rhian (05:53):
First of all, I need to tell you something. My house was built in the 1960s and my ovens are very tiny. So I have to get everything small size. It's bigger than a toaster oven.

Kelly (06:04):
But you have a large turkey.

Rhian (06:06):
Yeah, I haven't done the logistics on this yet, I haven't measured, I haven't held it up. I'm not sure what's going to happen. So a lot of things don't fit in my oven. I need small sized things.

Kelly (06:20):
Yeah, I have not received my turkey yet and I also have a small oven. So when we bought this house it was built in 2000. It was advertised that it was a double oven. I should've known, but I completely forgot when we were doing the tours of all the houses because they are a lot of homes. The double oven was one small oven and a microwave.

Rhian (06:42):
Oh my double oven is actually, it's two legitimate ovens, but they're only... they're so small. [inaudible 00:06:49]-

Kelly (06:49):
Microwave sized ovens.

Rhian (06:50):
Yeah, it's like they're the size combined of one full sized oven. It's very, very bizarre.

Kelly (06:58):
It's just like a wall between them.

Rhian (06:59):
False advertising, yeah.

Kelly (07:02):
Yeah, so my oven is the size of the large cookie sheet fits as a shelf.

Rhian (07:07):
Oh, a large cookie sheet is a pipe dream in my oven.

Kelly (07:11):
I can't wait to see how you figure out this turkey. This is going to be... please document this.

Rhian (07:17):
It's so bonkers, all of it's so bonkers but you know what? I got my prep deck.

Kelly (07:23):
Hey, I got my prep deck too.

Rhian (07:25):
I'm super excited for prepping things.

Kelly (07:28):
So if you don't know what we're talking about, prep deck is a client site that my company recently launched. The website's prepdeck.com, they have a really cool product and their website is really great. I'm biased, though.

Rhian (07:41):
On a side note, a really good website.

Kelly (07:46):
I should've gone with, yeah, they're just the perfect example of what to do on a website. Also, their product is okay.

Rhian (07:57):
It is really cool. I now have a knife block in my kitchen with two whole knives in it. So [inaudible 00:08:03].

Kelly (08:02):
Two whole knives? Look at you.

Rhian (08:04):
I know.

Kelly (08:06):
I'm so proud of you.

Rhian (08:06):
Thank you, thank you. I'm stepping my game up.

Kelly (08:08):
All of this to say we're talking about shopping on your mobile device because that's where we all are.

Rhian (08:14):
Oh, that was a [crosstalk 00:08:14] transition.

Kelly (08:17):
Thank you, very relatable. Here's the connection, okay. Thanksgiving, the day after Thanksgiving is Black Friday. A lot of shopping happens on Black Friday and a lot of shopping also happens on your phone. Boom.

Rhian (08:29):
That is very true, especially now with our device time goes up. I don't appreciate, by the way, every week when Apple's like-

Kelly (08:39):
Apple update? You spent 13.1 hours on your phone or on your screen on average. I'm like, I also work, okay.

Rhian (08:47):
Yeah, it's like, up 5% from last week. I'm like, okay, we can only go up so much more before.

Kelly (08:54):
You spent on average 28 hours of screen time per day.

Rhian (09:00):
So because we're spending so much time on our phones and they are glued to our hands no matter where we're at, we're shopping on them more.

Kelly (09:09):
Yes, we are.

Rhian (09:11):
Maybe we're shopping on them because we are like me and we love Instagram. What's weird is I actually don't like Instagram, I just like Instagram ads because Instagram knows me as a person.

Kelly (09:21):
Also side note, the update to the Instagram app is trash.

Rhian (09:26):
Oh, it is trash. People were talking trash about... it said James Charles, he's a YouTube influencer. Okay, they have a very good point about the product. Everyone's like, he doesn't know what he's talking about, I'm like, but really because I agree with all of the critique made, so.

Kelly (09:49):
I will give you my expert opinion and say it's trash.

Rhian (09:52):
It is trash. It's, ugh. [crosstalk 00:09:57]-

Kelly (09:56):
They know what they were doing too, because they're going with muscle memory and they're replacing what you're used to tapping on with this shop button. I don't want to shop through Instagram, I'm sorry but I do not want to.

Rhian (10:08):
Yeah, it's-

Kelly (10:10):
Unless I just come across a product on my feed and then I will tap on it and maybe buy it, but that's a different scenario.

Rhian (10:16):
It's a whole thing, it's a whole thing.

Kelly (10:19):
So the point of this conversation is to help you optimize your site for mobile devices. What I said at the beginning in our little hook is absolutely true. I am also a merchant and I build my site on a desktop. I run my business from my computer. I maybe pull up the Shopify app on my phone occasionally but everything I do is on my laptop, on my MacBook. Yet over 60% of my customers... I should actually look to see what the number is. I'm going to do that while we talk. Over 60% of customers on average are shopping from a mobile device. This is just-

Rhian (10:58):
That's a fact.

Kelly (11:00):
... fact, yeah.

Rhian (11:00):
I have a former client who I still have a relationship with who is over 90% mobile.

Kelly (11:07):
That's wild.

Rhian (11:07):
Who does millions. That's like, we're talking not a small amount of money. They absolutely slay on mobile, but literally, in their dev and design, because they know that they're user or their buyer is so mobile forward, everything is done with mobile in mind which is really smart.

Kelly (11:32):
That is really smart.

Rhian (11:33):
I mean they sort of test it on desktop but they're testing it and not just in developer test mode test it, they get out their phones and they test it on their phones because it is different.

Kelly (11:47):
It is different. So I feel like my store might be an exception because I sell to a bunch of developers and people who are usually building something on their computer when they take a break and look at Twitter and then find my product. So I have almost a 50-50 split between desktop and mobile.

Rhian (12:05):
Interesting.

Kelly (12:06):
It's actually 47% of the last 90-days, the visitors came from a mobile device.

Rhian (12:12):
That makes sense, though because your user or your buy... I keep calling them users. Buyers.

Kelly (12:18):
My users.

Rhian (12:18):
Customers.

Kelly (12:19):
My customers, yes. My customers are-

Rhian (12:22):
I can't think of the right word.

Kelly (12:23):
They're also more likely to use a desktop for their work and that's when people tend to find my products, but my store is not the norm. Other stores that might be an exception where you see more purchases coming from a desktop are going to be highly configurable items. So things where you have to select a bunch of options, some customization, all those types of things tends to. People start the process on a mobile device and then finish it on desktop. That just is again, it's easier to make those kinds of customizations on desktop and that is a flaw for shopping on mobile that we somehow have to overcome but we have not done that yet.

Rhian (13:00):
No, we have not. What is the number one failure... that sounds so negative. What is the number one opportunity-

Kelly (13:11):
Hey, there we go.

Rhian (13:13):
... for merchants on their mobile buying experience?

Kelly (13:21):
First thing that I think you should do is look at your tap targets. Now, tap targets are your buttons, your links, anywhere that a customer is tapping onto make a change whether it's selecting an option or visiting another page on your website. More often than not, these are two small for mobile. Nothing is more frustrating than trying to tap a close button and I just can't get the stupid popup to close.

Rhian (13:48):
It's the worst.

Kelly (13:50):
It's because the tap target is too small. Quite often, those tap targets on popups are maybe 12 by 12 pixels or 16 by 16 pixels. My recommendation is 36 by 36 pixels minimum. So we're talking two to three times what that is on average.

Rhian (14:06):
Yeah, so for those of you who don't speak developer, just very, very tiny versus tap-able.

Kelly (14:13):
Not. A good example of tap target size is Third Love. So if you go to their collections page or probably actual product pages as well, I just happen to be on a collection. Yeah, so if you go to any of their product pages, you can see their color selector. They're actually smaller. I'm going to back up. Their filters on their collection page, they list all of the different bra sizes and everything. The tap targets for each of those sizes is, they're really nice size. It's hard to accidentally tap the wrong size.

Rhian (14:54):
That's good.

Kelly (14:54):
So that's a good example of what to look for. It's not consistent across the website, there are definitely some other tap targets on there that are too small, but that's a good example of what size you should aim for.

Rhian (15:07):
Lighthouse tells you if your tap targets are too small.

Kelly (15:11):
Yes they do.

Rhian (15:13):
However, I would argue that even if they say your tap targets are fine, maybe make them just a touch bigger.

Kelly (15:20):
Nothing hurts making them bigger unless you go way too big, which obviously that's not our recommendation here but just make them tap-able. Make it so people can actually tap on the button.

Rhian (15:30):
Make them tap-able.

Kelly (15:30):
I'm not asking for a lot here.

Rhian (15:34):
Make it so the button can be tapped. That's it, that's the hurdle.

Kelly (15:38):
Okay, we're going to have another conversation which is one of your favorite hills to die on, but it is an opportunity and also a threat. I'm going SWAT analysis style here because that's what came to my mind that's strengths, weaknesses, opportunities and threats when you're putting together a business plan. Anyway, popups and small button. So what I mean by this and Rhian is going to eventually stop laughing at me. When you visit a website, you might see a chat icon in the corner, you might see a little button for adjusting the accessibility settings. You'll see a little GDPR banner, you'll see a button to tap something to enter your email so you can get a 10% off discount code.

Kelly (16:25):
When you're on a desktop, these are pretty spread out so the opposite corners of the screen, not terribly in the way. When you're on a mobile device, you're on a much more narrow device and everything is just on top of each other and I hate it.

Rhian (16:41):
I hate it so much. Are we actually doing a SWAT analysis of popups because I'm willing to.

Kelly (16:50):
I wasn't going to but if you really want to.

Rhian (16:54):
Okay, well maybe you can help with the S, which is the strength. What do popups do well? Let's lead in with that.

Kelly (17:01):
Popups help you connect with your customers. It gives you another avenue to connect to your customers via email or via SMS.

Rhian (17:08):
Okay, what are the weaknesses? What do they need to improve?

Kelly (17:13):
Usually they pop up too quickly or they're too large. That impacts the SEO, and they're annoying.

Rhian (17:20):
Yes, opportunities. What are the goals? Capturing emails?

Kelly (17:25):
Yeah.

Rhian (17:28):
Threats?

Kelly (17:31):
So the threats-

Rhian (17:32):
Google can't crawl by them. Okay, sorry, what? What was the next threat?

Kelly (17:37):
But no, that's absolutely right. Also, it interrupts the purchase flow so people get annoyed by it.

Rhian (17:43):
Bounce.

Kelly (17:44):
Yeah, they bounce.

Rhian (17:45):
They bounce. So those are the threats. I love that we just did a SWAT analysis.

Kelly (17:49):
We just did a SWAT analysis.

Rhian (17:50):
We did not plan on doing that but more than anything, it's really critical when you are making, when you're choosing when to put your popup in, think, can Google... here's your serious threat. Can Google crawl past this? If the answer is no, they're not going to and your site's not going to get indexed. That's it.

Kelly (18:13):
Think of it like a brick wall.

Rhian (18:14):
Yeah, it is a brick wall.

Kelly (18:15):
Can you wreck through a brick wall?

Rhian (18:17):
No.

Kelly (18:18):
Unless you have superpowers, no.

Rhian (18:20):
No, and last I checked, my superpowers got taken away. So it's just one of... I can watch superhero shows for weeks now. But seriously, Google can't get past it and well it's not going to try to get past it because they view it almost like a 404 page. They're like, this is broken, I can't do anything, and then leave.

Kelly (18:46):
They leave. Even Google bounces.

Rhian (18:49):
Yeah, Google bounces. Yeah, and plus you definitely don't want your merch... I cannot. Your customers to bounce. It's much better to have a popup come in from the bottom, from the top, from the side, almost like a slide in situation, but also it's really important to not have too many popups. That's also a threat. Don't fall down the popup rabbit hole.

Rhian (19:15):
What are our least favorite types of popups? I mean for me, all is the answer but realistically?

Kelly (19:23):
Age checkers, I'm okay with those. I know they're annoying to enter in your date but they're necessary legally, so you're going to have to get past it. However, there's a right and a wrong way to do that even. Are you over the age of 21, yes or no? Please enter your date of birth.

Rhian (19:39):
That's weird.

Kelly (19:39):
It's more work. Also, I always say my birth is January 1st, 1980 because I just quickly... or whatever year I land on.

Rhian (19:47):
So fun fact about age checkers is that they're exempt from Google's rules about popups.

Kelly (19:54):
Exactly.

Rhian (19:55):
So Google's smart enough, yeah. I don't mind them, I don't mind GDPR popups because they have to be there. Those are mostly bottom bar, but.

Kelly (20:03):
Privacy is the worst.

Rhian (20:06):
What about cookies? But if I really think about the type of interstitial, which is fancy word for popup, that I don't like the most. My least favorite type are the Bob from Oklahoma just bought a cookie, popup.

Kelly (20:24):
They just bought a cookie, popup?

Rhian (20:28):
Yeah, or just-

Kelly (20:28):
No but seriously, these apps tend to be called FOMO apps, fear of missing out. They're supposed to take your order history and occasionally pop up saying, "X person from Y City bought Z item two hours ago," or whatever. Couple issues with this. First off, some of these apps don't use real data and have gotten removed from the app store for falsifying that information so please do not use an app that is falsifying that data. Two, if I shop for something and I place an order, even thought it'll say, "Kelly V. from Smyrna bought joggers again," I don't need to world to know that. I don't know, it's a privacy thing I guess. Nobody's going to put two and two together and say, "Oh, Kelly from Smyrna."

Rhian (21:28):
I don't think it builds trust.

Kelly (21:32):
I don't think it does either.

Rhian (21:33):
That's another ranking factor for Google. I do not think it build trust, I do not think it builds authority, and it doesn't show expertise. So to me it's valueless.

Kelly (21:43):
If you want to build trust, have testimonials and reviews on your site.

Rhian (21:46):
Yes, testimonials, reviews.

Kelly (21:46):
Actual, valid, testimonials and reviews. Maybe Steve, who bought a potato really hated the potato but you just told everyone that he bought the potato. Well, there's no context there.

Rhian (21:57):
Absolutely no context there. So okay, so that's the hill. I have successfully died on it again.

Kelly (22:04):
RIP.

Rhian (22:04):
Also, we really don't like wheel apps, but that's [inaudible 00:22:08].

Kelly (22:08):
Wheel apps? Oh, I don't have time for that. I can literally record an hour long episode about, here are all the reasons why I hate spin wheel popups but we're not doing that today.

Kelly (22:20):
So another opportunity for improving the mobile experience on your site is your font size. So we talk about font size a lot in terms of accessibility. We often see, when we're doing our Pteranodon videos on YouTube, which by the way, we have a YouTube Channel. Visit it at YouTube.com/commercetea and watch our YouTube videos. They're really great.

Kelly (22:45):
We talk about font size a lot because we're so focused on shrinking everything to fit on a mobile device that we also shrink the font size. It's often just too small to read.

Rhian (23:00):
Way too... or, I saw this today, or it's like, oh you're doing this really trendy font. I can't read it.

Kelly (23:07):
Oh, trendy font.

Rhian (23:09):
It's too small, the line weight's weird, the kern is off. There's so many challenges. I think on desktop it looks okay, it's readable, but then on mobile... because Kelly and I had pulled up some stores ahead of time. I was like, what? I can't even read, I can't read half of the font, nor can I read the price.

Kelly (23:31):
Oh yeah, and if you can't read the price, that's trouble.

Rhian (23:34):
That is trouble.

Kelly (23:36):
So in terms of what size you should aim for, everyone actually has their own recommendations. So the absolute minimum is 16 pixels, and I know this because if your font size is smaller on a form field, smaller than 16 pixels and you tap on it on your iPhone, it zooms in because it's too small.

Rhian (23:59):
I have a question for you.

Kelly (24:00):
Yeah?

Rhian (24:01):
If you're not a developer, you're like, how do I get my... now is 16 pixels, 16 point?

Kelly (24:09):
They're different, we're going to go with pixels here.

Rhian (24:11):
Exactly.

Kelly (24:12):
So pixels are usually used for the web, points are usually used for more print design. Your theme settings has a setting for your font size. It's usually not under your section settings, it's under the actual theme settings, the settings tab. Shopify just revamped the entire customizer so you might have to hunt it down a little bit but otherwise I'd tell you exactly where it is. I just don't have it pulled up, but you will find it under there under all of your font sizes and typography and everything there.

Kelly (24:42):
So going back to the absolute minimum of 16, Apple usually recommends between 17 and 22 pixels, Google recommends between 18 and 22 pixels. Quite often I'm seeing sites use 12 pixel font or 10 even.

Rhian (24:56):
So small.

Kelly (24:57):
It's so small. So yeah, that's one of the important things, your font size.

Kelly (25:03):
Going on the same topic a little bit is, if you increase your font size, it's going to push content down on your site because obviously the content is stacked on a smaller screen on mobile. One of the things that you should definitely look at doing is reduce the amount of scrolling required to reach the add to cart button on product page. One of the easiest ways you can do this is if your product description is listed above the add to cart button, move it below the add to cart button. Again, this is often a setting in your theme. This is going to be under the product section in the theme customizer and if it's not there you can ask the developer to move it for you.

Rhian (25:43):
Perfect, that is a huge opportunity that a lot of people have so that's a great solve. What is another challenge? Thing off the top of my head, the images that are used to make a hero image for your beautiful lifestyle brand, do not need to be that size.

Kelly (26:09):
Yeah.

Rhian (26:12):
[inaudible 00:26:12].

Kelly (26:12):
My contribution, yeah. So helpful. Okay, so yeah, this is a really, really good point. It really depends on the theme you're using. Some thenes support what are called [inaudible 00:26:24] or SRC Sets, where basically Shopify will automatically load the appropriate image size for the screen that you're viewing. This is really important and is something your theme should absolutely have and if it doesn't, ask a developer to add it, add support in for this because again, we're usually uploading a beautiful lifestyle photo for a hero image. We're not using a slideshow because we don't like slideshows on this podcast. When you view your site on a mobile device, instead of loading an image specifically for the size that you're viewing on mobile, it loads that 1,400 pixel wide image for desktop. It just squished it down to fit on a mobile device. So you're loading an unnecessarily large image on a mobile device which impacts your load time, which impacts your conversation rate.

Rhian (27:20):
And your site speed.

Kelly (27:21):
And your site speed.

Rhian (27:21):
So your ranking in Google.

Kelly (27:23):
All the things.

Rhian (27:24):
Everything.

Kelly (27:25):
So yes, please optimize your images all together. Don't upload an image that's too large. I try to keep my image file sizes below 350 kilobytes each. So many times I'm like, well I hear people say, "Why is my site slow?" I download the first image that shows up on their site and it's four megabytes.

Rhian (27:45):
Yeah, and you're like, I have some ideas. Let's start here.

Kelly (27:49):
Let's begin here.

Rhian (27:50):
Let's begin here. It's almost everyone. Honestly, almost everybody who asks me, "What is wrong with my store?" That is the very first thing to say.

Kelly (28:01):
I see it a lot with people uploading transparent PNGs as well, when there's not really a need to have a transparent image there. For example, if you use a print on-demand service, let's say Printville, for example. It auto generates photos for you and it gives you the option of a JPEG, or it gives you the option of a transparent PNG. In this scenario, a JPEG makes the most sense because it is a photo of something. It's not like a... what's the word I'm looking for?

Rhian (28:32):
Like an asset? It's not an-

Kelly (28:33):
It's the way the graphic is created. It's a vector, it's a good vector file. That's what I was looking for. There's no need for it to be transparent, but they give you the option for transparency for other reasons. Maybe you want to put your own background in there and then save it as a JPEG and then upload it. Whatever it might be. Use the appropriate file type for your images as well, is my point of getting at. So your product images should be JPEGs, they should not be PNGs. PNGs tend to be especially transparent. PNGs tend to be a larger file size but the reason why you use PNGs for vector files, which is things like there's text on there. If you save it as a JPEG it starts to get all grainy and weird looking.

Rhian (29:13):
Degrades.

Kelly (29:13):
Saving it as a PNG fixes that.

Rhian (29:16):
Pictures are hard.

Kelly (29:17):
Pictures are hard, they're very hard but they're also very important. I mean there's also SVGs, if you really want to get [crosstalk 00:29:25] with the vectors.

Rhian (29:26):
No, no, let's not do that. Let's stop.

Kelly (29:29):
Things I can talk about all day but we're not going to.

Kelly (29:31):
Okay, so I have I think one more that's worth mentioning. This is your mobile menu. So one of the things I've noticed is that on a desktop, you might have a mega menu on a website. So let's say you hover over a button that says shop, a link that says shop, and you see and then you come up with five different columns and then a feature image for promoting a specific product or something like that. On mobile, I have to tap shop, the little arrow next to the word shop, not the actual shop link itself. Then I have to tap one of those heading columns, and then I actually get the link, the list of links. So you're adding additional steps to actually get to the items, the collections, or even the products.

Kelly (30:19):
One of the things that's really important for any site, whether you're on desktop or mobile, is to reduce the number of clicks it takes to actually add an item to the cart. So something to really look at is, how many clicks does it actually take? How many taps does it take, to actually reach a collection page, to actually reach a product page? So that is something that's definitely worth reviewing. This is often and usually a theme flaw.

Rhian (30:43):
Yeah.

Kelly (30:45):
Theme flaw is a really weird thing to say five times fast.

Rhian (30:49):
It is, it is, but it's so important to talk about what you're talking about because this is, if you're buying traffic, if you're buying ads, and then you're sending people to your store, and then it's a hot mess once they get there. I mean hot mess in the nicest possible way but it takes too many clicks and now people are gone forever. You have bought nothing.

Kelly (31:17):
Exactly, you've bought nothing. You don't want your products to be hard to find.

Rhian (31:21):
Not at all, not at all. So what are some good examples of mobile shopping experiences that folks who are listening can reference?

Kelly (31:31):
Some of these are good, some of these are bad, or I should say there's good and bad to every website that I'm going to mention here or that we're going to discuss.

Kelly (31:40):
So I mentioned Third Love earlier, their tap Targets. They have a really good example of why I hate all those little popups that show up. After 10 seconds, I see, don't miss out, spend $150, save $20, shop now. I can close that out. Behind that, I see feedback on the left and I see a chat button on the left as well.

Rhian (32:02):
Too much.

Kelly (32:02):
The feedback and the chat button are always visible and I have to close out that save, buy and save popup that showed up in order to even reach the chat.

Rhian (32:12):
That's stressful. Even just talking through that makes me feel stressed out.

Kelly (32:18):
But I do like... their headings are a great size. Their font size is a little on the smaller side. So if you want to tap shop now on the homepage below one of the... it shows an image and then a heading and this text and shop now link, the link is pretty small. So, an example but I really do like the size of their filtering. Their color selection and their size selection on the product page, actually the colors are smaller than the sizes, which is kind of weird. The sizes are a slightly small but fits-ish size. I would probably increase the sizes of them a little bit. The colors are much smaller. So that is a bit of an issue but this is an example of, they'd really benefit from increasing the font size. But one of the nice things is you don't have to scroll very far to reach an add to cart button.

Rhian (33:26):
Okay, that is a good thing.

Kelly (33:28):
Their menu, their mobile menu is also very easy to use. So you can easily tap and toggle, you only have two taps once you open the menu to reach any collection.

Rhian (33:40):
Perfect. How many taps to check out?

Kelly (33:43):
So that would be, if I load the homepage, I tap on the menu, tap bras, tap all bras, we're watching me check or shop. Check, whatever, words. Another tap to actually reach the product. Pretending I'm not changing my size or color or anything and tap add to bag, I'm up to, one, two, three, four. Then number five is check out.

Rhian (34:08):
Okay, that's not bad.

Kelly (34:11):
So not bad. Yeah, that's not bad at all. Okay, so that's Third Love.

Kelly (34:15):
Let's look at one of my favorite sites, Allbirds.

Rhian (34:20):
Kelly's just angling for a sponsorship from Allbirds.

Kelly (34:23):
Allbirds, please sponsor us. I will proudly... this episode is sponsored by Allbirds. I am wearing those shoes inside. All the things. You know what? Allbirds needs to create slippers.

Rhian (34:34):
I'm shocked they haven't. The other brand we're about to talk about, Everlane, started to give it up right away, but they just launched slippers, two kinds.

Kelly (34:43):
Wow, I guess I'm going to be doing some shopping soon.

Rhian (34:45):
I bought them.

Kelly (34:45):
You bought them?

Rhian (34:46):
Not both times, just one time.

Kelly (34:50):
So Allbirds, their font size is a little bit larger, a little bit larger than Third Love's but reasonable size, it's readable. Their buttons are a decent size, they're clearly loading an image on their hero that was optimized specifically for mobile because it's more of a portrait than a landscape photo which is nice.

Kelly (35:21):
So I'm going to look at their mobile menu. So here's an example of multiple steps. So I have to choose men or women or gifts or out materials or stores first. So let's say I'm shopping for myself, so I'm going to tap women. Then I get to another sub menu that says shoes, apparel, accessories, collections. So I have to choose another option. By the way, I don't know what collections is so that's a terrible name. Surprise tear down. So I tap shoes, and then I get running shoes, everyday sneakers, slip ons, flats, all of the links there.

Kelly (35:55):
So I had on Third Love, I tapped bras and then I tapped all bras. Here, I have to tap women, shoes, and then whatever type of shoes I want. I can't actually choose... Oh, the bottom link is shop all shoes so it's one extra tap.

Kelly (36:14):
All right, going to their product page. Oh okay, so their select size tap target is perfect. Easy, easy, easy to tap on. By the way, I wear a size nine and a half shoes. All these companies that create half sizes, Allbirds is not one of them but create half sizes up to eight and a half-

Rhian (36:39):
They stop?

Kelly (36:39):
... and then they go nine and then 10. I don't appreciate it.

Rhian (36:43):
I don't appreciate that either.

Kelly (36:44):
I don't have size nine feet or size 10 feet. I have size nine and a half feet.

Rhian (36:47):
You have middle feet.

Kelly (36:48):
I have middle feet, yes. One of my most recent searches in my history right now is, masks for adults with small heads because one size fits all is not the case for me. All kinds of things you can learn.

Rhian (37:06):
Oh my gosh, oh my gosh. So okay, the other store to highlight is Everlane, which is a place I regularly spend too much money.

Kelly (37:21):
You are immediately shown a popup. Immediately on load, shown a popup.

Rhian (37:26):
You are immediately shown a popup.

Kelly (37:29):
This is an example of a tap target that is too small.

Rhian (37:31):
I concur.

Kelly (37:33):
However, you can tap above the popup to close it as well, but I only know that because I just tried it, so it's not obviously.

Rhian (37:42):
So if I'm going here and I click in the hamburger, there's gifts for her, gifts for him, which I like, there's those little cutie emojis.

Kelly (37:51):
Relevant.

Rhian (37:52):
Featured, let's see. Okay, I'm just going to go new arrivals. I don't know [crosstalk 00:37:56].

Kelly (37:56):
So one thing to note on their menu, which is pretty cool, is that they by default select women but you can toggle over to men.

Rhian (38:02):
What?

Kelly (38:03):
So where Allbirds required you to select one first, Everlane is defaulting to one option, you can choose the other. Most likely, I would venture to guess that most people shopping on their store are women, which is why they default to women. So if most people shopping in the store are men, you default to men.

Rhian (38:19):
They have cashmere socks, I would just like you to know. I'm just throwing that out there to the universe. Okay so I'm going to click on one of these products. I'm clicking on this flannel shirt, it's an orange flannel shirt. Adding to bag, oh, I can actually buy. Nevermind adding the bag, I could've just bought that with Apple Pay right there.

Kelly (38:44):
Oh, so they have accelerated checkout enabled.

Rhian (38:47):
Yeah, they have accelerated checkout on product.

Kelly (38:49):
That's nice. Their tap target for their sizes is also nice as well.

Rhian (38:53):
It's yeah, it is nice.

Kelly (38:54):
Their color selection is a little on the small side though.

Rhian (38:58):
It is a little on the small side, yeah, but overall-

Kelly (39:02):
Their font sizes as well.

Rhian (39:03):
Overall, I am... it's interesting because yeah, the... oh my gosh, the menu is really good compared to a lot of other menus. Then we fall off a little bit after that, but it's not terrible.

Kelly (39:22):
It's not terrible.

Rhian (39:23):
That's where we're at, but what's interesting is they've got an H. I think this is an H-1 right here. So I'm looking at the organic cotton.

Kelly (39:33):
Explain what H-1 is.

Rhian (39:37):
Heading one?

Kelly (39:39):
Yes, we know what H-1 is, but.

Rhian (39:44):
So what it means for SEO is it tells Google what this page is about. It's actually one of the most underutilized features on Shopify stores, period. A lot of people don't even have H-1 tags or they have a bunch

Kelly (40:00):
Only-

Rhian (40:00):
... of H-1 tags.

Kelly (40:02):
Quite often, the image, the logo on your site is an H-1 tag.

Rhian (40:08):
Yeah, a random thing is an H-1 tag but Google looks at that as actually one of the main indicators as to what that page is about. So on this, I can tell that their H-1 tag is actually quite long but it's the look of your favorite sweater meets the feel of a cozy classic thermal. Okay, there's favorite sweater, cozy sweater, classic thermal, cozy thermal. Those are all your keywords jammed up in there, smart.

Kelly (40:38):
That's a lot of keywords.

Rhian (40:39):
That's a lot of keywords that doesn't feel like a lot of keywords.

Kelly (40:41):
Yeah, I like it.

Rhian (40:43):
I like it too.

Kelly (40:44):
Their size guide is really great too.

Rhian (40:44):
They're size-

Kelly (40:45):
I mean, this is again, basically turning into impromptu tear downs, but yeah, I think that gives you some examples of sites that are worth checking out. Your homework as soon as you're done listening to this podcast episode is to look at your own site on a mobile device. Go through the entire shopping experience from homepage all the way to tapping that checkout button. See how many taps it takes you to actually get there first off. Second, look at your mobile menu. Are you able to access all the most important collections and the most important products that people are buying? Look at your font size, look at your tap targets. I believe that's a good place to leave it.

Rhian (41:31):
I think so.

Kelly (41:31):
I get we're a week and a half away from Black Friday, so you're not... At this point, I'm in a code freeze, so no more major changes on themes whatsoever.

Rhian (41:42):
Weird, we're in a code freeze too.

Kelly (41:45):
This is the time to be. So for the non-developers, code freeze means that we are not making any changes to a website that's not a bug fix. It's an important period because we don't want to break anything when most people are shopping.

Rhian (41:59):
Correct, we would like it to be nice and stable.

Kelly (42:02):
I love stability. What a year 2020 has been, I need some level of stability in my life. That's why I love code freezes right now. I can just... I'm not sitting back and doing nothing. I'm working on things that are not launching for Black Friday, so.

Rhian (42:21):
Yeah, I love that, good.

Kelly (42:23):
What do you say we do some shout outs?

Rhian (42:25):
Let's do it.

Kelly (42:27):
All right, what is your shout out this week?

Rhian (42:30):
Mine is Olive and June. It is a nail care brand. I'm really loving how they are doing their gifts, their holiday gifts. If you go on their website and you click shop gifts, it bundles things really intelligently. They even have a Merry Mani ornament because it's two kinds of nail polishes inside of this little ornament. I think that's smart, it's also $16 so it's accessibly priced as a stocking stuffer or for a friend that you medium like. Then there's cozy stickers, Hanukkah stickers, Christmas stickers, all sorts of stuff. Cozy sticker.

Kelly (43:19):
This is really cute.

Rhian (43:21):
It's really cute, right?

Kelly (43:22):
It's a really great example of a gift guide.

Rhian (43:24):
Yeah. I really like their... they've got an animation that I'm really digging that I'm sure Kelly would prefer for it to be in a video as opposed to a GIF, but besides that, I'm really happy with this site and how it looks.

Kelly (43:39):
I'm glad you recognized that I was not a fan of the GIF. Just for fun, I'm downloading the image to see the file size.

Rhian (43:49):
Oh my god. Okay, Kelly, what is-

Kelly (43:51):
Have you met me?

Rhian (43:52):
What is your store of the week?

Kelly (43:54):
So I'm cheating a little bit this week. Okay, that GIF is 1.1 megabytes. Way too big.

Kelly (43:59):
Okay, anyway, my store this week, I am cheating because my store is my store. I recently rebranded my merch store from KVLLY, which is impossible to pronounce any correct way because there was no true pronunciation, to Modern Geek. I relaunched it using the flex theme from out of the sandbox. I have been having a lot of fun just rebuilding the site.

Rhian (44:30):
Good.

Kelly (44:30):
So I have fun shirts and mugs, super developer, nerdy things like git history mugs and cheat sheets and stuff like that. I have masks that are also nerdy.

Rhian (44:43):
My god, that's so nerdy.

Kelly (44:44):
These are the things that I love to make, but yeah. That's my store, it's moderngeek.co because I could not get .com.

Rhian (44:52):
Oh, that'll happen.

Kelly (44:54):
This is 2020, yeah. All right, so that's it for this week. Thanks so much for tuning in. Thanks again to our sponsors for supporting this episode. We have a YouTube channel, come visit us at YouTube.com/commercetea. We post friendly Shopify store tear downs every Thursday. If you liked our super brief tear downs that we just did, talking through the mobile experience, we do more of that for 25 to 30 minutes per episode and drop all kinds of great nuggets. So please subscribe on YouTube as well. You can subscribe to this podcast on any of your favorite podcasting services. We post new episodes every Tuesday. So grab your mug and join us then. We'll see you next week.

Rhian (45:41):
Clocked In is a time clock for Shopify. With Clocked In, your team members can easily clock in and out of their shifts from anywhere. You can manage your team's hours as they work remotely, with an intuitive interface than can be used from desktop, tablet, or mobile. Check it out at ClockedIn.io, or in the Shopify app store.