Virtual Machine Wallpapers

July 22nd, 2015 @ 5:05 pm PST
As a web designer, I have to open up multiple verisons of Windows running various web browsers and versions of each. To do this, I've found that VMWare Fusion works great. I can run most any operating system right on my Mac without needing multiple computers on my desk. To keep things tidy, I put together some consistent desktop wallpapers for each operating system that matches the OS branding colors. Most Windows primary color is blue, but they each have their own unique hue that sets them apart from the others.

VMWare Fusion Screenshot - multiple versions of Windows
If you have a similar setup, or just want some super-simple desktop wallpaper to remind you which version of Windows you're looking at, feel free to download them from the links below.

VMWare Desktop Wallpaper


All images are 1920x1080 in high quality PNG format, perfect for any VM you might want to run. Hope you find these useful.

How to Communicate via Email

February 25th, 2015 @ 10:16 am PST
Email is great. It lets you converse with other people with messages without interrupting them like a phone call or text message would. A phone call, though useful in many cases, is sort of like say "Talk to me now, I need your undivided attention", whereas an email lets you say what's on your mind allowing the recipient to get back to you at their convenience. This is especially handy when the answer you're looking for isn't something that's needed right away or particularly quick to answer.

The websites and email applications that we manage email messages in are great organizational tools. By using common subjects, they can put entire discussions into "threads" which collects everything into one place. This can be very helpful when going back to see what was said earlier in the conversation and for a record of any decisions or answers that have been given. All major email applications including web-based readers like Gmail support message threads. Only a well formatted email message will find itself organized into an email thread. When sending the first message and when replying, it's important to maintain that format that was started in the beginning of a discussion. If a client emails me a message with the subject "website", when I reply, it'll go directly into their thread with the subject "Re: website". If I were to reply and change the subject, or write a NEW message altogether, it will no longer be part of that discussion thread. It takes an extra step to get things disorganized like this, but I see it more often than I should.

When writing an email, it's up to the sender to be clear and concise with what it is you're asking. This is all based on Letter Writing 101, just because it's digital doesn't mean proper etiquette should be ignored. Give the recipient the info they need, don't assume they know what you're thinking or have them try to guess what you're trying to say. You don't know what the other person's inbox looks like, they might get hundreds of emails every day. Do what you can on your end to make sure your message is easy to find and easy to read. I personally get quite a few emails with the subject "website"... that tells me very little about what it is your asking me. Be specific with your subject, like "Request for a website redesign", or even more so: "Website redesign for mywebsite.com". With only the subject, I know exactly what it is you're looking for.

The message itself should contain a few elements

  • Description of your question/comments
  • Specific links to, or description of what it is your question/comments are referring to
  • If you're experiencing an issue, what steps did you take when you saw the issue?
  • When finding an issue, what web browser and operating system are you using?
  • Your name and any other relevant contact info other than your email address

When you have a thorough email to send, it gives the recipient everything they need to send you the answers you're looking for. The better the initial question is, the fewer back and forth emails it takes to get the complete picture. Though there are many services for sending files to someone (see my Resource Page for links), it's helpful to tell the user what you're sending and when a series of multiple emails will be complete. For example, if you're sending a series of 5 attachments one email at a time, include in the body of the email which number of how many this particular set of attachments this message might be, ie: "2 of 5".

Tips on what NOT to do... EVER

  • Send an email with ONLY a subject
  • Email someone a "Did you get my email?" email
  • Attach something to an email without any note on what it is or what it's for
  • Send a series of single-question emails in a succession

With clear and concise emails, your recipient can have all the info they need to quickly get back to you, and keeps everyone's inbox neat and tidy.

Death of the loading.gif

September 22nd, 2014 @ 11:22 am PST
Animated gifs are fun, they make it easy to ad some motion to a webpage or app. However, the gif format lacks many features that cause them to look potentially ugly in a design, namely alpha channels. An animated gif can have only pre-specified colors marked as transparent which means they might not look good on anything other than a solid background. This can become a problem if you want these animated images on an unknown background color or a photo.

Here's a simple loading.gif file. It looks alright on my own website since it's designed for a light or white background. It's as easy to put into a webpage as any standard image.

However, that same loading.gif file might not look so great on another color or on a photo. Notice the pixelation around the shapes and how the light gray parts look out of place.

The png file type has the abiltiy to have an alpha channel. An alpha channel means that it's transparency can include different levels of opaque pixels which results in smoother edges that can look good on nearly any background. These file types don't have the capability to be animated in the same way a gif does, so how do we make a png file replace the loading.gif?

The Answer: CSS3 Animations


With simple CSS3 animations, we can make an element animate in nearly any way we want. In the case of a loading image, this is as sipmle as making the png image spin in place. A single png file with an alpha channel can be placed anywhere on top of other content and won't show those ugly pixelated "jaggies" that the loading.gif has.

The code is simple, simply place your loading.png file wherever it needs to be and give it a class name of "loading" (or any other class name you define, it's up to you).

.loading {
	-webkit-animation:spin 2s linear infinite;
	-moz-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { 
	-moz-transform:rotate(360deg); 
	}
}
@-webkit-keyframes spin { 100% { 
	-webkit-transform:rotate(360deg); 
	}
}
@keyframes spin { 100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
	}
}

The above CSS produces a result like this (same png image, one on a gray background):

All of these loading images will look good on any background you give them, assuming your background is primarily light or dark (simply invert the png file if on a dark background). Not only is the single png file significantly smaller in file size than the gif, but it's also easier to create. With CSS3 we can create better looking simple loading animations. CSS3 can animate nearly any DOM element including SVG and HTML text like a web font or text character. All modern web browsers support both PNG and these CSS3 animations. There should be no need to create/use the more bloated loading.gif in any of your web or app projects.
< OlderNewer >