By Robert Bowen

With so many blogs riddling the online landscape, blog owners are always looking for new ways to strengthen their relationship with readers—to engage readers so that they not only appreciate the bloggers’ efforts but come back time and again to read and contribute to the website. Some of these websites engage us so much that we begin to crave the feeling of being on them, and we make them a daily haunt.

This reader engagement is becoming ever more important, because the growing number of blogs could lead to a decline in your own readership, as attention becomes increasingly fragmented among all the exciting new spots. If your readers seem disconnected from your website, they might be lured away for good by a blogger who puts more thought and effort into capturing and holding their attention. If you keep your website engrossing and accessible, you’ll be sure to remain on your readers’ minds, regardless of how many other blogs creep into their RSS reader.

So, the question is, how do we accomplish this? There are many different approaches. Given the diversity and size of the online audience, try a multi-layered approach, rather than going in a single direction. Covering as many bases as possible is always best if you expect to succeed in your blogging venture. Below are a few things you can do to enhance your website’s appeal.

Also consider our previous articles:

• 10 Harsh Truths About Corporate Blogging

  Check out this useful post that sheds light on some of the harsh realities of blogging for a corporation.

• The Death of the Boring Blog Post?

  Here is another awesome post from the Smashing vaults about creating blog content that resonates with style.

Create Engaging Content

People have said it virtually everywhere across the Web: content is king! It is the biggest draw to your website and the widest avenue to connecting with readers. Be sure to deliver content that your readers want. An easy way to get an idea of what readers are looking for is to track traffic through your website’s analytics. This is an easy way to gauge how to develop content when you are still finding a following. This way, your content stays relevant to those who stop by.

In order to engage your audience, you will have to do two things consistently. First, you will have to stay informed about your topic so that you do not lose credibility with readers. If you lose that trust, regaining it is very hard. Secondly, you must always be thoughtful in your presentation of material. If the posts are not thought-provoking and do not spark dialog, but just dryly present your perspective, you are less likely to engage your audience.

These are proven ways to engage your readers and strengthen their relationship to your website. The website may look great, which is what led some readers to you, but the content is its heart, and without it pumping out a strong and steady flow, the blog’s pulse will weaken and fade.

Be Helpful

Chances are, your readers are looking for something specific when they arrive on your website, whether helpful tips, tools, etc. If you can deliver that, then they’re likely to stick around and trust your brand. Readers respond to bloggers who take the time to provide useful posts that benefit them in some way, and they shirk from bloggers whose posts present nothing but inspirational collections, with no commentary other than, “Here, get inspired!” While such blogs can be helpful at times when inspiration is low, without offering a balance of content, a blogger will not engage their audience.

Engaging readers won’t happen simply by throwing information at them. Lend a helping hand to those who find their way to you. Give them a strong impression of your website and brand, which will in turn reinforce your relationship. You demonstrate a lot when you take the time to teach others skills you have learned or share resources that would help them grow in their field. Your readers will not soon forget it.

Listen And Adapt

Another proven way to engage readers is to actively cultivate your relationship with them. Take a proactive approach and find out from readers just what they are looking for. The concept is pretty basic and will eliminate a lot of guesswork in figuring out how to engage your audience. Just ask them directly what they would like to see from your website. Beyond that, listen to what they say. Readers are usually very forthcoming when they know they will be listened to, and they enjoy the kind of interaction that gives them a sense that they can influence the direction of the blog.

But if you open up this channel of communication, then you need to be fully prepared to follow through on it and seriously consider and respond to your readers’ ideas and feedback. It is not enough simply to ask for your audience’s input and then let the ball drop. You want to demonstrate that you are reflecting on their suggestions and acting on them. Being able to adapt to user input is essential, otherwise your relationship with readers could work against you.

Make It Personal

One method that several websites have followed to engage readers is to give them a peek at the people behind the scenes. Don’t be afraid to get a little personal, without crossing the line and offering so much information that it starts getting uncomfortable. Essentially, this is a way to share your personal experiences with readers and invite them to get to know more about the person they are engaging with.

Also, through the experiences you share, others will gain valuable insight into your processes, allowing them to incorporate any time- or headache-saving strategies into their own routines. You would miss out on this connection with readers is you did not inject any personality into your blog. Make yourself available, and invite readers to get more out of the experience than they would from other blogs. Readers like being able to put a face to a website. It instills trust.

Show Appreciation

Just as soliciting input demonstrates that you value your audience’s opinion, showing appreciation also has a positive effect. Without an audience, your blog will fall flat, so they are obviously integral to your success. Doing whatever you can to show how much you value their participation is a proven way to strengthen your relationship with readers for the simple fact that you are enabling them to get more out of the website. You are opening up another avenue to your blog, and if other websites fail to do the same, users will spend more time on yours.

Freebies, especially exclusive ones, are a fantastic way to show appreciation. Unlike list posts that simply compile freebies from around the Web, rewards that are unique to your blog score big points with readers. Granted, lists of fabulous freebies available elsewhere are also appreciated, just not as much. Arranging contests that give readers exciting opportunities to get their hands on new apps or services related to their field is also a brilliant way to foster your relationship with readers.

The most important thing is never to take your readers for granted, and showing your appreciation is an easy way to ensure that they never feel that they are.

Make The Comment Section User-Friendly

One of your blog’s main draws will naturally be the content, and if you expect readers to get the most out of each post, then they will need to be able to comment and expand on it by discussing the ideas with you and other readers. Thus, the comment section is more than a tool to evaluate content. It allows readers to expand on the ideas in the main content. So, offer a pleasant, non-confrontational space for them to openly share and discuss their ideas. Be sure to keep the conversation friendly and productive.

Of course, anytime you broach the subject of censoring comments, some will voice opposition. But if you moderate comments for the purpose of shielding readers from disrespect arising simply from their desire to share their thoughts, then you know you’re doing it for the right reasons. The last thing you want is for readers to feel that they cannot comfortably start a dialog for fear of being berated by people whose only interest is to troll. So, try to maintain some control over the comment section.

Be Social

Another way to improve your relationship with readers is to be social through the various networks that they populate. Social media offers website operators and users a unique opportunity to connect on different levels and gain insight into each other. Being active not only will reinforce your relationship with established readers but will expand the reach of your blog and bring in new users. Given these dual benefits, working this into your day could be an invaluable addition to your routine.

This is an area of contention in the design community: some do not believe that social media can benefit your blog or readership, while others swear by their usefulness. Having had many conversations on various blogs and a few social networks about this, I’ve found a consensus that social networking can be extremely beneficial to your blog if done in a truly social spirit and conducted in an interactive, give-and-take fashion. Perhaps this isn’t for you, then, but others will certainly reap the rewards of being more social with their readers, the main reward being improved relationships.

Websites That Get It Right

Below are a few blogs that are building relationships with their readers the right way. They focus on the overall user experience of their website, enabling readers to get more out of it than just the regular content.

Tuts+

Envato has an entire network of websites dedicated to helping out the online design community with useful tutorials and articles.

Tutorial 9

Another website that delivers helpful content to the online masses, accompanied by a social presence to further its reach.

Tripping Words

When it comes to posting engaging content and keeping the conversation going, this website is nearly unrivalled in the blogosphere.

Design Informer

Another great blog whose content is always engaging and whose social media presence always add to the experience.

Echo Enduring Blog

Another fantastic blog, with thoughtful content that always sparks discussion and engages readers.

CSS Tricks

When it comes to enriching the community with useful information, this blog is brilliant. It has a knack for making sense of any topic.

MyInkBlog

Another socially active, must-see website. The posts pull readers into a discussion, while allowing them to fully digest the content.

Further Resources

We have collected a few posts that provide further insight on approaches you can take with your blog.

• 7 Ways to Engage Readers of a Business Blog

  ProBlogger has a great post about engaging readers of a business blog, covering seven methods for success.

• Engaging Readers to Comment on Blogs and Social Networks

  Spider Writers has an awesome post about using engaging content to get readers to comment on your website or through social media.

• How to Engage Readers and Build Amazing Community Around Your Blog

  Blog Design Studio has another fabulous read on building a community of readers around your blog.

• Five Ways to Better Engage Readers on Your Blog

  Freelance Folder has also tackled this topic and brought some great advice to the conversation.

• How to Write Engaging Blogs People Want to Read

  Web Pro News has a useful article offering ways to write more engaging content for your blog.

• A 60-Second Guide to Engaging Your Readers

  Confident Writing also shares some wonderful advice on creating content that engages readers.

(al)

The rise of jQuery, MooTools, and JavaScript frameworks has given many web designers a new lease on life, adding more unique functionality into their sites.

Most notably among the various cool and interesting features you can find being injected into a design is the humble lightbox (modal window).

If you’ve ever come across a link or image which — upon clicking — increases in size and where the rest of the screen gets "shaded" to focus on the content, you’ll know what I’m talking about.

This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all. Sound like fun? Well, let’s explore the subject further!

Demonstration

Click the preview image below to see a live demonstration.

What About Scripting?

There’s a lot to be said about the benefits of using client-side scripting for this. While we are certainly not in the cut-and-paste era that leads to the kind of crimes against JavaScript many coders would like to see punished, we do, to this day, still have an uncomfortable reliance on scripts and frameworks in order for our websites to function.

Perhaps it seems a little hypocritical in this instance for me to critique the use of scripting (as Internet Explorer users will require scripting enabled to use this functionality), but like all things, we sometimes need to compromise our code to ensure compatibility (especially with that browser)!

Why Not Just Use JavaScript?

In the sense of the current scripting frameworks, I’m not going to say that they are inherently bad because the likes of jQuery often gracefully degrade with good levels of success — you guys can put away the knives and flame-lit torches now!

However, the sad facts are that, due to security issues, widespread abuse and the intrusive potential of client-side scripting, it’s quite easy to understand why a large number of people do not (or cannot) make use of scripting.

Therefore, a solution is required. And hopefully for you CSS3 fans, you’ll find this simple, easy-to-use code to be a welcome improvement.

Browser Support of this CSS Lightbox

To give you a quick introduction before we begin producing the code itself, it’s worth mentioning that I’ve tried the code in a variety of browsers and can say for sure that it works in all recent versions of Mozilla Firefox, Google Chrome, Apple Safari and Opera (which is all great news).

With a little bit of unobtrusive scripting that replicates the CSS3 techniques, it’ll also run smoothly within IE 6, 7 and 8.

The other fantastic news is that current test versions of IE9 support CSS3, so this may very well be the best JavaScript-free solution there is in the near future.

Internet Explorer is the usual culprit when it comes to lacking in standards support.

Magic Markup!

To begin our quest for a much more compatible lightbox, the first thing we need is some general HTML markup.

Much of the below won’t surprise you in the slightest as it’s pretty standard. However, for this example, and to showcase how durable this cool method is, we’ll produce three individual lightboxes.

One will be for an image, one will be for a block of scrollable content and the final one will hold a YouTube video. What more could you ask for?

To begin, let’s create the basics and have three fragment links which will go to the correct lightbox (you’ll learn how a bit later on).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS Lightbox</title>
</head>
<body>
<h1>CSS Lightbox</h1>
<p>You can use this fantastic solution to create lightboxes for not just <a href="#image" title="Image Lightbox">images</a> but rich, semantic <a href="#content" title="Content Lightbox">content</a> and <a href="#video" title="Video Lightbox">video's</a> as well!</p>
</body>
</html>

Not much going on at this stage, a simple HTML document with extra links.

So far, things are pretty simple; you have a heading and paragraph with some links that, upon clicking, will currently do nothing.

The next stage in the process, however, is all important.

We need to add the container for each lightbox to appear within and give them their appropriate values.

To give you an idea as to how each of the three lightboxes work, you’ll need to examine (and add) the code into your source code editor.

To better understand how it works, let’s talk about each item individually.

<div class="lightbox" id="image">
<div class="w300 h60">
<img alt="Six Revisions" height="98" width="255" src="logo.jpg />
</div>
<p class="close"><a href="#" title="Close This Image Lightbox">Close <span>X</span></a></p>
</div>

Each lightbox you wish to provide will require a div element container that contains the id attribute you wish to link too. That id will reference what you’ll need to attach to the href anchor to start the navigation process, not forgetting you’ll also need the lightbox class value on each you include.

Are you with me so far? Good!

Once you have the container that references the lightbox, you’ll need to include both a div (which will hold the lightbox content and will have the width and height declared through class values like in the above) and a paragraph with an anchor to act as the "shader".

Using the above source code, you should find yourself with a working lightbox that contains an image. In this example, I used the Six Revisions logo.

You can indeed link to any image of any size, taking into account the viewport space available.

A Little Bit More About the "Shader"

To better understand how this gets its visual appearance, the secondary div layer works independently from the close anchor which filters in the background. It’s essentially a cascading/tiling effect at work.

The first lightbox has appeared, and it contains an image.

If you look at any modern lightbox, the most common characteristic you will see is that you have a semi-transparent layer which covers over the rest of the page drawing focus to the lightbox content. Upon clicking on this layer, it will return you to the page. This is the very reason why each lightbox requires a closing anchor.

What Should the href Value Be?

The great thing is that you could even link the href to another lightbox if you wanted it to do something other than close (using the null fragment link).

What Can the divs Contain?

As for what’s inside the div, it’s entirely up to you. You can use any block or inline elements (the lightbox will house any HTML element).

In the first example, we had an image; let’s add some content within the code:

<div class="lightbox" id="content">
<div class="w60p h400 scroll">
<h2>Your Content Goes Here!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis felis suscipit tellus euismod varius quis ut nibh. Curabitur in ante nunc, vitae venenatis dui. Phasellus egestas ipsum in ipsum suscipit volutpat. Etiam eu nibh eros. Sed dolor ligula, tincidunt vitae elementum vitae, pharetra vitae eros. Cras risus lectus, aliquam vitae condimentum id, feugiat eu nisi. Cras eu sem erat, eget ultrices enim. Suspendisse feugiat fringilla massa at convallis. Quisque tincidunt, diam quis facilisis volutpat, purus orci rutrum leo, id dapibus tellus ante vel mauris. Quisque posuere, tortor in laoreet hendrerit, ipsum sem molestie nunc, et ultrices erat nulla sed dui. Donec sit amet mi sapien. Maecenas fermentum nulla eu ligula dictum id elementum nisi commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac massa quam. Suspendisse nibh nibh, condimentum a porttitor a, placerat in lorem. Sed sit amet elit eget magna condimentum posuere volutpat a neque.</p>
<p>Sed dignissim viverra neque, sit amet lobortis elit luctus ac. Proin placerat varius quam eu molestie. Pellentesque vel ante quis metus auctor convallis. Duis mattis risus ac tortor luctus in semper sem fringilla. Vestibulum consectetur iaculis risus vel rutrum. Nam scelerisque gravida felis quis egestas. Mauris vehicula nisl quis felis bibendum nec placerat neque dictum. Donec erat tortor, venenatis id consequat ut, dictum nec enim. Ut ultrices eros vel diam pulvinar aliquam. Phasellus non nisi vitae ligula imperdiet dapibus eleifend sed neque. Morbi gravida dignissim turpis eu auctor. Morbi pellentesque urna vitae nunc dictum elementum. Aliquam erat volutpat. Aenean urna nibh, pretium ut accumsan ut, luctus eget nibh. Nulla sollicitudin fermentum turpis eget rutrum. Integer dignissim dui turpis. Morbi metus libero, suscipit blandit dignissim aliquam, sodales non mi. Proin id augue odio, sit amet gravida mauris.</p>
<p>Proin a dignissim orci. Nam nec urna nisi, in blandit lorem. Nulla cursus ornare rhoncus. Nunc lectus orci, tristique et aliquet sed, venenatis et felis. Nullam sodales orci at est pharetra nec aliquam risus scelerisque. Nullam varius, nisi ut sagittis scelerisque, nulla mauris tempus magna, quis pellentesque sem erat a diam. Cras lectus est, dictum ut consequat ut, adipiscing sit amet sapien. Curabitur tincidunt varius gravida. Quisque augue sem, commodo sed molestie venenatis, cursus vehicula lorem. Praesent scelerisque, tortor a euismod malesuada, ipsum ligula semper odio, ultricies molestie sapien metus condimentum felis. Vivamus hendrerit gravida interdum. Fusce at purus eu orci laoreet lobortis. Aliquam cursus mi at tellus fringilla dictum. Sed nec libero dolor. Integer nec neque at mi malesuada tincidunt.</p>
</div>
<p class="close"><a href="#" title="Close This Content Lightbox">Close <span>X</span></a></p>
</div>

For all whom understand the value of dummies, some Lipsum content is added.

Add a YouTube Video

And to round things off even further, let’s add a YouTube video into the mix:

<div class="lightbox" id="video">
<div class="w640 h386">
<object type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/bsGEWHNJ3s8"><param name="movie" value="http://www.youtube.com/v/bsGEWHNJ3s8" /></object>
</div>
<p class="close"><a href="#" title="Close This Video Lightbox">Close <span>X</span></a></p>
</div>

Video on demand, that’ll work in the lightbox too! Pretty cool isn’t it?

At this stage, we have completed the entire HTML file that this demonstration will use.

If you want to preview the results in your web browser, you’ll notice that as well as the heading and paragraph, there will now be the three pieces of information on the page (the image, the content block and the video), each with a "Close" link right below it.

Right on :target

At this stage, you’re probably wondering how we’re going to ensure that only the right content appears when it’s needed. And that’s a good question! We are going to use a cool CSS3 pseudo-selector called :target (which styles based on the anchor).

