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.

Responsive Web Design

June 19th, 2013 @ 4:49 pm PST

The web is a different place than it was 5-10 years ago. People are coming from all sorts of varied devices and your website should be accessible and usable in each environment. But, who wants to make multiple version of a single site and keep up to date with all the new gear that comes out? Nobody. Instead, let's make sites that readjust themselves when viewed through something other than a desktop or notebook browser.

There are a few ways of doing this, each with their own set of pros and cons:

Browser Sniffing

There are hundreds of devices and more are being created each year. Keeping up with a device library and all their individual specifics is a chore. Going this route, it's best to build upon what the community has going already, I recommend a codebase like mobileDetect to get you started. The benefit of coding for specific devices is the ability to make sure things look perfect everywhere. This is a lot of work, however, as they're always be more devices to build for.

Opinion: Too much work!

Redirect to a Mobile Version

Having a mobile site can be it's own unique project. Perhaps mobile users have a completely different behavior and content needs than a desktop user might have. This makes perfect sense for some projects where there is a definite line between a mobile vs desktop user.

To do so, you can build upon browser sniffing either via Javascript or a server-side language like PHP. When a user goes to a page, they'll be redirected to a mobile version of the site. I see many sites that will redirect to the homepage of the mobile site rather than the specific page the user wanted. This is annoying and makes the user have to re-navigate to what they wanted to see. In addition, if you're not providing a complete website experience on mobile, the user may need to switch to a desktop view to get the content they need.

Opinion: Manage 2 unique code bases? No thanks!

Responsive Design with CSS - Best Solution

By far the best practice is to use @media queries in CSS to show the same website content, but display it differently based on something like browser or desktop size. Build your site for desktop and modify it's layout for smaller devices. There are 2 ideal ways to do this: a) design everything with percentages so that they readjust with any window size, or b) set alternate styles based on a max-width using @media. I prefer option b and find that anything less than 800px these days is most likely a tablet or smart phone.

To add @media queries to your CSS file, build your styles for the default desktop site and add class specific alternate styles with a block like so:

@media screen and (max-width: 800px) {
	.contentBox { width:100%; float:none; }
	.adBanner { display:none; }
}
or put them into their own CSS file and include them in your page like this:
<link rel="stylesheet" 
	media="screen and (max-width: 800px)" 
	href="css/mobile.css" />

These styles will be ignored until the browser window, or device screen itself falls within the max-width of 800px or less. An iPhone will always show the mobile layout, an iPad or Android tablet would show the mobile view in portrait and desktop view in landscape and will readjust without refreshing the page. You can include as many different rules as you'd like to hide/show content, resize boxes, or move things around to make sure your design looks best in all the environments you wish to support.

I recommend checking your website analytics to get an idea of just how many of your audience is coming from a phone or tablet these days... it may surprise you. Might as well give them an awesome looking design to fit their device.

How to Maintain a Clean and Tidy Desktop

November 16th, 2012 @ 7:25 am PST
I'm a bit OCD when it comes to my workstation. I like to keep a clean desk in the office, and a clean desktop on my screen. This includes keeping my files organized, my email in-box at a manageable number (preferably zero when possible) and my windows positioned just right. Years ago, I'd use my desktop like a portal to all my projects. That's not as ideal when you've got windows covering up the desktop all the time, but it did work well for a while. To do so, I had a custom wallpaper and snap-to-grid icons organizing everything into groups. This is all before OS X had multiple desktops, Mission Control, and handy Dock features.

Clean and tidy desktop, screenshot


Now, I like to keep things clean and simple, no icons on the desktop at all. I also like to keep specific app windows in very precise positions on my screen, different setups for particular activities. Example: Coda (coding app) is positioned on the left side of the screen with my web browsers (Safari, Chrome and/or Firefox) on the right. I can code in one side and refresh in the other without Option-Tab, and be able to see both at all times.


Finder window is a bit tricky sometimes. Each remembers it's last position and depending on what path you took to open that window, it might not inherit it's parent's position and size. So, to manage Finder windows as well as app window size and position, I put together a series of Applescripts in Automator that run as Services. Then, simply set focus on the window I want to position, then go to the menu bar and select
[App Title] > Services > [ Position Script ].

Use Position Window Service in OS X


In Automator, create a new Service. Drag in "Run Applescript" with "No Input" selected and put in the Applescript code below. The "set bounds" values are top, left, (width+left), (height+top). I found it easiest to set up a Fireworks document and position some boxes on a screenshot of my desktop for specific x, y, width and height values.

Set up Position Window Applescript in Automator in OS X


You can have as many of these position script services as you want. I keep it simple with just an "App Left", "Browser Right" and "Finder" positions... most apps will fit into one of those 3 spots. With these handy scripts, if some jerk uses my computer and moves my windows, I can easily get everything back to the way it was.
< OlderNewer >