Welcome to the Chronical of Arley McBlain. This site is intended for modern browsers, lovers of the web, and open minds.

Alas, but we do have fun with modern browsers, don't we? This project was made for browsers newer than IE8.

This old and stalwart browser has been a good friend over the years, but the day is coming when we'll move past some of its limitations and enter a brave new world of CSS fun! Since this is my personal resume I feel I can pick the system requirements and show off a bit ;)

I hope you can see this on a modern browser! If not, contact me anyways, and I'll show you in person what I'm capable of. :D

i
What is this?

Welcome to the chronical of Arley McBlain: a document outlining his work history, triumphs, and what makes him tick.

ArleyM: CHRONICLE

ArleyM: CHRONICLE

×
click me
S

Hi

I'm Arley McBlain. I'm a designer, developer, & dreamer.

In college I took Graphic Design Production, and a post graduate Interactive Multimedia. I graduated with a combined GPA of 3.994.

In the eleven years since college I have taken part in every step of web creation. I have jack-of-all-tradesy experience in strategy, UX, design, development, QA, content creation & management - but my real forté is in front end development (and specifically CSS).

I am currently the lead front end developer at Thrillworks Inc., where I make crazy awesome mobile friendly sites. Often in WordPress.

I love this industry, and our amazing community of creatives. I like to give back through writing, social media, forum contributions, and speaking at conferences and schools.

I am fueled by a passion to learn, experiment, and create unique and polished browser experiences.

 

When I'm not online I'm with my amazing wife, and two children in Burlington.

They're my favourite nouns in the whole world.

 

I'm always up for a challenge.

Below I have some testimonials from people I've worked with, links to writing, and some experiments. I'll also talk about some of the great work I've done with an amazing team, and some amazing clients.

GO!

est. 1981

1981
1981

Born. No internet.

Sleep for fourteen years.

1995
1995

Pentium II 233Mhz
+ 28.8 bps modem
+ Geocities

= Partytime.

1999
1999

High School Co-op at a small agency, Results Media & Marketing.

Itch aquired!

2001
2001

Student entrepreneur summer. Made my first personal site: Sore Thumb Graphics (Stick out).

2002
2002

Graduated Graphic Design Production.

Helping students with Peer tutoring.

2003
2003

Graduated Interactive Multimedia.

Juggled working in the college computer lab and Freelancing.

2003
2003 - 2005

In house Graphic Designer at Mail Boxes Etc.

Started blogging.

2005
2005 - 2006

New Media Developer at Benjamin James Marketing.

Start dating my future wife!

2006
2006 - 2010

Founded Debut Creative; freelancing and contracting for two agencies as web developer.

2010
2010 - 2013

Web designer, then Lead Front End Developer at Thrillworks Inc.

2014
2014 That time where we met.

History

Some career highlights (legendary tweets excluded).

Work

As of summer 2014 I've been building websites for nineteen years.

I've been extremely fortunate in my career: I've had the opportunity to work with great clients of all sizes, including some highly recognizable national and international brands like BlackBerry, Tim Hortons, Suncor, Petro Canada, Pet Valu, Manulife, and many others. I've had the opportunity to work in many sectors, and on projects of every scale. I've taken sites from concept to launch, and I've also collaborated focussing my attention to particular problem solving. I've worked solo, as a part of a team, and even collaborating with multiple agencies.

I've played many roles in many projects. My favourite role is in front end development; where I combine my background in design with my love of code to create truly creative and detail oriented pieces.

I would love the chance to talk about some specific projects I've worked on in my career in person. My contact info is way below all of this other cool stuff.

Specific skills

A strong design background matched with a solid technical foundation makes up my Front End Developer skill set. The specific languages and disciplines that I spend most of my time with include HTML, CSS, jQuery, WordPress, and media optimization. I love to innovate and find new and amazing ways to do these things.

I'm also a proficient writer - this skill applies well to documentation, post writing, and email (perhaps the most undervalued critical skill in the communications industry).

Experiments

All work, and all play make Arley a fun boy.

I strongly believe that setting time aside for experimental sandbox work is one of the most important things a front end dev should do for their career. Thinking in creative ways will help with problem solving in real-world situations. While some of my ideas are completely absurd, the process has made me a go-to guy for code problem solving online and offline.

Mobile Strategy
Iframe Experiments
ArleyM.com
Mobile Strategy

View mobile demo

By the end of the year mobile web traffic will be more prevalent in the world than desktop surfing. It's never been more critical to understand mobile browsers and users than now. I've been studying mobile options and technology extensively for the past four years. This mobile demo highlights some of the various approaches a website can take.

