While I know it is probably out of place for my to call myself a “writer” since in reality, having a blog hardly makes you a writer, it is something I am actively doing, and actively trying to become better at.  I doubt I will ever write a book, or even a short work of fiction, but I do enjoy posing questions, and jotting down thoughts.  So, for the sake of this article, let me call myself a writer.

Kurt Vonnegut

Today on Twitter, one of the few people I follow, DoshDosh, posted a link to an article: vonnegutSTYLE.  As I am sure you do not know, Kurt Vonnegut is my favorite author of all time, hands down.  I have never been much of a bookworm, but I believe I have read almost every one of Vonneguts books.  His writing style is captivating, and his stories just, amazing.

When I saw the link DoshDosh posted I immediately clicked on it. As someone who is still in the infant stages as a writer, and actively developing a style for myself, the idea of getting advice on style from the master himself was something I could not pass up.  So now, as per his recommendation, I suppose I shall try to evaluate my own style against his guidelines publicly.  I hope you can offer me any feedback or constructive criticisms you might have.

Why should you examine your writing style with the idea of improving it? Do so as a mark of respect for your readers, whatever you’re writing. If you scribble your thoughts any which way, your readers will surely feel that you care nothing about them. They will mark you down as an egomaniac or a chowderhead — or, worse, they will stop reading you.

-Kurt Vonnegut

1. Find a subject you care about
   This is the entire point of this blog.  I feel I only write about things I care about, without compromise.  The issue lies in the fact that often finding such inspiration to write comes in waves.  I find a direct correlation between my moods, and my passion to write.  I feel it is good on one hand, where my output is only of a certain quality, to me.  Yet bad, in that I do not write nearly as much as I would like to, since I cannot force myself to have a topic worth writing about all the time.
2. Do not ramble
   I feel I need a lot of work in this area, as most of my posts could be regarded as pure rambling.  I would really love some input with respect to this.
3. Keep it simple
   I consider myself a good communicator, yet, you will never see something as simple and powerful as “To Be or Not to Be” come out of this blog.  I feel I have a good mix of complexity in my writing while it is still easy to understand what I am trying to convey.  I am not an english major and I not studied literature, so I am sure I could use a lot or work in this area.
4. Have guts to cut
   In the article, Vonnegut describes this as basically getting rid of useless words and sentences.  Do not try to fill your writings with too much fluff.  I think I need to work on this a good bit.  I can be a bit wordy and repetitive at times.
5. Sound like yourself
   I feel this is one of my strong points.  With me, what you read is what you get.
6. Say what you mean
   While I would like to think this is true for me, it is a tough point.  I realize that this blog is totally public with my name attached to it, and unlike Vonnegut, writing is not my livelihood.  I often find myself censored by the very premise of the wrong people seeing the wrong things written here.  In most cases I do say what I mean, but not always.
7. Pity the readers
   Basically what he is suggesting here is that you make what you write easy to read.  I’m pretty sure I could use some work here as well.

The most damning revelation you can make about yourself is that you do not know what is interesting and what is not. Don’t you yourself like or dislike writers mainly for what they choose to show you or make you think about? Did you ever admire an emptyheaded writer for his or her mastery of the language? No.

So, in closing, I suppose it is helpful to step back and evaluate yourself every once in a while, but I think the most important evaluations come from those other than yourself.  Based on the guidelines set fourth by the great Kurt Vonnegut, I ask you:  How am I doing?

Prior to deciding that I wanted to write, I thought that blogs were one of the stupidest things ever.  Who wants to read some assholes opinion on things?  After getting bored enough one day, I decided that I wanted to write about some things, and I decided that a blog was the right avenue for it.  It was at this point that I began to read other blogs.  

It wasn’t so much that after having my own blog, my opinion had changed.  It was more that I wanted to see other peoples sites, their designs, the topics they wrote on.  I wanted to see what other successful bloggers were doing, and how they had become successful.  I wanted to comment on other blogs, to promote my own, and read other blogs, to get ideas for my own.

This, I think, might be the case for many bloggers, and blogs.  Bloggers read other peoples blogs, write about the topics they find on other peoples blogs, and comment on other peoples blogs.  I honestly do not know anyone, who does not have a blog of their own, who makes a habit or reading any particular blog on a regular basis.  For me, I know for sure that is the case.

