E-commerce responsive design in Magento: the pros & cons

E-commerce responsive design in Magento: the pros & cons

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.

Responsive design

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 site

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.

Thinking responsively

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

How to choose a Magento agency

How to choose a Magento agency

How to choose a Magento agency

Posted by Sarah Willcocks, CEO

Why is choosing the right Magento Solution Partner so important?

Magento is one of the most popular eCommerce platforms available today, fuelled largely because of the richness of its functionality and its “open source” nature. There are over 300,000 merchants live on Magento and growing. In addition, Magento is investing heavily in ensuring that Magento 2 remains at the forefront of omnichannel retailing worldwide.  This popularity, however, means that many web developers and companies have adopted the Magento platform without investing in the proper planning, organisation and support that eCommerce software can require.

Because of its “open source” nature, anybody can download it and have a go.  As a result, many merchants end up commissioning websites on the “cheap and cheerful” Magento bandwagon, only to find that they can’t get their projects delivered in a timely manner and when their websites are live, the problems begin. “It’s easy to build a website if you don’t have to support it.” You may then find yourself without the appropriate Magento resources and expertise, and cut off from the fast-evolving world of eCommerce.

Many Magento websites are developed in haste without consideration for the following:

– performance and scaleability
– support and maintenance service (with ongoing handholding)
– professional development standards (e.g. documentation, release procedures, etc.)
– long-term attention to client’s needs for flexibility and ease of maintenance
– proper study of Magento systems design, architecture and best practice
– implementation of security guidelines for cardholder data protection

It is crucial therefore that merchants take into account the following when choosing an agency to execute their Magento eCommerce project. This article will help you make your needs more concrete and show you how to go about choosing an appropriate agency to meet them.

1. First, be clear about what you want

Write it down and be specific. If you don’t know what you want, then you won’t know when you’ve got it. If you are unsure what you want/need, look at your most successful competitor’s website and use the features on their site as a reference. For example, how many ways do you want to allow your customers to pay? Should they be able to add gift messages? Do you want to accept orders from outside the UK? And so on.

Also, think through your list of requirements and how you might want to manage them within your business, i.e. how much time do you have as a business to devote to managing this part of the site.

A simple way to do this is to write down what elements (& moving parts) that you’d like on each material page of the website. Then, write down the processes for fulfilling orders and delivering customer service.

Incidentally, unless you are an eCommerce expert, it’s very difficult to understand what is happening behind the scenes of a page on a website because there are so many dynamic elements, business rules, logic and algorithms, as well as general website parameters.

2. Set a (rough) budget

Set a budget that is appropriate for your anticipated activity & sales. It would be ridiculous to spend £10k on a website that does £10m per annum or £50k where your aspiration is £100k of sales. If you have no idea of what commissioning a new site costs, phone a few different agencies and ask them what their average project price is for a new eCommerce website. This should give you a few pointers. At Screen Pages, we try to understand a client’s budgetary comfort range quite early on as this helps us to make better recommendations when suggesting solutions.

As a guide, our clients spend between 2% and 5% of their online revenues on eCommerce development and operations (excluding marketing costs). This obviously excludes initial capital costs which are linked (in our case) to the amount of time that goes into the project. At Screen Pages, fully managed design and build projects can take 100-200 days, depending on the functional scope of the project.  We know this because we have successfully delivered over 300 websites since 2000.

3. Choose a shortlist of agencies to talk to and check them out

Once you have your requirements and your budget outlined, do your research and look for an agency that has experience of delivering projects of a similar size and nature for businesses similar to yours.  Get them to come in and present.  Meet their people, ask to visit their premises.  Find out who their clients are and how long they have been clients.  Keep your shortlist short (we recommend about 3 agencies or it will soon become a full time job) and ask them all the same questions so you can compare apples with apples.  Get them to tell you what their company values are as its important that you choose an agency with values that complement yours. Things will not always go to plan so make sure you choose an partner that you feel comfortable with.

4. Find out who the project team will be

Many disciplines are involved in putting together an eCommerce website and chances are that the person you’re dealing with won’t be involved in its delivery. You should take pains to understand the project team and the different roles involved.

There’ll be an Account Manager who lead any commercial and marketing issues; a Project Manager who’ll own day-to-day operational and functional delivery, managing both client-side resources as well as internal agency staff; a Creative/Design Lead who’ll provide mock-ups of what you’ll be getting; QA/Testing staff who should make sure you are getting an error-free, quality product which won’t waste all your time spotting problems that should have been cleared up before it came to you.

You also need to arrive at an understanding of how the work will be managed day-to-day, including deadlines, key milestones, sign off stages etc. Once you’re clear about who’s involved, you should be seeking to understand what relevant experience they have and how much involvement they will have on your project.

