We are often asked why we do not use pre-built “themes” for Magento implementations. Surely it would be quicker and cheaper? For those in the dark, a “theme” is a set of pre-packaged files that customise the layout, design and in some cases the functionality of a website. To quote WordPress: “themes are files that work together to create the design and functionality of a […] site. Each Theme may be different, offering many choices for site owners to instantly change their website look.”
Simplistically, the advantages seem wonderful:
- They are often free or very cheap
- Implementation is very quick: simply download it and install
- They already work (well, provided you are using standard Magento, out of the box)
- Magento themes and designs seem too good to be true; they are moderately priced, responsive, and usually offer some type of global customization (such as control over colours and fonts)
There’s a dazzling and confusing array of websites that offer pre-designed Magento Themes. However, these themes may not be the best fit for you, and can actually cost you more in the long run. There are, for sure, a lot of poor quality themes out there – even those that have sold 1000s of copies.
At Screen Pages, we are in the business of designing “bespoke” websites which reflect the brand, product range, marketing and promotional activity, fulfilment and customer service of a business – exactly. This inevitably involves careful and creative thought, analysis, planning and – critically – customisation. There are no technical reasons that we don’t use themes: in every project, our design team works very closely with the development team to ensure that the end product will be one cohesive site, rather than it feeling like a design was forced into place and the inevitable compromises that would bring. The ability to customise an e-commerce website in whatever way required is in fact one of the biggest advantages of Magento itself.
Themes and “customisation”
Themes rarely account for any customization you may require, or want to add in the future – as your online trade evolves and grows. Most themes are based around standard “out-of-the-box” Magento and only style the main Magento pages (home page, category page, basket, check-out and account pages). It would be a miracle if they worked on any additional or bespoke pages you have (e.g. catalogue requests, store locators etc). An area of particular sensitivity would be any customisation in the checkout process.
Most Magento websites we deploy may use at least 5-10 third party modules/extensions: complications may arise with the compatibility of 3rd party modules. It is often one of our biggest challenges to get individual third party modules to function, operate and perform together, let alone entire designs.
Themes and the development process
When we work, our custom designs are given to trained, managed (& Magento-certified) developers with all of the imagery, CSS styles and layouts needed to create the front-end website code (CSS sprites & SCSS where required) and to provide a visual reference for the development process. Recreating this from an off-the-shelf theme would be time-consuming. Similarly we are quickly able to create new elements (and customise those designs) that match the original design.
Example of detailed design deliverables, for custom design development
Themes could only ever serve as a base to a “mature” website: we are 99% certain that no theme will match any clients’ requirements in entirety and we would quickly sink into the realms of uncertainty: our current design and specification process is aimed at taking the questionable unknowns out of a project scope, so that we can offer a contractually-bound fixed price project fee with the highest levels of warranty, backed by high service levels and a quality ongoing support and update process.
Themes and ongoing support & development
Finally, when Screen Pages designs and implements a custom design for a client, you will have access to all the underlying design files so that should a change need to be made, everything will be readily available, filed and stored in a professional repository and software version control system.
Some clients will also be concerned by intellectual property rights: Screen Pages contracts to give the intellectual property of the entire website and design to the client – if a theme were used, there may be restrictions in this regard.
Nothing is constant but change. You will want to make modifications. There might be no or little support and once any form of customisation, change or update has been made, it is difficult to decipher where the buck (liability to fix) may stop. Magento itself introduces changes: some theme providers might not be able to keep up with Magento’s development. As your website trades, you will be studying its performance with a view to optimising conversions by analysing customer journeys (through analytics, usabiity studies or customer surveys). It is a given that this will drive constant (but generally minor) change: conversion rate optimization usually depends on your marketing, customers, product and overall messaging & proposition – you will wish to have freedom to make enhancements without risk or compromise.
Having a custom website built and supported by a properly capitalised, well-structured organisation will give you the peace of mind knowing that your Magento implementation will accommodate everything (and we mean everything) you want now and in the future.
- Screen Pages designs and builds custom e-commerce websites that reflect and amplify uniquely and absolutely a business’ brand, product range, proposition and marketing activity. Themes do not do this
- As professional and certified developers, we would be concerned about code quality, extensibility and maintainability of a theme
- Where any form of customisation is required (& there generally is for our kinds of clients), there is a potential for risk
- As a retailer, you will want intellectual property, warranties and high service levels – in practice as well as contractually
- Our design and specification process is designed to remove uncertainty – not introduce it (in a fixed price project with a clear milestones).
Summary: Specific mobile support for e-commerce websites has economic return. What are the pros and cons for Magento websites of a responsive design as opposed to a separate mobile optimised store?
First, let’s start with a definition of “responsive design”. According to Google, “responsive web design, responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns.”
The man given the credit for coming up Responsive Design as an approach is Ethan Marcotte in A List Apart [see http://alistapart.com/article/responsive-web-design/]
I think we can assume – at the very least for the purposes of this article – that some kind of mobile site is a “good thing”: in a recent mobile traffic study, sites with mobile support converted over twice as well (1.31% versus 0.55%), with a 4%+ reduction in the bounce rate. Thus, we can deem the alternative to be a “mobile-optimised” version of the website. In the Magento world, that means a separate store (in the same Magento instance), with its own URL, catalogue and set-up.
Force4’s responsive e-commerce website
So what is the business rationale for a responsive e-commerce website?
1. One website, many devices
The most obvious advantage of responsive design is that a responsive online store can provide a great user-experience from the same, single website across tablets and mobiles.
Let’s take the following example. Someone searches for a product on their smartphone during a lunch break at work. They find an online shop that has the product they’re looking for, and decide to continue researching this product on the same site when they get home. Except, when they get home, they will use their desktop instead of their smartphone. Later on, when purchasing the product, they’ll probably be using a tablet.
If the site in this example is responsive, this person will have a positive user experience when transitioning from mobile to desktop because they will view the same site on their desktop as they did on their smartphone. On the other hand, if the site is a dedicated mobile site, this person may become frustrated with the fact that they have to locate the desktop version of the site, then possibly go through a different process to find the right product all over again.
2. Easier to Manage
Having a separate desktop and mobile site theoretically requires having separate catalogues, product information & banners, marketing campaigns (emails, SEO, affiliates – which site do you send the traffic to?). Whilst in Magento it is straightforward to mark your content (I use the term in its broadest sense, to include copy, data, images, e-commerce operating settings and website paramaters) for a specific “store”, there is still a process to go through to deploy the same content.
It is fair to say that the reduction in content management effort will reduce the complexity of managing your website.
Sample CSS with “media query” to determine behaviour on different screens
3. More chance of your marketing “reaching” your customer
According to Campaign Monitor, 42% of all emails are opened on mobile devices. The Pew Research Internet Project discovered “67 percent of mobile owners find themselves checking their phone for messages, alerts, or calls – even when they don’t notice their phone ringing or vibrating.” No matter the study you examine, one thing is clear: whilst your marketing may be sensitive to device size, it will not know what kind of device will be used to take action.
Even if your email is mobile friendly, your landing page also has to be as well. A mobile-optimised email sending the visitor to a desktop website will not prove effective.
One study from KISSmetrics reported that 90% of people will delete emails if they don’t open or click through properly; this is further exacerbated by the fact that click-rates decrease on mobile devices when compared to laptops in the first instance.
Since customers are regularly going back and forth on devices it’s generally helpful if the landing page works equally well on desktop and mobile.
4. Social is mobile
Social media has gone mobile, which you may have noticed. How important is mobile for social media users? According to a study from ComScore, 55% of social media consumption happens on a mobile device.
What this means is that people will share and view content on mobile devices: what’s the point of sharing content on social media if it’s not compatible with mobile devices. Again, if a website isn’t functioning on a mobile device, users get frustrated and leave. High bounce rates lead to low conversion rates.
5. Google says so
With a massive market share, when Google speaks, search marketers listen. Google states that responsive web design is its recommended mobile configuration, and even goes so far as to refer to responsive web design as the industry best practice.
Here’s the bible from Google. https://developers.google.com/webmasters/smartphone-sites/
Because responsive design sites have one URL and the same HTML, it’s easier for Google to crawl, index, and organize content. A separate mobile site which has a different URL and different HTML forces Google’s busy spiders to crawl and index multiple versions of the same site.
Additionally, Google prefers responsive web design because content that lives on one website and one URL is much easier for users to share, interact with, and link to than content that lives on a separate mobile site.
Ultimately, Google realizes that unhappy people will go elsewhere, meaning that bounce rates increase and the site will not rank on mobile searches. In other words, it’s just bad for business for both Google and all of the websites that aren’t taking advantage of the benefits of responsive design.
At the end of the day, it is much easier for your target audience to find your business online if you only have a single home address, that is, a single website URL.
Watco’s responsive e-commerce website
What Magento says
As a Magento Gold partner and specialist, we are pleased that Magento itself has invested in responsive design – now reducing time to market for responsive work. Prior to this, all the coding for different devices had to be hand-coded into the website HTML.
Here’s Magento’s own words on the subject:
“Responsive is the best mobile solution for many merchants because they can invest in one site that serves customers using any device, while ensuring a consistent brand experience on every device. A single responsive site is less costly to develop and requires less time and effort to maintain than different themes for different sites and different devices.
Responsive is also good for boosting conversion, with a shopping cart and checkout designed to work in any environment and on any screen size. And having a responsive site makes it easy for mobile device-using customers to move from an email offer, for instance, to check out.
All of this is good news for merchants aiming to take advantage of the explosive growth in mobile commerce. eMarketer predicts even more growth ahead, with mobile commerce growing from 19 percent of retail ecommerce sales in 2014 to 26 percent in 2017 in the US, and from 24 percent of retail ecommerce sales to 35 percent in the same time frame in the UK.
There are SEO advantages too, because responsive is Google’s recommended approach to mobile optimization and because it allows merchants to focus all their content energy on a single site. Great content that supports SEO also engages customers, provides a richer site experience and can reduce bounce rates.”
Planning a responsive project
Smashing Magazine has put together a useful guide on how to plan a responsive project [see [http://www.smashingmagazine.com/2014/03/19/how-to-plan-your-next-mobile-e-commerce-website]
Here’s a quick summary:
Putting together a mobile e-commerce website is a multidisciplinary task that encompasses business management, design, development and marketing. Whatever your agency’s size, create a boilerplate process that you can follow for all websites but that you can adapt to each project’s specifics. In the planning stage of this process, cover the following:
• Who are you designing for (i.e. your customers)? How would they use your website & how do you send them there? What are their buying habits, and what drives them to buy?
• Create designs that are suited to mobile devices, including button design, font size and so on.
• Consider what content and functions should be where on each target screen size
• Generate wireframes with details for all key pages (home page, category page, product page, basket and checkout).
Planning in this way will help you deliver an e-commerce website that is well optimized for mobile, that is targeted at your client’s customers and that converts more visitors into buyers.
Donald Russell’s “mobile-optimised” e-commerce website
Are there any downsides?
The obvious challenge is cost. Bespoke responsive design and development implies that there is at least two versions of every element on every page: things don’t just end up in the “right” place without consideration.
Whilst the availability of responsive templates from Magento reduces some of the development work, there is always going to be some overhead in customising the size and location of each function, image or content area.
Typically, responsive design can nearly double the design effort and add up to 50% to the overall development effort. QA and testing is effectively at least doubled, because every page needs to be checked and tested for all the target device sizes (not considering all the permutations available in the Android world).
It’s the same site
Some retailers may not wish to have identical product, categorisation/navigation and content on their mobile site – for perfectly sensible marketing and commercial reasons. For example, their catalogues are so large or their product information/configuration is so complex that it just won’t work well on a small screen. Alternatively, their customers’ prime mobile usage is about last minute purchases inspired by promotional emails – not browsing or research.
In these cases, a separately configured mobile-optimised website may perform better.
People worry about the impact of “big” single pages which include all the HTML, code and content for all known device sizes. Theoretically, they have a point and one that becomes particularly important when considering how customers might interact with your website through a comparatively slower mobile data connection.
However, performance in our Magento world is largely dealt through proper and optimised configuration and hosting. For example, use of cache-ing systems can dramatically improve page load times.
E-commerce managers and developers need to think responsively whenever any decision that touches the website is made. Many folk still overlook those small screens – old habits die hard. Content needs to be considered vertically (as opposed to horizontally).
Particular attention needs to be paid to the technical tasks of content creation. Old style HTML tables won’t work: website managers need to use DIVs. Fixed image dimensions will break responsive designs.
Given the increasing proliferation and range of different sized devices, it clearly makes sense to deploy a mobile offering. The payoff is easily calculated and predictably returned.
The debate is around how: do you go responsive design or mobile-optimised? The former is clearly a more strategic approach, as you are laying the technical foundations for all sorts of different device sizes and planning for a more manageable online presence. However, companies may baulk at the budgets involved, particularly if they have an existing website with which they are happy. Should that be the case, our advice is that if a re-platform or significant redesign/re-brand is being planned – making it responsive will be a time saver and much the best long-term decision.
By Roger Willcocks