Photo taken by: Ryan Bollenbach

With the rate at which web design and front-end development evolves, I felt a blog would be the best format for me to share my thoughts and ship new ideas. I’d like to keep things somewhat casual on here and also incorporate my personal taste in music, artwork, culture and videos.

I created this layout using the Whiteboard Framework for WordPress which is based on the Less Framework. It’s a lot of fun to work with and I’m starting to get the hang of it, I’m excited to enhance this layout as time goes on. I love how simple it can be to design and code a website that will perform in different browser sizes (this site also works on an iPad, iPhone, Android, etc.). I highly suggest that you check it out and read up on it if you haven’t already. I think Less would also be quite beneficial if you’re working on a network of sites sharing similar design elements, widgets, content holders and more.

This is the first layout I’ve created so far in which the wireframe was created in a browser. One thing that I noticed with Less is that it organizes your CSS based on queries for different browser sizes. I’ve typically organized my CSS by creating separate files for layout and typography in the past. The markup fairly straight forward, clean and it’s pretty easy to customize. The only thing that I’m not completely satisfied with so far is the transitions between different browser sizes when viewing the layout in a desktop browser. I’d like for it to be more fluid which I’m sure I’ll be able to figure something out for in a future update.

Ryan Carson wrote this awesome article Sketch, Skitch, Code! which explains the approach of sketching, iterating and then creating HTML based wireframes which they do at Carsonified HQ. I also enjoy sketching things out while I work, it’s cool to knock out ideas quickly and return to them later. If you have any insight about this workflow feel free to throw up a comment.

I’d like to try out this process with a team and see how collaborating like this works out. This workflow allows Photoshop, Illustrator and Fireworks to be used specifically for enhancements, fancy backgrounds, modules, buttons etc. I noticed that Elliot Jay Stocks went through a similar experience with the re-design of his site which I can relate to. Although I’ll have less portfolio items to showcase initially, I feel it’s more important to communicate new things that I’m passionate about and this definitely inspires me to create new work.

The fonts that I’m using are Baumans bt Henadij Zarechnjuk (for the logo), Montserrat by Julieta Ulanovsky  (for the headers), Merriweather by Eben Sorkin and Arial for content. I’m very impressed with what Google offers for FREE! It’s so nice to be able to simply add in a line of HTML and reference it through CSS. The interface while you’re selecting fonts is quite nice too, maybe other font sites could take advantage of this collection style system. It’s a very common use case for me to grab several fonts at once while I’m designing something and it’s nice to be able to download them all at once when you’re finished searching.

I experimented with the Adobe Browser Lab for cross-browser testing on this layout. It’s pretty handy to get an idea of what your site will look like as it serves up actual screenshots from browsers in real time. The current version is available until April 12, 2012 which I’m guessing after that Adobe may charge a monthly fee for. Test your page as it appears on the web or preview local changes you’ve made with Firebug using the BrowserLab for Firebug extension. It’s still ideal to have a dedicated machine for testing Windows browsers but if you’re using a VM, this takes up a lot less resources and it’ll give you an idea of how the site displays in many different browsers.