By Jason Lengstorf

PHP and other server-side programming languages are tricky. The manual can be tough to decipher, and there isn’t really a way to “validate” a PHP script. If you’re new to programming, you may lost and not know where to look for help. When I first started programming, I spent hours pulling my hair out, digging through manuals, and poring over books. It wasn’t until I found a great online community that I really started to get in the swing with PHP and felt like I was actually accomplishing something.

Here at Smashing Magazine, we want to help out PHP programmers who are just getting started or who want to improve their programming chops. Our goal is to support our community by answering their questions and trying to find solutions to their problems.

While Chris Coyier takes care of CSS and JavaScript-related questions, from now on me, Jason Lengstorf, will take care of your PHP- and MySQL-related questions.

Please feel free to submit your PHP/MySQL-related questions in our forum (you will need to sign up; yes, the forum is not officially launched yet, but it is running!). Or, you can just tweet me @jasonatennui with the tag “[Ask SM].” In our first installment, we’ll answer a smattering of user-submitted questions about PHP and MySQL. Posts focused on Ruby, Python, Photoshop and Illustrator are coming as well.

1. Form validation with PHP

@titel asks:

What is an easy-to-implement and reusable set of functions or small class that automates form validation with PHP?

I’ve heard good things about this form validation class, but I think it’s really better to take the time to write your own. There are tons of easy tutorials on Google to get you started; and as your needs change, you’ll probably end up tweaking the code to fit your needs.

If you’re going to be storing the validated values in a MySQL database, it would be wise to look into methods of avoiding injection attacks. There are some wonderful free libraries (mysqli and PDO, for instance) that go a long ways towards securing your Web applications by creating prepared statements that help prevent SQL injection.

2. Converting MySQL to XML

@igmuska asks:

What’s the best practice for converting MySQL to XML for using Google Maps on a PHP page?

There’s a pretty good tutorial on the Google Maps API page to get familiar with the format that you’ll need to use for the XML file, and then you’ll want to write a function or class to handle the creation of individual XML entries.

You could do something like this to generate your XML output:

while($entry = mysql_fetch_assoc($result)) {
  $xml .= <<<XML_OUTPUT
<{$entry['datatype']}>
  <point lng="{$entry['longitude']}" lat="{$entry['latitude']}" />
  <icon image="{$entry['icon']}" class="local" />
</{$entry['datatype']}>
XML_OUTPUT;
}

3. require_once()-problem

@DanBowles asks:

I performed a require_once(…) on a config file only to find I could not access the variables in the file. How come?

There’s no hard and fast answer to that question, but possible problems could be that you’re trying to access variables inside a function without declaring them as globals, or that your config file is in a format that your server isn’t configured for to parse PHP.

To make sure the PHP in the config file is being parsed, make the file output some text (i.e. echo ‘Is this thing on?’;) and see if it shows up when you require the file. If you’re trying to use variables from the config file in a function contained in the parent file, declare the variable as a global at the top of the function (i.e. global $myVar;).

4. Search in different tables?

@MikevHoenselaar asks:

What is the best way to search a website with MySQL/PHP in different tables?

To search multiple tables, start by using JOIN in your MySQL query. A great introductory article on the concept is available here. With regard to the best method of searching, that depends on the type of information you’re searching for.

If you’re looking for an exact phrase, it’s probably best to start off with a LIKE-statement, which looks for an exact word or phrase (i.e. a search of entry titles). More general queries would best be handled by a fulltext-search, which runs through a table and finds relevant entries (i.e. a site-wide search for entries related to a cetain word or phrase).

5. Getting information out of an XML-file

@korteev asks:

How can I get information out of an XML file?

RSS is an extremely useful tool for developers because it allows us to take information from one website and put it in another. It also has the benefit of allowing you to format that content fairly easily.

For PHP5, SimpleXML is a great tool that makes parsing XML feeds really easy. There’s a great article here on how to use it, as well as a resource on w3schools.com that reviews the different methods available.

After you get the hang of it, using it is pretty straightforward. For example, take this XML file:

  <?xml version="1.0"?>
  <people>
    <person>
      <name>John Doe</name>
      <age>27</age>
    </person>
    <person>
      <name>Jane Doe</name>
      <age>31</age>
    </person>
  </people>

To get information out of the file, all we have to do is this:

<?php
  $people = simplexml_load_file('people.xml');
  foreach ($people->person as $person) {
      echo "Name: {$person['name']}n";
      echo "Age: {$person['age']}n";
  }
?>

SimpleXML also supports namespaces, which is very useful when parsing Flickr’s RSS feed, for example.

Further Resources

• PHP Manual — This is my bible.
• MySQL Manual — A little harder to understand, but still incredibly useful.
• W3Schools Forum — When I get stuck, I can always count on these guys for help.

About the author

Jason Lengstorf is a 23-year-old software designer and developer based in Missoula, MT. As the owner of Ennui Design, he specializes in creating custom Web applications, ranging from simple informational websites to full-fledged content management systems. When not glued to his keyboard, he’s likely standing in line for coffee, shopping for cowboy shirts, or pretending to know something about wine.

(al)

© Jason Lengstorf for Smashing Magazine, 2009. |
Permalink |
33 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: answers, php, questions, sql

By Chris Coyier

This is our second installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. If you have a question about one of these topics, feel free to reach me (Chris Coyier) through one of these methods:

1. Send an email to ask [at] smashingmagazine [dot] com with your question.
2. Post your question in our forum. You will need to sign up (yes, the forum is not officially launched yet, but it is running!).
3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”

Please note: I will do what I can to answer questions, but I certainly won’t be able to answer them all. However, posting questions to the forum gives you the best opportunity to get help from the community.

1. Different Color for List Item Bullets

@christopherscot writes:

I wish there was an easier way to specify color on list bullets… list-style-color maybe?

Hey, Christopher. Alas, list-style-color does not exist. There are a couple of different ways you could go about it though. One way would be to wrap the content of each list item in a span, like this:

<ul>
   <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></li>
   <li><span>Aliquam tincidunt mauris eu risus.</span></li>
   <li><span>Vestibulum auctor dapibus neque.</span></li>
</ul>

Then, in your CSS:

ul {
   list-style: disc;
   color: red;
}

ul li span {
   color: black;
}

View Demo

Another way would be to remove the bullets entirely by setting list-style-type: none. Then, apply a background image to the list items, making sure to nudge the text over to make room.

ul {
   list-style: none;
}

ul li {
   background: url(images/bullet.png);
   padding-left: 20px;
}

2. Roll-Over Button

@jonfreeze writes:

How can I create a roll-over button but still be able to copy and paste text on the button?

Hey, Jon. In order to make the text copy-and-pastable, the text needs to be real Web text. But we can still create a nice roll-over effect by shifting the background image of the button on roll-over. I like creating a special toolbox CSS class for buttons. So, anytime I need to make a link look more button-like, I just apply class="button" to any link or input button.

Here is the CSS:

