Archive | July, 2009
25 Jul

Smashing Magazine 2009-07-25T06:00:52Z WordPress http://www.smashingmagazine.com/feed/atom/ Vailancio Rodrigues http://www.smashingmagazine.com/?p=9066 2009-07-24T18:43:47Z 2009-07-24T14:37:36Z 51 Jean-Baptiste Jung http://www.smashingmagazine.com/?p=8348 2009-07-23T10:22:00Z 2009-07-23T08:31:18Z 51 Smashing Editorial http://www.smashingmagazine.com/?p=9008 2009-07-25T06:00:52Z 2009-07-22T15:43:49Z 109 Alexander Komarov http://www.smashingmagazine.com/?p=8989 2009-07-22T16:45:02Z 2009-07-21T22:29:53Z 86 Cameron Chapman http://www.smashingmagazine.com/?p=8924 2009-07-23T08:39:04Z 2009-07-21T08:00:37Z 51 Cameron Chapman http://www.smashingmagazine.com/?p=8930 2009-07-20T09:00:23Z 2009-07-20T08:43:22Z 107 Christian Baeuerlein http://www.smashingmagazine.com/?p=8276 2009-07-20T12:00:30Z 2009-07-19T08:12:13Z 57

70 Expert Ideas For Better CSS Coding

15 Jul

CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post.

We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Thank you, we, coders, designers, developers, information architects – you name it – really appreciate it.

You might be interested in reading our article 53 CSS-Techniques You Couldn’t Live Without, which should provide you with a basic toolbox for CSS-based techniques you might use in your next projects.

Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurício Samy Silva.

1.1. Workflow: Getting Started

  • After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing]
  • Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
    1. <em>master.css</em>  
    2. @import url(“reset.css”);  
    3. @import url(“global.css”);  
    4.   
    5. @import url(“flash.css”);  
    6. @import url(“structure.css”);  
    1. <style type=“text/css” media=“Screen”>  
    2. /*\*/@import url(“css/master.css”);/**/  
    3. </style>  
  • Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. [Roger Johansson]
  • Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class="floatLeft alignLeft width75">...</p>), make use of them debugging your markup. (updated) [Richard K. Miller]
    1. <em>CSS:</em>  
    2. .width100 { width100%; }  
    3. .width75 { width75%; }  
    4. .width50 { width50%; }  
    5. .floatLeft { floatleft; }  
    6. .floatRight { floatright; }  
    7. .alignLeft { text-alignleft; }  
    8. .alignRight { text-alignright; }  
  • Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file.

1.2. Organize your CSS-code

  • Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
    1. h2 { }  
    2. #snapshot_box h2 {  
    3.     padding0 0 6px 0;  
    4.     fontbold 14px/14px “Verdana”sans-serif; }  
    5. #main_side h2 {  
    6.     color#444;  
    7.     fontbold 14px/14px “Verdana”sans-serif; }  
    8. .sidetagselection h2 {  
    9.     color#fff;  
    10.     fontbold 14px/14px “Verdana”sans-serif; }  
  • Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
    1. /* ———————————–*/  
    2. /* ———->>> GLOBAL <<<———–*/  
    3. /* ———————————–*/  
  • Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven]
  • Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya]
    1. body {  
    2.     background#fdfdfd;  
    3.     color#333;  
    4.     font-size1em;  
    5.     line-height1.4;  
    6.     margin0;  
    7.     padding0;  
    8. }  
  • Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks]
  • Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr]
  • Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook]

1.3. Workflow: Handling IDs, Classes, Selectors, Properties

  • Keep containers to a minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.” [Ryan Parr]
  • Keep properties to a minimum. “Work smarter, not harder with CSS. Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place.” [CSSing]
  • Keep selectors to a minimum. “Avoid unnecessary selectors. Using less selectors will mean less selectors will be needed to override any particular style — that means it’s easier to troubleshoot.” [Jonathan Snook]
  • Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life]
  • Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew]
    1. /* 
    2. # Dark grey (text): #333333 
    3. # Dark Blue (headings, links) #000066 
    4. # Mid Blue (header) #333399 
    5. # Light blue (top navigation) #CCCCFF 
    6. # Mid grey: #666666 
    7. # */  
  • Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. [10 CSS Tips]
  • Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes. [Garrett Dimon]
  • Group selectors with common CSS declarations. “Group selectors. When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots of it.” [Roger Johansson]
  • Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven]
  • Move ids and class naming as far up the document tree as you can. Leverage contextual selectors as much as possible. Don’t be afraid to be verbose in your selectors. Longer selectors can make css documents easier to read while also cutting down the chances of developing class- or divitis. [Chric Casciano]
  • Learn to exploit the cascading nature of CSS. “Say you have two similar boxes on your website with only minor differences – you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.” [5 Steps to CSS heaven]
  • Use Your Utility Tags: <small>, <em> and <strong>. “Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else.” Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: Use shorthand notation

  • Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson]
  • Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
    1. a:link { colorblue; }  
    2. a:visited { colorpurple; }  
    3. a:hover { colorpurple; }  
    4. a:active { colorred; }  
  • Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]
  • You can use shorthand properties. “Using shorthand for margin, padding and border properties can save a lot of space.
    1. <em>CSS:</em>  
    2. margintop right bottom left;  
    3. margin1em 0 2em 0.5em;  
    4. (margin-top1emmargin-right0margin-bottom2emmargin-left0.5em😉  
    1. <em>CSS:</em>  
    2. border: width style color;  
    3. border1px solid #000;  
    1. <em>CSS:</em>  
    2. background: color image repeat attachment position;  
    3. background#f00 url(background.gif) no-repeat fixed 0 0;  
    1. <em>CSS:</em>  
    2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;  
    3. fontitalic small-caps bold 1em/140% “Lucida Grande”,sans-serif;  

1.5. Workflow: Setting Up Typography

  • To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook]
  • Use universal character set for encoding. “[..] The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 should be included in your web page’s head like this. [20 pro tips]
    1. <meta http-equiv=“content-type” content=“text/ html;charset=utf-8” />  
  • You can change capitalisation using CSS. If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format”. [20 pro tips]
    1. h1 {  
    2.     text-transformuppercase;  
    3. }  
  • You can display text in small-caps automatically. The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
    1. h1 {  
    2.     font-variantsmall-caps;  
    3. }  
  • Cover all the bases – define generic font-families. “When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]
    1. p {  
    2.     font-familyArialVerdanaHelveticasans-serif;  
    3. }  
  • Use 1.4em – 1.6em for line-height.line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one).” [Christian Montoya]
  • Set 100.01% for the html-element. This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.” [CSS: Getting into good habits]

1.6. Workflow: Debugging

  • Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use * { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet]
    1. * { border1px solid #f00; }  
  • Check for closed elements first when debugging. “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. [10 CSS Tips]

2.1. Technical Tips: IDs, Classes

  • 1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]
  • Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]
  • CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]
  • You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson]

