By Author admin

Responsive Design vs. Mobile Site: Mobile Responsive Design Best Practices

If you are ready to create your first eCommerce website, one of the major decisions you need to make is what type of site you need. This generally means that you need to compare the benefits of a responsive design vs a mobile site. There are, however still many eCommerce companies that have two websites – one for desktops and one for mobile devices.

If this is your situation, there are some very good reasons why you should consider opting for one website that’s responsive, rather than maintaining two different sites. We’ll cover this topic first, then move onto discussing mobile first designs promoted by Google and why this approach is the best responsive design for mobile and tablets for 2020 and beyond. 

Last, we’ll take a look at some of the mobile responsive design best practices that will help to create better experiences for shoppers.

Responsive design vs mobile site – which is best?

There’s one big difference between a responsive website and a mobile website, and that’s the reason they were created. To put it simply, mobile websites were created specifically to be used on mobile phones. They were designed in response to the increase in smartphones that were being used to access the internet during the late 90s. 

Since then, we have seen a rapid increase in the number and types of mobile devices that are used to access the internet, to such an extent that a mobile website is no longer good enough. That’s because mobile websites are designed to open correctly on only one screen size. If the size of the screen changes, it can’t open correctly in the user’s browser. 

As you can imagine, opening correctly on only one screen size isn’t a viable option for most websites. So as the number and size of mobile screens continue to increase (smartphones, iPads, Android tablets, etc.,) a mobile website is now fairly redundant and if you continue to maintain it, you’ll be missing out on a lot of traffic.

Responsive design for mobile and tablets, also called a mobile responsive website, was developed to fill this gap. They are designed to open correctly on any device, regardless of screen size. They are designed with flexible images and fluid grids that size correctly to fill the screen, regardless of device. So they can be opened and viewed on iPads, smartphones and PCs; you can even resize the browser on your PC and watch as the screen becomes smaller or larger, whilst the contents alter so that they can still be viewed easily.

A well designed mobile responsive design should also be able to detect whether the user is using a touch device, and if so, enable swiping between columns. The benefits of a mobile responsive design that’s also adaptive (changing to suit the type of device not just the size of the screen) are obvious. For businesses, you design one website and it works seamlessly across all devices and for shoppers, they are assured a positive experience on every screen.

The rapid rise in mobile responsive websites was given an even bigger boost by Google who decided to prioritise the user experience (UX). Now that you have a better understanding of the responsive design vs a mobile site debate, let’s take a look at the reasons Google is promoting a mobile first approach to web development. 

Mobile-first – The best responsive design for mobile and tablets

In 2016, Google started experimenting with mobile-first indexing and made it the default for all new websites in July 2019. This means that Google now uses the mobile version of a webpage for ranking and indexing purposes, meaning that Google preferentially indexes the mobile version of your website.

So if you still have two websites, using separate URLs for mobile and desktop versions, Google displays the mobile version to mobile users and the desktop version to desktop users. However, it only indexes your mobile pages. Mobile-first isn’t something you can avoid, because Google wants to provide identical experiences to users of mobile devices and desktop computers. 

This means that content viewed on mobile devices and desktops have the same headings, same structured data and the same content. If you purposely upload less content to the mobile version of your webpages, Google will notice, and you’ll likely experience less traffic to this site. An important point to note, however is that mobile usability isn’t the same as mobile-first indexing. This means that if your site passes Google’s mobile usability test, it doesn’t mean that your pages will display correctly on mobile devices. 

So what you need is a mobile responsive design that changes the content on the screen based on the screen size and the device used, enhancing usability. Key features of a mobile responsive design include dynamic content that changes, condensed navigation, optimised images, correct padding and spacing, and a mobile OS. 

To ensure that users have a positive experience when searching the internet, Google has developed a number of mobile responsive design best practices. These best practices are used by developers to create a website that adheres to a mobile-first approach. This ensures that your customers can use any device to access your website and that Google can easily index and rank your site. 

6 Mobile responsive design best practices

The majority of Google’s best design practices are concerned with creating the same experience on both mobile devices and desktops. Below you will find some of these best practices that help to ensure your website offers the best experiences to your customers.

1. Keep important elements within reach