.button             { padding: 5px 15px; background: url(images/button-bg.png) repeat-x; color: #222;
                      border: 1px solid #ccc; font: bold 18px Helvetica; text-decoration: none; }
.button:hover       { background-position: bottom left; }

Notice that all we’re doing is shifting the background position on roll-over, not swapping it for a new image. This has the double benefit of one less server request and a smoother, quicker transition.

View Demo

3. Pixel Width Decision

Jon Schwenn writes:

I know more and more websites, especially the ones with high-quality design, are pushing wider. As I start a new project, I think about my client’s demographics and the purpose of the website. I just checked out the analytics report for one of the larger e-commerce websites that I run. There were about 1,300 visits from people whose resolution was under 1024 pixels wide. I then looked up the revenue generated from this group, and it was almost 5% of orders over the last 30 days. Is it still best practice to stick with the good ol’ 800 width? Or should I realize it’s 2009? What about the 5% of sales coming from 800×600 resolution set of computers? That’s still a decent chunk of sales to just toss aside and a decent chunk of people to annoy (and possibly lose) with a side-scrolling website.

Hey Jon, I think you already have the perfect mindset for making decisions about website width. You are looking at real analytics data of the website in question. That is exactly what you need to read to make the right call. I don’t think any business in the world would be willing to potentially lose 5% of its sales without a darn good reason. So the real question becomes: “Are there tangible benefits to designing wider than 800 pixels?” If you have cooked up a really sweet design that benefits from that extra horizontal room, that new design may just make up for that 5% and then some. But if you are widening just for the sake of widening or because of current trends, then don’t. Let the design itself guide you. If you can pull off everything you need and fit it nicely on an 800 pixel-wide monitor, do it. If you do go wider, make smart decisions about the viewable area for the 800 pixel crowd. For example, don’t put the “Add to cart” button on the far-right side, where it is liable to get cut off.

For fun though, let’s look at more general statistics, supposing we were building a new website without existing analytics data. w3schools puts out screen-resolution data for its website every January. It doesn’t include 2009, but assuming the trend continues, it sees 5% or less of visitors with 800×600 monitors. Here are some other screen-resolution data from my own analytics:

CSS-Tricks.com (audience of Web designers and computer-savvy people):

• January 2009, 800×600 – 0.33%
• June 2008, 800×600 – 1.08%
• Most popular resolution: 1280×1024

BeaconAthletics.com (e-commerce website targeting school and government workers):

• January 2009, 800×600 – 7.49%
• June 2008, 800×600 – 7.47%
• Most popular resolution: 1024×768

JewishStudies.wisc.edu (university website with audience of academics and press):

• January 2009, 800×600 – 2.07%
• June 2008, 800×600 – 4.16%
• Most popular resolution: 1024×768

My advice? If your website is e-commerce or has an older and less computer-oriented audience, design to 800px (probably a maximum width of 775px). Otherwise, you are safe going wider, but perhaps stick to something around the popular 960px.

4. Bringing up Modal Page on Page Load

Rich Staats writes:

I would like to create a simple modal box that appears on document.ready, and not on a click event. This would be the “Latest contest” message to users, and I would like to use cookies to show it only once. But if possible, I would like to have the cookie cleared when a new contest message is created. Even if cookies were cleared on the 1st of every month, we could work the contests around that.

Hey Rich, rather than re-invent the wheel with modal boxes, I went in search of a jQuery plug-in that could handle it. One of the first ones I checked out, jqModal, fits the bill nicely. Some modal box plug-ins only provide a function that you can call with certain elements, which will bring up the modal box on a click event, but this one has an additional function that allows the modal box to come up via an independent function. This is just what we need, because we aren’t waiting for a click; we want to open it after a cookie check.

Since we are already using jQuery, we might as well make it easy on ourselves and use a plug-in for the cookie work as well. This gives us some new functions that make it really easy to set and get cookies.

Turns out, we can accomplish your task pretty darn easily with these plug-ins. Here is the whole bit, including all the includes and loading jQuery itself.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.1");
</script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		var modalCookie = "modal_cookie";
		var options = { path: '/', expires: 10 };
		var shouldOpen = $.cookie(modalCookie);

		$('#dialog').jqm();
		if (shouldOpen != "no") {
			$('#dialog').jqmShow();
			$.cookie(modalCookie, 'no', options);
		};
	});
</script>

In your markup, the page element with the ID of #dialog will be used for the modal box. You can put whatever you want in there! The cookie in this example lasts only 10 days, but you can easily change the expires number in the code above. If you wanted to “clear” the cookie early, just change name of the cookie.

View Demo | Download Files

5. Tabs on the Left

Eric Rasmussen writes:

I am looking for a simple way to create tabs on the left side of a file browser, similar to the file browser in MobileMe. Here is an example of what I am am trying to accomplish.

Hey Eric, I think the ticket here is to create a two-column layout. I understand the ultimate goal is probably to have more columns than that, but I’ll get you started here with this example, and then you can take it from there.

To visually separate the columns, we’ll use color variation. Right off the bat, we run into the classic problem of making the columns equal in height. We’ll get around this by using “faux columns,” which is a classic technique of “faking” equal-height columns by wrapping both columns in another element and setting a background image on that.

Our left column is simply an unordered list, and the right is a div where we can put content. Here is the entire markup:

<!-- For centering and faux columns -->
<div id="page-wrap">

	<!-- Left Column -->
	<ul id="nav">
		<li class="current"><a href="#">Home</a></li>
		<li><a href="#">Documents</a></li>
		<li><a href="#">Pictures</a></li>
		<li><a href="#">Movies</a></li>
	</ul>

	<!-- Right Column -->
	<div id="content">
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
	</div>

</div>

Notice the class of current on the first list item. We’ll use this CSS hook to apply special styling that will visually link that tab to the right column. A slight shadow will be applied to the other tabs (via a background image) to make them look tucked under.

Here is the important CSS:

#page-wrap          { width: 500px; margin: 30px auto; border: 1px solid #999;
                      background: #eee url(images/nav-bg.png) repeat-y; overflow: auto; }

ul#nav              { list-style: none; width: 140px; float: left; padding: 10px 0 10px 10px; }
ul#nav li           { margin: 5px 0; }
ul#nav li a         { padding: 8px 3px 8px 10px; display: block; text-decoration: none;
                      font: 18px Helvetica; letter-spacing: -1px; color: #222; outline: none;
                      background: #666 url(images/nav-bg-off.png) top right repeat-y; }
ul#nav li a:hover,
ul#nav li a:active  { border-left: 3px solid #999; }

ul#nav li.current a { background: #eee; border: none; }

#content            { width: 340px; float: right; padding: 15px 0; }

View Demo | Download Files

As a bonus in the demo, I included some jQuery to dynamically swap the content and change the “current” tab as you click through the tabs. Check out the code!

(al)

© Chris Coyier for Smashing Magazine, 2009. |
Permalink |
42 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: CSS, modal, pixel width, rollover, service, smashing

By Matt Cronin

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.

Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

Please also consider our previous articles:

• CSS-Based Navigation Menus: Modern Solutions, which lists modern solutions for CSS-based navigation.
• Navigation Menus: Trends and Examples is an inspirational collection of navigation menus.

1. CSS-Based Navigation Menus

Loodo
A colorful menu that adds to the feel of the website.

Acko.net
Steven Wittens takes a look at the navigation menu from a quite unusual perspective.

Web Design Ledger
Web Design Ledger has an excellent menu; its large size is convenient but doesn’t intrude on the content.

UX Booth
UX Booth uses a a stylish text box under the navigation as a sort of subtext for each menu item.

Nopokographics
Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

Icon Designer
This website uses a large image-based menu on the home page. The user’s attention is drawn directly to this large menu, making it convenient for users.

Cosmicsoda
This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

Designsensory
An intuitive drop-down navigation that uses 2 colors effectively to communicate the active navigation item and the passive ones.

Smallstone
Smallstone, a U.S. record label, presents its navigation menu in the form of a the so-called Space Echo Roland SE-201.

TNVacation
It’s pretty hard to find a nice-looking drop-down menu. This one is a beautiful exception.

Clearleft
Clearleft uses a couple of paper pieces for its navigation.

45royale
A simple, clean and beautiful navigation with a nice hover effect.

Design Intellection
An excellent example of block navigation that shows how effectively “speaking” hover effects can be used with a clean and simple navigation menu.

Ronnypries.de
A navigation menu doesn’t have to look like a traditional navigation menu. Ronny Pries uses a floor plan to lead site visitors through the pages of the site.

Jiri Tvrdek
Jiri Tvrdek presents the navigation options of his site as leaves on a tree. Creative, unusual and memorable.

Water’s Edge Media
Patricia Abbott uses clothespins for the navigation options.

Matt Dempsey
Matt Dempsey highlights his navigation options with a brush stroke.

Cognigen
The current navigation option is pressed — clear and intuitive.

District Solutions
Vertical tabs are used very rarely. But they can look good!

Jayme Blackmon
Jayme Blackmon seems to like setting “done”-marks…

Jeff Sarmiento
Why not try a sloping navigation options once in a while?

Studioracket
A really unusual navigation menu that uses some kind of a mindmap to illustrate the navigation. And, apart from that, the navigation menu is hand-drawn!

Cultured Code
A subtle yet distinct menu that is out of the way of content. Excellent colors and a nice hover effect also add to the menu.

Nando Designer
This Portuguese designers uses handwriting and a piece of paper for its main navigation.

Bonfiremedia
Sometimes typography is just enough…

Artgeex
Vivid typography in use.

Gloobs
Some designers integrate a stamp in the contact navigation option.

South Creative
This website uses large navigation buttons and has a good hover effect.

Mac Rabbit
One more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

RapidWeaver
This menu has a clean and smooth layout, and it has a great sub-menu that uses transparency to separate it from the main menu.

DFW UPA
Icons reinforce the menu items on this website and add emphasis to each option.

Revolution Driving Tuition
This website has a great grunge style, and the menu fits right into the layout.

Duarte Pires
This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

