Archive for November, 2009

The Inbox and Me

Monday, November 30th, 2009

Generally, I wouldn’t consider myself a very organized person.  The Xbox 360 in my basement has game cases (open and closed) all over the floor in front of it.  I rarely make the bed and I tend to pack by just throwing what I need into a bag.

With all of that said, I have found that I keep an extremely organized mailbox, especially compared to my friends and colleagues.  Let’s take a look at both of my Personal and Business email accounts.

Personal

GMailI use Gmail for my personal email account and have been for well over 4 years.  Currently, I have 10 emails (perhaps I should say “conversations”) in my inbox.  How do I keep this inbox so manageable?  I use Gmail’s labeling and archiving.

I have 7 labels that I assign and archive away anything that I no longer need in my inbox.  By doing this, I simply look at the emails tagged under that Label to find what I need.  If there is something that I don’t need to label but might want to keep for prosperity, I  archive it.  This doesn’t place it any category, but allows me to find it via Search.

Most of the time, the emails in my inbox only exist because it is something I’m either engaged in, need to reply to or have to remember.  Once I no longer need the email, I either delete, label or archive it.  Following this rule allows me to keep a manageable personal inbox.

Business

At work, I am the web producer so I’m responsible for updating most of the content on our website.  This includes keeping current content relevant along with working on new projects and redesigns for the website.  It’s important that I keep my inbox manageable so I can stay on task and stay on top of projects.  We use Microsoft Exchange at work, so I use Outlook 2007 for my email client.  When I left work today, I had 8 emails in my inbox.

I keep this inbox organized by using Outlook’s Folders, Archiving and Categories.  Along with my inbox, I have over 2 dozen other folders I place emails in.  These emails normally consist of tasks I’ve already completed or general of interest emails I want to keep around.  Since I get so much email, I have my folders set to archive after 30 days.  Doing this prevents me from getting the dreaded “Mailbox is full” emails.  The one disadvantage to this is it actually doubles my # of folders to 4 dozen since every folder has an archived version.

Finally, I manage my inbox by using Categories.  I use different colors to represent where I’m at on a task/email.  For example, Yellow means that it is something I should do today.  Red means it is something I must do right away (Generally, this doesn’t occur since if it was something I had to do right away, I’d just do it, not mark it with a Red category).  Green means I’m waiting on someone or something before I proceed.  Blue means it’s a task that needs to be completed, but there is no timeline.

I think managing my inboxes this way makes me a more efficient worker (business) and a better friend (personal).

Posted in Web/Design | 3 Comments »

How-to: Download an Embedded Flash Video

Friday, November 6th, 2009

A few days ago I was trying to find a way to take a video off of Facebook and put it on YouTube.  I read a way to do this using Safari in an article at MacLife.  These steps worked for my Apple, but I’m not sure if it will also work with Safari on a Windows machine.

  1. Use Safari for a web browser.
  2. Open the webpage with the embedded video and play the video.
  3. Go to Window > Activity to open the Activity Window.
  4. Find the video you wish to download in the activity window.  The easiest way to do this is just look at the filenames of the larger files.  It will likely be an .flv file.
  5. Once you found it, and the video has finished loading, hold the Option key and double click on the Filename inside the Activity Window.
  6. The file will be downloaded into your Downloads folder.

At this point, you can do what you want with the video, such as storing it on your hard drive or uploading it to another site (such as YouTube).  Can someone on a Windows let me know if this also works with Safari for Windows?

    Posted in Web/Design | 3 Comments »

    Create a Stylized Content Box

    Monday, November 2nd, 2009

    With the popularity of widgets and grid styles in web design, there is a need for appealing content boxes.  Here is the HTML and CSS on how to recreate the content boxes we used on the State Bar of Wisconsin home page.

    Sample Box

    1. List Item 1
    2. List Item 2
    3. List Item 3

    First, the HTML:

    <div class="homeBox">
<h2>Sample Box</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<img alt="" class="homeBoxBottom" src="/demos/homeToolsBackgroundBottom.png">
</div>

    The image at the bottom is the one problem to this method. The image is purely aesthetic and probably shouldn’t be in the content. The rest is nice, since it’s simply a div and an h2. I used an image at the bottom since the box would have a variable height. There are other methods around this, but they would have also used extra mark up.

    Next, the CSS.

    .homeBox {
	padding-top: 30px;
	position: relative;
	background-image: url(demos/homeToolsBackground.png);
	background-repeat: repeat-y;
	width: 230px;
}
.homeBox h2 {
	background-image: url(/demos/homeToolsHeader.png);
	width: 230px;
	background-repeat: no-repeat;
	color: white;
	display: block;
	font-size: 16px;
	font-weight: normal;
	height: 26px;
	padding: 2px 0 0 20px;
	position: absolute;
	top: -2px;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 16px;
}
.homeBox .homeBoxBottom {
	bottom: -2px;
	position: absolute;
}

    There isn’t anything too complicated here. The h2 includes the black & red image and it uses the full width of the div. It’s positioned absolutely and pushed 2 pixels out of the base div. It’s nice that the h2 is completely semantic and flexible, but still highly stylized.

    The div has a 1px high image that gets repeated. This is what creates the impression of the header of the box being wider than the actual content of the box. If you don’t care to have that aesthetic, you could remove the images and just use a border. This would also solve the img issue in the HTML above.

    This stylized content box is a good example of decisions that you sometimes have to make between style and semantics.

    Posted in CSS | No Comments »