Webdesigntuts+ |
How They Did it: Rebuilding 8 Faces Posted: 01 Aug 2013 04:35 AM PDT 8 Faces is an 88 page bi-annual, independently published, magazine centred around interviews with eight leading designers from the fields of print, web, illustration and type design. Each interview is loosely based around the question “if you could use just eight typefaces, which would you choose?”
8 Faces was launched in 2010 by Elliot Jay Stocks - a UK based web designer and self-confessed type nerd. Since then it has grown steadily and has become a business in itself with an expanding list of contributors and a very active Tumblr community. Issue one sold out in under one hour and subsequent releases have fared just as well. The range of 8 Faces products has also grown and now includes a limited edition range of type posters and a soon to be launched “read online” feature. Enter ParavelIn mid 2012 Elliot commissioned Paravel, Inc to redesign the 8 Faces online experience. Consisting of Trent Walton, Dave Rupert and Reagan Ray, Paravel have forged a strong reputation for creative, type-driven and responsive web sites including the DO lectures and one of the most visited sites on the internet, microsoft.com. Elliot explained why he chose Paravel:
At the same time as starting the redesign process, Elliot also made the decision to move away from a bespoke ecommerce system to Shopify – a hosted platform based around a simple to use and designer friendly template system. Shopify was a logical choice as the online store front for Viewport Industries (the small project based company we run together) has been using the platform for over a year selling both physical and digital products such as Insites: The Book. The Design ProcessWork began on the project in late 2012 and the first Basecamp message was posted on October 12th. Initial ideas were literally hand sketched and very loose as you can see from the image below. This “quick and dirty” approach allowed a number of key initial decisions to be made before any pixels were pushed. These included font choices and the choice of a non-tabbed navigation for small screens. As Trent explains:
HerokuAs the design phase moved from sketching into code Paravel began to share layout ideas and page designs via a simple PHP driven staging site set up on Heroku. As Paravel use Git as part of their daily workflow, and given the integration between Git and Heroku, this made perfect sense. Iterations could be pushed to GitHub and instantly applied to the staging site. As all parties were geographically separated this made things very easy. As Trent explains this approach suits Paravel well:
IterationThis process also allowed testing across multiple devices. Unlike the original 8 Faces site, built in 2010 at a fixed width, the new version needed to be fully responsive. Iterations were discussed on Basecamp, changes made and then pushed back to the staging site for testing. That said the project always had a loose process as Trent comments:
In fact looking back over the Basecamp messages there are only eight threads and 84 comments for the entire process, that includes the integration with Shopify and post launch tweaks. Grids and FontsNaturally, given the subject matter typography and grids were at the forefront of the design process. Again by creating simple pages on the staging site Paravel were able to share grids, gutters, breakpoints and typography choices easily. A great example of the various layout options is on the about page. Potential layouts in the final grid are as follows:
FF Unit Slab is used in the magazine and was chosen as the font for the new site too, more from Trent:
Fonts are served via TypeKit and fallbacks are relatively simple: body { font: 100%/1.5 "ff-unit-slab-web", "Georgia", "Times New Roman", serif; font-weight: 300; color: #666666; } As Trent explained earlier there are a number of breakpoints in the CSS file, each catering for different scenarios. Some are minor tweaks for type whilst others deal with large scale layout changes. Built using a “mobile first” approach the breakpoints are as follows: @media (min-width: 700px) @media (min-width: 850px) @media (min-width: 1100px) @media (min-width: 1400px) @media (min-width: 1680px) One clever trick employed is the use of media queries to resize the body font-size. As the initial body font-size is set to 100% with a 1.5 line height all subsequent resets will enlarge both the font and the line heights resulting in a smooth transition between screen sizes. JavaScriptWhilst JavaScript isn’t used heavily on the new 8 Faces site, it is used to great effect on the home page. Given that the main focus of the site is to display the printed magazine, there needed to be a way to highlight the covers and inner pages effectively. This was achieved with the jQuery plugin “Kinetic“. The plugin allows the visitor to drag the large hero image from side to side and view the photos of the latest issue in their own time. Ultimately this image is controlled the via Shopify theme settings page and allows Elliot to update it easily without a need to modify the Shopify templates manually. From PHP to ShopifyParavel completed their work around late February 2013. At this time Elliot and I took over the process and started to move the project from the PHP staging site to Shopify. Shopify uses the Liquid templating engine to pull data from the store into theme templates. By using simple output and logic constructs it’s possible to control the flow of data whilst retaining the design created by Paravel. 8 Faces is in good company, over 60,000 stores now use Shopify including a number of prominent web brands including United Pixel Workers, A Book Apart and Tattly. As a side note many web designers are now making considerable revenue from working with Shopify. If you haven't had the opportunity to learn about the free Shopify Experts programme it's worth a look. Over the last 18 months $18m worth of contracts have generated via the programme – food for thought! Thanks to the well laid out and commented staging site the initial process of transferring the HTML, CSS and JavaScript across to the Shopify theme was no more than a few hours work. The Progress was shared via a development shop – a fully featured Shopify test site that was password protected. This made it easy to share progress as product photography, descriptions and pricing details were added. Subverting the NormMost stores have a distinct flow. For example:
Shopify caters for this flow very well by using concepts such as collections and products. In fact each of these is mapped directly to two core templates, However given that there are currently only six issues Elliot made the decision that a separate detail page for each issue was surplus to requirements. In order to achieve this flow a subtle rethink was needed and changes were made to the {% if collection.handle == 'magazines' %} {% include 'collection-magazines' %} {% elsif collection.handle == 'posters' %} {% include 'collection-posters' %} {% elsif template == 'list-collections' %} {% include 'collection-listing' %} {% else %} {% include 'collection-default' %} {% endif %} By using the main <section class="container" role="main"> {% for product in collection.products %} <div class="grid-row col-3" id="{{ product.handle }}"> <div class="grid-unit"> <img class="cover-photo" alt="{{ product.title | escape }}" src="{{ product.featured_image | product_img_url: 'grande' }}" /> </div> <div class="grid-unit col-2"> <h2>{{ product.title }}</h2> {{ product.description }} {% for variant in product.variants %} {% if variant.available == true %} <form action="/cart/add" enctype="multipart/form-data" method="post"><input class="button" id="add" type="submit" name="add" value="Buy {{ variant.title }}" /> <input class="button" type="hidden" name="id" value="{{variant.id}}" /></form> {% endif %} {% endfor %} </div> </div> {% endfor %} </section> It is usual practice to loop over each product in a collection, using Liquid code, and output a link to the product detail page where the user can then add the product to their cart. <form action="/cart/add" enctype="multipart/form-data" method="post"> <input class="button" id="add" type="submit" name="add" value="Buy {{ variant.title }}" /> <input class="button" type="hidden" name="id" value="{{variant.id}}" /> </form> To make it possible to add the product from the collection page a As many products have options, for example colour and size, every combination has a unique Responsive ImagesGiven that the new 8 Faces is built for devices of all sizes the “responsive image problem” needed to be addressed. In the end Paravel recommended the use of the picturefill.js polyfill by Scott Jehl. Trent explains:
If you are not familiar with picturefill.js it describes itself as “a responsive images approach that you can use today that mimics the proposed picture element using spans, for safety sake.” It works very well and, when compressed, weighs in under 0.5kb. In order for picturefill.js to work you need to define a number of different image paths for each “breakpoint”. Here's the rendered markup from the 8 Faces home page: <div data-picture="" data-alt="8 Faces Magazine"> <div data-src="http://cdn.shopify.com/s/files/1/0074/0642/t/3/assets/home-page-hero-small.jpg?567"></div> <div data-src="http://cdn.shopify.com/s/files/1/0074/0642/t/3/assets/home-page-hero-medium.jpg?567" data-media="(min-width: 500px)"></div> <div data-src="http://cdn.shopify.com/s/files/1/0074/0642/t/3/assets/home-page-hero.jpg?567" data-media="(min-width: 1100px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript><img src="http://cdn.shopify.com/s/files/1/0074/0642/t/3/assets/home-page-hero-small.jpg?567" alt="8 Faces Magazine"></noscript></div> By creating three “theme settings” in the 8 Faces Shopify theme, an administrator is able to upload different images for each of the three different breakpoints. Once uploaded the <div data-picture="" data-alt="8 Faces Magazine"> <div data-src="{{ 'home-page-hero-small.jpg' | asset_url }}"></div> <div data-src="{{ 'home-page-hero-medium.jpg' | asset_url }}" data-media="(min-width: 500px)"></div> <div data-src="{{ 'home-page-hero.jpg' | asset_url }}" data-media="(min-width: 1100px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript><img src="{{ 'home-page-hero-small.jpg' | asset_url }}" alt="8 Faces Magazine"></noscript></div> Additionally, a simple true/false check is made in the template to ensure that the theme setting “Show hero image” is set. If it's not the markup is simply skipped over. Latest Issue Buy ButtonTheme settings were also used to control the “buy latest issue” button that overlays the hero image on the home page. To avoid hard coding the variant id of the latest issue into the template three text strings are entered into the theme settings page:
By using a cart permalink we ensure that if JavaScript support is not present the user will still be able to purchase the magazine via the URL link. However going straight to the checkout page isn't the ideal flow, it's preferable for the user to click a button and be taken to the cart page where they can adjust quantities and add other items to their order. Thankfully this wasn't too hard to achieve. By using the jQuery function Additionally, if and when this id is changed, the code will not need to be changed – which is handy. There are many uses for this approach and this is just one simple example: /* Hijack buy button on home page to submit the form */ $('.hero-unit').wrap('<form id="hero-form" action="/cart/add" enctype="multipart/form-data" method="post"></form> '); $('<input type="text" />').attr({ type: 'hidden', id: 'id', name: 'id', value: '{{ settings.home_hero_variant_id }}' }).appendTo('#hero-form'); $('a.blackflag').click(function(e){ $("#hero-form").submit(); e.preventDefault(); }); Finally we hijack the default functionality of our anchor and instead submit the form when it is clicked. Re-launchThe site launched successfully on May 1st 2013 with the release of issue six of the magazine. With phase one complete, development continues and later in 2012 the ‘read online’ section will be added to the site which will result in every issue being available to read through the browser. Overall, everyone involved in the project was very pleased with the results, as Elliot remarks:
Thanks to Trent Walton and Elliot Jay Stocks for their help with this article. |
You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
No comments:
Post a Comment