Check it out

Demo
Download

Features

Create four types of initial letters easily.

1. Dropped – The baseline of the initial letter is below the baseline of the body text
2. Raised – The top of the initial letter is above the height of the body text
3. Reversed – The initial letter has a background
4. Overlapped – The initial cap actually overlaps the body copy. Keep the color and/or tint light enough so readability isn’t impaired.

Usage

Download and unzip the Initial Letter file. Drop it in your site’s root directory. You can place the files anywhere you would like. Just refer to them correctly.

1. Include JS files

2. Include CSS file

3. Activate plugin using jQuery selector

   The code above is an example. You will need to use the jQuery selector appropriate for your project to identify the first letter of the text you want to alter. If you need help understanding selectors, use this jQuery selectors resource.

4. Options
   You have these four initial letter style options to work with: dropped, raised, reversed and overlapped.

   initialLetter: "dropped"

   initialLetter: "raised"

   initialLetter: "reversed"

   initialLetter: "overlapped"

   You can also create your own initial letter styles. The name you choose then becomes the class name for the span tag that wraps around the first letter of selected text.

   initialLetter: "createYourOwn"

   The above setting would generate this html

   <span class="createYourOwn">L</span>orem ipsum dolor sit...

Disclaimer

Although the plugin will make the process of making initial letters easy, you will probably still need to adjust the Initial Letter CSS file to fit the typographic settings of your site. Initial Letter uses typographic settings generated from http://lamb.cc/typograph/.

Cross-browser compatibility

Firefox – No issues
Safari, Chrome (Webkit), Opera – Sight difference in line-height of initial letters.
IE 8, 7 and 6 – No issues

Giving Credit

Although I wrote this simple plugin, I hacked code provided by Hamish Campbell for finding the first alphanumeric character of any body of text selected using jQuery.

Fork it!

If you are a Githubber and you would like to fork or clone this plugin, you can do so here.

jQuery

I chose to use jQuery to select and then wrap the first character of text in a span tag.  This also allowed me to use Firebug to to push and pull the span’s styles within the browser. I initially hacked code written by Hamish Campbell’s to find the first letter. This is the code I used to make the drop caps possible:

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);
    });
});

This worked well, but it lead to more questions.

What is a drop cap anyway?

A drop cap is a type of “initial letter.” Wikipedia explains an initial letter this way:

In a written work, an initial is a letter at the beginning of a work, a chapter or a paragraph that is larger than the rest of the text. The word comes from the Latin initialis, which means standing at the beginning. It is often several lines in height and in older books or manuscripts sometimes ornately decorated.

Further Googling led me to this AIGA post that indicated these five basic initial letter types:

1. dropped
2. raised
3. boxed
4. reversed
5. overlapped

Making a plugin

While trying to create these various initial letter styles I decided to make a jQuery plugin to make switching between initial letter styles easy. So, check out my Initial Letter plugin for making drop caps, raised caps, reversed caps and overlapped caps.

The watch: RM027 by Richard Mille

Although the craftsmanship and the photography for this watch looks flawless, it doesn’t exactly look like a device with which one can easily tell time. A little Googling revealed that the watch weighs the same as a few pennies, is made of strong and lightweight metals and tells accurate time. I thought every watch was made this way.

A worthless exploration

A watch this expensive must have a killer website, right? Wrong! Eager to learn the reasoning behind such a high price tag for a watch without diamonds or gold, I fired up Firefox to check out the watch’s website — Richard-Mille.com. Upon first page load, I was confronted with the ever-annoying splash screen with nearly illegible flashing message indicating optimal screen resolution settings. Boo.

The worst part is that I had a feeling a barely usable Flash site was just one click away. So here it is — no content, just an image and navigation:

I was actually excited to see a link to “The Brand,” so I clicked on it expecting to read focused and inspiring copy about the branding. Instead, I came across microscopic white text over a black background.

