Nora Brown Design's Client Blog - Article

Your website is not just a bunch of files

Nora Brown — Sun, 20 Mar 2011 16:01:24 GMT

Recently, a client whose site I built a few years ago moved from one hosting plan to another. They moved all their files from the old host to their new one, but when their old hosting account closed, were dismayed to see this cryptic message:

Database Unavailable

and no evidence of their former website.

I received a puzzled and slightly panicky email from them. It was clear to me that the files that run their site were not successfully connecting to the database containing their site’s data. Through correspondence with them, I soon realized why: they had not moved the database to the new host!

Most websites aren’t just a bunch of files

I wrote a blog post a while back about what a website is made of. While it accurately describes the “front-end” of a database (in other words everything that actually shows up in your browser window), it doesn’t tell the whole story. The majority of modern websites run on some kind of content management system, or CMS. There are an enormous number of content management systems of varying complexity, but one thing most have in common is they use both static files and a database to store information for your website. In most cases, the database contains all the content for your site, such as text and images.

A content management system makes many things possible that wouldn’t be with just a bunch of static HTML files. Two of the most important are:

It allows clients to add to and update their site content with no knowledge of HTML or any of the underlying technologies of their site.
It allows for the use of templates, which means information (like blog posts) can be presented in a consistent way, and structural changes to pages can be made fairly easily in one place

Don’t forget your database

The moral of the story is, whether you’re creating a backup of your site or moving it to a new host — don’t forget your database!

Tracking Events with Google Analytics

Nora Brown — Mon, 14 Mar 2011 18:43:29 GMT

Google Analytics (GA) generally tracks “pageviews”. That is, when someone visits a page on your website, GA records that information and you can view it in your account. However, there are many things you might wish to track that don’t actually involve viewing a separate page on your site. This certainly applies to fancy AJAX-enabled web applications, but even on an average informational website there are examples. Let’s look at a few.

Things you can track Google Analytics

Downloads

If you offer files for download — perhaps your CV, a whitepaper, e-book, or even just your vcard, you might want to know how many times people have downloaded them. If you’re using a CMS such as Textpattern, you may be able to view such stats. But it might be nice also to have all your stats in one place — Google Analytics.

Tracking file downloads as events with Google Analytics

Email links

If you have a link on your site which a visitor can click to send you an email, this doesn’t generate a new pageview, but is something you might want to track.

Outbound links

It’s easy to discover where people are coming from in GA, but you might also be interested in where they are going from your site. If users are leaving your site via outbound (aka external) links, you can track this with GA.

Forms

If you have a form on your site that you want users to complete, you’ll probably know when they have done so (for example, if it’s a contact form, you’ll receive their submitted information). However, it might be useful to know if people start to fill out the form, and then give up for some reason. This is also possible with GA.

How to track these things with GA

All this tracking is accomplished with the help of Google Analytics’ event tracking. It involves adding a bit of javascript to each page, for each item you want to track. The code can be added to “onclick” handlers on each relevant element, or for a tidier approach, can be added with JQuery. Check out some of the links below for more info, or get in touch if you’re interested in adding event tracking to your website.

Your website is your company's online face

Nora Brown — Fri, 11 Mar 2011 18:30:47 GMT

While listening to a web design podcast recently, I heard an interesting snippet in an interview with Jared Spool. The interview was actually about calls to action, but in one of his answers, Jared said:

It is truly about the entire experience, and…you know, people don’t segment out the website use from other interactions.

This struck me as something that should be obvious, but sometimes is overlooked in the development of a company’s website. It is why some websites are almost depressingly bad. Restaurant sites are a great example (and if you haven’t already, check out this hilarious mockery of them), because the business exists firmly in the tangible world, but it’s also so important for them to have an online presence. That online presence should not be a separate entity that shares few characteristics with the brick-and-mortar establishment. It should be as inseparable from the physical space as a face is from a person.

