Build Internet!

The Eleventh Month

Zach Dunn — Sun, 08 Nov 2009 20:08:56 +0000

New here and wondering what this is? Welcome to Build Internet’s month in review. Once a month we go through and share some “behind the scenes” numbers and happenings from the previous month’s traffic.

Namaste Internet,

We’re just one month away from the big one year anniversary. Especially because of recent “smashing” events, we’re extremely optimistic for how the next few months will go as far as the growth of Build Internet’s readership.

Numbers took a little dip over the past 30 days. We think this is because of slowed posting schedule from a surge of client work. Let’s take a look at the analytics from October 2009:

Traffic and Stats

Overall numbers from this month were fair, but we expect the Smashing Network to cause major increases on all fronts starting this November.

We’re up to an average 1300 search results per weekday.

We hit 188 countries this month, and even managed to keep contact with one reader in Greenland!

Interested in a more comprehensive overview? You can grab the full report below.

Subscribers and Followers

Steady climbs on all major rankings continued again this month:

Twitter followers up from 4,122 to 4,720
RSS subscribers up from 6,137 to 7,235
Technorati ranking was last spotted at 4,231, but hasn’t worked all month.
Alexa ranking down from 13,054 to 12,622

The Smashing Network

During the middle of the month, we received an email from Vitaly Friedman of Smashing Magazine. He invited Build Internet to join in on an upcoming project involving the redesign and redirection of Smashing Magazine. Typically when someone at the top of your niche invites you to do something — you’re more than happy to do it. This was no exception.

On October 31st, we were proud to be one of the initial 18 blogs accepted into the Smashing Network. We’re not the smallest site on the list, but we’re also sitting among some powerhouse names like Web Designer Depot, Six Revisions, and Noupe. Build Internet has a lot of catching up to do.

“How much traffic have you gotten from Smashing Magazine?”

This has been a question we’ve heard many times over the past week, so I’ll just lay it on the line here for everyone:

Smashing Magazine has increased our baseline traffic, but we still haven’t broken any records. Our current single traffic record day was about 30,000 on August 24th because of a feature in an article on (of all places) Smashing Magazine. As far as I can tell, it still seems like the best way to get traffic is by a feature in one of Smashing’s posts. I’ll let the numbers speak for themselves.

This is a screen of traffic on Build Internet since the Smashing Network launch. (October 31st to November 7th).

Happy November

As always if you have suggestions, article recommendation, or general feedback we would love to hear about it in the comments below. We’ll see you back here next month for our one year anniversary.

Keep on Internet-ing,

Zach & Sam Dunn

The Tenth Month ...
The Ninth Month ...
The Fourth Month Hello Internet For those of you just joining us,...

More Fonts Used In Logos of Popular Websites

Sam Dunn — Wed, 04 Nov 2009 22:03:36 +0000

This is a roundup of that identifies the fonts used in the logos of some of the top sites on the internet.

This is the second addition to Fonts used in Logos of Popular Websites.

With that said, let’s get to know these logos a little better.

(Spoiler Alert)
There is no Times New Roman.

Newgrounds – Tekuteku

VIRB – Proxima Nova Extrabold

Myspace – Arial Rounded Bold

Wikipedia – Hoefler Text

eBay – Univers (Modified)

Pandora – Mrs Eaves Small Caps

Microsoft – Helvetica Black Italic

msnbc – Gotham Medium

IMDb – Impact T

Adobe – Myriad Condensed Bold

9rules – Helvetica Bold

deviantART – Trebuchet

TechCrunch – Frutiger

Ning – Clarendon Bold

Paypal – Verdana Bold Italic

Netflix – Graphique Pro

Zappos – Binary Bold

Reuters – Neo Sans Pro Medium

Tumblr – Bookman Old Style Bold

Pownce – Sauna Bold

Fonts Used In Logos of Popular Websites ...
Fonts Used In Logos of Popular Design Blogs I got in touch with a good number of...
Fonts Used In Popular Band Logos Continuing the font catch, identify, and release program we’re...

Getting Clients to Embrace Fresh Ideas

Zach Dunn — Tue, 03 Nov 2009 15:31:46 +0000

The internet is full of brand new proof of concepts and ideas just waiting to be implemented on exciting new projects.

Actually getting the approval to use these features is another story entirely. Some of the most interesting ideas turn out to be hard sells when putting them into to practice.

So what’s a web designer to do when clients insist on stale ideas?

Know Your (Actual) Audience

Your client can mean the world to you, but the world is not your client. The world audience does not always share all of your client’s needs and direction. Success (in most cases) is built on the ability for other people to interact with the finished product, and not just the client’s approval of color scheme.