On the other side of the fence, understand that you will need your own properly resourced, internal project team and Project Manager as well with clearly defined roles and responsibilities. If your internal effort is not clear, this should be discussed and agreed with the agency. In our experience, lack of client testing is the biggest risk to project success – especially where there is integration with back offices for order processing or bespoke, custom functionality.

The second biggest client-side challenge is preparation of data. Tens of products can be reasonably managed manually. But when it comes to many thousands with lots of inter-relating data (variants and attributes) associated with each, getting the data import process right is non-trivial and will probably involve several iterations.

5. Work out how to know you are getting what you are paying for

You will only want to pay for work done completely and properly so you will need to make sure there’s a water-tight definition of the scope of work. A good agency that knows what they are doing will generally price on the amount of time spent on your project and that time is a direct reflection of the functionality required and promised, so it’s best to be clear up front!

Screen Pages’ method for doing this is to prepare and share rather a large spreadsheet that contains every task and “function point”, with an associated time and cost. Not only is this transparent, but it is reasonably accurate. It also includes allocation for more intangible deliverables such as quality assurance & acceptance testing.

You might also consider how mistakes and omissions are handled. Given the fact that you speak “retail” language and we speak “agency”, some of the detail can be lost in translation or quite simply overlooked. Find out what happens in those cases.

Later, we produce detailed mock-ups of all the material pages on your website (not just the home page). Coupled with this, you’ll be presented with a detailed functional specification which explains how every element on every page gets there and is managed.

In our world, you should ask questions on all this until you’re happy you are going to get what you want.  We ask that all designs and specifications are approved and signed off, prior to any development work starting.

6. Is it cheap?

Unfortunately, too many are seduced by an attractive headline price (usually a compelling round number). This is quite wrong: it’s not about the price or day rate – it’s about the amount of time involved. An accurate assessment of the effort involved is what matters, multiplied by the day rate.

You may be aghast at day rates north of £400, but the differential usually covers the overheads of running a professional, well-run business with well trained staff and experienced management.

Think about the kind of service you want/expect as well as the kind of service you need. There is a difference and you pay for what you get. Whether it’s advice, warranties, turnaround times, quality or account management – it all comes with a value.

7. How big & established is the Magento agency?

Granted size doesn’t matter, provided your agency can handle the demands of the new clients it takes on and the ongoing support and update commitments of its existing clients. You should look for critical mass: 1-2 Magento developers will not cut the mustard. You might get what you want on the initial development project, but when they start work on somebody else’s project, how can you ensure you get the service or support you need. An agency with only a few developers will not be able to cope.

Experience counts for a lot, especially with Magento which has over 2 million lines of code. This will soon be all yours and in the tender care of your agency in this open source world. How many years has your agency been working with Magento and how many sites have they built or taken on? Are their developers trained on Magento 2?  How do you know?  How have they been trained?  Are their Project Managers Certified Solution Specialists? Why not?

Of course, there is an obvious third party verification here: Magento itself. Magento operates a formal partnership programme with a system of certification. To qualify for partnership – a formal agreement – a partner must have conducted a certain number of Magento implementations and have a number of “certified” developers, which means they’ve had to sit an exam and the agency would have had to invest in their training.

You can check Screen Pages’s partner credentials on the Magento website.

8. What happens after it’s built?

Building websites is the easiest thing we do. The hardest thing is supporting & extending them. After an eCommerce website is made live, that’s when the whole question of service and support kicks in. It’s fair to say there are always a few issues and niggles that nobody spots, let alone the snags that come up as you manage products, prices, promotions, content & data on your site on a daily basis.

You need a well organised, experienced and professional agency to deliver this with processes for handling support, and with the right amount of manpower & management. Make sure your agency has a proper agreement with structured, documented processes for support, maintenance, problem resolution, warranties etc. Check this is written down in their contract. A sensible and embracing agreement is a good sign of a professional outfit.

Ask how many support questions are asked each month and how many are resolved.  Ask how they are prioritised and how quickly issues are dealt with.

At Screen Pages, under our standard agreement, we offer a 30 day warranty on all issues after the site is made live and an unlimited warranty on any issue we’ve introduced.

9. What other services does the agency provide?

This question is a double-edged sword. You may feel it’s convenient to have your marketing, SEO, affiliate management, etc. all under one roof. Or you may feel that you want a specialist rather than a jack-of-all-trades.

Our view is that it is much better to pick best-of-breed agencies for each service you need. How can you expect in-depth service/expertise/back up if there’s only 1-2 people in each discipline?

We have taken the approach that it’s better to work with experts – we have established relationships with consultants and agencies whose services are “appropriate” for our kinds of clients.

An important exception to this is hosting. This can be a challenge with Magento; a few Google searches will reveal the need for careful consideration of its configuration, performance and optimisation. It’s unlikely that you will know what to ask for or even comprehend what you’ve been told about cacheing, secure FTP, PHP ini files, MySQL etc. Let us take care of all that for you. We have learned the hard way how to optimise our Magento websites and make them work fast. Here’s how we host Magento websites.