The contrast stands out easily for restaurants, but the principle holds true for anyone trying to communicate information about themselves or their company’s services online. The same way you can’t carry a scowl on your face and expect people to think you’re cheerful, you can’t have a frustrating, out-of-date website and expect people to think your business is successful and well-run.

I posted recently about your website’s personality. I think the idea still holds, but perhaps needs amending: You’re website’s personality should appeal to your target audience, but it should do so because it’s a natural extension of your (or your business’s) personality.

Calls to action throughout your website

Nora Brown — Tue, 08 Mar 2011 00:11:24 GMT

I wrote about calls to action in reference to an advertising campaign’s landing page. A recent issue of my favorite web design podcast, however, pointed out that there are, or should be, calls to action peppered throughout your site. Some are less obvious than others, and some are there as much for users as they are for your website’s bottom line.

What is a call to action?

A call to action is simply something on a web page that motivates or encourages a user to do something. Obvious example include a button to subscribe to an RSS feed, or download a file. More subtle examples include lists of “related posts” on a blog, or a “next” button on a slideshow.

As I mentioned, some calls to action are clearly meant to fulfill business objectives — such as getting a user to purchase a product, or submit a contact form. Others simply help a user navigate through a site. For example, a visitor to your website should never face a dead-end, so a call to action can point a user where to go or what to do next.

What makes an effective call to action?

Make it obvious. Don’t bury an important call to action down in your website’s footer in tiny print. Make it bigger, give it a prominent place, and use other visual cues.
Use “active” language. Not necessarily commands (nobody likes a bossy website!) but, for example instead of “RSS feed”, you could say “Subscribe to our RSS feed.”
Make it personal. A contact form submit button, for example, could say “Send us your question” rather than just “Send” or “Submit”
Offer a carrot. Maybe someone signing up for your newsletter gets a freebie of some kind.
Make it easy. Don’t require someone who wants to send you a question tell you their life story and physical address. Keep the barriers to completing the action low.
Remove risk. This could be something like a “money-back guarantee” for an e-commerce site, or on a blog, a simple statement that a commenter’s email is never published or shared.

Review your site

Browse through your own website with these “call to action” principles in mind. Note where you have calls to action and if they could be improved, or where they are missing altogether.

How to apply visual changes with Textile

Nora Brown — Fri, 04 Mar 2011 17:49:47 GMT

My favorite content management system, Textpattern which I use for my client sites, uses the markup shorthand “Textile”. I think the best thing about Textile is that it encourages the semantic markup of content, whereas “WYSIWYG” editors encourage superficial, visual changes. For example, a heading should be marked up as a heading, for example, rather than just a large red paragraph and masquerading as a heading.

However, there are times when you just need a paragraph to be centered or indented a bit for whatever reason. Textile provides solutions for that as well.

Using Textile to apply visual formatting

For a complete list of what can be accomplished, see the textile reference manual. I’ll highlight a few of the most useful features here:

Alignment

You can use <, >, and = symbols to change alignment. For example, to right-align a paragraph:

p>. This paragraph will align to the right.

This paragraph will align to the right.

Or, to center a heading:

h3=. This level-3 heading is centered.

This level-3 heading is centered.

Padding

If you just need to indent a paragraph or two (and “blockquote” — bq., isn’t appropriate) you can change the padding. For example:

p(. This paragraph has 1em of padding on the left.

This paragraph has 1em of padding on the left.

p(()). This paragraph has 2em's of padding on both sides.

This paragraph has 2 em’s of padding on both sides. And it must be quit a bit longer to be able to discern that.

Color

If necessary, you can change the color of a block of text or phrase.

The %{color:blue}blue room% is nice.

The blue room is nice.

p{color:#008C99}. I use the color #008C99 on this website.

I use the color #008C99 on this website.

Conclusion

You can use these hints to add visual interest to your articles or blog posts. Remember that they shouldn’t be a replacement for semantic markup, and keep in mind legibility for your users.