mikeylicio.us 2016

(pictured: mikeylicio.us 2014-2016)

So if you follow me on Twitter you'll have seen me tweeting about playing with code for the last couple of days. Even maybe a few screenshots of the final thing which I've been working on.

Well, you're looking at it! It doesn't seem to look like much but I think that's the beauty in it. I've gone all out for simplistic design which also doesn't limit usability. Utilizing jQuery Plugins where I can, and custom jQuery for things like the menu and the automatic parallax images when I can't.

See, the sort of beauty of this new design of mikeylicio.us is that I'm still using MPress, I can still do everything I want to do from the back end, and I still have all the flexibility that my CMS offers to me, but the design is also working for the CMS now too.

So for example, if I insert an image into a post. That image is taken out of the HTML, optimized, and placed back into the page as a background image which can then have a title and description overlaid on top. All without any complex code inside my admin backend. I simply just have to click the same button which I have always clicked to add an image to a post.

There's also the "instant click" jQuery plugin which has made this site pre-fetch information when you hover over a link, therefore making it almost instantaneous when you're clicking from one page to the next.

I've also tried to reenvision the sidebar area. Did I really need it? I took a good hard look at it and I just saw that it was a space waster. I've moved that down to above the footer, and I think it's better there. I've also tried to splash that area with a bit of colour so that it is still eye catching but not taking away from the main page.

Perhaps my favourite thing however is the navigation. I only have 3 or 4 links in my navigation, and it took up a LOT of space. I've simply gone for a 'hamburger' menu on all devices which has a nice overlay effect with the links which you need. The header is sticky so the navigation is always available.

I've also put a lot of effort into the behind the scenes semantics of the code itself, making sure that I'm using the correct HTML attributes, tags, roles, etc. I've switched from div where I can and used main, article and aside, which are more semantically correct. I have also tried to introduce the WAI-ARIA roles on each of these tags and I've put metadeta from Schema.org where I can, though that is quite a large task to do, and when you have very little understanding / interest of SEO like myself, it seems just like I am doing it for neatness sake.

Anyway, I hope you like the new design. The main thing is that I do.

Seems refreshing.

 

Add a Comment →