Archive | design RSS feed for this section

The HTML and CSS Behind Google’s Search Bar

by on September 27, 2011 in design, development

Earlier this year I was working on a project that had a text entry box similar to Google’s. It was a long bar in which you entered a line of text with a button at the end to “Add” it (instead of “Search”). I really liked Google’s styling for their search bar and figured I would simply “lift” the HTML and CSS for it. However Google’s HTML source code, if you’ve ever looked at it, is heavily minimized. Everything is on one line with short, obscure CSS class names like “gac_v2.” Great for serving up webpages quickly, not so fun for trying to figure out how they’re styling their pages. I tried to find a simple “how to” for styling something in a similar way, but alas, there was none to be found.

Not to be deterred, I dug into their code, copied the portion I was interested in, removed all of the useless cruft, gave the CSS classes slightly more useful names, and came up with a working version that looked like this:

That should look rather familiar to you.

Seeing as I couldn’t find anything on the Intertubes for this (and I’m probably not the only one) I thought it might be helpful to share the HTML and CSS code for this — there’s also one image which is used as a gradient background for the search button (entirely optional; it just makes it look nice). If you find this useful leave a comment and let me know.

Right click and Save as:

 

I won the Zappos developer contest

by on May 2, 2011 in design, development

Recently I had the good fortune of winning $1000 and being featured in the local news. Here’s how it happened.

In the middle of March I was doing some research for a blog post and I came across a contest that Zappos was running. I had recently decided that I was spending too much time building web apps for $0/hour, so I almost didn’t enter, but I had an idea that I thought I could pull off without investing too much time. My intent was to build something that was fairly simple but very polished.

I spent a couple weeks (about 40 hours total) throwing together an app in my spare time. I thought my app was good, but I’ve entered contests like this before where the entrants pour lots of time into it and produce something really stellar. So it was much to my surprise that I ended up winning the top prize in the contest (a cool $500 cash plus a $500 gift certificate to Zappos). That alone was enough to make building the app worth my while, but what happened next was even better.

Shortly after I won I posted a quick tweet about it. I have some folks from the Silicon Prairie News as followers and my tweet led to me getting an interview request. I wrote up some answers (reviewed by my wife, thanks!) and they posted an article about it the following day. That article was then mentioned in the weekly PrairieCast postcast (starting at 21:00). I was also contacted by several people who read the article about projects that they wanted my help on.

When I decided to enter the contest in never crossed my mind that it would lead to me being featured on SPN and being offered work. That goes to show though, it is definitely possible to attract luck. You don’t know how that luck will manifest itself, but it will. Do cool stuff, be social, and luck will find you.

Regarding “Attracting Luck”: it sounds like a value-free bromide, but it really does work. I’m not a social butterfly by nature, but I force myself to go out and network. It blows my mind how effective that is, because there exists someone with the ability to give you what you want just by saying “Yeah, sure” and that is 1000000000x more likely to happen after you have asked him for it in person versus happening spontaneously. (Ditto hearing, e.g., “You do SEO consulting? What a coincidence, we need that. Send us a proposal.”, “You made what? That’s interesting. I have someone you should get a coffee with.”, etc)
-Patrick McKenzie

Image-free tabs with clean CSS

by on August 29, 2009 in design, development

It’s slightly amazing to me how hard it is to find someone that has image-free tabs that have clean CSS. I found a lot of articles on sliding-door tabs (requiring images) and a few articles that required CSS for each individual tab (yuck!). And what I wanted wasn’t even complex:

tabs

Simple, right? I sure wasn’t going to go reinvent the wheel by writing my own CSS for them though. Thankfully after searching for a bit I came across SimpleBits’ Mini Tabs. I didn’t want mini-tabs, but the HTML and CSS was remarkably clean. Only 4 CSS declarations on a simple HTML list with a class=”active” for the current tab. With some modification to the CSS I was able to come up with tabs that looked like the above (even looks good in IE7, amazingly).

So, if you want some decent looking/functioning tabs go yank the HTML/CSS from the above link.