10. Take references

This is obvious, but incredibly often overlooked. Here’s some of our eCommerce clients.

11. Check out their financials

Again, it goes without saying, but take a look at their accounts and understand where an agency’s business comes from and its profitability.

Make an enquiry

Email opt in (optional)

4 + 1 =

For information on how we process the data that you give us, please see our privacy policy.

Contact us

4 The Courtyard, Wisley Lane, Surrey, GU23 6QL


Connect with us

B2B e-commerce in Magento

B2B e-commerce in Magento

Whilst Magento has established market leadership as an e-commerce platform capable of handling a wide range of B2C (business-to-consumer) requirements for online success, its ability to handle B2B (business-to-business) needs often goes unsung.

Why embrace B2B e-commerce?

Forecasts suggest that the B2B ecommerce market will be double the size of B2C. According to Econsultancy “by migrating B2B customers online, companies have seen a 44% increase in average order value and 38% of the B2B executives agreed that customers have spent more. In addition, half of the companies have reduced their acquisition costs and 52% have decreased their support costs. Perhaps most importantly, the more channels customers buy from, the more money they spend and the more loyal they are. In a time when companies are struggling to find growth in the traditional channels, this may well be the best way to stand out from competition and increase sales.”

86% of companies in a study conducted for Internet Retailer by Forrester Research say they now sell online to customers who used to purchase from them only offline. The study shows that businesses are expanding in several ways how they reach customers through e-commerce: many are now selling online to customers who once only purchased offline through call centers or salespeople.

The main business drivers for B2B e-commerce therefore fall into two categories: efficiency and opportunity. Efficiency comes from making business transactions more easy and quicker, delivering the benefits of convenience, automation and integration. Opportunity is delivered by adding value, improving service, increased new business and embracing new sales channels such as mobile.

Having now worked on quite a few Magento B2B implementations (Elektron Technology, Watco, SnapOn, QC Supplies, Demco, Anixter, Aston & Fincher, Agar Scientific, Moss Europe and Optimas Components – as well as integrating trade purchase capabilites on several B2C e-commerce websites), we are able to set out some whys and hows for B2B e-commerce on Magento.

 B2B e-commerce: key stats [source: Stibo Systems]

Basic e-commerce implementation in Magento
Let’s start by looking at the e-commerce basics, including pricing, ordering and fulfilment and how they are implemented in Magento.

The golden rule is to set up your B2B website as a dedicated, separate store (“website” in Magento parlance). This enables you set up different catalogue data and content (including pricing, specific payment and delivery methods as well as offering different functionality and layouts). This is quite straightforwardly done in the Admin Panel (normally we’d allow a few days to set up and configure).

Important configuration tasks include:

  • import existing customer accounts, addresses, emails (& passwords if available). This is particularly pertinent if migrating from an existing website and you have the passwords.
  • establish the payment on account (or by invoice) payment method. A small customisation to the checkout would allow the capture of a purchase order (optional or mandatory).
  • restricted access to generic trade pricing can delivered by enabling Magento Enterprise’s private sale functionality which requires a customer to login prior to accessing the website
  • VAT numbers can be captured (& validated) during the checkout process

It’s worth spending more time on pricing. After the initial debate about whether to display prices or not (& or what version), you can set up different pricing regimes by a number of different tools – once logged in.

You can then use “catalogue price rules” to offer across-the-board discounts to specific customer groups; individual prices on a per product basis can be assigned to customer groups, as well as “tiered” pricing (volume-dependent pricing).

Setting up structured pricing for different customer groups in Magento

Magento also lends itself very well to international sales (with full local currency pricing or currency conversion), with the possibility of separate languages.

Improved fulfilment by automation integration

Integration is critical to the B2B process as most companies have sophisticated ERP or back office systems and the case for automation is compelling. Technically, this either involves conventional file transfer of XML or CSV data files (to an agreed frequency) or direct communication through an API (application programming interface) or Magento “connector”. In most cases, the key is to export orders perhaps with other customer data) and to import stock and pricing. Generally, the critical part of such integration projects is the analysis, documentation and specification of the work flows/transactions associated with this, and then to ensure the bespoke development/integration work is delivered and tested as part of the project.

Magento has (generally) good tools and technology for this: Screen Pages has integrated Magento with well over 20 different back office/ERP systems. These range from SAP & Navision at one of the end spectrum to SME packages such BrightPearl as well as 3rd party fulfilment/warehouse management houses.

Additional B2B e-commerce transactional services