2.2. Technical Tips: Use the power of selectors

Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read – some useful aspects can be found in the list below. Note that selectors ‘>’ and ‘+’ aren’t supported in IE6 and earlier versions of Internet Explorer (updated).

  • You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
    1. div > strong { color:#f00; }  
  • You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
    1. p + p { color:#f00; }  
  • You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match:
    1. [att]  
    2. Matches elements that have an att attribute, regardless of its value.  
    3. [att=val]  
    4. Matches elements that have an att attribute with a value of exactly “val”.  
    5. [att~=val]  
    6. Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.  
    7. [att|=val]  
    8. Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.  
  • The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
    1. p[title] { color:#f00; }  
  • The selector matches all div elements that have a class attribute with the value error:
    1. div[class=error] { color:#f00; }  
  • Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
    1. blockquote[class=quote][cite] { color:#f00; }  
  • You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]

2.3. Technical Tips: Styling Links

  • Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code (<a name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active” [Dave Shea]
  • Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
    1. a[rel~=“nofollow”]::after {  
    2.     content“\2620”;  
    3.     color#933;  
    4.     font-sizex-small;  
    5. }  
    6. a[rel~=“tag”]::after {  
    7.     contenturl(http://www.technorati.com/favicon.ico);  
    8. }  
  • “These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
  • You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
    1. a[href^=http://&#8221;]:not([href*=“smashingmagazine.com”])::after {  
    2.     content“\2197”;  
    3. }  
  • You can remove dotted links with outline: none;. To remove dotted links use outline: none;:
    1. a:focus {  
    2.     outlinenone;  
    3. }  

2.4. Technical Tips: CSS-Techniques

  • You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]
  • You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
  • You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org]
  • You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
  • You can set <hr> to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices]
  • You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know]
    1. <em>XHTML:</em>  
    2. <ul>  
    3. <li><a href=“#” class=“home”>Home</a></li>  
    4. <li><a href=“#” class=“about”>About us</a></li>  
    5.   
    6. <li><a href=“#” class=“contact”>Contact us</a></li>  
    7. </ul>  
  • Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section.
    1. <em>CSS:</em>  
    2. #home .home, #about .about, #contact .contact  
    3. {  
    4.     commands for highlighted navigation go here  
    5. }  
  • You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]
    1. <em>XHTML:</em>  
    2. <div id=“wrap”>  
    3. <!– Your layout goes here –>  
    4. </div>  
    1. <em>CSS:</em>  
    2. #wrap {  
    3. width:760px/* Change this to the width of your layout */  
    4.   
    5. margin:0 auto;  
    6. }  
  • You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag]
    1. <?xml version=“1.0” ?>  
    2. <?xml-stylesheet type=“text/css” href=http://you.com/rss.css&#8221; ?>  
    3.   
    4. …  
  • You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson]
    1. @import “main.css”;  
  • Always declare margin and padding in block-level elements. [10 CSS Tips]
  • Set a width OR margin and padding. “My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.” [Jonathan Snook]
  • Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet]
  • Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
    1. <link rel=“stylesheet” type=“text/css” href=“print.css” media=“print”>  
    2. <em>or</em>  
    3. <style type=”text/css” media=”print”> @import url(print.css); </style>  
  • This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

2.5. Technical Tips: IE Tweaks

  • You can force IE to apply transparence to PNGs. “In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser.” [CSS Tips, Outer-Court.com]
    1. #regular_logo  
    2. {  
    3.     backgroundurl(‘test.png’); width:150pxheight:55px;  
    4. }  
    5. /* \ */  
    6. * html #regular_logo  
    7. {  
    8.     background:none;  
    9.     float:left;  
    10.     width:150px;  
    11.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘test.png’, sizingMethod=‘scale’);  
    12. }  
    13. /* */  
  • You can define min-width and max-width in IE. You can use Microsoft’s dynamic expressions to do that. [Ten More CSS Trick you may not know]
    1. #container  
    2. {  
    3.     min-width600px;  
    4.     max-width1200px;  
    5.     width:expression(document.body.clientWidth < 600“600px” : document.body.clientWidth > 1200“1200px” : “auto”);  
    6. }  
  • You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ” [Roger Johansson]
    1. <!–[if IE]>  
    2. <link rel=“stylesheet” type=“text/css” href=“ie.css” />  
    3. <![endif]–>  

Workflow: Get Inspired

  • Play, experiment with CSS. “Play. Play with background images. Play with floats.” [Play with positive and negative margins. Play with inheritance and cascading rules. Play. [Chric Casciano]
  • Learn from others. Learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work. [20 pro tips]

Sources and Related Posts

7 Principles Of Clean And Optimized CSS Code

15 Jul

Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling.

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

1. Use Shorthand

If you’re not already writing in shorthand, you’re late to the party. But fortunately, this party never ends. Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it.

Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!).

CSS Shorthand means that instead of using different declarations for related properties…

  1. p { margin-top10px;  
  2.     margin-right20px;  
  3.     margin-bottom:  30px;  
  4.     margin-left40px; }  

… you may use shorthand properties to combine those values like so:

  1. p { margin10px 20px 30px 40px; }  

By specifying a different number of values, browsers would interpret the rules in a specified manner, illustrated in the diagram below.

Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property
Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property. This order also applies to padding and border-width among other properties.

Font is another helpful shorthand property that helps save some room and keystrokes.

Illustration of font shorthand examples
Examples of the font shorthand property. Note: leaving some values unspecified will mean that those properties will reset to thier initial values.

Those are just two examples of shorthand, but by no means should be considered a comprehensive guide. Even if you are familiar with the rules above, be sure to look at the articles mentioned below for more helpful reminders of those powerful properties that help keep your code succinct. Because of the number of lines and characters saved, going from a previous version of a CSS file which used no shorthand properties to one that makes full use of shorthand can have dramatic effect on file size.

See CSS Shorthand Guide (dustindiaz.com) and Efficient CSS with shorthand properties (456bereastreet.com) for more information about shorthand properties.

2. Axe the Hacks

Jon Hick's blog hicksdesign.co.uk/journal makes use of conditional comments
Jon Hick’s blog hicksdesign.co.uk/journal makes use of conditional comments

Hacks against dead browsers are safe, but hacks against the living aren’t. None of them. Ever.

Keep CSS Simple – Peter-Paul Koch (digitial-web.com)

If you’re like me, those words from Peter-Paul Koch’s nearly 5-year-old article may make you feel a little embarrased. After all, who hasn’t served hacks to Internet Explorer 6 and even Internet Explorer 7? As bad as we may want IE6 to lay six pixels under, the truth is it’s far from dead.

But now we know that using conditional comments to serve hacks correctional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.

Here’s how to use conditional comments to serve styles only to Internet Explorer 6:

  1. <!–[if IE 6]>  
  2.     <link rel=“stylesheet” type=“text/css” href=“ie6.css”>  
  3. <![endif]–>  

For IE7, you can use the above and substitute “6″ for “7″.

Alternatively, if there is hack-less way of getting the desired result using CSS, with all other things being equal, go for it! The less hacks you have to write, the simpler and lighter the code.

3. Use whitespace wisely

Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.

But this is one area where I would not encourage you to skimp just to get a smaller file. It’s still important that you write in a way that is readable to you (and hopefully to others), and if that includes using whitespace for formatting, so be it. After all, if you can’t read it, you’re going to have a hard time applying the other principles mentioned in this article. Just be aware of the fact that whitespace is like air – you might not be able to see it, but it does weigh something.

The figure below shows two different extremes in formatting style, with much whitespace, and the other with very little. I happen to favor the single-line formatting option without tabs, as I can scan the selectors a little easier, and I develop using the full width of my wide-screen monitor. But that’s just me. You may like your selectors to appear nested, and your declarations on each line.

Illustration of two extremes in CSS formatting, one with lots of whitespace, one with little whitespace
Illustration of two extremes in CSS formatting: lots of whitespace vs. very little whitespace

Using whitespace effectively is great, and a recommended practice for easy-to-manage code, but be aware that the less whitespace you have, the smaller the file. Even if you choose work with whitespace with your working file, you can choose to remove it for the production version of your CSS file, so your files stay skinny where it really counts.

4. Prune frameworks and resets

Nathan Smith's 960 Grid System uses a reset
Nathan Smith’s 960 Grid System CSS framework uses a reset rule.

