So, not too long ago I asked myself, “what purpose do blogs serve on the web, if not as a place to engender and encourage conversation?” Isn’t this what the medium has become, and isn’t this it’s purpose? I’m not entirely sure how to answer this question–my own notebook here isn’t a bastion of discussion so much as it is a one way soap box–but there are many who have decided it is no longer important to maintain the debate on their own site. And now that I’ve let this thought stew, I can’t blame them.

If you operate a site that receives substantial traffic volumes it can become more of a chore than it is worth to moderate and maintain comments, and so a few of these folks have turned to encouraging the use of Twitter, Facebook, or a reader’s own blog, to continue the discussion. This is perfect, except that a disconnect can exist between the content, author, and material being discussed.

And I get why people would want to utilize social tools for encouraging discussion. Any one of these formats is better suited to the purpose of getting a community involved around discussing various topics. Frankly, they’re much better than blogs, despite the disconnect I cited a paragraph ago.

You see those of you who have not been working on the web in the past fifteen years might not know, but blogs have advanced a great deal over time, adding a wide range of functions and becoming outright CMS’s in some cases, but in researching and thinking about this entry, I have to ask myself if their original use was bastardized to fit a need that wasn’t met at the time?

Blogs are essentially online journals; a place to fill the diminishing role of analog pen and paper, where one could write one’s thoughts in an environment they were more likely to be involved in. Creating a social environment around this seemingly simple use is tricky, particularly when the traffic volume increases exponentially–but it’s all we had until someone took the need and created a product that fit a community participation model better than blog software and commenting models ever could.

In my situation, that is in a low traffic one, this sort of thinking doesn’t have to apply as I rarely see a comment come across my in box. I have very little to moderate, or discuss, which begs the question, who am I even talking to right now? Myself perhaps? But, would my site be better served by eliminating comments altogether? Would it give the appearance of being more widely trafficked if I didn’t reveal that my site is rarely commented on, thus appearing rarely visited? That’s intellectually dishonest thinking, but that doesn’t mean keeping comments is the right move.

I’ll keep comments open for the time being, because I still like the model for my purposes, but what say you fine reader? Does this eliminate anything in your mind, or could you care even less about this now than you did when you didn’t even think about it?

In the past I put together a custom portfolio management app; it was crude and poorly programmed, but it got my feet wet in working on that sort of thing in php and mysql, and has launched me onto many experimental ideas. But it became a bear to manage as it was built with one design in mind, and when I moved on to others I had to adapt my site for that format. Not ideal in the least.

Most recently I put together a small manually built portfolio. It showcases a few pieces, and that’s about it. Not very impressive, but minimally invasive.

At this time, I’ve chosen to work with a second WordPress install to run my portfolio. This will allow me to categorize and tag my work as I add it to the portfolio, managing the work in a way that I’ve never really done in the past. Hopefully I get an opportunity to launch it soon, but in the meantime, take a look at my current portfolio.

For this reason, it is important to ensure the public can access information about opportunities at the college. In some ways they’ve worked towards this goal, but they can do better.

I’ve been a student at Lake Michigan College in the past and at the time found the website to be very frustrating to use as as a resource; this is perhaps a little less true now than when I attended, however, judging by my explorations of the site, the experience has only improved marginally in that the IA is a bit troublesome and the overall experience is a bit overwhelming visually.

LMC Web Site as of 3/24/2010

My First Observations

The current site is a bit of a mystery to me. It appears to be run on the Joomla CMS, which in my mind is perhaps a little strange for a college of this size, though I can understand the appeal of open source (hello WordPress!); but what gets me is the URL structure of the site. You end up with a very long query string on the end, e.g. index.php?id=3342&Itemid=13. This creates a bit of a mess in terms of SEO, though their interests may be focused primarily on the front page. I find it hard to believe that they wouldn’t be interested in such a small but crucial part of their overall SEO strategy. From my small bit of research, it appears that enabling search engine friendly URLs in Joomla is relatively simple, though perhaps their server capabilities prevent it.

