Category Archives: Monday in the HTMLab

All about web design and development, and my triumphs and defeats therein.

Puzzling through PHP, Part 2: Making a Searchable Database

One of my longest-held dreams, as a fledgling Web designer and developer, was to make a fully searchable database of some sort. I used to dream about building a link database or directory, but as I became a collector of M:TG cards, I discovered I wanted to create a database of all the cards I wanted to trade instead.

But I didn’t dream about it being possible, especially not with any Web language I knew. Little did I know, PHP and MySQL working together could make my dream come true. And the best part is, you can make a database like this too! See how I managed it, with the steps below.

#1: Create the Database to Search

On your host’s control panel somewhere, you should have a way to create MySQL databases. This short tutorial shows you the generic way to create databases from your web host’s control panel, while this longer tutorial has a little bit more tech knowledge needed, but shows you how to manually set up MySQL username, password, etc.

For any database setup, you have to give the database a name, then make yourself an “admin user” account so you can access it. Lastly, you have to make a table within the database to hold the data you want to put into it. While you’re doing this, do not forget to write all this information down–you will need the database name, your admin username, and your admin password to do anything with your data afterwards.

Sample information:
Database name: mydata
Admin username: helloitsme
Admin password: epicsuperlongpassword
Database table: mydatatable

#2: Upload Your Data

To have a searchable database, you first need to have data. You could go through and manually create a MySQL database and plug data into it using a ton of MySQL commands. Buuuuut there’s a much easier way.

Microsoft Excel pages, or any other spreadsheet program pages, for that matter, can be converted over to .CSV (Comma Separated Value) format. These, when uploaded to your server through phpMyAdmin or another MySQL handling program, help populate an existing database table.

Example: For my Magic: the Gathering trades database, I had several pages’ worth of card data, which I’d spread out into individual worksheets within Excel. To translate all of those into .CSV format, I had to remove the label rows and columns (like “Name of Card,” “Condition,” etc.), and then had to save each sheet as a separate .CSV file. Then and only then could I upload it through phpMyAdmin to populate my created database with data.

#3: Write PHP Code to Search the Database

The following code is an actual example of the code I use for searching my M:TG trades database; of course, the username, password, and database name are not given here, for security reasons, but everything else remains the same. You’ll want to put this database-searching code in a separate PHP file from your HTML file where your search form is.

(By the way, I do not take the credit for making this code in any way–a dear computer programmer friend of mine used his coding skill and fixed the code so that it does work. AT LAST!! LOL)

<?php if ($searching == “yes”) {
echo “<p class=\”heading\”>Search Results</p>”; }
if ($find == ” “) {
echo “Oops!  No search term entered–try again!”;     exit; }
//Variables
$host = “localhost”;
$user = “helloitsme”;
$pass = “epicsuperlongpassword”;
$db = “mydata”;
$text = $_POST[‘find’];
$con = mysql_connect($host, $user, $pass) or die (“Connection error”);
$sqlDB = mysql_select_db ($db) or die(“Database selection error”);

$find = strip_tags(trim($text));
$find = strtoupper($text);
$query = mysql_query(“SELECT * FROM mydatatable”, $con);
$found = false;

//This loop will select the row and then uppercase the entire entry
while($data = mysql_fetch_array($query, MYSQL_BOTH)){
$updated =  strtoupper($data[‘name’]);
if($updated == $find)    {
echo $data[‘name’].” “.$data[‘rarity’].” “.$data[‘set’].” “.$data[‘condition’].” “.$data[‘amount’].” “.$data[‘color’];
$found = true;
break;    }}
if(!$found)
echo “Could not find this card”; mysql_close(); ?>

What Does This Code Mean?

<?php if ($searching == “yes”) {
echo “<p class=\”heading\”>Search Results</p>”; }
if ($find == ” “) {
echo “Oops!  No search term entered–try again!”;     exit; }

This determines whether the search has been sent to the server for processing, and if anything’s been put into the search form.

If the search form has been passed to the server, the value of the variable $searching will be “yes”; the if statement concerning this variable cues the browser to display the heading “Search Results” in anticipation.

If the user didn’t put anything into the search form, but hit Submit anyway, the variable called $find will be empty; the second if statement returns an “Oops” message if this is the case.

$host = “localhost”;
$user = “helloitsme”;
$pass = “epicsuperlongpassword”;
$db = “mydata”;
$text = $_POST[‘find’];
$con = mysql_connect($host, $user, $pass) or die (“Connection error”);
$sqlDB = mysql_select_db ($db) or die(“Database selection error”);

These are some of the necessary variables we’ve defined for this particular script to run: the host’s name, username, and password for the database ($host, $user, $pass), the database selection ($sqlDB), the connection to said database ($con), and what the search term was ($text).

You may not need all of these, but we found that the script ran better when all of these variables were clearly defined for the browser.

$find = strip_tags(trim($text));
$find = strtoupper($text);
$query = mysql_query(“SELECT * FROM mydatatable”, $con);
$found = false;

These four variables have more to do with refining the search terms and running bits of the script.

The first $find variable strips any code from the search term, so people can’t hijack the database using malicious code. The second $find puts the search term all in uppercase letters. Both help the search script run more quickly (and protect the database from the most basic of hacks).

The $query variable executes the actual script’s purpose: searching the database for anything matching the search term. And to be honest, I don’t know what the $found variable is for at this point in the script…all I know is that it makes the script work. (Pathetic, I know…this is where my PHP knowledge is spelled F-A-I-L.)

//This loop will select the row and then uppercase the entire entry
while($data = mysql_fetch_array($query, MYSQL_BOTH)){
$updated =  strtoupper($data[‘name’]);
if($updated == $find)    {
echo $data[‘name’].” “.$data[‘rarity’].” “.$data[‘set’].” “.$data[‘condition’].” “.$data[‘amount’].” “.$data[‘color’];
$found = true;
break;    }}
if(!$found)
echo “Could not find this card”; mysql_close(); ?>

This is the bit of the code I understand the least, but my friend’s comment in the PHP script helps a lot. The “while” code begins a looping search through the database, row by row, finding everything that matches the search term.

Once it finds a record that matches, it returns everything about that record–in this case, it finds the name of the card, its rarity, what set it came from, etc. Then the variable of $found gets set to “true” because it found something. If it can’t find anything, however, it just echoes back a “can’t find anything” statement and ends the script.

