CINXE.COM

<!DOCTYPE html> <html prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <base href="https://reaper.com/portfolio/49-coles-books" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Reaper, Reaper Enterprises, Website Design London, Website Design England, Website Designers, Digital Developers, Magento, Joomla, Wordpress, Internet Consultancy, Internet Solutions, Website Hosting, eCommerce, Domain Names" /> <meta name="rights" content="Reaper Enterprises" /> <meta name="description" content="Check out our portfolio for example website design, digital development, digital marketing and branding work." /> <title>Coles Books - Reaper Enterprises Ltd</title> <link href="/templates/reaper-v2/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href="https://reaper.com/search-results?catid=12&id=49&format=opensearch" rel="search" title="Search Reaper Enterprises Ltd" type="application/opensearchdescription+xml" /> <link href="/plugins/system/jce/css/content.css?badb4208be409b1335b815dde676300e" rel="stylesheet" type="text/css" /> <link href="/plugins/system/rokbox/assets/styles/rokbox.css" rel="stylesheet" type="text/css" /> <link href="/templates/reaper-v2/css/template.css" rel="stylesheet" type="text/css" /> <link href="/templates/reaper-v2/css/user.css" rel="stylesheet" type="text/css" /> <link href="/templates/reaper-v2/css/front-gridder.css" rel="stylesheet" type="text/css" /> <link href="/templates/reaper-v2/css/digital-design.css" rel="stylesheet" type="text/css" /> <link href="/templates/reaper-v2/css/icofont.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> div.mod_search129 input[type="search"]{ width:auto; } </style> <script type="application/json" class="joomla-script-options new">{"csrf.token":"d1c903753d501e75a47740196d720fb8","system.paths":{"root":"","base":""}}</script> <script src="/media/jui/js/jquery.min.js?65747de6bb99e4fbe0f380f2830c4baa" type="text/javascript"></script> <script src="/media/jui/js/jquery-noconflict.js?65747de6bb99e4fbe0f380f2830c4baa" type="text/javascript"></script> <script src="/media/jui/js/jquery-migrate.min.js?65747de6bb99e4fbe0f380f2830c4baa" type="text/javascript"></script> <script src="/media/k2/assets/js/k2.frontend.js?v=2.10.3&b=20200429&sitepath=/" type="text/javascript"></script> <script src="/media/system/js/caption.js?65747de6bb99e4fbe0f380f2830c4baa" type="text/javascript"></script> <script src="/media/system/js/mootools-core.js?65747de6bb99e4fbe0f380f2830c4baa" type="text/javascript"></script> <script src="/media/system/js/core.js?65747de6bb99e4fbe0f380f2830c4baa" type="text/javascript"></script> <script src="/media/system/js/mootools-more.js?65747de6bb99e4fbe0f380f2830c4baa" type="text/javascript"></script> <script src="/plugins/system/rokbox/assets/js/rokbox.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script> <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js" type="text/javascript"></script> <script src="/templates/reaper-v2/js/reaper.js" type="text/javascript" defer="defer" async="async"></script> <script src="/templates/reaper-v2/js/fx.js" type="text/javascript" defer="defer" async="async"></script> <script src="/templates/reaper-v2/js/reaper-slideshow.js" type="text/javascript" defer="defer" async="async"></script>  <script type="text/javascript"> jQuery(window).on('load', function() { new JCaption('img.caption'); }); if (typeof RokBoxSettings == 'undefined') RokBoxSettings = {pc: '100'}; </script> <style type="text/css"> body.site { background-color: #fefefe } h1,h2,h3,h4,h5,h6 { color: #00a738; } </style>    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KNWRBJ8');</script>  <link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon.png" /> </head> <body class="site pixgridder pix-scroll-load com_content view-article no-layout no-task itemid-125 fluid">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KNWRBJ8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=301492669952954&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>  <div class="body"> <div class="-fluid">  <header class="header" role="banner"> <div class="main-menu"> <div class="mobile"> <a class="logo" href="/"> <img src="https://reaper.com/images/branding/reaper-logo.png" alt="Reaper Enterprises Ltd" /> </a> <a class="btn-navbar"> <span></span> </a> </div> <nav class="navigation nav-collapse affix" data-spy="affix" role="navigation" > <ul class="nav menu mod-list"> <li class="item-102 deeper parent"><a href="/design" >Design</a><ul class="nav-child unstyled small"><li class="item-150 deeper parent"><a href="/design/website" >Website</a><ul class="nav-child unstyled small"><li class="item-120"><a href="/design/website/ux-ui" >UX/UI</a></li></ul></li><li class="item-110"><a href="/design/ecommerce" >eCommerce</a></li><li class="item-111"><a href="/design/brand-identity" >Brand Identity</a></li></ul></li><li class="item-108 deeper parent"><a href="/digital" >Digital</a><ul class="nav-child unstyled small"><li class="item-109"><a href="/digital/solutions" >Solutions</a></li><li class="item-124"><a href="/digital/apps" >Apps</a></li><li class="item-116 deeper parent"><a href="/digital/marketing" >Marketing</a><ul class="nav-child unstyled small"><li class="item-117"><a href="/digital/marketing/seo" >SEO</a></li><li class="item-118"><a href="/digital/marketing/social-media" >Social Media</a></li><li class="item-119"><a href="/digital/marketing/copywriting" >Copywriting</a></li><li class="item-123"><a href="/digital/marketing/newsletters" >e-newsletters</a></li></ul></li></ul></li><li class="item-101 default"><a href="/" ><img src="/images/branding/reaper-logo.png" alt="Home" /></a></li><li class="item-125 current active"><a href="/portfolio" >Portfolio</a></li><li class="item-163 deeper parent"><a href="/company" >Us</a><ul class="nav-child unstyled small"><li class="item-164"><a href="/blog" >Reaper's Blog</a></li><li class="item-112"><a href="/company/hello" >Say Hello</a></li><li class="item-141"><a href="/vacancies" >Job Vacancies</a></li></ul></li></ul> </nav> </div> </header> <div class="row-fluid container"> <main id="content" role="main" class="span12">  <div id="system-message-container"> </div> <div class="item-page portfolio" itemscope itemtype="http://schema.org/Article"> <meta itemprop="inLanguage" content="en-GB" />  <div class="pull-none item-image"> <img src="/images/blog/coles-responsive-view.jpg" alt="Cole's Books, eCommerce website" itemprop="image"/> </div> <div class="article-content"> <div class="page-header"> <h1 itemprop="name"> Coles Books </h1> </div> <div itemprop="articleBody"> <p>Coles Books is an independent bookseller in Bicester, Oxfordshire. We did a Magento 1x website for Coles and to give them the best foundation for continued growth, we migrated them to Magento 2x during lockdown. The restrictions of lockdown resulted in an evolving remit for the online site; whereas the original site only sold signed editions of books and artwork, as well as limited edition unsigned copies, the updated site would also have regular stock items as well. But the overarching goal, convergence, was consistent. The details on the website are inspired and informed by the real, physical details in the shop and we took full advantage of the opportunity to create a considered online space that embodied the heart of Coles.</p> <h3>Achievements</h3> <div class="max-article-width center"> <div class="pull-quote"> <p><span class="numbers">31% ↑ </span><br /><em>improved bounce rate<br /></em></p> </div> <div class="pull-quote"> <p><span class="numbers">133% ↑ </span><br /><em>organic search traffic<br /></em></p> </div> <p><small>Stats from Google Analytics comparing Dec 2020 to Dec 2019</small></p> </div> <h3>About the Design</h3> <p>As with the previous website, we took inspiration from the Coles logo and used its colours for the website's colour palette. We incorporated the ivy details as background graphics in the header and footer as well.</p> <p><img src="/images/coles-screengrab.jpg" alt="" /></p> <p>As with the previous website, a handful of regular customers were invited to provide feedback on the site before it went live. Having real customers review a site is a hugely helpful bonus. In this case, their feedback largely affirmed the design and content decisions we'd made, but it also helped refine elements on the site, like adding the ability to jump to older category pages.</p> <p>Check out our blog for full details about the <a href="/blog/item/95-coles-books-ecommerce-site">Coles Books website</a>.</p> <h3>Our Solutions</h3> <ul> <li>Responsive website design</li> <li>Magento 2x & WordPress content management systems</li> <li>Digital development for ecommerce website</li> </ul> </div> </div> </div>  </main> </div> </div> </div>  <footer class="footer" role="contentinfo"> <div class="container row-fluid -fluid"> <div class="span4 noleft"> <div class="moduletable-transparent_dark"> <div class="custom-transparent_dark" > <h3>We Believe</h3> <p>In the power of the web to help individuals and businesses accomplish their goals. Our experience in designing and building websites, SEO and social media are key tools in helping meet goals.</p> <p><small>View our <a href="/terms/">terms and conditions of sale</a>.<br /> View our <a href="/privacy-policy/">privacy policy</a>.<br /></small></p></div> </div> <div class="moduletable search-box"> <div class="search search-box mod_search129"> <form action="/portfolio" method="post" class="form-inline" role="search"> <label for="mod-search-searchword129" class="element-invisible">Search</label> <input name="searchword" id="mod-search-searchword129" maxlength="200" class="inputbox search-query input-medium" type="search" size="50" placeholder="Search ..." /> <input type="hidden" name="task" value="search" /> <input type="hidden" name="option" value="com_search" /> <input type="hidden" name="Itemid" value="133" /> </form> </div> </div> </div> <div class="span4"> <div class="moduletableblog-item"> <h3>The Reaper Edit</h3> <div id="213" class="blog-latest blog-item"> <p class="modulePretext">The latest item from <a href="/blog">Reaper's blog</a>.</p> <div class="even lastItem"> <div class="moduleItemIntrotext"> <a class="moduleItemImage" href="/blog/item/105-seo-help-optimise-image-alt-tags" title="Continue reading "SEO // How to Optimise Image alt Tags""> <img src="/media/k2/items/cache/048731097de322302aff7e52151c991d_XS.jpg" alt="SEO // How to Optimise Image alt Tags"/> </a> <h4><a class="moduleItemTitle" href="/blog/item/105-seo-help-optimise-image-alt-tags">SEO // How to Optimise Image alt Tags</a></h4> <p>Choosing an image that helps visualise your content is just the first step. For the visually impaired and search engines, you also need to write a great image alt tag. Here's how to write better image alt tags to boost your SEO.</p> </div> <div class="clr"></div> <a class="moduleItemReadMore" href="/blog/item/105-seo-help-optimise-image-alt-tags"> Read more... </a> <div class="clr"></div> </div> </div> </div> </div> <div class="span4"> <div class="moduletable"> <div class="custom" > <div class="contact-details" itemscope="itemscope" itemtype="http://schema.org/LocalBusiness"> <h3><span itemprop="name">Reaper Enterprises</span></h3> <p><span itemprop="description"><em>London website designers and developers</em></span></p> <address> <div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress"> <p><span itemprop="streetAddress">4 The Mews<br />6 Putney Common</span><br /> <span itemprop="addressLocality">London</span><br /><span itemprop="postalCode">SW15 1HL</span></p> </div> <p><span itemprop="telephone"><a href="tel:+442087804049">+44 (0)208 780 4049</a></span></p> </address></div> <ul class="social inline"> <li><a href="https://www.facebook.com/ReaperEnterprises" target="_blank" rel="noopener"><img src="/images/graphics/social/facebook.png" alt="facebook" /></a></li> <li><a href="https://twitter.com/ReaperEnt" target="_blank" rel="noopener"><img src="/images/graphics/social/twitter.png" alt="twitter" /></a></li> <li><a href="http://www.linkedin.com/company/reaper-enterprises-ltd/" target="_blank" rel="noopener"><img src="/images/graphics/social/InBug-30px-R.png" alt="linkedin" /></a></li> </ul></div> </div> </div> <div class="clr"></div> <p><small>© Reaper Enterprises Ltd 2024</small></p> </div> </footer> </body> </html>