Valetin Agachi
This navigation has a rather unique style that emphasizes selected items. Also, the menu layout stays consistent throughout the whole website.

Tutorial9
Tutorial9 recently got a nice redesign, which came with a very usable and well-organized menu.

2. CSS Menus With JavaScript

Agami Creative
Designers sometimes use tooltips for their navigation. However, tooltips and aqua are quite an unusual combination.

Whitehouse.gov
A perfect example of how one should organize huge amounts of content into clear and easily distinguishable sections. Also, excellent design of the drop-down menu.

AppStorm
AppStorm is a new website by Envato. A jQuery effect is used to create an excellent and very usable drop-down menu.

Eric Johansson
Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

Coda
This conveniently located menu has a beautiful hover effect. The sub-menus are consistent and include every item.

Dragon Interactive
Dragon Interactive has a colorful jQuery-based menu with a great effect.

Bern
I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

Abduzeedo
For its recent redesign, Abduzeedo introduced a jQuery slider into the navigation.

3. Flash-Based Menus

Iipvapi
Colorful sloping Flash-based navgation from an Indian Web design agency.

Not Forgotten: The Movie
Most entertainment websites use Flash and unusual navigation menus to capture users’ attention. On this one, an instant classic, navigation items are put on cards.

Nick Tones
Nick Tones, with a dynamic, colorful and yet still somehow usable navigation menu.

woonky.ideas
This Argentinian design agency puts CDs and books on a table, each representing a navigation option, of course. When hovered over with a mouse, each object reveals what can be found inside.

Gotmilk
The designers of this Flash-based site came up with something truly original. The navigation menu is put on a ribbon; each navigation item has a nice and simple hover-effect: when an icon is hovered, it is replaced with the site area the icon stands for. Usually tooltips are used for this puprose, here designers use a different approach. Outstanding!

Spectra Visual Newsreader
A beautiful and very colorful Flash menu that is a good example of excellent usability.

NickAD
This unique website is all about easy-to-use navigation.

Sensi Soft
This amazing portfolio has very well-thought out and convenient navigation.

4. Highly Usable Navigation

tap tap tap
This website has a beautiful layout and a menu with great effects.

Apple
Apple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu.

Alex Buga
Visitors here use a large and well-laid out slider to move through news items.

CREASENSO
The content on the home page of this portfolio website has an extremely simple yet usable organization.

polargold
This visually stunning Flash-based portfolio uses an accordion-like layout for the content, so there is no loading of new pages. The large type stresses the importance of menu items.

Colourpixel
Colourpixel has a very interesting layout for its portfolio. It combines all of its sections onto a single page, and allows each item to be hidden or revealed, as demanded by the user.

DVEIN
Yet another excellent Flash-based portfolio. This website organizes all gallery items onto an interesting revolving list.

Alexandru Cohaniuc
This portfolio is rather well known for its beautiful layout. An accordion effect allows users to navigate through projects and portfolio items.

Porsche Canada
Porsche Canada’s website has very user-friendly navigation, with many sub-items for each menu item. The convenience and usability of this menu is great.

Jeremy Levine Design
This architecture portfolio has a unique layout that allows users to easily browse the website. The line of menu items has many effects and transitions that make it very convenient.

firstborn
Firstborn, a well-known design studio, uses scrollable, horizontal navigation for its portfolio. The navigation items can also be displayed in other modes, such as thumbnails, making it even better.

Benjamin David
This portfolio has a vertical slider that automatically moves through menu items. Many large items are placed together in a single glowing menu.

Thibaud’s Portfolio
Another stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.

Jason Reed Web Design
Accordions are useful when trying to squeeze many items into a small space. Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages.

Marius Roosendaal
Another usable accordion menu that groups portfolio items.

5. Vertical Navigation Layouts

Danny Blackman
Danny Blackman’s website is often regarded as one of the better portfolios out there, in part because of the amazing vertical layout.

Tomas Pojeta
This website is yet another portfolio that uses a vertical layout to incorporate multiple pages onto one, while allowing users to move vertically between sections.

volll
Volll uses a vertical layout with a beautiful illustrated landscape background.

Mediocore
Mediocore is an awesome portfolio. It has a few more elements than usual on its pages, but still looks excellent.

6. User-Friendly Sidebar Menus

FreelanceSwitch
FreelanceSwitch organizes its articles using a great menu.

Fubiz
The redesign of Fubiz brings an excellent sidebar. Slide effects are used to fit a large amount of content into a small sidebar.

Checkout
Checkout has a stunning website. An extremely clean list-style menu in the features section also displays nice icons.

Ruby Tuesday
Ruby Tuesday has a very nice website. The sidebar menu has exceptional icons and smooth hover effects.

Concentric Studio
A simple and minimalist menu with sliding effects.

Barack Obama
President Obama’s website has a well-spaced and nicely contrasting list-style sidebar menu.

GABBO DESIGN
Another clean and well-spaced list menu.

Further Resources

You may be further interested in these articles and related resources:

• Pattern Tap Navigation Collection
  A nice collection of inspiring navigation menus.
• 13 Awesome Javascript CSS Menus
  13 useful JavaScript CSS menu resources.
• 7 Advanced CSS Menu, A Great Roundup!
  Another 7 CSS menu resources from noupe.
• 300+ jQuery, CSS, MooTools and JavaScript navigation menus
  A long list of menu resources, tutorials and downloads.

About the author

Matt Cronin is a freelance web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.

(al)

By Steven Snell

Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors.

Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors.

In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively.

1. Methods of Communication

Websites communicate with visitors in a number of different ways. Not all websites take the same approach, but almost every website will use at least a few common methods of communication. To get started, let’s first look at some of the basic ways that websites communicate with visitors before going into more depth on the subject.

1.1. Text

Text is, of course, the most obvious form of communication that takes place online. Whether the text is in the main body content of the page or a headline, most website visitors rely on text to understand the basic messages of a website. Depending on the type of the website, text may be extremely critical to communication, as in the case of blogs.

The approach taken with text will depend on the purpose of the website. For example, sales copy on an e-commerce or membership website will differ from article content on an informational website.

1.2. Images

We’ve all heard the saying “A picture is worth a thousand words.” Photos and images are excellent resources not only for creating an attractive and interesting design, but also for communication purposes. Images can often communicate a message faster, more clearly and more emphatically than text. The designer needs to be aware of the messages being communicated via images and ensure they work in harmony with the rest of the website’s communication.

Photographer Andrew Gransden has a beautiful portfolio website. Most of the screen space above the fold on the home page is taken up by a large photo that rotates randomly on page load. Andrew allows the quality photography to do the majority of the communication, rather than rely primarily on text to attract potential clients.

1.3. Titles and Headers

Whether you’re examining Web design, magazine layout, newspaper design, etc., titles and headers are critical to effective communication. Human nature is to want to know something quickly, and especially when on the Web. Titles and headers help to communicate major points and ideas to visitors, and they tell visitors what to expect from the rest of the content.

1.4. Icons

One of the reasons icons are so useful in Web design is that they communicate messages without any text being used. A visitor may see a familiar icon, such as a house that represents a link to the home page, and immediately know what the item represents and what to do.

1.5. Design Styles

The style of a website’s design may also communicate a message to visitors. Certain design styles are common in particular industries, and other styles may not be an appropriate fit for a specific type of website. The style can, in these cases, indicate to visitors something about your website and how it fits their needs. For example, a website that sells skateboards would likely feature a grunge style design. This is a style that most visitors in the target market would appreciate, and by seeing this type of style, visitors in that target market will likely feel comfortable with the website and feel an association with it. In this case, the design style helps communicate to visitors that this is where they belong and that the website was created for them.

1.6. Colors

Obviously, there is an infinite variety of colors and color schemes in Web design. Sometimes colors are chosen just based on what looks good, but other times the psychology of color comes into play. Colors not only play a large role in determining how a website looks, but also communicate messages to visitors in certain ways.

1.7. Audio and Video

While most of the Web is made up of text, audio and video have become increasingly common over the past few years as more and more Internet users are on high-speed connections. As audio and video have become increasingly common, many new opportunities have arisen for effective communication online. Designers and website owners have plenty of options in how they communicate with their visitors, and audio and video have some definite strengths that make them a tremendous method of communication.

2. Challenges of Creating a Website with Clear Communication

In order to build a website that effectively and clearly communicates with visitors, a number of challenges need to be overcome. Not all websites are the same, so challenges may differ from one website to the next, but the challenges discussed below are some of the most common.

2.1. Too Much Content

