“What’s a Microsite?”

“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.

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

Luxury and streetwear brands like Gucci and adidas Originals are using microsites as a means to launch or promote their products, while beverage giants like Coca-Cola and Red Bull Music Academy tailor experiences to tell their narrative. The list of news and media outlets embracing this dynamic platform continues to grow — just take a look at Highsnobiety’s “The Making of Nike VaporMax”, The New York Times’ “This Gen X Mess”, Bloomberg’s “Bitcoin Bulls and Bears” or The New Yorker’s audio-filled Touchstones series where they dive into Missy Elliott’s “Supa Dupa Fly”. And that’s just scratching the surface of what’s out there. Visually rich and media-filled reads that break outside the conventions of these publications’ typical formats are becoming increasingly popular everyday.

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

Standalone microsites will typically live on their own subdomain, taking you into a new world to explore while allowing the flexibility for a white-label and bespoke experience.

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.

Iframe Microsites

A standalone microsite allows for truly custom experiences, whereas the iframe integrates more closely with the SSENSE editorial platform and Content Management System (CMS). An iframe is used to inject a standalone single-page application into our editorial platform. This allows for dynamic and out-of-the-box stories to come to life, providing more immersive experiences that go beyond the building blocks and modules of our typical CMS capabilities. The results range from richer video integration to visually compelling image layouts, to user-driven events like on-clicks or on-hovers. It also benefits from the ability to inherit all the articles’ metadata from the CMS, getting indexed and archived with the rest of our editorial content.

Some examples of this include:

• The debut of S.R. STUDIO. LA. CA. by world-renowned artist Sterling Ruby, which includes an original text written by the artist. The text appears on an infinite scrolling layer, running below the rest of the article and is animated with keyframes from {transform: translateY(0%);} to {transform: translateY(-200%);}.
• 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.

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

While the SSENSE ecommerce platform is built using Vue.js, our microsites use a combination of Next.js, a robust React framework, and Styled Components. This ecosystem allows for automatic code splitting, server-side rendering, page-based routing on the client-side, and quick delivery of content with minimal page load time or latency. It also creates easy-to-navigate component files where styles and functional logic live within the same document.

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

While this article only dips its toes in terms of the examples, possibilities, and technical aspects of microsites, it should give you a better understanding of their utility and hopefully a better grasp on the subtle differences between a microsite and a regular website. The directions one could take with microsites are endless and can be adapted to an individual need or situation. If you leave with anything after reading this, I hope it’s that you feel inspired to explore and experiment with the tools out there to create your own projects, whether for work, for yourself, or for fun.

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

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