If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. Also, you may find that the framework includes a more elegant and concise way of achieving a presentational detail than what you normally use, and knowing about them can help prevent you duplicating rule sets unintentionally.

This goes for resets as well. YUI Grid CSS uses a reset, and Eric Meyer’s Reset is also very popular. Resets are great to use because they help to neutralize a browser’s default style. But if you know the nature of the site you are building, you may find some declarations that you know you’ll never need. <pre> and <code> will likely go unused on my Aunt Martha’s recipe blog. A design portfolio probably won’t ever use <sub>, <dfn>, <var>, etc. So ditch what you don’t need. It’s not only ok, it’s encouraged, even by Eric Meyer:

As I say on the reset page, those styles aren’t supposed to be left alone by anyone. They’re a starting point.

Crafting Ourselves – Eric Meyer (meyerweb.com)

Using a framework and/or a reset set of rules can help keep your work optimized, but they should not be accepted in their default state. Considering each declaration and cutting back on unneccessary ones can further help you keep your CSS files lean and readable.

5. Future-proof your CSS

Doug Bowman's stopdesign.com CSS reveals specially crafted selectors used for layout
Doug Bowman’s stopdesign.com CSS reveals specially crafted selectors used for layout.

Another way to optimize your code is to separate layout-specific declarations from the rest of your rules. I’ve heard options of separating typography and colors from layout-specific rules in the CSS file. I’ve never been fond of this practice, as I don’t care to repeat selectors just because I have different types of declarations to associate with them.

However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section. This is also advocated in Andy Clarke’s Transcending CSS. Within the book, Clarke reminds us of the following:

Full CSS layouts have always been a compromise. The current CSS specifications were never designed to create the visually rich and complex interface layouts that modern Web demands. The current methods — floats and positioning — were never intended as layout tools.

Transcending CSSAndy Clarke.

One way of interpreting this is that floats and positions to establish sidebars and columns are, well, layout hacks. And though we really don’t have an alternative, we hopefully will once a layout standard is agreed upon and browsers start supporting them. When that happens, it should be easy to swap out those hacked up box-model properties for ones intended for layout. Though it will be a while before new layout modules are here, using the right properties to handle layout instead of compensating for the quirks of our current limited set of properties will most certainly help condense page weight.

6. Document your work

David Shea's markup guide at mezzoblue.com
David Shea’s markup guide illustrates the proper usage for HTML tags and how those are represented on his site, mezzoblue.com. Even sites without dynamic HTML can have this simple and effective guide (using its own CSS file, of course!) as a starting point of documentation.

For a team of designers, it is extremely important to communicate regularly so that markup and style rules are created in a consistent way, and also to create site standards. For example, if someone comes up with way to markup a tab interface for the site, documentation will keep others from duplicating that effort, preventing code bloat in the HTML and CSS.

Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.

The choice to use documentation has a bonus side effect of being a great place to park explanations that otherwise must be included as CSS comments. CSS comments are great for sectioning off chunks of long CSS files, but verbose comments that are used to explain design choices can add to file size, and might be better suited to a markup and style guide. Documenting your code using CSS comments within your working file is most definitely better than nothing at all, but housing that material in separate documentation is a great way to keep the code focus and free from bloat.

7. Make use of compression

Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies. Applications like CSSTidy and the YUI Compressor can compress whitespace, detect and correct for CSS properties that are overwrite each other, and look for opportunites to use CSS shorthand that you may have missed. (These types of applications are excellent sources to read about, if for no other reason, to learn what things you can further do by hand).

Even popular text editors like BBEdit, TextMate, and TopStyle, can help format your CSS files to your liking. There are also options serve zip versions of your CSS files using PHP. You can find more CSS compressors and optimizers in the post List of CSS Tools.

It is important to note that these applications do their best to minimize errors, but they aren’t always perfect. Also, they work best when browser hacks are not included in the file set (which is yet another reason to keep those hacks external).

There is one last type of application that can help prune CSS file size I’d like to mention. It can crawl a web site and log which CSS rules and declarations are not being applied, then bring these to your attention. Unfortunately, this tool hasn’t been inventend yet, but I would gladly pay for such a application.

I can recall times when I’ve been afraid to delete certain rules because there is no documentation that explains to me that those selectors are leftover from previous iterations of development. If an app can bring those rules to my attention, that will help with maintenance and keeping CSS files lean.

Conclusion

Clean and optimized code is important not just for file size, but for maintenance and readability as well. The principles mentioned above are good considerations not just for CSS, but can be applied to HTML, JavaScript, and other programming languages. CSS files are not as prominent as the rendering of your web site to an end-user, but consideration of the above principles can help with both the user experience (in the form of smaller file sizes) and the developer experience (cleaner code). Apply these principles to your current and future projects, and and you will surely appreciate the efforts.

About the author

Tony White runs the one-man show Ask the CSS Guy, an after-hours blog devoted to peaking under the hood of CSS and JavaScript web-design techniques, as well as troubleshooting CSS-related problems. He resides in Memphis, Tennessee

Social Network Design: Examples and Best Practices

14 Jul

According to Nielsen Online, social networks and blogs are now the 4th most popular kinds of online activities. 67% of the world online population are now visiting them and the time they’re spending on them is growing by three times the overall growth rate of the internet. Social networks are now visited more often than personal email is read. Some social networks have grown to such enormous proportions that they rival entire countries in terms of population—if Facebook, for example, was a country, it would be the fifth-most-populated in the world (right between Indonesia and Brazil).

There’s a lot of variety out there in the realm of social network design. Some sites keep a very professional approach (like LinkedIn) while others have a more organic, free-form look (like MySpace). Most sites fall somewhere in between, mixing professionalism with personalization (like Facebook). But what’s the best way to design a social network? What are the elements that make a social network more user-friendly and more attractive to users? Read on to find out.

Also consider our previous articles:

1. Engage Quickly

Engagement is crucial for the success of any website. You need to make sure that visitors are immediately drawn into your site, either through great content, a compelling call to action, or some other means.

What’s It For?

Users need to know what your site is all about within seconds of reaching your home page. Most people don’t have time (or inclination) to try to figure out what a website is for if it’s not immediately apparent to them. A simple tag line, the use of graphics, your site’s title, or any number of other elements on your home page can serve to provide new visitors with some indication of what your site’s purpose is.

Screenshot-Social Network Site Purpose

Facebook does an excellent job of quickly informing new visitors of their purpose right on their home page.

Give Visitors Something To Do

Your home page should present visitors, both new and returning, with something to do. Logging in or signing up is the most obvious thing for visitors to do, but think about other options. Give them the opportunity to explore what the site is all about before they sign up. Let them search for people they already know on the site. Give them a chance to see why they should sign up before forcing them to. It builds a sense of trust between your site and its users right from the start.

Screenshot-Give Visitors Something To Do

Xing presents users with multiple actions right on their home page, including signing up, taking a tour, or exploring content.

Promote Interesting Content From Friends

Show your users what their friends are doing. From the moment someone logs in, they should be able to see what their friends have been doing, posting, and otherwise promoting. Most sites approach this with a news feed or similar listing of all the activities your friends are up to.

Screenshot-Friend Activity

Library Thing shows books recently added by friends.

Make It Easy To Find Friends

There’s nothing sadder than a social network account with few or no friends. Make it easy for your users to find friends, both new and old. Letting users search by email, school, company, name, and other identifying factors makes it more likely they’ll engage with a lot of other users, improving everyone’s user experience. The more friends a user has, the more active their profile and news feeds will be, meaning they’re more likely to come back often.

Screenshot-Invite Friends

Facebook’s “Invite Friends” page uses a format similar to sending an email.

2. Let Users Express Themselves

