Hello there, you are viewing the previous version of my website. Check out my current website »

It's Time For A
Change


NextJavascript for Dummies


Yup, I redesigned my site. Well, maybe not a full blown redesign, but more of a realignment. This has been brewing for a long time now and I finally got around to it. Though the previous version is only a little more than a year old, so many things have changed since it’s launch - Web fonts, media queries (even though they were around back then, I wasn’t aware of them) CSS3 and more - I had to catch up with an industry that waits for no one.

Besides catching up technologically, I also wanted to address the site’s design and content. It was important for me to remove elements that served no purpose. For example, the massive footer was removed completely, the tabs on the home page that explained what web design, application and illustrations are (seriously?) - gone, and so on and so forth. I removed them because I felt they were a burden. They were never updated and really didn’t do anything for the user besides acting as eye candy.

The Projects page also got an organizational tweak. Previously they were divided into web / application / illustration. Since today there really isn’t any difference between web and application this didn’t make sense anymore. Further more, my illustrations are mostly done for private enjoyments, so they were taken out of this section. Now the projects are divided by a logical “client work” and “personal work”. I may just add the illustrations into the personal work in the future.

Preservation

In the beginning of the process I had to decide if I was going to overwrite the current site completely or keep it as is and move it to a “version 1” domain. After thinking about it for a while, and after reading two amazing articles by Jeffery Zeldman and Mandy Brown, I was convinced to preserve the previous version. Even with it’s flaws, it is still a great source of pride and I wanted to keep it for as long as I could. You can still view the older posts by simply going to the blog section and clicking on the “archived from ver 1 tab”. There you can see a ful list of all the articles from version 1, but keep in mind you will be redirected.

Typography

This was a major reason for the redesign. First of all, the previous site’s body text was awful. There, I said it. It was tiny, line height was too tight and the font itself didn’t make reading posts or project descriptions a pleasurable read. So, I replaced the body font with the ever so readable Meta Serif. The font size and line height have been adjusted so that they are not only legible on average screens but also adjust themselves to small and large screens with the help of media queries (we will get to these little devils later).

Typekit was still in private beta when the previous site was released, and I used it for body text, but with caution since web typography was still an unknown. Today that is not the case, along with things like lettering.js I no longer need images to make custom headers for my blog posts and case studies. This is a major development, not only for the sake of innovation, but also for accessibly, easy updating, flexibility and more. Having the title in html changes things in the media query arena as well.

Media Queries

Boy has this concept change the way I design. When first reading the article and talking about it with my peers I remember thinking that it was a load of rubbish. Things alter positions on different screen sizes? Heresy! But after a good few weeks of really thinking it through, I started liking the concept more and more, up to the point where I started implementing it into my designs.

For my site I decided that I wanted to blend the two worlds, fixed grids and media queries. I see nothing wrong with the 960 grid, yes it is a fixed grid but the proportions are perfect (for me at least). For this current update the 960 grid is the foundation and the media query principles are applied to it. For larger screens I keep the proportions but simply made the columns wider and elements larger, for smaller screens I shift things a tad, and for the mobile I leave only the necessary elements.

After implementing media queries for mobile and iPad, I realized that the real challenge is for the large screen. On a large screen you have all this empty space, and the first thing that comes to mind is to fill it up. So that is exactly what I did. By creating another column in the grid, the empty space was filled up by elements that would be seen only in this screen size. Like a visual enhancement for the privileged. After a while, this felt a little silly, since my original goal was to clean up the site. Instead I was essentially adding to it. It took me a while, but I finally realized - if the screen is larger, why not simply make elements larger, keeping the proportions of the grid intact. So in the 27” version, the 960 grid became a 1080 grid, body text switched from 16px to 18px (instead of making the line-width longer) and thumbnail images became larger because they had more room. This made me happy, but I found another fun way to implement the media queries. I use them in the blog and case study customization…

Blog Customizations

As you already know, my portfolio is influenced by greater designers. The idea of matching design to content and breaking free from the template took inspiration from the likes of Jason Santa Maria, Dustin Curtis and Gregory Wood. This version keeps true to this approach. In addition, I added a default template to use when the things I have to say don’t justify a full blown article. Those will be labeled simply as notes.

Besides the design tweaks that were implemented into the blog post and case study pages, the fun part of the new version was adding media queries to the customization.  Since there really isn’t any need for all the bells and whistles of a customized post or case study on a mobile screen, I simply removed customization for this view.

In the upcoming weeks, I will be implementing the Readability plugin into my site, so that if the customization is bothering you, you can simply strip it and read the post in the Readability view, adjusting the design according to your wants and needs. It is the 21st century, you should have complete control.

Let Me Know What You Think