I am particularly excited about the RESS (responsive server side) portion of this demo (clients I've shown this to are excited too!). Combining responsive web design with server side logic is going to change the face of the Internet and how we solve the problems of RWD, while maintaining one code base and URL. At the time of making this I couldn't find another demo of this bleeding edge approach.

I also recently wrote about this in some more detail on ResponsiveDesign.ca.

Iframe Experiments

View iframe scaling

In brainstorming about a design comp I came up with a pretty crazy idea. "What if the websites on those devices worked in the browser?" So one night I did that. You can scroll and click links any of the websites in this demonstration. The iframes are exactly the size they should be for the devices. Want to try another URL? Enter it into the URL bar on the iMac's Chrome!

While this is just a gimmicky (yet cool) trick, it led to this more practical mobile site UAT tool. At the time, the mobile BlackBerry site would load different content conditionally based on platform and OS. Rather than muck around with many devices, or constantly switching user agents, this tool allows for side by side comparison. It's saving huge time and money for production and client review. In this demo I have a new iframe source that displays content differently based on query string to replicate what a real-world device would see based on User Agent. The possibilities with this are endless!

View QA tool

ArleyM.com

View my site

All of my crazy experiments have to live somewhere! I try to treat my own website as a production level sandbox. The 2012 redesign of my homepage ArleyM.com includes a bunch of things I've never tried before.

Among the firsts this site features a full body CSS3 radial gradient background, an html element with multiple tiling backgrounds (using a technique called the "cicada principle"), a custom made logo font, and unique responsive text (as written about on CSS-Tricks here).

The response has been incredible, garnering Twitter shout-outs from legends like Cameron Moll, Chris Spooner, and Chris Coyier. It also seems to get a lot of mentions by college profs and WordCamp speakers! You can read more about the details I put into this home page on this post.

Design

My background is in graphic design. This is a foundation I rely upon daily as a front end developer - if the design team hasn't given me every single detail a design needs I am comfortable to carry out a look and feel. Below are some samples of designs I created for clients while on the design team (components of these have made it to production, though none of these comps in their entirety were chosen).

Pet Valu

View my design

I work very closely with a design team. The current Pet Valu site was designed by myself and a fellow designer. He created much of the general aesthetic of the home page, and I adapted this to the rest of the website; click here to see a page I designed. In the design phase of this project I created an alternative design (pictured above). Components of this (such as the footer) were integrated into the site as it stands today.

Neelands

View my design

My design for Neelands Refrigeration revolved not around their product, but how it relates to people. While my design wasn't picked by the client in the end, it was the preferred comp by our art director, and the VP making the pitch. My "people first" approach was then grafted onto the other design, along with a few other UI components from my comps.

Solo Contigo

View my design

Argentinian wine makers Solo Contigo wanted a sleek, high quality look and feel for their site. This initial comp I designed was adapted to be exactly what the client was looking for. With a tight budget in mind I leveraged the skeleton of two WordPress themes to create this unique design. I then built and implemented the WordPress theme in record time!

Writing

Through blogging and being active in our web community I've had the pleasure of being asked to write for some pretty great journals. I have included this here as I think it highlights my attentiveness to our industry, the way I think, and the way I communicate. I keep track of all of the posts I have around the interwebs here.

CSS Tricks

Vertical RWD

Writing for CSS Tricks is always my favourite. The community is super supportive, and it occasionally gets me some attention elsewhere, like WIRED Magazine.

My best-received post of all time was about something I've thought a lot about (and have even been dabbling with on client sites): Vertical Responsive Web Design - the practice of catering designs for the vertical viewport size.

Six Revisions

Firebug for Designers

The web community is so unique in the world - I've grown so much professionally thanks to nerds who share. Giving back to this community is something that I'm passionate about. I wrote this "Firebug Guide for Web Designers" as a way of giving web designers and n00bies an understanding of the tools they need to start fixing their own sites. Teach a man to fish, and all that ;)

This may also reveal clues as to why I'm brought in to solve bugs on various projects every day.

Web Design Depot

You = bad client

This topic is near and opposite-of-dear to my heart: working on your own projects is incredibly challenging. In "You're a Terrible Client" I talk about these challenges and my 5 simple rules for over coming them. These are the rules that help me to work on my personal site, and web experiments.

What really makes writing and sharing exciting is the reaction of readers. I was very encouraged by some of the comments and Twitter conversations that followed this posts. Reading someone say "I seriously needed this. Thank you." truly makes this kind of work worth while.

Testimonials

Anyone can make themselves sound good! So don't just take my word for it. Here are some testimonials from people I've learned with, grown with, worked with, and worked for.

Wanna read more? (I mean, a lot more) I told you there were lots.

Peers
Coworkers
Employers
Project Managers
Clients
Professors

Hide extra testimonials!

Contact

I really believe the best years of my career are ahead of me. I'd like to talk to you about the work that I've done, and how I can bring something extraordinary to your team.

© Arley McBlain | Back to top
No more sound effects please!

Some notes

One can never just know what questions may be asked of them in an interview. If I'm allowed to cheat I may want to glance at this list of recent doings while employed at Thrillworks!

Naturally, it couldn't hurt if you took a sneak peek ;)


Specific Work Examples
  1. BlackBerry Thank You (volume)
  2. Threshold (process)
  3. Latest WordPress Blog Network (rwd + passion)
  4. Corma (client use)
  5. Suncor Sustainability (persistence)