mykimchi.NET Blog

Is time kickin’ your ass? Well, learn to defend yourself! Master these killer Photoshop keyboard combos and you’ll find yourself with more time for the important things (e.g. Facebook trivia questions). These combos assume you’re using Photoshop CS3 on Windows platform with default keyboard shortcuts.

Legend:
( ) = Repeat as desired
{ } = Manual Input Required

10. Cloak of Invisibility

Remove everything from the screen except for your file.

• F, F, F | Cycle through Screen Modes
• Tab | Remove Tools and Palettes
• Ctrl+H | Hide Extras (Grid, Guides, Slices, etc.)
• Ctrl+R | Hide Rulers

9. Quick Brush Jab

Quickly and easily customize a brush. This combo is a staple for digital painting.

• B | Brush Tool
• Right-Click and Select or F5 and Select | Open condensed or full Brush Palette
• or . or , or Shift+. or Shift+, | Cycle through brushes or jump to first or last brush
• [ or ]: | Shrink or enlarge brush radius
• Shift+[ or Shift+] | Decrease or increase brush hardness
• {Numeric Input} | Change brush opacity (e.g. ‘5′ = 50%, ‘55′ = 55%)

8. Quick Brush Jab Path Stroke

Stroke a path with a customized brush.

• {Draw Path} | Use any tool to draw a path
• B | Select Brush Tool
• Quick Brush Jab | Use the Quick Brush Jab Combo to customize brush
• Enter | Stroke the path with your customized brush

7. Gaussian Attack

Apply a filter, fade it and apply again. Good combo for fine-tweaking filters.

• {Apply a Filter} | Manually choose and apply a filter (warning: using the Lens Flare filter may result in a swift kick to the mouse balls)
• Ctrl+Shift+F | Fade the filter
• (Ctrl+F or Ctrl+Shift+F) | Reapply filter with or without dialog box

6. Shadow Maker

Create a basic shadow based on a chosen layer.

