Shopware 5 series: completely responsive template

SW-5_completely-responsive-template-out-of-the-box

Sit down and let me tell you about the days when SEO was innocent; the competition fun loving and free. Back then, archaic looking online shops could get their hands on a “Get out of Jail Free” card and steal prime real estate from more modern, mobile-friendly competitors.

That was until one stormy day in April 2015, when the tides swiftly changed with Google's algorithm update. With the crash of a powerful lightning bolt, Google announced the coming of Mobilegeddon -  a new era of inflicting punishment on websites that are not mobile-friendly. Since that day, Google has lurked the information highway, scythe in hand, on the hunt for websites that fail the mobile-friendly test. When found, Google guarantees they will never see the light of a search request again.

At this point you might bat your eyelashes and demurely proclaim, “Well gosh, my website appears on mobile devices! What’s the big fuss?” To which Google scoffs, “Please. Does it look like this?”

Responsive design makes it possible for you to properly display your online shop on any number of devices

Mobile-friendliness is more than simply showing up. It’s about meeting specific criteria that make for a pleasant experience on mobile devices. This includes readable text, software that actually functions on mobile devices and images that can been easily seen without the laborious pinch or scroll.

If the commandments from the almighty Google don’t strike a nerve, the actual numbers supporting mobile use should:

  • 80% of people with internet access use a smartphone
  • 80% of online shoppers use their smartphone to shop
  • 67% of online shoppers are more likely to purchase from shop that is mobile friendly
  • 75% of Americans take their phone with them to the bathroom

When all is said and done: mobile is a very relevant topic for the continuing success of your online shop.

Now let’s switch gears for a moment and get to the cotton candy wonder of today’s article: there is a remarkably simple way for you to make your online shop mobile-friendly. Introducing (drum roll, please): the responsive template that comes standard with Shopware 5.

Sounds great, but what is responsive?

Responsive is a characteristic of your online shop that takes design and usability very seriously, accommodates the different needs of different end-user devices and makes sure your customers do a happy shopping dance. Your customers don’t give a rats tail about the technical specs of your responsive website, they just want to “get stuff done”. Responsive makes this possible.

The following paths leads to responsive:

  • Standalone: you can build the website twice with separate domains—each domain is individually programmed and designed for different end-user devices (i.e. myshop.com for desktop, myshop.mobile for mobile). This means more SEO optimization and upkeep for the folks building the online store. This also requires quite a bit of development and design expertise in order to realize a consistent user experience between both domains.
  • Native app: Would you like to download the mobile app directly to your phone and never use it again? The idea is wonderful in principle: you invest a ton of money perfecting the mobile experience with a super trendy app that can accessed whenever, wherever (ahem, just like the internet). Consider this: the average smartphone user opens only 4 apps per day. This means the ROI forecast for developing a native app looks a bit dreary. This route also requires extensive development knowledge to both build and maintain, which also translates to ongoing costs.
  • Responsive design: one code basis that perfectly adjusts the bells and whistles of your website for any number of end user devices. Responsive is future-friendly website development and incredibly cost efficient. In fact, “Responsive web design is Google’s recommended configuration” – Google.

Here at Shopware, we follow the KISS principle and prefer the responsive design route.

The Shopware 5 responsive template

Our software comes with a responsive template that makes your website responsive off-the-bat. Responsive template means we have taken care of the unwieldy development portion by creating a framework that you can use as a basis to build your unique shop. The responsive template makes it possible for you to work with one backend—where all of your shop information is stored—and very easily adjust the design and content for any end-user device.

Less text; more action—check out how this looks in the following short video: 

The responsive template is standard with Shopware. In many cases, the template can be adjusted with just a few mouse clicks or per drag & drop. This gives you the flexibility of quickly changing content in your online shop and perfecting the display for every device.

Family fun for everyone

Have you ever tried to build a dollhouse using the Palace of Versailles as a basis? This is top-down development. This is starting with the Full Monty and working down. One cannot simply make a 1-1 version of the royal chateau in mini form—while the result might be interesting for matchbox enthusiasts, it would be too overwhelming to serve the interests of the dollhouse target group.

Instead, start with the smallest common denominator. Consider the actual users, their expectations and work up from there. This is bottom-up development and what characterizes Mobile First. No backtracking or fancy reworking involved. You start with a clean slate and build something that everyone finds enjoyable.

This approach to design ensures that all images and videos automatically adjust to the device being used. This means images scale, along with their resolution, to compliment the new viewport size. Naturally, this is something the Shopware 5 responsive template takes very seriously—after all, our job is to care after the basic needs of your shop so that you can focus on being f-a-b-u-l-o-u-s.

Too magical to be true? See it & believe it right now by visiting our live demo environment!    

Usability

Consider that mobile screens have about 80% less space than desktop displays. Mobile users do not want to be inundated by information, therefore it’s important to par content down and highlight only the most important information. Tidy up the presentation, minimize the amount of scrolling and make a clear path for navigation.

What makes for better in-store usability?

  • Off off-canvas menus for better navigation on smaller devices
  • Easier search possibilities (i.e. filters or search bar on the homepage)
  • More streamlined checkout processes & less steps for the customer

Better mobile usability = off-canvas menus simplified checkout easier search and nagivation

Additionally, the responsive template is modeled after a flat design. This simplified, clean approach to design includes vibrant call-to-action buttons so that customers can shop with the path of least resistance. Customizing these usability enhancers – off-canvas menus, checkout options, buttons – can all be done directly in the Shopware backend, all without having any programming knowledge whatsoever.

Conclusion

There you have it, ladies and gents: the easiest way to take your online shop from *drab* to *fab*. The Shopware 5 responsive template was built with you in mind—we integrated the features you need to secure a market advantage and continue growing in the future.

For more information about Shopware 5 and its powerhouse responsive template, simply send a request and we’ll get back to you as soon as possible. We’d be happy to set up a time for a live presentation or your own personal demo.

Get in touch now! 

 

Discover more from the Shopware 5 series:

The powerful & flexible filter function

The new Theme Manager

Refactored core classes

The new Plugin Manager

Read all that and more in our Shopware 5 brochure:

Download the free Shopware 5 brochure 

comments powered by Disqus