1. Place the logo always in the left corner of the viewport

As drivers use to search for green traffic light to start leaving the intersection, users search the logo in the left side of the website to click on it. They are used to click on it to access the home/main page of the website. Also, as usability tests proved, the left corner of a website is the most visible content.

2. Add CSS states (almost) to everything

Nothing is more annoying that hovering a website menu, or a button, link etc without seeing a change. The user is searching for interactivity and if you, as web developer don’t offer him that, you will lose him. Beside hover, for example a button should have also an active state (pressed style). This way the user will fell he’s always under control.

CSS states example

<a href="#" id="button-style">My Button</a>

a#button-style
{
  background: #eaeaea;
}

a#button-style:hover
{
  background: #9c9c9c;
}

a#button-style:active
{
  background: #777777;
}

3. Use label’s “for” attribute

When in a form, and you need to click on a checkbox input or radio input, it will always be easier to be able to check/uncheck the input by toggle-ing also on the label. Using labels for forms is also an accesibility “golden rule”. Getting back to usability rules, a common mistake is to use the label tag without it’s for attribute. Here is a good example for using labels when inner a form:

<input type="radio" name="options" id="id-1">
<label for="id-1">First option </label>

<input type="radio" name="options" id="id-2">
<label for="id-2">Second option </label>

As result,selecting a radio option is easier. Cool huh?

4. Breadcrumbs

Using breadcrumbs could be compared with GPS navigation, the user will know his current position inside the website, it will help him to no get lost. You want to guide him through your website and you don’t want to have him annoyed by the fact he’s lost – because in this case you risk to loose him, he could exit your website immediately. Get inspired by the well known breadcrumbs patterns around the internet.

5. Highlight form fields

If you are dealing with text inputs and textareas you should use CSS focus state to specify when the user has clicked inside an input or textarea. This way user will know which form element he clicked.

Quick CSS example

input[type=text]
{
  border: 1px solid #9c9c9c;
  background: #eaeaea;
}

input[type=text]:focus
{
  border: 1px solid #323232;
  background: white;
}

6. Use HTML tags accordingly

Use heading, paragraph, bold elements in the right way, as they should be used. Take advantage of them by using heading to highlighting titles, use paragraphs to add a text section and bold to highlight words in the text section. Make your text easier to read by creating a text flow, this way the user will easier scan titles and sections.

Also keep in mind to use headings in their “normal” order: h1, h2,…etc. It’s recommended again not having more then one h1 per page, usually h1 contains a very important text like main title of the page, for example could be “purchase” or “download”.

7. Create a sitemap

A site map is a website structure representation, a link collection that helps improving user’s website navigation.

8. Rich content footer

Every time you build a site you should keep in mind that a website should have a header, content and footer, in some cases the last one is missing and the website looks a bit strange…it’s like “hmm…something’s missing?!”. Lately footers are getting richer and richer content, so take advantage and add information to it and do not forget to get inspired.

9. Think as you are the user

Also, you are an user after all, but imagine you are your own website user, try scenarios, act as you have no idea about the content of your site and try finding important links as purchase, download etc. If it’s hard for you, because you already know every comma in your site, ask a friend or colleague for a feedback. Keep in mind that every opinion matters.

10. Read, read and….read again about usability

If you think you know enough, that means you still have a lot to learn. Usability evolves, but the main principles are staying and reading can help you improve yourself.
Here’s a short book list I’d recommend to read:

• Don’t Make Me Think – Steve Krug
• Designing Web Usability: The Practice of Simplicity – Jakob Nielsen
• Designing Web Interfaces: Principles and Patterns for Rich Interactions – O’Reilly

Although this is very used, I noticed developers tend to skip fixing Firefox appearance of a dotted border that goes to the edge of the screen. In this tutorial I will show you how this can be fixed in a simple way.

First let’s see how Phark Method looks:

  <a href="#" class="replacement">dotted border</a>

and the CSS:

a.replacement
{
background: url(dotted-border.png) no-repeat;
height: 44px;
width: 316px;
display: block;
text-indent: -9999px;
}

The reason why the outline border goes to the edge is because of the text-indent value : -9999px. If the value is negative the text will be indented to the left and Firefox users will notice a dotted border that goes to the left edge of the screen.

There are two simple methods I know to fix this:

First method: use overflow

This is a fix I use frequently and it’s most recommended.

a.replacement
{
  background: url(dotted-border.png) no-repeat;
  height: 44px;
  width: 316px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;  /*Add this line to the image replacement method*/
}

Second method: use outline

This also fixes the problem but this can cause problems(you will not see the selection) when tabbing (if accessibility is an important factor for you).

a.replacement
{
  background: url(dotted-border.png) no-repeat;
  height: 44px;
  width: 316px;
  display: block;
  text-indent: -9999px;
  outline: none; /*Add this line to the image replacement method*/
}

Conclusion

At first sight this doesn’t seems to be a very important problem, doesn’t affect the HTML layout but when you are developing a website you want to be close to perfection (at least you should try it ) so I hope this will help you when encountering this kind of behavior.