Most of us hold our mobile phones in one hand and use our thumb to navigate around a web page. This means that you need to keep important elements within reach of the customer’s thumb. These elements include your CTAs (call to actions) and other important links. For example, it’s easier to place the navigation bar at the bottom of the screen, as this makes it easier to reach with a thumb.

2. Ensure your main CTA is still visible

Most websites have their main CTA in the navigation bar. For example, ‘Learn More’, ‘Free Quote’, ‘Make an Appointment’, ‘Call Now’, ‘Request a Demo’, and so on. On a mobile phone however, this main CTA is often dropped from the main navigation bar, significantly reducing your conversions. This highlights the importance of designing for a mobile audience first and a desktop second

3. Prioritise layouts for mobile devices

The clear difference between a responsive design for mobile and tablets and a desktop computer is the space that’s available on the screen. On a desktop computer there’s plenty of space to lay out your page, showing different paragraphs, tables, sections and blocks. On a mobile phone however, all of these elements will be stacked on top of one another, creating a very long page. For web pages with few elements, this isn’t a big problem, but for pages with lots of elements, including elements that display new information when the curser is hovered over them, it’s a big problem. These pages will be extremely long, and the hover elements won’t work. This is why we use the mobile first approach and design a website with layouts that suit mobile devices, then adapt these designs for desktop computers.  

4. Use SVG not JPG or PNG images

Images on a responsive website need to be scalable, increasing and decreasing their size whilst keeping the image crisp and clear. That’s why you need to use SVG images (scalable vector graphics) and not JPG or PNG images on your mobile responsive website. SVG files load quickly, helping your site to load faster on a searcher’s browser. Whilst using SVG files is recommended, it’s only available for computer generated graphics, not normal photographs. You can get around this issue by providing your developer with all the resolutions used on mobile devices. Your developer can then ensure that any on-page photographs are exported at the correct resolution, depending on the device. It’s a bit more work initially but pays of in the end.

5. Leverage native hardware

Another of the mobile responsive design best practices concerns the mobile’s hardware. That’s because the hardware on mobile phones can be leveraged by mobile responsive websites to increase the usability of their sites, making it more user friendly and increasing UX. Examples include scanning credit cards, sharing photos on social media, two factor identification and checking inventories online. Your developer can code these types of functionality into your mobile responsive design, whilst making them unavailable on websites that open on PCs. The more user friendly your mobile responsive website, the better your rankings and the greater your traffic. 

6. Don’t use popups on mobile responsive websites

The problem with many popups on webpages is that they detract from the user experience, particularly on mobile web pages, where visitors are unable to read the content until they click on the popup. Google doesn’t like anything that reduces UX, so it can reduce the ranking of pages that use popups. Best practice is to disable popups on all mobile webpages, so if the content of the popup is important, we simply add it to a section of the page. 

For more information on mobile responsive designs for your ecommerce website, call Acid Green on 1300 139 658 or send us an email enquiry.

By Author admin

How To Improve Your Site Speed: The Ultimate Guide to Magento 2 Speed Optimisation

 

Magento

Whilst Magneto is one of the most popular enterprise-class eCommerce platforms used by one in four businesses, it still needs to be optimised for speed. Magneto 2 speed optimisation isn’t for the faint-hearted, but if you have the time, enthusiasm and the skills, you can do some of it yourself. On the other hand, it’s probably much easier to give this type of specialised job to a Magneto developer who has the experience to do a good job. 

Why is Magneto 2 speed optimisation so important?

As a website owner, you already know that speed is everything on the internet. Shoppers are impatient and don’t like slow opening web pages, causing them to quickly close their browser and move onto the next site on their list. This increases your bounce rates and decreases your sales, conversion rates and revenue. Slow speeds also loses you repeat customers, because they won’t bother returning if your site is too slow.

The best Magneto developers know that even Google also doesn’t like slow-moving websites. In fact, it likes fast-moving websites so much that it is preferentially crawling mobile sites, rather than desktop versions. Since this ‘mobile-first’ indexing focuses on how well your website renders on mobile devices, the lack of a fast mobile experience could negatively affect your rankings. So if your Eommerce store is taking too long to load, Google may well rank you lower than your competition – it’s that important!

So let’s take a look at how to increase a Magneto website’s speed, helping you to decrease your bounce rate and increase your rankings, traffic and sales. 

Tips on how to increase a Magneto website’s speed

1. Check your website’s speed

There’s no point in optimising your site’s speed if you don’t have a starting point. So it’s essential that you check the loading times, giving you a baseline for later comparisons. There are a number of ways you can do this, one of the most popular is to go to gtmetix.com, insert your website’s URL and it will give you your site’s loading speed. It also gives you a report that most people can’t understand however, but at least it gives you your site’s speed. Another option is to check your site’s TTFB (time to first byte), which is a measure of how long it takes for the first byte of your website to travel from the server to your browser; it should be less than 200ms. You will need to enter your URL into the Sucuri Loadtime Tester or use the Chrome Developer Console. One solution for increasing your site’s TTFB is to change to a faster server, but this can be a pricey option.

2. Is your site running in production mode?

 When you first load Magneto it runs in default mode, which lets you make simple changes to your store before it goes live. You might also want to use the developer mode to perform more in depth changes. The problem is that both of these modes slow your site’s loading times, so you need to move it into production mode.

You can change these modes using the Command Line Interface, as follows:

      • php bin/magento deploy:mode:

If the result is that you are not in production mode, type in these commands:

      • php bin/magento deploy:mode:set production

It might not sound like much, but it will help to significantly increase your site’s loading times.

3. Use caching tools to speed up loading times

Another Magneto 2 speed optimisation strategy is to use caching tools. The cache is where frequently used data is stored, so that it can retrieved quickly without having to search for the information each time a request is made to the server. Redis and Varnish are third party software caching tools that help to improve the performance of Magneto 2. Redis does this by retaining data in the RAM, whilst Varnish does the same, only better. Essentially, any data stored in RAM can be accessed and read quickly with minimal effort, which is why both Redis and Varnish increase your website’s performance.

The difference between these two caching tools is that when you use Varnish a request from a shopper’s browser doesn’t go to the server, instead it gets intercepted by Varnish which downloads the pages directly to the browser. This reduces the load on the web server and speeds up the whole process. Redis on the other hand, just speeds up the delivery of these web pages from the server. Whilst both of these caching tools significantly increase the performance of your website, Redis requires a lot of RAM, so it puts a drain on the server, which doesn’t happen with Varnish.

Varnish however, doesn’t work with HTTPS and SSL certificates, so you need to set up a proxy to decrypt the HTTPS traffic before it reaches Varnish. It’s possible for you to download and configure either one of these caching tools, but it’s very complicated.  It takes even the best Magneto developers time to optimise these caching tools properly, so you might need help with this step.

4. Remove unused extensions

The more extensions you use with Magneto 2, the lower your site’s performance. It might not be much of a hit, but it all adds up. Log into your Magneto server using SSH (a secure shell protocol that lets you connect to a server without sending your username or password over the network) and check out the modules folder for any extensions that aren’t being used. If you do this, be careful that you don’t delete common extensions that serve as the base for other extensions or you will lose everything. If you are in production mode, you can submit the following commands to disable and delete the extensions you don’t want to use anymore. 

        • bin/magento maintenance:enable
        • bin/magento module:disable TestExtension 
        • bin/magento setup:upgrade
        • bin/magento setup:di:compile
        • bin/magento setup:static-content:deploy en_US de_DE
        • bin/magento maintenance:disable
        • cd app/code/TestExtension/
        • rm -rf TestExtension

5. Flatten your category and product catalogues

In Magento 2, product attributes are stored across multiple database tables, so when a shopper wants to view a product, this information must be drawn from these tables. The more tables that need to be accessed for this information, the longer it takes and the poorer your site’s performance. The easy solution is to consolidate all this information, so that the process is speeded up. This is called flattening your catalogue and the more products on your site, the faster it will perform. To make this happen, all you need to do is to go to your catalogue (stores > configuration > catalogue) and click ‘yes’ in the box next to ‘Use Flat Catalogue Category’.

6. Speed up search results 

One of the easiest Magneto 2 speed optimisation strategies is to speed up your site’s search results. That’s because if you have an extensive product list, it can take too long for a shopper’s search results to display on your web page in their browser. This leads to a poor user experience and long loading times. The solution is to speed up this search process by using the Magneto 2 Elasticsearch extension. It’s a server based tool that is capable of full text searches at very high speeds. It’s also very scalable so it’s perfect for sites with growing product lists. It works well out of the box and supports multiple languages, as well as stop words and synonyms, and SKU codes. For super-fast indexing and search functionality, Elasticsearch is one of the best on the market. You can upload and configure this extension using the following commands:

      • elasticsearch:
      • type: elasticsearch:<version>
      • disk: 1024
      • relationships:
      • elasticsearch: “elasticsearch:elasticsearch”
      • $ git add -A && git commit -m “Enable Elasticsearch” && git push origin <branch-name>
      • $ bin/magento indexer:reindex catalogsearch_fulltext
      • $ bin/magento cache:clean