Self-expression is one of the hallmarks of social media. Some sites approach this by giving users almost full control over the way their profile page looks (MySpace). Others restrict the design options but let users add content to suit their own preferences (Facebook). The degree to which your social network allows users to cusotmize and personalize their profiles is up to you; just make sure there’s some functionality in that area.

Profile Pages Should Promote Personal Expression

Whether you allow full control over user profiles or only limited access to changing their appearances, users should at least have some ability to make their profile reflect their personality. This can be done through changing color schemes and backgrounds or adding content.

Screenshot-Profile Pages

DeviantART allows artists to customize their profiles by adding different kinds of content modules.

Promoting Individuality In Applications

Letting users show their individuality within applications is also a good idea in social networking design. You can do this by allowing users to comment on their activities within applications (as Facebook does) or in other ways. Some applications can be used directly to express a user’s personality. Applications like this include the various gifting, flair, and survey applications. One of the best examples of an application that lets users express who they are is the Living Social application (which is kind of a social network within itself), which allows users to create “top 5″ lists about almost anything.

3. Be Dynamic

Dynamic content is the lifeblood of Web 2.0 sites. Social networks are no different. Content should change constantly, with the newest, most popular, and most valuable information continually pushed to the forefront for users.

Have Regularly-Changing Content

Because of the nature of social networking sites, there’s new content constantly available from users. Take advantage of this by including content, both on the home page and on individual users’ profiles or main pages, comprised of these updates. Updated content keeps users coming back, as there’s more to see each time they visit.

Screenshot-Featured Content

Experience Project includes featured content on their home page.

Update Content in Real-Time

Utilizing a real-time news feed for your users is a huge convenience. At this point, very few sites are doing this. Facebook has the closest thing to a real-time news feed I’ve seen. It shows you when there are updates, but still requires a click to actually view them (and is often buggy when displaying them). The ideal would be an ajax or similar news feed that updated every minute or so without requiring any user input.

Screenshot-Real Time Updates

Living Social has a real-time news feed of activity happening across their network.

4. Allow Friends To Be Grouped

As friend numbers grow, the ability to group them becomes more important. When you only have thirty or forty friends, it’s often not a big deal to just lump them all together. But when your friend numbers grow to 100, 200, 500 or higher, being able to group them together almost becomes a necessity. After all, you might want to keep your work friends, college friends, casual acquaintances, close friends, and family all in separate groups, both to filter whose updates you see and how much others see of your updates and other information.

Let Users Define Groups

User-defined groups make the most sense when it comes to organizing friends. Some users may only want to organize their friends into a couple of different groups (such as business and personal or family and friends). Others might want to set up dozens of groups for their friends. In either case, make sure users can add their friends to more than one group at a time.

Create Automatic Groups

Automatically grouping friends makes sense, too. Grouping friends by which applications they’re using seems to be the most popular of this kind. Other options might include friends who are also members of the same groups or who share common friends.

Screenshot

The Brooklyn Art Project social network groups their members by the type of art they work with.

5. Use OpenSocial

OpenSocial, Google’s application platform for social networks, opens up a range of possibilities for your social networking site. The primary function of OpenSocial is to allow developers to create applications that can be used across a wide range of social networks. But OpenSocial has other benefits, too, like letting your users take their profile information across the range of sites using OpenSocial.

Provide More Applications To Users

Applications have become one of the most important and most-used features of social networks. Everything from productivity apps to games to gifting apps to apps for expressing yourself are available through OpenSocial. And developers are adding new applications on a daily basis. Because Google runs it, you also don’t need to worry about the program closing down anytime soon.

Screenshot-Open Social Applications

Ning is only one of a host of social networks that supports the OpenSocial API.

Let Users Take Their Profiles Anywhere

Allowing your users to take their profile information to other sites implementing OpenSocial is another big advantage. This, of course, means they can also bring their profile information over to your network, which can increase the number of new registrations you get.

Screenshot-Open Social

6. Make It Easy To Communicate

The entire point of a social network is to foster communication. If you make it difficult for users to converse with each other, your site most definitely will not last for very long. Make sure when you’re planning and developing your site that you keep communication at the forefront of every decision you make. If it does anything to hinder your users from talking to each other, drop it.

Provide Multiple Means Of Communication

Most social networks provide multiple means of communication for their users. The basics are private messages, public wall messages or comments, and live chat or instant messaging. While it’s best to include all three of these, at a bare minimum your site should provide some way to send public messages and a way to send private messages.

Screenshot-Private Messaging

Facebook’s private messaging system is only one way they foster communication among members.

Foster Conversations

Make it easy for users to have conversations with each other. Whether this is done through threaded messages, commenting, or some other method, you want your users to have effective conversations. Make it easy to pull additional people into the conversation, too, to make your site even more dynamic.

7. Show Only Relevant Information

Social networks are generally teeming with information. Between friend updates, users’ own activities, and notices from groups they’re associated with, there’s a constant stream of data coming at your users. Don’t compound the problem by sending them even more information that they dont’ necessarily need.

What Really Needs To Be Here?

When designing your user interface, ask yourself this question repeatedly. Is it really necessary for a certain bit of information or an option to be included on a given page? If the answer is no, then don’t include it there. Only give your users the minimum necessary information to perform the tasks you want them to perform. Just make sure if there’s additional information some users might want that you make it easy enough for them to find it.

Screenshot

Daily Challenge hides some information until users hover, which leaves their interface decluttered and clean-looking.

Don’t Overwhelm Your Users

The volume of information on a social network can quickly become overwhelming. Don’t contribute to this problem by then offering them a dozen different options for each action they might take on your site. Simplify the information and choices you give them to make their user experience better.

The same principal applies to the volume of information the site itself provides to users. If your site is constantly sending out updates and news announcements, it can quickly overwhelm users. Only send out notifications when absolutely necessary. Set up a blog or news page (with an RSS feed) for posting non-essential information. This way users can see what’s happening on their own terms.

Give Users The Ability To Filter

Allowing users to filter out information from some users or groups is another way to improve a user’s experience. Letting users filter out updates from certain users or applications makes it easier for them to see the information they want to see without getting overloaded.

Screenshot

Facebook allows users to filter their news feed based on content or user-defined groups.

8. Make It Easy To Take Action

Every social network has certain actions they want users to take. Whether it’s to join more groups, invite more friends, click on ads or sponsored links, or post more updates, there’s likely a laundry list of desired activities every site would like to have all of their users perform. The key to getting users to actually take these actions is to make it both easy and appealing to do so.

Emphasize The Desired Response

Make it obvious which response or action you want users to make. This can be as simple as using larger buttons for the preferred response and a small text link for the less desirable one, or using different colors or language for different options. In either case, make the desired response appear to be the more desirable one.

Screenshot

WriterFace makes it very obvious what actions they want users to take.

Make It Easy To Find Things

If you want users to perform certain actions, make it easy for them to find those actions. The most obvious example is in inviting new friends. Make it straightforward and easy for users to find the form to invite their friends who might not be members of your network. Organize available actions in a semantic manner so users can logically find the options they’re looking for.

Screenshot-Find Friends

9. Show Avatar Photos

Virtually every social network out there allows users to upload a profile photo. Display this image near any activity a user performs. This could be next to their updates in a news stream, in lists of friends, or in the general site directories.

People Like Seeing Other People

Social network users like to see other social network users. And seeing your friend’s picture next to a particular application or other element of the site makes it more likely you’ll click on whatever they’re promoting. It builds a sense of trust to see a face you recognize, even if you’ve never actually met that person in real life.

Screenshot

10. Include Ways For Members To Connect