One of the biggest challenges that designers have to overcome is simply deciding on the amount of content and information to use. Of course, having a lot of quality information is a good thing, but it can also get in the way and make it difficult to communicate clearly with visitors. In many cases, websites with less content have an easier time effectively communicating a particular message to visitors because there is no excess to get in the way.

By trying to fit a lot of content onto a page, the website owner can very easily create a cluttered page that confuses visitors. Primary messages are often overpowered by the busyness of a page, and sometimes the content may even send mixed or unclear messages.

2.2. Every Visitor is Different

When developing websites, one needs to keep in mind that each visitor is unique and that it is impossible to classify all of them in the same group. Websites are designed with their target audience in mind, but even within that group of users, some diversity will still exist. These differences can have an impact on the communication of the website, because not every visitor will respond in the same way or understand the same messages.

How are visitors different? First, demographics play a role. A website is likely to attract visitors from all over the globe, and a visitor in one part of the world will differ from a visitor in another part of the world. Age and sex will also be important factors.

Beyond demographics, not every visitor will have the same purpose in visiting the website. They may be looking for different things or have different agendas on the website. Visitors will also come from a variety of sources, and visitors from one source will not always have the same characteristics as visitors from another source.

Additionally, not all of your visitors will have the same level of knowledge of the subject of your website. All of these things make each visitor unique, and they all have an impact on the communication between the website and the user.

2.3. Clarity

Communicating through a website is easy. Every website communicates in a number of different ways, even unintentionally. Communicating with clarity, on the other hand, is much more of a challenge. Because of the short amount of time that a new visitor is likely to spend on a website before leaving, there is a strong need for the website to quickly and clearly communicate.

In order for a message to be clear, there must be a clear purpose and priority of the website that is understandable to the visitor; there must not be too much noise or clutter; and the message must be communicated in a way that it can be understood by the visitor.

Blogs can sometimes be difficult for new visitors to quickly understand the purpose of. Macalicious uses a small box at the top of the page to quickly communicate the website’s purpose and background so that new visitors can immediately know something about it.

2.4. Keeping Communication Brief, But Complete

Because of the need for clarity and the benefits of communicating quickly, there are advantages to keeping messages as short and concise as possible. A brief, clear message will generally be most effective for communicating quickly online. Of course, there are exceptions to this, such as situations where in-depth articles are used to provide detailed information to visitors who are interested in such information.

Keeping a message brief and complete is a major challenge. One of the reasons taglines are so effective is that they can communicate something significant about the company or the website in a brief statement that, ideally, leaves a memorable impression on the visitor.

Shuteye uses three simple short questions at the top of its home page to help identify visitors who could benefit from its offerings. If a visitor answers “Yes” to these questions, he or she immediately has a reason to look into the report offered by Shuteye. The communication at the top of the page is brief but highly effective for filtering potential customers.

2.5. Having Personality

Online communication is unlike forms of communication that allow face-to-face interaction between two people. In online communication, the human visitor receives a message from a website, not directly from a person. However, the most effective communication generally occurs on websites that show some kind of personality in that communication. The website is a representation of the company or the person behind it, and showing that in the communication is important.

Digital Mash, the portfolio website of designer Rob Morris, shows some personality with the tagline “Hero for Hire.” While there are tons of designer portfolio websites out there, Rob’s stands out in part because this statement shows some personality.

2.6. Not Overpowering the Communication with the Design

The design and appearance of a website should be used strategically to enhance the message of the website, but it can also become an overpowering element that hinders communication. The content of the website is of primary importance, while the appearance of the website should be used to make the visit more pleasant, memorable and easier. The design of a website should not become a priority over the content, or else the website will suffer in usability.

Pixelhaven’s minimalist design allows the company’s message to take center stage, rather than compete and potentially interfere with the message.

2.7. Gaining the Trust of Visitors

Depending on your type of website or the purpose of your communication, one of the biggest challenges may be simply gaining the trust of visitors. One example would be a sales page. When a page communicates something to visitors in an attempt to convince them to buy something, there is a natural resistance to trust. Overcoming this is a major challenge.

SEO Group uses testimonials from satisfied clients at the top of its page to help build trust.

2.8. Getting and Keeping Attention

If you have an audience with a very short attention span and that is quick to close the browser or visit another website, getting and keeping its attention is a necessary prerequisite to effective communication. This also goes back to the issue of having a clear and concise message that communicates to visitors before they get confused or bored with the website. If visitors arrive at a website and cannot easily understand its purpose or what it offers them, they’re likely to move elsewhere.

3. What Should Be Communicated

When creating a website, what things should you focus on in terms of communication? Knowing what should be communicated is a key step that cannot be overlooked. While the answer to this question will vary from one website to the next, the basics are discussed below.

3.1. Purpose of the Company or Website

The most important message that must be communicated by every website is its purpose. Some visitors will likely already be familiar with the website or the company behind it, but many may not. As visitors arrive at the website, they should be able to quickly and accurately understand why the website exists and what is offered, and from this they should be able to determine if it is something that interests them.

When visitors arrive at a website that does not clearly communicate its purpose or what it does, it almost always results in a frustrating visit, which leads to a website not achieving maximum effectiveness for its owner.

AnswerJam communicates its purpose by answering the question “What is answerJam?” on the home page.

3.2. What is Offered?

In addition to simply understanding the purpose of the website, visitors should also be able to quickly learn what the company or website offers them. Of course, this will vary from one website to another. E-commerce websites need to clearly communicate to visitors the types of products that can be purchased. Service companies should clearly communicate the services that are available to visitors. Websites that are content-rich, such as blogs, should communicate to new visitors what type of content is available to visitors and subscribers.

Elegant Themes offers premium WordPress themes for an annual membership fee. The website uses a light blue box to quickly and clearly communicate the details of what is offered to visitors.

3.3. How Can Visitors Benefit?

Simply listing services or products that are available may not be enough. In most cases, the website should communicate to visitors how these products and services can specifically benefit them and why they would be better off with them.

Wipee List is a free online service that allows you to make and keep track of your own to-do list. Wipee List communicates to visitors that it can help them easily get in control of their tasks. This benefit is emphasized over the actual features of the service.

3.4. What Action Can Visitors Take?

If a website does an effective job of clearly communicating its purpose, including what is offered and how it can benefit visitors, some of those visitors will want to take action. But is it clear what type of action they should take and how they can do so? Of course, e-commerce websites should make it easy for visitors to take action by buying items. Service companies should make it clear how visitors can take the next step towards using their services. Can visitors place an order online? Should they fill out a contact form to have someone get in touch with them? Should they call the company by phone?

Only Human is a community where people can share a story to help others or post a question and ask for help from other users. The two basic actions of sharing a story and asking for advice are made very clear by simple navigation in the header that leads to these two actions.

4. Tips for Effective Communication:

Now that we’ve looked at how websites communicate with visitors, some typical challenges and what should be communicated, here are some tips that can be put into practice to help with the process of developing websites that communicate effectively.

4.1. Prioritize

The most important step to developing a website that features clear communication is prioritizing your messages and knowing exactly what should be communicated to visitors. If you’re not able to easily state the main point, purpose or message of your website, it’s unlikely that visitors will be able to understand that message accurately.

Most websites, especially larger ones, have multiple messages that are communicated throughout their pages. In these cases, it’s important to determine a priority so that the most important messages are given more prominence.

LightCMS has prioritized the simplicity and ease of use of its product. The home page, “Features” page and “Why LightCMS” page all prominently display a message that emphasizes this point.

4.2. Determine What Visitors Should Know About the Company or Website

Every company and website has something that it specifically wants visitors to learn about it. It’s critical that this is identified, otherwise it will be impossible to communicate it effectively to visitors. Ideally, the website would be used as a tool to brand the company, so the messages that are being communicated should fit the overall branding efforts and strengthen those efforts.

Checkout offers point-of-sale software for Macs. It has determined what is most important for visitors to know about the software and makes it clear with the simple statement, “Get a Mac. Start a Store.”

4.3. Keep it Simple

Communicating effectively is much easier when the messages are simple and when excess can be eliminated. Any way that online communication can be simplified (without losing anything important) will make it easier for you and your visitors. In some cases, this may mean cutting down on communicating too many different things and just focusing on the most important aspects. By reducing the amount of information that is communicated, each message or piece of information will have more of an impact.

Umbrella Today? is an outstanding example of keeping it simple. While there are plenty of options for checking the weather online, Umbrella Today is aimed at those who simply want to know if they’ll need an umbrella. Enter your zip code and you’ll get an answer.

