It’s time to redesign my site!

It has been quite some time since I updated my site and a new design was long overdue. You know how it is with redesigns, you’re never completely satisfied with design you have. I went through several different design variations before I ended up with one I believed best fit my style. This redesign wasn’t a mere change to the elements and concepts of my old design, but rather a change to every aspect of my site.

Why a new design? To begin with the lack of updates made to the site in general, meant I needed to return with something that would be noticed. My old design was quite outdated and I knew I could create a better one. The new one is bigger, brighter, and is all-around held together a bit better. Hopefully it proves to be better than my previous design.

Anyway, time for the specifics!

Site Structure

One difference right off the bat from the old design is the front page is now a general about me page instead of my posts page. My portfolio has changed from a static page to a custom post type which makes it much easier to upkeep the content. I removed category pages and the search form as their functions can be accomplished through tags alone.

HTML, CSS, and JavaScript

The site markup is HTML5 (Validation results for thomaslarangeira.com) and CSS3 is used for styling. The site was built with the HTML5 Boilerplate, 1140 CSS Grid, and Animate.css. HTML5 Boilerplate is of course an excellent starting point for creating a website which is why I chose to use it. 1140 CSS Grid is the grid system I used to make the site responsive. The various CSS animations for the text and images are all part of Animate.css.

There isn’t much going on with JavaScript, just some small scripts doing this and that. Modernizr being one of the most important scripts providing the various feature checks particularly useful for IE. I used the polyfill Respond.js with Modernizr in order for IE6+ to be able to use media queries for the responsive design.

The site looks best in Firefox, Chrome, Safari, and Opera. For the most part IE7+ looks good as well minus certain CSS properties not compatible with the browser. I did include CSS3 PIE which helps to give IE some of the features it is missing.

Responsive Design

My old design was not responsive in anyway whatsoever. It is a given that mobile devices are the future which means refusing to adapt is not an option. This site is fully responsive and will adapt to the width of the browser. I decided to go with a mobile-first approach which allows you to avoid having to override all the different classes for each media query. I went with four different break-points which I felt was enough to accommodate the major of the different desktops, tablets, and phones.

Typography

I tried to utilize web fonts much more than my old design which only had the one font for the post title. I really like the use of Dosis as my main body font, but I’m not sure it might be hard on the eyes for some. For page headings I chose Lobster and for secondary headings there is still Bebas, but it is the new and improved version Bebas Neue. Bebas is an excellent attention grabbing font and I just couldn’t bring myself to switch it out.

Verdict

I hate designing for myself. The problem is I never end up being satisfied with the outcome. I hate visiting other personal sites and seeing how amazing they look. I am much more a web developer than designer and so I lack the crazy web design skills.

In the end though I really like this design and will continue to use it till I feel inspired enough for a change. Thanks for taking the time to read this. Feel free to leave any feedback, questions, etc.