• {Select Layer} | Select the layer the shadow will be created after. The transparency of this layer needs to resemble the desired shape of the shadow.
• Ctrl+J | Layer via Copy
• Ctrl+[ | Move layer down
• D | Reset color defaults
• Alt+Shift+Backspace | Fill with black and preserve transparency
• Ctrl+T | Free transform
• {Transform} | Modify to your liking
• Enter | Commit

5. Layer Catcher

Select, group and mask layers. Often easier than using the layers palette.

• V | Selection Tool
• Ctrl+Click or Ctrl+Shift+Click or Ctrl+Shift+Right-Click | Select your layers
• Ctrl+G | Group Layers

4. OCD Layer Sort

Rearrange your layers quickly and easily. Great cure for you neuroticism.

• F7 | Show Layer Palette
• Alt+[ or Alt+] or Alt+, or Alt+. | Select a layer
• Shift+Alt+[ or Shift+Alt+] or Shift+Alt+, or Shift+Alt+. | Select more layers
• Ctrl+[ or Ctrl+] or Shift+Ctrl+[ or Shift+Control+] | Move layers down or up or send to bottom or bring to top

3. Ultimate Flattener

Merge All Layers (even those hidden). Quick way to flatten a file.

• Alt+. | Select Top Layer
• Shift+Alt+, | Select all layers between currently selected and bottom layer
• Ctrl+E | Merge the selected layers

2. Infinite Dupe

Duplicate and evenly distribute or transform items. Nice way to distribute something like nav buttons.

• Ctrl+T | Transform
• {Transform/Move} | Manually Move or Transform
• Enter | Commit Transform
• (Ctrl+Alt+Shift+T) | Duplicate and transform relative to the newest item

1. Finishing Move - The Web Extractor

Extract a selection and save it for the web. Extremely useful when pulling individual elements from a design, such as buttons or rules.

• {Create Selection} | Select the area you want to extract
• Ctrl+Shift+C | Copy Merged to clipboard
• Ctrl+N | Create New Image based on selection size
• Enter | Confirm New Image
• Ctrl+V | Paste from clipboard
• Ctrl+Alt+Shift+S | Save for the Web

1. Why jQuery?

jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are (almost) infinite.

Javascript and Best Practices

Javascript has long been the subject of many heated debates about whether it is possible to use it while still adhering to best practices regarding accessibility and standards compliance.

The answer to this question is still unresolved, however, the emergence of Javascript frameworks like jQuery has provided the necessary tools to create beautiful websites without having to worry (as much) about accessibility issues.

Obviously there are cases where a Javascript solution is not the best option. The rule of thumb here is: use DOM scripting to enhance functionality, not create it.

Unobtrusive DOM Scripting

While the term “DOM scripting” really just refers to the use of scripts (in this case, Javascripts) to access the Document Object Model, it has widely become accepted as a way of describing what should really be called “unobtrusive DOM scripting”—basically, the art of adding Javascript to your page in such a way that if there were NO Javascript, the page would still work (or at least degrade gracefully). In the website world, our DOM scripting is done using Javascript.

The Bottom Line: Accessible, Degradable Content

The aim of any web producer, designer or developer is to create content that is accessible to the widest range of audience. However, this has to be carefully balanced with design, interactivity and beauty. Using the theories set out in this article, designers, developers and web producers will have the knowledge and understanding to use jQuery for DOM scripting in an accessible and degradable way; maintaining content that is beautiful, functional AND accessible.

2. Unobtrusive DOM Scripting?

In an ideal world, websites would have dynamic functionality AND effects that degrade well. What does this mean? It would mean finding a way to include, say, a snazzy Javascript Web 2.0 animated sliding news ticker widget in a web page, while still ensuring that it fails gracefully if a visitor’s browser can’t (or won’t) run Javascripts.

The theory behind this technique is quite simple: the ultimate aim is to use Javascript for non-invasive, “behavioural” elements of the page. Javascript is used to add or enhance interactivity and effects. The primary rules for DOM scripting follow.

Rule #1: Separate Javascript Functionality

Separate Javascript functionality into a “behavioural layer,” so that it is separate from and independent of (X)HTML and CSS. (X)HTML is the markup, CSS the presentation and Javascript the behavioural layer. This means storing ALL Javascript code in external script files and building pages that do not rely on Javascript to be usable.

For a demonstration, check out the following code snippets:

Bad markup:

Never include Javascript events as inline attributes. This practice should be completely wiped from your mind.

<a onclick="doSomething()" href="#">Click!</a>

Good markup:

All Javascript behaviours should be included in external script files and linked to the document with a <script> tag in the head of the page. So, the anchor tag would appear like this:

<a href="backuplink.html" class="doSomething">Click!</a>

And the Javascript inside the myscript.js file would contain something like this:

...

$('a.doSomething').click(function(){
	// Do something here!
	alert('You did something, woo hoo!');
});
...

The .click() method in jQuery allows us to easily attach a click event to the result(s) of our selector. So the code will select all of the <a> tags of class “doSomething” and attach a click event that will call the function. In practice, this

In Rule #2 there is a further demonstration of how a similar end can be achieved without inline Javascript code.

Rule #2: NEVER Depend on Javascript

To be truly unobtrusive, a developer should never rely on Javascript support to deliver content or information. It’s fine to use Javascript to enhance the information, make it prettier, or more interactive—but never assume the user’s browser will have Javascript enabled. This rule of thumb can in fact be applied to any third-party technology, such as Flash or Java. If it’s not built into every web browser (and always enabled), then be sure that the page is still completely accessible and usable without it.

Bad markup:

The following snippet shows Javascript that might be used to display a “Good morning” (or “afternoon”) message on a site, depending on the time of day. (Obviously this is a rudimentary example and would in fact probably be achieved in some server-side scripting language).

<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
	document.write('Good Morning!');
else
	document.write('Good Afternoon!');
</script>

This inline script is bad because if the target browser has Javascript disabled, NOTHING will be rendered, leaving a gap in the page. This is NOT graceful degradation. The non-Javascript user is missing out on our welcome message.

Good markup:

A semantically correct and accessible way to implement this would require much simpler and more readable (X)HTML, like:

<p title="Good Day Message">Good Morning!</p>

By including the “title” attribute, this paragraph can be selected in jQuery using a selector (selectors are explained later in this article) like the one in the following Javascript snippet:

var now = new Date();
if(now.getHours() >= 12)
{
	var goodDay = $('p[title="Good Day Message"]');
	goodDay.text('Good Afternoon!');
}

The beauty here is that all the Javascript lives in an external script file and the page is rendered as standard (X)HTML, which means that if the Javascript isn’t run, the page is still 100% semantically pure (X)HTML—no Javascript cruft. The only problem would be that in the afternoon, the page would still say “Good morning.” However, this can be seen as an acceptable degradation.

Rule #3: Semantic and Accessible Markup Comes First

It is very important that the (X)HTML markup is semantically structured. (While it is outside the scope of this article to explain why, see the links below for further reading on semantic markup.) The general rule here is that if the page’s markup is semantically structured, it should follow that it is also accessible to a wide range of devices. This is not always true, though, but it is a good rule of thumb to get one started.

Semantic markup is important to unobtrusive DOM scripting because it shapes the path the developer will take to create the DOM scripted effect. The FIRST step in building any jQuery-enhanced widget into a page is to write the markup and make sure that the markup is semantic. Once this is achieved, the developer can then use jQuery to interact with the semantically correct markup (leaving an (X)HTML document that is clean and readable, and separating the behavioural layer).

Terrible markup:

The following snippet shows a typical list of items and descriptions in a typical (and terribly UNsemantic) way.

<table>
    <tr>
        <td onclick="doSomething();">First Option</td>
        <td>First option description</td>
    </tr>
    <tr>
        <td onclick="doSomething();">Second Option</td>
        <td>Second option description</td>
    </tr>
</table>

Bad markup:

The following snippet shows a typical list of items and descriptions in a more semantic way. However, the inline Javascript is far from perfect.

<dl>
    <dt onclick="doSomething();">First Option</dt>
    <dd>First option description</dd>
    <dt onclick="doSomething();">Second Option</dt>
    <dd>Second option description</dd>
</dl>

Good markup:

This snippet shows how the above list should be marked up. Any interaction with Javascript would be attached at DOM load using jQuery, effectively removing all behavioural markup from the rendered (X)HTML.

<dl id="OptionList">
    <dt>First Option</dt>
    <dd>First option description</dd>
    <dt>Second Option</dt>
    <dd>Second option description</dd>
</dl>

The <id> of “OptionList” will enable us to target this particular definition list in jQuery using a selector—more on this later.

3. Understanding jQuery for Unobtrusive DOM Scripting

This section will explore three priceless tips and tricks for using jQuery to implement best practices and accessible effects.

Understanding Selectors: the Backbone of jQuery

The first step to unobtrusive DOM scripting (at least in jQuery and Prototype) is using selectors. Selectors can (amazingly) select an element out of the DOM tree so that it can be manipulated in some way.

If you’re familiar with CSS then you’ll understand selectors in jQuery; they’re almost the same thing and use almost the same syntax. jQuery provides a special utility function to select elements. It is called $.

A set of very simple examples of jQuery selectors:

$(document); // Activate jQuery for object
$('#mydiv')  // Element with ID "mydiv"
$('p.first') // P tags with class first.
$('p[title="Hello"]') // P tags with title "Hello"
$('p[title^="H"]') // P tags title starting with H

So, as the Javascript comments suggest:

1. $(document);
   The first option will apply the jQuery library methods to a DOM object (in this case, the document object).
2. $(’#mydiv’)
   The second option will select every <div> that has the <id> attribute set to “mydiv”.
3. $(’p.first’)
   The third option will select all of the <p> tags with the class of “first”.
4. $(’p[title="Hello"]‘)
   This option will select from the page all <p> tags that have a title of “Hello”. Techniques like this enable the use of much more semantically correct (X)HTML markup, while still facilitating the DOM scripting required to create complex interactions.
5. $(’p[title^="H"]‘)
   This enables the selection of all of the <p> tags on the page that have a title that starts with the letter H.

These examples barely scratch the surface.

Almost anything you can do in CSS3 will work in jQuery, plus many more complicated selectors. The complete list of selectors is well documented on the jQuery Selectors documentation page. If you’re feeling super-geeky, you could also read the CSS3 selector specification from the W3C.

Get ready.
$(document).ready()

Traditionally Javascript events were attached to a document using an “onload” attribute in the <body> tag of the page. Forget this practice. Wipe it from your mind.

jQuery provides us with a special utility on the document object, called “ready”, allowing us to execute code ONLY after the DOM has completely finished loading. This is the key to unobtrusive DOM scripting, as it allows us to completely separate our Javascript code from our markup. Using $(document).ready(), we can queue up a series of events and have them execute after the DOM is initialized.

This means that we can create entire effects for our pages without changing the markup for the elements in question.

Hello World! Why $(document).ready() is SO cool

To demonstrate the beauty of this functionality, let’s recreate the standard introduction to Javascript: a “Hello World” alert box.

The following markup shows how we might have run a “Hello World” alert without jQuery:

Bad markup:

<script language="javascript">
alert('Hello World');
</script>

Good markup:

Using this functionality in jQuery is simple. The following code snippet demonstrates how we might call the age-old “Hello World” alert box after our document has loaded. The true beauty of this markup is that it lives in an external Javascript file. There is NO impact on the (X)HTML page.

$(document).ready(function()
{
	alert('Hello World');
});

How it works

The $(document).ready() function takes a function as its argument. (In this case, an anonymous function is created inline—a technique that is used throughout the jQuery documentation.) The function passed to $(document).ready() is called after the DOM has finished loading and executes the code inside the function, in this case, calling the alert.

Dynamic CSS Rule Creation

One problem with many DOM scripting effects is that they often require us to hide elements of the document from view. This hiding is usually achieved through CSS. However, this is less than desirable. If a user’s browser does not support Javascript (or has Javascript disabled), yet does support CSS, then the elements that we hide in CSS will never be visible, since our Javascript interactions will not have run.

The solution to this comes in the form of a plugin for jQuery called cssRule, which allows us to use Javascript to easily add CSS rules to the style sheet of the document. This means we can hide elements of the page using CSS—however the CSS is ONLY executed IF Javascript is running.

Bad markup:

HTML:
<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>

CSS:
p.hide-me-first
{
	display: none;
}

Assuming that a paragraph with the class of “hide-me-first” is going to first be hidden by CSS and then be displayed by a Javascript after some future user interaction, if the Javascript never runs the content will never be visible.

Good markup:

HTML:
<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>

jQuery Javascript:
$(document).ready(function{
	jQuery.cssRule("p.hide-me-first", "display", "none");
});

Using a $(document).ready() Javascript here to hide the paragraph element means that if Javascript is disabled, the paragraphs won’t ever be hidden—so the content is still accessible. This is the key reason for runtime, Javascript-based, dynamic CSS rule creation.

4. Conclusion

jQuery is an extremely powerful library that provides all the tools necessary to create beautiful interactions and animations in web pages, while empowering the developer to do so in an accessible and degradable manner.

This article has covered:

1. Why unobtrusive DOM scripting is so important for accessibility,
2. Why jQuery is the natural choice to implement unobtrusive DOM scripting effects,
3. How jQuery selectors work,
4. How to implement unobtrusive CSS rules in jQuery.

5. Further Reading

Further Reading: jQuery and JavaScript Practices

1. jQuery Web Site: How jQuery Works and Tutorials
   John Resig + Other Contributors
   One of jQuery’s true strengths is the documentation provided by John Resig and his team.
2. 51 Best jQuery Tutorials and Examples
3. Easy As Pie: Unobtrusive JavaScript
4. Seven Rules of Unobtrusive JavaScript
5. Learning jQuery
6. Visual jQuery
7. jQuery Tutorials For Designers
8. jQuery For Designers
   jQuery for Designers: learn how easy it is to apply web interaction using jQuery.
9. 15 Days Of jQuery
   jQuery tutorials and example code that takes you from zero to hero in no time flat.
10. 15 Resources To Get You Started With jQuery From Scratch
11. The Seven Rules Of Pragmatic Progressive Enhancement
12. The Behaviour Layer Slides
    Jeremy Keith
    Great slide notes giving a quick rundown on unobtrusive Javascripting.
13. A List Apart: Behavioral Separation
    Jeremy Keith
    A more in-depth explanation of the idea of separating Javascript into an unobtrusive “behavioural” layer.
14. Unobtrusive JavaScript with jQuery
    Simon Willison
    A great set of slides about using jQuery unobtrusively. Also, finishes with a wonderful summary of jQuery methods and usage.

Further Reading: Semantic Markup

1. Wikipedia: Definition of Semantics
   It’s worth understanding the idea of semantics in general prior to trying to wrap one’s head around the concept of semantic markup.
2. Who cares about semantic markup?
   Dave Shea
   Dave Shea explores the benefits of semantic markup and
3. Standards don’t necessarily have anything to do with being semantically correct
   Jason Kottke
   Kottke discusses the differences between standards compliance and semantic markup.
4. CSS3 selector specification
   W3C
   The complete specification for CSS3 selectors (most of which work perfectly in jQuery selectors also). This is great reading for anyone who likes to keep up to date with best practices and standards compliance.

by Chris Shiflett and Sean Coates

This article is a rebuttal to 10 Advanced PHP Tips To Improve Your Programming — henceforth referred to as the previous article — published last November here on Smashing Magazine. The introduction sounds intriguing:

Listed below are 10 excellent techniques that PHP developers should learn and use every time they program.

Unfortunately, the intrigue devolves into disappointment. We disagree with many of the tips, and even when we don’t, the accompanying explanation is weak or misleading. In this article, we go through each and every tip from the previous article and provide our own commentary and evidence, either to validate and clarify the tip, or to refute it. Our hope is that you don’t just accept our opinion, but rather learn enough to form your own.

1. Use an SQL Injection Cheat Sheet

This particular tip is just a link to a useful resource with no discussion on how to use it. Studying various permutations of one specific attack can be useful, but your time is better spent learning how to safeguard against it. Additionally, there is much more to Web app security than SQL injection. XSS (Cross-Site Scripting) and CSRF (Cross-Site Request Forgeries), for example, are at least as common and at least as dangerous.

We can provide some much-needed context, but because we don’t want to focus too much on one attack, we’ll first take a step back. Every developer should be familiar with good security practices, and apps should be designed with these practices in mind. A fundamental rule is to never trust data you receive from somewhere else. Another rule is to escape data before you send it somewhere else. Combined, these rules can be simplified to make up a basic tenet of security: filter input, escape output (FIEO).

The root cause of SQL injection is a failure to escape output. More specifically, it is when the distinction between the format of an SQL query and the data used by the SQL query is not carefully maintained. This is common in PHP apps that construct queries as follows:

<?php

$query = "SELECT *
          FROM   users
          WHERE  name = '{$_GET['name']}'";

?>

In this case, the value of $_GET['name'] is provided by another source, the user, but it is neither filtered nor escaped.

Escaping preserves data in a new context. The emphasis on escaping output is a reminder that data used outside of your Web app needs to be escaped, else it might be misinterpreted. By contrast, filtering ensures that data is valid before it’s used. The emphasis on filtering input is a reminder that data originating outside of your Web app needs to be filtered, because it cannot be trusted.

Assuming we’re using MySQL, the SQL injection vulnerability can be mitigated by escaping the name with mysql_real_escape_string(). If the name is also filtered, there is an additional layer of security. (Implementing multiple layers of security is called “defense in depth” and is a very good security practice.) The following example demonstrates filtering input and escaping output, with naming conventions used for code clarity:

<?php

// Initialize arrays for filtered and escaped data, respectively.
$clean = array();
$sql = array();

// Filter the name. (For simplicity, we require alphabetic names.)
if (ctype_alpha($_GET['name'])) {
    $clean['name'] = $_GET['name'];
} else {
    // The name is invalid. Do something here.
}

// Escape the name.
$sql['name'] = mysql_real_escape_string($clean['name']); 

// Construct the query.
$query = "SELECT *
          FROM   users
          WHERE  name = '{$sql['name']}'";

?>

Although the use of naming conventions can help you keep up with what has and hasn’t been filtered, as well as what has and hasn’t been escaped, a much better approach is to use prepared statements. Luckily, with PDO, PHP developers have a universal API for data access that supports prepared statements, even if the underlying database does not.

Remember, SQL injection vulnerabilities exist when the distinction between the format of an SQL query and the data used by the SQL query is not carefully maintained. With prepared statements, you can push this responsibility to the database by providing the query format and data in distinct steps:

<?php

// Provide the query format.
$query = $db->prepare('SELECT *
                       FROM   users
                       WHERE  name = :name');

// Provide the query data and execute the query.
$query->execute(array('name' => $clean['name']));

?>

The PDO manual page provides more information and examples. Prepared statements offer the strongest protection against SQL injection.

2. Know the Difference Between Comparison Operators

This is a good tip, but it is missing a practical example that demonstrates when a non-strict comparison can cause problems.

If you use strpos() to determine whether a substring exists within a string (it returns FALSE if the substring is not found), the results can be misleading:

<?php

$authors = 'Chris & Sean';

if (strpos($authors, 'Chris')) {
    echo 'Chris is an author.';
} else {
    echo 'Chris is not an author.';
}

?>

Because the substring Chris occurs at the very beginning of Chris & Sean, strpos() correctly returns 0, indicating the first position in the string. Because the conditional statement treats this as a Boolean, it evaluates to FALSE, and the condition fails. In other words, it looks like Chris is not an author, but he is!

This can be corrected with a strict comparison:

<?php

if (strpos($authors, 'Chris') !== FALSE) {
    echo 'Chris is an author.';
} else {
    echo 'Chris is not an author.';
}

?>

3. Shortcut the else

This tip accidentally stumbles upon a useful practice, which is to always initialize variables before you use them. Consider a conditional statement that determines whether a user is an administrator based on the username:

<?php

if (auth($username) == 'admin') {
    $admin = TRUE;
} else {
    $admin = FALSE;
}

?>

This seems safe enough, because it’s easy to comprehend at a glance. Imagine a slightly more elaborate example that sets variables for name and email as well, for convenience:

<?php

if (auth($username) == 'admin') {
    $name = 'Administrator';
    $email = 'admin@example.org';
    $admin = TRUE;
} else {
    /* Get the name and email from the database. */
    $query = $db->prepare('SELECT name, email
                           FROM   users
                           WHERE  username = :username');
    $query->execute(array('username' => $clean['username']));
    $result = $query->fetch(PDO::FETCH_ASSOC);
    $name = $result['name'];
    $email = $result['email'];
    $admin = FALSE;
}

?>

Because $admin is still always explicitly set to either TRUE or FALSE, all is well, but if a developer later adds an elseif, there’s an opportunity to forget:

<?php

if (auth($username) == 'admin') {
    $name = 'Administrator';
    $email = 'admin@example.org';
    $admin = TRUE;
} elseif (auth($username) == 'mod') {
    $name = 'Moderator';
    $email = 'mod@example.org';
    $moderator = TRUE;
} else {
    /* Get the name and email. */
    $query = $db->prepare('SELECT name, email
                           FROM   users
                           WHERE  username = :username');
    $query->execute(array('username' => $clean['username']));
    $result = $query->fetch(PDO::FETCH_ASSOC);
    $name = $result['name'];
    $email = $result['email'];
    $admin = FALSE;
    $moderator = FALSE;
}

?>

If a user provides a username that triggers the elseif condition, $admin is not initialized. This can lead to unwanted behavior, or worse, a security vulnerability. Additionally, a similar situation now exists for $moderator, which is not initialized in the first condition.

By first initializing $admin and $moderator, it’s easy to avoid this scenario altogether:

<?php

$admin = FALSE;
$moderator = FALSE;

if (auth($username) == 'admin') {
    $name = 'Administrator';
    $email = 'admin@example.org';
    $admin = TRUE;
} elseif (auth($username) == 'mod') {
    $name = 'Moderator';
    $email = 'mod@example.org';
    $moderator = TRUE;
} else {
    /* Get the name and email. */
    $query = $db->prepare('SELECT name, email
                           FROM   users
                           WHERE  username = :username');
    $query->execute(array('username' => $clean['username']));
    $result = $query->fetch(PDO::FETCH_ASSOC);
    $name = $result['name'];
    $email = $result['email'];
}

?>

Regardless of what the rest of the code does, it’s now clear that $admin is FALSE unless it is explicitly set to something else, and the same is true for $moderator. This also hints at another good security practice, which is to fail safely. The worst that can happen as a result of not modifying $admin or $moderator in any of the conditions is that someone who is an administrator or moderator is not treated as one.

If you want to shortcut something, and you’re feeling a little disappointed that our example includes an else, we have a bonus tip that might interest you. We’re not certain it can be considered a shortcut, but we hope it’s helpful nonetheless.

Consider a function that determines whether a user is authorized to view a particular page:

<?php

function authorized($username, $page) {
    if (!isBlacklisted($username)) {
        if (isAdmin($username)) {
            return TRUE;
        } elseif (isAllowed($username, $page)) {
            return TRUE;
        } else {
            return FALSE;
        }
    } else {
        return FALSE;
    }
}

?>

This example is actually pretty simple, because there are only three rules to consider: administrators are always allowed access; those who are blacklisted are never allowed access; and isAllowed() determines whether anyone else has access. (A special case exists when an administrator is blacklisted, but that is an unlikely possibility, so we’re ignoring it here.) We use functions for the rules to keep the code simple and to focus on the logical structure.

There are numerous ways this example can be improved. If you want to reduce the number of lines, a compound conditional can help:

<?php

function authorized($username, $page) {
    if (!isBlacklisted($username)) {
        if (isAdmin($username) || isAllowed($username, $page)) {
            return TRUE;
        } else {
            return FALSE;
        }
    } else {
        return FALSE;
    }
}

?>

In fact, you can reduce the entire function to a single compound conditional:

<?php

function authorized($username, $page) {
    if (!isBlacklisted($username) && (isAdmin($username) || isAllowed($username, $page)) {
        return TRUE;
    } else {
        return FALSE;
    }
}

?>

Finally, this can be reduced to a single return:

<?php

function authorized($username, $page) {
    return (!isBlacklisted($username) && (isAdmin($username) || isAllowed($username, $page));
}

?>

If your goal is to reduce the number of lines, you’re done. However, note that we’re using isBlacklisted(), isAdmin(), and isAllowed() as placeholders. Depending on what’s involved in making these determinations, reducing everything to a compound conditional may not be as attractive.

This brings us to our tip. A return immediately exits the function, so if you return as soon as possible, you can express these rules very simply:

<?php

function authorized($username, $page) {

    if (isBlacklisted($username)) {
        return FALSE;
    }

    if (isAdmin($username)) {
        return TRUE;
    }

    return isAllowed($username, $page);
}

?>

This uses more lines of code, but it’s very simple and unimpressive (we’re proudest of our code when it’s the least impressive). More importantly, this approach reduces the amount of context you must keep up with. For example, as soon as you’ve determined whether the user is blacklisted, you can safely forget about it. This is particularly helpful when your logic is more complicated.

4. Drop Those Brackets

Based on the content of this tip, we believe the author means “braces,” not brackets. “Curly brackets” may mean braces to some, but “brackets” universally means “square brackets.”

This tip should be unconditionally ignored. Without braces, readability and maintainability are damaged. Consider a simple example:

<?php

if (date('d M') == '21 May')
    $birthdays = array('Al Franken',
                       'Chris Shiflett',
                       'Chris Wallace',
                       'Lawrence Tureaud');

?>

If you’re good enough, smart enough, secure enough, notorious enough, or pitied enough, you might want to party on the 21st of May:

<?php

if (date('d M') == '21 May')
    $birthdays = array('Al Franken',
                       'Chris Shiflett',
                       'Chris Wallace',
                       'Lawrence Tureaud');
    party(TRUE);

?>

Without braces, this simple addition causes you to party every day. Perhaps you have the stamina for it, so the mistake is a welcome one. Hopefully, the silly example doesn’t detract from the point, which is that the excessive partying is an unintended side effect.

In order to promote the practice of dropping braces, the previous article uses short examples such as the following:

<?php

if ($gollum == 'halfling') $height --;
else $height ++;

?>

Because each condition is constrained to a single line, such mistakes might be less likely, but this leads to another problem: inconsistencies are jarring and require more time to read and comprehend. Consistency is such a valued quality that developers often abide by a coding standard even if they dislike the coding standard itself.

We recommend always using braces:

<?php

if (date('d M') == '21 May') {
    $birthdays = array('Al Franken',
                       'Chris Shiflett',
                       'Chris Wallace',
                       'Lawrence Tureaud');
    party(TRUE);
}

?>

You’re welcome to party every day, but make sure it’s deliberate, and please be sure to invite us!

5. Favor str_replace() Over ereg_replace() and preg_replace()

We hate to sound disparaging, but this tip demonstrates the sort of misunderstanding that leads to the same misuse it’s trying to prevent. It’s an obvious truth that string functions are faster at string matching than regular expression functions, but the author’s attempt to draw a corollary from this fails miserably:

If you’re using regular expressions, then ereg_replace() and preg_replace() will be much faster than str_replace().

Because str_replace() does not support pattern matching, this statement makes no sense. The choice between string functions and regular expression functions comes down to which is fit for purpose, not which is faster. If you need to match a pattern, use a regular expression function. If you need to match a string, use a string function.

6. Use Ternary Operators

The benefit of the ternary operator is debatable (there’s only one, by the way). Here is a line of code from an audit we performed recently:

<?php

$host = strlen($host) > 0 ? $host : htmlentities($host);

?>

Oops! The author actually means to escape $host if the string length is greater than zero, but instead accidentally does the opposite. Easy mistake to make? Maybe. Easy to miss during a code audit? Certainly. Concision doesn’t necessarily make the code any better.

The ternary operator may be fine for one-liners, prototypes, and templates, but we strongly believe that an ordinary conditional statement is almost always better. PHP is descriptive and verbose. We think code should be, too.

7. Memcached

Disk access is slow. Network access is slow. Databases typically use both.

Memory is fast. Using a local cache avoids the overhead of network and disk access. Combine these truths and you get memcached, a “distributed memory object caching system” originally developed for the Perl-based blogging platform LiveJournal.

If your application isn’t distributed across multiple servers, you probably don’t need memcached. Simpler caching approaches — serializing data and storing it in a temporary file, for example — can eliminate a lot of redundant work on each request. In fact, this is the sort of low-hanging fruit we consider when helping our clients tune their apps.

One of the easiest and most universal ways to cache data in memory is to use the shared memory helpers in APC, a caching system originally developed by our colleague George Schlossnagle. Consider the following example:

<?php

$feed = apc_fetch('news');

if ($feed === FALSE) {
    $feed = file_get_contents('http://example.org/news.xml');
    // Store this data in shared memory for five minutes.
    apc_store('news', $feed, 300);
}

// Do something with $feed.

?>

With this type of caching, you don’t have to wait on a remote server to send the feed data for every request. Some latency is incurred — up to five minutes in this example — but this can be adjusted to as close to real time as your app requires.

8. Use a Framework

All decisions have consequences. We appreciate frameworks — in fact, the main developers behind CakePHP and Solar work with us at OmniTI — but using one doesn’t magically make what you’re doing better.

In December, our colleague Paul Jones wrote an article for PHP Advent called The Framework as Franchise, in which he compares frameworks to business franchises. He refers to a suggestion by Michael Gerber from his book “The E-Myth Revisited”:

Gerber notes that to run a successful business, the entrepreneur needs to act as if he is going to sell his business as a franchise prototype. It is the only way the business owner can make the business operate without him being personally involved in every decision.

This is good advice. Whether you’re using a framework or defining your own standards and conventions, it’s important to consider the value from the perspective of future developers.

Although we would love to give you a universal truth, extending this idea to suggest that a framework is always appropriate isn’t something we’re willing to do. If you ask us whether you should use a framework, the best answer we could give is, “It depends.”

9. Use the Suppression Operator Correctly

Always try to avoid using the error suppression operator. In the previous article, the author states:

The @ operator is rather slow and can be costly if you need to write code with performance in mind.

Error suppression is slow. This is because PHP dynamically changes error_reporting to 0 before executing the suppressed statement, then immediately changes it back. This is expensive.

Worse, using the error suppression operator makes it difficult to track down the root cause of a problem.

The previous article uses the following example to support the practice of assigning a variable by reference when it is unknown if $albus is set:

<?php

$albert =& $albus;

?>

Although this works — for now — relying on strange, undocumented behavior without a very good understanding of why it works is a good way to introduce bugs. Because $albert is assigned to $albus by reference, future modifications to $albus will also modify $albert.

A much better solution is to use isset(), with braces:

<?php

if (!isset($albus)) {
    $albert = NULL;
}

?>

Assigning $albert to NULL is the same as assigning it to a nonexistent reference, but being explicit greatly improves the clarity of the code and avoids the referential relationship between the two variables.

If you inherit code that uses the error suppression operator excessively, we’ve got a bonus tip for you. There is a new PECL extension called Scream that disables error suppression.

10. Use isset() Instead of strlen()

This is actually a neat trick, although the previous article completely fails to explain it. Here is the missing example:

<?php

if (isset($username[5])) {
    // The username is at least six characters long.
}

?>

When you treat strings as arrays, each character in the string is an element in the array. By determining whether a particular element exists, you can determine whether the string is at least that many characters long. (Note that the first character is element 0, so $username[5] is the sixth character in $username.)

The reason this is slightly faster than strlen() is complicated. The simple explanation is that strlen() is a function, and isset() is a language construct. Generally speaking, calling a function is more expensive than using a language construct.

This flimsy one-page document is more important than many people think: the résumé is the first portfolio piece that potential employers see, and if they’re not impressed, chances are they won’t look at the rest of your portfolio. “But I’m not a print designer!” you moan. It doesn’t matter, and I don’t want to hear your excuses! You need to conquer this, because if you’re a great Web designer, you don’t want your first impression to be mediocre.

The Steve Stevenson Challenge

Everyone likes a competition. How about one in which ten good Web designers have to design the same résumé in only a few hours? Meet Steven Stevenson.

Steven Stevenson, a fictional Web designer, doesn’t have a résumé. The competition: each designer must translate his work experience, education and interests into their own unique style. Watch and learn, people. At the end is a summary of good tips for Web designer résumés. (If you’re interested in taking the challenge yourself, check out misterstevenson.com for all the rules these designers followed, Steven Stevenson’s raw data and the chance to add your own entry.)

And in no particular order, here are the contestants’ entries!

Contest Entries

Sam Brown made a real effort to distinguish between the three main components of Steve Stevenson’s life and adds a touch of personality with some handwritten text and highlighting. He shows he isn’t afraid to mix media but manages to do so in an elegant, fun way.
Download the PDF | Download the source file (.ai)

Ali Felski’s design is beautiful and simple, but manages to convey Steve Stevenson’s strong design skills. Her usage of colour is muted, but appropriate, and she’s left out a lot of extra information that could clutter up this one page document. Ali is also aware of the boundaries of the medium. She says, “A résumé should be designed well, but just like the Web, it has constraints, and even as designers, we should respect them.”
Download the PDF | Download the source file (.eps)

Chris Spooner opts for a purely typographic, clean design that showcases his ability to display information without the need for adornment. Clean design is a skill that Steve Stevenson may possibly need should he be looking for a corporate Web design job, in which case he’d need to present something simple and professional.
Download the PDF

Niamh Redmond makes Steve Stevenson’s résumé stand out by choosing a landscape-style document with well-divided content and good branding. Niamh says about her design: “My aim was to design something in which each element served a function. Every shape and line, the colors and their use, the font variations and text sizes were chosen to communicate something to the reader.”
Download the PDF | Download the source file (.eps)

Eva-Lotta Lamm chose to keep her résumé simple and typographic: “The only illustrative element is Steve’s little logo (playing with the nice alliteration of his first and last name). It is repeated as a small blue dot to separate different section sin the résumé.” The result is a beautiful, yet simple piece, which is easy to follow.
Download the PDF

Sarah Parmenter goes with a solid yellow background and a very prominent photo of Steven Stevenson (who is quite cute!). She breaks up the copy and puts emphasis on his freelance work.
Download the PDF | Download the source file (.ai)

Wez Maynard has simplified the information and given it lots of room to breath. His design could easily be used as a Web design. He’s also given a lot of space and prominence to branding and has effectively separated the freelance work from the work experience.
Download the PDF

Luc Pestille has added some great imagery without making it unprintable. He’s allowed spaces for a photo and company logos, and he brings in arty spray-painting. While most likely inappropriate for a corporate work environment, it is playfully suited to a funkier job opportunity.
Download the PDF | Download the source file (.ai)

Ollie Kav chose to use Steve Stevenson’s love of Japanese culture to organize his résumé. These personal touches give the CV a huge dose of personality, which would give employers something interesting to speak with him about in the interview. “I’ve based the design on the signage in the Tokyo subway stations, which has bright bold colors,” Ollie says. This boldness makes for a resume that shows Steve Stevenson’s confidence and passion.
Download the PDF | Download the source file (.indd)

Albert Lo has broken an important rule by making his résumé virtually unprintable. But he has also organized the information very differently: chronologically, with awards, skills and work all intertwined, just as they would be in real life. Albert says his inspiration came from listening to house and trance; his colors and illustration really communicate the type of designer he is.
Download the PDF

You can download all of these entries in a handy ZIP file (5 Mb). Thanks to all designers for their participation!

10 Useful Tips For A Great Résumé Design

Let’s now take a look at some useful ideas and guidelines that – in our humble opinion – may help you to achieve a great, compact and beautiful CV.

1. Make It a Summary

Your résumé needs to tell an employer (at a quick glance) the details most relevant to him or her. This means the whole thing should fit on one page! If you’re a Web designer, keeping it short and punchy is even more important. Sure, writing for Web is different than writing for print, but by showing your potential employer that you can keep things concise, you are actually showcasing an important Web skill. Besides, you need to leave something to talk about in the interview!

2. Keep It Simple and Understandable

When designing a CV, remember first and foremost that you are a designer, but don’t go overboard. Many people over-design their résumé. It’s a chronic problem: they’ll add so many fancy bits that the actual content gets lost. Most design jobs are all about your ability to organize content, so simplify, simplify, simplify!

But that doesn’t mean boring either. “Simple doesn’t mean simplistic; simple is hard to achieve,” says Niamh. Remember that you are applying for a design job, not to become a managerial assistant or to compete in an art college creativity competition.

3. Leave Some Details Out

Some people include their entire life history and every personal detail on their résumé. Your job as a clerk at the corner store 10 years ago won’t ever get you a job in Web design. Mentioning it only takes focus away from your relevant work experience. Keep your marital status, age and grades off, too. What if a potential employer wants to see your grades? Wez Maynard offers some great advice about this: “If the employer wants to judge you on your grades and not your portfolio, believe me, you do not want to work for them.”

4. Make It Perfect

You are a professional, so attention to detail is critical. Everything on your CV should line up, every pixel should be absolutely perfect. And even though the job is not to be a writer, a large proportion of employers throw away résumés with spelling or grammatical mistakes in them. By making it perfect, you are showing potential employers that you aren’t sloppy and that you will care about every detail of their projects. Get 10 people who can spell to look it over. Just do it.

5. Use a Grid

Over and over, Web designers scream about “the grid.” Why is the grid so important for a Web designer’s résumé? If you’re applying for a design job, the employer will most likely have an understanding of grids and baseline grids. “If you’re not using a grid, you run the risk of giving the impression that you don’t have an understanding of basic design principles,” Olliekav warns us. For those employers with no design background, grids make your résumé look cleaner and more organized.

6. Make It Printable

When working on designs for websites, you are allowed to have dark, moody and texture-heavy backgrounds. They look fantastic on your browser, but they are simply inappropriate for résumés. Most CVs are printed out and given to hiring managers in batches, but not everyone has a photo-quality color printer; and, without contrast, your background-heavy résumé will become illegible.

So make sure your résumé

1. matches the paper size for your country (letter size for the US and A4 for the UK, for example), so that employers don’t have to make any adjustments before printing,
2. has a white background,
3. looks okay in black and white,
4. will print well at 300 dpi. The best way to avoid a pixelated result is to create a PDF with embedded fonts.

7. Link to Your Online Projects

Displaying URLs for your projects is crucial. If the employer will be viewing the résumé as a PDF, link the URLs back to your portfolio (using anchors if it is very long) or the projects themselves. Here’s how to create links in a PDF document.

(Many of the designers in the Steve Stevenson challenge noted that they would have done this, but because the applicant is fictional, the links wouldn’t have gone anywhere!)

Once your résumé is printed out, it should serve as a quick reference for potential employers to check out your projects. So, spell out the URLs alongside your project descriptions. You don’t need the http://www at the beginning of each URL, though.

8. Don’t Use a Template

A little inspiration here and there never hurt anyone. But imagine you submitted a résumé and it was the exact same as someone else’s? Gosh, would your face be red. If you are a Web designer, you probably wouldn’t want to use a template for your portfolio website either. Take some time and think about the impression you want to make: I bet it isn’t that you can enter data into a template.

9. Update it often

Résumés are an often neglected aspect of a web designer’s portfolio. Make sure you update it every time you update your portfolio and make it accessible from your portfolio.

10. Show Your Personality

You are a designer, so I hope you have your own style. Steve Stevenson, from his interests, sounds like an interesting guy. Olliekav used his love of Japanese culture to give his résumé a personal touch without going overboard. If the job you’re applying for requires a lot of creative thinking, the employer wants to know you’re not a pixel pusher or a drone. Let them know you have personality, a sense of humor and a sense of style.

Bonus: If You’re Going to Break the Rules, Do It Well

Albert’s resume is completely unprintable, but it’s also absolutely beautiful. If you’re going to take risks like this, make sure you’re willing to alienate a few haters en route to more creative employers who will appreciate your ability to think outside of the box. Always make sure you’re aware of the rules, and break them cautiously. Done right, you’ll shine from the crowd.

The résumé is an oft-neglected piece of the Web designer’s portfolio. Make sure you update yours every time you update your portfolio, and make it accessible from your portfolio.

Web design has significantly improved over the last years. It’s more user-friendly and more appealing today — and there is a good reason behind it: over the years we’ve found out that design with focus on usability and user experience is just more effective. Modern cut-edge design isn’t filled with loud happy talk and blinking advertisements. We’ve learnt to initiate the dialogue with visitors, involve them into discussions and gain their trust by addressing their needs and speaking with them honestly and directly.

Few weeks ago we’ve presented 10 Principles Of Effective Web Design — a comprehensive article about effective web design and provided you with insights about how users actually think as well as with some examples of how effective designs can be achieved.

This article highlights 5 further principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

Please notice that you might be interested in the following usability-related articles:

• 10 Usability Nightmares showcases usability nightmares you should avoid when designing functional and usable web-sites,
• 30 Usability Issues explains important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood.

1. Use an effective marketing principle

In order to sell a product or a service you need to be able to effectively inititate the dialogue with random visitors of your site. Since your visitors have actually come to your site, they are willing to hear to you and learn what you have to offer. So how do you approach this potential clientele to maximize your earning at the end of the month?

Suggested by Strong in 1925, AIDA is the effective marketing model which describes a common list of events that are very often undergone when a person is selling a product or service:

• A - Attention (Awareness): attract the attention of the customer.
• I - Interest: raise customer interest by demonstrating features, advantages, and benefits.
• D - Desire: convince customers that they want and desire the product or service and that it will satisfy their needs.
• A - Action: lead customers towards taking action and/or purchasing.
• Nowadays some have added another letter to form AIDA(S): S - Satisfaction - satisfy the customer so they become a repeat customer and give referrals to a product.

In this context customers should notice that AIDA is usually the way how potential buyers are tricked into buying products or services they actually don’t need. To gain users’ trust designers need to make sure that the site provides genuine information and there is no hidden context in which the content can be understood in a different way.

It’s also more effective to offer visitors concrete arguments, situations and ideas of how a product or a service can be used instead of bombarding them with loud and empty ad-slogans.

Consider the example presented above. traffik follows the AIDA principle. If the visitors expect some information about a Content Management System they expectation is immediately confirmed with a brief introduction at the top of the site. Thus, potential customers are attracted and remain on the site (Attraction, a). The interest is then raised by showcasing features and benefits of the product (Interest, i).

To communicate how the service will satisfy user’s needs the brown info-block at the right hand at the bottom of the page is used (Desire, d). Finally the users are guided to “Take the tour” and “Free 30 day trial” buttons which attempt to lead customers towards purchasing (Action, a).

A lot of other models are known in order to sell, e.g. the BOSCH-Formula (developed by Peter Hubert):

• Be inquisitive, ask open questions
• Offer solutions, talk about the endresult benefits for the customer
• Stimulate the senses, let the customer test your product
• Cross your sales, think of all the necessary accessories
• Hit the closing point, sell when the customer is ready to buy.

2. Experiment with few colors

Dark body copy on white background and light body copy on black background are passive. Vibrant colors can help to highlight some specific elements of the site which you’d like to point users’ attention to.

However, you don’t need to use a vibrant palette to create an effective web design. Sometimes it’s useful to pick a moderate number of colors and use them efficiently. Thus your visitors will immediately see what’s more important. It will also be easier for you to focus their attention on the most important areas of the site.

Sidebarecreative.com uses only one dominant vibrant color — blue color stands for links, buttons and clickable elements. White stands for important information which summarizes the content of the current page. The rest is the content of the site with some light blueish hover effects. Excellent, modest and expressive use of colors. That’s effective.

Wilson Miner uses green, blue and pink. The dominating green color looks fresh and comforting. Blue stands for the links and pink for the hover effect. Notice the structure of the site. Although only few colors are actually used, one can immediately recognize clickable areas and detect the different sections of the site.

3. Strive for Balance

In web design balance is important because it provides users with some sense of closure and gives the feeling of permanence and stability. Balanced designs are easier to digest and to understand, because they create a visual hierarchy which clearly displays what is more important on the web-site and what is less important.

Source: The Elements of Design Applied to the Web

Apple’s design is probably one of the best examples of the symmetrical (also called formal) balance. Single design elements have either very distinctive (above) or very similar (below) weight. They are placed on both sides of an imaginary vertical line on the page which goes through the middle of the user’s screen. The design is rather static and restful which makes it easier for the visitors to comprehend the information which is presented through it. Result: balance creates a simple visual harmony.

Why is Apple’s design so efficient? Because it’s user-centric and product-centric. The design of Apple’s site resembles a theatre stage where visitors are the audience and the product is the entertainer. Notice that the site presents only the product and nothing else. Apple manages to initiate the dialogue offering only most important options.

Signalfeuer.info uses an asymmetrical (informal) balance which allows for the more dynamic use of white space (and this is probably the main advantage of asymmetrical balance). The left block is smaller than the right one, however the site offers a very strong balance by using an impressive and balanced grid. Also the choice of colors is quite impressive.

According to the article Principles of Design, “asymmetrical balance may be unequal in position and intensity. To create asymmetrical balance, there must be an increase in intensity to compensate for the change in position. Intensity can be increased by changing size, shape, or tone. For a particular job, the designer might choose to position the elements to one side of the picture plane. The white space opposing must then act as a counter-balancing force.”

This is exactly what has been done on Avalonstar.com. Notice the different shapes of blocks and “hanging” heading of the blocks. White space functions as a counter-balancing force to the content presented on the right.

Grid-based approach can be helpful or even necessary for achieving balanced design layouts.

4. Strive for Clarity

Independently of the design approach, the clarity of both layout and presented information should be given one of the highest priorities in the design process. If there is any chance of misunderstandings and ambiguious titles make sure to get rid of them or specifiy explicitly what is meant. Being more specific is usually better than being less specific.

To achieve clarity you don’t need to make use of “standard” design layouts or basic templates. Risk design experiments if you want to, but keep the clear visual hierarchy and structure of the site’s content in mind. The more organized your categories are, the easier it will be for your visitors to find their path through your site.

Hovie.com displays an unusual yet very clear design solution. The site consists of five blocks; the first one stands for the main menu which appears when the site is loaded. Sub-menu appears when some section in the main menu is selected.

The current position is displayed by arrows next to the selected option in the navigation menu. In the content area a brief description and the caption of the images displayed above is presented. The design is consistent throughout all pages. Is there any possibilty to somehow misunderstand the design? Not really. That’s simple, clear and effective.

Another example: Astheria.com focuses on white space and has a balanced grid-based design solution. Although the design is rather subtle and uses only one appealing color, you can see immediately where you are now and what options are available. Power of typography at its best. Unfortunately, the site doesn’t display which links have already been visited (Update: Kyle Meyer has added :visited-state now).

5. Address your users’ needs

As web-developer you have the primary task to comfort your visitors, addressing their needs and providing them with sufficient clues for seamless and intuitive navigation. However, to achieve this you need more than just considering an average profile of your users and stick to the decision he/she will be happy with.

To maximize your exposure you have to consider various types and profiles of your visitors. You need to identify major groups and offer each group the functionality its members would be comfortable with. That doesn’t mean that you need to create multiple versions of your web-site; it rather means that you can integrate multiple levels of user interaction in one single design layout.

For instance, according to Shneiderman’s principles of User Interface Design, it’s important to enable frequent users to use shortcuts — to increase the pace of interaction use abbreviations, special keys, hidden commands etc.

Ffffound.com offers both usual navigation and a Javascript-based keyboard navigation. This functionality is not directly seen to newbies who can browse through the site in a usual manner. Advanced users, however, are able to navigate more efficiently. Of course, you need to make it explicit and clear how to use any advanced functionality and what benefits it offers.

Another possibilities would be bookmarklets, toolbars or some specific tools such as e.g. Flickr uploader. Offering these tools you’ll offer your users easier ways to use your service and they’ll have no need to search for alternatives.

Conclusion

Effective web design doesn’t have to be colorful and pretty — it needs to be clear and intuitive. Make sure you help your visitors to understand the benefits of your web-site and offer them an easy way to explore and use your site.

Symmetrical and asymmetrical balance can be helpful in achieving a solid and clear design solution and thus provide a foundation for rich user interaction. To maximize your exposure, consider different types of users and offer them multiple levels of user interaction which would bring them back to your site.