While most websites will not be able to practically achieve this level of simplicity, it is a good example of what can be achieved when excess communication is cut out.

4.4. Keep it Relevant to Your Target Audience

Because your visitors are likely to be diverse, it’s important to consider your target market and audience when developing the website. Who is the most critical audience for your company and website? The website should be designed and developed so that it can communicate specifically with these visitors. Additional efforts can be taken to communicate with other audiences as well, but the target audience should be prioritized; and if sacrifices are made, they should be made in other areas.

FreeAgent provides online accounting for freelancers and small businesses. Its target audience is not large companies that are looking for a more complex accounting system. The customers it is targeting are not likely to be experts in accounting, and they’ll probably be interested in simplicity in an accounting system. FreeAgent effectively keeps its message relevant to this target audience by stating that it is “Accounting for the rest of us.” If a visitor has been frustrated by other more complex accounting systems, they’re likely to immediately feel that FreeAgent was made with them in mind.

4.5. Make the Message Impossible to Miss

The most effective way to ensure that visitors receive the most important messages of a website is by making them nearly impossible to miss. This can be done in a few different ways, but using large text, colored text or some other design technique to make the message stand out are common. Other techniques include automatically loading audio, video and pop-ups, each of which brings its own usability issues and concerns.

Treemo Labs uses a large bold font to immediately communicate what services it offers.

4.6. Style Text

Messages can easily be made to stand out by using bold text, colored text or larger font sizes. These things are all visual clues to visitors that something is important and prioritized. Of course, the more that is added to a website, the less impact that piece of text will have.

For example, if a page is styled in a very basic manner, with only one line that stands out in large bold text, this line will be extremely noticeable and likely have a significant impact. On the other hand, if a page using bold or colored text in several different places and various font sizes all over the place, the result is that nothing will really stand out because there is not enough uniformity.

Another option for styling text is demonstrated by Auditude. It uses a simple change in background color to create a box that separates a particular section of text. As a result, that section of text stands out.

4.7. Use Headers and Sub-Headers

On pages that consist of a significant amount of text, breaking it up and identifying the main points with headers and sub-headers can be very effective. Headers not only help to make the text more readable by creating white space and using bold font to add variety to the page, but they also communicate a structure of the content to visitors and can summarize the primary messages of the content.

4.8. Make Everything Count, or Get Rid of It

When it comes to communication online, it’s very easy to complicate a message by adding more than is necessary. The best solution is to use only what has an impact. Make everything count, or just get rid of it. If text or an image doesn’t really serve a purpose, it’s only complicating things by cluttering the most important messages. In this situation, you’re better off without it, and the result will be a simpler, clearer message.

The website for Silverback contains no unnecessary text. Above the fold, visitors see a list of what Silverback does, and further down the page are some more details on the service, but only essential information is included.

5. Goals for Communication When Developing a Website

As you’re designing and developing websites, here are some goals to keep in mind that should help you stay focused on creating ones that communicate effectively.

5.1. Clarity

One of the major goals of communication for website designers, developers and owners should be to present a clear message through the website. Regardless of what methods are used to achieve this clarity, the message must not be difficult for visitors to recognize or understand. By the time visitors leave the website, they should have received and understood the primary message.

Tickerville is a blog and a community for traders. The website has a welcome message that clearly states its purpose. When visitors arrive on the website and are greeted by this statement of purpose, they know immediately if they fit into the target audience. If they do, they’re much more likely to feel at home on the website because they know it is for them.

5.2. Communication that Truly Helps the Business and Visitors

While clarity is critical, clarity alone does little good for the business if the right message is not conveyed. Of course, the website will be most effective for the business and most useful to visitors if the messages being communicated are the most appropriate and significant ones.

LongTermClients offers business greeting cards, but that is not quite clear simply from the name LongTermClients. Below the title of the website, it says “business greeting cards,” which makes it much easier for visitors to know what the website is all about, and which should also improve the results of the website for the company.

5.3. Consistency of Message

Particularly with websites, consistency must be addressed. While the website’s home page may do an effective job of clearly communicating with visitors, many visitors will be entering the website through other pages. Are those secondary pages equally effective in communicating the same message? Secondary pages likely include additional information and messages for visitors, but the website should work as a whole to create a unified, consistent message.

5.4. Design that Enhances the Message

The appearance and style of the website should fit and complement the communication that is taking place, not interfere with it. A great-looking website is a wonderful thing, but it should never exist at the expense of its content or communication.

5.5. Communication that Relates to the Target Audience

In order for the website to maximize effectiveness, the communication must be relevant to the target audience of the website. If the website targets a specific audience, but the communication isn’t catered to them, the content will be ineffective. Make it a priority to meet your visitors at their level, whatever that level may be.

Last.fm uses a subtle but effective twist to the standard search box. Rather than simply saying “Search,” it asks the visitor “What music do you like?” Because its target audience consists of music lovers of all kinds, this simple question above the search box encourages visitors to enter a response of their own. Once they search for something that they like, they may find something that keeps them on the website for a while.

5.6. Use of Website Structure to Build on Communication

Part of building a website that communicates effectively is developing a clear website structure and navigation. A highly usable website with an effective structure can help further improve communication by making it clear to visitors what is available on the website and where they can go to find what they are looking for. Help make it easier for visitors to find what they want, and you’ll improve the overall communication that takes place.

Gallery website Pattern Tap uses effective categorization to create structure and to make it super easy for visitors to find what interests them.

6. Results of Good Communication

Websites that are able to achieve effective communication with visitors benefit in several different ways. Likewise, websites that do not communicate effectively usually struggle in these areas.

6.1. Visitors who Understand the Purpose of a Website

A website that communicates effectively will benefit immensely if visitors are able to understand what the website is all about; and the experience will also be more pleasant for and useful to them. It’s hard to build a successful website that doesn’t start with a solid foundation of effective communication.

365 Days of Astronomy uses a spot in its sidebar right below the logo and branding area to briefly explain the purpose of the website and what it offers to visitors.

6.2. Improved Branding

Another significant result of effective communication is improved branding. If the message or purpose of the website is communicated effectively to visitors, it will leave an impression on them that will help form their image of the company. Branding is important online and off, and the messages being sent are a major factor.

6.3. Reduced Bounce Rates

Websites that communicate effectively will be more user-friendly and more helpful to visitors. Fewer visitors typically leave such websites quickly as a result of not being able to find what they are looking for. Instead, they’re likely to remain on the website for a longer period of time and view a higher number of pages. Because of effective communication, visitors find the right content easily.

6.4. Less Frustration for Visitors

We’ve all had the unpleasant experience of being on a website that simply doesn’t communicate well with visitors. Maybe the purpose of the website was unclear, or maybe you weren’t sure how to find what you were looking for. Websites that fail to communicate effectively frustrate many visitors, which is obviously not a good way to build a successful website.

6.5. More Sales, Leads, Subscribers, etc.

Websites have all kinds of different goals; but regardless of what the specific goals of your website are, the website is more likely to achieve them with effective communication. Whether you’re selling products, promoting a service, building a blog readership, developing a social network or simply providing information, communication is essential to success.

The website of Mia & Maggie uses color to make the text “Free shipping” stand out. By drawing more attention to that statement, the company will likely receive more orders from people who want to take advantage of the offer. Keeping that text white would likely not produce the same results.

6.6. Less Unnecessary Inquiries

If visitors can’t find what they’re looking for on your website or if they’re not sure what is offered, you’re likely to receive emails or contact form submissions that could be avoided with better communication. Receiving inquiries is certainly not a bad thing, but when you’re answering questions that are either already answered on the website or are asked repeatedly but not answered on the website, a breakdown in communication has occurred somewhere. Websites that do a good job of communicating with visitors may receive some of these kinds of inquiries from visitors who don’t make any effort to find the information, but generally they will receive less unnecessary inquiries because visitors will be able to find what they are looking for without needing to ask for help.

About the Author

Steven Snell is a Web designer and blogger. He actively maintains his own blog at Vandelay Design, where he frequently publishes articles about design, collections of resources and inspirational galleries. You can also follow him on Twitter. (al)

By Paul Boag

Twitter is the new big thing. With everybody from Britney Spears to Barack Obama now on Twitter, it is safe to say the social networking platform has gone mainstream. For many users worldwide Twitter has become a crucial tool for maintaining contacts, exchanging opinions and making new connections. But what does this mean for the service, and how can we, website owners, actually use it for our purposes?