The front page focus is pretty evident when you browse the site, as EVERYTHING is located on the front page, gladly not all shoved “above the fold.” This might not be as much of a problem, but the various elements on this page have no evident unified structure or design to speak of. This is a bit chaotic, and can overwhelm the user with choice. It really is unnecessarily busy. In an organization like this, there are probably many competing factors going into the design decisions, though a more organized approach would help to increase ease of use for students.

Lastly, and this is really the part I like best, the drop down menus have markedly improved from the version preceding it, though this menu is not without its faults. The drop down menus on the site are a bit overwhelming in terms of how much choice an individual has, and in some cases choices are duplicated across a few different drop downs. While this structure has served to make it easier in relation to previous versions, the IA could use a great deal of work in order to simplify things for users.

Possible Solutions

First and foremost, I’m really only proposing one possible solution of many. I wanted to capture what makes LMC great for this community, and remind folks that it is an affordable institution, close to home, ready to get you the training you need.

To do that, I wanted to update the logo–but only slightly. Perhaps giving it just a little refinement in terms of type treatment, and in process ensuring any updates I made remained true to the college’s current identity. In a lot of ways that identity has a great deal of traction around here, and it would be a mistake to ignore that.

Current Logo on the left, my proposed update on the right.

My first decision was to simplify the logo mark as much as possible while retaining it’s character. This was relatively easy to accomplish as I eliminated the border surrounding the mark, ensuring only the most important aspects of it remained. To my eye, this cleaned it up significantly.

My second decision was to refine the type; I’m not entirely sure what the typeface is for “Lake Michigan,” but it appears to be warped out of it’s designed ratios. This isn’t a particularly good practice as it can hinder legibility. In this case, it might not, but to get a good handle on its subtleties I needed to use a typeface I was mildly familiar with. I chose Jenson as an appropriate substitution for the serif and retained the small caps format, albeit a little more exaggerated. I wanted to set “College” apart, as it seems to be of secondary consideration in the overall scheme. I chose a sans-serif face, Futura, that would add a bit of distinction and would be appropriate to carry over into the rest of the web site.

Overall, the quality isn’t there quite yet, but the direction is obvious. A more refined logo mark and type treatment could go a long way towards polishing the college’s image. My ideas here are only a beginning, a possible direction, but I would like to see the institution refine an already well-known local brand.

The New Web Site

As discussed earlier, the current site is a bit of a mess, and my whole approach was designed to refine it and make things simpler for the user. After doing some studying of the current site I came up with a rough structure that I thought would help to address the needs of future and current students a little bit better by paring down some of the menu bloat that was evident before. Also, I wanted to clean up the front page in general, as there were a lot of different elements that served as distraction rather than as useful information. My focus in this redesign is to make it easier for prospective and current students to navigate the site and find what they’re looking for.

The proposed new site design. See full size. See portfolio entry.

There was a lot happening in the current site that helped to focus attention away from primary content. Colors were one of those distractions in my view. There was no real coherence to the color decisions that were made and their actual branding materials, something a casual reader or browser might not be aware of. There is a great deal of red throughout their printed materials; in fact, school colors are red and gray, so color decisions were pretty simple. I decided to limit colors on the site for this rough mockup to red, gray, and black. Hopefully this will help to keep one’s attention on relevant information and aid user’s in deciphering the interface a bit better. And, more importantly, keeping a coherent branded message across all mediums.

Additionally, I wanted to re-purpose the, what I’ll call, pictographic highlight at the top of the site. Currently it’s a an image rotator, with no real purpose in terms of what it provides the user, yet it takes up a rather large portion of the screen. In order to take advantage of an element that could provide great photography, but also be useful, I decided it would be the perfect way to highlight some aspect of the campus that might interest a prospective student.

Conclusion

Overall the mockup is a solution designed to aid in the navigation of the site, create a more obvious information hierarchy, and hopefully address some of the underlying problems with the current site.

This isn’t an end all approach, but one solution of many based on my understanding of the needs of the possible users of this site. The aim was to improve upon, rather than to prove something about, the inadequacies of the current site; hopefully this helped to address them in some small way, and ultimately will get you thinking about the possibilities of a well planned site design.