#4: Plug in the Info for Your Database

Once you’ve got your search code ready to go, all you have to do is plug in your information for the username, password, database name, and table name (for within the database). Make sure you’ve got it spelled exactly right and that the letters are uppercase or lowercase as appropriate! Can’t tell you how many times I’ve mistaken a lowercase “L” for an uppercase “I”.

#5: Test the Search

Now, you need to see if this bad boy works. Type up a quick HTML form to take in your search term, like the one below (again, taken directly from my code).

<form name=”search” method=”post” action=”search.php”>Search for:
<input type=”text” name=”find” />
in
<br>
<input type=”checkbox” name=”name” value=”Name” /> Name of Card<br>
<input type=”checkbox” name=”color” value=”Color” /> Color (White, Blue, etc.)<br>
<input type=”checkbox” name=”rarity” value=”Rarity” /> Rarity (Common, Uncommon, etc.)<br>
<input type=”checkbox” name=”type” value=”Type” /> Type (Creature, Instant, etc.)<br>
<input type=”checkbox” name=”set” value=”Set Name” /> Set Name (Zendikar, M10, etc.)<br>
<input type=”checkbox” name=”condition” value=”Condition” /> Condition (Near Mint, Good, Fair, Poor)<br>
<input type=”checkbox” name=”amount” value=”Amount” /> Amount of Copies (1, 2, 3, etc.)<br>
<input type=”hidden” name=”searching” value=”yes” />
<input type=”submit” name=”search” value=”Search” />
</form>

#6: Debug, Debug, Debug, and By the Way—-Debug

This is the most important (and infuriating) part of this database search. My friend and I spent several months (yes, I said MONTHS) debugging this very script because no matter what we did, it just wouldn’t run. The final edits he made to it, which are reflected in this post, finally made it work.

When you’re working on code like this, it’s important to make sure it’s spaced out enough so that you can read it, and that you work on getting each tiny piece of it perfect instead of trying to scan the whole document for errors. For tired eyes, a colon can sure look like a semicolon, and a lowercase “L” can sure look like an uppercase “I”. You have to watch out for the little errors!

Once you’ve caught all the little spelling and mistyping errors, then you need to check to make sure the code’s variables work like they’re supposed to, and that you’re calling functions that actually exist in PHP and MySQL. For this, it’s best to consult the latest Internet references, or forums where experts in coding gather and help all us abject newbs. LOL

If you’ve made sure everything’s spelled right, and all the functions are supposed to run…well, you do like I did and call upon a friend or trusted authority who knows more about how programming languages are supposed to be written and run. Web development involves programming languages just like the rest of computer science, so there’s no shame in asking if you’re like me and frustrated by anything that resembles math. 😛

Summary

The code I’ve demo’ed here does work, at least for searching card names. We’re not sure what was blocking it from working before…oh well, that’s web development for you, LOL. (By the way, searching by color, set name, and all the other stuff still presents an error…it’s definitely still a work in progress. But at least the whole page doesn’t vomit an error every time you hit “Submit!”)

And if you try this code and get even more success out of it, tell me about it in the comments! To quote Robert Stack, “YOU may be able to help solve a mystery…” 😀

Hand-Drawn Graphics: Yes, They CAN Be Good Enough

Contrary to popular Web belief, Internet graphics don’t have to be sleek ‘n shiny like technology. In fact, in this age of lookalike layouts and cookie-cutter designs, landscapes of reflective images and shadowed text, hand-drawn graphics can give a touch of rustic personality to a page. A hand-drawn layout, icon set, avatar, etc., can make your page feel homey and intimate–truly “handcrafted.” What’s more, it can make your site seem more down-to-earth.

But not all Web designers are handy with a pen or a paintbrush. (I know I certainly ain’t the world’s best. LOL) It can be daunting to try to put your own artwork on your webpage for everyone to see; you can be paralyzed, thinking “What if it’s not good enough? What if I work really hard on it, and it ends up looking like I used it for toilet paper?”

These are some of the real thoughts and feelings I had about doing my own hand-drawn layouts…and I finally just decided to go ahead and try my hand at it, literally. The following are some of my results:

Examples of Hand-Drawn Graphics

(For each example, click on the image to get a full-size screenshot.)

The Network Look


This, my network page, was my first try at doing a hand-drawn layout. With this layout, based on a real tree I used to climb when I was a kid, I placed buttons and links as if they were flowers and buds on living branches, with my sketch as a simple background image.

I added no color to the actual sketch–I wanted the buttons to be the spots of color in the design, like trees’ natural flower buds and blossoms. (Plus, whenever I add color to my sketches, they automatically turn from “pretty good high-school art class” to “kindergarten art class mess”. Every. Time. xD)

The Domain Look


My domain layout featured a big, sheltering tree like the ones all around my house, its soft, cloudlike branches overhanging the content on either side of the “trunk.”


The “trunk” of the sketched tree stretched down all the way to the bottom of the page, where I had the “roots” of the tree in my footer, seen here. This is probably my favorite footer design to date–it really looks like the “end” of the page, the “ground” rather than just an arbitrary bit of code stuck at the bottom.

This sketch also received no color, because I knew I’d be using large areas of various shades of green in my CSS styles; I didn’t want the actual tree to clash. I also cite my previous difficulties with adding color to my sketches. It just never works out quite as I intend. LOL

The Fanlistings Look


This “flowers & ribbons” design literally framed my joined fanlistings page, and was difficult to code but looked beautiful on the page. For this one, I added a golden color to the flowers using Photoshop, and the overall layout looked much better as a result.

I used the boxed-in design as a way to stretch my design boundaries–the style succeeded with a little image slicing and creative use of HTML tables (yes, I used tables because aligned divs hate me). In this layout, the hand-drawn images define the space but do not detract from the content, like a good area rug in a living room.

The Update Blog Look


My update blog featured only small-scale sketches (a big leaf, a tiny multi-petaled blossom, and a growing flower on its stem). I used the leaf and blossom on the top part of the layout, and the flower-and-stem image in the footer, as seen below:

Using little sketched images in strategic places on the layout (and, again, not adding any color to the sketch itself, but using blocks of color in the layout code) gave it an airy, organic look. Plus, using fewer sketches meant more space for content, should the design need it; I wasn’t sure how much the various tag clouds and category spaces would need, so I went for as much visual space as possible.

