Oracle Commerce Cloud
supports both responsive and adaptive approaches out of the box and provides a variety of ways you can customize your website to optimize it for mobile traffic, improve mobile conversions, and provide a better experience for mobile users.
Here are five of our top tips for optimizing mobile on Oracle Commerce Cloud:
1. Optimize the images on your site.
In addition to making sure image sizes are the right size for the location and compressed as much as possible while being the right resolution, we recommend taking advantage of our ccResizeImage custom binding which has been updated with HTML5 responsive support using the srcset and sizes attributes and provides performance improvements. The Hero, Product Listing, and Product Details widgets have all been updated to use this custom binding in our latest release.
Images can now be configured to be more responsive so that HTML5 compliant browsers automatically download the right image based on the width available. As a result, even when viewing images on devices which have higher pixel density, the browser downloads a higher resolution image which fits the screen resolution. In addition, when changing orientation from portrait to landscape mode, the browser will download a new image which fits the newly available width. And it also saves bandwidth as the browser knows the viewport and downloads the appropriate image. To enable this feature, set the property “isSrcSetEnabled” to “true” within ccResizeImage binding.
This is particularly useful for key pages, like the homepage, listing page, and product detail page, which often convert shoppers differently based on device. For example, you might find that on desktop, your homepage performs well with more widgets, carousels, and content, but on a mobile device, that same page takes too long to load and requires too much scrolling, resulting in increased abandonment. In this case, you’d want to consider having a different, mobile-specific homepage based on viewport and reducing content, for example, so that it fits a one or two scroll limit. In addition, for smaller viewport layouts in particular, we recommend not just putting fewer widgets, but investing in building out mobile-optimized widgets as well.
3. Utilize A/B testing.
Oracle Commerce Cloud comes with Experiments, our A/B testing tool. If you’re not sure what will work better for different situations or for different shoppers, you can test different layouts for different viewports by audience segment. For example, you could test a different homepage for the “small” viewport targeted towards female shoppers if you’re seeing in your analytics that female shoppers make up a large percentage of mobile traffic, but aren’t converting well. (If you’re on a version earlier than 17.2.1 and don’t have Experiments enabled, please contact your CSM.)
4. Simplify and do regular clean-up. Make sure your widgets do not include unwanted hidden elements and that widgets such as global header and footer widgets are simplified, consistent, and display properly in mobile.
5. Include mobile in your overall design, development, and QA efforts. Mobile is no longer an afterthought, so as you design and develop new features, site, and email improvements, it’s important to consider mobile display and presentation in those requirements, as well as make sure they are included in your testing efforts, so you’re sure they render properly across devices.
We hope you’ll take advantage of these tips! If you are a current Oracle Commerce Cloud customer, please feel free to connect with us in our online community, Customer Connect
, which includes best practices, tips, detailed release information, FAQs, videos, and more, including a technical how-to on image resizing
(login required) and information on our latest release, 17.3.