I posted my first tweet in November of 2006, only 7 months after the service launched. For me, it was a way to keep in touch with new friends. It was less intrusive than instant messaging and less formal than email. I quickly became hooked. For the longest time, it was the tool of geeks. My friends laughed at me as I tweeted from the pub; my family stared blankly as I explained the service. However, that has all changed now.

Twitter is the new big thing. With everybody from Britney Spears to Barack Obama now on Twitter, it is safe to say the social networking platform has gone mainstream.

Some time ago I was wrong to lament on Twitter about it becoming a marketing tool; I should embrace it as a tool I can use. Nevertheless, like everybody else, I need to be careful how I use it. I do not believe Twitter users will allow the tool to be reduced to a broadcast mechanism for pimping the latest blog post or special offer.

So how do I use Twitter? I guess the first thing to say is that I am not a huge Twitter success story. However, Twitter is turning into the third facet of my online presence, alongside my blog and podcast. With that in mind, let me share a few tips that have helped me better use this interesting new tool.

1. Above All, Keep It Personal

Although Twitterers like CNN breaking news have been very successful, generally, corporate Twitter accounts are a mistake. Twitter is about person-to-person communication and not a broadcast tool for faceless corporations. To use it in that way is to miss the potential of Twitter.

CNN Breaking News Twitter Page

Does that mean you cannot have a Twitter account for your organization? Not at all. For example, if John Boardley created a Twitter account, you may not recognize the name. However, if he used the name ILoveTypography, you would be more likely to follow because you know the I Love Typography website.

It is not the name that matters so much as the tone of the posts. Tweets should be more than an endless string of press releases and links. They should include personal content and a dialogue with followers.

This is important because it enables you to make a connection with your followers. An open and honest relationship with followers is very powerful. It builds trust, loyalty and engagement. It encourages repeat traffic and word-of-mouth recommendation.

2. Learn From Others

I have learned a lot about Twitter just by reading the tweets of those I admire. Merlin Mann, for example, injects a lot of humor into his posts, and his followers really respond to that. Darren Rowse, on the other hand, strikes a good balance between recommending content others have written and promoting his own posts.

TweetStats.com allows you to build up a picture of how successful twitterers use the service.

In addition to examining the styles of others, you could also examine statistics. Use a tool like TweetStats to examine how often others tweet and how often they reply to their followers. All of this helps to build a picture of what makes a successful tweeter.

There is also a growing number of great websites that give advice on how to get the most out of Twitter. One of my personal favorites is TwiTip, which covers such subjects as “The Merit of Twitter Competitions” and “How to Get Unfollowed on Twitter.”

3. Get A Good Desktop Client

Without a shadow of doubt, the most powerful Twitter client currently available is TweetDeck. This AIR application not only runs on Windows, Mac and Linux, but also provides a range of superb tools for managing your life on Twitter.

TweetDeck is the most powerful desktop Twitter tool available

With TweetDeck, you can create groups, filter tweets, monitor certain subjects as well as post tweets, replies and retweets. In fact, it is so powerful that it can be somewhat intimidating at first. Don’t let that put you off. Check out this short tutorial on TweetDeck’s core features, and you’ll be up and running in no time.

4. Use Twitter On The Road

If your Twitter account is going to be personal as well as professional, then you will almost certainly want to use it on the road. One option is simply to use Twitter’s mobile website. However, if you are fortunate enough to have an iPhone, then there is a wealth of Twitter clients available to you.

I have paid for and tried almost every Twitter client on the iPhone, but the winner hands down is Tweetie. I love Tweetie. It has a clean, easy-to-use interface and yet is packed with powerful features, including the ability to:

• handle multiple Twitter accounts,
• navigate reply chains,
• view Twitter trends and perform custom searches,
• access complete user profiles.

In many ways, it is even better than TweetDeck because it has much of TweetDeck’s power but in a much cleaner interface. If only they made a desktop application!

5. Tracking The Results

TweetStats is just the tip of the statistical iceberg. There is an ever-growing number of tools you can use to track your activity on Twitter. However, the ones that really interest me are those that track click-throughs. What I really want to know is, if I post a link on Twitter, how many people click through?

If the link points to one of my own websites, I could use Google Analytics’ URL tagging tool. However, this is somewhat fiddly and only works if I am linking to my own website. What’s more, these URLs can get long, which is a problem when you’re limited to 140 characters.

Fortunately, there is a tool called TwitterBurner, which solves these problems. It shortens URLs and tracks all click-throughs, even to websites you do not run yourself. Best of all, it is now supported directly in TweetDeck (although not in Tweetie, unfortunately).

6. Follow And Be Followed

Always remember that Twitter is a two-way conversation. A big part of successful tweeting is replying to those who tweet you. Twitter is not just about who follows you, either. It is also about who you follow. One service I find particularly useful is Mr Tweet. Mr Tweet provides two type of information:

• first, it suggests people you might want to consider following, because they fall within your broader network (i.e. people who are followed by your friends),
• secondly, it suggests those from your list of followers who you should follow back.

For each of these people, it provides various statistics, including:

• the number of followers they have,
• the chances of them replying to you,
• how often they update.

This is a great way to extend your network of contacts and increase the chances that your tweets will be retweeted. It’s also a great way to meet new people!

7. Integrate Whenever Possible

If you intend to use Twitter for anything other than personal use, it needs to be incorporated in the rest of your Web strategy. That means it needs to link to your other online activity, including your website and other social networks. There is no shortage of tools to help you do this, from the basic Twitter widget to a tool for sending your tweets to Facebook.

One tool that caught my attention is called TwitterFeed. It posts content from an RSS feed to Twitter, which is a convenient way to update your followers on new posts. However, use any tool that automatically posts to Twitter with caution. It can easily become annoying if used too much. Also, it lacks the friendliness of a personal post.

8. Don’t Over-Think It

Of course, the problem with all these tools, statistics and analysis is that they can suck the spontaneity and personality from your tweets. While some of those late-night drunken tweets are best left behind, you want to avoid making your tweets too sterile.

Let me explain. I am naturally a fairly good public speaker. However, once I attended a public speaking workshop. The instructors taught me about all of the techniques that make for an exceptional speaker. However, instead of improving my skills, they made me so amazingly self-conscious that I was paralyzed. I started over-analyzing what I was doing.

The danger is the same with Twitter. Sure, Twitter can be used as a marketing tool, but that doesn’t mean it cannot be fun too. Don’t let articles like this suck the joy out of tweeting!

About the author

Paul Boag is the founder of UK Web design agency Headscape, author of the Website Owners Manual and host of award-winning Web design podcast Boagworld.com.

By the way, we are tweeting, too — please feel free to follow Smashing Magazine on Twitter.

(al)

Introduced in WordPress 2.5, shortcodes are powerful but still yet quite unknown WordPress functions. Imagine you could just type “adsense” to display an AdSense ad or “post_count” to instantly find out the number of posts on your blog.

WordPress shortcodes can do this and more and will definitely make your blogging life easier. In this article, we’ll show you how to create and use shortcodes, as well as provide killer ready-to-use WordPress shortcodes that will enhance your blogging experience.

What Are Shortcodes?

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), switch the editor to HTML mode and type a shortcode in brackets, such as:

[showcase]

It is also possible to use attributes with shortcodes. A shortcode with attributes would look something like this:

[showcase id="5"]

Shortcodes can also embed content, as shown here:

[url href="http://www.smashingmagazine.com"]Smashing Magazine[/url]

Shortcodes are handled by a set of functions introduced in WordPress 2.5 called the Shortcode API. When a post is saved, its content is parsed, and the shortcode API automatically transforms the shortcodes to perform the function they’re intended to perform.

Creating a Simple Shortcode

The thing to remember with shortcodes is that they’re very easy to create. If you know how to write a basic PHP function, then you already know how to create a WordPress shortcode. For our first one, let’s create the well-known “Hello, World” message.

1. Open the functions.php file in your theme. If the file doesn’t exists, create it.
2. First, we have to create a function to return the “Hello World” string. Paste this in your functions.php file:

   function hello() {
       return 'Hello, World!';
   }

3. Now that we have a function, we have to turn it into a shortcode. Thanks to the add_shortcode() function, this is very easy to do. Paste this line after our hello() function, then save and close the functions.php file:

   add_shortcode('hw', 'hello');

   The first parameter is the shortcode name, and the second is the function to be called.

4. Now that the shortcode is created, we can use it in blog posts and on pages. To use it, simply switch the editor to HTML mode and type the following:

   [hw]

   You’re done! Of course, this is a very basic shortcode, but it is a good example of how easy it is to create one.

