Chelsea and I recently designed and developed Vintage or Instagram, a cute little game that tests your ability to distinguish between photos actually taken in the 70′s and 80′s and those altered by the Instagram app to appear vintage. The gameplay mechanics (switching between photos, evaluating answers, keeping track of scores) is done with Javascript and jQuery. We decided to use WordPress to manage the photographs and other content.

The problem

Just before we were ready to launch the site, Chelsea suggested that we should be tracking users’ scores. On the face of it, this is a simple idea. The problem is that we need PHP to store the users’ scores to WordPress’s mySQL database. How is this a problem? When you access a page from its web server, the PHP executes on the server first, the site is passed to your browser, which renders the page from the HTML/CSS and runs the Javascript. Since our gameplay mechanics are executed on the browser (they’re Javascript), we can’t access PHP functions needed to store the scores because they’ve long since executed.

Here’s the windup…

How do we get the score from Javascript in the browser to the PHP on the server? AJAX, of course! If you don’t know, AJAX is an acronym for Asynchronous JavaScript and XML. AJAX is able to send and receive from a web server in the “background” of a page, without the user noticing. In this case, we will use AJAX to send a value (the score) from Javascript back to the web server, load a page, and execute a PHP function that saves the score as a meta value on WordPress page.

…and the pitch!

The AJAX setup is dead simple with jQuery:

JQuery makes everything so easy, right? Let’s break this down. First, url calls the page we’ll set up that contains the PHP functions we need to store the score. Next, I’ve set cache to false, because the user might be playing our game multiple times, and I want to store the user’s latest score. Type: 'POST', indicates that data should be sent to the server rather than recieved. Finally, data is the data (duh) we’re going to pass to the loaded page, in this case, the variable scorePercent.

Bases loaded: put that data to use

Once we’ve passed the data from the browser-side Javascript back to the server with AJAX, we can load a PHP page to process the data and store it away in our WordPress tables. I decided to write the scores to custom field values in a dedicated page in my WordPress setup using the update_post_meta() function. This function resides on a page template which is assigned to our dedicated page in the backend (I got this idea from Venetian programmer Emanuele Feronato). Here’s the entirety of the page template:

Not much to it, but let’s break it down.

$score = $_POST['score'] pulls the data passed through AJAX and stores it as a new PHP variable $score. We’re going to store the scores on the page as running totals, with one custom field for each possible score 0%, 20%, 40%, 60%, 80%, or 100% (there are only 5 questions in our game). Since we want the score to be recorded as a running total, we’ll first need to pull the current value for the user’s score with the get_post_meta() function. The first parameter is the ID of the storage page, the second is the custom field key we are going to access. I’ve set up the custom field keys as “score_0,” “score_20″, etc., so 'score_' . $score will construct the appropriate key based on the user’s score.

We have the old score, now we need to increase that value by one and then update the custom field value. Get_post_meta() returns an array, so isolate the first value, add one, and assign it to $new_score (you’ll notice in the code above that I’m also updating the total as we go).

Finally, we need to replace the old custom field value with the new one we just made with update_post_meta(). The first parameter is the id of the page with the custom fields, the second is the custom field key we want to update, and the last one is the new value for that key ($new_score). Done with the code!

Bring it all home

Back when we were setting up the AJAX, you’ll remember that I defined a url parameter. Once you’ve uploaded the Ajax page template we just created to our theme folder, log in to your WordPress backend, create a new page called “results,” and set the page template to “AJAX.” The last thing to do is set up the proper custom fields (score_0 through score_100) and assign them each a value of 0.

To review, the process I’ve laid out here is meant to move a value from Javascript executed by the browser to a WordPress PHP file on your web server via AJAX, and then store that value in a custom field. Now, I am not an expert by any stretch on anything I’ve detailed here. Do you have improvements to suggest on my methods, dear reader?

Summary:

Browser

While the site must appeal to the casual visitor, it’s primary use is as a portable portfolio for traveling employees. To ensure equally-satisfying user experiences, the browser version called for a minimal interface with buttons and images as navigational elements.

iPad

The biggest challenge in designing sites for mobile devices is creating simple and intuitive navigation; that’s why our content is touch screen and keyboard accessible. Images are full-screen for maximum impact, and supplemental information is easy to reveal.

iPhone

The iPhone version is of course the most simplified layout. Content is edited and navigation is simple to use on a small screen. This version acts as a prelude: providing the user with enough compelling information to encourage further exploration on a larger device.

Happy Client

