Nicholls Website Redesign; In The Beginning

There is so much that happens throughout a project. When the final bits hit the screen at light-speed, it’s hard to remember how you got there. Sure you might have a trail of sketches, PSD(s), emails, versioned files, or some other pile of nonsense to take you back down memory lane, but I wanted a little more for this project. I’ll probably forget most of this anyway, but this time I’m going to try to write some of this. I should make it clear that I’m writing for my own benefit and practice. None of my opinions or cursing represent any opinions or policy of the fine folks at Nicholls State University.

Nicholls 2011 Basic Theme
Nicholls 2011 Basic Theme

Nicholls State University will have a new website by Fall 2012. I’ve been slowly working on the pieces for at least a year. Ideas for features, nice little CSS pieces, and even a rough plain site template to start from. Nothing fancy, but all good starting points.

It needs work and is now reaching that point where I want to build  in the next features and make the design more shinny. I have no doubt I can hack away at with my text editor, but I’m intrigued by Compass, Less, Sass, and other CSS preprocessors. Reminds of the old days before good server side CMS applications when large websites were fully rendered and deployed. Looking forward while looking back is always good, just don’t trip.

Being a Ruby / Compass / Sass newbie is fun. The CSS complexities of web design are becoming more complicated than the HTML these days, so anything to speed up the design process with clean consistant (and controllable) CSS is very welcome. I’m happy to profess my ignorance about things when people ask because I really enjoy learning. If I’m learning something that will really save time and help me do my job, then I’m happy to show my noob-ness. If I keep this up you will either see my happiness with the my new found tools or my utter disgust and dispair. Stay tuned.

Compass, Susy, Normalize installs with Ruby’s Gem (too lazy to link). Oh this is all terminal stuff and requires sudo on MacOS/OSX.:

// First is this thing on? Updated?
# sudo gem update --system
// Install Compass the framework
# sudo gem install compass
// Install Susy the Hand-crafted grid framework
# sudo gem install compass-susy-plugin
// Install Normalize to create a base cross-browser starting point
# sudo gem install compass-normalize

I’ve started to shift away from the old CSS reset methods since it can make things more complicated. For this project I’m using normalize.css to create a consistant base of default element properties. I’m hoping it will mean less code since reseting everything and then styling everything can create redundant and unnecessary rules for some basic HTML elements. Although Compass can help here by using it’s own built-in reset modules, I still want reduce any re-styling.

My config.rb file for Compass now has:

require 'susy'
require 'compass-normalize'
# CSS Normalize

I’m just using the screen.css file for my first testing and I’ve added the import for all of Normalize as:

@import "normalize";

I chose Susy because it has a column and gutter approach to grids that would allow me to create the type of grid I want. I haven’t seen a PX grid framework that I liked and I’ve never been keen on using pixels for measurement anyway. Susy would allow me to do EM or percentage grids so I can devise some really weird grid ideas. My first test is a sort of golden ratio layout with the gutter as the “1” core starting object of measurement and the columns being roughly 4 to 6 core elements wide. The original gutter width is .8em so the column for the first test is 5.472. Not to shabby as the standard web page width ends up at around 989px. My little sketch explains the math better. I don’t know if this will be my final grid yet.

Nicholls Susy Test Grid Mathematics
Nicholls Susy Test Grid Mathematics

Once I have all this into the Compass config.rb file then the _base.scss and screen.scss files I do the Compas rendering with:

compass compile da-test

Remember “da-test” is the project directory. I’m writing about my journey here, so if you want more you should look up Compass, Sass, Susy, and the other stuff that I’ve been researching for a few weeks. I won’t come to you by osmosis.

My next steps will continue the testing for Compass and Susy. I’ll start researching best practices for responsive designs and I’ll start to merge my personal CSS libraries into the Compass project and convert my wacky CSS to Sass. Next time I might have a screenshot or two.

Of Fame and Infamy

I’m too busy for the paparazzi, so it took a while for me to get copies of this stuff to put on line. Apparently I’ve gotten my own little brush with fame in the most perfect of circumstances.

Jess's Article in Nicholls Viola Magazine
Jess's Article in Nicholls Viola Magazine

First, I had a nice article in Voilá written about my work as the Nicholls State University Website Manager. It’s pretty flattering and very cool, so I was pretty surprised. (disclaimer: I work around the folks who produce this work, but avoided reading it for the last couple of months. I really didn’t want to have any pre-published opinion and was curious about the results since I was a complete geek-as-always during my interview and photo sessions ) I extracted my single page of awesome into a PDF you can read from here: Jess’s Article in Nicholls Viola Magazine (pdf)

Jess Planck planking on planks

About two weeks before that I also got my picture in the local paper for planking. Totally Caidy’s idea to tell me to get up on the planks in Home Depot and assume the planking position. I know it’s stupid, but whats worse is that the writers completely missed the point. It should have been written as “Jess Planck planking on planks.” What the hell happened to irony? It wasn’t plywood either! Know what pine planks smell like.