If you haven't ever heard of Shopify before, perhaps you have taken up residence under a rock. Shopify is one of the most popular services for creating e-commerce solutions online, and they've recently redesigned their front-facing site.
Today, we're going to take a look at some of the finer details of the redesign, and talk a bit about how the redesign was achieved. Let's dive in!
All About Responsive
The shift to responsive is the primary change Shopify made in this redesign, and the level of detail at every breakpoint leaves no user behind.
Shopify is a great example of design decision making based on screen-size. Let's take a look at some of those examples, starting with the homepage.
For the duration of this article, we'll use the term "mobile" in reference to the smallest breakpoint, "tablet" to refer to the next breakpoint size, and "desktop" to refer to the higher breakpoints. There are more than just 3 basic breakpoints in this design, but these terms give us a framework for thinking about devices.
Homepage, Header
Mobile
At the mobile size, we see a clear call to action, Get started, which is echoed twice. We also see a minimal version of the shopify logo, a centered tagline, and a vertically-stacked green color block with an overlaid feature of a Shopify customer. A hamburger style menu button is placed in the top left of the header.
Tablet
As soon as we move up to the tablet breakpoint, we can see that the preference shifts away from vertical stacking, and instead the content is horizontally placed. The level of detail, or “content resolution”, increases; we see a more detailed logo (still centered), larger text, and the image of the Shopify customer shows more detail.
Perhaps most interestingly, the green block shifts from the vertical stack to a horizontal alignment, floated to the right side of the header. We also see a Log In button next to the primary call to action at the top of the header. At the tablet size, we still see the hamburger-style menu as well.
Desktop
The highest level of detail in the header can be found in the desktop version of the header. The logo aligns to the left, and the hamburger menu is replaced with an explicit menu. We retain the horizontal alignment shown in the tablet breakpoint. On the left side, the Get Started call to action is converted into a form submission button, with a text field for the user to enter their email address. Below this, we see a brand new piece of content, “Trusted by over 100,000 store owners.”
Discussion
The header is a case study in making decisions for mobile. What are the most important elements that should never be removed? What elements are appropriate for each breakpoint and devices that commonly fit in that breakpoint? Shopify has chosen, for instance, to use the image of a single Shopify customer at all breakpoints, but only show the quantitative message “Trusted by over 100,000* store owners” on desktops. These kinds of decisions are higher-level and are more than aesthetically focused.
*Note: since we started writing this article, Shopify has updated this number to 120,000.
Bonus Points: Use of the <picture> Element and Data-URI Images
It should be noted that Shopify is using many web-standard-friendly responsive techniques, such as the use of the <picture> element. Here is the markup for the picture of Corrine Anestopoulos:
The <picture> element loads different resolution photos based on the device’s resolution, avoiding issues like double-downloading, abuse of CSS’s background-image, and non-semantic JavaScript loading. This allows for devices with high-resolution screens to request higher resolution images; note that you won't find pixelated images throughout any of the redesigned pages on Shopify.
Shopify is also using base-64 encoded data-uri's to define certain images throughout the design, including the slight texture on the green block in the header. This avoids an unnecessary extra HTTP request, and is particularly effective for smaller detail UI images that can’t be converted to SVG, and repeating patterns.
Speaking of SVG, the Shopify logo also uses a base-64 encoded data-uri to define an SVG image. This works in the same fashion as the previous uri-encoded images.
Navigation
The primary mobile navigation relies on a hidden off-screen sidebar that appears when the hamburger menu is clicked or touched.
The animation is accomplished using transform and translateX, in combination with the following transition rule:
The drawer itself is set to position: fixed, with an overflow-y rule set to scroll. When the drawer is opened, the body element receives a js-drawer-open class, which sets the height to 100% and overflow to hidden. This prevents the user from scrolling the content page while the nav is open.
A secondary navigation is present on some of the internal pages, which is simply a stylized <select> element. Here is the CSS used to stylize the <select> element:
Again we see the data-uri technique used for the down-arrow on the right side of the select, as well as the appearance rule, which defines base-level browser styles.
The same primary menu is used below both tablet and mobile breakpoints, but the secondary menu is only used below the mobile breakpoint. At the desktop breakpoint, the menus are shown explicitly, with the page-level secondary menu appearing at the top of the page. The nav bar itself utilizes Headroom, a JavaScript plugin for controlling the display of a sticky nav-bar based on different actions. For instance, on the internal pages, the primary nav bar hides as the user scrolls down leaving only the secondary nav visible, but the moment the user begins to scroll back up, the primary nav bar reappears.
Speaking of sliding menus, Shopify has chosen an interesting strategy for responding to clicks on Call-to-action buttons: a sliding drawer coming from the right side of the screen with a menu. This drawer shows on both tablet and mobile; on desktop, the form inputs are dropped over the top of a full-screen semi-transparent black background, modal-style.
“Sell Online” Page
The “Sell Online” page provides a few particularly interesting considerations for responsive considerations.
Header Call-to-Action
The header image is the first obvious responsive consideration, as it changes size at each breakpoint. But a more subtle change occurs at the desktop breakpoint. Instead of providing only a Create your store button, a form with three fields appears, inviting users to sign up and create a store in a single form submission. This follows the same pattern from the home page call to action.
Content Section Slider
Another content module that is repeated in multiple places shows up on the Sell Online page. At the mobile breakpoint, the module is essentially an accordion of content sections, each with a header and a + button that reveals the section. When revealed, the user may click or touch a - button to hide that section.
At the tablet and desktop breakpoints, however, the module changes to a more detailed horizontal button navigation.
Each button in the navigation is associated with a content block. The button copy changes from longer, more descriptive headlines to single words accompanied by an icon. The content sections themselves feature larger images associated with the section title.
This same pattern shows up twice on the “Sell Online” page. The accordion is also reused elsewhere, including at the mobile breakpoint on the Features page. An interesting difference, however, is that the accordion module is not always accompanied by the same button sections described above. In the case of the Features page, we see a fixed content navigation on the left-hand side, with scrollable, always-visible content sections on the right.
Information Resolution: Image Choices
In two sections, “Take your store wherever you go”, and at the end below “We're here to help, 24 hours a day, 7 days a week”, image choices are made at different breakpoints. In the “Take your store wherever you go” section, the image of an iPhone appears only at the tablet breakpoint and above. In the “24/7” section, an image of customer service representatives shows seven individuals at mobile and tablet breakpoints, but grows to thirteen individuals at the desktop breakpoint. This is accomplished using the <picture> element:
Note the IE9 specific <video> element; this allows IE9 to use the <source>. Shopify also uses Scott Jehl’s Picturefill, a polyfill for the picture element which supports most major browsers. (See browser support information here.)
Testimonial Carousel
At the mobile breakpoint, the testimonials show as single elements in a carousel.
At the tablet size and larger, these slides show in parallel to each other.
It’s not completely clear why Shopify chose to use a carousel instead of a vertical arrangement of the elements, but some informed guesses could be made. For example, Shopify might not have wanted to sacrifice the vertical space necessary to stack the testimonials so that the user could arrive at the final call to action quicker. Or it could simply be an aesthetic choice.
Pricing Page
The pricing page could be viewed as one of the most important pages on any given service marketing page. For that reason, it’s almost certain that Shopify’s decisions on this page were painstakingly thought through. Let’s look at how the content changes over the course of the different breakpoints.
Mobile
The user is asked to choose a plan that suits their budget, and is presented with three options: sell online, sell in store, or both.
Choosing one of these options changes out the pricing modules to match the particular situation you’ve chosen. This change is accompanied by a change in color as well. A subtle design decision made by Shopify was to use yellow for “online”, blue for “in store”, and green for the combination for both; this is particularly clever because combining blue and yellow actually produces green.
Once the user has chosen their point-of-sale, they are then presented with vertically arranged blocks that show the price and name of the plan very clearly. Each block also provides a “Plan details” dropdown to view the plan’s detailed information, like rate and features.
FAQs show up in the bottom in the accordion module discussed earlier. The accordion headers refer to the types of questions, and each section holds multiple questions. This differs from the common approach of creating an accordion for each question.
Tablet
At the tablet breakpoint, both the point-of-sale picker and pricing blocks shift to a horizontal layout.
Details are now shown without requiring a click on a dropdown inside each content block. The point-of-sale picker also shifts from text-only to text accompanied by an icon. The “Professional” plan is slightly vertically offset from the other two plans, and is marked as the “most popular” plan. At both the tablet and mobile breakpoints, a “Starter” plan is designed to grab much less attention, and doesn’t include the Try Shopify for Free call to action. Interestingly, the same lack of focus is applied to the Shopify Plus plan, which is for enterprise-level high-volume plans.
FAQs no longer live in an accordion, and instead show in a two-column layout.
Desktop
The only content-layout related change at the desktop size is the lesser-focused plans are brought into a fourth column alongside the three primary plans.
“Examples” Lightbox
Examples of Shopify themes are ultimately the best way to communicate the flexibility and use-cases for Shopify. These pages have employed a few great examples of responsive interactivity that we'd like to point out.
Mobile Lightbox Experience
Often, modal windows on mobile suffer from a lack of intentional design consideration for mobile users. This isn't the case for Shopify’s “example” modals. Focused on near-full-screen images, the modal provides navigational arrow buttons and metadata below.
Shifting to a tablet layout, the arrows and metadata float to the right of the image. The transition between each modal utilizes a scale and fade attribute shift. The transition suggests a zooming effect in and out of the index of images. At all times, when the modal is open, both a call-to-action and an × button are present, providing appropriate exit paths for the user.
The grid itself provides contextual filters to allow the user to navigate different types of themes on-page. The scale and opacity shifting effect is echoed here as well.
Footer
Shopify’s strategy for footer navigation reveals yet another situation where content resolution is employed. At the mobile breakpoint, two columns are shown:
at the tablet and larger breakpoints, two entirely new sections are introduced, providing more direct access to interior detail and “authority” pages (content-based pages that establish authority on a specific topic).
Ultimately, this shows that Shopify determined a strategy for content resolution: what content should be available at all breakpoints, on all devices, versus what content should only be available if the on-screen real estate is that of a desktop or tablet? These kinds of questions lead to a better overall content strategy, and should arguably be a part of all responsive design efforts.
Conclusions
Shopify has managed to pull off a stunning redesign, with high integrity both in their content development and their responsive considerations.
Furthermore, they have employed some of the best techniques that modern browsers have to offer. Even though there are still pages throughout Shopify’s ecosystem that have not yet shifted over to the new techniques and design system, the front-facing site and primary marketing pages provide a solid and unique responsive design model for web designers and front-end developers to learn from.