How To Build A Web Design Gallery In Under 15 Hours
This is, without-a-doubt, the longest post that I have written to date. However, it’s the most chalk full of information too. If you have any pointers on things that I can do differently next time I would love to hear them. I’m always interested in streamlining the design/development process.
For years now, I have been using del.icio.us to bookmark inspirational website designs. It has served me well, but unfortunately comes up short. Del.icio.us’ features list does not include a way for me to quickly view the website designs and sort by their colors and/or subject matter. This has always left me feeling a bit discontent so I decided to do something about it. The end result: delicious CSS
The Challenge
On Sunday night I dreamt about building an online web design gallery because of my displeasure over the way I was bookmarking inspiring website designs (I know…there are much better things that I could spend my time dreaming about, but I just couldn’t shake this). When I awoke on Monday, I got to work; Interested in making it challenging, I decided to see if I could build the entire site in 15 hours or less.
Do We Need Another Web Design Gallery?
I can hear you asking yourself, “Do we need another web design gallery?”, and the answer is probably no, but after taking a look at my RSS reader I noticed that over half of the galleries I am tracking have fallen dormant. Now the primary purpose of my css design gallery is for me to visually bookmark websites that I find visually appealing, but the ability to give public recognition to the talented web designers and developers makes me happy. Lastly, I wanted to see how quickly I could turn this idea into a reality.
How Did You Do?
It’s been a long two days, but I came in under my time limit, and I’m proud of what I created thus far. Hopefully, as time allows, the site will continue to evolve in the future. Below are the steps that I took to construct delicious CSS:
Choosing A Domain Name

Time Spent: .5 hours (DNS Propagation time: 12 hours) I love seeking out and registering exciting domain names. There’s something to be said about finding a good domain name that has not been claimed. Instant Domain Search is my tool of choice. The end result of my search was www.DeliciousCSS.com. Since my intent was to replace my del.icio.us bookmarks with a CSS design gallery I couldn’t have picked a better domain name. Additionally, I thought that delicious was a good adjective for describing website designs that I enjoy.
Hosting
Time Spent: .25 hours Web design galleries have the potential to receive a tremendous amount of traffic and take up a large amount of hard drive space. Knowing all of this, I allocated a large portion of my server’s bandwidth and storage space to this site. If you don’t own a website hosting company then I suggest taking a look at WebHostingTalk to find a host that can accomodate your needs.
CMS Platform
Time Spent: 1 hour (Note: Internet connectivity issues resulted in severe delays uploading via FTP. Thanks Comcast!) Choosing a Content Management System (CMS) for a website can be a difficult choice. There are thousands publicly available, and choosing the right CMS can be a daunting task if you’re unfamiliar with their features. However, for this exercise, it was a fairly easy choice. I’ve designed custom WordPress themes for several websites, including Truebluetitan, and knew that it was capable of meeting my needs. To make things even better, I remember stumbling across this FREE CSS gallery online a week or two ago. I knew that using this theme as my foundation was going to give me a time advantage.
If you feel that WordPress may not be the right CMS platform for you, then I suggest stopping by Open Source CMS. Their large selection makes them the ultimate resource.
Site Design & Development