Using an RSS reader for me was almost impossible before I started blogging.  There were simply no other blogs out there that interested me enough to make me want to subscribe.  Now, I subscribe to over 30 blogs, and read them on a very regular basis.  Prior to this, the only blogs I read were simply by consequence of something interesting on digg being a link to a blog post.

I think this is interesting, since the number of people who blog is always growing, thus, the reader base for existing blogs is always growing.  Is blogging some sort of self-fulfilling prophecy?

I am quite proud of this design for some reason, I feel it is one of the most unique layouts out there, and is done fully in html/css, there are some additional features built in thanks to Javascript / jQuery, but those are not required to have the page render with full functionality. I feel the goals mentioned above were met with overwhelming success.

I haven’t done a design so unconventional ever before, and it was also my first Wordpress template. Looking at the mock up over 3 weeks ago, I thought it would be a cinch, but it turned out to be quite the opposite. I am afraid that going with such a bold layout will lead to a “love/hate” relationship amongst my viewers. It is so unconventional that people are either going to think it is amazing and fun to use, or simple hate it since it doesn’t follow the standard blog layout.

HTML / CSS

The html is defined as XHTML 1.0 Transitional, and fully validates. There are over 1000 lines of valid css which make up the core functionality. There is a custom CSS file for Print, and Mobile as well. One css file takes care of all browsers, in which the page renders nearly identically.

The original design was done using my Mac, and Safari, in which my font of choice was Lucida Sans, that didn’t seem to look right on Windows based machines so I had to change it to Verdana. I think it looks alright, but I still enjoy viewing the site most from my Mac.

Several small issues arose within the design early on. Since I was concerned with making it so cross-browser/cross-os compliant, I had to overcome a few obstacles.

Fonts: As mentioned above, I wont up going with Verdana as my font choice as it was designed for the screen. This font seems to work well on most browsers and OS’s, unlike my original choice of Lucida Sans.

CSS: Max-width and Position: Fixed elements do not work across the board. Most of this was fixed using Javascript which I will detail below, but when JS is turned off, the page still works fine, it just looks a bit different. The footer should push to the bottom of the content, and the main content area will fill out to the right side of the screen.

Other then those small issues, the css is valid, and I did not need to make use of specific browser stylesheets. There is a lot of style applied to the page since there are so many elements which look different, aiding the effect of randomness I was going for.

If the stylesheet is disabled, the style-less page looks as it should. I used primarily core html elements to compose the page for SEO purposes as well as compatibility reasons.

Javascript / jQuery

I employed the use of two Javascript files. One is strictly for IE < 7, the other is for everyone. Essentially the features laid out in these files will become totally invisible if Javascript is turned off, and the page will still function perfectly. This was crucial to me since the idea of having my page totally unusable in any situation was unacceptable.

For IE the Javascript basically does 2 things: Positions and adjusts the position of the footer, to emulate a position: fixed format, and makes the width of the content area set to be equal to that of the current “max-width” setting, unless the window is smaller. This means that if I go into my stylesheet and alter the max-width setting for the content div, the javascript for IE adjusts accordingly, since it pulls the value for the width directly from the CSS. If you have Javascript off in IE, the footer will simply not be fixed the page width will become fluid. It is not my intended viewing scheme, but it works. The last thing fixed in the Javascript for IE is that it sets the background style to something which does not use a translucent PNG image.

In general, the Javascript does several things. Firstly, it handles the footer, this being the opening and closing of it, and the tabbed effect inside it. If the user has Javascript disabled, the button to toggle the footer open disappears and it is as if it was never there. Second, it handles switching the view from comments to trackbacks at the end of a post. If the user has Javascript disabled here, the trackbacks will be listed after the comments. Lastly, it handles some page reformatting based on window size.

If the browser window is very narrow, it will get rid of the twitter column, and change the logo to something smaller such that it will not appear above the content. In this state, if you open and close the footer, the image does not switch back to something too large.

If the browser window is very short, it will make the logo image change to the secondary image, so that it will not appear above the widget area. Again, when you open and close the footer, it will not interfere with the image.

