Feature

Making This Site

The following details the design and development process of my personal website ericthor.com

Words are Important

I was working full-time in New York City. Everyday I took the bus between the city and New Jersey and while on the bus I had a really good look at how people occupied themselves. I say about ninety percent of my fellow riders were on their smartphones, a few others had tablets, some were reading books, and there was always at least one person fumbling with a newspaper.

On one particular ride back I was forced to stand in the aisle due to the lack of available seats. The bus was slovenly inching its way through the Lincoln Tunnel commuter traffic. I then notice in the darkness of the tunnel, everyone’s faces were illuminated by the blue-white glows of their rectangular screens. I never really noticed how ubiquitous it was. For almost every seat there was corresponding little square beaming blue-white light.

They were of all different shapes and sizes. Some screens were held vertically others horizontally. Some held the screens close to their face while others held it lazily at a distance. It was interesting to see that almost all were displaying the same thing. A clean white background with a few well spaced lines of large black text jutting across. People were scrolling and flipping through these lines of text. Lines of people absorbing lines of information.

These screens juxtapose alongside the few book readers really drove home the point that the medium has changed expanded but people have stayed the same. People want a good read and they’ll go for the medium that fits them best. The content contained within those words and within those screens were the conduit for transferring of information.

I hunched down and looked out the window and saw countless other blue-glowing screens passing by. Buses full of them, cars with them as well. The magnitude hit me. There are hundreds of these buses doing this each and every day all around the world. Not everyone has a smartphone, but the medium has diversified and one cannot even account for all the different mediums and environments people will read from.

The priority is on content and ensuring that the written words can be read on as many screens as possible. The makeup of many screens especially on smaller devices consist of mainly lines of text. Text, the written word is the currently the most efficient and fastest means by which humans transfer information.

When designing this site I kept this at the forefront of my mind. Content is no longer latched onto a single screen view. Content is also no longer latched onto its corresponding site thanks to RSS readers and apps. The structure of those lines and blocks of text are of the greatest importance. The word are important.

Ghost for blogging

For this site I opted to use the new blogging platform Ghost. Ghost is free and open sourced is powered by Node.js so it's super fast. Ghost keeps it simple and from its inception has had the right philosophy of doing one thing and doing it well, blogging. Ghost isn't bloated and specific for blogging.

Gulp for easy development

The first thing I set out to do was setup my development environment. This project was my first experience with Gulp. I've used Grunt before, but found that Gulp was a better fit for me. I followed this tutorial by Mark Goodyear to get started with Gulp.

The Gulpfile I created does a lot for this site. First off it compiles my Scss files into CSS. The CSS is prefixed and minified by Gulp as well. The Gulpfile also copies over certain Javascript plugins from my Bower repository. It then concatenates those plugins with my own authored scripts and finally minifies it for production. I've also setup gulp to compress my images and run alongside Livereload.

Templating

After I setup the development environment I set out to template the HTML layout of my site. When writing out this code I tried to keep everything simple, but very expressive. The HTML of a page are the the bones of an idea. You can pack on a much style as you like, but if your bones are disorganized or fragile things will start to crack.

HTML5 Elements

I used various HTML5 to add greater semantic meaning for myself and for search engines and screen readers. Instead of using just divs I used elements such as main, article, header, footer, and section. These elements are really import for the modern web. It helps give you a clear idea of your code, and also gives browsers a clearer idea of what is important and how your blocks of code relate to one another.

Handlebars

Ghost makes use of the semantic web templating system Handlebars. They've loaded on a ton helpers which make creating loops, and adding titles a breeze. Here is an example of a loop from Wordpress verse a loop in Ghost.

            <?php while (have_posts()) : the_post(); ?>
            <article class="article-index" <?php post_class(); ?>>
                <header class="entry-header">
                    <h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                    <div class="entry-meta">
                        <a href="<?php the_permalink(); ?>"><time class="entry-date" datetime="<?php echo get_the_time('c'); ?>"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></time></a>
                    </div>
                </header>
            </article>
        <?php endwhile; ?>

They're two different loops for sure. Though the Ghost helpers are simpler and and relate more clearly to their functions.

I the partials folders to break up pieces of my design and turn them into independent modules. For example instead of typing out the MailChimp subscribe block of code onto each page I can instead just write {{> subscribe}}.

Schema

I also added Schema markup to my HTML. Schema is special markup that adds structured data to your HTML for better indexing by search engine providers such as Google, Bing, or Yahoo. I focused on adding article Schema markup.

