The re-making of a website
I set out to redevelop my website about two years ago, with certain objectives in mind. The first thought was that it had to be much cleaner and simpler than it was. I long ago settled on the core three categories (web, photography and blog), but there needed to be very little else. I wanted to include some work I had done as part of me, as opposed to stand alone projects. I wanted to get rid of the old diversification of “who I am” and bring it all in under the one roof. I’m still working on this bit, so this will happen very soon.
I don’t blog very often, so dates seemed irrelevant (though I miss them now). To counter this, I wanted to make it to where I could blog when I wanted and not feel under pressure to meet any kind of required schedule. I used to think “Oh, I’d love to blog about that,” but the mere thought of drawing attention to a site which was half finished and to be honest, a bit half-assed, made me resist. I think this refresh will help alleviate this problem.
Initially, I wanted to make the site responsive. I wanted to give the site focus on content and imagery (I know, there’s very little. I’ll get to that). Over time, technologies evolved, along with my experience, so the goals changed. By the end of it, I had the following checklist I wished to meet:
- Make it responsive
- Use SASS
- Develop a WP theme from scratch
- Write only my own JS (no jQuery)
- Rewrite the inbuilt Gallery function
- Use SASS
- Make and use SVGs
- Use TypeKit
- and finally, use SASS
I’m really, really happy that the only one outstanding item on this list is the Gallery function. I’ve actually done this for a client, it’s just a matter of adjusting it slightly to match my own requirements.
As you can tell, even though it was two years ago when I started this process, using SASS has lately (but very quickly) became the highest priority. I only knew the bare minimum when I started out, but I was really glad to have put the effort in. It’s great, I love using it now. I recently purchased Dan Cedarholm’s SASS for Web Designers from A Book Apart, and it’s added to what I’ve already learned, ten fold. The SASS train is one we’re definitely all going to need to get on sooner or later, so if you haven’t already, buy a ticket.
I’ve been using WordPress for a number of years and found it fits the needs of the majority of my work. Yes, it can be slow and yes it can be an unwieldily beast to tame, but I’ve always liked it. It solves more problems than it creates. The only issue I properly had with WordPress is that I didn’t know enough about it’s deeper workings. So I decided this time to create my own theme from scratch. For a long, long time I had used Elliot Jay Stocks “Starkers” theme, but this fresh start, while frightening, was liberating (if you’re still finding your chops and are looking for a good base theme, Starkers is still the best). I never knew you could have a functions.php with NOTHING IN IT!!! Not that it stayed that way, but at least all the functions I understand now. I’ve also had far more control over the hooks and actions and I’ve been able to streamline the site far more to suit my requirements. I’ve still a bit to go, but I’ve worked on two projects since with themes started from blank slates and I’ve been much happier with the output by their end.
As part of this process, I wanted to re-examine how WordPress “does” galleries. The latest versions of WordPress have really good in-built support of galleries in the media manager. It’s now easier than ever to create and embed galleries of images. The way they look on output though, is not always great. As part of the learning process, I redeveloped how the gallery output is implemented. I’ll do another post on this at a later date. I haven’t fully incorporated this change into the site yet, but I’m much happier with the way it works than I was with the NextGen Gallery plugin, which I had used previously.
Scalable Vector Graphics (SVG) were on the horizon for a while and I wasn’t too sure whether I wanted to explore them. Ensuring that the (granted, minimal in quantity and size) graphics on the site remained sharp across screen sizes was paramount. When I found out I could actually write the XML code in the SVG file myself for my logo, I was ecstatic! I was able to take the “fold” device and create the SVGs for the category flags in the same vein. I’ve probably over simplified the way I’ve generated the files, but hey, they work and they look great. If I want to change any, it’s a very quick matter of opening the file in the IDE and it’s done. No PhotoShop or Illustrator required! I did create a PNG fallback for older browsers, but I’m going to be honest here and say, I really don’t care about older browsers. Come on people, let’s keep moving forwards, not backwards!!!
I love a bit of nice typography. It means everything to me. It’s the first thing I’ll notice about a site (especially if it’s bad). So in recognising that, I finally bit the bullet and signed up for a TypeKit account (I’ve paid for more online subscriptions and facilities in the past 12 months than I had done in the previous 12 years). This allows me use Tisa as the body typeface. I’m still using a free Google webfont for the headers called Roboto. I have to admit to not being one hundred percent happy with the marriage of fonts at the moment, but I can revise this in time.
Another bug-bear of mine was my reliance on jQuery. There was a time when my JavaScript was ok. I’d never profess to being a ninja or any kind of expert, but I could get by. When jQuery came along, I jumped on it and used it pretty much everywhere. Lately, as the library has slowly increased in size, I’d thought to myself “If I wrote the code myself, it must be lighter?” jQuery is fantastic for what it is, but it’s bulky, if all you want it to do is select a single ID. I also realised that I didn’t know how it was doing what it was doing. So I decided to write all the JS on this site, again from scratch, with no reliance on any library. That’s why my JS file is called “my-scripts.js” as opposed to “scripts.js”. I had fun with this, especially with the navigation and the related post thumbnail display. I appreciate any feedback you might have on these.
Finally, not making the site responsive was never an option. Ethan Marcotte pushed that big boulder off the top of that hill and it’s never coming back. And why should it? Responsive is not just the future, it’s a necessity. More people will access this new site of mine on mobile than on desktop, that’s just the way the stats are going. I need to make sure it works and looks good everywhere.
And so a new website was born. There are things I would like to add; an Instagram feed, using the API for example. But these can happen in time. For now, I look forward to finally using my site properly and sharing that with you. I hope we both still enjoy it!