ArleyM.com Redesign – Chapter X

February 11, 2012 - By

I can be my own worst client – but I’m a happy client.

I have been working on this refresh for a while now, and it’s finally live: the tenth iteration of ArleyM.com (est. 2003). Like any designer, I get sick of my work pretty fast, and the old site was no exception. I wanted to create a site that was way simpler in terms of content and updating (I will write about my creative process in another post). WordPress is a great platform for simple updates, and I was able to remove a lot of content.

The Front page

A personal site is a chance to do some things you’ve never done before! There are a few fun things on this frontpage that I’m particularly excited about.

  1. The inspirational “Be” text (that may or may not be below the fold) is responsive. Every 10px it changes up. Words are ordered from fewest characters to most on browser widths ranging from 300px – 1920px+ – this is something I’ve never seen done before. I have done this with the CSS content attribute. I realize there are better ways (as commented in the code), but I find this in CSS has a certain charm. Update: I have written more about this in detail here: http://css-tricks.com/lark-queries/
  2. There is a CSS gradient on the body element that add a dark vignette to the site (kinda like the show Top Gear UK does to their footage), which turns out to work well with browser resizing. You can see the CSS3 background better here without the brick wall: http://rle.me/misc/static7/nowall.php
  3. There is slight parallax scrolling you can see between the text content and pic of me. I know this effect is getting done to death, but I think subtly done like this adds some nice depth without being ‘in-your-face’.
  4. When the browser is resized horizontally the “Arley” goes on top of the image of me, while “McBlain” goes behind. Fun!
  5. The picture of me is cut out so that it slides over the brick background in a way that is simple, but delights me for some reason.
  6. The footer was a tricky fellow. If your browser is vertically short the footer is relatively positioned and will scroll into view. If you’re browser is tall enough it stays fixed in place (in other words, vertically responsive). If you’re full screen on a vertically oriented HD monitor (which is amazing by the way), the footer goes fat and loses transparency (or you’d see my legs get cut off in the interest of file size).
  7. The background brick wall is using CSS3 multiple tiling background images called the “cicada principle“, which is pretty amazing. It has less character than the original photo background; but is less of a distraction to the eye. This tiling technique is also 20x smaller to load (2MB vs. 60kb). You can see the individual wall tiles here.
  8. The Twitter / Thrillworks / Vcard icons are a custom font I created, and am still refining. I’ll be writing more about this soon, but it’s 2kb for 3 images I can scale without limit (sizing test), and add text effects to. I think the future will see a lot more custom fonting. I used High-Logic Font Creator Pro 6.5 which seems to be head and shoulders above other apps I tried.
  9. The SUP tag and arrows (like <– –>) under the inspirational “Be” text are a couple of things that are radically different across browsers. I’d be too chicken to ever use those on client sites, but I think live text is beautiful.
  10. Like any other site I’ve designed for myself, I’m tired of seeing my mug on this one already – but here’s the amazing thing about this site! The simple design lends to simple updates. All I need is a new photo and my site will look and feel very different. Sweet!

I still have so many ideas for this simple one-pager on my To Do list that I haven’t go to yet (easter eggs, punishing old IE users, etc.), but in the spirit of “release early, release often“, I’m going live without those. I’ve done some polishing for the PlayBook, which works great on iPad (though it doesn’t make the same use of the space).

Mobile Front page

There is a new simplified front page for mobile – no parallax, or picture of me. Basically just the blurb. It works the same way as the old ArleyM.com: a mobile detection script (using my mobile redirection method) will find out if the user is on a mobile and if they are it kicks them over to arley.me. I got rid of the “view desktop site” link as the current frontpage works on none of the mobile devices I’ve checked!

The Content

The blog part itself is very different too. I had lots of polish I wanted to do with the old site, but never got around to. With this laziness in mind, I decided to go with customizing an existing theme. In fact, the parent theme is WordPress’ default Twenty Eleven! It’s an amazing full-feature theme that is awesome to work with. I plan to keep “Chapter IX” of my site archived (it’s not perfect, some images are missing). This area of the site is also responsive. Fun.

It’s the most fun I’ve ever had making a site. It’s the most time I’ve ever spent on a single page. The experiments were a blast, the code is messy, and I learned a lot. I really hope you like it.

I love what I do.

Categorized in:

This post was written by ArleyM