ArleyM.com Redesign – Chapter X

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.

15 thoughts on “ArleyM.com Redesign – Chapter X

    • I am where I am today as a website producer from tearing into other people’s code. It would (will?) be a bummer to see my code used exactly like that, but it would be amazing to have it inspire other ideas. Time will tell!

      It may be too unique to be worth copying verbatim.

  1. Loving the redesign. I especially like the bit at the bottom where the “be” text changes with browser window resize.

    One thing I’ve noticed is that on Chrome (17), the home page has two scroll bars. Don’t know if that’s an effect of the parallax scrolling, but I guess you’ll want to know :)

      • Yeah, looking closely, I think that it could be to do with my screen resolution. I tried forcing my netbook’s resolution up, and it seems to have gone. Try putting your browser window below ~600px high, and see if the second bar appears.

        I don’t know if netbook users are significant enough to fix this, or even if it’s easily fixable – it’s certainly a very minor bug – unless you’re a web person you wouldn’t notice it, or you’d just think nothing of it.

      • Yeah, just checked back at home, and it appears the scrollbar appears when the browser window is less than about 660px.

  2. Great work! Creative and inspirational. Love the forward thinking and use of the monitor as a fluid canvas which draws the viewer to become involved. Thanks!

  3. Hey Arley, I love the idea of creating a custom font for icons (fontcons!). Do you know of any other font creator apps that work on mac that would allow me to import ai or eps files and create the fonts from icons I’ve created elsewhere? Also hoping that they aren’t to heavy on the wallet :D. Look forward to hearing from you on this.

  4. Hey AJ. Unfortunately after some research on this topic a while back I didn’t find that app. I love High Logic Font Creator for PC ($80), but the only Mac titles that allow for imports are really really expensive. Good luck!

  5. This really is really intriguing, You might be a extremely skilled blogger. I’ve joined your rss feed and appear forward to seeking far more of your fantastic post. Also, I’ve shared your internet site in my social networks!

  6. Hmm.. your maintenance mode counter on /ix is a bit off.. or i do not get some joke there?

    Please try back in 99797 days, 11 hours, and 20 minutes
    (on May 21, 2014 at 10:10 am).

    That is a lot of days. :)
    Nice site btw.

Leave a Reply

Your email address will not be published. Required fields are marked *

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>