It’s been a really strange 18 months in the front-end development world, when I started building this site (admittedly a while ago!), I decided I’d use the SCSS (SASS as it’s more widely known) preprocessor for my CSS production.
At the time preprocessors seemed new and exciting, now, oddly enough, they’re just regarded as the norm in my development team. Things have moved on rapidly since creating our first SASS build, we’re now in the realms of grunt, yeoman, bower, headless browser testing and many more amazing tools!
But back to the point at hand, here’s a list of the raw ingredients that make up my new site...
Technology
- PyroCMS
- Markdown for blog posts
- SCSS with a sprinkling of Compass
- A little bit of jQuery
PyroCMS - I’ve built a lot of codeigniter sites in the past, so a CMS using a known framework for its guts seemed like the logical choice. I really like the direction the developers are going with it too Check it out - PyroCMS.
Markdown - is a nice easy way to write web articles without all the hassle of tags. I use Editorially to create and store all my writing, then export the markdown directly into PyroCMS without any drama.
SCSS - Again, an easy choice, having looked at a few of the leading preprocessors, sass was the standout candidate. I think it’s probably the most popular, which inevitably leads to more add-ons, articles and resources. This strengthens the ecosystem around it and benefitting developers. Google Chrome supports sass source maps natively too, which is pretty awesome. We also use SASS at twentysix. Everybody knows that life's to short to learn two CSS preprocessors right?
Design
Design doesn’t come that to easy to me, it’s something I have to work at slowly and progressively, sketching ideas and layouts in my trusty dot grid notebook and stretching my photoshop skill to its limit. Designing things is very rewarding though which is why I took so much care and attention on this site.
Typography Choices
Typeface selection is so hard these days due to the shear number of really great fonts now available. After lengthy deliberation, my chosen pairing is Skolar and Bell Gothic.
I really love Skolar, it’s reading qualities are second-to-none, it loves being on screen. It works great for headline text or extended body copy, it’s incredibly versatile. I like it’s slightly quirky italics that, to me, bear a resemblance to the calligraphic style of Czech typographer Oldrich Menhart, in his own words, the designer of Skolar; David Březina calls it “hidden angularity”.
Whilst Skolar oozes class, Bell Gothic is rather more utilitarian. Designed initially for AT&T in 1938 by Chauncey H. Griffith, it appeared in US phone books; a task it was well designed for.
However, I think it works equally well at larger sizes, where it gets to show of it’s slanted stroke ends and narrow joins. The bold weight does away with the slants but still remains beautifully legible.
Design Techniques That Work
Having an understanding of design theory is the key to my ability to design anything. Without a core understanding of grid structure, typography and layout, I’d be a pretty dire designer. I use this core set of skills in the design process for almost everything I design now, including this site.
Other techniques that went into the design are ...
- Type centric design
- Vertical rhythm
- Responsive web design
Type centric design is the cornerstone to everything I create for the web, if you haven’t guessed already, I love typography!
Vertical rhythm is a fairy new concept to me, having read about it in a 24 Ways article I was immediately taken aback by the elegance of the result. Try it out, it can be quite tricky to execute. Done properly though, it just feels so right.
Responsive web design is already becoming ubiquitous in it’s application, It’s starting to mature beyond the initial “I’m gunna use it cause it’s new and cool” stage. From the beginning I designed the site to be a simple one column, fairly narrow, site thats minimalist in nature. It responds well to most devices - It’s a good start.
Future Development
Of course, I’m far from happy with the site as it stands, the codebase and CSS have been lingering around far too long now. But that’s ok, I’ve put my perfectionism aside, it hurt a little, but my advice to anyone sitting on a project is this... “just put it live”.
I plan for my site to evolve beyond it’s current state, and that will give me the chance to put recent learnings into practise. But right now I’m just happy I finally have a web presence.