I figured if I was going to continue providing that tool for use, I should rid it of that bloated bit of analysis and make the number generation a little bit more seamless.

My project, Numb3rs & Nothing Else, is now ready for your entertainment.* Number generation is submitted through an Ajax call, making the process a little less jarring, and the results are toggled into view.

Numb3rs & Nothing Else

In addition to that change, I’ve completely eliminated any analysis, as the results were just plain muddying up the mini-app with unnecessary data, I’m now running the css through a custom minification script, the site utilizes minify for javascript, and I’ve implemented gzip compression across the board.

Not that this app receives much traffic or anything, but this is one of those “best practices” things. I’ve implemented it on this website, as well as several others I operate, and YSlow seems to like it. I’ve noticed slight performance gains so far. Nothing to complain about.

Anyway, this is among one of the many little projects I’ve put together for training purposes, so for what it’s worth, enjoy.

I’ve eschewed its use on my personal site for a while, but recently decided to give the trial account another run–you’ll notice the Typekit badge docked to the bottom of the page, indicating that I’m freeloading the system until I decide whether or not to utilize the service on a paying basis–in order to determine its usefulness for me. What are my needs here?

I would certainly like to use a typeface that can be seen uniformly by all users, and this definitely provides the necessary functionality, but I will have to be careful in the choices I make; there are a wide array of font families to choose from, and you’re apt to go wild when first given access to such variety. It is a variety the likes of which have never been seen before on this here web. At the moment I’ve chosen Droid Serif made by Google Android, in all 4 weights and styles for the body copy.

I’m using both Typekit and Cufon to include non-standard typefaces, but would like to eliminate one of the two at some point, and I would prefer to eliminate Cufon because of text selection and licensing issues. I look forward to testing the Typekit service further.

Believe me, most tasks I undertake are neither difficult, nor do they warrant such a reaction,² but I find myself a little terrified of starting something that could become overwhelming. In order to move past that nasty procrastination stage, and arrive at an appropriately acceptable result, I employ a couple of simple strategies that makes the given task a little less daunting.

Find a mitigating factor. In the case of getting projects started at work, I often need to find something that helps to lessen the impact of a larger task. In most circumstances that means finding a solution that makes the project easier to finish by speeding up the menial tasks; often I’ll see if there is a way to use php to my advantage by setting up a little script to run through a file, file names, or output some code that would have taken me quite some time to do manually. In other cases, I’ll take advantage of actions and batch processing in Photoshop in order to run through a long list of images in the shortest amount of time, with the least amount of manual processing possible.

Delegate tasks efficiently. Which tasks are of the need-to-do-now variety and which are less important? In a lot of cases I tend to block early sections of my day for the easy to do tasks in order to get them done, as well as to do something that requires less concentration in general, and devote the rest of the day to one or two of the more important projects on the docket. This doesn’t always work well and may not be what others recommend, but it helps me to work through tasks efficiently as well as to prepare myself mentally for the most important project; I do break this pattern if important projects are more urgent than usual. The reason I adopted this pattern was primarily as a way to deal with early morning meetings, as meetings would often interrupt my creative flow on the larger projects.³

Look on the bright side. You could always be doing something less fulfilling than what it is you are getting ready to start. I’ve not written much in the past year as far as short stories, editorials, poetry, and web design posts go, and this is because I lacked the motivation to do so. Why? Because I don’t always appreciate my skill and look pessimistically at my ideas. Don’t emulate that. Look for the good in your ideas, and you’ll be less likely to put them aside.

Make your goals public. It’s more difficult to slack off when others are holding you accountable, though it is easy to cheat that one if you’re doing it online only. Make the announcement on your blog, but make sure you’ve got a living person breathing down your neck to make sure you’re completing a task.

To summarize. You should find a mitigating factor, delegate tasks efficiently, look on the bright side, and make your goals public in order to make sure you get yourself motivated. As I said, these are simple things that I’ve done to motivate myself, and they work for me; which means, they may not work for you; which means…that you should think of things that help to motivate you, write about it, and act on it. Get to work, and hold yourself accountable to your goals.