7. Update your old Magento theme

This might not be at the top of your list, but an old and outdated Magento theme can seriously slow down the performance of your site. Some of these older themes can use a lot of bandwidth, costing you more money for hosting compared with updated themes. If the developers of your old theme have stopped issuing updates, it’s time to refresh your website. A new lighter and more modern theme has the positive side effect of faster performance, so it’s a win-win situation. If you really want to stick with your older theme however, you can optimise the images to increase your site’s loading speeds. There are lots of free image optimisation tools available online, and this strategy will help speed up your site to some degree. There are other problems with old themes however, such as security issues, so why not hunt around for the best magneto developers in your area and have a conversation about updating your theme?  

Now you have some idea of how to increase a Magneto website’s speed, what are you waiting for? 

To chat to the best Magneto developers in Sydney about making your Magneto website lightning fast, call acidgreen on 1300 139 658 or send us an email enquiry today.

By Author admin

5 Reasons Why Your Ecommerce Conversion Rate Is Low And How To Improve It

Conversion rate optimisation With the global increase in online shopping, many businesses focus on increasing traffic to their websites. This is both admirable and necessary, but there comes a point when you need to turn your focus from traffic to conversion rates. After all, if your eCommerce conversion rate is low, more traffic isn’t the solution that’s going to fix the problem. 

You may have spent years building your own eCommerce site, but if you can’t convert visitors into paying customers, your efforts need to be redirected. With enough traffic to your site, conversion rates should be good enough to provide a decent profit, but what if this doesn’t happen? How do you improve your eCommerce conversion rate

It’s all about conversion rate optimization best practices, which we will cover in a moment. First, however, we will take a look at conversion rates, so you can decide whether your rate is low, really low or desperate! Next, we will show you how to calculate your conversion rate, so that you can gauge whether any changes you make to your website are actually working. We will then look at five best practices that can be used to increase your conversion rates, followed by a few eCommerce tools that will help you to understand why your conversion rates are so low.

What is a realistic eCommerce conversion rate?

Whilst any achieved goal can be considered a successful conversion (such as email subscriptions, downloaded eBooks or completed surveys), sales are the conversions that most interest eCommerce operators. A realistic conversion rate is around 2%, although in 2015 it was reported that the conversion rate for Amazon Prime members was an amazing 74%! Whilst you might try to aim for the same conversion rates as Amazon, your best strategy is to calculate your website’s conversion rate for the last 12 months and then aim to beat it this year. 

How to calculate your website’s eCommerce conversion rate

The way to calculate your site’s conversion rate is to divide the total number of transactions by the total number of unique visitors to your store, usually in 24 hours. If you want to calculate other conversion rates, for example the rates for email subscriptions, you just substitute the appropriate numbers into the equation. 

You can also calculate conversion rates for different locations and demographics if that’s something that’s important to your marketing strategy. This approach is useful if you want to identify which segments are contributing to your website’s overall conversion rate. For example, you can analyse the conversion rates of first time visitors  compared to repeat visitors, desktops vs mobile phones vs iPads, and organic search vs paid search vs social media. You can also compare conversion rates between product categories, between seasons and for different promotions. It’s important to remember however, that conversion rates need to be compared over time, as one single point in time doesn’t give you enough information for concrete conclusions. Monthly or weekly comparisons are common, but your conversion rate for the last 12 months will give you a good overview of your website’s current ability to convert shoppers. 

If you are lucky, your conversion rates have been increasing over time, but this doesn’t generally happen naturally. More likely, your conversion rates have been static or decreasing over time. So why is this happening and how can you improve your eCommerce conversion rate – whether for your whole website or for a specific product, category or demographic segment?

5 Conversion rate optimization best practices

There are many strategies to increase your conversion rate, but to help make your life easier, here are five best practice options that will provide the biggest impact on your conversion rates.