If the browser window is sufficiently large, more posts will show up on the front page, to fill it out.

If you have javascript disabled, the page still looks ok In 1024×768, but you will not get any of the dynamic features to change the types of content shown, so the page might look very squished.

Wordpress Template

For the template, I basically designed it as if I was going to sell it. I could have built it around on the features I needed, or intended to use, but I built it to be more expandable, taking into account basically anything a blogger would use.

The top area, the two left columns, and the 3 sections inside the footer are fully “Widgetized”. This means I, or anyone, could put whatever content into those regions they wanted to, without altering the template. In the absence of any defined widgets, default content appears.

The navigation is based on published pages, and there is an area which will accommodate listing child pages in their existence. Much like how you found this page.

Post listings, archive listings, search results, etc, are all based on excerpt view. In the absence of a defined excerpt, the first 55 words of the post is taken. The width of the excerpt boxes and post meta boxes is randomized within the template by php, to create a more random feel.

Almost all elements of a post have been styled, even the ones I do not use.

The background image is a translucent PNG going from a grey color to transparent. Within the theme options page I created you can choose this color to be anything. At this time it is orange. If you do not define a color, it defaults to this shade of orange. You can also change the primary link color, defaults to red, in a similar manner.

Also on the theme options page, you can set your feedburner email feed url, to set where the “Subscribe Via Email” link points to.

Lastly, you can set your twitter ID. The twitter functionality is built into the template so no plugin is required.

Basically, anyone could use this template, and it would offer full wordpress functionality. While I did not need to go this far with it, I will likely release this template into the wild after I have used it myself for a good enough period of time.

Thanks for reading, I hope you enjoy using this design, it was quite a lot of work!

(I also created a page out of this post)

He must be doing design work.

Most people who design sites, who are not professionals, design it to look nice in whatever browser they are using at the time, with whatever settings they have turned on or off, at the time (see MySpace).  This is a perfect example of the old saying ignorance is bliss.  If I could develop websites all day to work on a Mac running Safari, design would be so much fun.  This is the case for many professionals, at least those designing applications for in-house use, who only need their designs to work in whatever browser their company has deemed the standard.  Most of us, though, are not so lucky.  Us being the people, professional and amateur, who develop public facing websites where there is no remote way to predict what your audience will be using to view your website with.  Us being those who are anal enough to care about how our website looks in almost every possible scenario.

What are these scenarios one must consider, well, here is how I usually think about it:

Will my site still look/work okay if…

• The user is using a non-mainstream browser (there are dozens)
  • I try my best to consider all the ones I can.
• The user is using Internet Explorer older than version 7.0
  • Usually relatively easy to contend with, avoid translucent png’s, deal with odd css bugs.
• The user has images turned off
  • Use CSS text replacement techniques, this can degrade easily.
• The user has style sheets turned off
  • Make use of conventional html tags as much as possible.
• The user has Javascript turned off
  • Do not rely on Javascript to do anything your page cannot live without having.
• The user has a very large/small screen resolution.
  • Optimize your site for the lowest popular resolution, screw everyone else.
• The user is browsing from a cell phone or mobile device
  • Use a mobile stylesheet.
• The user wants to print something on my site
  • Use a print stylesheet.
• The user is on an operating system with different base fonts
  • Carefully choose your fonts and do your best to optimize their precedence.
• The user has their screen color settings low
  • You can try to use web-safe color codes, I don’t.
• The user has their font size increased/decreased in their browser
  • Try using EM based layouts instead of Pixel based, I don’t.
• The user is on a slow connection
  • Try to keep your images, css, and javascript files as small as you can.
• The user does not have something installed
  • Such as Flash, Java, Shockwave, etc.
• A billion people hit it all at once because I’m just that popular.
  • Minimize database hits, cache, have a good server.

As you can see, if you want your site to work well, across the board, it is no easy feat.  In fact, it is very difficult.  What you usually wind up with at the end, feels like some sort of hack.  In the case of the new design I am working on, I made a couple of fundamental choices which have made the design incredibly more difficult to implement.  Although, they shouldn’t be, as they were quite simple choices.  Nothing too fancy:  A fixed position footer, and the use of one translucent png image.  Neither of these features are supported by any means in Internet Explorer 6 or below, without hacks.

