Thursday, August 1, 2013

Webdesigntuts+

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?”

8faces-v1

The original 8 Faces home page designed by Kyle Meyer

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 Paravel

In 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:

I would’ve loved to design the site myself, but I knew time just wouldn’t allow it, so I chose Paravel for their keen typographic eyes and extensive experience with responsive web design. They also very kindly allowed me to work with them, so I was still able throw some of my own design sensibilities into the mix.

— Elliot Jay Stocks
8faces-team
The Team (from left): Elliot Jay Stocks, Trent Walton, Reagan Ray, Dave Rupert and Keir Whitaker

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 Process

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

sketch

An early sketch to share ideas, many of these were shared in the Basecamp project

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:

Because it was Elliot, there was no need for Reagan and I to present pixel-perfect PSDs. He trusted us so once we got past rough concepts and layout explorations we took things to the browser. While Dave and I were coding we’d regularly spot awkward points in the design across widths/breakpoints. We’d kick things back and forth iterating in the browser and Photoshop — whatever tool worked best at the time. There's no clear path or method to the madness, but I like it that way. You just sorta fidget and nudge and squish until the kinks are out.

— Trent Walton
8faces-small-screen
An early small screen mockup highlighting the menu. Note the header is white in the early stages.

Heroku

As 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:

We try to stick to our speciality, which is taking things from planning to design and front-end code. We like to do whatever we can to make implementation as easy as possible for clients, so we'll stub out pages in ways that make handoff go smoothly.

— Trent Walton

Iteration

This 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:

With Elliot, we didn’t really log formal rounds of iteration. We probably have some Github commits that could show the evolution but that part of the process was delightfully sloppy with little regard for archiving.

— Trent Walton

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.

8faces-home-page-early

Early magazine archive page design and layout
8faces-home-page-early-2

The home page taking shape. Much of this layout is visible in the launched site.

Grids and Fonts

Naturally, 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.

8 Faces about page

The about page shows many of the column splits at work

Potential layouts in the final grid are as follows:

  • Even 2 column split
  • Uneven 2 column split
  • Uneven 2 column split
  • Even 3 column split
  • Even 4 column split

FF Unit Slab is used in the magazine and was chosen as the font for the new site too, more from Trent:

The magazine puts FF Unit Slab by Christian Schwartz, Kris Sowersby, and Erik Spiekermann to good use, and we did the same with the site. I love the entire Unit super family. A read online section is coming soon, and Unit really shines there. I can’t wait for people to see it.

— Trent Walton

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.


JavaScript

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

hero

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 Shopify

Paravel 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!

shopify-admin

The Shopify admin screen allows access to all the templates

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 header.php and footer.php formed the basis of the main Shopify layout file theme.liquid and various other PHP pages mapped across to other core Shopify templates such as page.liquid and collection.liquid.

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 Norm

Most stores have a distinct flow. For example:

  1. User visits home page and clicks on a product category
  2. User clicks on a specific product
  3. User views detailed product page and adds to their cart
  4. User clicks the checkout link and is taken to their cart page

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, collection.liquid and product.liquid. For reference a collection is Shopify is a logical grouping of products – in this case all six issues of the 8 Faces magazine.

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 collection.liquid template.

  {% 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 collection.liquid as a logic controller we can insert a specific snippet, a small chunk of reusable code, depending on the currently viewed collection. Therefore when we request to view the “magazines” collection Shopify automatically inserts the collection-magazines.liquid snippet.

  <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 form was used instead of a link to the product detail page. As you will see from the code above, the form becomes unique due to the hidden input field “id” which is given the value of the product {{ variant.id }}.

As many products have options, for example colour and size, every combination has a unique {{ variant.id }} – even if there is only one version. It's worth noting that the product details pages for the magazine have been designed and are present. If they are ever accidentally linked to, or accessed by someone correctly working out the URL, nothing will appear broken.


Responsive Images

Given 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:

We absolutely had to minimize file size for images, especially with the home page. We've used picturefill.js multiple times in the past, including an adapted version for the Microsoft homepage.

— Trent Walton

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 index.liquid template uses Liquid code to access the relevant images:

  <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 Button

Theme 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:

  • Text – The HTML string used in the buy now button
  • Text URL – A cart permalink (a URL that automatically adds a specific product to the cart and takes you directly to the checkout page)
  • Product variant id – The unique product variant id of the latest issue

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 wrap the hero image is wrapped in a form element. A hidden field is then appended to the form which contains the {{ settings.home_hero_variant_id }} pulled from our theme settings. As the JavaScript filename contains the .liquid extension Shopify is able to insert data from the theme settings before serving the file. This allows us to insert the {{ settings.home_hero_variant_id }} into our JavaScript code.

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-launch

The site launched successfully on May 1st 2013 with the release of issue six of the magazine.

8faces-v2

The re-launched home page design

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:

The Paravel guys are professional whilst still being great fun to work with, and the finished product is exceptional. I had no idea what they’d produce when I commissioned them, but I knew it would be something great, which it is.

— Elliot Jay Stocks

Thanks to Trent Walton and Elliot Jay Stocks for their help with this article.

No comments:

Post a Comment

//SEO SCRIPT POWERED BY www.alltechbuzz.in