CINXE.COM
Cactuslab · Work · Retrospace
<!doctype html> <!--[if lte IE 9 ]><html lang="en" class="ie9 lte9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="js--html"><!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/static/img/favicon/ms-icon-144x144.2d537cba.png"> <meta name="theme-color" content="#ffffff"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@cactuslab"> <meta name="twitter:title" content="Cactuslab: Retrospace"> <meta name="twitter:description" content="We’ve given our friends at Retrospace a makeover — while the bones of their original site remain intact, the page templates have been rewritten for the mobile era. Pages load faster and are mobile and share friendly, the business logic and inventory management is smarter and we’ve simplified the checkout process for purchases."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/s8/3f/y0/z1/rs-harry-0-500-0-0.jpg?k=32ce1996f8"> <meta property="og:url" content="https://cactuslab.com/work/retrospace/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Retrospace at Cactuslab"> <meta property="og:description" content="We’ve given our friends at Retrospace a makeover — while the bones of their original site remain intact, the page templates have been rewritten for the mobile era. Pages load faster and are mobile and share friendly, the business logic and inventory management is smarter and we’ve simplified the checkout process for purchases."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/s8/3f/y0/z1/rs-harry-0-500-0-0.jpg?k=32ce1996f8"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="610"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Retrospace </title> <link rel="stylesheet" href="/static/css/main.min.9fa619f9.css" type="text/css" media="all"> <link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.f5d574c5.png"> <link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.8aa9891b.png"> <link rel="apple-touch-icon" sizes="72x72" href="/static/img/favicon/apple-icon-72x72.f8a44f32.png"> <link rel="apple-touch-icon" sizes="76x76" href="/static/img/favicon/apple-icon-76x76.8b365de5.png"> <link rel="apple-touch-icon" sizes="114x114" href="/static/img/favicon/apple-icon-114x114.27bae8dc.png"> <link rel="apple-touch-icon" sizes="120x120" href="/static/img/favicon/apple-icon-120x120.5d2efb29.png"> <link rel="apple-touch-icon" sizes="144x144" href="/static/img/favicon/apple-icon-144x144.2d537cba.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/img/favicon/apple-icon-152x152.ec29f70b.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/img/favicon/apple-icon-180x180.83b0e344.png"> <link rel="icon" type="image/png" sizes="192x192" href="/static/img/favicon/android-icon-192x192.fdddf555.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/favicon-96x96.d4326dad.png"> <link rel="icon" type="image/png" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="manifest" href="/static/img/favicon/manifest.1caa16a2.json"> <script type="text/javascript" src="/static/js/main.min.ecc35a3c.js"></script> </head> <body class="js--body -is-not-scrolled"> <div id="wrapper" class="js--wrapper"> <style> .site-logo { color: #0D7C82; } .external-link { color: #0D7C82; } .external-link:hover, .external-link:focus { border-color: #0D7C82; } .project-media .mediaitem { background-color: #0D7C82; } .project-media .deviceset { color: #002222; } </style> <div class="context js--context"> <header class="site-header js--site-header"> <div class="scrollbar-offset js--scrollbar-offset -is-fixed"> <div class="constraint js--constraint"> <a class="site-logo js--site-logo" href="/"> <span class="_sr-only">Cactuslab · </span> <svg class="glyph" xmlns="http://www.w3.org/2000/svg" width="36" height="50" viewBox="0 0 36 50" preserveAspectRatio="xMaxYMid meet"> <title>Cactuslab Glyph Logo</title> <g fill="none" fill-rule="evenodd" transform="translate(6 5)"> <circle class="bubble js--bubble" cx="16" cy="38" r="3"/> <circle class="bubble js--bubble" cx="6" cy="28" r="6"/> <circle class="bubble js--bubble" cx="16" cy="9" r="9"/> </g> </svg> <svg class="wordmark" xmlns="http://www.w3.org/2000/svg" width="123" height="25" viewBox="0 0 123 25" preserveAspectRatio="xMinYMid meet"> <title>Cactuslab Wordmark Logo</title> <g fill-rule="evenodd" stroke-width="0"> <path d="M16.14 4.01c-.987-.707-1.393-.943-2.264-1.238-1.16-.472-2.38-.65-3.658-.65C4.645 2.122.406 6.488.406 12.21c0 6.015 4.18 10.32 10.044 10.32.93 0 1.684-.06 2.67-.295.988-.236 1.452-.412 2.613-.943l-.638-2.005c-1.568.648-2.845.943-4.47.943-4.587 0-7.548-3.243-7.548-8.197 0-4.48 2.96-7.725 7.083-7.725 1.858 0 3.31.472 4.76 1.474l1.22-1.77zm9.36 14.744c-1.916 1.415-2.612 1.71-3.6 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.06-.825.407-1.473l4.993-1.29v2.83zm3.367 1.887c-.696-.11-1.045-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.116-.23-.116-.35-.116-.53 0-.76.638-1.18 2.032-1.18 1.683 0 2.554.59 2.554 1.65v2.42l-4.644 1.12c-1.974.47-2.96 1.77-2.96 3.78 0 2.127 1.392 3.54 3.598 3.54.93 0 2.032-.292 2.845-.763.464-.235.755-.47 1.393-1.06.117 1.296.755 1.77 2.613 1.886l.464-1.83zM42 21.06l-1.16-1.77c-1.103.826-1.916 1.12-3.193 1.12-2.845 0-4.644-1.945-4.644-5.012 0-3.007 1.8-5.13 4.47-5.13 1.22 0 1.974.294 3.02 1.18l1.276-1.83c-.93-.648-1.34-.884-2.21-1.12-.64-.177-1.28-.236-1.98-.236-4.13 0-6.97 3.007-6.97 7.253 0 4.13 2.78 6.96 6.85 6.96 1.33 0 2.61-.295 3.71-.943.11-.06.4-.237.81-.473zm10-.236l-.93-1.474c-.928.707-1.392.943-1.915.943-.464 0-.754-.236-.754-.65-.05-.116-.05-.41-.05-.824l-.06-.59v-7.67h3.54V8.67h-3.54V4.717h-2.21v3.95l-2.26.59v1.298h2.27v8.906c0 1.77 1.04 3.01 2.55 3.01 1.05 0 1.8-.35 3.37-1.65zm13.83 1.297V8.61h-2.263v8.257c-1.51 2.123-3.658 3.656-5.05 3.656-1.104 0-1.57-.708-1.57-2.36V8.61h-2.205v10.144c0 2.477 1.22 3.774 3.54 3.774 2.033 0 3.775-1.06 5.343-3.184v2.83h2.206v-.06zm12.496-3.48c0-2.12-.813-3.06-3.6-4.24-2.438-1-2.786-1.24-3.31-1.77-.23-.23-.347-.53-.347-.82 0-1 .98-1.71 2.49-1.71.52 0 .98.06 1.56.24.69.18 1.04.36 1.91.89l1.1-1.83c-1.108-.65-1.63-.822-2.618-1-.58-.06-1.16-.116-1.685-.116-3.13 0-5.05 1.47-5.05 3.83 0 1.65.87 2.537 3.485 3.657 2.38 1 3.02 1.355 3.544 2.12.174.177.29.59.29.944 0 1.06-.987 1.77-2.38 1.77-.93 0-2.148-.3-3.077-.77-.236-.12-.58-.294-.99-.53l-.93 1.887c1.336.707 1.86.88 3.136 1.12.7.118 1.28.177 1.86.177 2.845 0 4.587-1.415 4.587-3.833z"/> <path d="M81.836.413h2.206v21.703h-2.206z"/> <path d="M94.62 18.754c-1.915 1.415-2.61 1.71-3.598 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.058-.825.406-1.473l4.993-1.29v2.83zm3.31 1.887c-.696-.11-1.044-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.05-.23-.11-.35-.11-.53 0-.76.64-1.18 2.03-1.18 1.69 0 2.56.59 2.56 1.65v2.42l-4.65 1.11c-1.97.47-2.96 1.77-2.96 3.78 0 2.127 1.39 3.54 3.6 3.54.93 0 2.03-.293 2.85-.764.467-.236.757-.472 1.396-1.062.116 1.298.754 1.77 2.61 1.888l.466-1.83zm11.973-5.77c0 2.24-.522 3.54-1.974 4.54-.64.47-1.34.77-2.15.95-.41.06-.76.12-1.16.12-.82 0-1.34-.11-1.92-.41v-8.61c1.1-.76 2.09-1.06 3.31-1.06 2.44 0 3.89 1.65 3.89 4.49zm2.44-.12c0-3.89-2.265-6.49-5.633-6.49-.813 0-1.8.12-2.496.3-.523.18-.813.3-1.51.65V.42h-2.206v21.29c.64.29.87.41 1.335.47.697.18 1.916.292 2.67.292 4.762 0 7.84-3.01 7.84-7.728z"/> </g> </svg> </a> <nav class="site-nav"> <ul class="navlist"> <li class="navitem"><a class="label" href="/about/">About</a></li> <li class="navitem active"><a class="label" href="/work/">Work</a></li> <li class="navitem"><a class="label" href="/ventures/">Ventures</a></li> </ul> </nav> </div> </div> </header> <article class="site-content context-transition -fade-in js--context-transition"> <div class="constraint page-layout -has-no-aside"> <div class="page-body"> <header class="page-section project-information"> <div class="header"> <h1 class="title">Retrospace</h1> </div> <div class="body"> <div class="rich-text"> <p><span>We’ve given our friends at Retrospace a makeover — while the bones of their original site remain intact, the page templates have been rewritten for the mobile era. Pages load faster and are mobile and share friendly, the <span>business logic and inventory management is smarter </span>and we’ve simplified the checkout process for purchases.</span></p> </div> <p><a class="external-link" target="_blank" href="https://www.retrospace.co.nz">Visit site</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem -has-border -has-no-fade-top -has-fade-bottom"> <img data-aspect-ratio="1.5581818181818181" src="/assets/resized/sm/upload/dz/5j/id/gi/rs-home-crop-0-1100-0-0.jpg?k=d65682d17f" srcset="/assets/resized/sm/upload/dz/5j/id/gi/rs-home-crop-0-1540-0-2399-crop-1.jpg?k=968a70a027 2x" alt="Detail image for Retrospace" /> </figure> <figure class="mediaitem -has-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="1.220909090909091" src="/assets/resized/sm/upload/az/88/g2/28/rs-harry-0-1100-0-0.jpg?k=f08bd2657f" srcset="/assets/resized/sm/upload/az/88/g2/28/rs-harry-0-1540-0-1878-crop-1.jpg?k=1382c22a70 2x" alt="Detail image for Retrospace" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.9927272727272727" src="/assets/resized/sm/upload/m0/qs/8z/ae/rs-harry-zoom-0-1100-0-0.jpg?k=98c51722bf" srcset="/assets/resized/sm/upload/m0/qs/8z/ae/rs-harry-zoom-0-2200-0-2184-crop-1.jpg?k=e85c032df0 2x" alt="Detail image for Retrospace" /> </figure> <figure class="mediaitem deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/mx/io/p3/ph/IMG_8328-0-850-0-0.jpg?k=6e8f3d5560" alt="Detail image for Mobile" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/31/ic/c9/8n/IMG_8329-0-850-0-0.jpg?k=1185373b7a" alt="Detail image for Mobile" /> </div> </div> </div> </div> </figure> </section> <section class="page-section projects-more-of-type"> <h3 class="moreoftypetitle">More Web work</h3> <div class="project-list"> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#8899AA"> <a class="repositioning" href="/work/conversations-with-teen-mums/"> <h3 class="name">Conversations with Teen Mums</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.2340909090909091" src="/assets/resized/sm/upload/b3/yw/77/0t/cwtm-home-crop-0-440-0-0.jpg?k=66190e541b" srcset="/assets/resized/sm/upload/b3/yw/77/0t/cwtm-home-crop-0-880-0-1084-crop-1.jpg?k=8829a82391 2x" alt="Image for Conversations with Teen Mums" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#B96A2A"> <a class="repositioning" href="/work/pacific-gardens/"> <h3 class="name">Pacific Gardens</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.3136363636363637" src="/assets/resized/sm/upload/nm/9c/9n/3f/pg-home-crop-0-440-0-0.jpg?k=e8bbea4b20" srcset="/assets/resized/sm/upload/nm/9c/9n/3f/pg-home-crop-0-880-0-1154-crop-1.jpg?k=4599238cf7 2x" alt="Image for Pacific Gardens" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#239A39"> <a class="repositioning" href="/work/designers-institute/"> <h3 class="name">Designers Institute</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.4727272727272727" src="/assets/resized/sm/upload/u2/t2/83/ur/dinz-2-crop-0-440-0-0.jpg?k=60891c1730" srcset="/assets/resized/sm/upload/u2/t2/83/ur/dinz-2-crop-0-880-0-1296-crop-1.jpg?k=8a251a779a 2x" alt="Image for Designers Institute" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#445555"> <a class="repositioning" href="/work/jane-goodall-institute/"> <h3 class="name">Jane Goodall Institute</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/eh/t3/6u/fb/jgi-africa-crop-0-440-0-0-0-0-0-660-crop-1.jpg?k=fdc5ac4a49" srcset="/assets/resized/resized/sm/upload/eh/t3/6u/fb/jgi-africa-crop-0-880-0-1728-crop-1-0-0-0-1320-crop-1.jpg?k=fdc5ac4a49 2x" alt="Image for Jane Goodall Institute" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#337755"> <a class="repositioning" href="/work/first-light-farms/"> <h3 class="name">First Light Farms</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.2818181818181817" src="/assets/resized/sm/upload/k8/j8/11/tr/flf-recipes-crop-0-440-0-0.jpg?k=9b3b6b40f4" srcset="/assets/resized/sm/upload/k8/j8/11/tr/flf-recipes-crop-0-880-0-1128-crop-1.jpg?k=c364d9ed55 2x" alt="Image for First Light Farms" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#EECC22"> <a class="repositioning" href="/work/dictionary-stories/"> <h3 class="name">Dictionary Stories</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.4113636363636364" src="/assets/resized/sm/upload/vg/wr/hg/hh/ds-book-0-440-0-0.jpg?k=6dccab785b" srcset="/assets/resized/sm/upload/vg/wr/hg/hh/ds-book-0-880-0-1242-crop-1.jpg?k=5f8d4116bd 2x" alt="Image for Dictionary Stories" /> </div> </div> </div> </div> </a> </div> </article> </div> <a class="moreoftypetitle -allworklink" href="/work/">All<span class="extendedtext"> work</span></a></h3> </section> </div> </div> </article> <div class="adjacent-project-navigation"> <a class="arrow -previous" href="/work/cloudcheck/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/conversations-with-teen-mums/" data-target="1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> </div> <footer class="site-footer"> <div class="constraint"> <div class="copyright">©<!-- 2024 --> Cactuslab, est. 2001 <a class="backtotop js--backtotop -is-hidden">↑</a> </div> </div> </footer> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-748523-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>