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:

Exterior Signage

Inspired by pizza tossing videos, we created a logo of layered amorphic shapes (or what we more lovingly refer to as dough balls.) The organic feel of the exterior signage provides a nice contrast to the geometric treatment of the facade.

Interior Wall Graphics

We “exploded” the logo into individual dough balls, each with its own icon and descriptor to distinguish different areas of the restaurant. Since we drew the icons ourselves, we saved our client money on royalty fees!

Restroom Explorations

Our biggest and most unexpected challenge were the restrooms. Defining an entire gender by one symbol was a political minefield neither we nor our client were prepared to navigate. We eventually opted for a fanciful application of toilet paper (see above).

Happy Client

“Andrew and Chelsea worked tirelessly to help create a unique identity that contributed to the overall design and experience of the project. Their creativity and easygoing nature allowed for many fresh ideas to emerge, establishing a dynamic synergy between the architecture and graphic work.”

-Anthony Piermarini Principle, Studio Luz Architects

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.

Summary:

Sketches

Dianne’s wish list for the logo included clean, modern, and different. As for the feel, she wanted it to convey the school as a sanctuary for creativity. Taking Dianne’s objectives into consideration, we began sketching some ideas.

Prototypes

We developed our favorite sketches into conceptual “families,” each of which explored similar characteristics. We used these initial prototypes to narrow down our options, ultimately making the final choice and refining it to everyone’s satisfaction.

Business Cards

We designed collateral (with multiple backgrounds) highlighting the partnership between logo and artwork. The negative space in “school” allows the background to peak through, making the students’ creations integral to the implementation of the identity.

Happy Client

“Deelux helped us reinvent our office image allowing us to showcase our architectural designs across multiple platforms including a web browser, iPhone and iPad. Andrew and Chelsea were always 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, Ethelind Coblin Architect

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?

1. Consultation

We meet with you in person, over the phone, or through video chat to discuss the scope and design goals of your project. Over the course of our conversation, we get a feel for you, your organization, and its values.

2. Proposal

We condense what we learned in our consultation into a proposal, which is a comprehensive document outlining project goals, possible design solutions, and specific steps to achieve success. We also address fees, deliverables, and timeline.

3. Contract

After the terms of the proposal are approved, we attach our standard contract creating a complete agreement for your review. Work begins as soon as we receive a signed copy and deposit. View a sample contract.

4. Research

It’s helpful to explore “the field” before we begin work on your project in earnest. We gather relevant examples to establish standard practices, and then we decide how much or how little you want you want to stick to those standards.

5. Brainstorming & Sketching

We put pencil to paper (or marker to white board) to quickly tease out potential design directions. Don’t expect us to share all of these with you though; some are so dreadful we’d never let them see the light of day!

6. Prototyping

Prototyping is a fancy way of saying “testing an idea or concept.” For a print project, it means we use software such as Adobe Illustrator to polish our sketches. If we’re designing a website, it means we create usable, clickable mockups.

7. Presentation & Refinement

We present a selection of prototypes for your review, and together we decide what’s working and what’s not. Eventually, we nail down a frontrunner that we continue to refine until everyone is happy with the final product.

8. Delivery

Time to celebrate! If there are any bugs or problems after we’ve completed our work, we’ll take care of them. On the other hand, if you want to expand the scope of the original project, we will gladly quote you a new price.

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