Monthly Archives: March 2012

Writers’ Block. Everyone gets it whether they’re a writer or not. Its that part of your process where you hit a brick wall and your brain cannot process any new thoughts. I tend to get this when I’ve been staring at a design or wireframes for a few hours and my eyes start crossing. It usually hits in the afternoon, and sometimes just getting up to get a snack or glass of water remedies my predicament, but other times its a bit more serious.

All I need is some serious inspiration… and with the internet at my fingertips, its not hard to find some.

Designers (and non-designers!) can be influenced by so much. Everything in the world can somehow be interpreted into something creatively plausible by anyone with the ability to see. Color, light, movement, and shapes are everywhere, its impossible not to notice.

Here are some blogs and websites that I immediately go to to gain some creative input.

tympanus.net/codrops/

I always go here, even when I’m not stuck, just to check out the new stuff they’re doing. There are constantly new write-ups and demos with all the fancy new trends. I tend to do keyword searches like, typography or design and browse multiple articles within one theme to get in a certain mindset. Originally shown to me by Jeff Chew, I quickly became enamored with this group for their vast skill-set and wide arrange of knowledge across design, the web and usability.

www.thenewgraphic.com

I love coming to this site to clear my design hang-ups. This group of illustrators, designers, writers, photographers and thinkers compile a wonderfully simple, continuously scrolling blog. I find that their design aesthetics reference a lot of vintage and traditional graphic design, which is, appropriately, very graphic. The bold use of color with minimalist type is seen often, along with nostalgic photography and tons of patterns. This blog always brings me back to the basics and reminds me why I love to create.

www.ffffound.com

ffffound is a great site that just has tons of images. What I love doing is scanning through until I see something that catches my eye, and then losing myself in an infinite cycle of clicking related images. There’s a lot of content on here, but with proper determination, you can find tons of inspirational posters, illustrations, designs and photos.

www.jjjjound.com

Clearly, the name is referencing ffffound, but this is a blog created by one guy who has a love for all things menswear, women and sleek design. Warning: There are nude images intermingled amongst so most definitely NSFW. He only posts occasionally but he posts so much its fairly easy to lose track of time scrolling through. This brings out the minimalist in me… his taste and aesthetic are beautifully simple.

www.cdryan.com

Christopher David Ryan is a designer that I keep coming back to. He is incredibly talented with iconography and imagery. He invokes so much thought and feeling through his charismatically simple and joyful images. I usually keep up with his blog, but its always refreshing to just go back and look at his portfolio. A lot of his designs end up being my desktop!

www.designsponge.com

Design Sponge is one of the most renowned design blogs out there, for good reason. Mostly directed towards interior design and decorating, Grace Bonney overflows her blog with tons of design-driven posts that are sure to inspire anybody. She has a ton of different writers from all walks of the earth that keep the content fresh and ever-changing. The DIY and Before-and-After posts are huge for getting you motivated to use your hands and get those creative juices flowing.

www.pinterest.com

This is an invite only site, but once you’re in, it is incredibly addicting. You follow people who like the same kind of things you do, and the homepage pushes other users that are similar to you as well. This is honestly just a huge burst of inspiration… you can search any kind of keyword and just pour over images upon images.

www.forrst.com

Forrst is also an invite only site, but specifically for designers and developers. It is a social network directed towards those who design sites and those who code sites. They encourage critique, feedback and sharing your knowledge with others who ask. I spend a lot of time checking out other people’s designs and reading all the feedback to keep up with what audiences are seeing and feeling. Its like a virtual classroom, and its very rewarding for users who are active in the community.

At this point, I’ve probably lost you to at least one of the above websites, but I hope that if any readers are ever in a pickle, they can find solace and get revived from one of my suggestions.

Would love to hear other people’s suggestions for sites that spur creative thinking, so please share in the comments!

One of the features I’ve been excited to experiment with in HTML5 is WebGL, as I’ve been continually amazed with the various Chrome Experiments pushing the limits of our browsers. A very popular JavaScript 3D library is THREE.js, so I decided to give it a whirl.

View demo >>

As you probably would guess, you can only view this in the latest and greatest browsers (IE is again sent to the back of the class). I personally would recommend viewing this in Chrome.

I started out the experiment using the THREE.JS Boilerplate, just to get a good starting point. I originally was thinking of using an image to render the 3D object, but decided that when zoomed it would get too pixelated. Instead, I used a very useful Ai to Canvas plugin that converted a vector image of our logo to the canvas equivalent.

To get that 3D effect, I ended up stacking a number of planes with the same canvas object.

Though a simple experiment, it shows how far browsers have come with rendering more complex animations/interactions without Flash. Have any favorite WebGL examples to share? Post it in comments!

Jeffrey Chew
Director of UI Design & Development

URL shortening is widely used and there are a number of sites, such as tinyurl, that offer the service for free. So, why roll your own?

  • Because it’s easy. Using PHP, MySQL, and Apache , it can be done in 3 steps that can take only 15 minutes.
  • You reduce your dependency on external services. If a site like tinyurl was to go out of business, any links published through them would be dead.
  • You can use any short names you want .