Weaknesses of This Design Style

While this does look down-to-earth and homey, it can also look amateurish. (I fully admit mine are not the best in technical execution, but they were the best I personally could do.) In addition, hand-drawn designs can easily be misaligned, angled oddly, or leave crooked lines on a webpage; you can correct many graphical sins with Photoshop, but not everything!

However, if you’re skilled doing pencil-paper sketches (or sketches on a tablet computer with a stylus), you might be able to turn a hand-drawn design into a sleek-looking layout; it would be a worthy challenge! It’s just a little bit harder to get the perfect straight lines and shiny details we’re so used to with the Web these days.

Where Can You Use Hand-Drawn Designs?

In my opinion as a designer, hand-drawn designs are generally better for small personal/informational sites and the like, not big corporate or commerce sites. Any site where you need a personal touch, a more casual layout, etc., a little sketch (or a big one!) can work.

How to Make Your Best Hand-Drawn Graphics

You Will Need:

  • Pencil
  • Ink pen
  • Coloring medium (if desired; paint would need to be let alone to dry and might not scan well)
  • Ruler (if desired)
  • Printer paper (clean and uncreased)
  • Scrap paper
  • Scanner/copier/printer & computer, linked together

Directions:

  1. Sketch out your ideas on your scrap paper with a pencil–much easier to work with your design when your lines can be erased (take it from me).
  2. When you have something you’re satisfied with, take up your pen and printer paper, and begin transferring your sketch(es) into finalized form, using a ruler as necessary.
  3. Make a couple of copies of your uncolored sketch to see how well the machine picks up your lines, and make any lines darker that don’t show up. (Also, it’s good to have a few copies of your sketch on hand just in case something happens to the original.)
  4. If you want to color in your hand-drawn design by hand, do so now. Alternatively, you can add color digitally with an image-editing program once you scan it in.
  5. Scan in the image–you may have to adjust the contrast, brightness, and other image settings so that the pen lines or hand-added colors don’t look distorted. (I ended up with one sketch that looked like a photo negative because I messed up the image settings…LOL)
  6. Once it’s scanned into your computer, you now have an image that you can use as the baseline for any web project!

HTML5: Basically, “Flash! Ah-Ah!”

[/shameless quote of “Flash” by Queen (see Youtube video here)]

For those of us who still code in the Stone Age of HTML 4.01 (*raises hand* guilty as charged), HTML5 is a vaguely strange new planet on the horizon of web development, and has been for a couple of years now. I have blundered around this topic for a while now, trying to decipher what exactly I need to know about this new standard of web development. What is it like? How is it different? And most of all, what can I make it DO?

I Wasn’t Kidding When I Made the “Flash” Joke

Really. HTML5 does things we HTML 4.01 coders never dreamed the language would be able to do…and if we did dream of it, we knew it could only be done in Flash. (That was what stopped me from doing a lot of “cool interactive stuff” on my page–I didn’t know how to do Flash and found it way too daunting to teach myself.)

With the advent of HTML5, however, there are now common-sense tags for all sorts of interactive and structural things, including:

HTML5 is Seriously Cleaned Up, Y’all

With new standards comes lots of new rules, as we’ve seen, but there are tons of fixes for the “old” rules as well. The developers wanted to fix much of what was wrong with 4.01 and roll it out into 5, as well as provide new features that 4.01 never did, so they did the following (quoted from w3schools.com‘s developer idea list):

  • “New features should be based on HTML, CSS, DOM, and JavaScript”
  • “Reduce the need for external plugins (like Flash)”
  • “Better error handling”
  • “More markup to replace scripting”
  • “HTML5 should be device independent”
  • “The development process should be visible to the public”

(Valleygirl Voice) Ugh, These Tags Are, Like, So 1999

By the way, say goodbye to these old relics–they do not exist in HTML5 at all. (Of these, I think I only ever used “font”, “center” and “frame”…lol, shows how often these were used, huh?)

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

What Does All This Mean to Ground-Level Developers?

Basically, we won’t have to learn 10 languages just to make an eye-pleasing, interactive page anymore. Nor will we have to make sure everything is cross-browser compatible concerning plugins and scripts. So much more of HTML5 is based on making everything very understandable for the browser, without a whole bunch of extra code in various other languages.

With HTML5, a lot of the useless bulk of coding has been removed, tightening up and better specifying what remains. Switching your page from HTML 4.01 to 5, then, is akin to me doing Zumba for 10 months–it loses a little of the extra weight, and trims up in several places, finding muscles it didn’t know it had.

The most interesting parts of HTML5, for me, is what the developers mean by “better error-handling” and “visible development process.” Does this mean that one error on an HTML page no longer screws up everything else (like XHTML so famously does)? Does this mean that HTML5 is now an “open-source” project? There are many more bits left to be discovered and explored…and, for those of us who love web development, that’s 3/4 of the fun.

For Further Information

W3Schools.com’s HTML5 Section: Very informative (where I got some of the info for this article)
HTML5Demos: View live demos of some of the coolest features
HTML5 Rocks!: Up-to-date bloglike articles on HTML5
HTML5Doctor.com: Informative and well-sorted (but jargon-laden)…best for advanced coders (which sure ain’t me, LOL)
HTML5.org: Mainly an aggregator of more resources on HTML5

How Social Networks Killed the Personal Blog

I remember when I first began web design, personal blogs were all the rage. Yes, yes, I know, imagine me sitting in a rocker with a blanket over my knees if you wish, but I was kickin’ around the Web in the early 2000s and saw it with my own screen.

Back then, blogs had a more longform, intimate style of writing. They were how you shared your life stories and thoughts with others, mimicking the diaries so many of us likely kept–except that these “diaries” were online, and viewable by many people. Not only that, you could be an anonymous writer if you wished.

But now, the era of the “personal” blog seems to have waned. Blogs are now more for site updates, and maybe a little project tracking–they are more about topics than about lives. My own is a rare multi-topic blog, but not one of those topics is my life (and you’re much better off reading something that isn’t about my life, I assure you 😛 ). Personal blogs just aren’t as important to us anymore.

Why? I believe the answer lies in two words: “social networks.”

How Social Networks = Easier Personal Blogging