Bellow you have a live demo with this outline example, please feel free to comment about it or about other solutions you’ve found!

Demo example

Using input type=”submit”

A form can be submitted using a button like input type=”button” having the advantage that you don’t need to click actually on it. You can just press ENTER key on your keyboard and your form will be submitted.

Submit form using input type=”submit” – demo

Using anchor element

Everything is fine until now but let’s see what happens when you need to submit a form using an anchor. You may ask yourself why you would need that, but all I can say is that there are cases when you need to use an element which is not an input to submit a form.

I encountered this situation two days ago and I thought that would be interesting to share this with you. I needed to find a solution because I didn’t like the fact that my form wasn’t submitted when pressed ENTER key.

The trick is to use a hidden submit input in your form. I wasn’t able to use display: none or visibility: hidden because IE ignores the submit button that way so I hide the button using classic style .

.input-hidden
{
  border: none;
  width: 0;
  height: 0;
  line-height: 0;
  padding:0;
  margin: 0;
}

Submit form using anchor and hidden input – demo

This is the way how it worked for me and I find this to be a very good solution. But, I hope this will also help you.

In either case, please leave a comment below with your feedback.

W3C tells us that we can use “margin: 0 auto” to center tables so why shouldn’t we use display: table to center a fluid div:

div.my-element
{
  display: table;
  margin: 0 auto;
}

This can solve many problems and does a good job in some cases but you must be aware that “display: table” is not working when using our “beloved” Internet Explorer (IE5.5, IE 6, IE 7) so don’t count on this for main design elements (especially if this ruins your design).

I hope this was usefully for you! If you have any comments or suggestions, do not hesitate to post them in the comments section.

Create new Photoshop document file

In order to start designing we must create a new 1600×1200px Photoshop file and after doing that you must fill the background with #316b94 color:

Create custom pattern

Now we’ll create a 5×5px pattern to use it for our background:

Now you must zoom 100% (press Z on your keyboard and click several times or use Ctrl+ several times) on the new pattern 5×5px file and you should have this on your screen:

Select the Pencil Tool(B)

Hold down the left mouse button and choose the second option from the list and after please check you have the following settings for your pencil brush:

Start creating pattern

From the top-left corner to right-bottom corner start drawing 1pixel:

Define Pattern

From the top horizontal menu select Edit(Alt+E) and further choose Define Pattern. Congratulations, you just learned how to create a custom pattern.

Add styles to your background

With the pattern you’ve just created go to Blending options and add the following styles:

The background should look like this:

Design the wings

Now we have the background we should go further and add our two wings.

Start creating feathers

You must select Pen Tool and start adding points until you create a shape like this one:

Then add the following effects:

Add more feathers

Place more feathers using slight different shapes with same blending options until you achieve a wing…you should overlap them as it’s shown bellow:

This is why you should achieve by placing feathers one by one:

Duplicate the left wing

After you’ve created the left wing duplicate the layers you used for it and having all duplicated layers selected go to Edit->Transform and Flip Horizontal. A tip for you is to group layers for easier management of layers.

Create a heart

Create a heart with Pen Tool or you can choose heart symbol from custom shapes.

Add the following effects:

And you will have:

Add a new layer like this and use the following gradient:

Add abstract shapes and lines

Selecting Pen Tool and Path instead Shape Layers you must create a custom path like the one bellow and then apply a stroke path with the following brush settings:

This is my result i achieved using two stroke paths but yours can be different, depends of what stroke path you’re create:

Add glowing circles

Select the Elipse Tool (U) and holding down the Shift key create several circles like in this figure and place them behind heart shape, then apply the Outer Glow effect.

Repeating the last step add more circles for the final step, vary their blue color and place them in the right-bottom corner:

Download wallpaper

Thanks for reading this tutorial, if you have something to say don’t hesitate to comment this article or to contact me!

The times when you had to use the CSS image replacement technique for a simple text shadow effect are gone.

Text-shadow property is CSS level 3

Accordingly, this property will work only on Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab. Notice there is no problem using this CSS3 property with browsers like Internet Explorer, this property simply will not work on IE so the layout won’t be affected anyhow.

Definition of the CSS text-shadow property:

The first two values are the X and Y axis offsets, the third is the blur radius value which is an optional value and the last value in our photo is the color of the shadow.

The cool thing about these values is that depending how you combine these value you can achieve great shadow effects like letterpress or outlines.

For the following CSS code:

h1
{
  color:#777777;
  margin:0;
  font-family: Trebuchet MS;
  font-size: 35px;
  text-align:center;
  text-shadow: 1px 1px 3px #323232;
}

here is what you achieve:

View Demo

Thanks for reading, I hope you like this effect as much as i do…it’s simple, easy to add and there are no problems with browsers that does not support CSS3.

1.Selectors

The selector is the element that is linked to a particular style.In the following example the selector is “p”, so “p” is the element who’s margin properties will be “0″.

p
{
  margin: 0;
}

Class Selectors

The advantage of a class selector is that it can be applied to more than one elements according to W3C recommendation.