Perhaps you’ve come across the :target selector before, perhaps not. Basically, it cleverly allows you to apply specific style to an element if its id matches the fragment identifier, which is the hash (#) symbol followed by text usually found in page bookmarks. For example: index.html#content (you’ll see it in the address bar).

So, without any further ado, it’s time we began formatting our lightbox to perform the required task whenever this fantastic selector is activated.

You now know why we give the three links in the first piece of code those unique URLs (and gave each div a matching id).

Fragment links are best indicated by the # (hash) character at the end of a URL.

For the following piece of code, I’ll provide everything you need using a style element within the <head> of the document.

Generally, this is considered bad practice because all CSS styles should be separated from the structure. However, as this is simply an example and it works unobtrusively, you can easily place all of the stylistic code in an external file. For simplicity, I’ll keep it in-line.

To begin, we’ll start by adding in the easy-to-follow snippets of code such as removing the padding and margins from the document. Also, we’ll hide the lightboxes off-screen until they’re required using some absolute positioning and negative margins.

<style type="text/css">
html, body { height: 100%; overflow: hidden; width: 100%;  }
body { overflow-y: auto; }
</style>

Note: It is entirely possible for you to hide your three lightboxes when they’re not in use using the property display: none. However, as this can affect how some screen reading software will interact with your page, I’ve used negative positioning to get the same effect.

With lightboxes offset, things disappear.

Upon refreshing your browser at this stage, you’ll notice that the three previously visible lightboxes will be hidden, which is great.

However, when you click on the links, nothing happens! Don’t worry, your lightbox isn’t broken.

All we need to do is add in the code to activate the two layers (the “close this” lightbox anchor, that gives the fade effect and the lightbox content itself).

.lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
.close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
.close {text-indent: -999em;}

Keeping things simple, the above code will span the lightbox to every corner of the browser viewport using absolute positioning.

The second line of code will reinforce this code on the anchor itself and will give it a z-index (for priority over the other stuff on the page) and a background which makes use of opacity in browsers that natively support CSS3 alpha transparency.

The third line will use the span element on the "close" button to give it some emphasis for people to know that clicking in the anchor closes the lightbox.

The last line will hide the text in the faded section (for full effect).

Note: It’s worth pointing out that if your content scrolls and you wish the lightbox to follow the scroll action, you can replace position: absolute with position: fixed, however IE6 will not support it. For the example, I’ve used absolute positioning for simplicity and to showcase its potential usage.

Now when you click on a lightbox link, the transparency effect flourishes.

If you refresh your browser with the above code, you’ll notice upon clicking any element that you get that amazing faded effect which will span the entire content. And you should also have a neat little "X" button in the top-right corner just to help reinforce the effect upon clicking outside of the lightbox.

The problem now is we need to get the lightbox contents itself positioned correctly and looking great on the screen.

So below, you’ll find the last bits of CSS to align the content and offset it based on the width of the contents specified.

.lightbox:target div { background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
.w60p { margin-left: -30%; width: 60%; } .w300 { margin-left: -150px; width: 300px; } .w640 { margin-left: -320px; width: 640px; }
.h60 { height: 60px; margin-top: -30px; } .h400 { height: 400px; margin-top: -200px; } .h386 { height: 386px; margin-top: -193px; }
.scroll { overflow-y: scroll; padding: 0 1em; }

If you refer back to the HTML code, you’ll see that each lightbox container has class values such as w300 (for width 300px) or h400 (for height 400px) or w60p (for width 60%).

The values for each lightbox were simply calculated by measuring the width and height of the contents required and then setting the container width and height to match the dimensions.

Take for example the image we used: As that had specific width and height needs, a specific width and height was applied to the lightbox container, and for each, a negative margin for half that value was given to give it accurate centering.

Note: You may have noticed that a scroll class was also added to match the width and height classes for each lightbox.

Simply put, if you have lots of content within the container and you give it a fixed width and height, the scroll mechanism will allow it to overflow with scroll bars attached. Lovely!

Adding the next bundle of code will properly align the lightboxes content.

Now try refreshing the page again and — Voila! — just like magic, whenever you click one of the links, its content will load in a container, in the center of the screen.

And the fantastic thing is, it will look and function like any other lightbox. Clicking inside the lightbox will act normally, but clicking outside of it will restore the main screen (and thereby hide the lightbox contents as they’re not the fragment).

If you use Firefox, Chrome, Safari or Opera, this code will work perfectly and is a 100% pure CSS way of implementing a lightbox.

But for Internet Explorer, we (as usual) have compatibility issues to deal with!

Tip: Just imagine what you can do with these target lightboxes: You could have anything from the content shown above, right through to setting the width and height of the container to 100% and have a literal different "page" appear with overflow enabled on a single page web design. Woot!

Compatibility Crisis

Without going into a great deal of detail, the below JavaScript code has been produced to deal with Internet Explorer’s lack of support for :target (this could well be the first effective and simple solution for this issue).

As with the style, I’ve attached the content inline using <script> tags in the header, but it’s entirely graceful and can appear in an external file.

As long as the script is placed below the <style> element, you shouldn’t encounter any issues in regards to the emulation of the code.

<script type="text/javascript">
<!--
 	/*@cc_on @if (@_jscript_version > 5.6)
 	function bootup(){
 	var tds = document.getElementsByTagName("a"); lightbox();
 	for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(lightbox, 1);};}
 	}
 	function lightbox(){
 	var counted = document.getElementsByTagName("div");
 	for( var x=0; x < counted.length; x++ ){ if ( counted[x].className == "boxfocus" ) { counted[x].className = "lightbox"; } }
 	if (location.hash.substr(1) == "") {} else { document.getElementById(location.hash.substr(1)).className = "boxfocus"; }
 	}
 	window.onload=bootup;
 	@end @*/
 	// -->
</script>

Keeping the above code as simple as possible, it makes use of conditional comments (for JavaScript) to ensure you are using Internet Explorer (hence why it references Jscript) thereby ensuring the code will not interfere with good browsers which render correctly.

When IE is verified, and the page loads, the bootup function monitors whenever an anchor is clicked.

When this event is triggered, the lightbox function is activated and it simply applies a set of classes to the div that matches the hash (#) in the address bar (fragment link), while restoring all other lightbox instances back to the default.

Essentially it says "You’re using IE? OK. You clicked a link or loaded a page? OK. The link clicked references a lightbox? OK, let’s set that in motion and reset any others which may be active".

If you’re not too JavaScript-savvy, it may not make a lot of sense, but the code requires no user maintenance and if you use the code, you’ll just have to trust me that it’ll do the job. Except for those classes to be applied, which have the alternative to the :target stuff, we’ll need to add these into the style in the header.

And to overcome IE’s lack of opacity support, we’ll add a transparent repeating PNG image in its place.

.boxfocus { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.boxfocus div {background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
.boxfocus .close a { background-image: url('trans.png'); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }

Those of you with eagle eyes may have noticed that the properties of the boxfocus classes, which sit in place of those using the :target pseudo, contain mostly the same properties and values as their counterparts. So you may well ask: Why not group them together?

While it may seem like a smart idea to reduce repeating code, unfortunately the default behaviour for IE and other browsers is that unknown or invalid code (as it would appear to IE) should be totally ignored and deleted. Which means, if grouped, it wouldn’t work, so we need the repeated CSS as a separate entity.

With a bit of caring JavaScript, Internet Explorer will work like any other browser.

If you now refresh the page again and open it in Internet Explorer, you will find that the lightbox should now work properly in that browser.

It may not be a perfect solution to require extra CSS and some conditional JavaScript to work the mojo, but alas, this isn’t a perfect world, so we must use it to keep things as compatible as possible.

On the bright side of things, Internet Explorer 9 has full support for target so in the future, none of that extra code will be needed.

Setting Standards

And on that note, the example is complete.

• It’s totally semantic: with div containers and the use of any HTML elements you wish within the container
• It’s accessible: it’ll work with screen readers
• It’s not as dependent on scripting as the jQuery solutions and you can bookmark their behaviour
• And — all things considered — it’s more graceful in that the future looks good for the selectors’ widespread browser support without the need of any scripting

Get Involved with CSS3. Please.

Hopefully this tutorial will inspire you to get involved in testing modern standards like CSS3 because many of these elements already have basic native support.

While there is a real need at this time to make things gracefully degrade (and this option certainly can achieve that), it’s worth highlighting that the potential for the :target pseudo-class goes far beyond lightboxes: It could remove the future need for JavaScript in single-page websites, content swapping, and other process-intensive functions.

While the need for workarounds (like the JavaScript we needed to use) won’t disappear overnight, the future of web standards is pretty bright!

Download

• css-light-box (ZIP, 0.007 MB)

<!–

Related Content

• CSS3 Techniques You Should Know
• Examples of CSS3 in the Wild
• How to Create Inset Typography with CSS3
• Related categories: CSS and Web Development

About the Author

<!–

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

 

 

By Cameron Chapman

Because of the potential for variations in the different aspects of a web design project, creating a proposal or invoice for such a project can be trickier than that of another industry like accounting or legal services. If your proposal isn’t created carefully, it can lead to misunderstandings and unhappy clients (not to mention the grief it can cause you). The same is true for invoices: if it’s not clear what they’re paying for, clients can delay making payments or dispute charges.

There are two main factors to keep in mind when preparing a proposal or invoice: First, you’re likely dealing with people who are not yet your clients; and second, you’re dealing with clients who you (probably) hope will bring you repeat business. This article will offer a number of tips, based on those two principles, to help designers creative effective proposals and invoices.

Image source

Proposals

We’ll start with proposals, since you’ll have a need for them before you need an invoice. There are probably as many web design proposal formats as there are web designers. A lot of what you include in a proposal is a matter of personal choice. But there are a few things that every proposal should include.

The Basics

A proposal should include basic information about your company (contact info, mostly), information about who the prospective client is, and the fact that this is a proposal.

In many cases, you would include your logo and business name, along with your contact information, at the top of the page. Then, below that, you’d include your client’s contact information. Put the date somewhere near the top, too. Finally, put the word “Proposal” or similar, preferably in bigger type and bold. These things are just formalities, but they’re still important and it’s completely possible that some designers might forget to include one or more of these in their rush to get a proposal out the door to a new prospect.

The Project’s Scope

Somewhere in your proposal you’ll include information about the scope of the project. Is this going to be a simple brochure site? An online store? Will it have a blog? An intranet or members-only area? Community features? There are tons of variables that go into the creation of a website, and it’s important to describe at least the major ones here. Make sure you understand what your prospective clients are looking for before you send a proposal to them (this should be done in a discovery phase, with either a formal or informal client questionnaire).

This section should be clearly indicated, but can be formatted either as a series of bullet points or in paragraph form. Which one works best will probably depend on the type of site and how many features it will have. A bulleted list can give a more polished look and make it easier for the client to read — as long as there aren’t too many points. Don’t be afraid to use bold or underlined type to highlight particularly important sections.

Ideally, you want to include a problem statement at the beginning of this section (or possibly as its own section if it’s long enough), where you restate and rephrase what the client is looking for, to make sure you understand what they want, and to ensure they know that you understand their needs. Make sure you make it clear to your prospective client that you understand what their needs are, what their company is all about, and that you can help them reach their goals.

This is also the section where you want to make it clear what are your capabilities. The more specific you are about what you can and can’t do for a client, the less likely they are to make incorrect assumptions, and the more confident they’ll be in your abilities. By being honest up front, you build trust with your client, which makes them more likely to hire you, and, if the proposal is approved, they’ll be more likely to listen to, and trust, your suggestions during the course of the project.

The Project Timeline

Generally, web design clients want to know how long it will take for their website to be up and running. My advice: take a page from Scotty’s book

(from the original Star Trek series). Under-promise and over-deliver. In other words, if you think something will take you two weeks, tell your clients it will take three.

Image source

There are two reasons for taking this approach. First, every project will have its unexpected problems and challenges — maybe your client submitted artwork three days late, or maybe the domain they wanted was already taken and it took them a week to come up with an alternative, or maybe the hosting they purchased ahead of time doesn’t support databases or PHP5. Whatever the reasons, giving yourself some buffer time means you aren’t scrambling to meet deadlines that are suddenly unrealistic or delivering the project a week late.

But there’s an even more important reason to under-promise and over-deliver: If everything lines up properly and you don’t run into any problems, you will gain the reputation of being faster and more efficient than other designers. In both cases, you end up with happier clients without pulling out all of your hair!

So, come up with a realistic timeline for the project, breaking it down into milestones if it’s a particularly large or complicated site. For example, you might promise initial mockups in two weeks, a functional site for testing in a month, and the final site in two months. For a smaller site you might promise the mockups by the following week and the finished site a week after the mockups are approved.

In creating the written timeline, be sure to mention that some milestones may depend on the client’s approval. It’s not unreasonable to set incremental deadlines that require the client to review certain aspects of the project. In the documented timeline you want to inform them that any delays on their part will affect the overall timeline.

The Project Costs

Including project costs in your proposal in a well-outlined and well-explained manner can contribute to how happy your client is and how long it takes them to pay their bills. You’ll want to break down the costs based on phases or parts of the project. How you do this depends on how you normally bill clients and how complex the particular project is.

For very simple websites, you might write “Brochure site, 4 pages with contact form, $500″ or similar. For a more complex site, however, you’ll need to break it down into separate items. You might have a fee for the basic design, a fee for adding ecommerce capabilities, a fee for some original artwork, and maybe a fee for custom coding. In either case, make sure you outline whether this is a flat fee or based on an hourly rate (and how many hours that covers).

Outline potential additional charges, too. These might cover things like domain name registrations, hosting setup and monthly charges, and ongoing maintenance fees. Including these details in the proposal will help avoid any surprises from a client perspective.

Other Things to Include

There are other less important things you might want to include in a proposal, depending on your own normal business practices and your individual clients. These include:

Image source

• Make sure you’re accessible. Make sure you include multiple methods for the client to contact you by. At a minimum, the client should have your email address and a phone number, but also consider including your cell number, and one or more IM usernames, if it will fit the circumstances.
• A confidentiality clause. You may want to include a confidentiality clause in the proposal, making it clear to your prospects that the information contained in your proposal should not be shown to others (especially other designers).
• Technical specifications. Some designers like to specify exactly which browsers the site will work in, as well as any special or proprietary technologies the site will use. This might also include specifying a particular CMS.
• Original artwork creation. Sometimes a web design client will want you to revamp their logo (or create one from scratch) or do some other original design work for them. These things should probably be specified separately.
• Payment terms. If you have a payment plan worked out with your client, the proposal would be the best place to spell it out. You might also mention things like penalties for not making a payment on time.
• A short company or designer bio. Giving your prospective client some idea of who you are and what you’ve done in the past may make their decision a bit easier. Putting that information on the first page of your proposal makes it easy for them to remember why they considered hiring you in the first place.
• A cover page. A cover page is a great place to include things like your company bio and your confidentiality clause. It can also make the proposal look more professional, especially if the proposal is more than a couple of pages long.
• Headers and footers. Including a header and/or footer with your contact information and page numbers makes it easier for prospects to keep your proposal organized and for them to contact you without having to flip back to the front. This also helps it look more polished.
• Moodboards and/or wireframes. For particularly promising projects, or for ones where you’re pretty confident the client is going to hire you, including a couple of wireframes or moodboards (with color schemes or other design elements) can be a nice added touch. Just don’t put too much time into it or give too much away until you actually have the project.
• Case studies. Including case studies of similar sites or projects you’ve completed can also give clients more faith in your abilities. Include any relevant projects, but limit this to 2-4 strong and applicable examples, to avoid overwhelming your prospects.
• Include a cover letter. Give a very brief introduction and overview, in an email or cover letter, of what’s included in the proposal, what your qualifications are, as well as your contact information.
• Schedule a meeting. When you email or otherwise send the proposal to your prospect, include in the proposal a request for a meeting to discuss any questions they might have about your proposal or the project itself. Knowing there is a possible follow-up meeting might make it more likely that the client will review your proposal in a timely manner.

Don’t Forget…

Here are some other things to keep in mind when preparing your proposal:

• Spell check and proofread! There’s nothing worse than getting a proposal that’s littered with typographical and grammatical errors. Remember that your computer’s spell check isn’t foolproof. Do a manual proofread, too — preferably on a hard copy.
• Ask your client whether they prefer a printed or digital version of the proposal, and if digital, which file format they’d prefer.
• If it’s a print proposal, use high quality paper and ensure that your printer isn’t running out of ink; you want your proposal to look as professional as possible.
• Use a customizable template to make the creation of future proposals easier and more streamlined.
• Be neat and professional, but don’t over-design your proposal; its purpose is to get the information across, not to show off your design skills.

What’s Next?

So, you’ve crafted the perfect proposal and sent it to your prospective client — now what?

If you haven’t heard back from the client within a week or so after submitting the proposal (and assuming you didn’t schedule a follow-up meeting when you sent the proposal), it’s fine to follow up. Whether you want to email or telephone is up to you, and may depend on the type of client you’re dealing with. But get in touch to make sure they received the proposal, and to see if they have any questions. If they haven’t made a decision by this point, try to find out when they’re likely to do so. Then, plan to follow up again after that date if you haven’t still heard.

Image source

Now, assuming they decide to hire you, what are the next steps? You’ll want to get a signed proposal or contract from the client, along with a deposit. Whenever you’re working with a new client, you’ll always want to get a deposit of anywhere between 25-50% before you start work (which should have been specified in your initial proposal). Once those are received, you’ll want to schedule the milestones and deadlines that were outlined in the proposal’s timeline. Keep your client up to date on your progress, especially if it’s a long-term project (weekly or bi-weekly updates are often appropriate).

If you know you’re going to miss a deadline, let your client know as soon as possible. They’ll appreciate the advance notice, especially if the next milestone requires some kind of action from them (such as reviewing artwork or beta testing). Keep on top of your clients to make sure they comply with any deadlines agreed upon in the proposal (such as providing artwork, reviewing the site, or making scheduled payments). When you send them files to review, include a note to remind them of their responsibility to provide feedback within the specified time that was outlined in the proposal. This will help reinforce that you can only meet your deadlines if they meet theirs.

Constant communication with your client is key to making any project run smoothly. Make sure your clients know they can come to you with any questions or concerns they may have regarding the project. Do the same with them. If you have questions about something they’ve sent to you or some aspect of the project, ask them. It’s better to ask and get it right the first time than to spend hours or days doing something you’ll have to change later.

Further Resources:

Professional Web Design Proposal Template

A downloadable template for creating your proposals.

Writing a Website Design Proposal

A great post from Propaganda Party on what makes a great design proposal.

Write a Winning Graphic Design Proposal for Your Business

A very detailed article on creating proposals.

Creating a Winning Proposal for Web Projects

An awesome article from Peachpit about the web design proposal process.

Website Design Proposal Template

Another great template to serve as a basis for your own proposals.

How to Write a Web Design Proposal

A detailed post from Bidsketch on creating web design proposals.

7 Tips for Writing a Winning Web Design Proposal

This post from SitePoint offers some excellent tips for creating a proposal.

Secrets to a Great Sales Proposal

Another SitePoint post about writing a proposal, this one more focused on the sales aspect.

Deliverables That Work: Design Description Documents

An awesome post from Carsonified about creating a “Design Description Document”.

The UXD Stack

A great post from 404 User Experience Design about project management in user experience design that could be very useful for structuring your own proposals (or at least deciding what information you need to include).

45 Incredibly Useful Web Design Checklists and Questionnaires

Use some of these questionnaires to gather the information you need to create a better proposal.

Writing a Project Proposal

A step-by-step guide from Tutorial Blog for creating a project proposal.

Invoices

A clear and easy-to-understand invoice will contribute greatly to ensuring your clients pay their bills in a timely fashion. Below are some guidelines that will help you create an effective invoice.

What the Invoice Should Include

Your invoices should include basic contact information for both you and your client, as well as the date the invoice was issued and the date it’s due. Always include a sequential or date-based invoice number, to help identify the invoice at a later date.

Image source

The invoice should outline exactly what the charges are, which would be broken down in the same way they were broken down on your proposal, to make it easier for your clients to verify the charges. Include whether these are flat fees or based on hourly rates (and how many hours). Depending on your location, you may need to include some form of tax as a separate item. Check your local laws to see if this applies to you.

Finally, include how you want to be paid — by check, bank transfer, or PayPal. You might consider setting up a payment gateway on your website to make it easier for your clients to pay you. Offering a discount for prompt payment can also be a good idea. It’s common for payment discounts of between one and five percent to be given for payments made within five to ten days. You should also specify if there are any late payment fees or interest charged on payments not received by the due date.

Using an Invoice Service

There are numerous online services that offer invoicing ranging from full-featured bookkeeping to simple invoice-tracking services. Some of the better solutions let you create proposals from within the app, and can manage your entire project. These services can definitely make your life much easier when it comes to finances.

Another advantage to using an online invoicing app is that it can track payments, and sometimes even calculate your income taxes based on what payments you’ve received, saving you time and hassle. See the “Further Resources” below for an overview of some available invoicing apps.

Further Resources

• How to Invoice for Design Work — A Quick Guide

  A great post that covers not only how to invoice, but collecting payments in general.

• Ask Nubby #12: How to Design an Invoice

  A comprehensive article on invoice design, including some vintage examples for inspiration.

• Get Your Money: Best Invoicing Practices for Freelancers

  An excellent article from Freelance Switch on some best practices for invoicing.

• 20 Invoicing Tools for Web Designers

  This post from Six Revisions gives a rundown of some popular invoicing and bookkeeping solutions.

• 14 Web-Based Invoicing Tools to Make Sure You Get Paid

  Another roundup of web-based invoicing apps.

(ll)

 

 

By Cameron Chapman

We’ve all seen articles devoted to the various web desing “rules” out there. In fact, they’ve probably been drilled into all of our heads ad nauseum. And for many, they serve as a comforting set of guidelines that make our lives easier, at least when it comes to design.

But what about those occasions when you have an idea that doesn’t quite fit in the rules? Or what if you’re just sick and tired of doing everything by the book and you want to challenge yourself creatively? Are the rules really set in stone?

The answer to that is of course not. For one thing, a lot of the rules are outdated. So while they might have been true at one time, they’re not anymore. The other thing is that there are almost always circumstances that demand that the rules be bent or broken entirely. And as designers, we need to learn to recognize those times.

Below are a bunch of commonly-accepted web design rules, along with the reasons you might want to break them, and how to do so effectively. We’ve also included examples for each and the one unbreakable rule.

Your Web Page Layout and Design Should be Consistent Throughout the Site

Consistency can help make your visitors feel at home on your site right away. This makes them more likely to look around and spend more time there. Comfort is a good thing. Most of the time.

But there are two problems with this rule. First, some designers interpret it to mean that every page should be virtually identical. They use the same basic template for every page on your site, regardless of the content present. This almost always results in a site that’s boring and no fun to look at.

The other problem is that different content often calls for different design treatment. Removing most of the consistency on your site can make for a much more interesting user experience. Note that I said “most” of the consistency, though. You’ll want to choose one or two anchor points to keep your visitor from feeling like they’re visiting a different site entirely every time they go to a different page. Consider keeping either a design element like your header or color scheme or something as simple as your logo the same on every page on your site.

Case in Point: Jason Santa Maria

Jason Santa Maria’s website uses a different page design for a large number of his articles. It’s refreshing and shows just how much thought he puts into the content he provides. At the same time, it’s worth clicking through to multiple posts just for the designs alone. Always a good thing if you’re looking for deep engagement from your visitors.

The unifying element that keeps you feeling like you’re on the same site is the top navigation.

Don’t Put Important Information Below the “Fold”

The “Fold” is a holdover term from the world of newspaper design. In newspapers, it referred to the area in the top half of the front page. This was the area of the paper that was visible if it was sitting at the newsstand. The most important news and headlines for the day were located there to entice people to buy the paper.

But here’s the thing: websites don’t really have a “fold”. It’s often touted that the area visible on the home page without scrolling is above the fold, but that’s not an accurate translation. With a newspaper, that above-the-fold area was important because it enticed people to purchase the newspaper. With a website, there’s no decision like that necessary. Visitors are already on your site and scrolling isn’t the same kind of psychological decision as handing over money to purchase something.

Case in Point: Sibley/Peteet Design

Most of the space “above the fold” is taken up by the header image. You have to either scroll down or click to see more.

Avoid Using Too Many Different Fonts

The theory behind this rule is that too many fonts make a page look cluttered and unorganized. And the improper use of too many fonts can result in an amteurish page at best, and a nearly unreadable one at worst.

But there are plenty of ways to use multiple fonts and create a gorgeous and usable website. The keys are to pay careful attention to the fonts you’re using and the sizes and weights you’re using them at. Use fonts that have similar weights, x-heights, and other related characteristics. Be careful about mixing too many colors or styles.

If you’re not comfortable using multiple fonts, you can always cheat and use mutliple weights and styles of a single font. This is an easier technique that results in a very similar look, especially if you use a font that has a wide variety of variants (like Georgia or Times New Roman). Mixing italics, bold, small caps, all caps, and different sizes can result in a varied look that’s still unified.

Case in Point: The Dollar Dreadful

The Dollar Dreadful site uses tons of fonts. There are well over twenty just on the home page. But the overall effect is impressive and works well within the theme of the site. It definitely wouldn’t be as striking if limited to only one or two fonts.

Keep Everything Simple

Simplicity is overrated. I’m sure that single statement already has half of you up in arms and ready to stop reading. Simplicity has its place. But there are times when you want something to be complex. To be multi-layered. And there’s nothing wrong with that. Chances are, your visitors are intelligent enough to figure things out if you still design with them in mind.

There’s nothing wrong with keeping a website simple if that’s what you (or your client) wants. But don’t hold simplicity up as some kind of holy grail of web design. There are plenty of instances where a more complicated solution is better, and ultimately more usable, than a simple solution would be.

Case in Point: Aussie BBQ Legends

The home page for Aussie BBQ Legends is anything but simple. With plenty of content, animation, and a disorganized by easy to use navigation system, combined with a large background image, it creates a multi-layered and complex impression while still being easy and fun to use.

Put Navigation in Expected Places

Tradition tells us that navigation should be placed either in the header or the (left) sidebar of a website. Secondary navigation is often placed in the footer, but never primary navigation.

Why? People only look to those places because they’ve been trained to do so. But there’s a lot more space available on a web page that could be used. And if done well, those places can be just as easy to use as navigation in the header or sidebar.

Case in Point: No One Belongs Here More than You

This site not only doesn’t put navigation in the expected places (it’s in the lower right-hand corner of the page), it also uses linear navigation. You can only go where the site’s creator wants you to go.

Avoid Bright Background Colors

The idea here is that bright background colors make it difficult to read text placed over them. But with appropriate contrast and font size, text can be nearly as readable on a bright background as it is on a white or other neutral background. It all comes down to making appropriate choices for the design.

Case in Point: Helveticons

The Helveticons site has a very bright yellow background, but the use of a dark gray font makes everyone on the page easy to read.

Limit the Information on Each Page

The theory behind this one is that people don’t like to read long articles. They want bite-sized information when they’re online. Breaking up your content over multiple pages will supposedly help satisfy this desire.

But that’s not always the case. Sometimes a visitor is seeking more detailed information. Clicking through to half a dozen different pages to find information that could have just as easily been placed on a single page is just a waste of time. Instead, break content up with headers or similar elements to make it easy for those who are just looking for one piece of information to find it without making things more difficult for those who want to read the entire thing.

Case in Point: Wikipedia

Okay, so Wikipedia might not be raking in the design awards, but it does have a huge amount of traffic and excellent user engagement. Some articles are short, but others might run a few thousand words (or longer). Wikipedia combines on-page navigation to major sections and headers, subheaders, and lists to create an excellent user experience that still puts a ton of information in a single page.

Focus on Lower Page Weight

This rule comes from the days when a large number of Internet users were connecting over a dial-up connection. Nowadays, you’re going to find a lot more visitors are coming to your page over a broadband connection. And even those still using dial-up are probably used to have sites take ages to load.

Lower page weight is still important, though, to an extent. You still want your content to load in a matter of a few seconds for the majority of your users. But this can be achieved just as easily through good coding as purely by page size. Simple steps like specifying the size of images within a post or page can help make the page more usable even before it’s fully loaded.

Case in Point: MWP

The Modern Web Projects (MWP) site has lots of big images, mostly in the background. But it pushes the page size well over a meg. And yet the page still loads just fine on a broadband connection and the size is well worth the effect.

Don’t Use Big Background Patterns or images

This one ties closely to the previous rule about page weight. I’ve seen sites that advocate that your background pattern should be less than 60 pixels square. But with high-speed internet, that’s not really necessary anymore.

Another argument against big patterns is that they can be distracting. That can be true of small patterns, too. Instead, just make sure the pattern you’ve chosen to use complements the rest of your site and doesn’t detract from your content. Sometimes giving the background a bit less contrast or making it lighter or darker can help in this without changing the overall look too much.

Case in Point: McClanahan Studios

The background image for McClanahan Studios is huge. There’s literally one image for the entire background of the home page. The same is true for each page on the site. And yet the background not only doesn’t slow down the loading of the site, but also contributes a ton to the feel of the design.

Don’t Use Splash Pages

Splash pages and intros are often created for absolutely no reason other than to show off the designer’s Flash abilities. These types of splash pages should be avoided at all costs. But that doesn’t mean there’s never a place for splash pages.

Sometimes a splash page that’s intended for a particular type of visitor is in order. Let’s say you’re a charity trying to get donations for a very specific project. Instead of changing your entire home page and site design, why not throw up a splash page that invites people to donate? It’s simpler than changing your home page and often times it’s more effective.

This rule might have been more accurate if they’d said not to use splash pages without a very good, very specific reason. (And, “because I want to” isn’t a good enough reason.)

Case in Point: Kutztown University Communication Design Department

This splash page serves to simplify navigation for new visitors. Since education websites traditionally have a ton of content for many types of visitors (current students, prospective students, parents, alumni, etc.), simplifying the visitor’s first experience is helpful and an appropriate use of a splash page.

Always Incorporate Social Media

This is another rule that a lot of you are probably ready to defend to the death. But the truth is, not every site is going to benefit from incorporating social media functions.

Let’s say, for instance, that you’re designing a site for a product that treats an embarrassing personal problem. Do you really think anyone is going to share a link or an article on Twitter? Are they going to post a link to a site like that on their Facebook wall? Probably not. So there’s really no point in spending the extra time to incorporate social media options.

Case in Point: Preparation H

No one’s going to share a link to this on Twitter, so why even bother giving them the option?

The Three-Click Rule

The idea that every page on your site should be accessible from your home page within three clicks is one of the most pervasive rules out there. In extreme versions, it’s not even from the home page, it’s from every other page on your site.

This rule was invented to make designers more carefully consider their information architecture. Which is a good thing. But that doesn’t mean that visitors are never going to see a page just because it would take them five clicks to get there. The key is to use links and navigation to direct users in a way that makes them want to keep clicking.

Information should be easy to find. But that doesn’t mean it needs to be instantly accessible. One tip, though, if you’re going to use deeper navigation: include a prominent search box for those people who are too impatient to use your regular navigation options.

Case in Point: Barnes & Noble

Large online retailers are a great example of where the 3-click rule falls apart. If you go to the Barnes & Noble site to browse, it’s virtually impossible to get to any specific category within three clicks. And unless the book you’re looking for happens to be featured on one of their main pages, it’s unlikely you’ll get to a book within three clicks either. But B&N has excellent search funcionality, which means you can find whatever you’re looking for if you’re in a hurry, without sacrificing the ability to browse categories in a very intuitive and user-friendly way.

The Unbreakable Rule

Your user should always come first. Whatever rules you’re thinking of following or breaking, always ask yourself if it’s going to help or hinder your user. If you keep their needs and preferences in mind, no matter what rule you break, your site will still likely be successful within your target demographic.

Sources and Resources

• 5 Basic Rules of Web Design by Grantastic Designs

  A simple set of rules for website design, most of which are entirely accurate.

• 10 Web Design Rules That You Can Break

  A great post from Webdesigner Depot that offers up examples of effective rule-breakers.

• Ten Rules of Web Site Design

  A list of rules from Sharpened Productions.

• Web Sites that Work

  A list of rules from Roger Black on what makes a well-designed and usable website.

• Four Crucial Web Design Rules

  A post from NichePhile on four important rules for good site design.

• 15 Websites That Break The Rules

  A great gallery of sites that break at least some of the so-called rules.

 

 

With the release of CS5, Photoshop has become even more power-packed with features more simplified, and with better characteristics. Its features are so user-friendly such that even newbies can produce quality effects, and for professionals launching of CS5 is like getting box of Pandora with which they can get awesome results.

Today we present 35 Latest Photoshop Tutorials from this year, which will showcase you techniques used for text effects, lightning effect, photo manipulation, web design and some general tips. All tutorials are quite innovative and modernistic and will help you learn fantastic ways to improve your skills and amplify your artistic know-how. However, these tutorials are just for brushing up your skills. Your ultimate aim should be developing your own style.

Fresh Photoshop Tutorials From 2010

Create a Stylish Grunge Poster with 3D Typography in Photoshop

In this tutorial author will show you how to create a cool grunge poster in Photohop. We will play in particular with blending modes to mix stock images and with some filters to create nice effects. Also author will show you how to integrate 3d text into your compositions and how to replace existing colors using adjustment layers.

Creating an Impactful Disco Party Poster

This tutorial will show how we can create an impactful disco party poster. There are some new methods in making lighting burst and streak effects. We will also touch a little on using the settings in Brushes Panel, so let’s check it out!

How to Make a Worn Vintage Beach Ad in Photoshop

In this Photoshop tutorial, author will show you how to create a worn out, low-saturation-colored vintage beach ad in Photoshop. We’ll use some beginner to intermediate level techniques such as the usage of brushes, editing colors, using filters, masking and a whole lot more!

Design a Brilliant Product Advertisement

In this tutorial, you’ll learn the steps and techniques involved in creating a brilliant product advertisement. You’ll start with a stock image of an Adidas shoe, extract it from the background, then combine it with various photostocks to create a liquifying product advertisement.

How to Make a High-Impact Fashion Poster in Photoshop

In this tutorial, we are going to learn how to use shapes and other objects to create a unique fashion poster scene. Utilizing Adobe Photoshop shapes is an awesome means for improving your designs and they can easily be used without spending too much time on them.

Super Easy Typographic Portrait in Photoshop

So in this tutorial author will show you how to create a really cool and super easy typographic portrait in Photoshop. We will use the Displace filter and some Blend Modes to achieve the effect. The whole process is quite simple but it might take you some time to add the texts and elements, but once you do that the rest is very straight forward.

How to Create a Somber Composition in Photoshop

In this tutorial you will learn how to manipulate stock images and turn them into your puppets to express your desired feelings.

How to create a fantasy photomanipulation in Photoshop

In this tutorial you will leanr how to make a photo into a surreal land with a castle and a flying horse. Hope you enjoy it!

Achieve Brilliant Lighting Effects in Photoshop

In this tutorial, you’ll learn the essential process of achieving brilliant lighting effects in Photoshop. Using default brushes, blending options and a few stock images, you’ll learn step by step a variety of techniques that you can use in your own digital artworks to achieve professional results.

How to Create a Serene Panorama from Multiple Photographs

In this tutorial, we’re going to teach you how to combine multiple stock photos into a single, coherent scenery in Photoshop. We’ll start off with a single panoramic photo, and integrate two others along the way. Also, we’ll look at ways to make the final result look more dynamic and appealing with a few adjustments layers. If you’re looking to improve your photo manipulation skills, this tutorial should prove very useful!

Create a Dark and Surreal Poster Using Your Own Portrait

This tutorial was inspirited by digital artist Rob Shields. Author chose his work titled “Keep me in the dark.” In this illustration it is essential that you use a tablet; especially for the doodles and the white strokes that will give the portrait a more detailed effect.

Very Easy Heroes Eclipse in Photoshop – Screencast

In this tutorial, we learn how to recreate that solar eclipse image in a slightly retro style using nothing but photoshop.

How to Create a Dark and Mysterious TV-Head Scene

In this Photoshop tutorial, author will be showing you how to make a dark and mysterious scene with the subject having a TV for a head. You will see how to seamlessly replace a person’s head with another object—in this case, a television—and how to create a stormy sky using brush strokes. We’ll also deal with creating realistic lights and shadows as well as how to retouch subjects who are against a light source.

Photoshop Quick Tips: Neon with Layer Styles

How to create the same light effect as used on the Abduzeedo logo. He explains this effect in very simple steps using basically Layer Styles and a few brushes.

Super Easy Neon Style in Photoshop

In this tutorial author will show you how to create a nice light effect in Photoshop. He will use Layer Styles and Blend Modes to simulate a neon text effect.

Light Effects in Photoshop

In this tutorial author will show you how to create this effect. It’s a sort of monitor/halftone effect mixed with glows and other light effects. We will play with Blend Modes and Blurs. The whole process is quite simple and it won’t take more than 20 minutes to achieve the same result.

How To Use Curves in Photoshop

The idea behind Curves is all about re–mapping values. A pixel starts out at a certain brightness, and you change it to be brighter or darker.

Create a Fantastic Abstract Fan Poster

In this tutorial, we are going to get creative with layering, lighting, and texture to build fantastic abstract piece. More specifically, we’re going to employ some unusual techniques to make a fan poster for the band Omega Code, but you’ll quickly see many different applications for what is taught here.

Jungle 3D text in Photoshop

This is a funny Photoshop tutorial that explains how to realize a 3D jungle text effect. We will create the text in Xara3d and we will use Photoshop to texturize the letters using animals’ skin. Don’t forget to download the jungle wallpaper!

Reader Tutorial: Arcadia 80’s VHS Style

We love the 80’s especially that look and feel of the old VHS movies that we used to watch so many times. Because of that we have a super cool Photoshop tutorial showing you how to create a VHS image style.

Design a Colorful Retro Futuristic Poster in Photoshop

The theme of retro futurism combines digitally created graphics and abstract shapes with distressed and aged textures, giving that cool mix of old and new. Let’s take a look at how to create our own bright and colourful retro futuristic poster in Photoshop, using dynamic lines, vibrant gradients and rough textures to build up the design layer after layer.

How to give a retro-look to your photos

In this tutorial we will use Photoshop to give a retro look style to our photos in 7 easy steps. The tutorial will help Photoshop beginners to understand better how to manage colors using Photoshop adjustment layers and filters.

How to Create a Fun, Red-Haired Boy Character

In this tutorial, we will learn how to make a funny boy character in Adobe Photoshop. After drawing the sketch, we’ll use shapes, layer styles, the brush tool, and other effects to add some dimension to and life to our character.

Create a Colorful Space Scene in Photoshop

In this tutorial we’ll create a colorful illustration that includes the Earth, the Moon, a starry sky and some beautiful light effects. Here’s the finished illustration. You’re on the moon, or orbiting it, and you get a glimpse of Earth, our pale blue dot. Whatever those light beams are they’re begging for some spaceship to be placed right among them.

How to Make a Professional Buddy Icon in Photoshop

In this intermediate-level tutorial, author will show you how to make an awesome icon from scratch using Photoshop. You will need basic knowledge of Photoshop and familiarity with the Pen Tool (P).

How to Create a Highly Detailed Hi-Tech Power Button – Basix

With this tutorial Author will create a hi-tech style button that can be used in splash pages, applications or Powerpoint presentations. He will use Illustrator to create complex vectors and Photoshop to develop realistic effects.

How To Create a Detailed Apple iPad Icon in Photoshop

The Internet world exploded with the news of the Apple tablet launch last week. Named the iPad, it’s set to bring yet another revolution to the way people access and browse the web. An iPad icon would be a sensible addition to any web designer’s resources toolbox, so let’s fire up Photoshop and create our very own detailed iPad icon graphic.

Create a Cosmic XBOX using Custom Brushes

In this tutorial, you’ll learn how to create some custom line brushes, and then apply them to a subject to create a cosmic design. The line brushes, combined with some simple techniques in Photoshop, give the image a sense of motion and help bring the design together.

Design a Tropical iPhone Advertisement

In this tutorial, you’ll learn how to design a tropical underwater iPhone advertisement, complete with clownfish, starfish, and bubbles. You’ll learn how to isolate a variety of stock images, using custom brushes, extraction methods, and image manipulations. You’ll also see how to visually compose an image for maximum effect.

Designing Cool Interface for Magazine Portal

We shall go through some basic considerations and plans to take before doing the actual design for a simple and sleek Magazine portal. We will focus on using the Pen tool and Blending Options to make various border effects.

How to create a distinguishable textured web layout in Photoshop

In this tutorial author will show you how to create a textured web layout, starting from the concept on paper to Photoshop design. HeS will discuss about site structure and will use the 960 grid to organize our contents. Also you will learn how to use layer styles to create an engraved text effect.

How to Make a Vibrant Portfolio Web Design in Photoshop

In this web design tutorial, we will create a beautiful and colorful portfolio layout using Photoshop. author will show you many techniques for creating different things like bended paper corners, dashed lines, image carousels, 3D bars, and more!

Create a Chalkboard Style WordPress Layout in Photoshop

In this tutorial you will learn how to create a unique and original WordPress style layout that looks like a chalkboard

Create a Clean Blue Portfolio Design in Photoshop

In this tutorial you will learn how to create a clean blue portfolio design in Photoshop and will use Flavours Icon Set, Nevis typeface and Social Network Icon Pack.

Create a Professional Web 2.0 Layout

In this Photoshop tutorial we’re going to learn how to create a web 2.0 layout, As we go through the tutorial we’ll deal with so many Photoshop techniques. Seems kind of long? that’s because it’s very detailed.

 

 

By Andrea Austoni

There are many reasons to leave secure employment and embrace freelancing, from enjoying professional freedom to enjoying actual physical freedom. When you work for someone else, you spend eight (or more) hours in their office, and usually not just any hours, but those from 9:00 to 5:00, when everyone is awake and doing business. Don’t you resent that? Of course you do! Who wants to wake up every morning to go spend their most productive hours doing something marginally engaging, listening to criticism from people they do not particularly respect and whose judgment they often doubt, just to make someone else’s business grow?

Sure, your end of the deal doesn’t look so bad: steady income, benefits, a job in your field of choice and being able to leave all your troubles behind when you go home. But if you’re a creative type, this arrangement will soon start to feel either too stifling or too comfortable, or both. That’s when you have to take a big risk and plunge into your own career.

(Image by xerones

.)

Employee Work: The Scenario

Working in cubicles, anyone?
(Image by Tim Patterson

.)

One of the good things about steady employment is the constant pressure on you to produce results and come up with ideas. You can’t allow yourself so much as an hour to browse social networks, read blogs or, worse, “waste time” watching videos, even informative ones. Your boss could show up at any moment, demanding that you have something to show for the time that has passed since you were briefed earlier that morning. Some bosses (I’ve known a few) are sneaky enough to appear behind your chair out of the blue with some condescending remark like, “What are you doing on YouTube?”

Surely we should get rid of these people, because they limit our freedom and creativity. But something is to be said for getting cold feet from time to time. It keeps you focused. It’s healthy.

What Happens When You Start Freelancing

Once you start freelancing, you rejoice at the notion that you control your own time and space. You don’t have to show up on time (say hello to the wee hours). You don’t have to be presentable (say hello to sweatpants and chenille robes). And you won’t have to prepare three logo proposals in three hours (say hello to quality… finally!).

You don’t feel uptight anymore—even if your boss was relaxed, sooner of later some kind of reckoning awaited you. But now that you work for yourself, that pressure is gone, and you are finally master of your domain. Now that drive you felt to produce results without wasting time might get lost.

It’s way too easy to tell yourself that reading design blogs is never a waste of time because it gives you knowledge and inspiration. Of course, Photoshop tutorials are always beneficial! And Twitter is not a time-waster: it’s a way to create business connections! Yeah, right. But everything has a limit. For those of you who find yourself stuck in this rut, here are 10 tips to get out of it and keep you from ever getting stuck again.

1. Turn The Alarm Clock Back On

Alarm clocks actually believe we want to wake up every morning!

When you worked as an employee, you woke up to the dreaded alarm clock every morning. If you turned it off when you started freelancing and are now experiencing productivity challenges, maybe it’s time to turn it back on.

I’ll share my experience with you. I use the alarm clock in my cell phone, which repeats Monday to Friday. On the last Friday of my job as an employee, I didn’t turn it off. The following Monday, the first day of my freelancing career, the alarm went off at 7:30 as usual. I woke up and started what was, after all, just a normal workday. The only differences with previous workdays were that:

• I didn’t feel hurried because I had no train to catch.
• The commute took about 10 seconds, the time required to clear the breakfast table.
• As I sat down to the computer, I started working right away, instead of taking the first 20 minutes to gaze into eternity.
• I loved that Monday, and each one after that!

2. Observe Regular Working Hours

Plan your working hours in advance.

Maintaining regular work hours is crucial to organizing your time. Even if you freelance, you still have to wake up every day and get things done; otherwise, where will your career go? Keeping regular hours doesn’t necessarily mean working 9:00 to 5:00, Monday to Friday. The beauty of freelancing is that you can set your own schedule. Ultimately, how much is more important than when. Make sure you put in the hours, regardless of when they are, or you’ll suffer the bitter consequences.

Don’t fool yourself, though. You’ll still be burning the midnight oil at times. You’ll still have to skip a night out with your buddies occasionally to meet a deadline. But effective time management will help keep those occurrences as a rarity.

Many freelancers admit they work longer hours than when they were employees. I believe this is more a consequence of loving what they do and devoting more time to it than anything else. Your mileage will vary.

3. Dress And Behave Like You Still Work In An Office

Don’t wear slippers! Especially these ones.
(Image by mrbill

.)

You’ve set up your workspace to be all spiffy and trendy. You’ve brewed a fresh pot of strong coffee. Now, be professional. Wear something other than pajamas or sweatpants. Because regular clothing is less comfortable, it enhances the office experience even when you work from home. Wearing shoes instead of slippers helps, too.

Sit properly at a desk instead of slouching on the couch (or worse, lying on the bed). Not only does correct posture benefit your health, it separates the business “you” from the private “you.” Just because you’re your own boss, doesn’t mean you can just leave the office in the middle of the day to walk in the park! Take five-minute breaks every hour, and then get back to work.

Keep yourself on your toes.

4. Devise a Reward System

Treat yourself when you’re good!

Reward systems work. People go to extreme lengths just for that big final payoff. Just look at the ridiculous things men do to win women’s favor.

If the thought of finishing or even starting a project doesn’t seem to shake you out of procrastination, then set another goal, one that’s not work-related. Is there a certain movie you’re dying to see? Don’t see it unless you cross a certain item off your list.

Three years ago, when I moved to Poland, I could have easily installed an Internet connection in my apartment. I could afford it. Instead, I chose to wait until I found a job. Only then did I connect myself, and I felt proud. I deserved it.

5. Devise a Penalty System

Sentence yourself to house chores when you’re not productive.
(Image by walkn

.)

Penalties work, too. Write a fun list of little chores that you’ll sentence yourself to if you don’t do your work. People you live with can help you with this (and they’ll love it). “Didn’t work on that website? Here’s the mop!” “Forgot to go through last week’s mail? Clean that chandelier!” Instant productivity.

6. Prioritize Your To-Do List

“I would prefer not to” is a good answer.

The concept of structured procrastination has been explained brilliantly before

. Apply it to your to-do list. Prioritize your assignments according to deadline and importance. Never postpone deadlines, but address the most interesting and important items first.

Once your priority is set, just do as follows: don’t feel like tackling the first item? Move on to the second. Don’t feel like doing that, too? Move on to the third. And so on. If you reach the bottom of the list and still don’t feel like doing anything, maybe you’re in the wrong profession. Or you might simply need a boss. See the next tip.

7. Have Someone Pose As Your Boss

Your fianceè could double as your boss.

You read that right. You still need a boss. If you can’t make yourself work productively, then you’d better give your significant other the job. Just have him or her demand a report from you about your daily accomplishments.

• “Did you complete today’s to-do list?”
• “Did you make that phone call?”
• “Did you submit that quote?”
• “Did you start that new project?”
• “No? No soup for you!” (See tip #5.)

This “boss” should be someone who knows you well and whom you trust. Someone who’s close enough to you to be able to call you on your little schemes to get out of work.

8. Optimize Your Lunches

Mmm, pasta.

If you work from home and cook your own lunches, like me, cook larger portions to last you a few meals. Yes, eating the same dish two or three times in a row is boring, but it’s time– and cost–effective and helps you better manage your eating breaks.

When lunch hour comes, opening the fridge and finding yesterday’s left-overs ready to be warmed up is great. Quick and delicious, the meal won’t take longer than the usual half hour to eat, and you’ll be back to work. Mind you, rotating a few dishes during the week doesn’t have to dull. Do your research; ask knowledgeable friends; find new easy recipes to increase your gastronomic arsenal. Food can be inspirational, too!

On a personal note, I really enjoy being able to warm up my lunch after having spent three years in Polish office spaces, where microwave ovens are hard to come by. Being Italian (and hence, obsessed with food), this deprivation contributed big time to my distaste for employee life.

Keep the complicated dishes for the weekend, and make sure to show them off by hosting dinner parties and Sunday brunches!

9. Keep Yourself Busy And Inspired

There’s a beautiful world outside. Go out and it will inspire you!

When I was working for someone else, the thing that depressed me most was waking up every morning full of ideas but not having a way to pursue them until much later in the day. Sadly, after at least eight hours of work, commuting back home, taking a shower, cooking and eating dinner and doing some house chores, I was so tired (more psychologically than physically) that I just couldn’t bring myself to revisit those ideas. Never again! That’s why I quit my job and began freelancing.

Before, I was on perfectly straight paved roads, but I only trudged. Now I’m on shaky ground and winding roads, but I’m strolling along nimbly at an ever faster pace.

There’s nothing better than being able to reach for the computer to try out a great idea that just came to you. And now that you’re freelancing, you can afford to do that because your schedule is suddenly free. Alas, freelancers get lonely and fall into ruts easily. To keep the creative juices flowing, you need a steady intake of inspiration. Read books and magazines, play music, exercise. Leave the house, meet people, go places. When you come back to your work space, you’ll feel refreshed and full of ideas.

You’ll also need a lot to fill your days. In fact, we seem to accomplish more when we’re busiest. Without taking on more jobs than you can handle, try to discriminate between your tasks. If you spend too much time on a job, you will get bored and sloppy, and the quality of work will suffer. Break down complex tasks into simple bits, approaching them on different days. This will keep you objective and enthusiastic.

10. Look Back On The Old Times And Chuckle

Yes, remember back when you were a mere employee, trudging your way through endless weeks of dull assignments, baffling meetings and forced laughs at your boss’ jokes? You can look back on those times and sigh with relief. It’s all over now. Muahahaha!

You had the strength to quit steady employment and concentrate on your career. Now you owe it to yourself to make it take off. Get to work!

Further Resources

Here are some further articles and related resources:

• Freelance Switch

  These resources for freelancers are a must-visit. The contents are grouped into clear sections: getting started, dealing with clients, day-to-day productivity, etc.

• Freelance Folder

  Another great resource for new and seasoned freelancers alike. Both this and the previous website have interesting communities to which you can contribute by using the forum and submitting articles.

• Productivity articles on Zenhabits.net

  Blogging superstar Leo Babauta shares his insights on productivity.

• Structured Procrastination

  The original essay that inspired this effective productivity method.

• Quick and easy recipes on Allrecipes.com

  A good collection of recipes, grouped by preparation time: 15-minute meals, 30-minute meals, dinner in an instant, etc.

• FFFFOUND!

  One of the best image bookmarking websites around. Great for inspiration. So great, in fact, that it could eat up precious hours. Use with caution!

• StumbleUpon

  Everyone knows about this amazing service. Inspiration is just a click away. StumbleUpon is also a fantastic source of traffic for your blog and portfolio.

About the Author

Andrea Austoni is an Italian freelance designer currently living in Krakow, Poland. He specializes in icon design and illustration. He runs Cute Little Factory

, his personal portfolio and blog.

(al)

List Your Website Here!

Don’t Text Me – Whenever we are signed into our instant messaging client and are busy with some other program or task, we set our instant messaging status as “busy” to indicate that we should not be disturbed. Until now there was no equivalent feature for cellphone users. But “Don’t Text Me” changes that. Read more: Don’t Text Me: Auto Reply Text Messages While You Are Busy.

		Explain & Send Screenshots – There are a lot of us who like taking screenshots of a website and sharing them with friends. Explain And Send Screenshots is a Google Chrome extension that makes this process a whole lot easier by letting you capture a specific part of any webpage and then sending it as a link or post to your Facebook and Twitter accounts. Read more: Explain And Send Screenshots (Chrome Extension).
		UploadnSell – Online stores are good if you are trying to sell a bunch of products. But if all you want is to sell is a simple eBook, an article or a song you created, setting up a whole store for it is a time-consuming and useless effort. Instead, UploadnSell is a web tool that provides you with an easy solution that makes selling digital products simple. Read more: UploadnSell: Selling Digital Products & eBooks Online.
		MyIntercambio – Learning a new language isn’t easy. Books and CDs can only help to a certain extent but what makes learning really practical and fun is learning from your friends. MyIntercambio is a language exchange network where English and Spanish speakers can learn each other’s language. Read more: MyIntercambio: Learn English/Spanish From Native Speakers.
		NavFlow – Wireframes and mock diagrams are an essential part of website designing. Before developers can start coding the site, it helps a great deal to know what the site should actually look like. While there are many tools to create wireframes, only Navflow allows you to perform wireframes navigation testing. Read more: NavFlow: Quick & Easy Navigation Testing For Mockups & Wireframes.

List Your Website Here!

These are just half of the websites that we discovered in the last couple of days. If you want us to send you daily round-ups of all cool websites we come across, leave your email here. Or follow us via RSS feed.

Got Questions? Ask Them Now FREE on MakeUseOf Answers!

Similar MakeUseOf Articles

<!–

• makeuseof extra #27 (171 comments)
• Finally Stick To Your Resolutions With StickK (107 comments)
• Cool Websites and Tools [September 9] (51 comments)
• Cool Websites and Tools [September 7] (62 comments)
• Cool Websites and Tools [September 6] (72 comments)
• Cool Websites and Tools [September 5] (4 comments)
• Cool Websites and Tools [September 30] (3 comments)
• Cool Websites and Tools [September 29] (3 comments)
• Cool Websites and Tools [September 28] (5 comments)
• Cool Websites and Tools [September 27] (7 comments)

–>

<!–

<!–

<!–
<!–
<!–
<!–
<!–
<!–
<!–

Over the years, however, Facebook went through a number of changes; new features such as the suggestion tool made the process of finding long-lost friends much easier and Facebook’s incredibly fast growth allowed us to make those connections faster than ever. At first, I thought this was great but what I found however, was that the larger my friend list grew, the less accurate that the suggestion tool became and the fewer friends I ended up finding in the future.

This was because the number of people I knew in the real world was limited and friending a new person on Facebook was no different than crossing them off of a list. For me, Facebook was more about making connections than communication and as I started to make fewer connections, Facebook just started to get boring.

Today, Facebook is more of a chore than something fun to do. Instead of feeling like a treasure hunt, checking my Facebook page seems more like checking my email; more like something I have to do than something I want to do. I log in, quickly browse my feed, maybe check out a photo or two and then log off.

So how does Facebook make the site exciting again? Facebook should start by giving us a way to make new and interesting connections with people we don’t already know. Don’t get me wrong, I don’t want Facebook to be Twitter, with photos, nor do I want Facebook to become a dating site. Facebook needs to think beyond existing relationships and introduce a way to meet new people that helps build meaningful and positive relationships like we might make in real life.

I don’t pretend to know how this might work but what I do know is this; if Facebook doesn’t do something drastic soon, even the newest members will start to tire of the service. Once that happens, Facebook will start down the path of all the other failed websites.

What do you think? Are you getting bored by Facebook? Let us know how you might fix it.

 

 

By Sean Geng

Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your site.

How does your website function across all these options? It’s important that your website is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices. In this article, we’ll cover some basics of making sure your site is cross-browser-compatible, including snippets and resources to help you along the way.

The Problem

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.

So what are the options? The data about current browser share varies

depending on the source and the region, but in general, Internet Explorer, Firefox, Chrome, Safari, and Opera make up most of the market share, with Internet Explorer dominating the market

. Internet Explorer 8 has over 25% market share, Internet Explorer 6 has 215 and Internet Explorer 7 having 14%.

When there are so many different options out there, each running their own rendering engine, how do you ensure that your web design or application will hold up in each of them? That what we hope to cover and provide solutions for in this article.

How does your site perform?

So, how does your current site perform in the multitude of browsers that are out there? Why not check for yourself? If you don’t want to install all the major browsers out there on your own personal machine, here are some resources to help you out.

Adobe Browser Lab

Adobe Browserlab offers an awesome solution for viewing on demand screenshots of your site. This is usually my go-to program for testing in various browsers.

Browsershots

Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.

Browser Sandbox

Runs an application to view your site in a variety of browsers.

Browsrcamp

Allows you to test the compatibility of your design with Mac OS X browsers.

IE Tester

A free WebBrowser that allows you to check how your site looks like on IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.

Browser Proofing Your Site

So turns out your site doesn’t function as expected across all the major browsers? Don’t worry. It happens to the best of us. Now it’s time to go about fixing it.

Validate

First off, validate your site

. Ironing out those XHTML and CSS errors can often solve those pesky browser bugs. I suggest running your site through W3’s XHTML Validator

and CSS Validator

.

CSS Reset

Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:

Eric Meyer’s Reset Reloaded

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

YUI’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img {
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
abbr,acronym { border:0;}

Either include thet CSS reset styling at the top of your stylesheet, or have Yahoo host it and simply link to it in your HTML-documents, right before your own stylesheet:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

Conditional Statements

Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.

One of the most common uses of conditional statements is to include a stylesheet if the browser is Internet Explorer. By doing this, you can correct some bugs that exist in your code and override your current stylesheet.

To use conditional statements, simply include the statement in the head section of your XHTML, right below the stylesheet inclusion.

Include a stylesheet if the browser is IE

<!--[if IE]>
        <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Target Specfic Versions of IE

<!--[if IE6]>
        <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

(Of course, you can replace IE6 with any version of IE)

PHP Browser Detect

If you are looking for a more specific way of targeting browsers and even operating systems, then you should consider checking out Techpattern’s PHP Browser Detection Script

. It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.

jQuery Browser Detection

For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site, check out TVI Design’s Browser Detection using jQuery

. The script adds a class to the body, which you can then style in CSS.

Mobile Devices

Things are changing. New devices are emerging as a medium for browsing the web these days. Whether it’d be smartphones, iPods or an iPad, there is a new enviornment for web design and as they become increasingly popular, it means that you must also take them into consideration when designing a site.

What does my site look like in a mobile device?

How about testing your site in some web based mobile emulators? If you are looking to test your design in a mobile device, here are some great resources:

Test iPhone

Simulator for quickly testing your iPhone web applications

iPhoney

iPhoney is a free application you can download in order to simulate a iPhone browsing experience. Includes support for rotating, zooming, and even turning off plugins like Flash.

MobiReady

Excellent tool for testing in mobile devices. Provides feedback including test results, options, and emulators.

Mobile Device Emulator

A great way to test your site across a multitude of mobile devices.

Ways to make your site mobile friendly

So how do you go about making your site mobile friendly? Well, if you are interested in pursuing a mobile version of your site, here are a few ways of doing so.

Redirect Users on a Mobile Device
An easy way of making sure your site is mobile-friendly is to redirect users viewing it from a mobile device to a certain “plain” version of the page on your server. Some of the easiest ways of doing this include Studio Hyperset’s Mobile Redirect Script

, or using Mobiforge’s Lightweight Device Detection in PHP

.

Mobify

Mobify allows you to design a mobile version of your site based on your current design. It also allows for traffic stats and advertising options.

Mofuse

Mofuse lets you create a mobile version of your blog for free. It’s pretty easy, and only takes a bit of time.

Further Resources

Still hungry for cross browser compatibility resources and solutions?

• 15+ techniques and tools for cross browser CSS coding

  Cats Who Code’s very useful reference guide of great CSS techniques for cross browser coding.

• 7 Fresh and Simple Ways to Test Cross-Browser Compatibility

  More resources for testing your site on different browsers.

• Browser Tests, Services, and Compatibilty Test Suites

  Smashing Magazine’s article on Browser Tests

• Tips to design your site for mobile devices

  Woork’s excellent article on designing for the mobile device.

About the author

Sean Geng is a freelance web designer based in Pittsburgh, PA. He is the site curator over at Designmess

, or contact him via his website.

In this article, I will explain 3 ways in which one can attract a lot of followers. While I am sure that there are exceptions, for the most part, the Twitter Elite fall into 1 of 3 categories; only 2 of which are attainable by most. It is my hope that you guys will use this article not as a roadmap to gain more followers but instead use it to develop realistic goals and benchmarks for your account. That way you can stay focused on your message and your audience, not your popularity.

Celebrities, Major Brands, and (Some) Politicians

If you joined Twitter because you want to be the most-popular user, chances are you’re going to be disappointed. For the most part, the most popular users on Twitter are celebrities, major brands, and occasionally politicians. There are several reasons for this but this is mostly a result of their already high name recognition and popularity. Celebrities, major brands, and politicians have the advantage of huge advertising budgets and mainstream media outlets to help push traffic to their profile page. This is an advantage that the average Twitter user will never have.

Examples

• @levarburton
• @Alyssa_Milano
• @nordstrom
• @BarackObama

Journalists and Bloggers

On Twitter, people tend to follow users that have something interesting and unique to say. Journalists and bloggers are really good at finding and distributing information. So naturally, these types of people attract huge amounts of followers. If you’re looking for a way to attract a lot of followers, starting a blog is probably your best bet. A blog will give you credibility and a home base to build a following. Once you start writing articles and posting them to Twitter, you will find yourself being retweeted more and more often. Eventually, you will find that your follower count will begin to increase. While this process takes a lot of time to reach critical mass, it is probably the most effective way to build a large following.

Examples

• @WSJ
• @mashable
• @claytonmorris
• @huffingtonpost

Retweeters

The third type of person with a lot of followers is the Retweeter. Good Retweeters are hard to find, mostly because because it takes a lot of hard work, dedication, and time to find interesting articles and retweet them all day. If you want to become a great retweeter, find a topic of interest, then find some great people to follow; after that, just start retweeting. Don’t fool yourself however, retweeting is exhausting and you may find this role to be tedious at first; but eventually people will start to notice and your following will start to grow. The toughest hurdle you will have to overcome will be distinguishing yourself from a bot. You can do this by being friendly, helpful, and most of all by engaging with other users. Don’t just retweet people, reply to them as well, try posting your own thoughts every now and then to put your retweets into context. This will show your followers that you actually read what you post.

Examples

• @mayhemstudios

In Conclusion

The longer you use Twitter, the more you will realize that it’s not a horse race. Twitter is more than just about how many followers you have. Twitter is about distributing information, engaging others, and most of all, having fun. Most Twitter veterans can spot a person who is just looking for followers a mile away so try not to look desperate in your attempts to build a following. Your first step should be to relax. Then focus on being a responsible member of the community. Once that is done the rest should all fall into place.

When designing for the screen, people tend to underestimate the importance of type. You would be wrong to think that only print designers have to kern, adjust, weight and organize type meticulously.

That’s exactly what separates semipro’s from high standard professionals. Let’s talk about minuteness for a bit.

It is strictly a lie that motion designers don’t have to spend hours on adjustment and alignment on type.

It is starkly a lie that motion designers don’t have to kern, weight and organize type.

Obviously, we can’t bring typography to perfection for every single frame, but the important key frames should show a sense of aesthetics when it comes to typography.

We’ll share with you the do’s and don’ts of typography used in animation.

Do’s and Don’ts of Typography in Animation

Do: use sans serif fonts when the type you are displaying is not easily legible due to terms of timing or composition. Serif fonts are harder to read and become a plight rather than the originally intended information bearer.

Always keep in mind that you are designing for the screen. In opposition to printed work, the user can easily resize your screen design, and you sure as hell do not want to lose your serifs due to the user’s high screen resolution. Using sans serif typefaces retains the readability even at smaller font sizes.

Don’t: stretch fonts disproportionally. The thick strokes will get way out of proportion fast, so will the curvatures. Squeezing type could even put your job in jeopardy.

Do: limit yourself to two or three different typefaces per piece of art. More than that will destroy the feeling of a clear concept and make you look like an amateur. This tip is generally held as a basic guideline for typography in any media, whether its print design or web design typography.

Don’t: use faux italic or faux bold. Those are the buttons for bold and italic in Photoshop and any other Adobe product. They will try to simulate the type style of the font but never succeed entirely as it can’t elicit what the intention of the font’s creator was. And yes, in most cases, faux italic and faux bold are noticeable.

Instead, look for the typeface’s italic or bold style. In the example below, you can see the difference between the real versus the faux bold style.

Do: kern your type. A big leap between L and T, for example, simply looks foul. Use your Alt/Option key in combination with the arrow keys to change the kerning between letters in any product of Adobe.

Don’t: make text oriented vertically unless you’re targeting an audience that is accustomed to reading them this way. Especially in animation, it is irritating and takes time to read since most viewers are used to reading from left to right.

Do: use a grid to align your type elements. Relate them to each other in size and position and make sure the spaces between them are equal or follow the same pattern. (Learn more about grid layouts.) Use tracking and leading to bring the spacing to perfection.

Don’t: use Comic Sans or Papyrus. We don’t care how funny they might look. Do not ever use them. Since Microsoft released Comic Sans back in 1994, it has been used in any possible (unintended) way.

It was originally designed to imitate Comic book lettering, and that’s the only occasion you should ever even consider using it. And even then—you’re better off with another font. (Read more about the History of Comic Sans.)

Summing Up

Don’t look at type as if it is a "must", but rather, see it as another powerful graphical element that will not only help to convey your message and information, but also support the overall visual impression. And—when worse comes to worst—you can still ask Max Kerning.

What are your own experiences with typography in motion design such as Flash movies? What tips can you share with us? Share it in the comments.

<!–

Related Content

• A Basic Look at Typography in Web Design
• 20 Useful Typography Tools
• 20 Websites with Beautiful Typography
• Related categories: Resources and Tutorials

About the Author

<!–

Jake and Dan is the design and postproduction team of Jake Rathmanner and Dan Borufka, based in Austria and the Bay Area. They are the founders of creatogether, a site where they share articles and tutorials on design and coding. As freelancers in web design and postproduction, they are driven by challenge. Catch Jake and Dan on Twitter as @jakeanddan.

You might have heard this metaphor before in some form: "Dwarfs standing on the shoulders of giants." It means that a person making something new can benefit from work that already exists, leveraging and understanding the labor of people who have done it before them. I found out that this saying is old, almost a thousand years old—Isaac Newton popularized it.

So when I hear clients say they don’t want to use open platforms because of reasons such as:

• They’re inferior to paid software
• They’re insecure because they’re open
• There’s no good support for these products

I often wonder why they can’t see the seemingly apparent reasons for using open platforms.

Open platforms have many benefits to small and large businesses alike, but many decision makers fear the concept of open source.

But I do soon realize that clients—who probably aren’t as intimate or vested as I am on web systems (closed or open)—require a bit education on what open systems really are and how they can use them to their advantage.

In this article, I’ll discuss ways in which open platforms can meet the business objectives of your clients and allow their project to stand on the shoulders of these giants.

Why Open Platforms Rule: Their Community

Open platforms have communities that come pre-packaged when you adopt them into your business. Most clients are trying to build a fanbase around their product, or at least, they want more eyeballs. Open platforms give them the capability to engage with an already-established community.

At the bare minimum, they can use the platforms as a conversion tool, although too many clients stop there.

Budgetary Savings

Money. This will hit decision makers where there heart lies: in their wallet. Open platforms are often free or low-cost. Maintenance and support are cheaper because you leverage the collective power of the community that surrounds the project. Getting support for open software comes in the form of people who’ve been there and done that.

Development time also decreases. Adopting an open platform often comes with years of work and thousands of combined development hours put into them. Two heads are better than one, as they say.

It’s a good idea to note that, we the designers can sometimes get thirsty for a good fight. We think we might be able to make a better mouse trap. But can one person, or a even a small team, compete with the work of thousands? And even if they can, is it a smart move to reinvent the wheel?

You Don’t Need to Adopt the Platform in Its Entirety

Another point to make is that just because you use a platform doesn’t mean you need to embrace the entire platform or even how it is suppose to work.

If you have a popular site that show a lot of pictures? You can offload parts of it to Flickr. The bonus is that Flickr users who find your photo on Flickr might be enticed to visit your site.

Streaming video? Offload that to YouTube. Even if you still present the content on your site, you can still use the open platform, and you get the community benefits of having your videos publicly accessible in a larger site such as YouTube.

Pacifying Concerns about Product Support and Security

Support and security are the bell-weather arguments against open systems.

First, security is not an inherent problem in open systems. Just because a system is open doesn’t mean it’s insecure. This argument is bolstered by the many reports of hacked websites and systems, which often turn out to be incorrect implementation, bad security practices, or end-user error (but it’s so easy to blame technologies that have the word "open" as a feature).

In fact, open systems not being secure is very far from the truth. Take for example the Linux operating system. Bugs and security flaws are found at a much quicker rate than in its closed-sourced counterparts.

Security isn’t something you can buy; it has to be practiced. There are programs out there that are better at informing the community of security concerns. Drupal is a great example of an open source system that has a strong security concern. If your client is security-conscious, do an audit. Demonstrate use in security-concerned areas, but don’t let them dismiss the system out of hand just because it’s "open".

Support is easy. Open systems have vendors that sell support, if one needs it. Closed and proprietary system support—especially those with a small user base—don’t have many alternatives to obtaining third-party support. Often, you are tied to the mercy of the vendor.

When talking about open web systems such as YouTube, you can always take your stuff elsewhere, like Vimeo, if the solution doesn’t work in your particular case.

Uses of Open Systems

Here are just a few examples and case studies you can use when trying to convince a client to go the open platform route.

Rudy’s Can’t Fail Cafe in Emeryville, CA

If you live in the Bay Area (in California), you should check out a restaurant called Rudy’s Can’t Fail Cafe in Emmeryville. The food is good, but what I love about this restaurant is their marketing. They made a mini documentary and used Vimeo, a free video hosting provider, to host it. They were then able to take that video and use it as an ad on a local news website.

So not only did they get the documentary to live inside a community of videos, where it can be admired as a mini-doc, they can also use it as a novel ad that stands out against all the other hyper-intense mini-flash ads.

Oh, and they also get the benefit of free bandwidth.

Whitehouse.gov

The Obama administration has been outspoken about being transparent. One way they have backed that up is to embrace the best software solutions for the job. Whitehouse.gov, a site that needs to be secure because of its nature, has decided that Drupal, an open source content management system, is good enough for them.

While the Whitehouse.gov isn’t a super secret website, I am sure they have security concerns, and they still decided to use Drupal.

There is a secondary win here as well, when you talk about transparency and including the public in the process, it’s nice to see that the Whitehouse puts its weight behind a system that is built in an open fashion.

Bonus points: they post an awful lot of videos on YouTube.

Justin Bieber

I can’t say that I am a big fan of his music but I can’t deny that he is popular. He didn’t become popular because he built a website. He went where the people are, on YouTube, and built a community around himself in YouTube. This is how a young man—who would have never been seen or given a shot if he went with a more traditional route— landed himself a recording gig.

You might wonder what a 13 year-old pop artist has to do with your clients, but they actually have a lot in common. If you have ever worked for a startup or brand new company, they are looking to get press and more eyeballs on their wares. They often feel that their best chance at making a splash is to build a catchy website or to build a community on their site. They are blind to the fact that it’s super hard to build a community.

So, just like Mr. Bieber went to where the people are, your clients shouldn’t be afraid of it either.

A Short Recommended List of Open Platforms

Video

• Youtube
• Vimeo

Pictures

• Flickr
• Picasa

Audio

• Houndbite

Open Website platforms

• Drupal
• WordPress.com, and WordPress.org
• Django – a web framework in Python
• Ruby on Rails – a web framework in Ruby
• CakePHP – PHP framework

What have been your experiences with clients resisting open platforms? What reasons do they give you? How do you convince them that open platforms are good for all parties involved?

<!–

Related Content

• 10 Excellent Open Source and Free Alternatives to Photoshop
• 30 Useful Open Source Apps for Web Designers
• CMS Showcase: 31 Remarkable Drupal Powered Websites
• Related categories: Web Development and Project Management

About the Author

<!–

Alex Kessinger works for Yahoo! as a front-end engineer. Elsewhere, he likes to curate great stuff from the web on his blog, alexkessinger.net. He is also a founding member of the Tastestalkr Network, a brand group. When not working, Alex lives in the bay area and enjoys really good food.

Chrome is the newest child added to the constantly feuding web browser family. Although Google Chrome is comparatively new, it has been producing some major buzz around web for its performance, minimalist interface, and usability.

Another useful side of Chrome is the extensions that give the user added functionality for common web browsing tasks. Many of these Chrome extensions can help you increase your productivity and enable you to perform your jobs easier and faster.

Note: Since Google Chrome for Mac OS systems is still in beta, some extensions might not work properly. However, we have tested all of the extensions in brief, and we can confirm that they function.

1. Pixlr Grabber

Taking screenshots and then sharing them is a big process. You copy the screen grab into your clipboard, open a graphics editor and save it into a web format. Then you have to upload it to a web service so that you can share it publicly. Behold Pixlr Grabber, an extension that allows you to take screenshots in Google Chrome and automatically upload it to imm.io, an image sharing service. You can take parts of the visible screen, select only parts of it, or grab the entire web page.

2. Copy Without Formatting

What do you normally do when you just want to copy some plain text without any formatting (font, color, images) from your browser to an office or email software? Copy the text, paste it into a text editor like Notepad, and then copy and paste it again into the destination? Don’t worry, you’re not alone—even the productivity bloggers at Lifehacker have this problem. With the Copy Without Formatting Chrome extension, you can easily and directly copy unformatted text from Chrome and paste it anywhere, allowing you to cut out the middleman and streamline this task.

3. Evernote Web Clipper

Do you often find something cool on the web but forget to bookmark it? And when you need the web page, do you end up spending a lot of time trying to find it again? We all do. The Evernote Web Clipper Chrome extension saves the content of your clipboard along with a link back to the original page quickly and painlessly. You can store text, images, and links into your free Evernote account so that you have ready access to them anytime and anywhere (with an Internet connection).

4. Symtica

If you find yourself using many Google web applications (seriously, nowadays, who isn’t?) and you want a quicker way to access and use them, use the Symtica Google Chrome extension. This Chrome extension can watch out for new emails, create new Google Docs documents, access your contacts list, manage your Gmail task lists, read your RSS feeds, and more.

5. Image Search

Finding images on the web can be a drag. If you’re in need of some serious web scouring to find that perfect LOLcat photo to use in your next killer PowerPoint presentation, check out Image Search, the ultimate image search Chrome extension that searches websites such as Flickr, Picasa, Zooomr, and Photobucket. There are loads of options for customizing your search options by size, type and more, saving you a fair bit of time.

6. AdBlock

This Google Chrome extension blocks any kind pop-ups and ads, enabling you to focus on the information that you are trying to obtain. Using AdBlock can improve your productivity because it can lower web page response times as well as avert you from being distracted by advertisements and pop-ups that can get you on a tangent. But do allow the sites you love to display ads because ad-blocking can affect them dearly.

7. goo.gl URL Shortener

If you are constantly sharing web pages, goo.gl URL Shortener is a must-have one-click URL shortener that makes it a snap to share links and useful resources on social media sites such as Twitter and Facebook. The short URL is also automatically copied to your clipboard, drastically shortening this process compared to the conventional method of URL shortening. The extension utilizes Google’s own URL shortening service.

8. Web2PDFConverter

Converting a web page to a sharable PDF file is a long and arduous job. Well, not so if you use Web2PDFConverter, a Google Chrome extension that lets you create PDF files from within your web browser. The extension even allows you to preview how the PDF document looks through Google Docs, saving you even more time in having to open Adobe Acrobat (or the desktop counterpart that you are currently using) to check your work.

9. Shareaholic for Google Chrome

Are you a social media junkie? If you are, you know that this addiction can be a ruthless time drain and can place a huge damper on your otherwise productive day. Making social media sharing easier, faster, and more convenient is always a good thing. Shareaholic for Google Chrome is an extension that will convert the current web page you’re on into a short URL and allow you to share it with your friends across many social media sites.

10. Split Screen

As this Chrome extension’s name implies, Split Screen enables you to split your browser’s viewport. Not only can it reduce the number of tabs that you have open (and thus, make it easier to find the web page you need), it also enables you to effortlessly compare and contrast several web pages at the same time. It is perfect for people that are studying and cross-referencing information.

What Google Chrome extensions do you use? If we have missed any useful extensions, share it with us in the comments.

<!–

Related Content

• Performance Comparison of Major Web Browsers
• Top 20 Essential Firefox Add-ons for Web Designers
• Top 6 Internet Explorer Extensions for Web Developers
• Related categories: Tools and Productivity

About the Author

<!–

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

The Particle Lab

Creating print stylesheets can be a real pain in the backside, but this super useful tip from The Particle Lab

really takes the hassle out of testing your print only CSS. With just a few clicks in Firefox, you’ll no longer be tediously refreshing a print preview.

View the article

Tutorial9

Tutorial9

present this in depth article that talks about the various colour correction techniques, allowing you to tweak your photos so they look their best. Learn how to quickly add some popular colouring effects to your photos to give that professional look.

View the article

Web Do’s & Don’ts

Navigation menus are often quickly thrown together during a website design, but there are some important factors to take into consideration in order to boost the usability of your design. Web Do’s & Dont’s

takes us through some examples and best practices.

View the article

Vectortuts

Vectortuts

are continuously pumping out great vector based tutorials. This recent Illustrator tutorials takes you through the process of creating a bright and attractive butterfly graphic, using gradients and highlights to add details and depth.

View the article

Vandelay Design

I’m a big fan of using subtle textures in my design, so this inspirational roundup post from Vandelay Design

was right up my street. Gain inspiration and see how designers are using textures to add a tactile feel to their website designs.

View the article

• This Week’s Favourites – March 19th 2010

• This Week’s Favourites – March 5th 2010

• This Week’s Favourites – February 19th 2010

• This Week’s Favourites – February 5th 2010

• This Week’s Favourites – January 22nd 2010

The design we’ll be building calls upon some random ideas for the topic of your doodles. How about a stick-man battle or a cow abducting UFO for the focal point of your business card?

Start work by opening up Adobe Illustrator. Version CS4 took a step forward with its ability to easily create print documents, with new In-Design esque features for setting up bleed automatically. The business card size I’m familiar with is 88×55mm, but this may vary depending on your printer of choice. Enter 3mm into the Bleed options to allow Illustrator to set up your document. Also remember to ensure you’re using the CMYK colour mode for print. It’s also worth noting that folks from the USA will more than likely want to switch to the more common metrics of inches, as opposed to Millimeters.

Illustrator has kindly positioned a red guide to let you know where your bleed boundaries are, as well as the black outline showing where the final card boundaries will be. You’ll also want to add your own ’safe margin’, so that none of the important elements of your design appear too close to the edge. Drag four guides onto the artboard and line them up with the document boundaries.

Right click and unlock the guides. Select the left and bottom guides and hit enter. Input 5mm into the Horizontal and Vertical options then press OK. This will move the guides 5mm into the document, leaving a margin to work towards.

Repeat the process for the top and right guides, but this time enter -5mm so they are moved negatively. Right click and lock the guides to avoid accidentally adjusting them

A typical background you might find behind a doodle would be the ruled pattern from a notepad. We’ll recreate that pattern recreate a similar lined background to our business card. Draw a square with a white fill, then select the upper most edge with the Direct Selection tool. Press CMD+C to copy and CMD+F to paste in place, then move the path downwards towards the center of the square. Add a blue stroke at 0.5pt with the colour c35,m20,y0,k0.

Select the two objects and group together, then drag them into the swatches palette to create a new pattern swatch. This swatch will repeat when it’s added as a fill.

Draw a rectangle onto the artboard and align it exactly with the bleed margins. Add the pattern swatch as its fill colour.

No business card would be complete without contact details, so we’ll add these first. Type out your name in your favourite font (mine is DIN). Align the text up with both the ruled background pattern and the left guide that identifies the safe-area.

Finish off entering your contact details and adjust the line-height to match the height of the ruled lines. You might want to use a variation of type sizes, but remember to avoid point sizes less than 6 to maintain legibility on the printed card.

Now let’s get creative and decorate this boring business card! Use the Paintbrush tool and select a small round brush from the Brushes palette. Choose a typical ink-like colour such as c45,m35,y0,k0 for the stroke colour and begin doodling on your card design. Make sure any sketch lines that extend beyond the edges of the card also span across the bleed area.

There are no rules when it comes to doodling. Draw whatever comes to mind, for me it was a stick-man battle scene.

Don’t worry if your lines aren’t overly accurate, it’s only a quick and fun doodle after all. Just remember to extend your lines beyond the bleed edges.

Fill up any empty space with a random doodle, soon you’ll be left with the coolest business card design on the planet.

Press CMD+A to select all your objects, then go to Object > Expand Appearance. This will convert all those strokes into solid shapes.

Draw a temporary rectangle that fits into the bleed area. Leave the rectangle without a fill or stroke. Select all the doodle lines that extend beyond the edges of the bleed area along with the temporary rectangle. Click the Crop option from within the Pathfinder palette.

All the elements should now have been clipped down to size and fit neatly within the business card bleed dimensions.

Select all your text elements then go to Type > Create Outlines. Just like the Expand Appearance menu converted strokes to shapes, Create Outlines converts text to solid shapes, this will prevent any font related issues with your print file.

Go to File > Print to bring up the print options. Select Adobe PDF from the Print drop down, select Custom for the Media Size, then select the Marks and Bleed option and add all printer’s marks.

Illustrator will then export a print ready PDF file that’s ready to send off to your printer of choice.

Before sending off your file, you might want to double check your ink coverage and number of plates your design will use. In Adobe Acrobat Pro, go to Advanced > Print Production > Output Preview. In the following options panel you can toggle each of the CMYK plates to ensure your colours have exported as expected. Your text and linework will look their best with just one or two colour plates being used. The more plates a colour swatch uses, the higher the risk of mis-registration and blurred lines. In the screenshot notice how all the doodles use the Cyan plate, but the text is invisible, this is because the text only uses the Black (K) plate.

A few days later your freshly printed cards will be in your hands and you’ll be the coolest designer on the planet.

• Top Places to Find Quality Illustrator Tutorials Online

• How to Create a Crafts Inspired Vector Kids Illustration

• Create a Rolling Stones Inspired Tongue Illustration

• Create a Cute Furry Vector Monster in Illustrator

• How to Create an Abstract Vector Design in Illustrator

In this article, I’ll share with you some tips for launching a website based on the experience of our own launch of Design Instruct.

This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

1. Have scalable web server resources

With today’s high-availability and cost-effective content distribution solutions such as Amazon S3, and on-demand instant scalability offerings of hosting providers such as VPS.NET, you can affordably have web servers that can take a beating from high-burst traffic.

Not only will having scalable solutions prepare you for the high-traffic that a website launch can generate, but it also future-proof’s your set-up as your website grows. High-availability, metered set-ups give you the ability to pay for just the resources you need right now.

For Design Instruct, we set up a CDN for distributing static files for our content-heavy pages, and scaled up our VPS resources temporarily on the day of the site launch because we were anticipating a huge burst of traffic.

Regardless of how big or small you think the traffic you’ll get is, it’s never a bad idea to get a web hosting solution that will scale—they’re tremendously affordable and you pay only for what you intend to use.

Don’t risk having your website crash and your launch day ruined because of a shoddy web server.

2. Get all of your social media accounts beforehand

Nowadays, social networking is integral to a website. Don’t wait the last minute to sign up and set up your social network accounts on Twitter, Facebook, MySpace, and any other site that you’re planning to engage in.

This guarantees that your preferred account name will be available before you become known and gives your visitors additional ways to communicate with as soon as they arrive at your website.

On Design Instruct, our social media accounts were established well before the site’s launch date. For example, we had our Twitter account set up close to a month ahead of our site launch.

3. Have content ready to publish for at least a month

The early stages of a website is filled with many tasks. One timesaving deed you can do is to have content ready to publish so that you can follow up your launch with great content. This also frees you up for the many other activities involved in this stage of your website’s growth.

For Design Instruct, we set out to have 10 tutorials ready to go before we launched the site. We didn’t quite make that goal before our launch date, though we had enough to comfortably go ahead with the launch. This enabled us to focus on tasks that needed to be tended to without fear that we wouldn’t have great content to publish.

4. Drop hints about the upcoming launch to build anticipation

Let people know that there’s an event that’s going to occur to help create some hype. If you want to keep the details undisclosed to the public—that’s fine—you can still let people know that something on some date is going to happen.

In Design Instruct’s case, we wanted to wait until the actual launch before revealing what the site was. That didn’t prevent us from dropping hints that there was something coming soon. We did it through interviews and on Twitter a month ahead of the actual launch date.

This type of subtle hinting can pique the interests of your long-time supporters and fans. And those are the people that count the most when your website launches.

5. Plan your tasks for at least a month after the site launch

The worst question to have after a site launch is, "Now what?" You need a clear goal and direction on how you intend to follow through your site’s launch. If you’ve planned for a big site launch, don’t let the initial interest fizzle out by not having a plan. Before you launch, you should know exactly how you want to proceed right after.

For example, on Design Instruct, we had a laundry list of things we wanted to work on. Having content ready to publish, we were able to focus on growing the site and improving the user experience for our readers.

6. Triple-check the technical details before going live

Measure twice, cut once. Better yet, measure thrice. Making certain that your early visitors will have the best experience possible when first arriving at your site means that everything needs to be working correctly.

Check to make sure that all hyperlinks work. Make ultra-sure that contact forms, email accounts, commenting systems, and all the other things that your users will interface with, is working properly.
One of the late quick fixes we had to implement just hours before Design Instruct’s launch had something to do with category pages.

Users visiting a category page from the sidebar links that didn’t have an associated tutorial under it simply said that the page could not be found. It gave the impression that there was something wrong.

We had to revise the message to say, "There aren’t any posts in this category yet. We’re working on it though, so please check back soon!" to let users know that the pages do work, just that there aren’t anything in them yet.

7. Launch on schedule

Whether you’ve announced your launch date or not, you should release your website to the public when you say you’re going to. This forces you to stay on point and work towards a goal. What can cripple and delay a website launch is the attitude of "It’ll be ready when it’s ready."

When you’re nearing launch day and you think you won’t have the site fully completed, launch anyway (as long as it’s presentable and usable).

Websites aren’t like conventional consumer products—you can update and upgrade them any time you want.

At Design Instruct, we were delayed with some of the site features we wanted to implement, such as a comment rating system and a post rating system.

We still went ahead with the launch and created a malleable and constantly updated Upcoming Features page that listed the things we wanted to do in the future. We would curate this list by adding and removing items based on what our users want.

8. Contact your friends and family about the site launch

The first thing to do after a site has launched is to contact your friends and family. Let them know that you’ve launched the site so that they can be the first to see it.

Our friends list is just a bit larger than most people just starting out. However, we still sent personal emails to our friends at Smashing Magazine, Abduzeedo, Envato and others. We announced the site launch here on Six Revisions so that our regular readers would be the first to know about our new site.

It doesn’t matter how big your list of friends and family is, they should be the first to know about your site’s launch.

9. Provide easy ways of contacting you

When you first launch a site, you have to give visitors ways to communicate with you easily. Your initial visitors are early adopters, and as such, they’ll be critical and will help you find things that might be wrong with the site, as well as suggest ways you can improve the site for future users.

For Design Instruct, we had several modes of communication available: email, Twitter, the comments section in the announcement post on Six Revisions, and the comments section in the welcome post on Design Instruct.

This enabled us to find out what early adopters thought about the site, and what they wanted to see in the future.

We were also able to discover bugs via reports in comments and Twitter such as the error in color profiles in our CSS sprite and forgetting to set up RSS auto-discovery.

10. Show site visitors a roadmap of what’s to come

Perhaps the most important thing you can do when you launch a site is to show your initial users that there’s more to come.

No one gets a site right on the first day. Unless you release your website, anything you think your users will want and need is just a guess. The people who will best help you figure out what works for your users are your users.

So we’ve set up an Upcoming Features page and asked our users to tell us what they want and what they don’t want.

We’ve periodically polled our supporters and fans through Twitter to determine what we should do next.

We also track all of our site changes publicly through our changelog and version history to show our readers that we are indeed moving forward with their suggestions.

Let your users see that you have more tricks up your sleeve and that they should stay on for the ride as your website continues to grow.

Share your own tips for launching a website in the comments.

<!–

Related Content

• How to Design for Your Worst Client: You.
• The Three Golden Rules of Site Redesigns
• 25 Beautiful Examples of “Coming Soon” Pages
• Related categories: Web Development and Resources

About the Author

<!–

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.