I will hazard a prediction. When you are 80 years old, and in a quiet moment of reflection narrating for only yourself the most personal version of your life story, the telling that will be most compact and meaningful will be the series of choices you have made. In the end, we are our choices. Build yourself a great story.— We are What We Choose (Princeton’s 2010 Baccalaureate remarks by Jeff Bezos)
Performance Toolbelt: CSSEmbed
One of the biggest keys to improving the load time of your site is minimizing the number of HTTP requests. There’s a lot of overhead involved with each request, and many requests can very quickly slow down your site. One great way to eliminate extra requests is to use data URIs instead of images. If you want the nitty-gritty on what data URIs are, and how to use them, there are a few excellent posts by Stoyan Stefanov and Nicholas Zakas that walk you through the details.
Data URIs can be tricky to implement efficiently however. Since they are a Base64-encoded representation of an image, there is a built-in level of obfuscation that can make manual maintenance tedious. Thankfully, Nicholas put together a command line tool called CSSEmbed which takes the pain out of using them.
CSSEmbed is a very straightforward tool that parses a stylesheet and converts all references of images to their data URI equivalents. Installation is as simple as downloading the .jar file and placing it where you’d like. Then you use a simple command specifying any options, the file to output to, and the file to parse, like so:
java -jar cssembed.jar -o styles_uri.css styles.css
Since versions of Internet Explorer prior to IE8 don’t support data URIs, you have to use MHTML as a workaround (again, Stoyan has an excellent post with more info). The command for that is very similar — you just need to make sure to declare a “root” (for example, I’d use http://timkadlec.com as my root for this site) which CSSEmbed will use in the MHTML.
java -jar cssembed.jar -o styles_mhtml.css styles.css --mhtml --mhtmlroot http://timkadlec.com
Right now, to my knowledge, you can’t parse an entire directory of CSS files, but that’s about the only thing I can think of that I’d like to see added. It’s a great tool to use during an automated build to really simplify the process of using data URIs and I definitely encourage you to go download it and give it a try.
Understanding only the surface of the water is not enough to reveal the hidden dangers beneath. Not knowing the deeper things in software development will limit your ability to create stellar work.— Reinvent the Wheel Often
Another New Addition
A short week ago (June 30th), my wife and I were lucky enough to welcome our second healthy baby girl into the world. Just like her big sister, Jessica Claire weighed in at a healthy 8 lbs 15 oz.
Her big sister, thankfully, thinks Jessica is at least somewhat interesting so far and likes to come and “talk” to her. Both girls, as well as their mother, are doing well (if not a bit tired).
I’m sure there’s going to be plenty of barbies and tea parties in the future (heck, there’s already some “Ring Around the Rosie”) but I’m sure I won’t mind. I’m just a happy dad whose two little girls have him firmly wrapped around their fingers.
Who’s Stupid?
Andy Rutledge wrote a post that is frighteningly on target. He argues that the “quality of your client experiences is directly proportional to the quality of your professionalism”. He goes on to state that if your clients are “stupid” you may want to take a step back and consider who may truly be responsible for these failed interactions. He starts by pointing out how you can set yourself up for failure before you even start on a project:
If you don’t research and vet your potential client before asking them to sign your contract, stop being stupid. If you bid on projects even though the potential client doesn’t know much about you or why you’d be a good (or bad) choice for them (they “just need a web designer”), stop being stupid.
He continues by analyzing how web designers can continue to lay the groundwork for “stupid” clients by failing to have a proper workflow in place:
If you aren’t the one defining the project process, stop being stupid. If you don’t define, police, and unfailingly adhere to specific milestone requirements and deadlines for both yourself and your clients, stop being stupid. If you’re producing design artefacts before completing a comprehensive discovery process, stop being stupid.
Too often, we rush blindly forward into new projects and new relationships with clients. This process is not at all conducive to high quality work. Quality work requires an investment of time and a devotion of resources. To craft a site of true quality, you need to take a step back and slow the process down — making sure you understand the problem you are trying to solve and ensuring that the solution you are proposing is the right solution for that particular problem.
While the stupid tag may feel a bit confrontational it does not detract from the argument that Rutledge is making: not all failed relationships are the fault of the client. By failing to invest the proper amount of time and attention into planning, research, and careful consideration of requirements, firms and freelancers often set themselves up for failed client relationships.
Version 3.0
For the second time this year, I’m launching a redesign of this site. Shortly after putting the last redesign live, I started wishing I’d have allowed for a little more flexibility in the types of content I produced. While I still enjoy writing full, detailed posts at times, there are a lot of times I just want to share a quick thought, or pass along a quote from an article I found particularly good.
I gave Tumblr a try for a little bit, and I loved the freedom it gave me to post content I found important, regardless of how much detail I felt it warranted at the moment. Really, the only thing I didn’t like was the fact that I was now blogging in two different places – this site and my Tumblr blog. Since Tumblr had no easy way to import all my old posts from WordPress, I decided to make use of the custom post type capabilities in WordPress to build my own version of a tumblelog.
Since the frequency of posts will undoubtedly be picking up with the additions of these shorter post types, let me know if any of you would prefer to have a feed for just the “feature-length” posts. Right now, the main feed pulls everything.
The underlying structure didn’t change a ton – it’s still HTML5 based. As of the time of this post, there’s only one image being used in the site (other than anything called by the Google Analytics script). The rest of the graphical elements are a combination of CSS gradients and data URIs to help reduce the number of HTTP requests.
So have a look around. The plan is for this version of the site to stick around awhile.
A snappy user experience beats a glamorous one, for the simple reason that people engage more with a site when they can move freely and focus on the content instead of on their endless wait.— Website Response Times (Jakob Nielsen’s Alertbox)
For more than 40 years, a one second response time has been the accepted limit for giving users the feeling they are freely navigating an interface [Miller 1968; Card et al. 1991]. However on the web, we operate with a different set of rules – we’ll hear anything from two seconds to eight seconds as the limits for response time. Even at the most aggressive threshold, it’s 2x the limit for a free-flowing user experience.— The Page Load Paradox
Mobile User Behavior Groups
According to an article on Information Week, Google classifies mobile users into three behavior groups:
The “repetitive now” user is someone checking for the same piece of information over and over again, like checking the same stock quotes or weather. Google uses cookies to help cater to mobile users who check and recheck the same data points.
The “bored now” are users who have time on their hands. People on trains or waiting in airports or sitting in cafes. Mobile users in this behavior group look a lot more like casual Web surfers, but mobile phones don’t offer the robust user input of a desktop, so the applications have to be tailored.
The “urgent now” is a request to find something specific fast, like the location of a bakery or directions to the airport. Since a lot of these questions are location-aware, Google tries to build location into the mobile versions of these queries.
I think it’s a pretty accurate categorization, and a good thing to keep in mind when you’re building your mobile site or app. Each “type” of user is interacting with your content with a different goal in mind, and the experience should be tailored accordingly.