After straining my eyes reading a few lines, I gave up and navigated to the “Watches” page. I figured that if reading was going to be difficult I would just look at pictures of the highly publicized RM027 watch. Surprise, surprise! There are no freaking photos of this new watch. Now fully frustrated with the site, I wisely clicked on “Media Corner” as a last attempt to find information about the watch.

I found info for the RM027 on this page, but I had to download a PDF to read about it. WHAT THE F$CK! I don’t want to download a flippin’ PDF to read information that should be content on the site.

Closing remarks

I hate Richard-Mille.com. The site is a perfect example of how to piss off and frustrate visitors. The user experience, readability and music is terrible. In all honesty, I can enjoy the RM027 watch on creative, innovative and artistic merit. And along these lines, this is an exceptional watch. However, as far as usability, telling time on this watch is much like using its site to acquire any useful information. My advise to Richard Mille: Sell one of these watches and then use the money you pocket to hire a Web designer to redesign and restructure your site with the goal of achieving simple usability and exceptional user experience.

Have you buried any websites without a tombstone?

I think there should be a graveyard for all sites that pass away. And for each there should be a parting message. What would you put on the tombstones of your expired sites?

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 blog – Jeffrey 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.

I wanted to create a creased paper effect using CSS3 radial gradients. Here is a photograph of what this effect looks like on paper:

Below you’ll find the screenshots and CSS3 codes used to create the effect in Firefox and Webkit:

Firefox

background: -moz-radial-gradient(50% 1200px 1deg, circle closest-corner, rgba(51, 51, 51, .9) 50%, rgba(242, 242, 242, .5) 95%);

background: -moz-radial-gradient(50% 145% 1deg, circle closest-corner, rgba(51, 51, 51, .9) 50%, rgba(242, 242, 242, .9) 95%);

In Firefox, I had to use two styles because I ran into a problem with getting the radial gradient to appear in the right place at the bottom of its block level element (BLE). I used the first style with a fixed position (px) on BLEs that had a short height. This allowed me to force the gradient way below the bottom of the BLE to create a more subtle effect. However, on BLEs with a tall height, the gradient showed up in the middle of the BLE. To correct this, I had to use relative positioning (%) to make it appear in the right place.

Overall, I love how Firefox allows you to create an ellipse (oval) that stretches the radial gradient to the left and the right. The only crappy part is that there isn’t one style that can scale correctly to fit any BLE’s height.

Webkit

background: -webkit-gradient(radial, 480 bottom, 5, 480 bottom, 250, from(rgba(51, 51, 51, .2)), to(rgba(242, 242, 242, .1)));

Webkit, on the other hand, cannot create an ellipse. No matter what you try, you will always get a perfect circle. URGH! But you can set a y-axis position that works for any BLE’s height.

I don’t think that either Firefox or Webkit planned for radial gradients to be used this way. As a result, neither are perfect for this, but where’s the fun in not pushing boundaries?

Time boundaries

When time is scarce, let your clients know what you can give them, and stick to it. You’d be amazed at how much you can get done when you give your clients firm deadlines!

Read our new street sign:

First of all, the sign is misspelled. It’s not Briar Wood Lane; it is Briarwood Lane. Briarwood is one word, not two. Next, the typeface chosen makes “Wood” look like “Weed.” To top this off, the plant graphic within the sign resembles marijuana! I guess from now on I’ll have to direct new visitors to our house by telling them to look for the sign decorated with pot leaves that reads “Briar Weed Lane.”

Talk about embarrassing. My neighborhood is showing its obvious issues.

But hey, the city is just as bad. Can you detect the error in the sign that the city installed, also at the top of my street? I’ll give you a hint: It’s not the one that correctly spells “Briarwood Lane.”

The correct spelling is “YIELD.” …Unbelievable!

*The online collaboration software by Teambox has been updated considerably since the writing of this article. You can now find a more current guide on the Teambox site.

I’ve been using Teambox for the past three months, and it has enabled me to perfectly manage all of my projects. Whether you freelance or not, we all know that completing design work takes tons of effort. Well, guess what? Getting this work done often includes the following crucial responsibilities as well:

• Interfacing with multiple contacts
• Sending and receiving e-mails
• Sending logo files and design comps
• Waiting on and managing multiple content documents
• Drafting and redrafting contracts
• Indicating work hours
• Tracking client requests
• Remembering and assigning tasks

I’m not going to say that it is always a nightmare to maintain the communication necessary to complete a project. However, with all of these moving parts, a breakdown of the above responsibilities could create tension between you and your client (especially if you are freelancing). So why not introduce a solution that helps you and your client communicate effectively through the duration of a project?

Sign up

To get started, go to Teambox.com and create an account.

Create project

Give your project a name, and then create a URL to your project. See below for an example. Check “Enable time tracking” if you are interested in recording the time it takes to complete the project (you also can set this up later).

Invite others to join

Ask all parties involved in the project to create an account at Teambox. As accounts are created you can easily invite each person via e-mail address or Teambox username. Click on the “People” button to send invites.

Pages

Click on “Pages.” This section can be used to create a page containing anything you want. I tend to use it for storing general information and organizing documents. For example, I usually create a Contact page so there’s no confusion about how to reach somebody.

I also prefer to have a Contract page from which everyone can access the contract in all of its versions/revisions. If there is ever a dispute about services or if service need to be expanded, I have found it nice to have this available for the client to see.

Pages are great for managing multiple documents, too. Let’s say you have to manage a dozen bios. Create a Bio page, upload the documents, create dividers, and drag them up and down to arrange them logically. You can apply this same concept when managing Web content sent as documents, organizing photos and managing design comps or logos. Pages makes content easy to find, and it eliminates having to resend the same logo file to your client every time the client misplaces it. Instead, your client can get it from Teambox.

Create Task Lists to group tasks

Every project requires the execution of crucial tasks; the “Task Lists” will help you identify them. Click on Task Lists at the top and then on the gray button to the right that reads “+ New Task List.” A Task List groups and organizes specific tasks for your project. Start by creating different headings within the Task List — for example Design, Budget, etc. This feature helps keep your tasks organized.

Add Tasks to your Task Lists

Now add tasks under your Task List heading(s) by clicking the “+ Add Task” button.

Give your “New Task” a name and indicate what needs to be done. You can assign tasks to Teamboxers and  add due dates.

All tasks are editable, and any Teamboxer can respond to them. Tasks that aren’t completed by their due date turn red, and finished tasks are marked by a strikethrough.

Task Updates

As you work towards completing your tasks you can leave status updates. Click on the task that you are working on to check or update its status. Here you can define what needs to be done by commenting. This task can be assigned or reassigned to somebody. You can also add an attachment and indicate working hours.  And if the task is done, click resolved to close this task. All resolved tasks are archived and easy to reopen if needed.

Reordering Tasks and Task Lists

You also can reorder your tasks and task lists. By hovering just to the left of your tasks you will see the cursor change to a hand icon. Once that happens, drag and drop to reorder your tasks. If you want to reorder your task list headings, you will need to click at the top of the task lists where it says, “Reorder Task Lists” in blue. This will reload the page and allow you to drag and drop the task list headings to fit your needs. Then click “Done reorder” and the updates will be made.

Alphabetizing your task lists and tasks greatly helps create logical and speedy navigation. A well organized project is easier to follow and  complete.

Time-Tracking

When teammates log their work time in the tasks section, everyone can easily monitor hours spent on a project by clicking on the “Time Tracking” button. You have filter options on the right to easily check a teammate’s hours, or you can filter the results to check hours logged for a particular task.

Conversations

Conversations is another great feature of Teambox that lets teammates post questions or ideas that are outside the scope of the task lists. For example, you can start a conversation to ask the team for suggestions on how to improve business. You also could use the Conversations tool to initiate a time to schedule a meeting. Conversations is a good place to post a link that you want to share. This is also a smart place for giving positive feedback to your team. Tell your team that the client loves the comps, and to keep up the good work.

