By Author admin

Shopify, Responsive Images and Why They’re Vital To Ecommerce

You’ve heard it before, a picture is worth a thousand words.

When it comes to designing your website and your online experience, pictures can help you do exactly that; to express yourself without the need of so many *thousand* words.

In 2018, we’re continuing to see an increase in rich content on SEO-conscious websites. However, surprisingly, there are still a lot of ecommerce businesses who choose to compromise on site design in order to increase loadability.

responsive images

I can tell you now, images are just as essential to a website page as any other element. Including loadability.

Now so, more than ever before, it’s become more important to ensure your page and the elements on it look just as good on a customer’s small handheld device as it does on a desktop. This means thinking about how your images translate to mobile web browsers.

We’ve all experienced visiting an ecommerce store on our mobile, only to find the layout, pictures or information just don’t fit right, making the page impossible to navigate.

We all remember these experiences well, and not fondly. Now think… did you purchase anything on that site? Is your answer no?

Neither did anyone else.

When Akamai asked consumers about the last time they abandoned an online shopping cart, 33% of online shoppers reported it was because the page took too long to load; this is the third most common reason shoppers will abandon carts on ecommerce stores.

Keeping this in mind, there has never been a better time to consider using responsive images to help enhance your ecommerce store and improve your overall user experience.

What Are Responsive Images?

Responsive images and responsive web design are exactly as they sound. Elements that respond and fit naturally to the device your customers are viewing your site on. Whether it’s mobile, desktop or tablet.

Responsive images are natively supported by modern browsers using srcset. Currently 90.83% of all browsers in Australia and 87.74% Globally support srcset capabilities. This is a perfect and easy way to ensure all your carefully thought out content can be accessed by any user, whatever the device, at any time.

responsive images

The demand and development of responsive images is largely due to the increase in internet accessibility, through the help of smartphones and the progressively rich content of websites.. Responsive images means there is no need for separate HTML for your mobile and desktop websites i.e. the same site that works on your customer’s desktop is the same on that works on their mobile phone.

Designing responsive content also ensures as technology progresses and screen sizes change, your content is able to adapt and stay relevant. This is an integral factor for any front end development; gone are the days of single device web browsing.

A 2016 Oztam-Nielsen study found that Australian households had on average 6.4 internet connect devices. This magnifies how important it is that your content is compatible.

As the state of technology is constantly evolving and changing, you need to ensure your website is able to keep up with each and every change.

How Responsive Images Can Improve UX

The introduction of responsive images means you are not only improving the look of your pages on smaller devices, you are also able to reduce the time customers wait for pages to load as they browse your site; The smaller the screen, the less content the browser needs to load – reducing load times is that simple.

This may not seem like such a big deal, but from a customer’s perspective, load speeds and wait times are one of the main concerns expressed by online shoppers and online users alike. Even Google saw a 20% decrease in traffic as a result of 1 second increases to page load times… If the load speed of web pages is important enough for Google to uphold, it should be a priority for you, too.

Responsive images are a breakthrough in front end development as they allow websites to improve their user experience without compromising the usability or overall layout of the website itself.

The real win for front-end development in terms of responsive images comes from the ability to maintain your images across all platforms. This is an especially important component of multi-device user experience as the site your customers are able to access on their desktop is the same website your customers are able to access on their mobile devices or tablets.

responsive images

Websites that translate across all platforms can help build brand credibility and trust in the customers mind, which can ultimately lead to a higher number of conversions.

Why Responsive Images Are Vital to Ecommerce

We briefly touched on this before, but responsive images and web design are just as important to the overall layout of your page as the actual content. After all, what’s the point of investing hours designing a knockout page if it can’t be viewed on all your customers devices.

There are around 19.4 million smartphone users in Australia at the moment and these numbers are only growing. With so many Australians spending a large amount of time accessing the internet from their smartphones, you can bet they’re also doing their online shopping from the same devices. According to Criteo, in 2016, 48% of all Ecommerce transactions in Australia were completed on a smartphone. This gives us an indication that customers are replacing their ecommerce transactions on their desktops with more portable devices like their smartphones.

Regardless of how your customers are viewing your content, research overwhelmingly shows us they want to browse a site that loads promptly. This can be a challenge when images are a key component of your online store. Slow load times also resulted in a huge 75% of customers saying they would never visit a site again if it took too long to load. For e-commerce stores responses like this to slow loading content can be detrimental.