“Deelux helped us reinvent our office image allowing us to showcase our designs across multiple platforms. Andrew and Chelsea were quick to create solutions to fit our needs, making the design process flow smoothly. They exceeded our expectations in creating a professional website that we are proud of.”

-Ethelind Coblin & Jennifer Judge Principles

Summary:

One-Page Website

We chose a one-page layout for RAB’s website because it is innately simple, easy to use, and all-inclusive. Its goal is two-fold: direct the user to their desired content quickly, while attracting their attention to information they might not have noticed otherwise.

Pamphlet

As many of RAB’s participants have limited to no internet access, we felt it necessary to design a compact pamphlet that basically functions as a pocket-sized version of the website. We utilized an accordion fold to create a finished piece measuring 5.5″ by 4.25.”

Cycling Map

We wanted to put something useful and compelling on the opposite side of the pamphlet to encourage people to hold onto it. Since there is little documentation on how to get to our state’s scenic bike paths, we made a nifty map highlighting their entrances.

Happy Client

“Deelux completely revamped our organization’s look and boosted our confidence in the public eye. It started with the redesign of our website; and from that the inspiration for our pamphlets and city map took shape. Their knack for visual quality has become the framework of our story here at Recycle-A-Bike.”

-Jenna Johns-Yu Development Director

Textual Challenges

URLs must be crafted with a limited character set; the most vexing of this is the lack of a method for making a word break (spaces and underscores, among others, are not allowed). If you are a new business or organization and you expect your website to be a crucial driver of activity, you would consider URL limitations when choosing your business name. Of course, we’re not saying that you should name your business widgets123.com, but by the same token you don’t want to find out too late that www.widgets.com is taken.

Your URL also factors into your SEO results. We’ve written before that outsiders don’t really know how Google’s search algorithms factor a site’s page rank, but it is generally agreed that keyword repetition is a key feature of SEO success. What’s more, SEO experts suggest that your important keywords should repeat on a variety of levels of your site’s markup: starting with the URL, down to the page title, the meta description, and your content hierarchy.

Limited Inventory

A survey in 2007 found there were over 108 million websites, so anyone who has set out to register a new domain will know that their first choice is usually unavailable. Fortunately, there’s a convenient tool to help you find a domain name: Domai.nr. Type a name into the search box and Domai.nr will not only suggest interesting URL options, but it will also check to see if that domain is available. For example, if you type “stinky cats” into Domai.nr’s search bar, it will not only suggest stinkycats.com (unavailable) but stinkycats.org (available), then more clever combinations of subdomains, top-level domains (TLD), and directories, such as stinky.ca/ts (available) or stin.ky/cats (also available) or st.in/kycats (alas, unavailable).  Creating a URL like this is known as a “domain hack.”

Extensions

Domai.nr will offer you some interesting suggestions, many of which (such as Domai.nr itself) rely on a country-code top-level domain (ccTLD) extension for its novelty. Unlike .com, which is a generic top-level domain, ccTLDs are two-letter extensions that are placed in trust for countries, sovereign states, or dependent territories by the Internet Assigned Numbers Authority (or IANA, the organization that oversees domain names, IP address, and other internet address-type stuff).

Sometimes, you must be a citizen of the country to use a ccTLD, but in most cases this is not so. Most typically, small countries with desirable ccTLDs can make some extra bank: Tuvalu, a Pacific micronation, sells .tv (as in tnt.tv), while the British Indian Ocean Territory controls the hot .io extension (like drop.io, or our client groupvisual.io).  You can find a list of common ccTLDs courtesy of Wikipedia.

So, what does your TLD say?

Top-level domains carry reputations, which can be a product of a variety of factors, such as cost (cheaper TLDs attract cheaper sites), ubiquity, and the quality and type of sites that are choosing that TLD. I’ve hit on a few above, but I’ll go into some more detail:

The Good

• .com: The most generic and common TLD: the white bread of TLDs. You can’t go wrong here, though it may be difficult to find the exact URL you want.
• .org: Are you a non-profit? This is the domain for you. Even though you are not strictly required to be a non-profit to use the .org TLD, it does confer some legitimacy to your URL (in fact, those in the know think that Google ranks incoming links from .org and .edu sites higher than others).
• .edu: To get this TLD, you MUST be an accredited post-secondary institution in the United States. So much for ClownUniversity.edu.
• .io: Recently popularized by sites such as drop.io, this ccTLD will help your URL fit in with the cool kids.
• .us: Only borderline cheesy, maybe just old school…del.icio.us was perhaps the first mainstream domain hack (now that it’s owned by Yahoo, it goes by the more prosaic delicious.com).
• .tv, .fm, and .am: Generally used by TV stations, FM radio (or internet radio stations, like last.fm), and AM radio stations
• .me: Has a growing popularity for personal websites (the slogan is “.me is about YOU!”). We have the independence of Montenegro in 2006 to thank for this ccTLD. A notable domain hack was the website for the film Despicable Me: you guessed it, despicable.me.
• .is: Iceland’s ccTLD is good to pair with a directory (such as jessicahische.is/awesome, or jessicahische.is/adumbass)