The other cool benefit of Conversations is that it will send your team members e-mail updates so they can easily follow the conversation string.

Files

The Files section conveniently gives you access to all the files that have been uploaded across sections. This makes it easy for you and your client to find and retrieve files.

Overview

The Overview page displays all the updates you and your teammates make to a project. You can always check the Overview to see what is happening. You can subscribe to the Project RSS feed for project updates, and you can download a calendar indicating all of your projects’ start and end dates, too.

The “Update your status…” input box can be used to leave quick messages or to convert a status update into a task. Hovering over the date of any status entry will reveal these options: Convert to task, edit comment and delete.

Tricks of the Trade

Typing the “@” symbol in any input box will prompt a drop-down menu containing a list of the project’s members. By selecting one, several or all members from this drop-down your message will then be e-mailed to the selected member(s). This helps keep your team informed even when fellow Teamboxers aren’t logged into Teambox. Try using this feature with task updates, Conversations or from the Overview page.

Another time-saving feature lives inside the “All Projects” tab. If you hover over All Projects, a drop-down will appear that lists all open projects. When you then hover over one of the project names, you will see three icons that are shortcuts to Conversations, Task Lists and Pages. This is surely the fastest way to zip back and forth between projects.

Conclusion

Project management can be a massive responsibility. Whether you are collaborating with a team, working one-on-one with a client or working on a personal project, Teambox will help manage your team and your projects successfully to completion.

Aside from the benefits listed above, it also promotes communication, transparency and accountability: Everyone knows his or her  role. Everyone can see how long a task is taking to complete. Everyone has the same access to a project’s information. No one is left in the dark.

Bringing an end to communication and workflow issues has made my clients grow to love Teambox. So check out thisonline collaboration software by Teambox, and contact the company directly if you have unique requirements for your project. Teambox can be set up on your own servers. You also can keep up with your project via your iPhone.

Best of luck!

Disagreeing is not bad

Sometimes disagreement contributes to better results. I prefer to commit myself to quality work rather than conflict avoidance. In business, avoiding conflict just to remain well-liked can inadvertently sabotage the efficacy of a project. There is too much time, money and creative energy at stake to sweep issues under the rug.

Fight for what’s right

Lesson 1: During the summer of 2009, I was approached by the founders of a user-research company who wanted to update images on their website so their site would look cooler. Now, I could have done as they asked and made some quick, easy money. But I also knew that simply updating the images wasn’t going to make their site “look cooler.” So I informed these potential clients that they needed help with more than the images because EVERYTHING about their site was poorly executed.

Disinterested in my unsolicited advice, the clients pressed on and asked how much it would cost to get just the images updated. That’s when I respectfully told them to seek help elsewhere because my specialty lies in fixing a website’s problems, not covering them up.

And wouldn’t you know it, the founders took this to thought and decided that their business was at a crucial point in its development and warranted rebranding. So guess who they came to for advice? Me.

Turns out, this bit of honesty (no matter how risky or uncomfortable) ended up being the catalyst needed to take the clients’ business to the next level. And in the end, both sides won: Their business image evolved, and I landed a bigger project.

Lesson 2: In another case of fighting for what’s right, I dealt with a client who consistently rejected the T-shirt designs I was producing for his company. Each time I presented a design I thought was great, he turned it down. After each rejection we would get together to discuss new ideas. I soon found myself with a project that was taking twice as long as I had planned. Then, after one of our meetings, the client suggested I use a previously rejected image in a different way. That’s when things came together.

In this instance, allowing the client to disagree with me and giving the project time to resolve itself was critical. Yes, this took longer than I wanted, but it’s what the project needed. In the end, all the T-shirts sold, we all got paid, and everybody was happy.

It’s worth the struggle

Being honest will more often than not lead to a successful project. Don’t be afraid to disagree with your client and let your client disagree with you. Sometimes, a project will present unique challenges that can only be solved by way of a little push and pull.