Criteo’s report from 2016 found that 37% of desktop customers viewed the same retailer’s site on one other device before securing their purchase. This shows us exactly how customers of ecommerce stores are shopping and really emphasises a brands need to have a consistent layout; Combining this information with the implementation of responsive images will really help ensure you’re getting conversions by limiting the load speeds of your e-commerce store. As little as a 1 second delay in page load times can result in a 7% decrease in conversions. While this doesn’t seem significant, for an ecommerce store generating $100,000 in sales daily a 7% decrease in conversions translates to $2.5 million worth of lost revenue a year, all because of slower load speeds.

Responsive images minimise the load times of your website and not only enhance the user experience, but could also play an important role in your SERP ranking. Although there are 200 ranking factors that google takes into account to calculate your all important ranking, the page loading speed is one of them. Optimising the time it takes your page to load could ultimately increase your rankings and help bump you up to the top of the search results page.

There’s no doubt that responsive images can help minimise the weight and overall wait times customers will experience on your website, but these factors can also improve overall user experience as well as the ever significant conversions.

Shopify and Responsive Images

With the introduction of new image properties late last year, Shopify now allows theme developers to have greater control over the responsive properties of their images. These advances to shopify’s capabilities now affords theme developers the opportunity to create and utilise different rules surrounding image attributes such as image.height, image.width and image.aspect_ratio.according to each individual image object. This allows you to implement responsive images on your shopify page, easily and seamlessly.

This feature can be utilised through the regular browser image attribute srcset in your HTML code, allowing you to load a particular sized images determined by the size of the screen the customer is using to view the content.

The srcset attribute gives you the ability to define a set of images, the browser then intuitively chooses the best fit for the device, replacing shopify’s previous solution to the picture sizing, image filter. The srcset attribute gives users the ability to set numeric parameters and dimensions in pixels, specified by width and height. By specifying a set of numeric parameters on custom themes, shopify gives you the ability to create a more responsive system, depending on how you think the image might appear on different sized screens. While there’s no need to alter all your previous image attributes under the image filter system just yet, images with parameters such as “large” or “grande” are still valid on existing custom themes but are slowly being phased out of the shopify platform.

It may be something you never really considered before, or something you had been putting off, but having responsive images on your ecommerce page can have a far greater impact than just making your page look good regardless of the screen size. Their impact comes in the form of reaching and winning new customers, gaining conversions through reducing load times and ensuring customer retention.

To update your ecommerce store to a more responsive, capable page, contact acidgreen your certified Shopify Partners. As we move toward a more fluid web experience between different devices, responsive images will help ensure your brand is not left behind.

acidgreen is an award winning e-commerce agency specialising in Magento, Shopify Plus and digital marketing with over 15 years of industry experience. Our certified developers and digital marketers are highly qualified to create aesthetically pleasing Magento and Shopify Plus websites that generate the highest amount of conversions and provide the best ROI. Be sure to follow us on LinkedIn, Facebook and Twitter, or give us a call to learn more about our services.

 

 

By Author admin

Responsive Magento website designs: Why is it necessary?

As a retailer, the success of your business relies on how well your audience accepts your products you put on display. If you take it one step further as a Magento e-Commerce retailer, it also relies on how well you can reach your audience on a digital level. It’s foolish behaviour to not be constantly keeping an eye on the technology trends your audience is experience to adapt quickly. Therefore it’s imperative that your online stores are optimised as responsive Magento website.

responsive magento website design

For a website to be responsive means that the interface can shapeshift it’s design to cater for whatever screen size / design the website is being browsed on. There are many reasons why this is a crucial and necessary feature to have:

Reasons for a responsive Magento website

1. Mobile devices are taking over: The number of visitors viewing websites on varying devices compared to desktop computers is growing. A tremendous 40 – 50% of online traffic is mobile, and as this continued to skyrocket, it’s a lot more important for online retailers to design a store that works well on all mobile devices.

2. Social is mobile: According to a study from ComScore, 55% of social media consumption happens on a mobile device. Therefore people are more likely to view and share content if it’s mobile friendly – if a website isn’t functioning or optimised for a smaller screen, users will simply get frustrated and leave. And since high bounce rates lead to low conversion rates, it’ll reflect poorly on your business.

3. It’s a no from Google: If the above two points weren’t enough to convince you,  Google simply won’t allow it. It’s mobile algorithms, also known as Google Mobilegeddon, can sense that an unresponsive site will lead to unhappy users who will go elsewhere to browse. Therefore, there’s no point displaying a website that will ultimately have a high bounce rate, when there are other Magento responsive websites that are more deserving of the spot.

How to optimise for a responsive Magento website:

