The new markv design layout

The new markv design layout So you've got a new layout you say?

My new site is running on WordPress, the reason for this is well, because WordPress is awesome! I’ve used WordPress for only a short time, but in that time I’ve been able to pick up a fair bit with the resources out on the web and the intuitive nature of WordPress.

Theme development is something that I really want to get involved with, I will admit I am just starting this journey and I do find it hard time to time to get things done. I’m pretty comfortable with HTML, CSS and JavaScript but new to PHP.

So what was involved

As HTML5 is the way of the future, that is exactly what this site is built from. I’ve also made use of CSS3 for some animation effects on the icons in the menu, and used custom data attributes and pseudo elements to display them. I got this idea from Chris Coyier’s redesign of CSS-Tricks and thought it was a great way to add some extra visual elements to an otherwise sterile navigation menu.

It was also my first real project using a CSS preprocessor, so it was great to get my hands dirty and not have to worry about a deadline. I made the decision to use SASS as my chosen preprocessor of choice. Not just because “all the cool kids are doing it”, but I found it was pretty easy to pick up and set up my development environment. In conjunction with SASS I also used a compiler called Compass. The great thing about Compass is it will watch your project file, compile every time I make change to a file or folder and then refresh the browser (with LiveReload installed on Chrome). This helps speed up development time and reduces the need for me to refresh the browser window after every save. Another great feature of SASS is the ability to nest code, re-use values with variables and create mixins for repetitive pieces of code. I used mixins for all the brand fonts, site colours and the @media queries which lead me into my next adventure.

Responsive Web Design

The site itself is a responsive site, what does that mean I hear you ask? It means that the site will (well hopefully) display correctly and be user-friendly on most devices it is viewed on. So if you are viewing this on a mobile device like a phone or a tablet, then you should be able to use and interact with the site without issue. I’ve done this using @media queries and setting break points for these queries. Instead of targeting specific device width’s and orientations like some do, I’ve set break points where I feel the design of the site breaks down. This way the site can be viewed on any of the mobile platforms and tablet that exist, and those yet to be invented.

I hope you enjoy the new site, I’ve enjoyed the journey creating it and hope I can create something like this for you.

Here’s to getting it done.

Cheers,

MarkV