Step 1: Create the schema in MySQL

Login to MySQL and run these queries:

CREATE DATABASE my_tinyurl ;
USE my_tinyurl;
 -- Create a table to hold the mapping from short URL to real URL
 CREATE TABLE links (
 id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
 link VARCHAR(255),
 short_link VARCHAR(100)
 );
 -- Add a user and grant privileges for the database: :
 CREATE USER ‘tinyurl_user'@'localhost' IDENTIFIED BY 'password';
 GRANT SELECT,INSERT,UPDATE,DELETE ON my_tinyurl.* TO ‘tinyurl_user'@'localhost';
-- Add one record for testing
 INSERT INTO links (link,slink) VALUES ('http://bootstrapsoftware.com','b');

Step 2: Script the translation service

Create a file called index.php and place this code inside

<?php
# connect to the database
$db = mysql_connect('127.0.0.1','tinyurl_user','password') or die("Database error");
mysql_select_db('my_tinyurl', $db);

# get the real link
$domain_name = mysql_escape_string($_GET[domain]);
$result = mysql_query("SELECT link FROM links where short_link = ‘$domain_name’");
$array = mysql_fetch_assoc($result);
$redirect = (is_null($array['link'])) ? "http://google.com" : = $array['link'];
header(“Location: $redirect”);
?>

Step 3: Rewrite the short link as a GET parameter

In the same directory as index.php, create a .htaccess file and place the following rewrite rules inside:

 RewriteEngine On
 RewriteBase /
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule (.*) /link/index.php?domain=$1 [L]

New links can be added by manually inserting them into the database. Or, an html GUI and PHP script can be created to add them.

How might you use a service such as this as part of your application or business?

On Why.

We spend time trying to find ways to optimize web pages.  Client side optimizations can take place in many areas, and perhaps the most basic is the number of DOM elements.

Any page speed testing suite will provide a list of places one can look to increase performance.  We like page performance because…

  1. SEO boost :: 1st time visitors
  2. Snappier rendering time for the user :: repeat traffic
  3. Bragging rights :: Clients
  4. More page views and conversions
  5. etc…

Always on that list are those pesky DOM elements.  We can all remember a time ( showing my age? ) when table layouts were the standard, and you can bet those html costs where high.  With more refined uses of HTML and CSS the web has settled into some common layout structures.  Grid systems, boilerplates, templates etc.. all have similar beginnings and for the most part are sound foundations.  No-one can code the pages for us however(nor should they) and it’s the meat of the docs where things can get out of hand.  Complex designs, unreasonable requirements, and time constraints often lead to developers just “making it work”.  There is something to be said about getting it done, but if we can get it done a bit cleaner each time … don’t forget your platonic forms.

Let’s say there are 2 html elements for every icon/text; 1 for the icon, 1 for the text.  I will discuss how to use pseudo elements to remove 1 of those elements.  I know it does’t sound like a lot; but it means less coding, less maintenance, less rendering, more speed, happier browsers, and you on that edge between madness and genius.

On How.

A previous post by one Anthony C. discusses base64 encoding of images, spriting and some interesting combinations of the two.  I will be using individual base64 encoded pngs as background images to illustrate the use of pseudo classes for iconography. So let’s jump right in!

.icon:before {
    content:" ";
    display:inline-block;
    vertical-align:middle;
    padding: 0 3px;
    background-repeat:no-repeat;
    background-position:center center;
}

I am going to use this .icon class as a base for all of my icons. Let’s examine each declaration, because we don’t want to have extra code.

  1. content: ” “; :: This is so we have “something” with which to work, think of it as the a canvas of sorts. Literally it tells the pseudo element to contain a “space” character.
  2. display: inline-block; :: Inline elements won’t take height / width, and Block elements will break inline layout so we use inline-block.
  3. vertical-align: middle; :: Really a matter of preference, but I like my icons to be centered vertically against the text, if it’s there
  4. padding: 0 3px :: Also a bit of preference, giving some breathing room to the icon.
  5. background-repeat: no-repeat; We only want to see the image once, avoid ugly “clipped” repeats in padding.
  6. background-position: center center; If we’re using padding, let’s keep that image in the center;

At this point, if your asking “what’s a pseudo element?” you may want to take an obligatory visit to w3schools or hit that google for quick derp.

Next we have an image specific icon declaration in our css, this one is for a “save” icon.

