In This Chapter
Considering good design
Making your app pretty
Integrating design into your Web app
Once you have built a Twitter application, the next step is convincing people to use it. An app with compelling functionality that fills a need goes a long way in attracting and retaining users, but there is another issue besides functionality that you must consider: form. Just how people form first impressions of others based on looks, people will form a first impression of your application based on its looks. All things being equal, if two sites perform the same functionality, a more attractive design may be the deciding factor for users. To stay competitive, you need your app to look good.
Even more important than first impressions and building a more competitive product, a beautifully designed application gives your app credibility. It gives the user the impression that your app is here to stay and that you're serious about supporting your application. A cobbled together design gives the user the impression that you may have built the app on your lunch break and aren't serious about maintaining the application for the long haul. If your application requires the user's trust, such as asking for payment, login credentials, or OAuth authorization, you need your application to appear credible. This chapter explains how to do that.
Note
Although this chapter's slant on design is primarily toward Web applications, the general principles in this chapter are applicable to desktop and mobile applications as well.
If you're a stud Web designer, you can skip this section. However, if you don't make your living doing Web design, I strongly recommend hiring a professional designer to design your application. It may seem like a decadent expenditure for an application with little to no upfront capital, but the gain in credibility is worth the expense. Remember, you aren't Coca-Cola, so it isn't necessary to spend a fortune on a design agency, but hiring a modestly priced freelance designer will go a long way for the aesthetics of your application.
How much to spend on design is up to you. To get an idea of what it costs to have your app professionally designed, try comparing several project bids. You can post your gig to Craigslist (http://craigslist.org), Elance (http://elance.com), or even to your Twitter stream. You should take time to review each candidate's portfolio and select a designer whose aesthetics you like.
Tip
If hiring a designer is financially not feasible, do your best to make your application pretty and user-friendly on your own, and release it to the public anyway. You can revisit the app design later.
If you're creating your own site design, keep it simple and try to focus on making the functionality the centerpiece:
Design is usually done in Adobe Photoshop or a similar creative application. The files Photoshop creates are PSD files and need to be converted into HTML to be useable on the Web. There is no good way to do this automatically. You must mark up the design in HTML yourself.
When marking up the HTML of your design, strive to adhere to W3C standards; code in XHTML 1.0 Strict, using table-less CSS markup; and arrange your page as semantically as possible.
Having this type of clean markup will make it easy to integrate the HTML into your app. It will also help with search engine optimization (SEO), as I cover in detail in Chapter 18.
Tip
If you're looking to contract out your PSD to HTML markup work, there is an excellent service that I use often called "PSD to HTML" (http://psd2html.com). It isn't an automated file conversion system. Human developers painstakingly mark up your HTML by hand. They have a fast turnaround time, produce quality HTML, and are very affordable.
To integrate your design's HTML into your application, you need to break it up into multiple files of smaller functional pieces, such as header, navigation, and footer. Then you include those files in your site's layout.
In Chapter 12 you created a file named layout.phtml (found in your /application/layouts/ directory). This file, shown in Listing 13-1, is the basic HTML layout for the Twooshes Web site.
Example 13.1. Twooshes layout.phtml
<?php echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php echo $this->HeadMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo
$this->headLink()->prependStylesheet($this->baseUrl().'/css/site.css'), ?>
</head>
<body>
<div id="content">
<?php echo $this->layout()->content; ?>
</div>
</body>
</html>The layout contains all the common elements found across all your Web site pages. This prevents you from having to include the same HTML markup on every single page in your app, and is a step in reducing markup redundancy. However, you arn'tlimited to one layout. Your application may have numerous layouts. For example, Friend Or Follow (http://friendorfollow.com) uses two different layouts: a front page and an interior page. Figure 13-1 shows Friend Or Follow's front page on the left and interior page on the right.
Even though there are two separate layouts for Friend Or Follow, both layouts still share common HTML markup elements, such as
Nonvisible Meta data in the HTML header
Logo
Footer
Nonvisible JavaScript code used for analytics tracking at the bottom of the HTML
Tip
To avoid duplicating similar markup in your projects, you can break up your HTML into many external files and reference those files in each layout file. Listing 13-2 adds four external file references to the original Twooshes layout.phtml file:
htmlHead.phtmlheader.phtmlfooter.phtmltracking.phtml
However, you can create as many external file references as you need.
Example 13.2. Twooshes layout.phtml with references to other files
<?php echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php echo $this->HeadMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo$this->headLink()->prependStylesheet($this->baseUrl().'/css/site.css'), ?>
<?= $this->render('htmlHead.phtml') ?>
</head>
<body>
<?= $this->render(header.phtml') ?>
<div id="content">
<?php echo $this->layout()->content; ?>
</div>
<?= $this->render('footer.phtml') ?>
<?= $this->render('tracking.phtml') ?>
</body>
</html>Now that your HTML is designed into functional sections, you can reuse the same markup across multiple layouts.
The example in this section shows how to split up and reuse HTML markup using the Zend Framework. However, this method of breaking up HTML markup into multiple files and referencing those files is prevalent across Web development frameworks. Even if you aren't using a framework, you can achieve the same effect from inside standard HTML files with
Server Side Includes (SSI), like this:
<!--#include virtual="filename.html" -->
Note
Your Web server must have SSI enabled for Server Side Includes to work.
PHP includes, like this:
<?php include("filename.html"); ?>