When social networks first started, most people only friended other people they knew in real life. But as social networks have grown, they’ve become a way to meet new people. Empower your users to find each other based on common interests. Provide tools to let people who don’t know each other, and who possibly aren’t even friends on the network, to communicate and get to know each other.

Include User Groups

Many social networks now allow users to create and join groups based on common interests. Sometimes these groups are serious (such as professional groups) while other times they’re just for fun. What they all share in common, though, is that they allow users to find other users who are interested in the same things they are.

Screenshot
Eons showcases user groups right on their home page.

Provide A Member Directory

Member directories are another good way to allow your users to find each other. These are particularly useful for small, niche social networks, as they allow every member to see every other member. In a large social network they quickly become less valuable unless you also include ways for members to filter the directory (such as by age or location). In large social networks it’s also a good idea to let members opt out of being included in the directory (kind of like having an unlisted phone number).

Screenshot

Further Resources

Area for further articles and related resources.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing.

The Roadmap To Becoming A Professional Freelance Web Designer

11 Jul

Becoming a freelance web designer is a common dream among many designers, although it takes quite a bit of talent, business savvy, committment, and time. With all there is to consider when becoming self-employed, one can become overwhelmed — enough to deter themselves from trying at all.

Realizing many Smashing readers probably already have a head-start into the world of professional and freelance web design, this post is meant to act as not only a step-by-step guide, but also as a checklist for those who have already started their career. Hopefully this guide can cover all aspects of becoming a professional and freelance web designer, from business aspect and working with clients, to creating an effective portfolio and advertising one’s work.

Also consider our previous articles:

1. Do the Necessary Research

The absolute first step into any freelancing career is to do the needed research ahead of time. Freelancing is a huge life and career change, and one needs to look into exactly how it will change life before diving in.

Research the Costs

Making money on one’s own terms sounds incredibily appealing, until the realization comes that it’s a lot less money than working at a company (at first, at least). Below is just a short list of expenses to consider. Make sure they are covered when venturing into a freelancing lifestyle.

  • Domain name and hosting services
  • Stationery, Business Cards, and other marketing material
  • Needed software
  • A desk space and supplies
  • Subscriptions to stock photo sites and other forms of resources

On top of that, consider basic living expenses and additional emergency or living money. At this point, a formal budget is not needed, but it’s a very smart idea to go over the basic numbers of starting a freelancing business, and maintaining it. Most of the time, designers must save up before starting a freelancing career.

Screenshot

Taxes & Insurance

While most aspiring freelancers will slowly transition into the lifestyle, opposed to quitting their day job cold turkey, it is important to look into taxing information, insurance, and other assets that will be changed with self-employment. Because local laws and personal circumstances can vary so significantly, new designers should research this area on their own.

Research the Time

A more specific schedule can be setup later, but it’s a good idea to look into the time requirement for work each day, per week, and even per month to handle X amount of clients. For some, the time needed to be invested in this type of career path is not currently available.

Consider current social or family happenings, career responsibilities, and for some — even school. If it is not a good time in life to change focus, it may not be a good time to start freelancing full-time. Sometimes it is appropriate to put dreams on hold. With that being said, set a realistic date to begin a true freelancing lifestyle, whether that means just easing into it now, or setting a time in the future to go full-time.

If all consideration is put into place, the idea is well researched, then it can be time to start a freelance web design career! Below are the remaining steps to take.

2. Become a Brand

There are many differences between a young freelance web designer just trying to get by, and a successful freelance web designer with their business and future in mind. One of those differences is that successful freelance designers understand, and pay close attention, to branding.

Branding a business, even if only a one person operation, can do a lot of things in terms of the business’s sucess. A good brand builds credibility, client loyalty, delivers a target message to clients and other businesses, and even aids in marketing strategy.

What’s in a Name?

The name of a freelancing business can signify a lot, and most designers just choose to use their full name as the brand name. This is fine, but another option is to use a specialized brand name. Depending on the future plans of the business, it is smart to think closer about an official name.

If one plans on turning an individual freelancing business into a firm one day, a name other than the designer’s given name may be more appropriate. Also, a specialized brand name may be more memorable than the designer’s given name, and the posibilities are then endless as far as finding an SEO friendly name, or a name that gives off a portrayal of the business it represents.

On the other end of the spectrum, it’s easy to see the benefits of using a given name as a business name. Using a designer’s given name is always original, and something uniquely personal to the designer. Really, both can be successful decisions, but it is a decision that is often times taken too lightly. The way the brand is futher marketed depends largely on this decision. Below are successful examples of both instances.

Here are four great examples of using a specialized name for the brand:

Good Bytes Portfolio Ectomachine Portfolio

NOE Design Studio Base6 Design Studio

In contrast, here are four great examples of using the designer’s actual name as the brand.

Lee Munroe Freelance Designer Richard Davidson Freelance Designer

Juan Diego Velasco Freelance Designer Brian Burns Freelance Designer

All of the examples above are the portfolios of individual designers. However, one will notice that designers who chose a specialized name for their brand often call themselves a studio. This gives the impression that they are a bigger business; a more formal organization. The portfolios with given names, though, provide a more personal appeal — something many clients look for. This often gives them more of the true freelancer feel.

Depending on how a designer wants to operate their business, the clients they want to attract, and based on the future goals of the business, the final decision of the freelancing business name can have many possibilities.

Logo

After the official brand name is decided, it’s time to start creating a logo around it. Many beginner designers don’t understand the importance a logo has in a brand, or even how important a brand is in itself. Opposed to creating a quick logo in the process of designing a portfolio template, a logo should be made separately and with the utmost consideration.

Below is a small showcase of excellent logo design in a few web design portfolios.

Thomas Prior Freelance Web Designer Kuhboom Logo

Oh! Media No Sleep for Sheep

Because these designers, and so many more, took the extra time to create a well-branded and effective logo, they have the opportunity to expand the logo design to stationery, business cards, advertisements, and more. Not to mention, these logos serve the origial purpose of logo design — to create a brand, build business loyalty, and create an image that aids in recognition.

A designer will want to create a logo that represents their design style, and that will attract a client that is looking for that type of web design. To create a great logo, read up on logo design principles, tutorials, and logo design processes.

Below are just a few of these tutorials and walkthroughs.

An Elevator Pitch

There is a lot more to being a successful freelance web designer than just being good at web design. Any sort of freelancer has to be an entrepreneur as well. Rule #1 for entrepreneurship: create an elevator pitch.

For those that don’t know what an elevator pitch it, it is a premeditated, well thought-out introduction to one’s services or a person’s business as a whole. Let’s take a look at a better definition. Excuse the use of Wikipedia for a professional reference, but Wikipedia’s definition of an elevator pitch is just about perfect for the freelance web designer:

An elevator pitch (or elevator speech) is an overview of an idea for a product, service, or project. The name reflects the fact that an elevator pitch can be delivered in the time span of an elevator ride (for example, thirty seconds and 100-150 words).

A variety of other people, including entrepreneurs, project managers, salespeople, evangelists, policy-makers, job seekers (web designers and freelancers), and speed daters commonly use elevator pitches to get their point across quickly.Elevator pitch, Wikipedia

Take the time to create an elevator pitch for a freelancing business. For a freelance web designer, it can venture beyond the traditional use of a speech in an elevator, to the introduction to a portfolio, the about page, or as an introduction to an application for a freelancing position.

Many marketing gurus leave the assumption that the creation of an elevator speech for a business will increase the client list dramatically. Usually, this isn’t the case — at least not directly. What it will do though is still quite useful:

  • Save the designer countless hours in coming up with a smart introduction over and over again.
  • Create a professional atmosphere for a portfolio, or whereever it is used.
  • An elevator speech will make sure that any new introductions don’t leave out vital information about the services or freelancing business.