Streamline online payments 

When a visitor has made the decision to purchase a product from your website, you need to make the transaction process as easy and as short as possible. So give them plenty of options, including PayPal, Google Pay and Apple Pay, because these payments take much less time to complete than using a credit card. PayPal is a very good option because they have shortened their payment process even further, making it a one-click process. Payments made using cryptocurrency is also another way to improve your ecommerce conversion rate. Essentially, the more payment options and the fewer the number of steps the better, particularly where purchases are made using mobile phones. 

Personalise shopping experiences using new technology

Customers love new technology and they want a personalised shopping experience, so why not give them what they want? A great way to increase online conversions is to use virtual reality where consumers can examine the products before they buy. The novelty of this immersive approach to a consumer’s shopping experience combined with its practicality (because shoppers can’t touch and feel products sold online) offers a high-tech strategy for increasing conversions.  Another of the conversion rate optimization best practices is to use AI (artificial intelligence) and machine learning to personalise the customer experience. For example, a contextually relevant site search powered by an AI can provide customers with relevant query suggestions and popular search results on your website. Delivering custom recommendations based on a shopper’s search query can have a very positive impact on your conversion rates. Machine learning can even use predictive algorithms to learn which headings and product page layouts convert best! 

Set up voice commerce  

Voice assistants and smart speakers have an increasing market penetration with many consumers using them for online purchases. If you get this right, you can end up with more sales, conversions and revenue. Voice commerce uses AVR (automatic voice recognition) and NLU (natural language understanding) to interpret a spoken language, helping shoppers to find specific products online. There’s even such a thing as voice search optimisation, linking voice searches with SEO. It’s estimated that nearly 50% of all searches will soon use voice search and with the popularity of Amazon’s Alexa, it’s easy to see how this can happen. In fact Google and Walmart have combined their efforts, so that Google Home Users can now search the Walmart catalogue. Voice ecommerce has a huge range of applications with the potential to significantly increase online your site’s conversions.

Increase trust with user-generated content 

Trust is an important factor for increasing your eCommerce conversion rate and customers trust other customers. They actively search for online reviews and the opinions of other customers. This means that user-generated content, such as online reviews on your product pages, are worth their weight in gold. Apart from simply including a list of reviews at the bottom of each product page, why not include a visual bar graph of customer’s star ratings? You can also include user-generated videos or photos that focus on unpacking or using your products. Don’t forget to add social proof to build trust and boost conversions. This includes social media links, share buttons and logos from other companies that use your products.

Improve product pages

Without a doubt, the product page is where you make or break a sale. There are so many product pages online without any form of product description – just an image, price and size or colour options. This is the page where you need to engage shoppers and persuade them that they need to buy your product. You need to help shoppers imagine how they will feel when they hold your product in their hand and how happy they will be with their purchase. So instead of a bare page or a dry description, write compelling product descriptions with prominent CTAs. 

Ecommerce tools to analyse your conversion rates

Now you know five of the conversion rate optimization best practices that will help to increase your online sales, it’s time to look at some of the tools that can help you understand why your conversion rates are so low. These tools help you to understand how customers interact with your website and how you can use this information to boost your conversion rates. Here are two that are easy to use.

Google Analytics: Most websites use Google Analytics, basically because it’s free. However, most people don’t make the best use this platform, even though it offers a huge amount of data that can help increase your conversions. Information about which devices shoppers’ use to reach your website, how long they remain on different pages, their location, and whether they are new or repeat visitors is all available in Google Analytics. It will even calculate conversion rates for set goals.

Google Analytics View

Mixpanel: The Mixpanel package helps you to convert, engage and retain online shoppers and the starter package is free. It’s used by Uber, Expedia, Shutterfly, Walmart and Twitter, and is designed to help you improve customer experiences on your website. It does this by collecting data, identifying trends, understanding these trends, setting goals and helping you to take action to achieve these goals (increased conversions). In fact, it’s so popular that 50% of Fortune 100 eCommerce sites use Mixpanel, resulting in a 30% increased engagement rate and a 24% increase in user retention. It can help you identify the point of engagement when conversions increase, as well as help you increase shopper loyalty, improve conversions, and learn how shoppers interact with your website.

If you want to improve your ecommerce conversion rate, call acidgreen on 1300 139 658 or send us an email enquiry.