Website Curb Appeal

Curb Appeal is a term borrowed from the Real Estate industry that describes the instant impression that a buyer gets when pulling up to a house on the market. A good impression can cause someone to fall in love with a house before they’ve seen the inside. A bad impression might cause them to drive away without even stopping. Curb appeal can manifest itself the same way on your website, when a first-time visitor lands on your website and decides if it’s the right place or not. This article will discuss five things you can do to increase your website’s curb appeal.

Fresh and Relevant Content
Nothing kills curb appeal like a stagnant website. If someone arrives on your home page and the newest article is more than a few days old, they are already subconsciously downranking your website. I’m not suggesting that you publish content just for content’s sake. Useless content can have the same effect as obsolete content. What you might do is brainstorm some ideas and then rough out a schedule that returning visitors can become familiar with. They’ll come to know that you update at some regular interval and start to visit based on that.

Active Forums & Comments
It’s a viral effect, when a reader sees new comments, they are more prone to comment. It may be a cheap trick, but while your site is freshly launched, you would do well to aggressively solicit comments from friends, family and professional associates in the right circles.

Desired Content Up Featured Up Front
If you are a retailer, that means your top products. Your newest, best or most popular items – the items that most people are there to find – should be given special priority on your site. If you run a blog, it means new or popular articles displayed front and center, with an easy way to find articles that someone might reference.

A Design That Communicates Effectively
A user’s perception of your site is influenced by the design, but not wholly based upon it. A nice aesthetic may help communicate, but a sloppy design might also get in the way of your content. Keep in mind that almost nobody truly cares about the design of your site. People want the content.

Validation of Your Position as The Expert
im a expertIf you want to be perceived as the expert, you’re going to have to do your part to grab that title and hold on to it. Although your site needs to stand on its own merits, a savvy marketing will also encourage growth and acceptance by promoting their site where applicable. Try going after some of these things as ways to establish yourself or your site as a leader:

  • Positive reviews from users and customers
  • Professional endorsements from market or industry peers
  • Client list, featured here or success stories
  • Guest authors, co-contributors and 3rd party content displayed on your site
  • Good press from 3rd party sources – “voted #1 tech site by webmonkey” etc
  • Award and Citation graphics

Three Stages of A Website

designing interactionsRecently, while reading a section of the book Designing Interactions, I was intrigued by the description that technology goes through three stages, each of which serves a specific purpose and is fueled by different factors. The kernel of a good idea is brought into reality, evangelized by early adopters and eventually refined and monetized for the general public. This part of the book described the three stages a little like this:

  1. Enthusiast: Propelled by researchers and hobbyists. May be difficult or awkward to use.
  2. Professional: Monetized and adopted by companies who saw its value. May still be klunky, but performs a desired task.
  3. Consumer: Now it’s not about the technology, but what it can do

As interesting as it is to consider how products such as cell phones or computers moved out of geek circles and into everyday use, I find it even more fascinating to see how this spawned a similar but different process for online applications and property. What’s similar is that there are still three stages, and they occupy a similar space. What’s different and interesting, is how the online medium has swapped the 2nd and 3rd steps creating a process that’s optimized for updated consumers and businesses.

The Enthusiast Stage
A website in the Enthusiast Stage may be difficult to use, poorly designed or slow to respond, having been constructed by someone who had a good idea but isn’t an interactive designer. That’s OK, because usability and design problems don’t matter to the inspired group of early adopters who value, above all else, what this new toy can do or how it’s done. What’s more is that this five percent nation comprised of tech zealots and netophiles becomes an evangelizing force that’s often instrumental in propelling a good idea out of the basement and into the blue skies of great solutions.

You’ll notice that adept marketers such as Apple really lean on the Enthusiasts, encouraging and utilizing them to give their demographic a creative energy that draws even more people. As business owners refine their Enthusiast Site or application, the Enthusiast Army provides frequent and often times brutally honest feedback – all while spreading viral awareness that eCommerce markets covet much.

Many sites, like many small businesses, never make it out of this stage. Walled in by steep growth requirements, the good idea cannot get out. But some do …

The Consumer Stage
The Consumer Stage is like the Enthusiast Stage, in that it is a means to an end. Many sites are now monetizing their service at this time, but still list the ever present “beta!” mark near their logo. Websites in this stage have started to take off, and are drawing a much larger audience, perhaps getting coverage on popular sites that don’t cater to purely geek circles. In some cases, the site or application might still be awkward, but if the accounts are free, users are generally willing to put up with it.

This is a critical time when things begin to snowball rapidly. Brought under the unforgiving glare of consumers with varied tech-comfort levels and hardware capabilities, some good ideas are weeded out at this stage. Often times the team doesn’t respond quickly to fix technical blocks such as server speed issues, glaring website UI roadblocks or unwelcome product features. Too often, product managers and business owners become emotionally invested in some future vision of their product, refusing to change even when overwhelming customer data is begging for attention.

The Consumer Stage is a time of naked honesty, pushing for success at all cost. The added users, larger net presence and likely revenue stream are not just requirements to move on, they are the very tools used to do so. The number of truly successful sites is pared down yet again, in a way that would warm Charles Darwin’s heart.

The Professional Stage
B2B-website-developmentThis is it. This is money. This is the big leagues. Websites in the Professional Stage have been cleaned up and successfully marketed to the world at large. Ideally, they have also developed B2B relationships, capturing customers from related markets and platforms. Data garnered from an endless tide of users and customers can be used to drive truly effective change, and sales volume can soar into truly astonishing numbers.

Now, the path narrows again, and a few more websites slip off the precarious edge. With all this success, you also get a slew of extra problems. The easiest ones to deal with are hardware, software and UI concerns. The solutions for them are quantified, and in all honesty, easily implemented. Out of disk space from storing images? Archive what you can and buy more space. Legacy site architecture can’t handle a trillion users? Hire a team and get it upgraded.

Like WW2 U-boats, the less tangible dangers are the true killers. Often times they lurk around until you’ve crossed some kind of boundary, a theoretical point of no return. Oops, you just alienated your enthusiast crowd with some random product feature change. For every fiscal quarter henceforth, your sales will soften. Oops, you designed a product that is a one-time sale to a diminishing market. Where’s your parachute? Uh oh, some business process or application architecture is going to cost so much to change that it might as well literally bet set in stone, taunting you from your manager’s office.

But What’s The Point?
The point is easy to understand, difficult to master. For a website to be successful on an undeniable level – for it to permeate the forebrain of global pop culture – it has to evolve away from any vestigial trappings that the creators may have envisioned. Like evolved technology, websites become successful because of what they can do for you. A customer or user might enjoy some animations, but what they want is your product. A person’s experience can be enhanced by design, fun can be increased by process, but ultimately a successful website has two qualities that can be summed up in one sentence.

“It’s easy to get what I want”

Fold an Origami Logo in Photoshop

Logo’s following an Origami style have been popular due to the fact that you can get an impressive effect with a few strategic “folds”. Impressed with the ones I’ve seen I decided to create my own: a green origami bird for the imaginary Origami Corporation.

In this tutorial I’ll show you the process I took to design this logo, and in the end you’ll have your own version and the knowledge to make more. Our final product will look like the image below, so when you’re ready fire up Photoshop and we’ll get started.

Step 1 – Setting The Document Up