.icon-save:before {
height:16px;
width:16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAzLzQvMTIovRTHAAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAB+ElEQVQ4jZXTPWgUQRjG8f/ezulekRiJJKmCGqOWwaAIJx6IlUoQiV+VtQh2IqKFYGdhESxsFCEWh7HwinBYSAxiGpEDiWiRpNjz1JgjHvFyLnvzzlis97EXSPCBhXkH5sc7MzvY/8ydJ6/sVH62WTvWWpt99JKfSxX6jnazVZ75/ZiqSzpZ5PbN8yiAHwu/ODU6zv5zXdiOBffyX/m8HDTrrh7IXNjHi4c1hqdnIsAaQxiGaGsRkRjwYbHMybMjfFmD3zqamyvDyJUTPM3mGoDFGEMoQr1ejwG7exxyk2+bteM4VI8fY34iy42xXREgYtBaE4oQdAC3xvbE6vH7c+jJaUaDVS6PXYoAIwYRITRmA9CZob7tHEh24TpFgDiw/j1kW7+3KXD3zCGW8xVmvpkW0NjCwvPiposbSaVSiLQBjQ4KhQLWdl5kFMdxmuNMJoNpB0RHHbiuS/r60IabSCaTvJtYZHBwkFKphNYa0TFAEBGUUlSrAbMPPgFw5OreZstKKQA8z0NEEC0tQNc1iUQCpRS1WsjAwAAAtVoIgLVuDDDGoOvRX5UAOH0tTe71FOXVFcLQopRCKYW10deYawfW1/5EHfi+z47ebg5fHObN44/U3i/Bzn+bL7TOYWU+fqi9Bz1838epVCo2CIINb2CruK6L53n8BdiVNWjQvqNqAAAAAElFTkSuQmCC);
}

…and the a touch of reasoning

  1. height/width :: The literal size of the icon
  2. background-image :: Telling the browser we’re using a base64 png, and image data.

That’s the nitty gritty, all you need now some html to hook into.

<a class="icon icon-email">Email</a>

You can add helpers to your icon class later, for example perhaps you don’t want to display the text, but you still want the page to contain it.

.icon-notext { font-size:0; text-index:-9999em; }

Caveats:

You knew it was coming… What browsers support pseudo elements?  Most do, all but our favorite two class clowns; IE6 and IE7.  IE6 we can put to rest, but IE7 is still in that market % for some folks where it commands attention.  The silver lining there is that a fail of this doesn’t result in something ugly, just no icon.  So if you’re cool with that, so am I ;).

And So On…

If you’re looking to push things further, check out this bit about pure HTML/CSS GUI icons.

The goal is flexible code but not alot of it, and hopefully this is a step in that direction.

Happy Coding!

A good friend introduced me to the concept base64 encoding and I have gone down the road to research what scenarios it is best suited for.

On that road I found a great post by David Calhoun testing byte sizes by comparing binary images to their base64 counterparts. After reading it I thought it would be interesting to extend his UI icon test one step further and include an image sprite to see how that compares in byte size.

Note: I understand the drawbacks David has mentioned regarding sprites however I believe those drawbacks are manageable considering the potential gains to be had from a file size standpoint. Especially if you are managing more than just icons in your sprite files.

How I setup the test:

So lets see how the numbers work out…

What I thought I would see:

  1. Test Case#2 (icon-sprite.png + combined-binary.css) would be the smallest in total filesize when compared to Test Case #1 (split-binaries.css plus its images) and Test Case #3 (split-b64.css)
  2. Test Case#4 (combined-b64.css – which replaces the image sprite with its base64 counterpart) would be the smallest total file size after Gzipping was done
  3. Gzipping Binary Images would sometimes lead to larger filesizes as those binaries would typically be compressed fairly well to begin with (or at least should be if you care about responsiveness)

The Results:

  • View on Google Docs
  • assumption #1 turned out true.  The creation of a sprite from the 5 icon images was smaller in file size than both separate images and separate base64 encodes.
  • assumption #2 did not turn out to be true.  However it was by such a small amount that you could pretty much say it is equal to Test Case #2 (we are talking about 23 bytes here)
  • assumption #3 was interesting as gzipping of the binary spite resulted in a slightly larger filesize but gzipping the images individually ended up being smaller in total size.  The differences are pretty tiny anyway and because of potential overhead in the gzip process this would probably not be needed if you are good about optimizing your source images.

So what does this really mean?

I think the numbers above depend on what you prefer to use and how you like to work.  To be transparent I have always preferred image sprites.  My opinion is managing them becomes easier the more you use them and there are a lot of good techniques today to get around some of their earlier drawbacks (such as using pseudo selectors to help get over clipping issues).  So considering the findings above I personally would probably continue to stick with sprites.

However… you could possibly get benefit by making a sprite, converting to it base64 and then gziping it.  The gain here would be 1 less request (and that could mean a lot on a larger site).  To really test this idea I am going to build a case using a larger sprite file that has more than just icons in it to see how it scales.

In the future I am going to try to run performance testing to see baseline speed for each case from different locations (I’ll use webpagetest.org).  Number of requests can sometimes make a huge difference in those tests so that might help put some additional clarity around this topic as well.

Further reading on base64:

  • Wikipedia entry
  • ftp://ftp.rfc-editor.org/in-notes/rfc3548.txt
  • Understanding Base64 Encoding
  • http://calebogden.com/base64-encoded-fonts-images/
  • http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/