Apr 30, 2010 0

Giving credit where credit is due

I am my own worst client. It has been four years since I last touched my website. This redesign was way past due.

This post is intended to illuminate the gobs of resources that influenced this site, and to give credit where credit is due.  Let’s get to it.

Planning/Brand building

Watching a video by Marty Neumeier titled “Innovation Workshop:  Brand Strategy + Design Thinking = Transformation” helped tremendously with planning the conceptual foundation of 812studio and this site. Seriously: Get this video; it will be one of the most inspiring and focusing exercises for you and your business.

I like to work with clients I believe in. It is not my goal to design for the sake of  making stuff I think is “cool.” It’s my goal to get to know my clients, enable them to organize and define their identity and then help them build designs that communicate their brand effectively.

Design Theory

Prior to building an addition to the Museum of Modern Art (MoMA), architect Yoshio Tanaguchi was quoted as saying, “I will make the architecture disappear.” Of course, you can’t build something that is invisible, but you can build something that appears unobtrusive. Even more, you can build something that plays second fiddle to the main attraction. In this case, I wanted the focus to be on the content of my site, and not the site itself.

I also was influenced by the following two articles by Brian Cray:

  1. Blog design best practice: Scrollbars not sidebars
  2. The more I know, the less I need: Thoughts on web design

Brian Cray makes some good arguments disputing the need for sidebars in blog sites. And I agree; to keep the focus on the content, don’t weave competing content into your site. Brian also does an amazing job of testing every element of his site to learn what really works best. The Web is full of untested statements about best practices. The truth is that we all should be doing our own testing and drawing solutions based on the data we receive.

Layout

Believe it or not, I don’t always start from rough sketches on paper. Sometimes I just jump straight into Illustrator, dump all the necessary pieces into the art board, and start moving content in and out of various grid structures until I find the most logical and flexible layout. I went with the 960 Grid System based on a 12-column layout.

HTML

The way I write HTML is largely influenced by these books:

  1. “Designing With Web Standards” by Jeffrey Zeldman
  2. “CSS Mastery” by Andy Budd (There was just as much to learn about HTML in this book as there was CSS)
CSS

The way I write CSS is completely based on these resources:

  1. “CSS Mastery” by Andy Budd
  2. Google (for endless resources to fix IE bugs)
  3. “CSScaffold” by Anthony Short – This site leverages CSScafold, and I find this to be the best thing to happen to CSS since, well, since CSS!
  4. Creating Triangles in CSS by John Rohan – I used this info to make the comment bubble arrows.

As for CSS validation, I think it is important to write code as cleanly and logically as possible. Yet, let’s be honest, despite the validation flags set off by CSS3, it still offers a much better way of doing many things. And chances are, one day soon, all this new stuff will become valid practice.

jQuery

There is so much out there about jQuery right now. Here are the resources I’ve used for code and knowledge:

  1. “jQuery Enlightenment” by Cody Lindley – This was a great read for learning more about jQuery. I often visit Cody’s jQuery Selectors resource also.
  2. Nettuts and Theme Forest blogJeffrey Way is a freak of nature. I have no clue how this guy learns so fast. I am beyond grateful that he takes the massive amounts of time required to share knowledge.
  3. Faded by Nathan Searles – I use this on the home page of this site. I love it.
  4. Hamish Campbell’s tip for using jQuery to find the first letter. This is the code I used to make the drop caps possible (since CSS3 support for drop caps is very inconsistent between browsers):
    jQuery(function($) {
        //Grab first character for Drop Caps
        $("div.entry p:eq(0)").each(function() {
            var text = $(this).html();
            var first = $('<span>'+text.charAt(0)+'</span>').addClass('dropcap');
            $(this).html(text.substring(1)).prepend(first);
        });
    });
    
  5. jQuery Validation Plugin – I just didn’t feel like writing my own validation this time. So I’m using this for now. Has anyone used the Ketchup Plugin? I thought about trying this, too.
  6. Infield Labels – I’m currently using this plugin to place the label over the field and then fade it out when the field is clicked on.
  7. jQuery Plugin: LiveFilter 1.2 – Mike Merritt made this great plugin that filters a list of content as you type. I initially came across this feature at iA.
