Saturday April 7, 2007
Building the Blog
When I joined Geniant last December, there had already been some discussion about building a company blog. After Jared finished creating the new logo for Geniant, there was enough in place to move forward in expanding the brand. Based on Garrett’s wireframes, Jared handed to me a few brilliantly done Photoshop documents, and I began the process of turning them into code. There are a few particulars which I would like to point out.
Fonts – YUI
In an effort to ensure maximum flexibility and accessibility, the decision was made to base all font sizing on the Yahoo User Interface Library. This was a bit of a departure for the designer in me, because I tend to lean towards pixel specifications for font sizing (so do Jeff, Wilson and Apple). Working on a team is all about compromise, so in this case I got over my stubbornness and learned the YUI approach. Despite the fact that it does not validate, it’s actually pretty nice.
Since it’s almost entirely percentage based, you have a greater level of control than you would with just using word-based sizing via larger or smaller. Additionally, the fact that Yahoo’s extensive testing process has been applied means that it works reliably in cross-browser and cross-platform scenarios. While I am also a big fan of Richard Rutter’s method, one of the complaints I have heard from other developers is that not all browsers apply sizing consistently or predictably.
YUI Fonts also comes with a nice conversion chart that allows you to fairly accurately translate your desired pixel size into a percentage value. This purportedly works in all of the browsers which Yahoo deems to be A-Grade. Currently, this consists of those browsers depicted in the following chart.
One of the welcome changes in the recent iteration of the A-Grade browser list is that Internet Explorer 5.5 was at long last retired from being considered a web development priority. This opens the door wide to much more freedom, not having to worry about it as the weakest link. While IE6 remains, this is a step towards standardization – away from proprietary implementations.
footerStickAlt
While footer information such as copyright and privacy policy are often a necessary part of a website, this does not mean that they should be a focal point. With this in mind and at Jared’s request, I implemented the CSS trickery known as footerStickAlt, which forces the footer to remain at the bottom of the viewable area in the browser, regardless of the height of the rest of the content. This means that on shorter pages, the footer will not creep up towards the top.
The footerStick technique was initially pioneered by Craig Erskine and was then further refined by Cameron Adams, dubbed footerStickAlt. The advent of this method laid to rest one of the last remaining arguments in favor of using antiquated table layouts – sticky footers.
Sortable Archive
Using the freely available Unobtrusive Table Sort Script written by Brian McAllister, I was able to bring the archive section of the Geniant blog to life. By simply adding a sortable class to the th tags, the script automatically does the rest, enabling entire columns of data to be sorted nearly instantaneously. With a bit of CSS applied, I was also able to add up/down arrows as sort indicators, much like one might see in a typical operating system. Check out Brian’s site for more on this particular script. He has a number of other helpful code examples as well.
Content Management
While I wanted to keep this article on-topic and not stray from the front-end development aspects of the Geniant blog, I would be remiss if I did not at least mention the CMS that is powering the site. Thanks to Textpattern, we were able to get the site up and running within a week. Since it’s all browser-based, we were able to make tweaks to the templates while also writing content.
In-browser editing is not a feature unique to any particular system, but one can easily tell the good from the bad by whether or not it allows for agile development. Most of this site’s construction was done via constant collaboration over email and instant messenger. Design tweaks were discussed with minimal turn-around time. When I ran into CMS roadblocks, coworker Jeff Adams was quick to point out helpful work-arounds and plugins.
I am of the opinion the content management systems should exist to serve people, not the opposite. When carving an online presence, many systems take a sledgehammer approach when perhaps all that is needed is a chisel. Do not take this as a sales-pitch for Textpattern – It’s free. Rather, choose the best tool for the job. When shopping for a CMS, your top priorities should be:
- Does it facilitate the project goals?
- How easily can you apply unique templating?
- Will it get out of the way, or is it a hindrance?
Summary
Well, I think that about covers the bird’s-eye view of the front-end development process around the Geniant blog. Hopefully you found it informative, and will stick around for more updates down the road. We look forward to presenting the techniques we employ in building-out projects for our clients, and anticipate the eventual dialog that will develop around these future articles. I would encourage you to subscribe to the feed which most interests you. Hey, while you’re at it – tell a friend.
Comments on “Building the Blog”
EMC helps organizations create superior IT environments, from infrastructure solutions all the way up to software development and user experience design.
Learn more…About This 404er
Nathan Smith
Nathan is a goofy guy who enjoys practicing and preaching Web Standards. He is a client-side ninja at Viewzi and co-wrote a book on open source content management. He advocates accessible use of JavaScript with semantically efficient XHTML and CSS. Off the clock, he is working on a MDiv degree.
- Recent entries by Nathan:
- Enterprise Fire-Flow
- IA as Civil Engineer
- Reply vs. Reply to All
- Barber or Director?
- iPhone, NASA and NASCAR
I’ve used the YUI Fonts stuff for a while now since I sometimes work with designers who are real sticklers for getting the font size the same across various browsers. Overall though, this is a real showcase for Textpattern.
Wade: I agree, YUI is pretty cool once you get the hang of the crazy percentage inheritances that can occur. I also second your praise for Textpattern. It can do quite a bit. I learn something new about it with every project I use it for.
YUI font sizing doesn’t validate? Huh.
Have you tried the text sizing technique from chapter 1 of the Bulletproof Web Design book? If so, any feedback on it? Code examples available here: http://www.simplebits.com/publications/bulletproof/code/
Regarding Textpattern, it’s great.
Hello Nathan, I’m consider to convert my website (also my blog) to TextPattern… lately I learning all the CMS (from open source – running in php & mysql)... I found the flexible one is TextPattern…
I used to MT users… :)
Viking: I agree, Textpattern allows for quite a bit of flexibility. If by MT you mean Movable Type, I still consider it to be a viable option and a powerful CMS. It just takes a bit more work to get things working the way you want. Blueflavor just used Movable Type to launch a client site. You can read their case study here: thePlatform.
Nathan what are you guys doing about spam posts with this new system? Does Textpattern come with anti-spam capabilities?
Scott: The fact that Textpattern forces users to preview their comment helps to cut down automated spam quite a bit. Meaning, the Submit button doesn’t even exist until the comment has been previewed. As of yet, I’ve not really had any problems with automated spam on any of the Textpattern sites I’ve built.
Really good job with the design & code! And site like this is a good promo for Textpattern & YUI Fonts.
I have to say this is one of the sweeter blog designs I’ve seen. Great work!
Regarding footerStickAlt, have you had issues with IE7? I have run tests with sites using it and IE7 tends to get the footer “stuck” on a page that is short in length. Thus far, I haven’t been able to test your site because each page is long enough in my browser to not warrant any worry on the footer.
Great design, site looks awesome btw!
Bryan: I haven’t run into any problems with footerStickAlt in IE7. Then again, that could be because, as you said, the pages of the Geniant blog tend to be taller than the browser’s viewport anyway.