Some of you may have come across my other site. It's been going for a few years now and badly needs a redesign which is something I've been working on for a while (over a year in fact), but haven't been getting far with. I've thought about things like site structure and content (having rewritten quite a bit of it), but whenever it comes to actually trying out new ideas for how it will look (designing both in the browser and in Fireworks), I only get a little way before getting dissatisfied and discouraged with the process.
So I thought maybe I should try working on something completely different, to see whether a new personal project would open up some creative channels and get ideas flowing. And so I decided to work on this site first instead.
It's actually been something I've thinking about for a while: I wanted a site that was separate from my freelancing business where I could blog about anything I felt like, and not just topics related to web development which is what Tyssen Design became (and that was completely by design as I didn't think a business site was the correct place for discussing just any topic). I also thought that being able to write about anything might get me back into the swing of writing/blogging again, because it's been about 18 months since I published anything new on Tyssen Design.
There are a few different reasons for the drought in new content on Tyssen Design, most of which will probably just sound like excuses, but as this site is a personal one, I intend to use it as a playground to try out a bunch of new stuff, some of which has already been included in the current design. And hopefully that proces will lead to new opportunities to blog about my experiences and what I've learned. I've already got a few ideas up my sleeve based on the process of building the site up unitl now.
The site is built with ExpressionEngine, HTML5, CSS3, jQuery and media queries. The site uses the Multi Site Manager because I'm also using it to run Tyssen Design. I'm using a few different add-ons, but of note are Tagger and Disqus which I'm using for the first time on this site.
I used the rather excellent Gridless as the starting point for the CSS, which provided a foundation for both working with media queries and good-looking typography. Fonts come from Typekit (Harfang Pro for headings), icons come from the Pictos set, and I got help with working out modular scale and vertical rhythm.
Media queries and working with a baseline grid are two other techniques I'm trying out for the first time on this site. Using media queries has worked out OK, although with what is essentially a single-column layout, there weren't too many parts of it that needed to be considered for refactoring at different screen sizes. I plan to write more about responsiveness/adaptability and testing for mobiles soon.
The vertical rhythm/baseline grid was something I had a little more trouble with. I guess like anything, when you first start using something, before it becomes familiar, it takes a lot of trial and error. I spent a lot of time toing and froing, playing with different line-heights, margins and padding, and using GridFox as a visual guide to make sure everything was following the baseline I had set. I changed my mind a bit about what font sizes, spacing and even measure I wanted to use. Gridless is set up to work with the Golden Section (or Ratio), but I felt more comfortable using the Musical Fifth or 2:3. My maths is probably a bit off with some elements; in some cases I just lined things up visually and used Firebug to get things sitting on grid lines.
The elephant in the room
As this is a personal site, a playground for messing around with web stuff, I don't feel the need to be as diligent as I would in my work for other people in ensuring cross-browser compatibility. I work on a Mac so develop in Firefox with Chrome and Opera close companions, but if something doesn't look quite right in you know who, I'm not going to lose too much sleep about it. I hope that the design of the site will constantly evolve, and as I'm adding new features or styles, I may be a little bit tardy in my checking of things in IE. In fact, so far, I haven't been that rigorous in testing at all, I just wanted to get it up and out there and refine it as I go along. So if you spot anything that you really think looks busted, please drop me a line.
Even though I've been using ExpressionEngine for about four years and in that time have built more than 70 sites with it, up until last week, my own site has actually been running on Wordpress, and actually part of it still is. I found Wordpress a couple of years before I discovered EE and I had intended that I'd move it over onto EE at the same time as redesigning it. I actually set up a local EE install about 18 months ago as I started work on restructing Tyssen Design and rewriting content, but with no new design to actually go with it, never got around to making the switch to using EE as the full-time CMS for the site.
Finally I decided that if I was ever going to get anywhere with it, I needed to break it down into smaller, less daunting chunks, and so decided to just recreate the current site within EE. But as the bulk of the content is in posts on the blog, content I intended to leave alone and not rewrite, I left all those and their associated comments inside Wordpress. So currently I've actually got two CMSs installed running side-by-side, although I'm not using Wordpress for anything other than serving the old content. I still intend on bringing all that Worpress content over to EE, but that's a task for a later date.
As I said earlier, this site has been something I've been thinking about for a while, and the site has actually been in existence for a little while already, although the only page has been the one for my mixes, which I add to on a fairly regular basis these days (a new one every 3-4 weeks).
But hopefully, now that I've broken the fetters that have been holding me back from both designing and writing for myself, you'll see some new things appearing here regularly.