In a Magento-sponsored Internet Retailer webinar, guest speaker Forrester Research, Inc. Analyst Mark Grannan stressed that aligning business and development goals will allow you to effectively build your responsive site. Taking time to analyse mobile traffic patterns, device priority lists and review your information and content will have a positive impact on the end design. Consider the following about your customers:

  • What percentage of your site traffic comes through mobile devices? If yours is exceeding 20 – 30% then it’s a good indication to consider optimising for a responsive Magento website.
  • How are your customers accessing your site? Studies suggest trends matter less than the specifics of your site and your customer
  • What devices/browsers does your customer population favour? Keep in mind that responsive Magento website designs are implemented using techniques that are incompatible with older browsers.

going responsive

Going responsive: Tips for a successful creation

Mark Grannan expressed one challenge of a responsive web design is that its single codebase can be very large and slow to load. For an optimal mobile experience, Grannan shared the following advice:

  • Load priority content first and late load (“lazy load”) content below it to create the perception of faster performance, rather than waiting to display content after everything has finished loading.
  • Use server-side technology to deliver or render images appropriately sized for the device.
  • Code your site to reduce the number of round trips back to the server to reduce latency
  • Consider using third party acceleration providers, like CDNs, to optimize performance through a range of technologies and local content caching.

Acidgreen is an award winning e-commerce Magento Australia company with over 15 years of  industry experience. Our certified magento developers and designers are highly qualified to create aesthetically pleasing responsive magento websites that generate the highest amount of conversions and provide the best ROI. Look no further and get started with Acidgreen!  

By Author admin

Ecommerce Magento tips: How to increase your Magento online store sales

According to Magento, Alexa rankings have suggested that 26% of the world’s top 1mil sites use Ecommerce Magento as their CMS platform for ecommerce needs. However the main problem has shifted from how to attract customers – it’s getting them to stay. Unlike person-to-person interaction, there’s no one to use the power of persuasion and body language to give you a moment of their time and listen to the new stock, the latest range on the market or attempt to make a compelling sales pitch. In order to help you out, here are a few tips to generate a booming business and convert the skeptics into customers who can’t get enough:

Magento online store

Create a simplified check out process

At times, customers abandon their shopping carts because the check out process is too complicated, something which does not accommodate someone who is constantly on the move. Ecommerce Magento‘s one-stop check out extension minimises the information needed from customers and prioritises the transaction instead, thus helping reduce the number of abandonment issues and increases the buyer success rate.

Have an online wishlist

This caters for people who do not have the funds but are more than interested in making a transaction at a later date. It is crucial to pay attention to these people. Not only does it alert the store to what kind of products are popular (and to make sure there is stock available), but it also opens up a gateway to boost sales: by offering a “Share to Social Media” button that shares the wishlist with the customer’s friends and family. This is particularly beneficial for holiday seasons, anniversaries and birthdays, much like your age-old registry, but online!

Multi-lingual and Geo-targeting

It’s important to understand that international customers is part of your buyer pool and abandoning their needs is a dangerous choice as you could potentially lose a huge percentage of sales. It is thus advisable that your store caters for the dialect of the geographic region they are browsing from by setting up multiple sites with their currency and language already set up. Ecommerce Magento can geographically pin them based on their internet addresses and redirect them to the appropriate site automatically.

Responsive design

With smartphones becoming more powerful with each update, you can do almost anything on them: which includes shopping. Customers especially on the go will want to access your website from a variety of devices and your store should therefore be correctly displayed according to the parameters of the screen. The Magento online store features a responsive and scalable design that can adapt to any device the store is being accessed from, which keeps your smooth customer experience happening regardless of where they’re shopping from and prevents them from exiting the website out of browsing difficulty. Lets face it – no one wants to keep zooming in every time the browser refreshes.

Keep it Simple

Your number one goal is to make sure the customer leaves with a transaction, so make sure that is also your website’s primary goal. Try and avoid huge fancy layouts and keep your priority on displaying your products as neatly as possible. Magento offers an array of customisable skins to cater to your company’s image and vision.

For additional information on how to attract more traffic and revenue to your website, feel free to check out our post on some SEO Magento tips which can help increase your company profit.

Acidgreen is an award winning magento company  and one of the first official Magento Partners with proven experience in successfully delivering magento development projects for top brands in Australia. With over 15 years e-commerce experience,  our certified magento developers are highly qualified to create web stores that generate the highest amount of conversions and provide the best ROI. For more information on our magento web development services and how to get started with Acidgreen, contact us today.