Mobile Optimization For CRO
Table of Contents
Mobile optimization is not just site speed #
We talked about site speed in our article about site speed in the series for CRO; there we discussed how important it is to optimize site speed for mobile, how we compete with native mobile apps that work very fast, and how we don't want to be seen as a turtle compared to fast native apps with fast content. Sometimes there is an impression that mobile optimization is just about site speed, but in fact, site speed is just one of the components of mobile optimization - yes, one of the biggest ones, but not the only one.
Mobile optimization for the layout #
Since websites became responsive and adaptive, big thanks to ... for introducing us to responsive web, the mobile layout has evolved many times, new trends have come in and been forgotten, mobile screens have become bigger, so layout and breakpoints have changed.
Before, we would optimize websites down to 320px, for iPhone 5, iPhone 5s and iPhone SE. Now we don't care much about it and usually support smallest screen sizes of 375px. This might seem like a small detail, but it impacts the whole layout for mobile. Ask any front-end developer about their biggest trauma during development, and they'll assure you it was optimizing the webpage layout for the smallest mobile device.
Stacking blocks vertically on mobile #
At the very beginning of the era of mobile layouts, we used to just stack blocks on top of each other for mobile. If you did not care much about performance, you might have used JavaScript libraries for horizontal carousels and sliders, but at that time the touch event was not working properly, so developers had to use hacky tricks to fix the mobile touch experience or just use vertical stacking.
Horizontal layout and scroll snap #
When CSS introduced scroll snap and smooth scroll properties, it became much easier to deal with very tall content on mobile; developers could easily create nice-looking and interactive blocks for mobile layout without using JS libraries and without impacting site speed and performance.
The picture is pretty sad here, though CSS scroll/sliders are well supported, developers still use JavaScript just because they are not keeping their skills up to date.
In 2024, it is possible to have a very well mobile-optimized website without using a single line of JavaScript, so you can run an audit of your website using our website diagnostics service to identify the weak points of your website and update it. You should have optimized your ecommerce website already yesterday. ahaha )))
Trust but verify - even if you're very happy with your current CRO agency or in-house developers, it's good practice sometimes to have a third-party audit, especially since we're not asking for any access to data or dashboard login.
Mobile optimization and mobile screens #
The most important screen size is the boss's phone screen size. ))) The website should look fine on the boss's phone first. haaha, just kidding, but that's how it sometimes happens - the website should look fine at least there.
Okay, back to our serious business - we are a serious resource, right? Everything should be in academic style and vibe.
Back when mobile phones had standard sizes, web agencies were dealing with those sizes only. Old guys will even remember that we had a list of those screen sizes, and we were optimizing the websites for those screen sizes only.
Later, as expected, mobile phones became more and more random, with weird aspect ratios and sizes - tall, short, wide.
Now we have a new trend: foldable phones - this is already one big different topic. The foldable phones are a reincarnation of tablet sizes. We thought we got rid of them or at least didn't care that much, but here they are - they're back.
So, when all those kinds of screens were introduced, we threw out our list of most common mobile screen sizes and just made the websites fully responsive, even for smartwatches.
If you're running an ecommerce website, make sure customers can buy a smartwatch on the screen of a microwave ))) in other words, be ready for customers to visit your website on very weird size screens.
Mobile optimization and SEO ranking #
Oh guys, this is the thing that not everyone is seeing and not everyone is ready for. You might be interested in how this is that important for SEO. Well well, guys - mobile optimization is now one of the MAIN factors for Google when ranking websites. It's understandable - when content creation became almost zero cost, Google needs something to filter bad boys from good boys. )))
Even before it was important, but now it has become crucial. Again, we recommend checking your site speed and optimizing it ASAP. We're not trying to sell you something by triggering fear; it is happening now - we're in the same boat. You think agencies don't have competitors? Of course we do, but here's the thing: check out mobile optimization and site speed - we are the fastest web agency website in the world. Find a faster web agency website and we will give you 1 year of maintenance for free.
We've been doing web since the DIV HTML element wasn't there. We're not joking here, guys - we know the web very well. For us, web development doesn't start with NextJS. Okay, we should stay humble. But sometimes we can show off, can't we?
Anyway, guys, if you want to improve your CRO long term, for coming months, years and even decades, you need to care about organic traffic and ranking. Organic traffic is like a gold mine - if your ecommerce is ranking well in organic traffic, you can consider your business 50% established.
Ecommerce and mobile optimization #
Well, it would be weird if cro.media talked about something without mentioning eCommerce - it is our bread and water. So how are ecommerce and mobile optimization related?
Let's just list all the new things we can do now through mobile phones:
- AR - see the product in our room through mobile, not widely used but it has great potential. Is your website ready for this?
- Try on directly on mobile - now when we browse ecommerce websites, especially for face-related products, we can use try-it-out features and technologies. Using phone selfie cameras, you can preview how sunglasses sit on you, how makeup products will work, and how hats will sit on you.
All these technologies and features will improve your CRO and take your ecommerce website to the next level.
Tons of jewelry websites exist, but only a few are using live try-on technologies. And they're going to be vocal about that, and they're not going to share about it - they do it, and they keep silent about it.
If you want to check what opportunities you're missing, what features and improvements you could apply to your store, use our Conversion Rate Optimization service to see all the missing opportunities.
Please, don't use crappy Shopify apps for live try-on - those ones are so useless that they make things worse.
Graphic elements on mobile, how to optimize #
Some old guys still like text-rich websites; honestly, some guys in our office don't like visually rich websites.
We understand it - poor guys are getting old and grumpy... ))) okay, just kidding, I can say it, I am one of those old grumpy guys.
But let's admit, for ecommerce the visuals and graphics are essential. You need to show your product from the best perspective. The internet is now moving - even Instagram, which was a static image resource, is now moving. Who checks Instagram now just for static images? It's all about short videos, moving things.
Some guys made a whole business on moving videos integrating them into ecommerce - in fact, they injected TikTok or Instagram reels into stores.
But it's unavoidable - you're checking the product and you want to see it as much as possible.
Check Apple's website when they release a new product - the best interactive visuals ever, they're very good at it.
So what stops you from doing the same thing? Well, let me answer for you - good designers, good developers... okay, extra good developers. Implementing animation which won't impact site speed is not a joke.
You can't just take a GIF or video and put it on the website.
You can't just take JSON/SVG animation and put it on the website - you'll just make it an extra slow, crappy website.
Guys, we don't want to make it sound complicated, but optimized graphics are not just about installing some junky image optimizer and messing up all the images with cheap re-rendering.
Graphic optimization is a very complex process of understanding methods and choosing the right method for certain graphics.
Is it going to be an animated SVG, or better to use old-school GIF, or maybe looped video? Maybe we can do it with Lottie JSON combined with SVG, or just WebP? Which one is better? Let the professionals who have been doing this for decades decide and give you advice. There are no compromises here - this is not about CSS or semantic HTML. One incorrectly used visual can make the entire webpage useless.
We totally recommend using our Site Speed Audit service to find all the issues and get exact steps on how to fix them.
Our advice is simpler: if you're not sure whether you should use graphics for a certain block on your website, then don't use it. Stick with text until you have someone next to you who can guide you.
Yes, Shopify optimizes images, but it's not a magic trick. There are many factors - Shopify optimizes the images, but what size image is loaded in your website front-end? What size image do you request from the server? All those are in the theme code. Shopify just optimizes the initial uploaded file; the rest is controlled in the code.
So what, what to do now with my website mobile optimization? #
Sorry if we have frustrated you, but you needed to face reality - mobile optimization is extremely important. It is very important for both end customers and search engines. In 2024, having a non-mobile-optimized website is criminal.
Just optimize your website for mobile and it will automatically improve CRO.
As simple as it is, you don't even need A/B testing for this - any mobile optimization is just a direct push, 100% winner.