The following is an example of an excellent elevator pitch for a 45royale web design studio.

45royale is an enthusiastic web design studio located in the bustling metropolis of Canton, Georgia. We promote web standards and bring energy and commitment to our work every single day.45royale Inc.

The above is a strong example for a small, yet established business. Freelancing can use the same principle, but with a more personal approach:

Hi there, my name’s Brian Wilkins and I am a web designer/front-end developer living outside Boston, Massachusetts. I currently work at Reelpoint, an online design and marketing firm. I build clean and functional interfaces. With a hunger to constantly grow and evolve as a designer, I have a genuine passion for art, typography, design, technology and creative thinking.BrianWilkins.net

That detailed elevator pitch can be seen on his about page, telling potential clients exactly what he does. On the front page, as part of his portfolio design, he includes a much shorter, but equally effective pitch:

I’m a web designer that creates clean and modern content for the world wide web.

Taking the time to create an elevator pitch can help launch a freelance career through the use of business tactics. Below are some further resources for creating a great elevator pitch.

An Overall Style

The last thing to do is create an overall style for the freelancing business. Fortunately, most of this is accomplished by the above several factors. The overall style, colors, textures, and even how a designer presents one’s self should reflect the style of work a designer completes.

To promote consistency throughout the life of the freelancing business, though, designers need to look at branding in a more broad sense when first starting out. Creating a color scheme, design style, and other overall design guidelines based off of the logo design, and information presented in the elevator pitch. Then, stick to the brand as the freelancing business progresses.

3. Create a Portfolio Website

Step number three is an obvious one — create a portfolio website. However, it deserves a decent overview and closer look because we as designers are our own worst clients. Many new freelancers, or anyone just entering the web design world of business, will open Photoshop and start grinding away. Instead, think about what a portfolio can actually do.

A mediocre portfolio will have a great design, and show off a designer’s past works. However, an excellent portfolio will do the following things:

  • Reflect and grow a designer’s brand.
  • Show a client not only what a designer can do, but what the designer can do for them.
  • Show great talent, but also business savvy and professionalism.
  • Intrigue potential clients strongly enough so that they stay on the website long enough to make contact with the designer.
  • Provide a user-friendly interface for the client (who very well may not be so Internet or design savvy).

Keep all of this in mind during the design process of a web design portfolio. Make note that a designer’s portfolio has to be their best work. Furthermore, consider the following items when creating, or even modifying a design portfolio.

Consider a 1-Page Portfolio

It’s called direct response marketing, and it’s proven to be one of the most effective forms of marketing to get the most sales. It’s bascially a method that involves making a huge impact in the most direct way possible. In the world of web design, this means an incredibily effective and amazing portfolio — but in only one page.

MultiMichel.com

Of course, this isn’t a great method for everyone, especially those who offer more than just basic web design services. However, without a one-page design, a designer can still take use of this knowledge by applying more direct-response marketing to their portfolio. This may mean simplifying it, puting the contact form on the front page, and merging similar pages together.

Use a Contact Form

Provide a traditional email address and other information, but most importantly, include an email form. It makes things easier for the potential client to get ahold of th designer, even if only to ask for more information. This then provides further opportunity for the designer to sell their work.

Contact Form

The form above (Komodomedia) is a perfect example because it gives the visitor various options for the form, rather than just requesting a quote. This designer has made themselves approachable, which is an excellent way to gain more clients. Also, above the form, there are other ways to contact the designer, which may be suitable for different visitors.

Make the Most Important Things Noticeable

Make sure the most important components of a portfolio design are out in the open and easy to use and find. For most, this means the contact form and information, the portfolio pieces, and the logo.

Make the most important things noticeable.

A perfect example is Alexandru Cohaniuc’s portfolio. The biggest text on the page is “Portfolio”, “Hi, I’m Alex”, and “Contact.” Right above the word “Portfolio” is the logo, strategically placed in the top left.

4. Build Legal Documents

To make things really official, a designer has to create some legal documents. These can be reused for each client, but must be made initially to deal with potential problems later.

Contract

A contract is a necessity for a freelancer of any sort. It will help protect the designer and the client, as well as outline some rules and guidelines. For more information on how to create a freelance contract, check out the resources below.

In addition, one can hire a technical writer or other writing professional to do the job.

Terms & Conditions

Terms and conditions are a more in-depth view of the rules between the web deigner and the client. Again, one can hire someone to write a terms and agreement paper for them, otherwise here is a great template: Terms and Conditions Template.

Copyright Agreement

A third needed agreement is a separate copyright agreement. Designers are always at risk for work being stolen and miscredited. A copyright agreement is a way to protect that work, and a way to set further rules for who can use the work.

Because copyright law can vary among different countries, we won’t get much into it here. It is important, though, to research copyright law, know one’s own rights, and apply it to one’s own circumstances.

5. Find a Starting Wage & Budget

Deciding on a personal starting wage is difficult, because we never truly know how much to pay ourselves. As anyone can guess, someone just starting out in freelancing won’t be making much. A new designer just has to make sure they have basic living expenses paid, and a bit of cusion room for emergency costs or budget mishaps.

Pros and Cons of Fixed-Priced Projects

A fixed-priced project is one where the designer and client agree on an overall cost for a design project ahead of time, and the payment is completely independent of how long it takes the designer to complete. Below are some pros and cons of using this method.

Pros:

  • These types of project can be easier to apply to a monthly budget.
  • Designer’s with efficient methods to save time during a project won’t be unfairly punished with a low cost.
  • It is easy to see how many projects per month need to be completed to determine profits and budget handling.

Cons:

  • It is much more difficult to determine a fixed-price for a project before actually completing it.
  • Sometimes designers are underpaid using this method.
  • Payment doesn’t come at regular intervals, which may not be suitable for all lifestyles.

Pros and Cons of Hourly Wage Work

While hourly work may be what we’re all used to, there can be some equal pros and cons to consider when thinking about this payment system as a freelancer.

Pros:

  • Budgeting is easier for those that require a daily or weekly budget.
  • It is harder to become under or over paid for a project.
  • It is much easier to explain to the client the final cost of a project.

Cons:

  • It is hard to determine our own hourly rate based on the judgement of our own skills.
  • It is more difficult to work with a monthly budget.
  • Timesheets need to be filled out and there needs to be an effective way to transfer timesheets back and forth between the designer and client.

A closer look into these two types of payment plans can help a beginner decide. For further reading, look over Effective Strategy To Estimate Time For Your Design Projects.

Tools for Managing Money as a Freelancer

LessAccounting.com
Less Accounting is an all-in-one money managment application that will let one connect to bank accounts, and even let a freelancer invite a personal accountant login to help watch money. In addition, LessAccounting also features all the other basic money management needs for freelancers.

LessAccounting.com

Mint.com
Mint may not be made for freelancers specifically, but it is one of the best tools out there for taking control of one’s own money. This is perfect for new business owners that may be low on money, and need to pay extra attention to their cash flow.

Mint.com

Tickspot.com
Tick is a time management tool aimed at organizing time so that freelancers can hit their budgets. It’s a great tool that breaks up time so a freelancer can enter hours worked, hourly pay rate, project pay rate, and more.

Tickspot.com

SlimTimer.com
Slimtimer is similar to tick, in that it is a time and budget management tool. One can create tasks, time their own work, run reports, and manage their money overall more efficiently.

SlimTimer.com

Invoicing Tools

SimplyBill.com
SimplyBill is a very simple invoicing tool to help effectively keep track of clients, their invoices, and to send invoices out.

SimplyBill.com