Believe it or not, early blog websites, like Diaryland, Blogger, Livejournal, and so many others, were some of the first social network sites. They allowed bloggers to talk to each other in ways that were system-constructed, with comments on blog posts and the like. So the Internet foundations of functioning social networks were already laid when networks that focused on shorter-form writing (such as FriendFeed, Myspace, Facebook, and Twitter) came along.

But these days, each of us likely writes several short textual bursts about our life in one day. We don’t all have to be gifted writers to write about our lives anymore; we don’t have to catalog what we did all day in a single, long blog entry. We can simply write about the interesting stuff that happens to us, as it happens, and not have to work it into a grand thematic short story of our day.

Why I Largely Ditched Personal Blogging for Social Media

As a creative writer who inexplicably hated keeping diaries and writing personal blogs (because my life is just that boring), I gravitated to the social network. Why? Because the social network didn’t make me JUST blog about myself to be considered “active.” I could comment on other people’s life events, like their pictures, play a few games, share a few links–all on one website. Just like big-box stores like Walmart capitalize on having “all you need at one store,” social networks like Facebook capitalize on sharing “all of your life on one site.”

But I realize that with the ease and ubiquitous nature of social networks came the inevitable waning of more “personalized” blogs. I gradually quit writing on my own Livejournal about my life after a while of being on Facebook, with this simple reasoning: “why write about my day on a personal blog, when I’ve already written a status message or two about it on Facebook and shared it with friends?”

I can imagine that many other Internet users have thought the same way, about whatever social network they prefer to visit and post on. Social networking makes it easier to post about your life, and takes less time than a blog.

There’s a Big “But” Here

Not everyone has stopped doing personal blogs, though. In fact, the number of small blogs and free blog websites has only risen in response to social networks, even though less people visit or make personal blogs these days. This trend, linked to the sheer number of topic blogs being produced, gives me hope that people aren’t completely getting away from “real” writing and longer article-driven blogs in favor of quick tweets and likes.

Though much of the Internet’s attention has been drawn away from this longform, diary-style life narrative, there still seems to be a call for it among individual users. Perhaps the demise of the personal blog is inevitable and in process, as it appears…or perhaps a new generation of Internet users will gravitate back to it.

Choosing An Awesome Web Host

I wrote last week about choosing a fitting domain name. But that’s not the only thing that potential web designers and developers have to focus on–in fact, equal in importance to a good domain name is a good web host. Without a well-run server, your domain name will point to nowhere.

What is a Web Host?

Simply put, a web host is either:

  • a company who has empty server storage space that they “rent” out to people;
  • a fellow web designer/developer who “rents” out his or her extra server space to other small-time designer/developers

(Whichever method of hosting you prefer, being hosted with a good friend or being hosted by a big company, it’s firstly important to remember that most hosts do not provide domain names. You will likely need to buy your domain name separately.)

What Makes a Web Host Good?

In searching for hosting, it’s important to evaluate each hosting company/person in terms of these qualifications:

  • Storage space
  • Number of domains allowed per hosting account
  • Media restrictions
  • Bandwidth allowances
  • Special features:
  • Current customer satisfaction
  • Average uptime/downtime

Storage Space

How much storage space can you get for your money? You should look for the most space you can find that fits within your hosting budget. Some companies charge a surprising amount for the same amount of space that others are willing to charge less for, so comparison shopping really matters here.

For instance, if you can only afford to pay 5 bucks a month for hosting, find hosts who offer space for 5 bucks or under, and then comparison-shop between them further to look for better deals on other aspects of each hosting plan.

Number of Domains Allowed per Hosting Account

How many domains can you link to your account if you buy from this particular host? For people who like to separate out their web design work into many domains, this makes a difference. Some hosts will only let their cheapest-plan hostees link one domain to their hosting account, whereas others will allow you to link 3 or 4, or even unlimited domains to various folders on your hosting account.

Whatever you choose, be sure you read all the fine print and understand what you’re buying before you click to pay anything!

Media Restrictions

Does the host allow images, Javascripts, audio files, or other special media? Some hosts I’ve known of since I started webdesign placed restrictions on how many images you could have (no image galleries, etc.), and some hosts did not support audio file formats or certain kinds of scripts.

While those types of restrictive hosts may have died off now that the Internet has become so media-driven, you still want to make sure your prospective host allows you to do all you want/need to do with your site. You don’t want to end up breaking a rule you didn’t take time to read or didn’t know was there.

Bandwidth Allowances

How much traffic can this hosting server support per month? Make sure you find out how much bandwidth you’re buying. This is almost more important than getting enough storage space–It’s a drag to have a great content-laden site for half a month, only to have a “Bandwidth Overage” sign up for the rest of the month blocking all that awesome content.

Special Features

Does this host have the capability to run things like MySQL databases, PHP, Ruby on Rails, email accounts, etc.? Check to see what kinds of application support you’ll be getting. Some hosts have MySQL support and some don’t, for instance, and you’ll need that if you want to make a WordPress blog, a fanlisting, or anything that needs a database.

Some hosts have the ability to install scripts like WordPress, forum software, and the like for you, if you’re like me and can’t make head or tail of most web programming languages. (That’s actually how I got this WordPress blog to work–I tried installing it myself and failed miserably, then found that my host’s cPanel had a happy little feature called “Fantastico,” which installed WP for me seamlessly and quickly.)

Whatever special functionality you want in a host, make sure you check through the documentation of each host you’re evaluating to see what they offer.

Average Uptime/Downtime

All the storage space, bandwidth, and special features in the world won’t compensate for your host taking the servers down all the time for maintenance. Before you pay for anything, check the server status of your potential host over the course of a week and see how many times servers are down versus how much time servers are up. This can give you a more accurate perception of the service you can expect with them.

Also, you can get a good read on a host’s server status by talking to real people who are hosted with them. That leads me to my last point…

Current Customer Satisfaction

Before you decide on a host, talk to people who are hosted with them, preferably those who have been with the hosting company/person for a fairly long time. They can give you a more realistic picture of the hosting provider’s service, features, storage space, bandwidth, etc., than any advertisement ever can. From other webdesigners/developers like yourself, you can learn what you need to finally decide on a host for yourself.