It’s not easy to tell a client that their idea isn’t going to work out, but unfortunately it’s sometimes a necessary part of the job. If you hired an architect to build a house, they wouldn’t build something that would fall down (even if you insisted). Web design is the same way.

Three Facts of Client Work

As a web designer, it’s important to make note of a three main points. As simple as they may be, it’s easy to overlook them:

The person funding the project may not always know what’s best
You’ve been hired as the professional
The Internet is a big place

So what now? At which point do you, as the web professional, try to stop clients from pushing a project in a misguided direction?

Don’t Get Discouraged

Be careful about simply accepting a client’s disapproval without further questions. This does not mean that you should become overly-confrontational, but sometimes clients don’t know how to communicate the real problem at hand. It’s up to you to dig further in and get to the real problem.

Does the client not like a design because of personal taste? Or is it actually because their screen resolution is set unusually low? Expect further questions to come out of each round of feedback. If you’re able to pick up the underlying issues, you’ll be much more productive in revisions.

It’s your job as the designer to bring a person up to speed. This doesn’t always mean forcing them to upgrade their machines, philosophies, or business practices — but does involve a certain amount of education about the rest of the internet. If a small part of their market falls into the same pitfalls (e.g. screen resolution), it’s not always a good decision to plan for the lowest common denominator.

Ask Good Questions

Let’s say that your client requests a menu change that would cause a lot of confusion for users trying to navigate. Especially if they love a bad idea, how do you guide them in the right direction without being overly-forceful?

Give your client an opportunity to come to an answer by themselves. Rather than insisting “This menu will work better”, ask them “How would the user be able to find their current location”, or questions leading to the problem. The best person to have on your side is the client’s own mind.

Food for Thought

The goal of an argument is not to win. It is to get the other person thinking differently. Once you’ve done that, they’ll fill in the rest of the gaps on their own.

Using the example above, a good food for thought example would be “How would your intended audience like/use this?” This does two things:

Presents the issue at hand (User experience)
Forces the client to look from a new perspective (and not just their personal opinion)

Even though a client starts the project, the client is rarely the target audience. Designing for the Internet is designing for other people.

Explain the Purpose

It’s easy to get caught up in explaining the concept of a new feature, but don’t lose sight of the goal. What is the purpose of the new idea? If you’re only explaining the concept, you’re more likely to deal with existing bias. Hold on. Bias? How can you be biased against an idea?

A Tale of Two Networks

What’s the difference between MySpace and Facebook? Technical things aside, it’s actually a tough question. Both are social networks that allow people to connect and maintain online relationships.

If a client isn’t up to date with the technology happenings, it’s easy to assume that the audience found on Facebook is the same angst filled teenagers on which MySpace built its reputation. This same problem appears for sites like Twitter (e.g. pointless updates) and a number of other useful (but not always recognized) web services.

Consider the two options below for selling the idea of Facebook:

Facebook is a portal to network with millions of people.
Many companies have used Facebook as a way to connect to young people in their everyday life. Company A ran a campaign that boosted traffic to their website by 300% last month.

The first statement explains, but it doesn’t stimulate the same business enthusiasm as the second one. Simply pointing out a potential audience isn’t enough, you’ve also got to lead them with concrete examples of success and application.

First One in the Pool

Not all businesses want to take on the risk of being the first to “test the waters.” You’re up to speed with trends (reading this proves it!), but there’s no guarantee that the client is on par. Show them the other companies that are already succeeding, and it will make your job easier.

Conclusion

Have you ever had problems persuading a client to go with an innovative idea? How did you handle it? Does your web design organization have any strategies that work well? Share them in the comments below.

Light bulb icon used in banner image via DarkGlass

Pitching the Internet What’s your pitch? Every job starts with one. It may...
Watch Your Language: Clients & Pricing // Want more pricing help? This is day two...
6 Ways to Get the Email Response You Need Have you ever sent out a crystal clear email only...

Build Site Color Schemes from Photography

Zach Dunn — Sat, 31 Oct 2009 19:52:10 +0000

One of the reoccurring responses we received from our reader survey earlier this month involved our color scheme inspiration posts.

Overall, readers seemed to like the palettes, but wanted a demonstration of how to put them into action. Today we’re going to do just that.

By the end of this post we’ll have a website color scheme planned out, along with a wireframe demonstration.

Pick a Base Photo

Flickr is the only site you’ll ever need for inspiration photos. Name a topic, and you’ll have thousands to sift through. Without Flickr, our Color Scheme Inspiration series would have some seriously less inspiring photography.

With so many photos available, you’ll need to spend some time figuring out the subject matter. Designing for a surf shop? Photos with keywords based on the water is a great start. Travel agency? Sample some beaches around the globe. It sounds obvious because it is.