Creating Advanced Shortcodes

As mentioned, shortcodes can be used with attributes, which are very useful, for example, for passing arguments to functions. In this example, we’ll show you how to create a shortcode to display a URL, just as you would with the BBCodes that one uses on forums such as VBulletin and PHPBB.

1. Open your functions.php file. Paste the following function in it:

   function myUrl($atts, $content = null) {
   	extract(shortcode_atts(array(
   		"href" => 'http://'
   	), $atts));
   	return '<a href="'.$href.'">'.$content.'</a>';
   }

2. Let’s turn the function into a shortcode:

   add_shortcode("url", "myUrl");

3. The shortcode is now created. You can use it on your posts and pages:

   [url href="http://www.wprecipes.com"]WordPress recipes[/url]

   When you save a post, the shortcode will display a link titled “WordPress recipes” and pointing to http://www.wprecipes.com.

Code explanation. To work properly, our shortcode function must handle two parameters: $atts and $content. $atts is the shortcode attribute(s). In this example, the attribute is called href and contains a link to a URL. $content is the content of the shortcode, embedded between the domain and sub-directory (i.e. between “www.example.com” and “/subdirectory”). As you can see from the code, we’ve given default values to $content and $atts.

Now that we know how to create and use shortcodes, let’s look at some killer ready-to-use shortcodes!

1. Create a “Send to Twitter” Shortcode

The problem. Seems that a lot of you enjoyed the “Send to Twitter” hack from my latest article on Smashing Magazine. I also really enjoyed that hack, but it has a drawback: if you paste the code to your single.php file, the “Send to Twitter” link will be visible on every post, which you may not want. It would be better to control this hack and be able to specify when to add it to a post. The solution is simple: a shortcode!

The solution. This shortcode is simple to create. Basically, we just get the code from the “Send to Twitter” hack and turn it into a PHP function. Paste the following code in the functions.php file in your theme:

function twitt() {
  return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';
}

add_shortcode('twitter', 'twitt');

To use this shortcode, simply switch the editor to HTML mode and then type:

[twitter]

and a “Send to Twitter” link will appear where you placed the shortcode.

Source and related plug-ins:

• How to: Create a “send this to twitter” button
• Twitter tools

2. Create a “Subscribe to RSS” Shortcode

The problem. You already know that a very good way to gain RSS subscribers is to display a nice-looking box that says something like “Subscribe to the RSS feed.” But once again, we don’t really want to hard-code something into our theme and lose control of the way it appears. In this hack, we’ll create a “Subscribe to RSS” shortcode. Display it in some places and not others, in posts or on pages, above or below the main content, it’s all up to you.

The solution. As usual, we create a function and then turn it into a shortcode. This code goes into your functions.php file. Don’t forget to replace the example feed URL with your own!

function subscribeRss() {
    return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';
}

add_shortcode('subscribe', 'subscribeRss');

Styling the box. You probably noticed the rss-box class that was added to the div element containing the link. This allows you to style the box the way you like. Here’s an example of some CSS styles you can apply to your “Subscribe to RSS” box. Simply paste it into the style.css file in your theme:

.rss-box{
  background:#F2F8F2;
  border:2px #D5E9D5 solid;
  font-weight:bold;
  padding:10px;
}

3. Insert Google AdSense Anywhere

The problem. Most bloggers use Google AdSense. It is very easy to include AdSense code in a theme file such as sidebar.php. But successful online marketers know that people click more on ads that are embedded in the content itself.

The solution. To embed AdSense anywhere in your posts or pages, create a shortcode:

1. Open the functions.php file in your theme and paste the following code. Don’t forget to modify the JavaScript code with your own AdSense code!

   function showads() {
       return '<div id="adsense"><script type="text/javascript"><!--
   	google_ad_client = "pub-XXXXXXXXXXXXXX";
   	google_ad_slot = "4668915978";
   	google_ad_width = 468;
   	google_ad_height = 60;
   	//-->
   </script>
   
   <script type="text/javascript"
   src="http://78.46.108.98/images/mastering-wordpress-shortcodes/http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script></div>';
   }
   
   add_shortcode('adsense', 'showads');

2. Once you have saved functions.php, you can use the following shortcode to display AdSense anywhere on your posts and pages:

   [adsense]

   Note that our AdSense code is wrapped with an adsense div element, we can style it the way we want in our style.css file.

Code explanation. The above code is used simply to display AdSense ads. When the shortcode is inserted in a post, it returns an AdSense ad. It is pretty easy but also, you’ll agree, a real time-saver!

Sources:

• How to: Embed AdSense anywhere on your posts

4. Embed an RSS Reader

The problem. Many readers also seemed to enjoy the “8 RSS Hacks for WordPress” post published on Smashing Magazine recently. Now, let’s use our knowledge of both RSS and shortcodes to embed an RSS reader right in our posts and pages.

The solution. As usual, to apply this hack, simply paste the following code in your theme’s function.php file.

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
    extract(shortcode_atts(array(
	"feed" => 'http://',
      "num" => '1',
    ), $atts));

    return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

To use the shortcode, type in:

[rss feed="http://feeds.feedburner.com/wprecipes" num="5"]

The feed attribute is the feed URL to embed, and num is the number of items to display.

5. Get posts from WordPress Database with a Shortcode

The problem. Ever wished you could call a list of related posts directly in the WordPress editor? Sure, the “Related posts” plug-in can retrieve related posts for you, but with a shortcode you can easily get a list of any number of posts from a particular category.

The solution. As usual, paste this code in your functions.php file.

function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

To use it, simply paste the following in the WordPress editor, after switching to HTML mode:

[liste num="3" cat="1"]

This will display a list of three posts from the category with an ID of 1. If you don’t know how to get the ID of a specific category, an easy way is explained here.

Code explanation. After it has extracted the arguments and created the global variable $posts, the sc_liste() function uses the get_posts() function with the numberposts, order, orderby and category parameters to get the X most recent posts from category Y. Once done, posts are embedded in an unordered HTML list and returned to you.

Source:

1. WordPress: Création de shortcode avancé

6. Get the Last Image Attached to a Post

The problem. In WordPress, images are quite easy to manipulate. But why not make it even easier? Let’s look at a more complex shortcode, one that automatically gets the latest image attached to a post.

The solution. Open the functions.php file and paste the following code:

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

To use the shortcode, simply type the following in the editor, when in HTML mode:

[postimage size="" float="left"]

Code explanation. The sc_postimage() function first extracts the shortcode attributes. Then, it retrieves the image by using the get_children(), wp_get_attachment_image() and wp_get_attachment_image_src() WordPress functions. Once done, the image is returned and inserted in the post content.

Sources:

1. WordPress Shortcode: easily display the last image attached to post

7. Adding Shortcodes to Sidebar Widgets

The problem. Even if you enjoyed this article, you may have felt a bit frustrated because, by default, WordPress doesn’t allow shortcode to be inserted into sidebar widgets. Thankfully, here’s a little trick to enhance WordPress functionality and allow shortcodes to be used in sidebar widgets.

The solution. One more piece of code to paste in your functions.php file:

add_filter('widget_text', 'do_shortcode');

That’s all you need to allow shortcodes in sidebar widgets!

Code explanation. What we did here is quite simple: we added a filter on the widget_text() function to execute the do_shortcode() function, which uses the API to execute the shortcode. Thus, shortcodes are now enabled in sidebar widgets.

Sources:

• How to: Add Shortcodes to Sidebar Widgets
• Adding a Shortcode to a Sidebar Widget

WordPress Shortcodes Resources

• Shortcode API
  The WordPress Codex page related to the shortcode API.
• WordPress 2.5 shortcodes
  Excellent shortcodes tutorial.
• WordPress shortcode generator
  The page is in French but provides a very useful and easy-to-use app to create shortcodes online.
• Using WordPress shortcode to create beautiful download boxes
  Another great use of shortcodes: creating fancy “Download” boxes for your blog.
• Easy way to advertise in WordPress using shortcodes
  Great resource to manage and insert advertising on your blog, brought to you by WpEngineer.
• Create a signature using WordPress shortcodes
  Really simple but really cool: a shortcode to display a graphic signature on your blog.
• How to: Use WordPress shortcodes with attributes
  Concise tutorial on using shortcode attributes.

About the author

This guest post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter.

(al)

© Jean-Baptiste Jung for Smashing Magazine, 2009. |
Permalink |
109 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: shortcodes, wordpress