The Bad

• .net: Originally intended for networking organizations and companies, this restriction was never enforced. Now .net URLs have a vague “techno” air about them, but in my mind it feels more like an aging 1990′s-type of techno…

The Ugly

• .info, and .biz: This may be a personal bias, but in general .info and .biz tend to be cheap URLs to obtain and maintain, and if you ask me do not present your URL in the best light.

In the spirit of not needing to reinvent the wheel, I’ve taken a quick survey of the 10 most popular blogs, according to Technorati. For each blog, I’ve noted several CSS properties that work together to influence the site’s readability. Of course, no one’s saying these are the most readable, or the most aesthetically pleasing (I’m looking at you, TMZ), but because they attract a very wide readership they serve as a useful baseline.

1. Huffington Post

2. TechCrunch

3. Mashable

4. Engadget

5. BoingBoing

6. TMZ

7. The Daily Beast

8. ThinkProgress

9. Hot Air

10. Gizmodo

Bonus: Deelux

Conclusions

Three measures interest me the most, because together I think they make the most impact on readability: width, font-size, and line-height. On average, the column width among these blogs is 585.3 px (there is no such thing as a fraction of a pixel, but we’re talking averages, so deal with it). The average font-size is 13 px and the line-height is 19.1 px.

These three factors don’t individually create a readable layout: they function as parts of a whole. With that in mind, I’m not sure that an average is the best way to encapsulate the data set. What about median (the middle value of the data set)? For width the median is 585 px, for font-size it’s 13 px, and for line-height it’s 18.5 px. The width is in line with what I expected, however I’m surprised that the average and median font-sizes are so small (I expected at least 14 px), especially with only about 5 px of leading. Perhaps what’s needed is some kind of algorithm that compresses all the CSS properties influencing readability into a concise “Readability Index…”

I’m also surprised that a wide majority of the fonts are sans-serif (7 of 10). Half of the four tech blogs (the most-represented genre) are set in Georgia, which is generally agreed to be a very readable (but not necessarily “high-tech”) font.

I also find it strange that, with the exception of BoingBoing, every blog that includes Arial in its font-family stack calls it before Helvetica! Arguably, Helvetica is a better typeface than Arial, and since Helvetica comes installed on all Apple computers (as does Arial), it should be called first in the stack. As it is now, Mac OS readers of the Huffington Post will never see the site in Helvetica (althogh iOS users will). Is this because the developers of these sites use a PC, or at least have a PC-centric approach to their markup?

Google doesn’t reveal the exact parameters collected and processed by its famous algorithm and its web-crawling “robots” (the automated programs that access websites to catalog them for Google); to do so would tip its multibillion dollar hand. SEO experts do have a few sources to go on. For instance, Google publishes a guide to SEO for webmasters.  (The words of Google engineers are analyzed like the congressional testimonies of Alan Greenspan.)  Others have attempted to reverse engineer Google’s algorithm themselves. That aside, Google engineer Matt Cutts told the New York Times for a recent article about The Huffington Post, “One piece of advice I give to S.E.O. masters is, don’t chase after Google’s algorithm, chase after your best interpretation of what users want, because that’s what Google’s chasing after.”

So then, SEO is pretty simple: make a site that’s great for people, and Google will reward you. That sounds awfully zen, and I think the truth is a little more complicated. For instance, Google says they’re trying to hone their algorithm to think like a person, but in reality, the algorithm is thinking how Google engineers think people think.

What does that mean for you? Though I don’t pretend to be an SEO expert, I’ve read through some SEO advice and source material, and I think there are some fundamental tenants:

1. Content. Your content should be well-structured. From the very beginning, we ask our clients to create content that is hierarchical and well-organized. It’s a good idea to start from an outline and work from there.
2. Keywords. When developing content, make a list of keywords that fit your organization and/or content. Use these keywords on all levels of your structural outline.
3. Links. Every page of your site should have a link out. It’s not necessarily true that the more links on your page, the better (there’s a risk that Google will think your page is spam and lower its ranking). Also, and perhaps more crucially, you need to get other sites to link to you, especially high-quality sites. Google puts special weight on .edu and .org sites that link to yours.
4. No dirty tricks. Stay away from so-called “black hat” techniques…like loading your page with irrelevant keywords, creating multiple sites with duplicate content, using affiliate programs to populate links, and so forth.

If you’re interested in learning about SEO in greater detail, the team at SEOmoz has put together a (long) Beginner’s Guide to SEO. I haven’t read the whole thing, but at least it has some nice illustrations!

Print Campaign

Through signage we encouraged visitors to post their own photos of the event to Flickr. They were so compelling that we created a slideshow on the website showcasing great moments at the heart, including 4 proposals, 6 birthdays, and 1 Quinceañera!

Interactive Site

To complement the communal and fun-loving spirit of the heart, we designed a website based around a love letter floating over Times Square. With the click of a button, the letter can be hidden to view a full-screen slideshow.

Social Engagement

An intense promotional campaign was required to encourage visitors and volunteer participation, so we utilized Twitter, Facebook, and Flickr to build an enthusiastic following resulting in over 3,000 visitors in two weeks. [Wedding photo by Mark Weiss]

Happy Client

“Great design, which we knew we would get from Andrew and Chelsea, is the easy part of any project. The hard part is delivering content on time and on budget. We had web, social media, and print components that had to be considered, crafted, and deployed, and Deelux proved itself at every turn.”

-John Hartmann Partner at Freecell

One important point in Illustrator’s column was overlooked: the simulation of CSS3 effects such as box-shadow and border-radius. As CSS3 is rapidly adopted, a growing palate of graphic elements can be generated by the browser, streamlining websites that previously would have needed rasterized graphics to achieve the same results. When I use Illustrator for web design, I ask the software to function as a kind of CSS3 simulator in many cases, expecting to replace certain effects achieved in the program with code in my stylesheet.

Take drop shadows, for instance. Illustrator has a drop shadow effect under Effect > Stylize > Drop Shadow. When I apply this effect to a box in my layout, I know that I will eventually use CSS3′s box-shadow property. This affects how I use the drop shadow effect. In this case, I’ll set the blending mode to “normal” (there are no blending modes in CSS3), the shadow color to #000000, then use the transparency and blur to adjust the quality of the shadow. When I move to styling this box with CSS, I’ve already established all the parameters of the box-shadow property:

Viola, Illustrator has become my CSS3 box-shadow simulator. This theory can be applied to other CSS3 properties, such as text-shadow and border-radius.

Little tweaks

We needed to correct a few outstanding issues to make the client area totally off the hook:

1. Rebrand the WordPress login screen with the Deelux logo.
2. Redirect users to the client site itself, rather than to their user profile page in the admin area (WordPress’s default action when the “login” button is pressed).
3. Add a personalized greeting for the client at the top of the page.

These are quick little fixes, let’s tackle them one by one…

Rebranding the login screen

Because WordPress is open-sourced and widely used, it is fairly easy to find “how-to” resources. I’m not a genius programmer by any means, so I rely on what others have published all the time. This trick for replacing the WordPress logo on the login page with our own was found in the WordPress.org support forums. The technique requires us to place the following code in the theme’s functions.php file:

The WordPress action login_head allows us to add markup to the <head> section of the login page. We could call an additional external stylesheet for the login, but since we just want to replace the logo, I choose to put the CSS in the header and avoid the additional HTTP request. The logo image should be 320px wide (the height will vary, of course) and should be located in the theme’s image folder.

There are also plugins that accomplish this task, but I like to avoid plugins when I can do the work myself.

Redirect users

With some additional code in the functions.php file, we can redirect users to the client area once they’ve logged in, instead of the user profile page in the admin section (this one thanks to Brad Williams):

Personalized greeting

Once your client is logged in, wouldn’t it be nice if the site said hello to them using their name? In the header.php I wrote the following markup and PHP:

…which I adapted from example code in the wonderful WordPress codex. The loop above first checks to see if the user is logged in, and if he or she is, returns an array of the user’s information. It extracts the user’s first name from the array, and then displays it along with “Hey there.” If the user is not logged in, it displays, “Hey there stranger!”

That’s just about it! Check out the other parts of this little tutorial, which we used along with a custom theme to make a client area with WordPress. With so many people using the WordPress platform, figuring out how to set up the software to perform a new function can be done with the help of the thousands who are kind enough to write about their own work and experiments.