Other Pointers for Picking a Host

  • Don’t buy more storage space or features than you need–you can always upgrade later if you want. Do make sure to get as much bandwidth as you can for your money, however; you want to make sure your site will stay up and running constantly!
  • If you’re evaluating a hosting provider company, check their support and community forums. If the support forums have not been updated in a while and have very few people posting on it, then the company might not be doing so well and may provide lackluster service. If, however, the forums are lively and very up-to-date, then the company likely has a large customer base and is working to support them.
  • Be honest with yourself about what services you want, how much storage space you’ll need, etc. I bought about 2 GB of storage space back in 2004 for withinmyworld.org, even though at the time I was only running one site–I knew that I wanted to expand my repertoire later on. However, if I’d only wanted to focus on one site for a while, I might have gone with less storage space.

Where to Find Good Web Hosting

Aside from checking CNet Reviews of Web Hosting Services, here are links to several hosting companies and people who are nice enough to host others:

Highly Recommended by Many Fellow Webdesigners/Developers

Bubble.nu
SurpassHosting (personally hosted here since 2004 and have had a great experience!)
DreamHost
HostGator

Well-Regarded in the Webdesign Community

LunarPages
ASmallOrange
FrozenWebHost
DotEasy
Site5

Awesome Webdesigners/Developers Who Host

Fenali.net
RainAWhile.net
Shinshoku.net
Soul-Savior.org
IceGlow.net

Other Worthwhile Hosts

Jumpline
LaughingSquid.us
Gossimer
1and1
InMotionHosting

Your Site’s First Impression: Its Domain Name

Have a great site, but no one’s visiting? Strangely enough, it might be your domain name itself that’s turning people off.

A great domain name is like a confident smile and a welcoming handshake–it greets visitors for you and gives them an idea of what your site’s about. If yours is lackluster, you might get some visits, but not a whole lot, even if your content is great.

To help you choose a domain name, whether for the first time or the fiftieth time, I have written the following article. Read on for tips and even a few hacks to get just the right domain name for your site!

The Shorter and More Descriptive Your URL, the Better

“www.robinstotallyawesomeonlinebookstore.com” is going to get significantly less visits than, say, “www.robinsbooks.com”, simply because the latter URL is easier to remember and easier to type.

If at all possible, choose the shortest and yet most descriptive domain name available. This way, you’ll get more return visits and word-of-mouth spreading, plus more people will be willing to type in the domain name manually (and be more willing to link to you, too!).

Not convinced you need a shorter domain name? Look at it this way: who would type in Facebook’s URL manually (or even remember it well) if the URL was “www.findallyourfriendsandstalkthem.com”? (No matter how fitting that domain name might be…LOL)

You May Not Need a .Com

Unless you’re selling stuff actively on your site, a .com domain suffix is not entirely necessary. It’s great if you can find a .com you like, but chances are that the .com name you like is probably taken already, given how many people use the Internet these days. Finding a domain suffix that is just as fitting will work well for you if you find yourself in this situation.

In fact, matching your domain suffix to your site’s purpose can be even more informative for your visitors (and can help to make or break your site’s first impression). See the following list for details on popular domain suffixes:

What Domain Suffixes Mean for Visitors

  • “.com”: Possibly a commerce site, can also be a basic informational or interactive internet site
  • “.net”: A little internet hub, likely run by one person or a small group of people
  • “.org”: Either a small personal site, a non-profit organization, or a slightly educational site
  • “.biz”: Possibly a good business site, but more likely to be shadier and more ad-ridden than a “.com” site
  • “.info”: 99% possibility of being A) a virus-laden site; B) a site with fake downloads resulting in a spyware infection; C) full of copied or robot-generated content that makes no sense
  • “.edu”: a genuine school’s website
  • “.mobi”: a site designed mainly for mobile devices, which will look strange on full monitors
  • “.nu”: Like “.net”, but “cooler” and for more experienced personal site owners (also way more expensive)
  • “.tv”: A real TV show’s official website
  • “.me”: Even more personal than a “.net” or “.org,” and even “cooler” than a “.nu”
  • “.xxx”: Eek, I’m on the company computer, I shouldn’t be on this! (kidding)

See a complete list of all domain suffixes here @ ComputerHope.com.

Wordplay Works in Your Favor

If you can, include clever wordplay in your domain name to make it memorable. Silly as it might seem, this can really boost your image in users’ minds, as well as make your site a lot easier to return to. Alliteration, rhyming, puns, word combos, and even domain hacks (you’ll see what I mean) can give your domain just the right amount of oomph.

Alliteration

For instance, you can include some or all words beginning with the same letter (alliteration) in your domain name. This can make your site easier to remember because it includes a lot of the same letter or words beginning with the same letter.

Some examples:

Also, implied alliteration works for sites like ReadWriteWeb (the implied repeated “r” sound).

Assonance and Rhyming

Assonance and rhyming (similar vowel and consonant sounds across a word or phrase) also sound and look nice to website visitors. Domain names like lookbook.nu and desiretoinspire.net are more memorable because they use these tricks. Not only do these sites sound more pleasant to the ear, they also sound more legitimate and well-kept–like someone actually cares about running them.

Puns and Word Combinations

You can also have a little fun with your domain name’s actual words, while still making it descriptive of your site’s content. Puns are awesome for this, as well as combining words together to make a shorter yet still descriptive URL. Including humor or a tongue-in-cheek joke as part of your domain name can work magic–we humans always remember things better with humor. Some examples:

Using the Domain Suffix as Part of the Word

Though Delicious has long since dropped the “del.icio.us” domain name, it was still an awesome way to get a shorter domain name without losing any of the site name. This is called a domain hack, at least according to Wikipedia.

Examples of domain hacks include TheDailyWh.at, Instagr.am, Youtu.be, and Scrumptio.us, among many, many others. Use of country-specific domain suffixes is almost necessary when trying to construct a domain hack; you also want to pick an unusual word that defines your site without being too campy.

These wordplay tricks are all clever ways to both get your audience’s attention and get across the meaning of your site as well. After all, isn’t that what a domain name is about?

P.S. Numbers in your domain name can be too cutesy, but for sites like decor8, it shortens the domain name right up without being too kiddy. All the same, use numbers in your name with caution!

Make Sure Your Desired Name Doesn’t Have Shady Ties in the Past

The best way to check about a particular domain name, once you’ve settled on one that you want, is to run it through Whois.sc‘s lookup. This will get you a good bit of information on what kind of site owned your desired name in the past.

Why is this a good idea? Well, for instance, you want to make sure your desired name doesn’t have ties to pornography and other such activity–domain names like “whitehouse.com” and even “jesuschrist.com” have been tied to porn sites in the past. You don’t want to get hold of your dream domain name only to find out that people are avoiding it because it used to be a VERY different site.