First begin by creating a new document in Photoshop, the canvas size should be 540 by 400 pixels. We’re going to have a dark background so get your gradient tool ready and set the two colors to be a light black (#3e3e3e) and a dark gray (#565656). Set the gradient to radial and then drag it from the center of the canvas to the left edge.

Step 2 – Sketching and Planning

The tricky part of creating an origami logo is that you have to carefully plan out the folds; folds that don’t seem plausible can break your design. What I recommend doing is browsing sites like Flickr and look at some real origami. By studying real origami you may notice a few things, for example the shapes we’re limited to are triangles, diamonds and squares. With this and some other things you may have noted in mind begin sketching the bird shape below.

I used a small white brush (3px and 100% hardness) to draw this out. A good technique to get the straight edges we need is to hold shift in between clicks with our brush. This will give you a straight line from your first click to your second click. When you’re done turn the sketch’s layer opacity down to 20%.

Step 3 – Creating the Midsection

At this point I chose a 3 color palette to use on the logo, a base color, a lighter version of the base color and a darker version. You can see my palette to the right which uses a light green (#d9f679), green (#cbe86b) and a dark green (#b3ce5a).

Begin making the origami bird’s midsection by using your Pen Tool (P) to trace it out from the sketch. Change the color to your base color (#cbe86b) and it should look like the image below:

Duplicate the shape layer you just made and change the color to a lighter color (#d9f679). This layer will be our first fold in the logo which will go across the neck. Select this layer with your pen tool and delete the anchor points illustrated below:

step3_c

RollOver

Step 4 – Making Wings

For our first wing, which will be in front and above the rest of the layers, ready your Pen Tool (P) and set the color to our base color (#cbe86b). Then just simply trace your wing, remember that the bottom two anchors in your triangle should be touching the chest of the bird.

To make the second wing, duplicate (CTRL+J) our first wing layer and change the color to the darkest (#b3ce5a) in our palette. Then grab the anchor point at the top of the triangle and drag it up and backwards. After that place the layer behind the other layers.

Read more

Flying With Mozilla Jetpack

We’re going to be working with Mozilla’s Jetpack today to create a slick color palette add-on using the Colourlover’s API. For those of you who don’t know, Jetpack is one of Mozilla’s newer lab experiments that allows web developers to use their pre-existing knowledge about building websites to create Firefox add-ons. So if you’re comfortable with CSS and jQuery Jetpack will be a breeze to learn! To read more about Jetpack explore the Jetpack homepage.

The add-on we’ll be building today is going to be a color palette generator that will rest in a slide bar on the left side of our browser. The color palette generator will create as many new palettes as we want by requesting them at random from the Colourlovers api, and when we like a specific color we can simply click it and Jetpack will copy the hex value to our clipboard for use in a style sheet or in Photoshop.

To see the completed project view the video below, and when you’re ready we’ll be going through the following steps to create the same add-on:

  1. First is to wireframe and style the add-on with HTML and CSS
  2. Second we’ll script with jQuery to add the interaction and make requests to the Colourlovers API.

Before We Begin…

To create this add-on you’re going to need the latest version of Firefox, version 3.5 or above. Also you’ll need to download the actual Jetpack add-on, which can be found at the bottom of the Jetpack homepage.

Click the big black button to download Jetpack

Once you have everything setup type “about:jetpack” into your address bar to access your local Jetpack homepage. This page is where you can manage your add-ons, develop new add-ons and reference the Jetpack API. Before we begin make sure you do the Jetpack tutorial under the tutorial tab. The tutorial is simple, fun and will get you comfortable with Jetpack in no time!

1. Access your Jetpack page by typing ‘about:jetpack’ in your address bar 2. The develop tab is where you’ll create your add-ons 3. The tutorial tab provides a quick tutorial to get you comfortable with Jetpack 4. Go to the API reference to learn more about what Jetpack can do

Adding HTML & CSS

Let’s begin by fleshing out the add-on so when it comes time to script it, we’ll be able to see were things fit. So go into the Develop tab and write the following inside the text box:

jetpack.future.import("slideBar");

jetpack.slideBar.append({
   persist: true,
   width: 290,
   html: <></>
});

First we use jetpack.future.import() to import Jetpack’s features that are still being tested. In this case we want to use the slideBar feature which will allow our add-on to rest in a slide bar.

After that we add our slide bar by appending it with jetpack.slideBar.append(). The slideBar takes a number of arguments, in this case we set width, persist and html. Width will determine the width of the slide bar in pixels which we set to 290px. Persist, when set to true, allows for the slide bar to stay open even when the user moves away from it. Last we add an area for html. With the html section we first open and close with <> </> tags, this will allow us to write our HTML. Remember you have the Jetpack API close by your develop tab, so reference it whenever you want to learn more about a feature!

Go ahead and press try out this code to test your code out. An empty gray slide bar should be created for you. Next we’ll add some HTML and CSS to make this look more like an add-on.

The gray slide bar with no styling, it’s just waiting for the magic touch of some HTML & CSS

So let’s continue and add our HTML within the tags I mentioned, add the following in-between the html: <> and </>:

<style><![CDATA[
      body { background:#4A4A4B; font-family:Tahoma, Arial, "sans serif"; font-size:67.5%; }
      h1 { cursor:pointer; color:#FFF; padding:5px 0px; text-shadow:1px 1px 0px #343435; font-size:2em; text-align:center; }
      h1:hover { background:#393939; }
      .palette { position:relative; border-bottom:1px solid #363637; border-right:1px solid #363637; height:100px; width:250px; padding:10px; background:#FFF; }
      .color { background:#333; cursor:pointer; height:100px; width:50px; float:left; text-indent:-1000px; overflow:hidden; }
      .alert { background:#FCDD4D; border-bottom:1px solid #363637; border-right:1px solid #363637; color:#5e500d; font-size:1em; text-align:center; width:270px; margin-top:10px; padding:6px 0; }
]]></style>

<body>
  <h1>NEW PALETTE</h1>
  <div class="palette">
      <div class="color">Color</div>
      <div class="color">Color</div>
      <div class="color">Color</div>
      <div class="color">Color</div>
      <div class="color">Color</div>
   </div>
  <div class="alert">COPIED TO CLIPBOARD!</div>
</body>

The HTML looks like a standard HTML page with inline styling. If you notice though in between the <style> tags we have <![CDATA[ … ]> wrapping our style sheet. In JavaScript CDATA means character data, which basically allows us to write html as a string with multiple lines (so we don’t need to concatenate or use line-breaks).

As for the styles they’re mostly eye candy to make the add-on look similar to the Colourlovers site.

For our HTML we have a h1 tag that will serve as our button to request a new palette. We also have a .palette div which will contain the individual .color div’s. Each .color div will be a 50 by 100px block containing 1 of 5 colors from the chosen palette. Last we have our .alert box which will notify the user that the color has been copied to their clipboard.

Now click “try out this code” and you should see the makings for a pretty slick add-on.

With some CSS our add-on is beginning to take shape

Scripting The Add-On

To finish this add-on all we have to do is script it with some jQuery which is built into Jetpack. We’re going to be doing three things with jQuery: we’ll create a function to request a palette of colors from the colourlovers API, display those colors and then allow for copying the hex value to the users clipboard.

Read more

Creating A Virtual Note Wall

Today we’ll be creating a neat little app called Note Ninja, which allows for the user to tack up multicolored “sticky notes” on a virtual wall.

This app is useful to the kind of person that has dozens of little ideas or reminders they want to remember. Personally I sometimes store these reminders by writing them in a notepad file then saving them to a folder to read later (if I ever get to that). With this app I’m able to display all of my notes in a much more user-friendly way, were I can easily sort, delete and create new notes!

So before we begin let’s create a roadmap of how we’re going to go about building this app. The steps are listed below:

  1. First is to create the database to store the notes information, location and color
  2. Second we’ll wire frame the site with HTML and then style it with some CSS
  3. Third is to create the PHP backend to display all the notes already in the database and also allow for deletion, creation and updating of the notes
  4. The last step is to add some jQuery. jQuery will tie everything together with interaction and sending data to and from our PHP file.

Before We Begin…

For this tutorial I’m assuming you’re comfortable with HTML and CSS. I’m going to focus mostly on PHP and jQuery, so if you have intermediate knowledge in these two you’ll be fine. If you do get lost or confused please contact me or leave a comment and I’ll try to get you on the right track. With that let’s get started on the database!

Also I’d like to thank bittbox for the paper texture used and famfamfam for the delete icon.

Creating the Database

We’re going to create only one database called noteninja, which will contain a table named notes. The table notes will contain 5 rows, note_id, note_text, note_x, note_y and note_color.

Open up phpMyAdmin or your mySQL console and enter the following SQL:

CREATE DATABASE `noteninja`;

CREATE TABLE `notes` (
`note_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`note_text` TEXT NOT NULL,
`note_x` INT(10) NOT NULL,
`note_y` INT(10) NOT NULL,
`note_color` TEXT NOT NULL
);

Here’s an explanation of what each of these rows will contain:

  • note_id will allow us to reference specific notes with a unique number id
  • note_text will contain what the note will say
  • note_x and note_y hold the x and y position of the note
  • note_color is going to have an rgb color value for our note (I’m not using hexidecimal since a jQuery function we’ll be using won’t work with it)

Before we finish up with the database let’s create two dummy notes, this will help us test our PHP later on.

INSERT INTO `notes` (`note_id` , `note_text` , `note_x` , `note_y` , `note_color`) VALUES
(NULL , 'This is my first note!', '50', '50', 'rgb(184, 195, 178)'),
(NULL , 'This is my second note!', '150', '100', 'rgb(184, 195, 178)');

So with the first dummy note it’ll be positioned 50px from the top, 50px from the left and have a light blue color.

That’s all were going to need for our database, let’s start fleshing out the app with some HTML and CSS.

HTML & CSS

This site is going to only really have two elements, the logo, which will always be on the top left of the screen, and the individual notes which will float freely inside a containing div.
To give you a good idea of the layout the image below shows the elements used and how it’ll look once we add the CSS. The images we’ll be using are packaged inside our project file which can be found at the top of this post.

The anatomy of a note

As you can see most of the action is going to be inside the note class. The note class has two elements nested within it, the text and options class.

The text class is going to display the textual information of the note and will be visible at all times. The options class on the other hand will only be visible on hover and contains a colorlist, which will allow the user to change the note’s color, and an x button to delete the note.

Let’s get started creating the HTML wire frame. Create a new file called index.php and write the following HTML within it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Note Ninja - Most Honorable Sticky Notes</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body id="notewall">
		<img src="images/logo.png" alt="Note Ninja" />

		<div class="note" style="background:#E8BF56; top:100px; left:50px;">
			<div class="ninjastar">
				Ninja'd!
			</div>
			<span class="text">This is a test note</span>
			<textarea class="inputtext">This is a test note</textarea>

			<div class="options">
				<ul class="colorlist">
					<li class="blue">a</li>
					<li class="red">a</li>
					<li class="yellow">a</li>
				</ul>
				<div class="x">
					<img src="images/delete.png" alt="" />
				</div>
			</div>
		</div>

	</body>
</html>

First thing we do is link to the style sheet, style.css, which we’ll be creating shortly. Next we have our logo image which when we style the page will stick to the top left edge.

Inside the note div you’ll see the parts that I’ve mentioned. A span tag with the text class which will hold the note’s text, the options div that has an unordered list of colors and an image of a delete button.

What’s new though is the ninjastar and textarea class, which will make more sense once we add some jQuery. The ninjastar is going to be an image of a ninjastar that will animate when we delete a note, and the textarea is a duplication of our text but in an editable form so we can change the text easily. You can get a better idea of how these two will work by trying the demo linked at the top of this post.

You’re HTML page should look like this, a mess, until we add our style sheet

Let’s make this page look more like a proper app with some CSS. Create a new file called style.css and write the following CSS within it:

/*- General -------------------------------*/
* { padding:0px; margin:0px; }
body { background:url(images/wood.gif); }
#notewall { position:relative; }

/*- Note ----------------------------------*/
.note { width:150px; position:absolute; padding:4px; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; line-height:1.5em; }
	.note .inputtext { display:none; width:150px; border:none; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; }

.options { position:relative; display:none; margin-top:10px; }
	.colorlist { float:left; }
		.colorlist li { list-style:none; width:10px; height:10px; border:1px solid #1a1a1a; cursor:pointer; text-indent:1000%; overflow:hidden; margin:1px; display:inline-block; }
		.red { background:#B8C3B2; }
		.blue { background:#C75233; }
		.yellow { background:#E8BF56; }
	.x { float:right; cursor:pointer; padding:0px 4px; }
	.ninjastar { position:absolute; background:url(images/ninjastar.png) no-repeat; width:68px; height:116px; overflow:hidden; text-indent:1000%; z-index:2; margin-top: -40px; margin-left:55px; display:none; }

The General section resets the default styles for our page, adds the background image and makes the container have a relative position. A relative position for the container allows the nested elements within it, like the notes, to float freely.

Our Note section adds some styles to our notes, like colors, fonts and sizes. We also have our .options, .ninjastar and .inputtext set to display:none, so we don’t see them until they’re needed.

With our stylesheet in place our site is now taking shape

That’s it for our HTML and CSS, now we can make this page more dynamic with PHP!

Adding Some PHP

Were going to use php in two areas, first we’ll add a block of code into our index.php file that will loop through and display the notes already in our database. Second we’ll have a remote file, newnote.php, which will process requests to update, delete and add notes.

Read more