Redesign 2013

Jayj Redesign 2013

February 2011 – 2 and a half years ago.

That’s the time since this site last got a complete makeover. A lot have changed in the last 2½ years, both in terms of the web, and my self.

So now’s the time for a new Jayj.dk.

I’ve taking the opportunity to go over some of the new things of the redesign – both the design and functionality.

The front page is no longer a list of blog posts but rather a useful frontpage, featuring my most popular themes, latest posts, and plugins.

Most people come to this site to download my themes which now is the first thing you see.

Notes about the redesign

Layout

For the layout, I use Flexbox. The amazing new layout mode is called “the future of CSS” and makes much it easier to do layouts in CSS.

If you want to learn more about Flexbox, here’s some links to get you started:

I use Modernizr to fall back to floats if the browser doesn’t support the latest Flexbox syntax. Firefox doesn’t support flex-wrap yet. To deal with that I use:

@supports not (flex-wrap: wrap) {
	[...]
}

If you use LESS, I have a gist with my collection of Flexbox mixins.

The site is also now responsive so it should look amazing on all devices. If not, please contact me!

Icons

I use the icon font Genericons around the site. It’s free and perfect for WordPress sites.

It’s used for post format icons, button icons, social icons and more.

Example of Genericons
Example of Genericons

Font

I use the gorgeous, and hugely popular, Open Sans typeface. It’s with no doubt my favourite font.

SVG

I use SVG for the logo and header background.
Some of the advantages of using SVG is they look amazing no matter what resolution, screen size, or zoom level, or the users device has.

The header background is a 708 byte SVG, generated by SVGeneration.


Powered by

It’s not just on the frontend there have been changes. A lot have changed in the backend. The site, of course, runs on WordPress.

Hybrid Core

The site is powered by the amazing Hybrid Core theme framework. I first used the framework for my Cakifo WordPress theme and it’s a pleasure to work with. It has features such as Get the Image, Breadcrumb Trail, per-post layouts, and super useful widgets. And the community around it is amazing 🙂

Plugins section

The plugin section is a custom post type, combined with the I Make Plugins plugin. The plugins automagically grabs the plugin information from the WordPress.org plugins repository so the information is always up-to-date.

Contact form

The contact form is powered by Gravity Forms instead of Contact Forms 7.


Pictures

Old Design

New Design

If you have any comments or spot an error, please let me know 🙂

Posted in on

10 responses

  1. Jasper

    First time visiting your website, so I didn’t get to see your old design. This new design is class, great design, everything stands out so clearly!

    Best of luck
    Ruairi 🙂

  2. Hi Jesper,
    Thanks for all your hard work it’s certainly appreciated by me and your helping me learn lots in an easy to understand way.

  3. Hi

    Great new design but what you use Flexbox over Bootstrap.
    I used your bootstrap theme to learn how the template worked as I do this just for fun I am not a pro, do you think Flexbox is easier for a novice.

    Cheers

    Ian

    1. Hello Ian,

      Thank you.

      I don’t really know if it’s easier to learn but I do believe that Flexbox is (a part of) the future of CSS layout. What sucks about Flexbox currently is the browser support and many different versions of the implementation.

      Eric Meyer’s talk “The Era of Intentional Layout” from W3Conf 2013 is worth a watch:

      He talks talks about some other new CSS layout stuff.

      Hope that helps you a bit. Feel free to write again 🙂

      – Jesper

Leave a Reply