If you have to, pay for a complete history of the domain name before you buy it–paying a little now can save you headaches in the future!

Where to Buy Domain Names?

GoDaddy.com (I’ve been personally registered with them since 2004 and have had good service)
NameCheap.com
Register.com
Domains.org
Name.com
DynoNames.com

Know of any other good domain registrars? Tell me in the comments!

Your Page is Being Frequented by (Internet) Robots

Though many of us webdesigners and developers don’t realize it, many of our page hits come from robots, usually known as Web crawlers or “bots”, which index our pages for various search engines and the like.

Bots like these are (generally) harmless, and indeed we designers should be glad for the innocuous presence of anything that helps our pages get better known. According to this article, they can help validate links and HTML, and they can monitor changes in your web page so that search results which turn up your site are as updated as possible.

You do, however, have to be watchful for those few malicious bots, according to this site about web robot abuse, that look to harvest email addresses and other sensitive information for spam attacks; some bots might even be programmed to take down your server with specialized attacks.

To help you design and develop pages with bots and their indexing habits in mind, I have written the following short guide with plenty of sources to find more information. How you want to handle bots on your page depends entirely on how you view them. For example:

If You Don’t Mind Bots at All…

…then you don’t really have to do anything about your webpages. Just keep designing and coding as you have been, and bots will happily index and keep up with all your pages on your site(s).

I personally don’t mind them coming to my site–anything that helps my pages show up in Google Search is a happy thing. But lately, since I’ve been using my domain as a source for a bit of personal storage as well as officially published projects (losing data will make you paranoid), I’ve found myself thinking of how to keep bots out of certain folders. Thus, the section below:

If You’d Like to Keep Bots Out of Certain Folders…

This is where the humble robots.txt file comes into play. This file, usually kept in the top level of your site’s directory, is a list of instructions for robots to follow while visiting your site–most importantly, used to disallow access to certain files and folders that you’d rather not have indexed.

So, for instance, if I wanted to keep bots out of a folder called “mine”, I’d write this little tidbit in my own robots.txt file:

User-agent: *
Disallow: /mine/

(The “User-agent: *” bit tells every robot that visits, “This applies to you, so listen carefully.”)

If, however, I wanted to disallow access to two folders, “mine” and “yours”, I’d need to write my robots.txt file this way:

User-agent: *
Disallow: /mine/
Disallow: /yours/

For everything you want to keep bots out of, you have to write a specific Disallow line. Kind of like keeping kids out of the various cabinets in your house–if you don’t tell them specifically they can’t get into it…well… LOL

And just like some kids deliberately disobey your pleas to keep out of certain drawers and cabinets, there are some bots who will ignore your robots.txt file completely. The only way to be completely sure a bot isn’t indexing your stuff is to take it off your site…sad.

Even more awesomely in-depth information about the robots.txt file can be found at RobotsTxt.org (very well-explained and detailed!).

If You Just Want Bots to Keep Out Altogether…

Of course, if you’ve had a bad experience with phishing and spamming bots, you might just want them all to buzz off. For this, such tags as the following have been invented (courtesy of this page):

<meta name=”robots” content=”noindex,nofollow”>

Put this meta tag in the header of your page, and it’s a virtual “Keep Out” sign for bots everywhere. Only do this, however, if you’re sure you don’t want anything on your site to be indexed, not even by the “good” bots.

Summary

Bots are an often-forgotten portion of web development, but with all the various search engines (and spammers, unfortunately) out there on the big ole Internet, we developers have to at least take them into consideration. I hope you’ve gained some insight on how to either welcome bots to portions of your sites, or how to keep them out!

Learn More about All Sorts of Web Bots

InternetOfficer.com has a complete list of web robots for your perusal, so if you check your web stats and see a number of hits from several strange names, you can check this list and see if a bot’s been visiting you.

Creating and Maintaining a Fan Site

For web designers and developers who are fascinated with particular topics, fan sites are the reason they make websites. I am one such designer, who learned how to design and code websites so that I could make a place to talk about one of my favorite TV shows (and nine years later, here I am! :D).

But what does it take to make a GOOD fansite? Anybody can collect together a few pictures and a few pages of content copied from other sites, but how do you make a fansite that others enjoy, too?

#1: Content, Content, Content

If you want to run a fansite, be it about seahorses or the Harry Potter series, you need to make sure you have a good bit of accurate content about the subject.

For instance, if you’re running a fansite about seahorses, you’d want to have information about where they live, what varieties there are, how they live and breed, what they eat, etc. You’d also want high-quality pictures of seahorses in their natural environments, and maybe some charts and diagrams of various life cycle information. Remember, other seahorse fans would be coming to visit, so you want to provide them with as wide a swath of info as possible.

If you’re making a site about the Harry Potter book series, on the other hand, you’d likely want to have synopses of all 7 books, info about all 8 movies, and lists and descriptions of all the characters. Screencaptures from the various movies, scans of the book covers, and even some samples of music from the series would also be big draws for fans coming to see your site.

As I know from the various fansites I’ve run throughout the years, gathering content can be a challenge, but it’s worth it if you make your site a true repository of information. Then fans know to come to you when they want news, which is admittedly an ego boost as well as a raison d’etre.

#2: Make Sure It Stays Updated

But having a lot of accurate content is not the only challenge to making a fansite; you also have to make sure it stays current. What good is a Harry Potter fansite that stops updating with The Prisoner of Azkaban? Not very, to most current fans. When you make a site, make certain your information is not only accurate, but that it stays accurate with the passage of time.

To stay updated, you need to stay immersed in the culture surrounding the subject. Stay on forums and check official subject-matter sites often; as soon as you find out new information, reference it on your own page so others can know what’s going on.

On my City of Heroes fansite, for instance, I have to make sure my help articles stay updated with all the new game features and developments. And if I can’t keep it updated myself, I’ve got to make sure I link to official sites who are keeping things updated, so my readers can find the info they want quickly and easily. Remember, as a fansite owner, you’re not only making a place for you, but for others, too–you have a responsibility to your users to make information easy to obtain and understand!

#3: Have Original Content Not Found Anywhere Else