Let’s put this into practice with a quick search on Flickr. In honor of Halloween, we’ll go with a seasonally themed photo:

Sample a Color Scheme

Most photos have more than a few colors. It’s the job of the designer to figure out which ones will be more significant. Lucky for you, there’s plenty of places online to get help.

Colourlovers has created a great tool called PhotoCOPA. PhotoCOPA allows you to upload a photo into the editor, and then extract colors, add weight to them, and save as exportable palettes. It has been absolutely critical to putting together our Color Scheme Inspiration posts. It’s an easy way of keeping track of the end result when first composing the scheme.

Don’t Be Afraid to Expand

Just because a color doesn’t directly appear in a photograph, doesn’t mean that it can’t be used. This is why it’s called “inspiration” and not “direct extraction”. If a photograph is mostly blue and purples, it’s not inappropriate to include a new shade to enhance the other colors.

Using the Halloween photo above, we can make a number of color schemes:

PhotoCOPA allows you to search Flickr from directly in the editor, but I’ve found it much easier to sort through photos in typical searches.

Applying to Page Design

There are several tools out there that enable web designers to visualize what the potential end result. Color Scheme Designer is great for generating a quick color scheme with web layout preview. If you’re interested in developing something a little more customizable, I recommend creating a template in Photoshop to plug colors into. Save it somewhere convenient, and save a new version for each scheme.

Once again, don’t be afraid to introduce extra colors as needed. These palettes aren’t always going to look perfect automatically — you will have to do some tweaking to get a good end result.

Sample Layouts

The layouts below are inspired by the color schemes built in the last step. I’ve demonstrated some possible layout colors using our palettes and some basic Photoshop:

Design from Photography

If you find color schemes from other sources, where does your inspiration come from? Have you ever designed a website from a photograph before? Share your experiences in the comments below.

Additional Resources

Color Scheme Inspiration – Fresh from the Bakery ...
Color Scheme Inspiration – USA National Landmarks ...
Color Scheme Inspiration – Cliffs and Islands This round of color inspiration comes from some huge...

Using Rounded Corners with CSS3

Zach Dunn — Mon, 26 Oct 2009 03:52:39 +0000

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page.

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

Browser Specific Options

Through the use of proprietary CSS properties, certain browsers can already display rounded corners. For example, Firefox uses the -moz-border-radius property to control the corner radius of a page’s border. Safari can accomplish the same result with the -webkit-border-radius or -khtml-border-radius properties.

To give a 5 pixel border radius, the proprietary CSS property would look like:

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;

Since proprietary CSS properties do not affect every web engine, you’ll need to include one for each browser family supported.

Cross Browser Considerations

Until more browsers begin to support CSS3, these options are a good way to increasing backwards compatibility with pure CSS. If you’re wondering how specific browsers handle the specification, this table has the results organized nicely.

Border Radius in Action

Let’s go through a quick example in border-radius usage. Since CSS3 has not yet been finalized, we’ll be including the proprietary options mentioned above too.

To keep things simple, we’ll make the targets of our experiment basic div elements. You can see the results of both together on the demo page.

Four Corners

This style will results in a box with four equally rounded corners.

