“What’s a Microsite?”

Wesley Yendrys
Aug 15, 2019 · 7 min read

What’s a Microsite?”, that’s usually the second question I get asked by colleagues, friends, and strangers when I try to explain what a Creative Technologist works on at SSENSE. The first question is usually “What’s a Creative Technologist?”, but that’s a question best saved for another article. Though the roles and responsibilities of a CT vary depending on where you go, microsites sit at a unique intersection between design and development, which are two important functions required for the role and play a large part in successfully building and delivering these microsites.

The term microsite can mean different things to different people, depending on who you ask or what Google search result you find yourself clicking into. I’d best describe a microsite as an extension of a brand’s main website or digital presence. As spaces for experimentation, exploration, and discovery, microsites are unconstrained by predetermined tech stacks, visual identities, or browsing formats. Marketing teams can extend these experiences for brand partnerships, promoting events, product releases, or as blank slates to tell in-depth and vibrant stories. These stories can be a single page, or exist on a larger scale hosting an entire narrative.

Image for post
Image for post

The title of Bill Gates’ 1996 essay said Content is King, and those words couldn’t hold more true today. With the last five to ten years showing growing popularity of mobile browsing, shopping, and reading, media companies and brands alike are looking to stand out and keep readers interested. Microsites are being sewn into the fabric of everyday content as a means to offer more immersive and visually rich web experiences. If a reader is surprised or delighted by what they click into, they might be more inclined to share and spread their discovery to their network, spend more time on the page clicking and prodding, and (ideally), funnel back to the parent site to discover what other kinds of engaging material or products they can consume.

Examples

As SSENSE continues to establish itself as a leader and driving force in fashion, culture, and technology, we challenge ourselves to explore the possibilities of microsites, by supporting our editorial theme weeks or our range of brand collaborations and retail activations. Microsites help fill a gap in the marketing and communication department and are an additional tool that can be leveraged depending on the initiative, whether it be related to content, a product push, or to an event. For the purpose of this article, microsites can be categorized into two varieties: standalone and iframe.

Standalone Microsites

Random Identities’ first collection, by designer Stefano Pilati, was debuted worldwide as a runway show at SSENSE Headquarters. A live stream of the event was hosted on a custom microsite, and delivered a See Now, Buy Now experience. To do so, the microsite included a shoppable module that used the video’s currentTime property to detect which runway look was currently shown, and paired this vignette with associated ecommerce products.

More recently, in an ongoing collaboration with Maison Margiela, we’ve launched ‘Index’. The microsite will be updated to host exclusive capsule collections as well as archival and editorial content. While intentionally visually primitive in its UI, ‘Index’ takes cues from a default HTML Directory Listing but moreover is a nod to the fashion house’s first digital presence and website from back in 2008. The microsite subtly blends in dynamic interactions like product image previews that follow your cursor, or full-width and multiple-layer tap-to-zoom editorial images.

Image for post
Image for post

Iframe Microsites

Some examples of this include:

  • Earth to Fashion which is a series of editorials exploring sustainability in the fashion industry and beyond that featured a set of hyper-compressed atmospheric video loops and live-type stretched by using transform: scaleY(2); transform-origin: 50% 50%;.
  • 50 Shades of Gray, an SSENSE editors group write where the color treatment of all 50 images was automated in code, with two simple CSS properties filter: grayscale(100%); and mix-blend-mode: difference; and revealed its full color on-hover.
Image for post
Image for post

To achieve this integration into our editorial platform, NPR’s Pym.js responsive iframe listener is integrated into the parent application (ssense.com) which listens for a child element (the microsite) to load and then populates the iframe. The Pym.js script grants dynamic resizing of the microsite any time the browser gets rescaled, while keeping it contained within the parent site’s header and footer. To do this, a short snippet is placed in the componentDidMount lifecycle method of the child component.

const pymChild = new pym.Child({ polling: 1000 });
pymChild.sendMessage(“childLoaded”, “ready”);
setTimeout(() => {
pymChild.sendHeight();
}, 0)fsd

Process

Microsites are an outlet to bend the rules and try new things, but they still go through the rigorous code review process before merging new projects into a master branch, and deploying it to production. Every Pull Request triggers a build in Jenkins, our Continuous Integration / Continuous Delivery (CI/CD) pipeline, which simultaneously runs tests on the newly pushed build. After all tests pass, the CI/CD pipeline automatically deploys a new image to our staging environment, where it gets QA’d before deploying a new release.

Getting a microsite up from its initial kickoff phase and deployed into production requires significant cross-company collaboration to ensure all the moving parts fit and work together. Any given project may include any combination of teams at SSENSE from Design, UX, Editorial, Product, Engineering, Brand, Production, Communications, Studio, and Translation, in addition to any external collaborators like freelance photographers, videographers, or brands that might be involved on a project.

For design, Sketch is typically used to mock-up static drafts across multiple breakpoints. However, there’s been a recent temptation to make the switch over to Figma for its collaborative in-browser versioning, which would do-away with the need for saving and sending new files everyday as a layout grows and develops. On occasion, quick rough sketches are mocked up in Adobe’s InDesign which allows for quick iteration and ideation before moving to a more detailed and rigid direction, and also provides the ability to quickly export PDFs for the purpose of presentations and internal circulation.

At SSENSE, we also need to deliver these microsites in multiple languages like French, Simplified Chinese, and Japanese. To handle this, we use react-translated and keep all the copy organized in a single translation.js file which maps to a set of keys and string values and is imported into their correlating components. The top-level component is wrapped in a <Provider/> tag and then passed translation props. Often, separate typographic treatments need to be declared and applied for each language, which is achieved by wrapping language-specific styles within the styled component using :lang(fr){...} lang(zh){...} lang(ja){...} tags.

Conclusion

Editorial reviews by Deanna Chow, Liela Touré & Prateek Sanyal

Want to work with us? Click here to see all open positions at SSENSE!

SSENSE-TECH

Ideas and research from the software, data & product teams…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store