FreshBooks.com
Freshbooks is a great invoicing tool for freelancers with a lot of versatility to meet anyone’s needs. Best of all, it’s free up to three clients, so this gives designers plenty of time to decide if FreshBooks is right for them.

FreshBooks.com

Intuit
By the creators of QuickBooks, Intuit is a free alternative invoicing system that is perfect for designers just starting out that need to save that extra bit of cash.

Intuit

FreeAgentCentral.com
FreeAgent allows a freelancer to manage all their invoices, and will even tell the freelancer what they owe the tax man.

Free Agent

6. Create a Résume

Without a strong portfolio just yet, new freelance web designers need to rely on a strong résume. This is a designer’s true chance to flaunt their skills in full detail. Most of us learned how to create a résume back in high school, and another good portion of us probably still hold on to our most recent one today. When venturing into a new freelance web design career, though, it’s time to tweak it to meet the needs of this new career path.

Below are some resources for creating the perfect résume for web designers and freelancers.

For a newly created web design freelance portfolio, providing a download link to a designer’s full résume may be just what the client is looking for.

7. Find “Portfolio Building” Clients

Now that just about everything is set up, it’s time to take action. Finding the first few clients is always tough, because nobody wants to hire a nobody. It may be near impossible to find good, well-paying clients yet, so sit tight and take on the first few “portfolio building” clients.

Consider Offering Free Services

Even qualified people have to work for free sometimes.
Image source: On the Block

Working for free is never fun, but it may be necessary. Do some volunteer work for a church or another non-profit/low budget organization. These services obviously aren’t hard to sell; just put an ad up for yourself up on Craigslist or in freelance and web design forums.

When creating an ad to offer free services, be sure to avoid failure. This means setting limits — no designer wants to spend a month on a complicated job making no money. Offer only PSD templates, 1-page websites, or something of the like.

Of course, this isn’t an option for everybody because we all don’t have the time, nor the patience to do a free job. If that is the case, explore some options below to get paying clients that will gladly deal with a new designer.

Advertise Locally

Advertise Locally

Put up fliers or an ad in the local newspaper to gain some local recognition. Not every potential client knows where to look online for web design services, and it may very well be that many are looking locally. Otherwise, they’re only finding top Google-ranked web design businesses that they can’t afford.

If a new designer comes to them offering cheaper services, whether in the form of a newspaper ad, a flier at a grocery store, or through word-of-mouth via friends and family, they’ll be very happy to hire.

Offer Freebies or Sell Templates

One more option requires no actual clients at all. Many designers choose to make free templates in their spare time, and use them to advertise their services, show off what they can do, and in some instances, sell them for some residual income.

Over at ThemeForest, Collis has sold a PSD template at $10 — 168 times. This means over a thousand dollars in his pocket, and a great portfolio piece to show off.

Manilla PSD Template

Unless one makes spewing out free or cheap templates, WordPress Themes, or scripts their full-time business, this isn’t going to be a great option for making monthly living expenses. It is however, a great alternative to 1) get a designer to create some portfolio pieces, 2) get the designer’s name out in the community, and 3) let the designer make a bit of extra cash.

However, it is important to try a few real clients as well, for the business experience.

Then what?

After finding a few clients, keep these few things in mind.

  • Create a personal (yet professional) connection between the first few clients. This may welcome great testimonials and word-of-mouth clients.
  • Offer variety in your services when starting out. For example, one may want to try logo design, web design, and basic coding. Later on, when trying to add a new service to the freelancing business, this will make for a much easier transition.
  • Just because new designers have to deal with low (or no) wages, doesn’t mean they should offer low-quality work. Put in the hours and create something great. Keep in mind that there is more to the first few projects than just the money.

Tools for Client Management

BaseCamp
BaseCamp is a very popular project managment tool for freelancers. With BaseCamp, a freelancer can share files, set deadlines, assign tasks, organize feedback, and more.

BaseCamp

Zoho Writer
Essentially, Zoho Writer is an online word processer. In addition to being that though, it is aimed at freelancers, with the ability to share documents and collaborate with clients in various ways.

ZohoWriter

Big Contacts
Big contacts is an online contacts solution to help share files, email, have meetings, send notes, and more between the freelancer and client.

Business Contacts

8. Create (and Stick to) a Schedule

A huge part of freelancing is finding a schedule that fits the designer’s needs, and allows the designer to get the necssary work done on time. It is a step in itself to becoming a professional freelance web designer.

Find the Hours Necessary

To find a schedule, a designer needs to find how much time it actually takes them to do the tasks at hand. A freelancer has to ask themselves, “How much time does it take to create a simple PSD template, and then how long does it take to code it?” Depending on the skill sets of individual designers, this length of time can greatly change. However, work from previous clients or the creation of sample templates can give a rough estimate.

After determing how long the workflow takes, decide on a daily hourly input for work — and work only.

A Daily Schedule

A general daily schedule depends greatly on each designer’s personal lifestyle, and is something that needs to be predetermined in order to be successful. After a designer realizes how much time it takes daily to get the required amount of work done, he or she should create a daily schedule for themsleves.

A daily schedule will help aid the designer to stay on track, instead of constantly checking email, jumping back and forth between projects, or ignoring client work altogether.

Google Calendar

A Weekly & Monthly Schedule

On top of a daily schedule, freelance professionals should also make a weekly and monthly calendar. A broader calendar can be used to keep track of deadlines and plan out longer projects.

Google Calendar

Whether it be a calendar hanging on the wall or a web-based calendar like below, make sure to keep track of deadlines, payment schedules, and other checkmarks along the way of a project.

Find the Motivation

Anyone can see the benefits of a steady schedule, but the hardest part for most may be staying motivated to keep to it. Below are some things to keep in mind if the urge to break a preset schedule creeps up.

  • Do the same specific thing during work at the same time every day. For example, check email first thing in the morning, then start directly on client work.
  • For those who have already quit their day jobs to pursue this career: Wake up at the same time everyday. If it means sleeping in a few extra hours than the traditional worker, that’s fine. However, having a constantly altering start to the day can mess up a schedule, even if things are done in the same order during wake time.
  • Write a to-do list in the morning of items that need to be addressed that day.
  • Use a calendar and daily planner to keep track of daily, weekly, and monthly tasks.

A Few Time Management Tools

Dejal Timeout
Quite the opposite of most time managment software, this application actually tells you when to stop working. With timed breaks, this tool can help a freelancer have an overall more relaxing career.

Dejal Timeout

Google Calendar
Google Calendar is a great option for those that use Google’s other tools a lot, in that it will be all in the same place. Like many of Google’s other tools, it is free, versatile, and very useful.

Google Calendar

Ta-da List
Ta-da List is an easy to-do list tool hosted online for convenience. It is easy to create lists for one’s own use, or for others.

Ta-da List

9. Create a Business Plan

One of the most boring and tedious tasks one can do is create a business plan. Most might feel free to skip this step, but wait a moment and consider the benefits (and assurances) of taking the time to create one.

Benefits of a Professional Business Plan:

  • Creates a real business in the designer’s eyes, and in the client’s eye.
  • A business plan can be used in tricky legal situations, to differ the business from just a hobby.
  • Identifies future plans, direction, and goals for the business.
  • Keeps the designer, as a business owner, on track with the development of the business.
  • Upgrades the simple monthly budget to a long-term financial structure.

Anyone can see the benefits range from business growth, to financial growth, and credibility. To learn more about creating a business plan, view the helpful article on About.com, Back to Business Planning: Developing a 4-Part Business Plan for Freelance Designers.

10. Know How to Gain Recognition