The wallpapers calendar series will not be discontinued. Next month is the last month in our desktop wallpaper calendar series. In February, you’ll have one last chance to showcase your work by designing a desktop wallpaper calendar for Smashing Magazine. But don’t worry, we have a number of new contests …

By Andrew Gibson, Steven Snell and Smashing Editorial Team

More people across the world are living in cities than ever before. Cities are both places of historical significance and the engines of the world’s economy. They’re also home to some of the greatest treasures and buildings that mankind has created. Cities are wonderful subjects for photography. They offer a variety of subjects suitable for both straight and HDR photography, including architectural, street and night photography. The structure, angles and texture you get with architectural photography make it unique and very engaging.

From the energy of Cairo to the canals of Venice, Smashing Magazine celebrates the diversity of the world’s cities by presenting you 35 beautiful city photos. Be sure to check out the portfolios of the talented photographers whose work you see here. We’ve also included some useful links at the bottom of the article.

You may be interested in the following related posts:

• The Beauty of Street Photography
• Beautiful Black and White Photography
• 35 Fantastic HDR Pictures

35 Beautiful City Photos

KoRaYeM

Cairo, Egypt

miguelyn

Rapanui, Chile

Gaston Batistini

Paris, France

Joan Leong

Singapore

Portiman

Rome, Italy

szeke

Machu Picchu, Peru

Thomas Ebenhan

Lisbon, Portugal

Foureyes

Badalin, China

David Giral

Bastide du Village de Monpazier, Périgord, Dordogne, France

Serijo_r

Saint Basil’s Cathedral, Moscow, Russia

Juanma Alvarez

Valencia, Spain

Ævar Guðmundsson

Reykjavik, Iceland

Giuseppe Finocchiaro

Oia, Greece

Alex Marlowski

Haram al-Sharif, Jerusalem

Svensson

Paris, France

Thomas Ebenhan

Berlin, Germany

Franco Farina

Barcelona, Spain

Colin Allan

Carrbridge, UK

Katarina Stefanovic

London, UK

Joaquim Granell

Pisa, Italy

Razu Ryza

Shah Alam, Selangor, Malaysia

Eric Toriel

Marrakech, Morocco

Ben Visbeek

Zugspitze, Germany / Austria

Joep Roosen

New York City, US

Andrea Kamal

Hamburg, Germany

Franco Farina

Barcelona, Spain

Andrey Permitin

Moscow, Russia

Ruben Seabra

Madrid, Spain

David Rocaberti

Tokyo, Japan

Jasbir Singh

The Great Mosque, Makkah, Mecca, Saudi Arabia

Sean Mantey

Newcastle, UK

Joep Roosen

Rotterdam, Netherlands

Joanot

Giza Plateau, on the outskirts of Cairo, Egypt

butterflyscream

Pisa, Italy

Istvan Kadar

Pura Luhur Uluwatu Temple, Bali

André Luiz Martins

Rio de Janeiro, Brazil

Fulvio Pellegrini

New York City, United States

Last Click

Mark Bowman

Lilla Torget (Little Square) Malmo, Sweden

Sources and Resources

• Wired.com Photo Contest: Cities
  See the entrants to Wired.com’s city photo contest.
• ePhotoZine – Architecture, a beginner’s guide
  A beginner’s guide to architectural photography.
• Universe Today
  Photos of cities from space.
• What Are Architectural Landscape Photos?
  A guide to the history of architectural landscape photography.
• Metro Arts and Architecture
  A guide to the 50 most beautiful subway systems in the world.
• Flickr Favorite City and Street Photographers
• Architectural Photography Inspiration

About the authors

Andrew Gibson is a photographer and writer. He has a photoblog called Andes where he displays his best photos from the South American Andes.

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag.

(al)

© Andrew Gibson for Smashing Magazine, 2009. |
Permalink |
133 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: architecture, cities, inspiration, photography

By Katie Kelly

The US government is a brand, one often overlooked in favor of the obvious companies and celebrities. The United States of America is arguably a brand in dire need of refreshing. While this is certainly a larger task than simply restyling a logo or adding a smattering of Web 2.0 cliches to its Web and print material, a significant step has been taken in the full overhaul of the White House website.

Millions across the world focused on the United States’ inauguration of Barack Obama, waiting for the change they were promised in the election campaign. While only time will tell if that happens, a dramatic change can be seen on the new White House website.

In this installment, we’ll take a tour of the updated Whitehouse website, as well as quickly compare it to the old website under the George W. Bush administration. The many changes within the government are reflected in the website’s new direction: the design, the content and the technology.

Visual Design and Typography

First a quick glance at history: the White House website under the George W. Bush administration had a single-colored background, with a very subdued color scheme. White, light gray and navy blue were the only colors found outside of the iconic presidential seal. The logo was very prominent in the upper left, with the navigation taking up a full third of the page. As shown here, there were minor CSS alignment issues throughout the website.

Now back to the present, for the “reboot”: shortly after Barack Obama’s inauguration to the US presidency, a new website was posted. The White House logo was heavily reduced in prominence, taking a visual backseat to the navigation and content header.

The navigation got a sorely needed menu update, freeing up an extra third of screen space compared to its predecessor. jQuery is used extensively throughout the website: on the menu, in images (with thickbox) and for the carousel effect.

Subtle gradients and whitewashed effects are design concepts retained from the original website, although the blue gets a much larger range and deeper tone. Red comes into play with the roll-overs, and a tiny flag icon is included, interestingly, in the prominent spot under the logo and to the left of the navigation: a sly allusion to the “flag pin” controversy during the campaign? Perhaps.

The newsletter sign-up box gets prominent placement and is well offset by the contrasting color. At the time of this screenshot, it matched the President’s skin tone rather well. One wonders if that is a coincidence.

The design adds a number of classic elements: the stars, architectural details in the main background, the grayscale presidential seal in the horizontal rule before the footer.

Sidebars on the website show desaturated illustrations that follow the color scheme of the rest of the website. Titles and buttons maintain the brown tone, with subtle gradient effects.

Typography

Lucida Sans is used for body text and Georgia for headings. These older fonts carry on the slight classical/retro slant of the website. In a nod to sans-serif font readability on the Web, Arial is used for main text. While the font used in the image headers is not listed, it is a heavy serif font, styled like flyers of old, from the tiny pronouns and articles to the fully capitalized nouns.

Website Structure

Structurally, the website shows a clean hierarchical importance from top to bottom and left to right. The content header carousel effect gives lush visual prominence to current topics, with the left side containing the carousel controls and headline text. This allows users with low resolutions or alternate browser set-ups, such as screen readers, to see the content of the headline before the photo comes into play.

At an 800×600 resolution, the screen shows only the blue content header, with the background and white content box cut off. At that resolution, the website does scroll horizontally, but the headline becomes the focus, and the link to the featured content is visible without having to vertically scroll.

Directly beneath, we have a three-column set-up: the blog, a search box and the “Agenda” section, as well as a content pull-out (most likely a placeholder for future expansion).

Usability and Accessibility

The website takes a few detours from the usual standards of usability. On the main page, the search box is almost lost in the middle of the secondary content; it has little to no visual impact, with the word “Search,” the outline of the input area and the tiny magnifier all in a light gray. The upper right has an email/newsletter sign-up function that is well placed and well set off from the blue content header, but this takes the place of the conventional spot for the search box.

The content of the website scales decently when text size is changed: the navigation menu tab is a static image; however, the content in the roll-over and the duplicated navigation in the footer do scale. Considering the reach (the demographics, if you will) of the website, a more screen reader-friendly version would be a good step to becoming more accessible, because the header navigation is unreadable and the footer navigation requires the entire page to be read before being able to navigate away.

The website’s images are well thought out and optimized, and while they are not a big burden on dial-up users, a text-only version of the website would solve a number of accessibility issues in one go.

Change We Can Validate?

Perhaps not. As of this writing, there are 41 errors and 1840 warnings for CSS 2.1.

However, from a visual standpoint, there is veritable change in the content that is being delivered, in the use of technology to share that content and in the styling of that content. The United States government is taking a step to refresh its brand and its image to the world and to add transparency to its workings; the President’s website reboot shows a new, well-designed direction.

About the Author

Katie Kelly is a front-end Web developer by day and video game fanatic by night. With over 15 years of experience, she enjoys the hybrid mix of clean code, user-friendly content, and customer-driven e-commerce. When not fighting the dreaded “scope creep” monster, she remembers to update her website with helpful tips about wrangling with the design side of ASP.NET: mediapyre.

(al)

By Noura Yehia and Smashing Magazine Editorial Team
Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce …