It’s Autumn 2015 and I’ve finally published a new version of neilorangepeel.com. Many experiments later I feel I’ve landed on something that I like. It’s tricky designing for yourself. I found myself aiming to create some crazy unique layout but the sites I enjoy browsing are the ones that look, feel but more importantly work like they’re are supposed to. Hopefully that doesn’t mean boring, there’s always room to surprise and delight users but the main aim is to provide a functional website.
Dicky dark scheme
This is the first time I’ve gone for a dark colour scheme on this site. I use the Dracula Theme for Atom—my text editor of choice, it has a great colour palette, vibrant pinks, greens and purples set on a space blue-gray background, it looks great and it’s super easy on the eyes for long periods. I tried to replicate something similar here.
I always use Brandon Grotesque, it’s just a super versatile, playful and all round workhorse of a typeface but it’s a display typeface meaning it’s great for large headings and navigation but the x height has too much contrast making it hard to read at small sizes, not ideal for body copy. Thankfully HvD Fonts have a text version Brandon Text, which retains all the charming character but is still legible at small sizes. I ❤ it.
Scaleable vector graphics are all the rage and rightly so. I have loved learning all about them, from exporting designs from sketch to hand writing SMIL animations. They are super addictive and i’ve peppered my site with a few fun ones and hoping to add more.
I feel like it’s trendy to hit on WordPress lately, I still dig it and enjoy developing with it. I was tempted to build the site on Jeykell or some equivalent to have absolute control over the code but WordPress is a massive part of my business and I think it’s sensible to learn and understand the tools you use especially if you are selling them to clients and customers.
Speparation of concerns
I’ve changed the way I develop with WordPress a lot over that last year. One of the main concepts being the separation of content and styling. This is not new to me after all HTML and CSS is exactly that, but when developing a new theme I’d slap all the functionality (custom post types, meta boxes, etc) within the theme’s functions.php file, therefore if I were to change the theme, that content wouldn’t be accessible to the new theme therefore you couldn’t display the content on the site.
Solution? You could create a custom plugin and as long as this plugin is active no matter what theme you’re using you’ll have access to this content. It is still up to the theme and plugin to work together to display this content. That’s where Jetpack comes in. Jetpack is built by Automatic the makers of WordPress.com and many users use this plugin as it adds a ton of functionality and you know it’ll be well supported. Jetpack often try out new features that often become core features of WordPress so if your themes already support Jetpack features you’re already one step ahead.
I built my portfolio using Jetpacks custom content type, this means when I change update this theme ill still have access to all my content.
Oh gosh how I love flexbox, it really is a game changer and thankfully there aren’t many projects I can’t use it on. I use it all over the place on this site without fallback as my stats show I have almost no traffic from browsers that don’t support it. Complex layouts become easy and easy layout become almost impossible to break, no hacky fixes that keep me awake at night. I’ve ready that it can have performance issues if you over use it but I haven’t noticed any problems.
I try to develop with performance in mind, I get a kick out off a fast loading site but I also love the full screen images. I’ve used SVG sprite for the icons which I use inline but ajax them in so they can be cached, a little trick I learnt here. All raster images are compressed and site files are gzipped and cached. I could definitely research critical css but hoping for a better solution.
I’m still adding stuff to the portfolio. Let me know if you notice any 🐞’s.