.colored
{
  color: red;
}

Having this, all paragraphs who’ll have “colored” class as attribute will inherit red color from stylesheet.

ID Selectors

The id attribute assigns a unique identifier to an element, so try assigning an id attribute to no more than just one element.

If you’ll assign a CSS id to more elements within a page you will fail the W3C Markup Validation which is very important for you, as a designer.

#colored
{
  color: red;
}

Contextual Selectors

p#colored span
{
  color: blue;
}

This selector is applied to all “span” elements within the paragraph with “colored” id attribute.

Result:

2.Properties

Now that we know how a selector looks like let’s see what is a CSS property. CSS properties defines how the styles should look on the Web page or elsewhere.

Examples: margin, padding, color, border, background etc.

In this example, the h1 element has three properties: color, font-family and margin. These properties with theirs values defines how the h1 element will look.

h1
{
  color: red;
  font-family: Verdana;
  margin: 10px 0;
}

Conclusion

Using the selectors properly you will not only have a cleaner markup but you will also have a more beautiful CSS code.

The normal state of our input looks like this:

Please notice the effect that appears on input focus(we’re talking about Mac OS X browser-Safari):

To remove this annoying input effect we just need to add one css line and it will disappear:

input:focus
{
  outline: none;
}

There you go! Simple but very efficient.

1. Place CSS in a separate file

When you’re working with CSS code you should always use an external file to load CSS from. It’s very important to have your project files well organized and this helps you doing that.

2. Reset CSS

You need to reset CSS because as you’ve seen, browsers assign different styles to some elements and the best approach is to clear(reset) all styles from the beginning. In this way you’ll be sure you made a good start.

The best method I know since I work in this area is the Eric Mayer’s Css Reset method .

For those of you who think his method is too complex I suggest you to create your own reset method. You can start by resetting the elements you think you’ll use most like in this example:

body, div, h1,h2, h3, h4, h5, h6, p,ul
{
  margin: 0;
  padding: 0;
}

3. Always style inputs

There is no reason why you must use the predefined styles for the inputs, so always try to customize the inputs. If you don’t do that you will experience different looks for different browsers.

4. Use CSS comments

This is a good way to organize your code and you should do that especially when you have more than let’s say 100 css lines.

p
{
  margin: 10px 0;
}

/*This is a css comment*/

div
{
  height: 20px;
}

5. Center horizontally

Here you can see how to center horizontally an inline element:

  text-align: center;

To center horizontally a block element you must set the width for it and also auto for the left and right margins:

  width: 200px;
  margin: 0 auto;

6. Use inline and block elements correctly

This mean it’s recommended for you as a designer/developer to use the block elements like “div” when you need a block element and not use a “span” element for example with “display: block” style. This is available also for the inline elements like “b” or “i”, they must be used as inline elements when possible.

7. CSS text-transform property

Avoid writing with capitalized letters and use instead the text-transform property to do that:

  text-transform: uppercase;

8. Background sprites

Using sprites avoids causing flickering when using hover effects, try using all the time this technique because it’s awesome.
Two excellent articles about CSS background sprites I’ll recommend are alistapart.com article and the smashingmagazine.com one.

9. Font properties in one declaration

Instead having these three font properties for example:

  font-family: Arial;
  font-size: 12px;
  font-weight: bold;

use this css rule:

  font: bold 12px Arial;

10. Validate, validate and validate again!

You must always validate your css code to be sure that your code is W3c valid. A valid code means a good developer.

What other CSS  tips you are using  that are mandatory in your design/development?

1.Open Adobe Illustrator and create a new .ai file:

2.Select the Type Tool(T) and add the “red” text using these settings and the #B3B3B3 color:

If you don’t see the Type window you can bring it to front using the top menu: Window > Type > Character.

This is the result you must achieve. Please note the reduced spacing between the letters.

To continue customizing this text, right-click on it and select “Create Outlines” to transform the text into editable shapes.

3.Customize the text

First, create a new shape using the Rectangle Tool (M) like in the following example:

Now with the Pathfinder window activated (Shift+Ctrl+F9 or Window > Pathfinder), select the new square shape and the “e” shape from the “red” text and click on “Minus Front” as showed:

The result after we use the Pathfinder will look like this:

4.Add the “design” text

Note that the type settings are the same as i used for the “red” text, just that in this case the letters are capitalized.

5.Use the Pathfinder again

Use it as shown earlier to “cut” the “red” text and make it look like this:

6.3D Extrude&Bevel

With the “DESIGN” text selected from our layer pallete go to Effects > 3D > Extrude&Bevel and apply these settings:

7.Stylize with Adobe Photoshop

Export the content as .png and open it with Adobe Photoshop. You need now to create custom shapes to add lights and shadows to the design. To do that just select the Pen tool (P) from the left menu and start creating shapes as shown.Select the #ffffff(white) color as background and reduce its opacity to, let’s say, 20%.

This should be the result after adding lights:

Plus some shadows:

I hope you enjoyed this tutorial. Below you can find the final result.

Download source files