.content-box{border:1px solid #AFAFAF; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px;}

Two Corners

This style will result in a box with only the top two corners rounded

.specific-box{border:1px solid #000; border-radius:5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;}

Keep in mind that even though border-radius is not yet supported by all browsers, it doesn’t hurt to include it anyways. This will help ensure that you have forward compatibility. Browsers with CSS3 support will use the property, while the rest will just ignore it.

Color Scheme Inspiration – Windows

Zach Dunn — Fri, 23 Oct 2009 03:34:12 +0000

It’s a look into the outside world through a series of window related photographs today.

Wondering what this post is all about? Every couple weeks or so, we scavenge Flickr for some wonderfully inspiring photography to build color schemes from. The results can be used to start graphic and web projects of all sizes. Inspiration comes in funny places sometimes.

Photos are all found via Flickr (follow image links for author info). Color schemes are available to download through COLOURlovers.

Palettes from the Window Frame

Open Another Creative Window

Looking for more window theme photos to work with? There’s a number of Flickr groups dedicated to everything window related. Two of my (recently discovered) favorites are the Doors & Window Project and Windows of the World. Between the two, there’s over 90,000 photos of window related imagery. Good luck running out of inspiration.

If you make something spectacular, be sure to post it to our official Build Internet group on Colourlovers where it will be appreciated by a whole community of color enthusiasts from around the globe.

Color Scheme Inspiration – Fresh from the Bakery ...
Color Scheme Inspiration – Rainy Day in the City This round of color inspiration is braving bad weather...
Color Scheme Inspiration – USA National Landmarks ...

How to Plan a Content Heavy Site

Mary Fran — Wed, 21 Oct 2009 04:00:30 +0000

Editor’s Note: Today’s guest post comes from Mary Fran. She’ll be guiding you through the proper planning involved in projects with larger amounts of content.

A major project can be intimidating. The first time you take one on, it may even be terrifying. But with a little planning, you will succeed with flying colors.

In this article, we’re going to walk through a few of those steps to successful project management.

Create a Project Workflow

This is a critical first step.A project needs clear planning from the start. Without a clearly defined workflow, your project will quickly become a muddled mess. Even using a management tool like Basecamp requires first creating a workflow definition. Ask yourself the following questions:

Who will be responsible for the site content?
Where is it being saved?
What format?
How should it be named?
How are you going to track versions?
What members of your team are responsible for what tasks?

These are a crucial considerations in the beginning of any project, and if you skip them now it will be very difficult to work with large amounts of data later.

Organize Files Logically

Once you have decided on a workflow, it’s time to get your assets in order. Make sure that there is a clear direction of where your files should be going, and what they are named. This is an important and logical second step in order to keep files organized in future stages.

A Sample Folder Structure

Setting up your folders is always a daunting task (there is always someone who does it better) but you can always learn something from trouble you run into. I have come up with a file structure that seems to work for almost all projects that I work on:

The “Client Files” folder is just what you would expect. It contains all files that the client has submitted to us for use in the project. Typically clients provide content, product images, and logos. I sub-divide the “Images” and “Logos” folders because we edit the files after we receive them, but we do not typically edit the text.

Other Considerations

If you are saving files to something such as Basecamp, documents should be a Word document, placed into a specific category (e.g. “Site Content”) for filing, and named after the page it belongs on.

If you’re using an FTP server, naming the files is a little more crucial. Something similar to Site > Text > HomePage_3October.doc contains a date so that you can make sure that you are using a current version. This allows the content creator to go back to specify a version easily.

Additionally, if you are building an e-commerce site, requesting data from a client in a spreadsheet might just come in handy. The columns you end up with will be unique to your project, but they will at the very least be: Product ID, Product Name, Description, Price, Options, Dimensions, Image File Name. Having this reference will be invaluable as you are spending that day inputting the data into your site.

Create a Site Map

How are pages going to relate to each other? If this is a really large site, how are the categories going to relate to each other and then pages within a category going to relate (relationships only need to be defined in one category if all categories are going to contain similar relationships).

There needs to be a site overview listing all categories and subcategories. You can go back into your main folders and create sub-folders for your categories at this point. By having a graphical or outlined site plan, you and the client will have a better understanding of how the site is going to progress.

Define Page Content

Now that you know exactly what the pages are and how they relate, you can begin to define the page types.

It’s easy to undervalue this step, but it is important not to. It lets you refine the site plan and formulate an effective ask for data and content.

Some of the main points things you should to consider at this point:

What types of pages are you going to have?
What kind of forms are needed, and where does the information go?
Is there a database in play?

From these three generalized points, you can build a whole checklist of further items to review (e.g. Setting up form email accounts, legal pages, etc.)

Inventory Existing Content

What data do you have available or finished? Once you’ve completed the previous sections, it’s a good idea to inventory existing content. Verify that you have the pictures of products or people that you requested, that all of the descriptions exist and that they follow proper format.

Something missing? Go back and check your sitemap and project folders. Making sure you have all the data that you need tucked away neatly into proper folders will prevent headaches and holdups when trying to finish up the project.

Make a Timetable

Make a calendar. Put deadlines on it. This will help you focus and keep the project on track. Managing a large project can be a bit like training a cat — seemingly impossible for an untrained person, but with careful planning and persistence, it will be successful.

Additional Resources

WriteMaps online sitemap builder

The Anatomy of a Corporate Site This is part three of the week-long “Website Anatomy...
Lights Out – Dimming/Covering Background Content with jQuery This is a quick and easy approach that tackles...
The Anatomy of a Portfolio Site This is part two of the week long series...

Easy Databasing with SQLite

W. Jason Gilmore — Tue, 20 Oct 2009 04:20:36 +0000

Editor’s Note: This is a guest tutorial from W. Jason Gilmore, a PHP developer and bestselling author with more than ten years of professional experience. He’s the author of the popular new book, “Easy PHP Websites with the Zend Framework”, which includes access to almost five hours of online video, a periodically updated e-book, and access to a reader-restricted online forum. You can buy the book through both Amazon.com and EasyPHPWebsites.com.

Perhaps because the Web still in some ways resembles the Wild West in terms of its anything-goes, feast-or-famine environment, we Web developers tend to view even our most modest projects with visions (some would say delusions) of grandeur. After all, who among us hasn’t fantasized over our new e-commerce store generating enormous revenues? Or took a moment to calculate the cost of hosting our new blog on a dedicated server because surely there are millions of visitors who will share our passion for the crocheted pot holder industry? Such ambitions tend to skew our ability to evaluate a project’s technology requirements, resulting not only in significantly increased monetary outlays, but also in increased time (and therefore, expense) maintaining an exorbitant infrastructure.

Historically, such overreaching has perhaps been no more evident than when gauging a project’s database requirements. Prior to, and even in the years following, the rise of open source database solutions, any attempts to suggest using a database other than Oracle, Microsoft SQL Server, or IBM DB2 were met with laughter. The result was typically a project incurring thousands of dollars in licensing fees, significant hardware costs, and often a dedicated individual knowledgeable in maintaining these complex database solutions.

In the years following MySQL’s first public release back in 1996, developers began to reconsider long-held beliefs pertaining to minimally acceptable database requirements. Uncompromising demands capabilities were supplanted by the desire for performance and low licensing fees, not to mention by realization that most applications didn’t actually require many advanced features in the first place! MySQL’s measured approach to eschewing features in exchange for performance, not to mention its’ open source licensing strategy, made it a rather attractive solution for millions of Web developers seeking a low-cost solution which also happens to not unreasonably stretch the developer’s limits of SQL administration capabilities.

Even in light of these advantages, you might be surprised to MySQL can be overkill for many projects. In fact, an even more efficient solution is available which you’re probably unknowingly already using every single day. This solution is SQLite, and by one reliable account is the most widely deployed database solution in the world [1].

Enter SQLite

SQLite (http://www.sqlite.org) is a lightweight yet extremely powerful open source database solution used within countless high profile technologies around the globe, including Firefox, Skype, McAfee, and the iPhone [2]. Capable of powering cellphones and Web sites alike, SQLite can be installed in minutes, and requires nothing of the developer in terms of configuration nor in terms of otherwise typical tasks such as creating user or administrator accounts; it’s quite literally a set-it-and-forget-it solution, making it the perfect database for many Web applications managed by resource strapped developers. Further, because SQLite databases are stored in a single file, the database can be backed up and moved just like any other operating system file.

But don’t presume SQLite’s no-nonsense installation process is indicative of an inferior product! SQLite supports all of the data types typically found in other database solutions, transactions, a command-line interface, ample support among many of the most popular programming languages, and can handle terabyte-sized databases. In fact, I’d venture SQLite will do the job just fine for the vast majority of your Web-based projects, whether it’s building a corporate Web site or running your blog. I’ll spend the remainder of this tutorial introducing you to SQLite, and in particular showing you how to integrate SQLite with PHP.

Installing SQLite

SQLite is supported on all major operating systems, offering precompiled binaries for Windows, Mac OS X, and Linux. As is standard practice you can also download and compile the software from source. To install SQLite, head over to the project’s download page and download the desired version.

Because SQLite is a self-contained solution, there is no need to think in terms of clients and servers per se. All you need to do is unzip the download, and move the lone file to a convenient location preferably within your system path. Next, open a command prompt and execute the following command:

%>sqlite3 blog.db

Executing this command will create a database named blog.db, and subsequently enter the SQLite command-line console. From here you can begin creating database tables. The following example creates a table named entry which will be used to contain blog entries. If you’re familiar with standard SQL table creation syntax, this will look quite similar to what you’ve seen in the past:

sqlite> create table entry (
   ...> id integer primary key autoincrement,
   ...> title varchar(100) not null,
   ...> created_on datetime not null,
   ...> body text);

You can view a database’s tables using the .tables command, like this:

sqlite>.show
entry

You can view a table’s schema using the .schema command:

sqlite>.schema entry
CREATE TABLE entry (
id integer primary key autoincrement,
title varchar(100) not null,
created_on datetime not null,
body text);
sqlite>

To view a list of all available console commands, execute .help.

You can use all of the usual SQL commands to insert, update, delete, and select data. For instance, the following INSERT statement can be used to add a few rows to the entry table:

sqlite> insert into entry(title,created_on,body) VALUES("First entry","2009-10-19 14:04:23", "First entry body");

From there you can select the data using the SELECT statement:

sqlite> select * from entry;
1|First entry|2009-10-19 14:04:23|First entry body

If you navigate to the directory where you executed the sqlite3 command you’ll see a file named blog.db. This contains your entire database, table schema, and data! To backup your data, just copy that file to a USB key or elsewhere as desired.

PHP and SQLite

Because SQLite is such a viable solution for Web developers, not only is PHP natively capable of talking to the database, but the SQLite extension is actually enabled by default as of PHP 5. If you’re running Windows you will need to enable the php_sqlite.dll extension within your php.ini configuration file. For PHP 5.1 and beyond you’ll also want to enable the php_pdo.dll and php_pdo_sqlite.dll extensions. On Linux depending upon your environment you may need to build PHP using the --with-sqlite=shared option.

Once PHP is properly configured, you can use PHP’s PDO extension to interact with SQLite. The following example will retrieve the previously inserted blog entry:

prepare("SELECT * FROM entry");

$sql->execute();

while ($row = $sql->fetch(PDO::FETCH_OBJ)) {
      echo "The blog entry {$row->title} was
      created on {$row->created_on}.
";
}

?>

Executing this script returns the following output:

The blog entry First entry was created on 2009-10-19 14:04:23.

If you receive an error when attempting to open the SQLite database, chances are there is a conflict between the SQLite version you downloaded and that used by your PHP installation. If this is the case, either update your PHP installation or use PDO to create your database tables and data.

Conclusion

I hope this brief tutorial provides you with the incentive to consider using SQLite for a future project. I can guarantee it will save you significant administrative time without detracting from your Web site’s performance. Please contact me with your questions at jason@easyphpwebsites.com.

Footnotes

[1] According to detailed estimates compiled by the SQLite Project.

[2] http://sqlite.org/mostdeployed.html

Database Icon used in banner images from the MinIcons set.

Build a Thermometer Controlled Page with jQuery

Zach Dunn — Fri, 16 Oct 2009 02:35:18 +0000

Hold on. Before anyone gets too excited, jQuery does not have the ability to actually monitor a room’s temperature.

The thermometer we are building is a vertical slider from the jQuery UI library. As the temperature is changed on the thermometer, the page design will update accordingly.

The choice to go green in today’s post wasn’t random. Actually, it’s the result of an annual one day movement in the blogosphere…

It’s Blog Action Day!

This year, Blog Action Day has a focus on climate change.

When you spend most of your time building digital real estate, it’s often hard to realize the implications that a website can have on the real world. But then again, this is the same world where changing the background of Google could save massive amounts of energy. With impact like that, there’s steps even a simple web designer can take to safeguard against damaging climate change.

A Climate Oriented Tutorial

Today we’re doing our part to build awareness via themed tutorial. Chances are that you’ve already seen talk of conserving trees on other participating blogs. To mix things up, we’re going to celebrate nature by building our own miniature bio-dome.

The Goal

By the end of this tutorial, we’ll have a fully functioning temperature sensitive “Eco-Dome” built with the power of jQuery.

Quick disclaimer: I am not a climatologist. The temperatures used in the end product were not chosen scientifically. They are a rough guess at typical climate ranges. Build Internet is not the type of place you should studying for a science test.

In the interest of keeping this post at a reasonable length, I’ll only be explaining the elements of code that are directly relevant to this tutorial. If you get caught up in anything not explained here, please feel free to leave a comment.

The HTML

New File: Create “jquery-environment.html“ in the root directory





	

	

	
	
  	

	

	jQuery Environment

	

	





	
		

			The jQuery Eco-Dome

			Drag slider along the thermometer to change temperature.

			

			

				Moderate / 50 °F
				Eleven of the twelve hottest years since thermometer readings became available occurred between 1995 and 2006 Source

			

		

	


	
	
		One hectare (2.47 acres) may contain over 750 types of trees and 1500 species of higher plants Source
		Eleven of the twelve hottest years since thermometer readings became available occurred between 1995 and 2006 Source
		Antarctica was imagined by the ancient Greeks, but not even seen until 1820 Source

Setup for this page’s structure is fairly straightforward. We’re putting in a series of spans, paragraphs, and images for the jQuery to put content in later. Each is identified by an ID to make targeting simple. I’ve put in the contents of “Moderate Climate” as a default value.

In order to reduce load times, all of the banner images (available in the source file) are loaded into a div tag which we will hide using CSS. Since the images are being loaded on pageview as opposed to the first jQuery call, loading should be much smoother.

The only other hidden section will be a list containing all of the “Fun Facts” to be displayed on top of the climate images. Just like the images, they will be pulled using jQuery.

The CSS

New File: Create “jquery-environment.css“ in the root directory

Nothing special in the CSS department. The only customization outside of fonts and alignment is with the slider class. The default slider is a little too thin for this project, so we’ve widened the entire element.

/* Styles for jQuery Eco-Dome Tutorial */
/* Zach Dunn (www.buildinternet.com) */

*{margin:0; padding:0;}

body{background:#5D7E2F url("images/moderate-bg.jpg") no-repeat top left;}

#wrapper{width:960px; margin:20px auto; background:#FFF; border:1px solid #DDD; overflow:hidden;}
	.big-padding{padding:30px;}

h1{font-family:Helvetica, arial, sans-serif; color:#191919;}

p{font-family: "Lucida Grande", arial, sans-serif; font-size:13px; color:#333;}
	p a{color:#A90000; text-decoration:none;}
		p a:hover{text-decoration: underline;}

/* Eco Dome Pieces */

	#eco-dome{width:750px; height:200px; background:#f7f7f7 url("images/moderate-banner.jpg") no-repeat top left; float:left; overflow:hidden;}
		#eco-dome p{color:#FFF; text-align: center; background:#000;}
			p.summary{font-size:21px; display:inline; margin-top:10px; float:left; padding:10px;}
			p.fact{display:inline; float:right; font-size:14px; padding:10px 0px; width:500px; clear:both; margin-top:60px;}
				p.fact a{font-style:italic; font-size:11px;}

	#temp-controller{float:left; margin:0px 30px;}

/* Navigation Pieces */

	.ui-slider-vertical{height:200px; width:80px; border:1px solid #DFDFDF;}
	.ui-slider .ui-slider-handle{width:90px; height:10px; border:1px solid #DFDFDF;}

/* Hidden Elements */

	#climate-facts, #image-bank{display:none;}

What’s this jQuery UI Business?

Some of you may be wondering what the difference is between jQuery and the UI. They are not the same thing, nor are they packaged together by default. jQuery UI is a separate library dedicated to user interface elements (e.g. Tabs, progress bars). In this tutorial we’re only using the slider element.

Each of these elements have themes that can be loaded in by default. As you can see in the html code above, we are using the “Blitzer” theme. It is loaded in from an external CSS file hosted on the UI server.

The jQuery

New File: Create “jquery-environment.js“ in the root directory

/* jQuery Eco-Dome Tutorial */
/* Zach Dunn (www.buildinternet.com) */

var climate;
var climate_fact;
var climate_banner;

function analyze_temperature(current_temp){

	//Determine current temperature range
	if (current_temp >= 0 && current_temp <= 32){

		//Arctic climate
		climate = "Arctic";

		//Get current banner
		climate_banner = $("#arctic-image").attr("src");

		$("#eco-dome").css({
			'background' : '#000 url("' + climate_banner + '") no-repeat top left'
		});

		$("body").css({
			'background' : '#285988 url("images/arctic-bg.jpg") no-repeat top left'
		});

		//Update displayed fact
		climate_fact = $("#arctic-fact").html();
		$(".fact").html(climate_fact);

	}else if (current_temp > 32 && current_temp < 75){

		//Moderate climate
		climate = "Moderate";

		//Get current banner
		climate_banner = $("#moderate-image").attr("src");

		$("#eco-dome").css({
			'background' : '#000 url("' + climate_banner + '") no-repeat top left'
		});

		$("body").css({
			'background' : '#5D7E2F url("images/moderate-bg.jpg") no-repeat top left'
		});

		//Update displayed fact
		climate_fact = $("#moderate-fact").html();
		$(".fact").html(climate_fact);

	}else{

		//Tropical climate
		climate = "Rainforest";

		//Get current banner
		climate_banner = $("#rainforest-image").attr("src");

		$("#eco-dome").css({
			'background' : '#000 url("' + climate_banner + '") no-repeat top left'
		});

		$("body").css({
			'background' : '#11170d url("images/rainforest-bg.jpg") no-repeat top left'
		});

		//Update displayed fact
		climate_fact = $("#rainforest-fact").html();
		$(".fact").html(climate_fact);

	}

}

function changeTemperature() {

	var current_temp = $("#temp-controller").slider("value");
	$(".current-temp").html(current_temp);

	//Determine climate from temperature
	analyze_temperature(current_temp);

	//Display climate title
	$(".current-climate").html(climate);

}

$(document).ready(function(){

	$("#temp-controller").slider({
		orientation: "vertical",
		range: "min",
		max: 100,
		min: 0,
		value: 50,
		slide: changeTemperature,
		change: changeTemperature
	});

});

Now that we’ve got all of the style and structure in place, it’s time to put an engine behind the visuals. The jQuery used below may look a little long, but it’s not terribly complex. I’ve broken down the flow below in sections to help you figure things out:

$(document).ready

The div of #temp-controller is converted into a vertical slider. Whenever this slider is used (via slide and change parameters), it will trigger the changeTemperature function

changeTemperature Function

The changeTemperature function assigns the current value of the slider to a variable called current_temp
The current_temp variable is displayed into the “.current-temp” span tag
The analyze_temperature function is called using the current temperature as an argument
The climate name returned from analyze_temperature is displayed within the .current-climate span

analyze_temperature Function

The current temperature (stored in current_temp) is filtered by current range
Based on the temperature, a different style and climate name is assigned
Style changes are done through the css jQuery method
Images are pulled using src attributes of preloaded images in the hidden “image-bank” div

Environmentally Friendly Code

With some added ingenuity, you can adapt the concepts used in this tutorial to build your own slider-controlled content. Or digital terrarium. Whichever appeals to you more.

As of posting, I’ve only tested the result in Firefox in order to get a working version up. I’ll be revisiting it as needed to fix bugs in browsers from IE7 and up.

Quick Tip – Reading & Editing HTML Attributes in jQuery ...
Quick Tip – Blur Links With jQuery This quick tip covers a quick usability upgrade for links...
It’s a Rainbow! – Color Changing Text and Backgrounds w/ jQuery Here’s a quick and easy way to cycle between...

The Ten Month Reader Survey

Zach Dunn — Wed, 14 Oct 2009 02:00:58 +0000

Unfortunately we can’t read minds. That’s why, From time to time, we like to take a poll of our reader’s mood. Good responses help us plan out articles and tutorials for the coming months. Your opinion today will help shape Build Internet tomorrow.

As extra incentive, we have three license of Invoicera (an online invoicing application) to give away.

How to Participate

You’ll be entered to win an Invoicera license by doing one of the following:

Complete the short reader survey
Comment below with a suggestion or feedback for Build Internet

Win an Invoicera License

For your participation in the survey, we have three licenses of Invoicera to give away. Invoicera is an incredibly convenient online invoice management application that makes keeping track of payments easy. An excerpt from their overview:

“Invoicera saves your time and helps you manage your bills in a snapshot. It is designed as a payment tracking application that helps you keep a track of your customer payments.”

With features like auto-invoicing, Invoicera is a great asset for any freelancer or small business looking to spend less time invoicing, and more time building. After all, creatives are meant to design, not crunch numbers!

Speak Up

We’re counting on your feedback to help keep Build Internet going in the right direction. With such a great community here, Sam and I want to make sure that we’re doing everything possible to keep you happy. Go ahead. Make your voice heard!

This contest will be open until Tuesday, October 20th 2009. Winners will be chosen at random and contacted shortly after.

Fanurio Time Tracking App Giveaway Take a Survey We’ve set up a short survey...
The First Month Starting a web niche blog was always a project Sam...
The Fifth Month Hello Internet It’s been another month. We’re now counting...

Build Internet!

The Eleventh Month

Traffic and Stats

Subscribers and Followers

Top Content and Posts

The Smashing Network

“How much traffic have you gotten from Smashing Magazine?”

Recommended Reading List

Tutorialzine

Trendir

TypeInspire

Happy November

More Fonts Used In Logos of Popular Websites

Newgrounds – Tekuteku

VIRB – Proxima Nova Extrabold

Myspace – Arial Rounded Bold

Wikipedia – Hoefler Text

eBay – Univers (Modified)

Pandora – Mrs Eaves Small Caps

Microsoft – Helvetica Black Italic

msnbc – Gotham Medium

IMDb – Impact T

Adobe – Myriad Condensed Bold

9rules – Helvetica Bold

deviantART – Trebuchet

TechCrunch – Frutiger

Ning – Clarendon Bold

Paypal – Verdana Bold Italic

Netflix – Graphique Pro

Zappos – Binary Bold

Reuters – Neo Sans Pro Medium

Tumblr – Bookman Old Style Bold

Pownce – Sauna Bold

Getting Clients to Embrace Fresh Ideas

Know Your (Actual) Audience

Three Facts of Client Work

Don’t Get Discouraged

Ask Good Questions

Food for Thought

Explain the Purpose

A Tale of Two Networks

First One in the Pool

Conclusion

Build Site Color Schemes from Photography

Pick a Base Photo

Sample a Color Scheme

Don’t Be Afraid to Expand

Applying to Page Design

Sample Layouts

Design from Photography

Additional Resources

Using Rounded Corners with CSS3

Browser Specific Options

Cross Browser Considerations

Border Radius in Action

Four Corners

Two Corners

Further Reading

Color Scheme Inspiration – Windows

Palettes from the Window Frame

Open Another Creative Window

How to Plan a Content Heavy Site

Create a Project Workflow

Organize Files Logically

A Sample Folder Structure

Other Considerations

Create a Site Map

Define Page Content

Inventory Existing Content

Make a Timetable

Additional Resources

Easy Databasing with SQLite

Enter SQLite

Installing SQLite

PHP and SQLite

Conclusion

Footnotes

Build a Thermometer Controlled Page with jQuery

It’s Blog Action Day!

A Climate Oriented Tutorial