So I decided it was time to update the look of my site. I knew I needed more room for content, code snippets just don’t fit in 300 pixels. This update was primarily inspired by my recent decision to move from Palm to Blackberry.
Back to basics, getting rid of the clutter and flare, my site is not here to sell a product but instead teach ideas and present research. One thing the Blackberry does that Palm lacks is the back to basics text driven menus and single application screen and single method of traversing the phone.
The Palm reminds me of Java, over the years it has grown to try to fit everyones needs without realigning or saying no to features which only fit one category of customer. Clunky interfaces and random restarts often happen because of the lack of integration.
In addition to the actual functionality improvements the screen on the BB is a tiny bit smaller but RIM has way better font support and smoothing so making the text quite small increases the amount of text on the screen by 25% over the Palm. I didn’t make my text size any smaller but what I did was increase the space for each entry and went to a fully em controlled layout for more flexibility.
Realigning the content with the right column in my mind was the best decision of the realign, before all my “personal” data was scattered at the top, left and bottom. I decided to concentrate it all on the right column to a clear separation from the article and personal items.
Another thing that bothered me about SimpleLog is that it did not natively validate. The Archives and Search page had some terrible nesting issues. Diving into the core code I changed these to produce a better POSH structured site. Before I was experimenting with the Blueprint CSS framework, well lets just say it was thrown out the window in this version, way too much overhead and not enough benefit.
The design will transform as time goes on as all things but as of right now straightforward is in and I am sticking to it.
Launching a new site got me exploring some new code bases and I became disappointed with the disregard large social sites have for html validation of snippets they disburse to their user community.
Since I wanted my site plain and simple to start instead of writing a bunch of code to use common API’s I decided to first go with includes and badges from sites I commonly use. The three that I experienced while creating this site astonished me on their lack of attention to detail. At least they are trying to be compliant but unfortunately they are not fully committed yet.
Twitter HTML Badge
Twitter offers a nice super customizable HTML badge to include on a site. Which is great because it is a basic div, header and unsorted list and style is up to you. Placing the code they supply on your site makes it no longer validate. On their script tag they use an invalid parameter “text”. This looks like a typo and something simple to fix but where is the quality control? Shouldn’t someone test these types of things before they are rolled to production?
Flickr offers two types of badges the HTML one does surprisingly well except they do not escape the ampersands in the src of the script tag but that is something that can easily be done by the user.
The flash version on the other hand includes an html page into an iframe but unfortunately the code in their html appears to have also been skipped by quality control. It has two main issues. Script and style sheets above the head of the document and non escaped characters in an html string that is outputted via document.write().
Rails applications have been known for their agility and standards. It takes more than just a script kiddie to get a rails application into production. So when I installed and started to customize SimpleLog 2.0.2 for my site something stuck out like a soar thumb, the archives page in the default theme did not validate. There are two options for the html, an unsorted list or definition list. Neither of them are nested correctly which makes it almost impossible to apply a consistent style across browsers.
Without re-writing the entire helper for my site I just put some extra li elements in the output and cut it down to just one missing li. I have not had time to checkout the SVN trunk and create a patch.
Final Thoughts
By far the number of pages that do not validate outweigh the ones that do on the web but it is a shame to see small agile companies acting like large corporations when it comes to quality control. One of the benefits of having a small group or an open source application is the amount to time and attention each piece can get before it is released for peer review. It was put best in Jason’s A collection of details post when he quotes Wil Shipley:
“This is all your app is: a collection of tiny details.”
Web standards need to be enforced by the community and it is our job as web professionals to validate our own code and when possible give some helpful hints to other developers or companies who are not taking the appropriate amount of time to validate. I put in a ticket with twitter about the “text” element and in the process of creating a patch for SimpleLog’s archive page. I encourage all developers to run with standards and not be afraid to send an email or two to promote the health of the web. Who knows you could send that one simple email that turns thousands of pages valid.
My new setup is quite comfortable. Hosting by Joyent running on a Shared Accelerator using Mongrel proxyied through Apache to run a Rails application known as SimpleLog with a green inspired simple style theme created by Myself using a new CSS framework called Blueprint.
From the time my DNS change went through it took only about an hour to get the whole thing up and running. Although while typing this I am still waiting for a Mongrel port, running Mongrel by hand works just fine.
The setup was good timing because Andrea is working late and I am still trying to wrap my head around all the upcoming decisions needed to be made about wayne.edu. I am now the Interim Web Manager in the Marketing Department. With the new position comes some new goals and I am currently putting them together and hope to bring my experience with high load shared server environments in some upcoming articles.
Eventually all my old archived articles from my blogger account will get moved over, I just need the motivation to do it.
So I decided to change my blogging software, from no software (Blogger) to SimpleLog. I setup everything up in my dev environment and it was by far the easiest setup I have seen so far. Took about 10 minutes including setting up the virtual hosts.
While getting super interested in my blog again I was looking for some nice examples of css blogs to get inspired I stumbled upon Blueprint, which is a css framework so I decided to give it a whirl.
First impressions it is super lightweight and non-intrusive, just two lines that have to be added. to the head which includes the style sheets. My only gripe so far was that they just include one grid option which is 14 columns, its not a big deal all that I think it needs is a few other background images to show the options of columns from the grid. Like 7 columns, 3×8×3 and so forth.
So I hit up Photoshop and came up with a basic color scheme and outline for the new blog. Took about a day of going back and forth on how much I wanted to add to the site but being inspired by rails iterative approach to programming I decided to stick with the simple and expand from there.
Back to Blueprint, with my design it ended up being very easy to implement in blueprint. It doesn’t have anything nested tho which I was really interested in since it looked to handle nesting very gracefully. I tried as hard as I could to make this design fit into a 14 column grid but I made the design decision to keep the width at 780 instead of Blueprints default of 960. But not to fear we are just working with css here all I did was just override two of their default widths in my screen.css to keep the integrity of their files in case I decided to upgrade them in the future it will be fully degradable.
Their reset.css worked great, I am use to using Eric Meyers reset.css and then creating everything from there. But Blueprint had an unexpected typography.css which setup quite a bit of the default typography. Which was a huge time saver, because Eric’s just leaves you out in the cold to setup everything on your own which is totally cool if your project warrants it but sometimes there are elements that get introduced and have no control over.
So setting up a new template in SimpleLog was easy and I started editing the site.rhtml layout to use the naming conventions per Blueprint. Just a few class changes and I removed some default SimpleLog items that I didn’t include in my final design and boom! We have an outline!
Fast forward through time, 26 css declarations and 3 images later and my homepage was almost done. Time in total was about 2 hours to copy and setup an entire new template with SimpleLog and Blueprint. I was amazed, usually I hate when things try to be “smart” and assume they know what options and action you are going to preform but Blueprint didn’t get in my way at all. Since everything for the base elements was already setup I just used my ID’s and Classes to extend the base and life was good.
Although I was just concentrating on the homepage today flipping through all the other pages they didn’t look that bad by default. SimpleLog uses a lot of the same css names and conventions throughout their pages meshed with Blueprints base styles and my overrides the only things left to do were the specifics of the page.
Last but not least, my current host is not very Rails friendly so I am looking for a new host for my blog. While doing that I will continue to update here and work on the new version on my dev server. So far:
SimpleLog: A+
Ton of features and rock solid. Easy install and great documentation. I have not looked into any extensions or plugins yet but there are a few areas where I can see a few more helper functions. But for getting a blog up quick and painless SimpleLog is the way to go.
For just being at 0.3 release it is a huge time saver, its not just the resets for cross browser compatibility but it also includes a good typography and print styles which I have always been looking to create. I hate going through and trying to think of all the HTML elements a client could potentially use and make sure they are set accordingly. Blueprint defiantly has a future in my web development life and releasing it to the community will only make it better.