wordpress
  1. Diggin into WordPress – I owe endless thanks to Chris Coyers (css-tricks.com) and Jeff Star (perishablepress.com) for their wealth of WordPress knowledge.
  2. Cleaner WordPress Gallery Plugin – Thanks to Justin Tadlock for this great gallery plugin. Whether you use this plugin or not, learn how to exclude images from your gallery with the gallery shortcode.
  3. Estimated reading time in web design – Brian Cray created a great script for estimating the reading time of articles. It might not be necessary, but I like this idea.
  4. WordPress: Add Scripts to the Pages You Want – Byron Bennett, thanks for this tip.
  5. WordPress: Advanced Comment Customization -Thank you, Aaron Gloege, for this in-depth explanation detailing how to custom-code your comments.
  6. WPBeginner – Has a useful script for generating multiple-header images randomly. I liked this idea but decided that I wanted to generate random messages at the footer of my site to fulfill the equation: 812studio + U = “”.
    <span class="good">812studio + U =
    	<?php $benefit = array(
    		'1' => 'A Darn Good Website',
    		'2' => 'A Strong Identity',
    		'3' => 'A Great Partnership',
    		'4' => 'A Winning Team',
    		'5' => 'Trouble for Your Competitors',
    		'6' => 'Success',
    		'7' => 'A Photo with Obama',
    		'8' => 'Your Companies Logo on the Moon',
    		'9' => 'A Better Looking YOU',
    		'10' => 'A Better Tomorrow',
    		);
    
    	echo $benefit[(rand(1,10))];
    	?>
    </span>
    
  7. WP-Syntax – There are scores of code syntax highlighting plugins; however, this is the one I tried first and found easy to customize.
  8. SyntaxHighlighter Evolved – I have found this to be a much better solution than WP-Syntax.
  9. Yet Another Related Posts Plugin – This is an excellent plugin for relating posts. Plus it is easy to customize.
Typography
  1. Scale & Rhythm – I used this handy site when attempting to create a good scale and rhythm for typography on this site. I kind of butchered things a bit. Nonetheless, this resource is helpful. Up to this point I had been using the Em Calculator for this stuff.
  2. Typekit – So far, I am impressed with Typekit. Honestly, I wanted to get my site out in Mueso before everyone else did. I missed out on the Archer trend. I have to admit that I love Archer, and I think the amazing Darren Hoyt was one of the first to employ it online (it’s no longer used on his site).
  3. Compose to a Vertical Rhythm – Here is a typographical gem of an article from 2006! Thank you, Richard Rutter.
  4. The Line Length Misconception – This is the best article I have read related to the appropriate number of characters per line. I think my cpl is just about 90.
  5. The 100% Easy-2-Read Standard – So far, I find this to be the best argument for easy-to-read font sizes.
  6. Typographic Design Patterns and Best Practices – I also found this article at Smashing Magazine to be informative.
Writing
  1. Minalisms – My wifey is a professional editor. When she isn’t working for the StL Post-Dispatch or Wells Fargo, she helps me sound smarter. Thanks, babe.
  2. Zurb and Viget – I love how well these companies write about everything. These are companies that I would one day hope to be good enough to work for.
  3. Learn to Fucking Spell – I am guilty of not giving my writing the time and care that is essential. This article helped me regain focus.
  4. Let’s Take This Offline – Excellent points on blogging.
Overall influences
  1. Build
  2. Dustin Curtis
  3. Digital Mash
  4. Yaron Schoen
  5. Jin Yang
  6. Wilson Miner
  7. Jakob Nielsen’s Website (usable information technology)
  8. GOOD
  9. Nick La
  10. Best Web Gallery
  11. 24 Ways
  12. Evan Hecox
  13. Emil Kozak
  14. Nick Shea
  15. Brad Howe
  16. Kohjiro Konno
  17. Brandon Anshcultz

And countless others.

Project Management

Teambox – Last but not least, Teambox has been an excellent resource for managing this project. I collaborated with the Teambox team to write a real-world tutorial about this great web app. I use Teambox to manage air-tight projects. I make all my clients use this as well, and they love it. I can’t say enough about how awesome Teambox is.

Done and done

I want to thank all of these people and resources for caring enough to share. Much respect.

More?