Not all designers are marketing experts, but a bit of knowledge about how to gain recognition in the freelance web design world is necessary to be successful. Designers should do research on marketing, and create a long-term plan for the growth of their portfolio and their reputation as a freelance designer.

Expand with Social Networking Sites

Use social networking sites to not only promote a portfolio, but also to promote new designs and projects. In addition, one can use Twitter, or something similar to get valuable feedback on current projects. For more ideas on how to get the most out of Twitter as a web designer, take a look at Ramsay’s post: 5 Simple Ways Twitter Can Make You a Better Web Designer.

Also, those who are active within social media communities benefit far more than those who use them for only self-promotion. Create a community, find other designers, and even discover some interesting finds along the way. Take the time to enjoy social media websites, while gaining recognition as a web designer.

Get Recognized in a Crowd of Applicants

Knowing where to look for more work is necessary when depending on that work for a decent income. However, with thousands of freelancers floating around in forums, job boards, and other sources of possible clients, getting noticed can be some hard work — especially when others (who may be doing it for just a hobby) are willing to offer their services extremely cheap.

Talk Freelance Forum

To get noticed by clients and win a job, follow a few of these simple rules.

  • Don’t apply to jobs that are more than a few days old — chances are they’ve been filled, and it’s really a waste of time.
  • Use multiple job board websites and forums to have a wider range of possibilites.
  • Be a good designer. This sounds like a dumb tip, but often times clients get application for web designers that either 1) aren’t good at design or 2) have designs that show no unique abililty and are very ordinary.
  • Don’t apply for jobs that you don’t qualify. Client’s can’t stand hearing, “I haven’t done a design for the style you’re looking for, but I’ve been creating websites for X years and could probably do it.” The next designer that comes to them with a decent portfolio proving they can meet the client’s needs is going to get the job instead.
  • This shouldn’t even have to be said, but sadly, it does: Capitalize your sentences, use correct grammar, and don’t make spelling mistakes when applying for a freelance job.

As for the best tip of all — don’t sell work cheaper than it needs to be just to gain a client. If a client can’t see why a logo design costs $200 when the kid that applied the day before is offering the same service for $20, then it’s really their own loss. Somtimes it’s worth losing jobs, and that’s a part of the difficulty when just starting out.

11. Blog often, but pay attention to the quality of your posts

Blogs are great for improving search engine rank and gaining popularity in the web design community. Whether designers have a lot of time or barely enough, a blog showcasing interesting finds or discussing anything related to the web design or the freelancing profession can gain an audience fast.

Below are just a few websites that use blogs to promote their general careers as freelance web designers.

WellMedicated.com

WellMedicated.com really doesn’t update that often — only about once every two months — but it’s still a well respected design blog in the community. Andrew Lindstrom is a freelance web designer, and spends most of his focus on that. However, with a great following on his blog, he can easily gain traffic to his web design portfolio through his sidebar and about page.

VandelayDesign.com/Blog

In a recent interview of Steven Snell of Vandelay Design, Steven discussed how the popular Vandelay Design Blog was indeed intended to bring more traffic and clients to the Vandelay Design portfolio. Well, that mission was very successful, and the blog changed direction to fulfill the wants of a different audience, as a full-time design blog.

Now, it is updated every few days and it’s goal is no longer to bring portfolio traffic. However, with a link to the portfolio and further information about the web design business, there is no doubt it still does.

Blog.SpoonGraphics.co.uk

Chris Spooner’s blogging experience started with just some simple experimentation, and as a place for him to simply explore and share. However, the blog soon gained a lot of popularity, and now does great work in promoting his portfolio as well.

So the lesson to be learned is, no matter what reason a designer has to start a blog, it can be a great source for traffic and a way to gain recognition in the community. Not to mention, the additional income from selling advertising spaces.

12. Get into the Community of Freelance Web Designers

Don’t be a freelancing loner. Getting involved in the community and meet other web designers and freelancing professionals to grow as a designer.

Make contacts within the community by blogging, joining a design network like Envato, and using forums. One could also donate freebies to larger communities, or try to do guest posts.

Below are just a few ways gaining a strong social network in the community can help a freelance web designer.

  • It creates a support group. Guessing that many freelance web designers don’t have many offline friends or family that do the same thing for a living, having an online support group for your field of interest can be very beneficial. Get into the web design community to share, rant, rave, and get feedback as a designer.
  • Learn new things. Following a blog regularly, being active in social networking sites, and participating in forums is a great way to improve your current abilities, and expand horizons. Instead of grinding away at what needs to get done or what needs to be learned for a current project, being a part of a community will help you to explore new things and find inspiration.
  • Become an authority and let the clients come. Being the best designer in the world doesn’t make that designer an authority figure. As skills and wisdom improve, others in the web design community will reference a designer’s work, portfoio, and services for them.

Attend Conferences and Other Face-to-Face Events

Attending various web design and other conferences for webmasters is not only a great way to network with other designers, but also a great way to learn new things and keep up with the latest trends. Get to some conferences, and become a real person, rather than just an online presence.

Below are just a few popular conferences within the community.

AnEventApart.com
An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.

AnEventApart.com

Carsonified
For Web Designers, Creatives and anyone who cares about web design.

Carsonified

Web Design World
Since 1997, we’ve helped thousands of Web designers learn what they need to know to make better web sites, manage web projects, and get home at a decent hour.

Web Design World

As a freelancer, we have the ultimate schedule for attending these events, and it can be easier than for others to gather the funds. In order to truly succeed, freelance web designers should attend these events to socialize, learn, and grow their freelancing web design career.

13. Reinvest the Income

It takes money to make money, so when starting out, reinvest some of the income made back into the freelancing business. It’s tempting to pay off bills or buy something nice once it can be afforded, but dedicate a certain percentage to the business’s growth.

Among the many things that need to be maintained for a freelancing business are software upgrades, hosting and domain renewals, desk space upgrades, stationery, and more. In addition to maintinence items, though, some of the income may be turned into a luxury web design item — for fun and for work.

Figure how much of the income is actually needed for living expenses, and use either all of the remaining profit, or a strong percentage of the profit to go back into the business.

14. Get a Professional Space

Finding a place to do work may help new freelancers differ play time from work time. On another note, a good workspace is needed to keep organized and create an effective workflow. Below are two great workspaces that are effective and fun, both held as a home office.

Ben Mautner's Workspace

The workspace of Ben Mautner provides a lot of worspace to get things done, with plenty of inspiration handing on the walls as well.

bittbox's Workspace

Jay Hilgert’s office space is is clean, neat, and trendy — but also has all the necessary equipment.

Beyond a home office’s benefit of staying organized and aiding in getting some work done, it can make anyone finally feel like a true professional freelance web designer. You may want to take a look at the workstations of other designers as well.

15. Keep Learning New Tricks

As the final stage of the transformation comes into completion, there is only one more thing that needs to be done to create and maintain the status of a professional, freelance web design career. That final step is to keep learning. Designers should always be discovering new practices, techniques, standards for client work — and also tweaking their own business along the way.

Conclusion

Hopefully, this walkthrough can help most web designers just starting out in freelancing go down the correct path. Freelancing in the web design niche is an exciting and freedom-filled career path, although it requires a mix between design, development, and entrepreneurship. Finding a good grasp of all three can only mean success as a freelance web designer.

Because everyone’s experiences are different, for anyone who has already accomplished a freelancing career, feel free to share further tips and advice for doing so. It’s always great to hear and discuss more tips.

Further Resources

You may also be interested in these extra references:

About the author

Kayla Knight is a 20 yr. old college student, part-time web developer, freelancer, and blogger. In her spare time she maintains Webitect.net, a resource blog for webmasters. You can get ahold of her through her blog or follow her on twitter: @Webitect.