The Nethergrim

Role:

  • Web Design
  • Web Development
  • Penguin Books

Always above the fold

The title and tag line were built so that no matter what device they were being accessed on, they would always encompass the entirety of the area above the fold. This would ensure that visitors would be immersed in the tone of the book on entry to the site.

On Desktop, the background image of this area would respond in parallax, lowering the top placement of the image while the text remained static to the DOM. At the same time, a child element with a black background would have its opacity adjust from 0 to 1 dependent on the user’s scroll position. I wanted the user to feel that they were being engulfed by the page, as the monster in the top of the background image slowly game into view.

To accomplish this, I had received the book cover PSD and broke down the elements of the cover so that I had exploitable imagery. The title and its background thorns were made to be one image, the two thorns on either side were created with the title element, with the text removed allowing for symmetry and to support a wide variation of screen sizes. The images themselves were converted into webp, so that compatible browsers (Chrome, Opera, AOSP Browser), would benefit from WebP’s lower file sizes.

Fully responsive through progressive enhancement.

The body copy was made into columns using CSS3’s columns property. In the event that CSS3 columns were unavailable, the font size would be increased in order to preserve readable line lengths. The advantage to this is that it allowed for simple break point adjustments, allowing tablets like the Nexus 7 to snap to two column grids without needs to adjust floats and lengths.