Javascript in itself, is very nice.  I can write snippets of code to do very nice things with it, if the user has Javascript turned off, it appears as if those features never existed.  This is perfect.  The problem arises, for me, when your page relies on Javascript to even work at all.  This is the case of my new site when being viewed in Internet Explorer 6.  Javascript needs to constantly put the footer in the correct place, and it needs to make IE display translucent PNG’s correctly.  I don’t like this.  I had two conversations earlier with two different web design professionals on this exact topic, and I got two very different answers.  To paraphrase:

Designer 1: Javascript is there as a tool for you to use to accomplish what you need to accomplish.  Why should it be considered a hack?  If your site works, it works.

Designer 2: I find it is best to not fight the web.  If you find yourself coming up with all sorts of tricks to make your site behave the way you want, it is usually best to just change it around a bit to make it work the way the web wants it to work.

I agree with both of these points.  I have not yet decided which of the two I will listen to though, when it comes to my own design.  I realize that the amount of people who will come to my site in IE6 with a screen resolution of 1024×768, and Javascript turned off, is a very, very, small number.  For some reason though, I still feel compelled to support it.  Perhaps I should just let go and stop supporting IE6.  That decision would be much easier if the last 3 corporations I worked at did not use Windows 2000 with IE6 as their default setups, thus making me realize that the user base of this highly outdated browser might still be much larger then it should be.

So what am I left with?  A design which mostly works due to a system of hacks which I am quite uncomfortable with.  It is as if the internets does not want you to be creative, because if you try to be, you will be punished by having to spend countless hours working on one tiny detail of your site.  Which you can only hope will pay off when that one person who stumbles across your site on a 15 year old computer can actually enjoy reading it.  The best part is, you are so good at what you do, that person wont even appreciate the hard work you did, because they have no concept of just how much work it took to make your site simply work as they expected it to under their very specific set of circumstances.

Users do not appreciate the amount of work it takes to make something work, the simply love to bitch about it when it doesn’t.  I should just develop for the web on a highly standardized, proprietary, platform like Flash or Java.  At least you know what your end result will look like, every time.

The initial re-design of the blog, which I spent about 30 man-hours on, came out looking very generic: Header, content, widget column.  I really wanted something unique, and bold.  Something not too overbearing but still very easy to use.  I was unable to come up with anything myself.  The first redesign was basically centered around using this header graphic I drew in Photoshop (below), and basing it off a design I really love.  I really didn’t like how it came out, so I scrapped it.

Original Header Graphic

This is one thing I need to stress to anyone out there designing a website:  If you become unhappy with a design, even if you have spent a lot of time working on it, don’t be afraid to scrap it and start over.  I did, and I couldn’t be happier.  The new design, thanks to my friend, is just what I wanted.  It is minimal, yet interesting.  Unique, yet usable.  And most importantly, it fits me, and my style.

This is another thing I need to stress to anyone out there designing a website for yourself:  The design must be a reflection of you.  If you are generic, then use a generic template.  If not, you should make your site, especially if it is a blog type of site, be a reflection of you and your personality.  This is the hardest part by far, especially for someone like me.  Luckily, I have friends who are professional designers with just enough spare time on their hands to help me out a little bit.

If you don’t have professional web designer friends, I still feel it is very doable, if you have the fundamental knowledge that is.  Even with my total lack of creative vision, I have cranked out a few decent looking sites in my day.  Just don’t get frustrated, don’t give up, and don’t rush.  Patience is key when designing, as bad as I try to, you simply cannot force progress.  Rushing things will only make the design suffer.

The last thing I want to stress to aspiring designers is the thing I struggle the most with, criticism.  I am really excited about this new design, and nearly everyone I have shown it to criticizes first, and compliments second.  This is a natural part of the process.  Keep one thing in mind, it is for you.  While you want it to be appealing to the masses, you also do not want it to become a cookie cutter site of what you think other people like the most.

I expect to release my new design some time next week, and I really look forward to it.  Once I do, expect a full write up on my creative process, and the problems you can expect to run into when designing a site for yourself.