So that is pretty much it. Since I am experimenting with new technology, things may appear poorly in older browsers. This was a calculated risk and one I was happy to take, especially as a designer in the web arena it is my duty to experiment with new and upcoming technology on my site. Even at the risk of losing a client or two that happen to view my site on IE6 with Javascript disabled.

It is also worth mentioning that this site is a work in progress and some things will be added slowly, like new/old case studies, 404 pages and more fun surprises. I just wanted to release it to the wild, and continue working on the smaller bits after.

I gotta say thanks to some of the people that helped me out. Trent Walton, Josh Brewer, Matthew Smith and Brian Hoff, thanks for looking out for a brotha. It means a lot! Ben Bodien thanks for tolerating my n00b coding questions and answering them in a way that my silly, right brained designer head can understand. Moudy Elkammash, thanks for all the dev backup help along the way. And last but not least, thanks to everyone that had a kind word to say about my previous site, it meant the world to me hearing such nice things. I hope this new redesign does justice to the previous one.

20 Comments

Julian

February 28, 2011

Well done! It’s beautifully simplified! And Web Fonts sure are a nice addition to your realm! My only nag is this form, it’s not as pretty as the rest, right now I’m writing in huge Courier…


Yaron Schoen

February 28, 2011

Thanks for the kind words Julian, and great catch! Hopefully it is fixed now.


Chandler

February 28, 2011

Beautimus. I love your reasonings and your button animations in the footer.


Tim Crossley

February 28, 2011

Great tweaks you made to the site Yaron! I also love the design of this post. Very nice!


Auré

February 28, 2011

Fantastic work as usual !

I really like your approach : 960grid + media queries and larger use of web typography. the overall is really well done and clever.

At first view I’m sure it should be a real pleasure to browse your website on an Ipad (the media queries + layout seems to be perfect for this screen).

The only thing I’m not really sure about is the 18px font-size paragraph text for wide screen _ despite the fact I think you’ve taken the right decision to not increase the paragraph line width (for legibility issues).

Well, to conclude… this re-align is absolutely great !

ps : and the design of this post too :)


Trent Walton

February 28, 2011

Great work, Yaron. I’ve gotta say that the amount of work you’ve done leaping ahead in regards to both the design & code-out is inspiring. Also, thanks for providing such an excellent use case for Lettering.js.


Rob Turlinckx

February 28, 2011

Awesome work! I allready was a great fan of the previous version. But I must admit the tweaks you’ve made here are really good, especially about readibility.


Colin Oakes

February 28, 2011

Nice job Yaron! You have accomplished the perfect balance of form and function.

The art direction and readability of each post always keeps me coming back for more.

Keep it coming!


Phil Coffman

February 28, 2011

Beautiful Yaron, just beautiful. Now you have me all mad at my site and making me want to re-do everything! That said, I’m happy to know you as a friend and fellow-creative who I consider part of my “I’m friends with this person but I’m also jealous of their talent so I’m inspired to be better” list.


Luke Dorny

February 28, 2011

This is very inspiring, Yaron. The look of it, the usage of browser space (even black on white in super narrow mobile mode!), and the warmth of every designed page (and the quotes!) make it a joy to browse and read. Great work, sir.


Lawrence Gosset

February 28, 2011

Inspiring stuff!


Yaron Schoen

February 28, 2011

Guys thanks so much for the kind words, really means a lot, especially after the hard work that was put into this re-alignment.

@Trent, I should really thank *you* and Dave for creating lettering.js. I wouldn’t have been able to create this update without it.

@Phil I am pretty sure you know that you are on my same list ;)


Rufus Denne

February 28, 2011

Wowzers! I don’t know if i’m more surprised about how awesome your new website is or the fact that you felt like it needed updating in the first place! I love it a lot! Keep inspiring!


James

February 28, 2011

Really loving the typography in the mobile version of the site and the large version looks very nice also. I will be looking into media queries today .


Julian

February 28, 2011

Wow, you actually responded immediately! My lazy ass would have just sat there for a while! This form is such a charmer now! Thanks Yaron! By the way, I can actually spell your name!


Les Reynolds

February 28, 2011

Love the iPhone version of the site! I really need to do something like this.


Lea Botwinick

March 01, 2011

How beautiful is this site!  Somehow I’m not surprised how your skills continue to amaze. You’ve really set the bar pretty high with this one, Yaron!


Matt Graham

March 01, 2011

Looks great as always man. Looking forward to catching up at SXSW. I think the Gingerman has been calling me for a few weeks now :)


Isabella Moreira

March 30, 2011

I love the new site redesign :3 I came across your site a few months before you changed it. My only complaint is that everything seems so…super-sized. I like things better small. But you’re a great designer and I look up to you for that. KIU :)


Gus Alaniz

June 14, 2011

Love the individual blog designs. Brilliant! Question: Are you using a CMS or are all these posts hand coded? If so for either, well done.


Add A Comment: