How the new Wearhaus website was builtSeptember 15, 2015
This past summer, Wearhaus Frontend Engineer Intern Ray Kim was responsible for overhauling the Wearhaus website. The previous site was a simple Shopify template for pre-orders, but we were in need of a more comprehensive website. Instead of making our main site our Shopify store, Ray implemented a standalone site that focuses on the lifestyle of Wearhaus and links to a Shopify store via an “Order Now” button at the top of the site.
Want to know how Ray did it? Read on to delve into his first hand account of taking our official website from simply an idea to reality.
The main site is built on the Bootstrap framework for HTML/CSS/JS and Flask for deploying on Heroku. The design of the website is based on mockups and wireframes created by our Industrial Designer, Eugenio Altieri.
One of the major features we built was “hoverable tabs,” tabs that slide into view to display additional content. This way, as users interact with the site, they can hover over tabs on either the left or right side of the screen to learn more about various features of the Wearhaus Arc. The tabs were implemented using jQuery to control cursor detection and CSS to manipulate how the tabs look on various device widths.
For our product site, I created a custom template on Shopify, taking inspiration from a few of their existing templates on their Shopify Theme Store. The current Wearhaus template is inspired by the Solo template for creating a layout that focuses on a single item (in this case, the Arc) and the Brooklyn template for better design elements (e.g., black and white variant buttons, quantity boxes, grid layout for product pictures below the main product picture).
I spent a few days learning how to use Shopify’s templating language Liquid and their own web framework, Timber, before I started to extensively customize the template to include the color picker feature, the description boxes that go into more detail about various features of the Arc (e..g, wireless syncing, touch controls, wired listening, mobile app) and the technical specifications box.
The color picker feature lets the user click on a color in the color grid to change the light ring color and choose between white and black Arcs for display. To achieve this effect, I overlayed white and black Arc images over each other and toggled the z-index for these images whenever the user clicks on the “White arc” and “Black arc” buttons. For the colors, I overlayed PNG files of just the light ring on top of one another and wrote code so when a user selects a color, it styles all other colored light rings to have z-index=0 and have the current clicked color to have z-index=1. The z-index controls perceived depth of elements on the screen if there are overlapping elements; the element with the highest value will always be displayed on top of all other elements. Thus, the color the user sees is the color that is at the top of all other colored light ring PNGs since it has a value of 1 and everything else has a value of 0. The current feature is a lot of fun to play around with, but there are still lots of improvements we can make. For instance, we could add fade animations in between light ring switches and add tricolor picker options.
The biggest challenge of all, both for the main website and the Shopify site, was making the design responsive. I spent a lot of my time making sure the sites looked great on all screen widths. There’s debate over whether to design your layouts around fixed screen widths (e.g., mobile, tablet, desktop) or to be screen-width-agnostic and make it look great at all widths. The disadvantage of the latter is that it takes significantly more time to design and implement but it’s more prudent to design it that way because screen sizes for smartphones, tablets, and laptops/desktops will continue to change. A common compromise to this debate is a hybrid approach where you initially design around the standard mobile, tablet, desktop media queries and “fill in the gaps” as you go. I followed this hybrid approach because it allowed me to get the sites up and running in a reasonable amount of time while giving me opportunities to continually refine the layout at various screen widths.
Once the sites were built, it was time to start optimizing them to be not only functional, but also enjoyable to use. I specifically focused on ways to improve page load speed since that has a direct effect on a user’s experience with the site. I used Google PageSpeed Insights as a diagnostic tool and found that the sites could be improved by compressing images (I used tinyPNG for that), minifying code (I used minifycode), and moving certain CSS/JS files to be rendered after the HTML body has rendered. Losslessly compressing images, for instance, saved me 7.3MB of data. This had a significant impact on the page load speed since the main site’s design is very visual in nature and has lots of high-resolution images. There are still many ways I can optimize the site, such as leveraging browser caching, resizing images, and compressing code using gzip or deflate.
There’s still a lot of work to be done but I’m happy with how it turned out for launch. I’ve learned how to deploy a Flask web app on Heroku using Bootstrap as the underlying framework, use Shopify’s built-in frameworks and templating language to build a professional ecommerce site, design the sites with responsive design principles in mind, and optimize UX. I’m grateful to have had the opportunity to learn so much about something I’m passionate about and I look forward to continuing frontend work in the future!
Categorized in: Product Updates