Finally Version 4.0 is here !

The reason I’ve been somewhat inactive on this blog for the past couple of months is the fact that I’ve been busy trying to overhaul this website’s entire design. This was long overdue and in the process I’ve been able to acquire some more knowledge in responsive web design… That’s right baby! this site’s fully responsive, and it feels great!

I’ve never been here, what did the old versions look like?

I. The Flash era

Well the oldest version, I’ve still got pics of that is, is the all flash version of this site. This was before I gained conscious of the true advantages that a blog can bring forth. At that time I used this domain as my main online portfolio and nothing much more. This plus the fact that I was experimenting with Adobe Flash for web design at the time pushed me towards an all Flash option.

Here are a few pics :

The Welcome Screen

ver2.1 Welcome Screen

The Home Page

ver2.1 Home Page

The Services Page

ver2.1 Services Page

The Portfolio Page

ver2.1 Portfolio Page

II. The Blogging era

In January 2011 I launched my first blog using the ever so popular WordPress publishing platform. The main reason was the explosion of design blogs to hit the web in that period. I knew I had to jump on the WordPress wagon as a lot of people were now demanding to have blogs incorporated into their website by one way or another. WordPress allowed that flexibility with its’ renowned ease of use, for both the designer and the client. Plus learning a few more tricks never really hurt anybody, it’s natural for a designer (as well as pilots for that matter) to keep integrating new bits of knowledge to broaden their skill set along their “career”. Anyways I came up with the following design, which some of you who may remember :

The Home Page

ver3 Home Page

A Single Post Page

ver3 Single Post Page

The Footer and Comment Form

ver3 Footer and Comment Form

You can already see some very poor design wise decisions I made at the time… The home page looked “okay” and I remember that my main aim with this design was to portray a maximum of my personality through the use of bright colors and a somewhat out of the ordinary layout. However, right from the start, I basically handicapped the future of my work with this poorly user friendly design. Again this was more of an experience than a really well defined project in my mind and I decided that it would have to do based on a true lack of time (Time, my arch nemesis). Retrospectively this was a bad decision…

The Relaunch

Finally having time to correct this haunting error from the past, I went for it!

As with every new design project I must consider current design trends and try to get on cue with the rest of the design world. While resizing the browser window on my old layout I couldn’t help but pulling my hair out and thinking “why did I leave this on the web for so long?”. It’s then obvious to say that a responsive layout had crossed my mind quite a number of times in the past. But where to start? This blog has a lot of files and content to bear in mind with a complete overhaul, not to mention that I had never experimented with responsive design either. This seemed like a daunting task but I was motivated. I chose to use the skeleton boilerplate because of it’s flexibility and simple media query method to achieve some very satisfying results. This not only gave the chance to work with a responsive design but an easily adaptable layout through the use of their variation of the 960 grid system. Now that I had a clear direction for which to aim I started working on a new logo and the PSD :

ver4 Layout PSD doc

The key words for this design were simplicity and flexibility for future updates. I couldn’t accept the constraints I imposed on my workflow with the last version of this site and knew I had to emphasize what was important on this site, the content. Once I was satisfied with the PSD I got to the coding part, and 1000+ lines of CSS later as well as the PHP, HTML5 and a few other scripts and plugins used, VOILA :

A Cross Browser fully responsive design

ver4 Preview Mockup

I’m still testing this layout!

Any feedback on some cross browser issues you’re having would be extremely appreciated! Here are some issues and further implementations I’m currently targeting in a future update :

  1. Webkit browser issues with rounded corner avatars on the comments output.
  2. Twitter Plugin in the footer returning an error (happened after the site went live…).
  3. Firefox quirky behavior on sidebar links.
  4. I’d like to include some nice on hover effects on thumbnails used in default loop returns, such as the home page.
  5. Expanding the layout to better suit 1280px+ monitors.
  6. Customizing the social media Icons to better fit the overall theme.

“the-the-h that’s all Folks!”!

Don’t be shy leave a comment or two, I’d love to hear what some of you have to say about this new design. Constructive criticism is always welcome here!

Previous Post
Moving towards ver.3.1
Next Post
Top Ten Items on any Designer’s Wishlist for Christmas 2012

Related Posts

Menu