Time Spent: 11 hours (Note: Including the initial website posts) Admittedly, I’m not the most proficient developer so this part of the process always seems to take me forever. I knew that I wanted the website’s design to be simple and I already had a theme to work from, but I didn’t want the site to be just like the theme that I started with. In the end, I think that I came up with a site design that has a different feel and gives the attention to the websites being showcase.
Delicious CSS is currently using the following WordPress plugins: All in One SEO Pack, BM Custom Login, Comment Relish, FeedBurner FeedSmith, Google Sitemaps, ShiftThis | Thumbnail Size, WP ContactForm, and WP PostRatings
External Resources
Time Spent: 2 hours Once the site was up and running it was time to setup the external resources to make the website complete. Sometimes it feels as though this part of the process can take as long as the website design. At this point I was just ready for the site to go live. It was 2 AM on Wednesday morning, and I had enough. Below are the resources that delicious CSS is using.
Technorati: Technorati is a great way to promote your website and gain additional exposure in the blogging community. Sign up today.
Feedburner: If your website has an RSS feed, then you’ll want to sign up for Feedburner. This website allows you to track the number of RSS & email subscribers to your website.
Google Adsense: While I’ve ran million dollar SEM campaigns for Fortune 1000 companies, I have never setup Google Adsense on any of my personal websites. I decided it was time to give it a try, but I don’t have a lot of faith in it. Hopefully it will prove me wrong.
Google Analytics: I love statistics, and Google has a great analytics package for tracking your website visitors. You’re missing out if you don’t have Google Analytics on your site.
Reinvigorate: Google Analytics has a shortcoming: It lacks real time analytics and in this day and age with all of the social media sites like Digg and StumbleUpon you want to be on top of it. That’s where Reinvigorate shines.
Entrecard: When Entrecard first launch, I was there. It’s been over 3 months since I started using it and I wanted to see if it would work for delicious CSS as well. It’s a great FREE advertising network that has the ability to deliver a crazy amount of traffic if played right. Let’s see if it delivers.
Crazy Egg: Where do your visitors click? CrazyEgg let’s you know. Read my write up on Crazy Egg for more detail.
Favicon: When it comes to designing a website I’m anal retentive down to the last pixel. That includes a little 16×16 image that sits in your address bar. A favicon is a must-have; it’s the cherry on top of the sundae.
iPhone/iPod Touch Home Screen Icon: The iPhone has changed the way we view the web with our mobile devices. A recent update allows iPhone/iPod Touch owners to bookmark their favorite websites on the home screen of their device. With the addition of this little image, my website sundae now has 2 cherries on top!
Let’s Wrap This Up
So there you have it. In a little less than 15 hours I completed an online website design gallery. The site is up and running and I’m now ready for a nap. With over 700 inspiring website designs bookmarked via del.icio.us, I’ll be very busy moving them over to delicious CSS…right after my nap! I enjoyed this post and the challenge of building the site. If you would like to see more posts like this on Truebluetitan then speak up. I’m up to the challenge.


I believe this was an absolutely wonderful freaking post; if you ever need any ideas or assistance — I would gladly lend a hand. I have a bunch of documentation on how I built/developed a few sites off wp and other engines for similar scenarios.
Kudos to you! Great article!
Dude.
Thanks.
I’m gonna do this as well.
I’m going to be doing this so I can have a better way to organize my inspiration.
Heh, that has always been a problem of mine. “There was that one web site that looked kinda like this….. and I want to look at it again…. but I can’t remember what the URL was…”
you’ve come up with a great, and simple, solution!
Thanks!!!
@Justin: We’ll be in touch.
@Brian: Go for it! It was a fun exercise that has paid off in the end. If you haven’t yet, subscribe to delicious CSS’ RSS feed to make sure you don’t miss any of those inspiring websites!
Just landed on your website via CSS Mania. I just wanted to say that I really enjoyed your post. Very inspiring :P
[…] How To Build A Web Design Gallery In Under 15 Hours Related Stuff101 Five-Minute Fixes to Incrementally Improve Your Web SiteSEO for WordPress Blogs White PaperDigital Web Magazine - Creating The Perfect Portfolio70 Expert Ideas For Better CSS Coding | CSS | Smashing MagazineDeziner Folio» Blog Archive » 20 Free Tutorials to Create Your Own Flash Game12 Steps to Creating a Professional Web Design | Professional Web Design BlogA Guide to Web Typography | i love typography, the typography blog […]
First off, Great post. I feel your pain when it comes to searching for that darn site booked marked in delicious.
I can see adding a gallery to my blog. Building off of your example, one feature that would be nice is the ability to dynamically update the gallery whenever a new bookmark is saved based on tags.
Quick ? for you.
How has the Entrecard been working out for the site? Are you seeing an increase from using it?
FYI. I found your site through Google Alerts
David: Thank you for the positive feedback. Stick around!
Homer: I like the concept of your Web site and would love to see some of your work. I have some things coming up…
I also like your thought process surrounding the gallery. That would be incredibly awesome. I’m always about making it simpler.
Entrecard has done a good job at generating constant traffic for Truebluetitan and Delicious CSS, however, the bounce rates are higher than I would like. That being said, the community of members is a good bunch and I have met quite a few all around good people through the network. They just launched a new credit structure yesterday so the system is in complete chaos at the moment, and I’m curious to see how that pans out for them.
Out of curiosity, what keywords were you tracking in Google Alerts?
Glad you dig the concept. I need to put some more time into it. Started on the blog last night. The frame is based off of the hemingway layout. I’ll keep you posted on the progress of the gallery when I dig in.
I’m going to check out Entrecard and see what it’ll do for me. Have you heard of pistach.io? It’s an ad system being developed by Aral Balkan and David Stone. It’s going into beta soon.
As for Google Alerts, I’m tracking “CSS”, “CSS 3.0″, “Flash”, and “Freelance”.