Renew

Today, Iím excited! For a long time Iíve wanted to renew my web-home, but simply have not had the latitude with which to address the problem. What I really needed was time to think about what I wanted to show case, and ultimately how it would be displayed. What I came up with is much more simple, and concise then anything Iíve ever made internally. My only real sadness is that Iíve lost my beloved ribbon, but for me removing the noise has brought into sharp focus the things I want to highlight. As par normal, Iíll address the whys and howís of some of the decisions Iíve made.

Goodbye Noise

In 1964, Penzias and Wilson, two Nobel Prize winners (Physics) working at Bell Labs in New Jersey were consumed with finding the solution to a specific problem; background noise. No matter how they tried to perfect their instruments, they always received a consistent, vexing static in their supersensitive antenna. After much work, and some chance collaboration with colleges at Princeton, they found the source: The Big Bang. Itís a fantastic story, and well worth the read.

When I took the time to address the visuals of my site, I found similar noise all around. It wasnít that anything was massively out of place; there was just a lack of simplicity. What Iíve tried to do with the current visuals, is reduce the noise, and increase the simplicity; all without making it sterile.

Type

All right, let me just don some protective gear before addressing typography. Actually love what Trent Walton said on the subject:

ďSetting type on the web can feel a lot like grilling a steak in front of a crowd of your pit master friends.Ē

Agreed. One of the sentiments echoed from readers of my last version, was that longer articles quickly became difficult to read. The reason for this should be apparent, itís a small, sans-serif font, and when you get that many words over the breadth of a thousand pixels, it can be overwhelming. Originally Iíd made this decision in favor some somewhat compactifying my site, but patently, thatís wasnít the right choice.

For now, Iíve incorporated a beautiful Serif font for my solution. At 18pt, it makes for a beautiful read. Headlines are provided in the equally stunning Sans-serif face. I love the interplay that these two make on a single page Ė so from a typography view, Iím very happy.

On the development side, I still have a bit of work to do. Iím interested to try a progressive Viewport Sized solution, but for now the sizes are given in em, of course based on a 16pt base. In the near future, Iíll be using media queries to size the typography up and down according to the viewport size (an interim solution until Viewport Typography has wider support).

Partition

One of the greatest challenges to my web-home is to somehow capture all of my interests / works on a more or less comprehensive level. Up until now, any side projects Iíd done, or tools Iíd created were only tangentially connected. With this release, Iíve been able to gather some of these things up, and display them in my about section.

Right now this is only a view of me professionally, in the future I hope to be able to merge more of my passions than web development into something that is at once, catholic and yet not overwhelming. An attempt to showcase more of these passions has been made in my Timeline.

Timeline

This has been a pet project of mine since I first saw it introduced on Jeff Croftís site. Thereís a great conversation / linked article via Zeldman where they discuss ďthe merits of self-hosting social content and publishing to various sites rather than aggregating locally from external sources.Ē

 

For me, the idea of it is taking ownership of everything I publish, be that Twitter, Facebook, Instagram, Dribbble Ė anything I put on there want to aggregate into my own list, which is 100% under my control. On a later article, Iíll describe exactly how I created this aggregate Ė itís surprisingly simple, and only requires a minor knowledge of any backend language / data storage.

The Dark Mark

In the few years that Iíve been publishing content, Iíve never felt the need to create a ďmarkĒ or ďlogoĒ for myself as a brand. I still donít Ė but the mark you see there does draw a nice parallel with the Creative Commons license, under which I publish much of my content. On the flipside (quite literally), my trusty penguin scamper can still be seen safeguarding and maintaining my domain.

Progressive Development

When it came time to start migrating pixels to code, I knew I wanted to push the boundaries (as usual) of web browsers. Of course, the site is built entirely upon a responsive grid (still some more work to do here), and is supported on an em based scaffolding Ė this allows me to scale the site up and down, depending on device and available space. Right now Iím using this only in a limited capacity, but in the near future Iíll (again, quite literally), expand it to a fluid solution across large and small viewports.

The feat in which I am most pleased, the crŤme de la crŤme, is that the entire site is resolution independent. The same resources are served to an iPhone as are served to a Dell Notebook Ė and they scale as the zoom or pixel density allows. This is done through a menagerie of CSS3 and SVGs, with a little Responsive Web Design sprinkled on top. Itís a technique Iíve put into full swing across every new project I take on. More later on how Iím using WordPress in a new way (not using themes), and incorporating Object Oriented Javascript. Cool legumes.

TL;DR

As Iíve yet to learn how to be concise in my writing, hereís the skinny without the stories:

  • Minimalistic Visual Design to highlight the content rather than the background
  • New Typefraces expand readability, and expand / contract to devices
  • Entirety is a better showcase of where I am engaged professionally (eg Balllrs, CSSButton.me, Open Source code, Side Projects, etc)
  • Timeline: New fancy thing that aggregates and stores my published content from a variety of vendors, and displays it here for any curious reader
  • The Dark Mark: New mark that represents me, given by Voldemort
  • The usual blend of progressive techniques mushed together (CSS3, SVGs, RWD, OOJS). New and awesome WordPress solutions, OOJS.

So thatís it! Iím excited to finally have my podium back, and you can be sure Iíll be nerdraging, sharing, and publishing tasty web again in no time.

1 Response to Renew

    Leave a comment

    • You may use these HTML tags and attributes
      <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>