This version of the site is now archived. See the next iteration at v4.chriskrycho.com.

Version 3.0

This is chriskrycho.com, Version 3.0. I’m a little sad that I deleted Version 1, because seeing how far my sense of design has come over time would be worth it, the inevitable laughter notwithstanding. You can see the (much less dynamic) version 2 here. The amount I’ve learned about web design and development in the last year alone amazes me; I can’t wait to see how much better I can do a year from now.

Introductory aside

Designgineering is a silly made-up word, but it’s the closest I could come to describing my approach to web design and development. I think like a man who studied both physics and music composition in college (because I did), and that is reflected in my approach to design in general and this site in particular. I apply every ounce of creativity I can, but approach challenges systematically and carefully, working iteratively toward a solution. I design, and I engineer.

A confession is in order though: this first post is a bit more haphazard than the engineering side of me would prefer. My first posts are always, of a necessity, somewhat introductory, and also somewhat scattered. Introductions may not be the best way to launch a site (I’ve heard lots of opinions on this over the years), and a lack of extremely careful organization certainly isn’t (I’ve heard even more opinions on this).

The glorious thing about personal websites, though – especially blogs – is that they are in fact personal. They lend themselves to (thoughtful) rule-breaking and self-expression. If, like me, you find it strange to simply jump in writing about a topic without having laid some groundwork first, you’ll be sympathetic to my need to get this post out. If you’re not like me, you have my heartfelt congratulations for being undoubtedly much less weird, and I hope this post doesn’t bore you too much.

Down to business

The goals I had for this site design were fairly simple: it needed to be modern, have some personality, and be flexible enough to support a variety of kinds of content. The sorts of posts that will be coming down the line on From the Hearth, my family site, will be substantially different than those here (for one, there won’t be nearly as many pictures here, and for another, if I ever put a snippet of code up over there, I’m doing something terribly wrong).

From the getgo, I envisioned this site as being clean and somewhat minimalistic, using different color schemes and typography to differentiate the various parts of the site, and as up to date as I could manage with web technologies appropriate to this sort of site.

The biggest highlights for me with this relaunch are in the typography – an area I’m increasingly passionate about, and an area of the web which is finally coming into its own. Thanks to Typekit, it is now possible for me to supply every single font you see here to match my vision – not constrained by the vagaries of font installation or even browser support. (Go Typekit!) Of course, being a firm believer in both progressive enhancement and graceful degradation, the site still looks just fine if you have Javascript disabled and the fonts can’t display.

In addition, I made sure that the layout fits with best practices in terms of readability – the line lengths are not too long. I’m increasingly sensitive to line-length on the web personally, finding that sites where this isn’t taken into account put a much greater strain on me mentally. The last thing I wanted was to have that experience with my own site.

Responsive design was a requirement from the start; I absolutely love the ability the make the browser reflow properly for various screen sizes. In terms of implementation, I approached this from a mobile-first point of view, which at least in principle makes the issue of older versions of IE more tractable as well. In practice, they still proved difficult, but that’s no surprise. Media queries allowed me to make the site a bit friendlier for people with particularly large resolutions, as well. I hope that we’re entering into another era of screen resolution increases, in which case having sites that respond to larger screens will be increasingly important: who wants two thirds or more of their screen to be uselessly empty? Beyond just increasing the text size, we’ll need to continue thinking of ways to make better use of the space, including remembering that white space is good and valuable.

Visually, I’m quite pleased with how the site has turned out. There are a number of things on the back end that still require some tweaking – some of the newer features WordPress has implemented for tumblr style blogging in particular – but enough of the framework is solidly in place that I have no qualms about getting this ball rolling.

Here’s hoping the years ahead are both as intellectually challenging and as rewarding as the last one has been!

Discussion

  • Eric Dorbin thought to say:

    I must say, I do like the website. Simple, but not bland, streamlined and very mobile-friendly, interesting and/or entertaining and/or thought provoking with fairly frequent updates. Plus your clever names for, well, everything, particularly the buttons/links keep me mildly amused. You get the Cyer Nibrod seal of approval. Yay!

    Offer a rejoinder↓
    • Eric Dorbin thought to say:

      I would be cool in the future to see the addition of more color/ornamentation/decoration/pictures of the relatively subtle variety to make the place a little prettier. :)

      Offer a rejoinder↓
      • I’m glad to have the Cyer Nibrod seal of approval! I’m inclined to keep the page itself to a minimum of color (relying on what I have) so that as I include formatted code (on this sub-site), pictures (on the family or art) sites, etc., they can stand out. I’m also a big fan of keeping the color scheme restrained so it stays out of the way of the content. Too often, the decoration can end up distracting from the content itself, and that’s LAME.

        Offer a rejoinder↓

Your rejoinder to Chris Krycho

Opt for silence instead↑

Anonymity is most unhelpful. Please identify yourself!

You may use GitHub-flavored Markdown and/or 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>