If you scroll down to the bottom of the site on the home page, and on any entry page, you’ll notice a set of buttons that will help you navigate to the next and previous entries, or the next and previous pages of the home page. I needed a way to style these, and oddly enough WordPress did not provide a class name for either of those links. Too bad. So I needed to find out how to adjust that in order to target those links. In addition to that, I needed to also make a small change that classes wouldn’t have allowed for, which was to get the function to output code for the cases in which there were no other pages or posts in a given direction. My first thought was to find whatever core file these functions were located in and then make the change there; I proceeded to do this, got it working, and decided that I should go about this in a different way if I ever wanted to upgrade without having to change that file every time–if I even remembered in those instances.

The tags in question were: next_posts_link, previous_posts_link, next_post_link, and previous_post_link, as well as a few more functions that were related to them. Each of these provides the basic functionality I needed to modify; I tried to replicate these functions, using the same name, in an effort to essentially overwrite the original WordPress core functions. Well, I located them in the link-template.php file, copied and pasted them into my themes functions.php file, and proceeded to make the necessary changes. When I uploaded functions.php and refreshed my site, I had a big giant error; actually it was less an error and more a blank screen, which is worse in a lot of ways as you have no idea what went wrong. I should have known from my programming experience that I couldn’t duplicate these functions in this way.

I was stumped for the longest time, and search after search on Google was leading me towards something called, add_filter, which it turns out doesn’t quite overwrite the function so much as filter the function results through your new function; this was not what I wanted to do on any level. I couldn’t manipulate the data through a filter to achieve the needed results.

After some time, and a lot of searching, I landed on a WordPress MU forum (still not sure what MU is), that gave me my answer–the most obvious answer–which was to take the functions I needed and rename them. I could then use those new function names in place of the old ones wherever I needed them in my theme files.

That’s easy, ain’t it? Why don’t people explain this more often, or even need to to do this enough for it to be found on Google?

Update 1/19/2010: I wanted to clarify just in case some one stumbled upon this looking for an actual bit of code that might show them what I was up to. So here goes.

Instead of adding a filter to the function you want to change:

add_filter('next_posts_link', 'new_next_posts_link', 0);

Add a new function to functions.php and call it in your template wherever you were going to use the old one.

function new_get_next_posts_link( $label = 'Next Page »', $max_page = 0 ) {
    global $paged, $wp_query;

    if ( !$max_page ) {
        $max_page = $wp_query->max_num_pages;
    }

    if ( !$paged )
    $paged = 1;

    $nextpage = intval($paged) + 1;

    if ( !is_single() ) {
        if( empty($paged) || $nextpage <= $max_page) {
            $attr = apply_filters( 'next_posts_link_attributes', '' );
            return '<a href="' . next_posts( $max_page, false ) . "\" class=\"next\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';
        } else {
            $attr = apply_filters( 'next_posts_link_attributes', '' );
            return '<span '.$attr.'>'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</span>';
        }
    }
}
function new_next_posts_link( $label = 'Next Page &raquo;', $max_page = 0 ) {
    echo new_get_next_posts_link( $label, $max_page );
}

I’ve essentially adjusted this line:

if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) {
    $attr = apply_filters( 'next_posts_link_attributes', '' );
    return '<a href="' . next_posts( $max_page, false ) . "\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';
}

And changed it to this next bit in order to add a class to the link for styling purposes as well as to display a grayed out link if there was no next (or previous in the case of those set of functions) page.

if ( !is_single() ) {
    if( empty($paged) || $nextpage <= $max_page) {
        $attr = apply_filters( 'next_posts_link_attributes', '' );
        return '<a href="' . next_posts( $max_page, false ) . "\" class=\"next\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';
    } else {
        $attr = apply_filters( 'next_posts_link_attributes', '' );
        return '<span '.$attr.'>'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</span>';
    }
}

So, again. If you’ve got something to modify, do it this way. The functions.php template file is your best friend.