Styling The Site

Writing Css without a precompiler is tedious. I use and love Sass. In styling this site I made extensive use of the @extends which I'll talk about in a future post.

Colors

For color scheme I paired up dark and light desaturated blues with vibrant reds. I used RGB color values for greater control of the color.

Modular Scale

When setting up projects I like to set up a modular scale. Lots of folks base there scale on the golden ratio, but I opted to go for a more loose approach. I set the base value to 100% which usually translates to 16px. Then I create variable which hold the rem value of each size. The relationship between the sizes is almost incremental at first, but later becomes more exponential especially when looking at the largest sizes.

// Scale
$font-size-base: 100%; //16

$m-5:  0rem;       // 00 - 4
$m-4: .25rem;     // 04 - 4
$m-3: .5rem;      // 08 - 4 /2

$m-2: .75rem;     // 12 - 2
$m-1: .875rem;    // 14 - 2 /2

$m1:  1rem;      // 16 - BASE

$m2:  1.125rem;      // 18 + 2 /2
$m3:  1.25rem;   // 20 + 2

$m4:  1.5rem;    // 24 + 4 /2
$m5:  1.75rem;   // 28 + 4
$m6:  2rem;          // 32 + 4

$m7:  2.5rem;    // 40 + 8 /4
$m8:  3rem;          // 48 + 8

$m9:  3.75rem;   // 60 + 12 /4
$m10: 4.5rem;    // 72 + 12

Typography

After the sizing and colors are set I usually tackle the typography of the site. The site mainly uses three different font faces.

  • Georgia is used as the main serif font of the site. I chose to use Georgia because I can trust it to render well at most any screen size. Its very legible and doesn't require the user to load any additional fonts. The alternative would be to use a professional webfont. I wasn't satisfied with the free serif webfonts available and am not in the position to doll money out to Typekit or Hoefler & Frere-Jones. Georgia is used everywhere which can be seen as negative to a lot of people, but for me it is a positive when it comes to body text.
  • Roboto is used as the main sans-serif of this site. I like using sans-serif fonts for certain headings and interface options. Roboto had a bit more charter than Helvetica and wasn't as wide as either. I really liked heavier versions of this font face. Another benefit is that even though its a webfont since it is a sans-serif it has a pretty small file size.
  • Playfair Display is the font face I use for article headings and title. Its pretty and adds an element of emotion to each post. In the future I want to take a look at some more elegant didone font faces, but for now Playfair Display fits.

I take these font faces, colors, sizes, and many other attributes and construct text elements. I mix all these attributes together to create different headings body text and interface text.

For body text or long blocks of text the minimum size is 16px or 1rem. On article pages the body text size is larger when the users screen size is of a certain width.

Currently I use four different headings which section off the content throughout my site.

Cards

On the homepage you can see that most elements are separate in a sort of card format. I got the initial idea from Google Now and implemented in a fashion that best suited the sites aesthetic.

I think the cards idea is very helpful since its makes it easy to modularize the different elements both structurally and visually.

Transitions

I use transitions on all the hovering elements to create a smoother feel of activation as opposed to a more abrupt one without transitions in place.

Card Hover

Animations

The animations styles are located in a separate CSS file and are loaded later on in the site due to lack of priority. I love how the logo animation came out on the homepage of the site. The animations add a certain flair and directs the users focus. I think animations are going increase tremendously in importance in web design over the upcoming years.

I created the SVG logo in Adobe Illustrator. It's a simple monogram. I like to think that it is distinct.

Header

Javascript

I use Javascript and jQuery only when absolutely necessary. I added a few plugins such as FitVids, FastClick and Placeholdem. I also authored or modified a few scripts as well.

Quotes

At the end of the page I have a rotating block of text that displays a quote and its author. It's a really small touch that adds tremendous character to the site. I see it as a sort of easter egg which allows me to share my love of Oscar Wilde on most every page.

Scroll Animations

For animations that aren't in the users initial viewport I modified a plugin that adds a class start to certain elements once that element enter the users viewport. Once those classes are added the animation is started as well. This thus creates the effect that things animate as the user scrolls down. I currently only use this with the rotating footer quotes elements, but I've played with this effect with other elements such as images and blockquotes in articles.

Conclusion

I decided to name this initial theme Heim. Its the German/Norwegian equivalent of the word home. For now this site is my home in which I get to throw my thoughts around and yell back at the world. There is a lot to cleanup and I might start over with Jekyll in the near future. Though for now welcome to my home.