Once the basics have been covered, you look at providing a better service to your customers and adding to value to existing business processes. Common requirements in this category include:

  • Presenting your products in a way that is more attractive to trade buyers; for example, navigation and browse habits could be radically different. Conventional categorisation should be re-evaluated. For example, many buyers will order by part number or product code (a small customisation enables customers to add products to the basket by entry of multiple codes); catalogue buyers will use onsite search with these codes as well. A final touch is to customise the Magento “list” view (as opposed to the more popular “grid”) or category pages
  • Many B2B customers will create the equivalent of “wishlists” (whatever language you use to describe such shopping lists) or more, they will ask for quotes which need submission and approval prior to order. We have implemented a 3rd party module (http://www.cart2quote.com) for handling this elegantly.
  • Repeat purchases are (mercifully) widespread in this world. Maximise the marketing and service potential offered by the “my orders” page and encourage customers to repeat orders with ease via this mechanism
  • Enhanced delivery options: offer your customers “nominated” delivery (where they pick their desired delivery date on a calendar): this can be assembled via a combination of popular extensions
  • Upload credit limits (with your account import as above) and implement balance checks and alerts in your checkouts (if required). Better, these limits can be fed through customer data integration
  • Trade account application forms may be appropriate for certain businesses: capture all the customer data you require before approving and creating the account. A simple form coupled with an email should accomplish this.

Valued-added customer service (& increased sales)

Many will feel that a (new) B2B e-commerce website presents the opportunity to offer a lot more to entice and persuade customers, as well as supporting their need for information.

Magento’s content management approach (with rich content and media) allows you to integrate anything from case studies and testimonials, installation and training material to full video and “clickable catalogues”. Integrating a blog on the website is an excellent way to deliver this extra material (and highlight it in customer communication such as email newsletters).

At the end of the day, businesses should be aware that whilst their customers are “at work, doing their jobs”, they are also consumers and their reaction to websites is largely coloured by their usage and experience of popular B2C websites. Falling behind their expectations is a risk many will not want to take. Consequently, standard practices in B2C e-commerce such as a proper study of analytics, regular review of the user experience via usability tests and ever-important customer surveys will help you understand what works and what doesn’t.

Mobile usage in B2B

Mobile usage in B2B e-commerce: key stats [source: Scott Design]

Customer acquisition

A final attraction offered via B2B e-commerce is the chance to acquire new customers by not just a “better website” but by more effective use of “best practice” online marketing, including SEO and email marketing.

Magento has excellent SEO management, offering your precise control over the important assets that Google likes (page titles, meta data, URLs, links and, of course lots of relevant content): good positioning in the search engines could bring you more customers.

Finally, Magento has a number of partners who offer automated, personalised and targeted email automation (such as Dotmailer and Bronto), which would help your marketeers deliver structured, lifecycle email campaigns to your customers. The clever part here is the high-level of integration with your transactional and e-commerce data as these extensions exploit the Magento API.

A final note on mobile. Over the next 12 months, almost half (48%) of companies reported plans to add a mobile sales channel, and 25% are investing in online marketplaces. Clearly, mobile commerce appears to be the future of B2B selling for most (78%) companies. Magento – equipped with both mobile store and responsive capability – makes this transition easy.


All in all, with the predicted upswing in B2B e-commerce, Magento offers the right tools for reliably delivery a best pratice e-commerce channel, with desired functionality offered either out-of-the-box, via extensions or specific customisations for your environment.

Screen Pages’ insight and experience with Magento and its implementation in a B2B world can help businesses gain competitive advantage by improved efficiency, better services and increased sales.

By Roger Willcocks

5 years of Magento: a retrospective

5 years of Magento: a retrospective

February 2014: 5th anniversary of our work  with Magento

It’s now 5 years since we made the decision to adopt and invest in Magento as the e-commerce platform we offer to our clients. This decision was existential in the fact that at Screen Pages all we do is offer e-commerce services and we only use one platform to deliver them. In a sense, it was an all or nothing decision and once we’d made that decision to marry, we knew in advance that we’d have to embrace it wholeheartedly, commit it to it thoroughly, invest in it significantly and work with it through thick or thin, health and in sickness – perhaps not forever, but at least for a long time. (It’s unthinkable to just do a bit of Magento or offer to use it on one project – that’s a recipe for disaster.)

Confronted by the need to invest in a new platform: the software we were using at the time was not attracting adequate investment and the world of e-commerce was evolving swiftly.

Why we chose Magento in 2009

Having conducted a desk and paper exercise, taken due diligence from a retailer then using Magento 1.2 (with sales of over £1m per annum) as well as formally meeting Roy Rubin (then CEO of Varien, as the business was then called), we commenced our first projects in early 2009. We decided upon Magento because it offered the best price/performance of the available e-commerce platforms, it offered full customisation, bespoking & integration (required by our clients) and, if you wrote down all the features and functions needed for a “best practice” e-commerce website, it had them or they were available as extensions (or failing that, could be customised). Plus, it was “open source”, so businesses had more control and portability.

One of those early clients, Christopher Ward, has evolved over time and is now on Magento Enterprise, seeing its online sales more than double in that time.

At the same time, we invested in new open source development practices and software, new operating system and server configurations as well as in building relationships and partnerships with a whole new universe of businesses and complimentary service providers.  Not least amongst these was Varien itself. Magento is now part of eBay and has evolved considerably over time: we have worked hard to foster relationships with Magento’s management, commercial, technical and product marketing teams to ensure that our joint clients receive best advice and we are well supported in our undertakings to them.

Importantly, many of our staff who were experienced in one type of e-commerce service delivery have bravely acquired new skills and remain the backbone of Screen Pages’ technical and project teams.

Many of our more successful clients chose to migrate to the new world with us, including Bella di Notte, Donald Russell, the Real Flower Company, the RSPB and Sportswoman. One went elsewhere, then came back: QC Supplies.

Magento has evolved in those 5 years

Looking back at the software itself, we have seen Magento become a more reliable, capable and scalable platform as well as developing the largest customer base of any e-commerce software platform in the world. We have seen the evolution of Community Edition from version 1.2 to 1.8 and the successful introduction of Magento Enterprise (now at version 1.13) – a risk in itself, as the early success of Magento was down in part to its “open source” and unlicensed (read “free”) nature. It bears testimony to the quality of the product that its customers would now pay $15,000 per annum.

Although we have Community Edition clients, our preference is to work with Magento Enterprise. It has better scalability, configuration  and performance options making it suitable for e-commerce operations with more traffic and sales, larger product catalogues, multiple or international stores (including languages, currencies and brands). There are certain marketing capabilities which some clients require (trigger emails, loyalty schemes, targeting, private sales etc). Above all, though it is backed by a considerable product development and support organisation and budget (backed in turn by the considerable eBay balance sheet). In a word, if you’re serious with revenues over £1m, we’d recommend Magento Enterprise (see official video).


It’s easy to look at Magento simply as a static software service. It’s not. We’ve learned the hard way that one of the most challenging aspects to building successful Magento e-commerce operations is to understand how it is configured, deployed, hosted and updated – overlaid by client-specific factors such as trading volumes and characteristics. We’ve evolved from using Amazon cloud, to designing a self-managed cloud-based environment and settling on a private network at Peer1 (a Magento Platinum partner), based on its Magento managed service offering, but pre-configured to meet our client needs.  This evolution reflects the learning curve and investment required to offer the high performance, flexibility and scale that our kinds of clients need.

Magento’s popularity, however, means that many web developers and companies have adopted the Magento platform without investing in the proper planning, organisation and support that e-commerce software can require. Some merchants have commissioned their websites on the “cheap and cheerful” Magento bandwagon: when the websites are live, the problems begin. It’s easy to build a website if you don’t have to support it. Common short-comings would include critical hygiene factors such as consideration for performance and scaleability, a proper support and maintenance service (with ongoing handholding), professional development standards and code management, long-term attention to client’s needs for flexibility and ease of maintenance as well as implementation of security guidelines for data protection.

We have developed processes to migrate existing Magento websites and provide ongoing support and development to clients who need better support and service.

Because of our success over a period of time, Screen Pages was honoured with a Magento Partner Award at Magento’s global conference in Las Vegas in 2013: based in part on its exceptional client satisfaction ratings, its success in securing and implementing Magento Enterprise projects and its number of certified developers.

In April 2013, Screen Pages qualified for Gold partnership based in part on its exceptional client satisfaction ratings, its success in securing and implementing Magento Enterprise projects and its number of certified developers.

Our work with Magento has been recognised in the industry. The fashion start-up Atterley Road  was picked as one of Vogue’s Top 10 retail websites – a massive honour. Two clients – Loake Shoemakers and This Works – were honoured at the ECMOD Direct Commerce awards in April 2013. Loake Shoemakers received the award for the best British menswear brand (in the £5m-£30m category) and This Works received the award for Best Exploitation of Technology (for businesses with sales up to £25m). We’ve been invited to speak at Magento Live in the UK on two occasions. Working hard with the Magento community, we have forged good technical and commercial relationships with other complementary software and service providers, whether it’s module or extension providers (Sweet Tooth, Predictive Intent, DotMailer, Aheadworks, Flint, Ebizmarts, Mageworx, WebShopApps and many more), or payment gateways such as Sagepay or Verifone.   We’ve also done a fair bit of Magento customisation, whether it’s to offer particular delivery, customer service or fulfilment options, represent and navigate product catalogues in a specific way – let alone customising layout and user experience. We’ve learned there’s a wrong way and a right way to do this kind of work, in a way which protects the “core” of Magento as well as the interaction of 3rd party modules and future upgrades.

Many of our clients are operating multi-channel businesses or distributed (or sophisticated) fulfilment, so integration has often been on the agenda:  most actively traded websites are integrated with back office systems. We have worked with systems such as SAP & Navision at one of the end spectrum, to specialist mail order/direct commerce packages such as MNP & Khaos, to EPOS/retail systems such as Eurostop as well as 3rd party fulfilment/warehouse management houses: over 30 different back office systems all told.

We have now delivered a lot of Magento projects

Now, 5 years on, we have implemented over 40 Magento Community Edition websites, over 20 Enterprise Edition websites and actively manage about 50 e-commerce clients,  Our clients include fashion and lifestyle brands (such as Atterley Road, Begg Clothing, Choc-on-Choc, Christopher Ward Real Flowers and Rodial), reputable charities and not-for-profit organisations (such as the RSPB, BHF, the Bodleian Libraries, Kew Gardens and Historic Royal Palaces), established and trusted brands (such as Loake and Donald Russell), well-known mail order businesses (such as Micro-Scooters and Van Dal), trade and business suppliers (such as Demco, Snap On, Watco and Aston & Fincher). This range provides us with broad insight and drives constant innovation and improvement as online evolves. [See our Portfolio for a showcase of our e-commerce work over the 5 years]

Combined, online shops that we run receive over 100,000 visitors per day (and typical configurations have been tested up to 500,000 per day). In total, our clients take several thousand orders per day on average. Our client websites perform well:  they convert at an average of 3%. They are integrated with many different back office systems and they all run fast, reliably and securely.

Magento itself is now unquestionably the clear market leader in its sector and, you might argue, the most successful e-commerce platform on the planet. 33% of the market in the UK uses Magento, over 200,000 merchants worldwide (2,500 of which are using Magento Enterprise). $26bn of sales go through Magento (going on $50bn, given growth projections). There are 6000+ extension, 2,000 certified developers, 200 partners and, to boot, Magento is still searched for in search engines more than “e-commerce” and its website had 13m visitors in 2013.

Our journey with Magento has been hard, expensive but ultimately rewarding. Screen Pages has re-invented itself – so to speak – under the bonnet, whilst still offering the same proposition to its clients: best practice e-commerce, professionally delivered and supported.

By Roger Willcocks

Magento transactional emails: best practice for customer engagement

Magento transactional emails: best practice for customer engagement

Magento sends out abundance of onsite transactional emails for different kinds of customer interaction. These include account creation, email newsletter sign-up, order confirmation etc, let alone others (in Magento Enterprise) for order follow-up, abandoned basket chasers etc.

The standard layout is relatively bland (“quietly understated”). Whilst we tweak this to make them “on brand” (using the website styling), it is very rare that retailers embrace the fact that these emails are fully content-managed, so they can say what you want & how.

You are missing out on a major customer engagement, promotional, brand-building opportunity in not working these emails, in particular email subscription, account creation & order confirmation. Imagine this: your expensively acquired visitor is persuaded to come along to your website and is vaguely tempted by the idea of promotions and hints and tips (the promise of your email news service), and at this supreme moment of anticipation, they receive the rather drab Magento “newsletter subscription” confirmation email. #fail.

Here are some suggestions.

Email newsletter sign-up

Personalise the email. Restate the benefits of sign-up: special offers, news, hints and tips etc. Thank them and offer a promotion.

Email newsletter sign-up

Account creation email

The important elements are a guide to current promotions and major departments. We include a special offer to get the visitor to place that first order and explain the benefits of having account. Importantly, we refer the customer to other channels/touchpoints (such as Facebook).

Account creation email


Order confirmation email

The order confirmation arrives just after your new customer is putting their credit card back in their wallet – at the point of maximum expectation. As well as reminding her of the lovely items she’s purchased, try to get some feedback you can use to persuade other potential customers and perhaps reduce the load on your customer service team by publishing the answers to their FAQs.

Order confirmation email

Creating your own transactional emails in Magento

If you’d like to design & customise your own transactional videos, go to System/Transactional Emails in the Magento Admin Panel and you can edit the raw HTML yourself.

Need help? Here is an online video to guide you through the task.


SEO in Magento: optimising Magento eCommerce websites for search engines

SEO in Magento: optimising Magento eCommerce websites for search engines


Optimising Magento eCommerce websites for search engines.

What’s the most popular application on the Web? Search engines. What’s the most popular search engine? Google, by a country mile at over two thirds plus market share. Google’s database is currently used by lots of other search engines so applying the 80:20 rule, doing well in Google is a basic minimum requirement for getting new customers online. To perform well in Google, you simply follow three mantras: visibility, relevance and popularity.

Visibility is about basic mechanics; getting your site seen and indexed. Google works by sending out little “robots” that spider around the Internet, examining pages, titles, headers, links, file names, content and the HTML underneath it. Everything those robots can read gets indexed. Many eCommerce websites cannot be read at all, because products and their descriptions are hidden deep inside databases. Any information located in images, Flash and frames is also almost always invisible to search engines. Magento websites are particularly well built for being read:

  • the URLS are flat (i.e. don’t have odd characters and are succinct)
  • the pages are made of well structured HTML
  • Magento users have detailed control over SEO assets such as Page Titles and meta data
  • Google sitemaps are automatically generated
The most important asset is the Page Title (the TITLE tag and the name of the page in your browser window). The Page Title is the first line of Google’s listing on its search results page. There are also special HTML tags containing instructions about what Google should look out for.  For example your site’s description (META DESCRIPTION – which it adds to the database and makes up the next few lines on the results listing.  Of less importance nowadays are the key words (META KEYWORDS). Basic textual content is also scanned, such as headers and body copy.


Next, all this must be relevant. Relevance is about all the elements of your site pointing in the same direction, with the same context and keywords. Simply put, if all your pages talk about “power tools” all over the place, then Google will regard your site as relevant to power tools. The relevance check is designed to weed out cynical and cheap masquerading.

The thorniest aspect to relevance is getting those all important generic propositions (keywords) right. Keywords should be used to identify your generic proposition. For example, “tesco” would be specific, and “supermarket” would be generic. Doing well in generic searches is obviously harder and you could be up against some tough competition in a saturated market, especially for popular search terms, such as “computer”, “clothes”, “jewellery” etc.

seo_3Your products and page-by-page content is compared – almost mechanically – to those keywords. The more relevant it is, the higher you come in Google when those keywords are entered.

Choosing the right keywords is, of course, an entirely different matter. Inputs to this include your overall brand strategy and values, what customers are likely to enter in searches, what space your competition is after, what is achievable. Keyword strategy is quantitative and qualitative, creative and analytical. Ultimately, however, this is the virtual market sector you will occupy. We suggest the use of the Google Adwords estimation tool to quantify demand and saturation (https://adwords.google.com/KeywordPlanner).

Final tweaks can be made to your pages by customising the URLs to make them short and to the point, as well as relative to the content that they hold. By default, Magento uses product and category names to make these, but you should override those that are too long or contain redundant and irrelevant words. You can do this in the Admin Panel for each product and category.

seo_4A further suggestion to increase the number of relevant pages is to create additional pages containing relevant content: articles, lifestyle content, “how to” material, guides etc. Google will read and store these. These (and other content areas on your site – called “content blocks” in Magento are under your control through the Admin Panel).

Google can be assisted by the provision of signposts, in the form of a “sitemap”. This is a data listing of all your pages and their links which the Google robots will read with gusto. This can be set up in the Admin Panel (System/Configuration/Google Sitemap) and enabled in (Catalog/Sitemap). You will need to upload this to Google Webmaster Tools once you have “verified” your website – this is straightforward using the verification tag that Webmaster Tools issues and copying it into the same HTML Heads section.

When you have got this mixture of visibility and relevance right, your site will be well-armed for those Google robots. All the above points are under your control on your website, through the Magento Admin Panel.

Next, you need to become popular – one expert says it’s up to 80% of the battle. The Google Algorythm will give each page on your site a page rank. This page rank will affect how often Google visits you. For a mail order company, anything north of 6/10 will you give real competitive advantage in securing good rankings for your keywords and products. A more precise measure, together with a list of these links, can be obtained from Google Webmaster Tools.

The challenge is getting people to link to you. Webmasters do not exactly volunteer to give free links, especially to commercial organisations. There has to be a “what’s in it for me.” Bona fide affiliates are a great way of doing this: they provide a link, generating traffic and you offer them a modest commission. I don’t mean the type brought by affiliate marketing organisations: this brings traffic, but does not enhance your link popularity as Google ignores such links. People will link to your site voluntarily if it has meaningful, beneficial, informative content – especially where it is valued by a specific community of interest. Alternatively, get people to want to link to you for other reasons: you’ve got a good game, a survey or a vote, or perhaps even a weblog of personal or customer experiences. Send out press releases online with explicit links to your site. Or simply go round adding your site to directories (such as Yahoo! or DMOZ) and paying for the more respectable sources.

Nowadays the link-building landscape is crowded with the advent of social media and it becomes about quality, not quantity. Great content is king here and will generate the best links from other sites, personal or commercial. Like anything else, you simply need a plan and you must track performance.

All these “link building” devices, if well designed, will encourage web users to link to your site, which will boost your popularity and, in turn, get your site better and more frequently indexed. There’s a big caveat here: the content must, of course, be relevant in Google’s eyes.

seo_6My final point is about measurability. The web has unprecedented levels of accountability, making it easy for marketers to analyse, track and monitor the return on investment. You can see how you’re doing; just type in your products and keywords and see where you are. Looking at your website data (visible in packages like Google Analytics), you can track the number of visitors, where the referrals come from, and which search terms are bringing in those valuable customers.

Google Webmaster Tools can show the number of websites linking to you, as well as the search terms that work. In Google Analytics, you can view which generic search terms bring you traffic, by excluding all the brand-related searches (you should be top for that in any event) – this is the ultimate measure of success. Drilling down into the sales conversions of this traffic, you can assess the profitability of your SEO activity.

Page Titles (Title tags)
Title tags are the most important of the head elements for optimisation purposes (you can tell this as they form the first line of Google’s listing). There are a few basic rules that need to be followed when writing them:

  • They should not have more than 70 characters as search engines do not give weight past this number & they don’t display beyond this in many browsers
  • All pages should have unique titles that are relevant to the topic of the content
  • The title should open with the most important phrase for that individual page. The sentence is unique and also contains the important phrases for this page

Meta Description tags
The Meta description tag is important as all major search engines read and give weight to it. Google pays particular attention to what is said in this tag.  Again, Google displays this material in its search results. The rules are as follows:

  • The tag should ideally have 160 characters or less.
  • It is important to include 3 or 4 of the pages top keywords – using phrases that appear in the title tag is also thought to give more weight to this tag.
  • Any keywords that are deemed to be core to this page should appear close to the start of the tag – this should give them more weight in ranking of the page.

Meta Keyword tags
The Meta keyword tag was once thought to be the holy grail of optimisation, until spammers abused it. Now Google pays no attention to the tag at all, Yahoo and MSN both do but it is thought to be minimal in its effectiveness for ranking. The rules for this tag are as follows:

  • You should only use phrases that appear in the actual copy of the page – you would not be able to rank for a phrase in the Meta keyword tag if it is not mentioned anywhere on the page or has a links pointing to it with similar anchor text.
  • Think key phrases not keywords!
  • No more than 500 characters for this tag, but it is better not to use more than 200 because it may dilute the effectiveness of the tag.
  • This is a safe place to put misspellings as only the search engines look at it so the many people who have spelling difficulties can be targeted.

Magento has a habit of spawning multiple URLs for product pages and categories, especially via onsite search and filters. Remember to enable Canonical Tags for products and categories, in System/Configuration/Catalog/Search Engine Optimisations.

Image alt-tags (image labels)
Images with descriptive alt text are very important for ranking. Search engines cannot read images but do read and give weight to alt tags associated with images. The alt tags may contain targeted keywords in relevant cases. Screen Pages’ Magento implementations use product names as default Alt Tags for product images.  Content block images are under your control, so can be tagged appropriately.

Heading tags
Search engines place weight on any text that stands out on the page and because of this it is a good idea to put important phrases in h1 and h2… tags, and bold or italic text – typically product or category names. Screen Pages’ Magento implementations follow “best practice” by default.

Body copy
In general, all copy is under your control through the Magento Admin Panel.

For best results we recommend that each page has at least 300 words of copy on it. There are some cases where this much text can be difficult to place on a page but as the search engines really love relevant copy, you should do your best to increase the amount of words where you can.

  • This text should include your most important keyword phrases, but should remain logical & readable.
  • Be sure to use those phrases that you have used in your other tags (i.e. Meta tags, title tags etc).
  • Add additional copy filled pages to your site. For example, how-to articles, tips or tutorials. These types of content pages not only help you in the search engines, but many other sites will link to them too.
  • It is always advisable to use the page’s main target key-phrase within the first paragraph. This typically happens naturally, though it is worth ensuring so. Given that there will be around 300 words per page it would be advisable to have a keyword density of between 2 and 5%.
  • Whilst it is advisable to include the target key phrase in its exact form, it is also worthwhile using the individual component words separately. It’s also advisable to include keywords relating to the main topic of the page.

Link text (anchor text)
Both internal, as well as inbound links from other sites should contain the main keyword / phrase within the link text. This will inform the search engine what the target page is about, and help the page rank better for the term. Dynamic catalogue-related links are generated automatically. Other internal site links (such as footers or SEO-specific internal site links are under your control).

For a search engine to be able to index all the content, the site must have a good internal link structure. No page should be more than three clicks away. It’s advisable to have a sitemap of the main navigation structure of the website.


If you work on the visibility, relevance and popularity of your website, the number of visitors to your site will increase exponentially. Over time, you will develop a presence for your brand that is unassailable by your competitors and keeps you at the top of the pile and increases sales.

Contact us if you would like to discuss SEO in Magento in more detail or to book a workshop on SEO.

Make an enquiry

Email opt in (optional)

7 + 13 =

For information on how we process the data that you give us, please see our privacy policy.

Contact us

4 The Courtyard, Wisley Lane, Surrey, GU23 6QL


Connect with us

Pin It on Pinterest

Sign Up To Our Newsletter

Join our mailing list to receive the latest e-commerce & Magento news from Screen Pages.

For information on how we process the data that you give us, please see our privacy policy.

You have Successfully Subscribed!