Too often, I’ve seen fansites that could be photocopies of each other on the Internet–the same exact page structure, the same exact content. With subject-matter fansites, it’s easy to fall into the “cookie-cutter trap” when you’re trying to make sure you have a lot of information and it’s all accurate. You want to make sure your site is “complete” with lots of info, but if your info could be found just as easily on another page, who’s going to bother visiting yours?

To combat this, I often include personally-written essays on the subject matter, like my Creative Gaming Advice column on my gaming site. Either that, or I’ll include graphics I’ve made representing the subject matter, or even devise a few humorous lyric parodies a la Weird Al to round out my content. No matter what kind of fansite I’m running, I NEED ways to make my content original, ways to share my unique perspective on various issues. I have to find my “niche,” in other words.

Whenever you’re making a fansite, you’ve GOT to include something that no one else on the Internet is going to have–that special something that will define your “niche” for you. If you don’t, your site is going to fade into the background of sameness…and no webmaster wants that.

#4: Link to Official Sites and Affiliate with Other Fansites

A fansite is, in my opinion, simply never complete without a link list to official sites and other fansites. It’s also not complete without some affiliations between fansites, just to help drive traffic. Even though your sites may be about the same thing, it doesn’t mean that you’re in competition with other people–form an alliance, and you may likely have an Internet buddy for life. On all of my fansites, past and present, I have always enjoyed providing the most comprehensive link list I can put together, for my own reference as well as the greater knowledge of others.

Providing links to official sites helps your users greatly while they search for information, and similarly giving links to other great fansites you know of can make everyone in your network happy. You’re all working toward the same purpose–disseminating info to other fans–and you all have a deep interest in the same topic. Why not join forces and help each other get Internet traffic? Who knows, you might just end up being a big enough network that the official site recognizes you all!

Summary

Fansites are fun ways to exercise one’s web creativity, and when done well, they can establish thriving online communities and great conversation. Try building your own fansite, about whatever you love–you might just find yourself at the head of a new wave of interest in the topic!

Do I Still Need to Worry about META Tags?

“META tags? Huh? What are those?” you might ask. The following are examples:

<meta name=”description” content=”An awesomely succinct description here”>
<meta name=”keywords” content=”Hi, I’m a useless tag!”>
<meta name=”author” content=”Your name here, if you’re not afraid of identity theft”>
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8 (but who uses this, anyway?)”>
Many thanks to W3Schools.com for this code sample. (The comments in the content blanks are all my own opinions, though. LOL)

For most modern web designers, the esoteric meta tag fell just a little bit before our time. Tucked away in the head section of our HTML documents, these little snippets of code, like talismans, were supposed to help search engines find and index our sites, and therefore supposed to help potential visitors find us a lot more easily.

But these days, meta tags don’t quite function that way anymore. Most modern browsers don’t pay much attention to them, and neither do many search engines. So, the question remains: Are they worth even including in our webpages anymore?

The Verdict: Sorta-Kinda

Meta tags have not lost all their effectiveness, according to this article at SearchEngineWatch.com. Some search engines still do pay attention to them. But just making detailed meta tags is not the be-all and end-all SEO strategy it used to be. Nowadays, it’s far better to combine a selective use of meta tags with other strategies, like blogrolls, affiliate programs, content keywording, topsites listings, ad programs, and the like.

Meta Description: Think Twitter-Length

For your description, write a short, one- or two-sentence summary of your site, and leave it at that. No need for long-winded, essay-question-esque responses! (Ha, I need this advice more than anybody, LOL.) Since the content in meta description tags may or may not all be picked up by a search engine (depending on character limits per individual search engine), you want to make sure the content in the tag is as short and sweet as possible.

Meta Keywords: “Meh”

The meta “keywords” tag used to be of all importance, and you used to stuff it full of all the keywords you thought people would search for and find your site with. These days…don’t bother even typing in <meta name=”keywords”> into your code.

Why? It’s vastly easier on you (and more intuitive for modern search engines) if you just use the keywords a whole lot in the text of your website. For instance, if your site is about beaded jewelry, use “beaded” and “jewelry” a lot in your content. Search engines will still find you, and maybe find you a lot more easily than they would if your site’s content had very few actual usages of your ideal search terms.

Meta Author and Meta Content-Type: Don’t Bother

I’ve never known either of these tags to make much of a difference in search engines or browsers either one. (In fact, it may be dangerous for you to put your real name in such a prominent place in your source code.) Plus, the content-type, while it may have mattered in the past for older browsers, likely doesn’t matter as much anymore with more modern browsers being used. My advice: don’t worry about either of these.

Use Your Title Tag As Well!

Don’t forget your <title> tag! Though it’s not a true meta tag, it will remind your users of what site they’re looking at when they look through their browser tabs. Also, many search engines search your title tags first, even before they search your content, so it’s well worth writing at least something between <title> and </title>.

Make it short and descriptive, like your meta description tag, and you’ll be well on your way to having a site that people actually visit. (Y’know, why we spend hours before a screen typing and clicking, blinking our bloodshot eyes in a vain attempt for rest? LOL)

Summary

META tags aren’t something to lose sleep over anymore, but some of them might be helpful supplements to your other SEO strategies for making your site known. Simply craft a meta description, spiff up your title tag with appropriate text, and you’ll be set in terms of META tags.

10 Ways to Make Your Page Look Professional

Last week, I discussed 10 “newbie” web design mistakes, and even showed you a page full of those mistakes, as cringe-worthy as they were.

Well, this week, to balance that out…I’m going to show you 10 simple ways to spiff up your page and make it look just a little better. These are all simple tricks that give your page just that little bit of extra detail, like a shined shoe or a little bit of jewelry for an outfit. Read on, and see what tricks you might be able to add to your webdesigning bag!

#1: Use Gradients and Shadows for Page Dimension

Any time you can add a little bit of 3-D to your page, especially if it’s an important page element like navigation or content, do so. Soft gradients, especially as a background, give a page a colorful backdrop without being distracting, and small shadows help a page element like a menu or content block “pop” off the page. (It also looks more modern.)


Fokal.com
The black-to-gray vertical gradient on the logo and navigation buttons, plus the dark gray-to-light gray gradient in the lower half (content section) gives just enough contrast without being too distracting.

HairStylesDesign.com
The “Popular Galleries” balloon has a slight drop shadow under it, bringing the page element just that much farther forward into 3D.


CollegeFashion
The logo has a glossy look over the text, painting a slight gradient effect over each letter; also, the navigation below the logo has a very slight gradient. (Not to mention the shadows behind the logo’s letters!)


WhoWhatWear
The bottoms of the logo letters, as well as the tops of the navigation’s letters, have a slight shadow effect that make the page sleek.

#2: Use Georgia Font

According to the New York Times, Georgia font is the preferred serif font for web designers–I personally like it for its soft and yet readable look. (It especially looks gorgeous at larger sizes and in italics…but maybe that’s just me. :D)

#3: Choose Colors that Go Together Well or Set Each Other Off Beautifully

Color scheme is one of the more important facets of your web design. If you’ve got a nicely-organized page, but the colors clash, your users’ eyes will not thank you. However, if the colors blend well or provide a touch of lovely contrast, you’ll have a much better user interface overall.


Freshome.com
Using little hints of the full rainbow in Freshome’s design makes it truly a “fresh” design, especially with white and gray to ground it all.


YouLookFab
The bright teal green of the striped shirt used as a background image, paired with crisp white and black (and a little soft gray), render a page that is attractive without being eye-dazzling.

#4: Blend Your Header with the Rest of Your Page

Gone are the days of a completely useless header image that has nothing to do with the way the rest of the page is designed. *…glances up toward my own blog header sheepishly*

Ahem! Pay no attention to that. Headers are now valid places to put navigation and other site information, so you don’t have to fill them with images if you don’t want to. See the examples below:


Unkno.com
Over at Unnecessary Knowledge, the header and the navigation are literally on the same horizontal lines with each other–just at opposite vertical edges of the page. This allows the focus to fall naturally on the content rather than the “frame” (the layout) of the site.


DesignShuffle.com
With a logo and navigation that don’t take up a lot of visual room, more space is left “above the fold” for content–always a good idea for content-rich sites, if you can pull it off.

#5: Employ Different Fonts for Highlighting Content

No need to go font-raving crazy, but using slightly different fonts in various contexts on your page can make your design be that much more interesting. I usually provide a simple contrast between sans-serif body text and serif headings, but the sites below do even more than that.


InteriorDesign
Let’s see, I count…4 different fonts just in this sample (logo, navigation, colorful headlines, caption text). Each one doesn’t compete with the others, but rather plays off them, accenting each bit of content. There’s a good blend of sans-serif and serif in this example, as well.


DesignReviver
DesignReviver’s site uses 3 different fonts–one for big headlines, one for body text, and one for small side headlines (right side of the page), which helps the user know which content is newest and which posts they also might be interested in.

#6: Make Your Links Interactive when Hovered Over

As of probably 2005, users began expecting interactive links, and the way we webdesigners can make that happen has changed some over the ensuing years. From simple a:hover states to Flash animations, designers have literally tried it all–now, the trend seems to be “simple and lovely” rather than “complex and crazy.” After all, what you’re trying to show the user is that they’re hovering over something they can click on; these sites below do a good job of that.


Freshome
Not only a page of lovely colors, but a sleek, animated navigation as well, making it obvious which category a user is hovering over. It’s not too flashy or over-the-top, but provides just the right amount of interactivity for a navbar.


Webmonkey
Though there are few category links in this navigation, hovering over them provides you an instant look at the articles in the category, which helps a user get to what they need faster.

#7: Specify Rounded Corners for Divs and Other Page Elements

At least for me, rounded corners instantly make a page look better–it’s like putting dress clothes on your site. It looks a little more polished and updated than square corners. (Not all browsers accept the “border-radius” rule yet, but you can use images to get around that.)


MakeupGeek
The rounded corners in both the page border (top left) and the navigation bar make this page a little softer and sleeker than it would be if they had gone with default square corners.

HomePortfolio
Though it’s very, very subtle, the rounded corner that divides the white content div from the gray background shows the designer’s attention to detail, and brings the page into the 21st century, as surely as if they’d switched from Times New Roman to…well, anything else.

#8: Design Sleek Icons and Simple but Beautiful Graphics

Thankfully, we don’t have to be detail-oriented artists to make beautiful graphics for our pages anymore–in this age of app icons that are more simple and to-the-point, our site graphics can be just as straightforward and iconic. In fact, that might make our pages even easier to use and navigate; for certain, they look a lot better than busy icons of the past!


Apartment Therapy
Site logos don’t need to make a recognizable shape to befit a site–in this case, the simple, waving orange line transmits a sense of playfulness and innovation just as much as a more complicated logo could, and in less time.


Appstorm
Not only are different types of content noted by different (big) icons, but even the sidebar has a few icons to make navigation easier. The icons are not multicolored or overly detailed either; they’re just basic white shapes or letters, with a solid-color background in a rounded shape. And the site’s logo is a simple lightning bolt–perfect for a site with “storm” in the name.

#9: Include a Little (or a Lot of) Texture

Texture is something I’ve always had a hard time incorporating in my page, because I can never find a texture that I’m really happy with. Yet I know that texture on a webpage gives your background, site headings, links, and even content blocks just a little bit more visual interest, like the examples below:


DesiretoInspire
The textured dark gray background, as well as the roughed-up edging along the top of the page and the uneven “paint” job on the logo, gives the site a literal “rough-around-the-edges” quality…it’s not too perfect and primped, yet it’s still forward-thinking in design. Great for a design site!


InsideFashion Blog
A grungy-textured background in darker colors, contrasted with a lighter-but-still-crumpled header and content div, make this page look like an underground newsletter of sorts, as if it’s truly out of the back pocket of a fashion insider…which is likely exactly what they were going for. 🙂

#10: Align Your Layout in the Center

Nope, not talking about centered TEXT; that was last week. *shudder* But centered layouts are so much the norm in design these days that left-aligned layouts are almost extinct. Users have come to expect a center-aligned page because it’s easier to view, especially on wider-screen monitors. That’s why it’s important to employ this mode of layout design for professional pages–it’s just easier to use!


Keep Designing
Strong contrast between background and content divs make this center-aligned layout easy to understand and draws the user’s eye straight to content.


HerCampus
Here, the background and the content blend a little more, but there’s still a good delineation between what’s decorative background and what’s real content. The user doesn’t have to look all over the page to try to find links and news.

Summary

Adding a little polish to your page may not be confined to these 10 tips, but certainly these design concepts fit into a more professional look. Try one or more of these out in your next design, and see the magic at work!