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

Acidgreen launches one of Australia’s first Magento 2 sites

Acidgreen, a multi award winning digital agency, is proud to announce the launch of one of Australia’s first Magento 2 sites, featuring boutique store Classic Spirit.

Classic Spirit Magento 2

Located in Mosman, Classic Spirit aims to mix travel and style which is perfect for those wanting to remain fashionable on the move. They provide the ultimate curation in women’s clothing, fashion and accessories, allowing their customers to discover the ultimate travel capsule closet with timeless pieces that can be used in an array of looks.

Customer experience is a serious priority to Classic Spirit and valued the personal care that was displayed with anyone who walked through the door. The team behind the brand needed a website that would reflect this experience online.

ClassicSpirit_NewArrivals

 

In order to make this a reality, a seamless and dynamic website using the e-commerce platform giant was created, making it one of the first Magento 2 sites in Australia to exist.

Magento has been highly regarded as the top choice for medium to large company retail sites as it offers a customisable, scalable and streamlined platform for their users to enjoy. With 14% of the online retailer market using Magento, experts expect the number of Magento 2 stores to grow rapidly within the next year as Magento 1 is slowly fazed out.

Classic Spirit Magento 2

Classic Spirit becomes one of Australia's first Magento 2 sites

Having Classic Spirit representing Magento 2 sites will provide them with first class features to help them with customer retention and minimise the chances of cart abandonment, thus improving sales and success.

Acidgreen is an award winning Magento ecommerce web design development company with over 15 years of  web design experience. Our certified magento developers and designers are highly qualified to create aesthetically pleasing magento websites – that generate the highest amount of conversions and provide the best ROI. For more information on Magento 2 and how to get started with Acidgreen’s  web development services, contact us today.

By Author admin Tags , , , , , ,

Magento store development tips: Things to avoid

Magento. One of the world’s leading digital commerce platforms. Used by 13% of the industry, Magento store development provides a flexible framework for maximum control. From the singular dashboard, custom themes and store designs, all the way through the inventory management, the best of the best stops here.

However, using Magento is only half of the equation. The platform you use is irrelevant if it’s not properly utilised for customers and increasing overall brand value. As the site owner or developer, it’s your responsibility to avoid common mistakes during the Magento store development process. If not designed properly, you run the risk of affecting conversion rates and failing to deliver a premium digital shopping experience for your customers.

Below are six common mistakes that you could unknowingly make when building a website:

Magento Store Development: What to Avoid

magento store development

1. Using default settings

Understandably it’s tempting. If it fits the bill, why bother tweaking something that doesn’t need a tweak? However using these settings will damage your search engine rankings and thus your click-through-rate. Avoiding the following areas will minimise this risk:

Default homepage:

Have you ever come across a successful Ecommerce store with ‘Home’ as the title of the homepage? Maybe back in the old days, but Google’s updated algorithm now requires a primary keyword followed by the secondary keyword for the home page title.

Solution: Use the name of your brand as your landing page title.

Default descriptions:

One of the fastest way to kill your customer’s experience and search engine rank. Physical store fronts allow products to be personally examined. Digital stores shoppers only rely on photos and information to be convinced that they should make a purchase. The dodgier the description, the less likely a transaction will occur. In addition, you should also avoid using the original manufacturer’s description. Google can easily identify duplicates and decrease the search engine rank of your store.

Solution: write a fresh and SEO-friendly content for every product.

Default Magento XML sitemap:

Sitemaps help you increase the ranking of your store on Google, Yahoo and Bing. However most store owners forget to add sitemaps during the Magento web development process, or refresh the setting whilst putting the site on live.

Solution: Create or upload a new site map or use premium Magento Sitemap extensions.

2. Poor theme choice

Magento store development websites offers an extensive theme choice for your online store front. However during the Magento web development process, the following errors need to be avoided:

  • Basing their decision on personal choice rather than customer suitability
  • Choosing heavy themes that slows down responsiveness of the site after adding new products or extensions.

Solution: Choose simple and user-friendly themes that offers unlimited customization option and doesn’t reduce loading speed (20 microseconds).

3.  Layered navigation issues

In this type of navigation, different categories are organised on one page. However due to the design of this, users can face overlapped categories, obscured images and slow loading speed. These obstacles can be enough to immediately leave the site and thus decrease your sales.

Solution: Make use of Ajax navigation for easy product filtering and don’t allow search engine crawlers to crawl via your pages.

4. Shared resources and server

Technically Magento powered stores can be shared with other stores and websites on the server, which is something that must be avoided if you don’t want to taint your online reputation. It reduces the website loading speed and makes the website vulnerable to hackers, exposing your customer’s sensitive information and affecting your Magento store sales.

Solution: Configure your store to another server of your choice. MySQL and PHP5 are highly recommended.

5. Unresponsive Site

The number of people using mobile now outnumbers those on desktops and this gap is only set to increase over the next few years. A responsive website automatically adjusts itself according to screen size without compromising content and accessibility. This is a powerful and necessary feature to have if you don’t want to see your sales drop to oceans bottom. Users are quick to exit sites that haven’t been optimised for mobile-friendly access – and given the mobile usage rate, that’s too many customers you’re potentially losing.

Solution: Ensure your website is responsive and scalable to maximize user-friendliness.

6. Underestimating SEO

Many people believe that the era of SEO is just about over and it’s not a bad assumption to make. Many online retailers turning to celebrity endorsements or social media influencers to make themselves known to the public and in some ways, it’s more effective than how your website ranks on search engines. However it’s a poor move if it’s the only brand marketing tactic you rely on. If your chosen public figure does not have the right audience mix, you’ll find it’s ineffective and a waste of money. Instead, focus on who you want to attract and incorporate keyword research in different hot spots of your website. Product titles, descriptions and even blog posts will unlock the door to skyrocketing sales.

Solution: Create various SEO-friendly blog posts and utilise social media sharing for maximum audience reach.

As you can see, it is not essential to develop your Magento store from scratch to improve sales. A few minor modifications can significantly boost your sales and audience reach to surprising numbers. However as effective as these tips are, it’s only the start. It’s important to still be updated in the latest audience trends and continuously update your website strategies to improve your online shopping experience and online reach.

Acidgreen is an award winning Magento Australia company with over 15 years of  e-commerce experience. Our certified magento developers and designers are highly qualified to deliver Magento store development results that generate the highest amount of conversions and provide the best ROI. For more information on our Magento ecommerce stores and commerce expertise and how to get started with Acidgreen’s magento design  and development services, contact us today.