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

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!