CSS Circle

How to Get a Friend Back

Posted by: siddesigner on: November 7, 2009

  • Determine why your friend has changed his or her tune. Maybe you’ve done something wrong that you can apologize for, or perhaps your behavior needs to change.
  • Be as nice as you can. This will make your friend start thinking that maybe you’ve changed. It’s a start! Don’t try to upset your friend in any way.
  • Start a conversation if you can. Start saying “hi” or “how you doing?” when you see them. Say “looking good” or “love your hair”. It’s hard for people to resist compliments.
  • Watch your friend for cues to start talking more. Maybe she or he will smile at you or say “hi” back. Don’t miss your chance!
  • Invite them to your house or to hang out at the mall. Casual, no-pressure situations will help them ease back into being your friend.
  • Talk to them and ask whether you can still be friends. Being as direct and honest as possible is best.
  • Take it slow
  • If it is their fault; tell them you forgive them and then take it from there.

    • [edit] Tips

    • Take it slow. This plan won’t work if you go too fast.
    • Have a lot of patience.
    • Smile a lot.
    • Tell people your friend is awesome

    How to Have a Great Conversation

    Posted by: siddesigner on: November 7, 2009

    Listen. This is the most important part of any conversation. Pay attention to what is being said. Make acknowledging noises or movements to indicate that you are still listening. A conversation will not go anywhere if you are too busy thinking of anything else, including what you plan to say next. If you listen well, the other person’s statements will suggest questions for you to ask. Allow the other person to do most of the talking. They will often not realize that it was they who did most of the talking, and you get the credit for being a good conversationalist – which of course, you are!

  • Find out what the other person is interested in. You can even do some research in advance when you know you will have an opportunity to talk with a specific person. Complimenting them is a great place to start. Everyone likes sincere compliments, and that can be a great ice-breaker.
  • Ask questions. What do they like to do? What sort of things have they done in their lives? What is happening to them now? What did they do today or last weekend? Identify things about them that you might be interested in hearing about, and politely ask questions. Remember, there was a reason that you wanted to talk to them, so obviously there was something about them that you found interesting. However, try to space out your questions or they’ll feel like you’re interrogating them which is very bad and closes off friendships.

  • Forget yourself. Dale Carnegie once said, “It’s much easier to become interested in others than it is to convince them to be interested in you.” If you are too busy thinking about yourself, what you look like, or what the other person might be thinking, you will never be able to relax. Introduce yourself, shake hands, then forget yourself and focus on them instead.

  • Practice active listening skills. Part of listening is letting the other person know that you are listening. Make eye contact. Nod. Say “Yes,” “I see,” “That’s interesting,” or something similar to give them clues that you are paying attention and not thinking about something else – such as what you are going to say next.
  • Ask clarifying questions. If the topic seems to be one they are interested in, ask them to clarify what they think or feel about it. If they are talking about an occupation or activity you do not understand, take the opportunity to learn from them. Everyone loves having a chance to teach another willing and interested person about their hobby or subject of expertise.
  • Paraphrase back what you have heard, using your own words. This seems like an easy skill to learn, but takes some practice to master. Conversation happens in turns, each person taking a turn to listen and a turn to speak or to respond. It shows respect for the other person when you use your “speaking turn” to show you have been listening and not just to say something new. They then have a chance to correct your understanding, affirm it, or embellish on it.
  • Consider your response before disagreeing. If the point was not important, ignore it rather than risk appearing argumentative. If you consider it important then politely point out your difference of opinion. Do not disagree merely to set yourself apart, but remember these points:
    • It is the differences in people–and their conversation–that make them interesting.
    • Agreeing with everything can kill a conversation just as easily as disagreeing with everything.
    • A person is interesting when they are different from you; a person is obnoxious when they can not agree with anything you say, or if they use the point to make themselves appear superior.
    • Try to omit the word “but” from your conversation when disagreeing as this word often puts people on the defensive. Instead, try substituting the word “and”, it has less of an antagonistic effect.
  • Consider playing devil’s advocate – which requires care. If your conversation partner makes a point, you can keep the conversation going by bringing up the opposite point of view (introduce it with something like “I agree, and…”). If you overuse this technique, however, you could end up appearing disagreeable or even hostile.
  • Do not panic over lulls. This is a point where you could easily inject your thoughts into the discussion. If the topic seems to have run out, use the pause to think for a moment and identify another conversation topic or question to ask them. Did something they said remind you of something else you have heard, something that happened to you, or bring up a question or topic in your mind? Mention it and you’ll transition smoothly into further conversation!
  • Know when the conversation is over. Even the best conversations will eventually run out of steam or be ended by an interruption. Smile if you’re leaving, and tell them you can’t wait to talk to them again soon. Ending on a positive note will leave a good impression and likely bring them back later for more!
  • Make a good first impression. Smile, ask questions that require more than a yes/no answer, and really listen. Maintain eye contact and keep as friendly and polite as possible.

    • [edit] Tips

    • If, after the conversation concludes, you come away feeling full of yourself there is a chance you maneuvered the talk to serve your own agenda and steam-rolled your counterpart. You used the occasion to show off your wit and knowledge. Try to keep from using a conversation to boost your ego.
    • Try to get them talking about something they enjoy thinking about and something that you’re interested in hearing or else the conversation isn’t fulfilling and one of you will feel unsatisfied with it.
    • Don’t be worried about the conversation and where it will go. People have natural conversation reflexes built into them. Why can’t you ever remember how a good conversation started? The reason is because you had a conversation starter and then you let the reflexes kick in. This made the conversation transition smoothly, enjoyably, and naturally. Thinking too much will make an awkward conversation that is difficult to keep going.
    • The best conversations come from gaining new understanding about the topic discussed or the person. Try to lead into personal stories and anecdotes. These give limitless conversation and are revealing about the character of a person.
    • It’s okay to talk about yourself some as long as the person listening is interested and getting new information about you or the topic. People don’t like to rehash things they already know or have thought about so try to give a new perspective or way of thinking if you’re the one speaking.
    • Always think before you speak. Do not take a long time to answer but listen well to keep on the right track with the conversation. Try not to make an embarrassing mistake, such as giving an opinion which may disrespect someone else. Choose your words carefully, but do not create pointless silences by keeping your conversation partner waiting for 5 minutes before you answer a simple question.
    • Remember that sometimes if a conversation isn’t going well, it might not be your fault! Sometimes the other person is distracted/lost in thought, isn’t willing to contribute, or is having a bad day. If they don’t speak or listen, then they are the ones not using good conversation skills, not you.

    How to Improve Your Memory

    Posted by: siddesigner on: November 7, 2009

    1. Convince yourself that you do have a good memory that will improve. Too many people get stuck here and convince themselves that their memory is bad, that they are just not good with names, that numbers just slip out of their minds for some reason. Erase those thoughts and vow to improve your memory. Commit yourself to the task and bask in your achievements — it’s hard to keep motivated if you beat yourself down every time you make a little bit of progress.
    2. Exercise your brain. Regularly “exercising” the brain keeps it growing and spurs the development of new nerve connections that can help improve memory. By developing new mental skills—especially complex ones such as learning a new language or learning to play a new musical instrument—and challenging your brain with puzzles and games you can keep your brain active and improve its physiological functioning. Try some puzzle exercises everyday such as word cross, sudoku and some other games as easy to put into your mobile phone and practice it maybe once for 30 minutes per day.
    3. Exercise daily. Regular aerobic exercise improves circulation and efficiency throughout the body, including in the brain, and can help ward off the memory loss that comes with aging. Exercise also makes you more alert and relaxed, and can thereby improve your memory uptake, allowing you to take better mental “pictures.”
    4. Reduce stress. Chronic stress, although it does not physically damage the brain, can make remembering much more difficult. After prolonged stress the brain will be damaged. Stressful situations are recognized by the hypothalamus, which in turn signals the pituitary gland. The pituitary gland secreted adrenocorticotropic hormone (ACTH)which influences the adrenal glands to secrete adrenaline and later cortisol(corticosteroids). The corticosteroids can weaken the blood-brain barrier and damage the hippocampus(the memory center). Ironically, the hippocampus controls the secretion of the hormone released by the hypothalamus through a process of negative feedback. After chronic stress it will be damaged and it will not be as efficient in regulating the degenerative corticosteroids and memory will be harmed. Neurogenesis (formation of new neurons) indeed exists in the hippocampus but stress inhibits it. To recapitulate and synthesis, chronic stress will affect your health and your memory, it will damage the brain so the best option is to learn to control stress. Stress will never be eliminated, but it definitely can be controlled. [http://ezinearticles.com/?How-Stress-Effects-Neurotransmitters&id=19510]Even temporary stresses can make it more difficult to effectively focus on concepts and observe things. Try to relax, regularly practice yoga or other stretching exercises, and see a doctor if you have severe chronic stress as soon as possible.
    5. Eat well and eat right. There are a lot of herbal supplements on the market that claim to improve memory, but none have yet been shown to be effective in clinical tests (although small studies have shown some promising results for ginkgo biloba and phosphatidylserine). A healthy diet, however, contributes to a healthy brain, and foods containing antioxidants—broccoli, blueberries, spinach, and berries, for example—and Omega-3 fatty acids appear to promote healthy brain functioning. Feed your brain with such supplements as Thiamine, Vitamin E, Niacin and Vitamin B-6. Grazing, eating 5 or 6 small meals throughout the day instead of 3 large meals, also seems to improve mental functioning (including memory) by limiting dips in blood sugar, which may negatively affect the brain.
    6. Take better pictures. Often we forget things not because our memory is bad, but rather because our observational skills need work. One common situation where this occurs (and which almost everyone can relate to) is meeting new people. Often we don’t really learn people’s names at first because we aren’t really concentrating on remembering them. You’ll find that if you make a conscious effort to remember such things, you’ll do much better. One way to train yourself to be more observant is to look at an unfamiliar photograph for a few seconds and then turn the photograph over and describe or write down as many details as you can about the photograph. Try closing your eyes and picturing the photo in your mind. Use a new photograph each time you try this exercise, and with regular practice you will find you’re able to remember more details with even shorter glimpses of the photos.
    7. Give yourself time to form a memory. Memories are very fragile in the short-term, and distractions can make you quickly forget something as simple as a phone number. The key to avoid losing memories before you can even form them is to be able to focus on the thing to be remembered for a while without thinking about other things, so when you’re trying to remember something, avoid distractions and complicated tasks for a few minutes.
    8. Create vivid, memorable images. You remember information more easily if you can visualize it. If you want to associate a child with a book, try not to visualize the child reading the book – that’s too simple and forgettable. Instead, come up with something more jarring, something that sticks, like the book chasing the child, or the child eating the book. It’s your mind – make the images as shocking and emotional as possible to keep the associations strong.
    9. Repeat things you need to learn. The more times you hear, see, or think about something, the more surely you’ll remember it, right? It’s a no-brainer. When you want to remember something, be it your new coworker’s name or your best friend’s birthday, repeat it, either out loud or silently. Try writing it down; think about it. The key lies in “Spaced Repetition” learning. I’m sure everyone is familiar with flash cards. They’re usually used when you want to revise for an exam. It’s essentialy a card with a question on one side and the answer on the other. In the course of learning a topic you would have a stack of cards and would go through them testing yourself. Those that you got right you would put to one side and review a few days later. The more difficult ones might take several days to fix in the brain. However, when is the ideal time to review the cards that you have temporarily remembered. Leave it too long and, like all memories, it may have faded and we forget the answer. If we review it too soon then we waste time looking at it. We need some system to know exactly when to review each card. Here enters the exciting world of “Spaced Repetition Software”. This software automatically works out the most efficient time to test you on each card for optimum memory retention. There are a number of free bits of software out there for you to use.
    10. Group things you need to remember. Random lists of things (a shopping list, for example) can be especially difficult to remember. To make it easier, try categorizing the individual things from the list. If you can remember that, among other things, you wanted to buy four different kinds of vegetables, you’ll find it easier to remember all four.
    11. Organize your life. Keep items that you frequently need, such as keys and eyeglasses, in the same place every time. Use an electronic organizer or daily planner to keep track of appointments, due dates for bills, and other tasks. Keep phone numbers and addresses in an address book or enter them into your computer or cell phone. Improved organization can help free up your powers of concentration so that you can remember less routine things. Even if being organized doesn’t improve your memory, you’ll receive a lot of the same benefits (i.e. you won’t have to search for your keys anymore).
    12. Try meditation. Research now suggests that people who regularly practice “mindfulness” meditation are able to focus better and may have better memories. Mindfulness (also known as awareness or insight meditation) is the type commonly practiced in Western countries and is easy to learn. Studies at Massachusetts General Hospital show that regular meditation thickens the cerebral cortex in the brain by increasing the blood flow to that region. Some researchers believe this can enhance attention span, focus, and memory.
    13. Sleep well. The amount of sleep we get affects the brain’s ability to recall recently learned information. Getting a good night’s sleep – a minimum of seven hours a night – may improve your short-term memory and long-term relational memory, according to recent studies conducted at the Harvard Medical School.
    14. Build your memorization arsenal. Learn pegs, memory palaces, and the Dominic System. These techniques form the foundation for mnemonic techniques, and will visibly improve your memory.
    15. Venture out and learn from your mistakes. Go ahead and take a stab at memorizing the first one hundred digits of pi, or, if you’ve done that already, the first one thousand. Memorize the monarchs of England through your memory palaces, or your grocery list through visualization. Through diligent effort you will eventually master the art of memorization.

    Tips

    • Most people’s brains are not very good at remembering abstract information, such as numbers. This is one of the things that separate those with eidetic memory from those with a great, normal memory. The key to being able to recall such things is to build associations and links that evoke the memory. This is why almost anybody with normal brain functioning can dramatically improve their ability to recall things using mnemonics. While building a memory palace, for example, actually requires that you “remember” more, by associating the thing to be remembered with other things (emotions, other memories, images, etc.) you build more mental “links” to the memory, thus making it easier to access.
    • A large number of memory improvement products are available (a search on the internet will produce hundreds of such products). Most of these products actually teach you mnemonic strategies, and while some are no doubt bunk, some are legitimate.
    • One easy method to help you remember people’s names is to look at the person when you are introduced and say the person’s name: “Nice to meet you, Bill.”
    • Try memorizing the order of a deck of playing cards. Although this may seem like a pointless task, it will allow you to discover memorization techniques that work best for you.
    • Try a tray of objects (say, 10 objects). Study them for 30 seconds. Take the tray away and write down all the objects you can. Increase the number of items for more mind excercise. Or get someone else to find the objects on the tray; this makes them harder to remember and will test you more.
    • Put black ink at the end of your palm to remember any important thing for the next day or for that day itself. Whenever you see the black dot, you’ll remember what to do.
    • Visualize whatever you have to do as part of something you see every day. For example, if you have to give your dog some medicine, visualize your dog in your fridge every time you walk past it or look inside. This will keep your dog fresh in your mind.
    • Write the event or task down immediately. If you don’t have a pen, one thing you can do is change the time on your watch; later on you will remember why it is set at the wrong time. You could also wear your watch upside down.
    • Write in a diary or journal every day without fail. Even small issues should be written down — this is a good way to make sure you don’t miss anything.
    • Leave yourself a telephone message reminding yourself of important “to do” tasks.
    • Memorize your favorite song or poem until you can say it to yourself without any help. Try to do this often.
    • A study by Harvard University shows that people who sleep tend to remember things better. So sleep and see how much you remember things better.

    Posted by: siddesigner on: July 25, 2009

    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

    Posted by: siddesigner on: July 15, 2009

    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]
      view plaincopy to clipboardprint?
      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”);  
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      1. <em>CSS:</em>  
      2. .width100 { width: 100%; }  
      3. .width75 { width: 75%; }  
      4. .width50 { width: 50%; }  
      5. .floatLeft { float: left; }  
      6. .floatRight { float: right; }  
      7. .alignLeft { text-align: left; }  
      8. .alignRight { text-align: right; }  
    • 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:”
      view plaincopy to clipboardprint?
      1. h2 { }  
      2. #snapshot_box h2 {  
      3.     padding: 0 0 6px 0;  
      4.     font: bold 14px/14px “Verdana”, sans-serif; }  
      5. #main_side h2 {  
      6.     color: #444;  
      7.     font: bold 14px/14px “Verdana”, sans-serif; }  
      8. .sidetagselection h2 {  
      9.     color: #fff;  
      10.     font: bold 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]
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      1. body {  
      2.     background: #fdfdfd;  
      3.     color: #333;  
      4.     font-size: 1em;  
      5.     line-height: 1.4;  
      6.     margin: 0;  
      7.     padding: 0;  
      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]
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      1. a:link { color: blue; }  
      2. a:visited { color: purple; }  
      3. a:hover { color: purple; }  
      4. a:active { color: red; }  
    • 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.
      view plaincopy to clipboardprint?
      1. <em>CSS:</em>  
      2. margin: top right bottom left;  
      3. margin: 1em 0 2em 0.5em;  
      4. (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em ;)   
      view plaincopy to clipboardprint?
      1. <em>CSS:</em>  
      2. border: width style color;  
      3. border: 1px solid #000;  
      view plaincopy to clipboardprint?
      1. <em>CSS:</em>  
      2. background: color image repeat attachment position;  
      3. background: #f00 url(background.gif) no-repeat fixed 0 0;  
      view plaincopy to clipboardprint?
      1. <em>CSS:</em>  
      2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;  
      3. font: italic 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]
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      1. h1 {  
      2.     text-transform: uppercase;  
      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.
      view plaincopy to clipboardprint?
      1. h1 {  
      2.     font-variant: small-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]
      view plaincopy to clipboardprint?
      1. p {  
      2.     font-family: Arial, Verdana, Helvetica, sans-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]
      view plaincopy to clipboardprint?
      1. * { border: 1px 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]
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      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:
      view plaincopy to clipboardprint?
      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:
      view plaincopy to clipboardprint?
      1. p[title] { color:#f00; }  
    • The selector matches all div elements that have a class attribute with the value error:
      view plaincopy to clipboardprint?
      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):
      view plaincopy to clipboardprint?
      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.
      view plaincopy to clipboardprint?
      1. a[rel~="nofollow"]::after {  
      2.     content: “\2620″;  
      3.     color: #933;  
      4.     font-size: x-small;  
      5. }  
      6. a[rel~="tag"]::after {  
      7.     content: url(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]
      view plaincopy to clipboardprint?
      1. a[href^="http://"]:not([href*="smashingmagazine.com"])::after {  
      2.     content: “\2197″;  
      3. }  
    • You can remove dotted links with outline: none;. To remove dotted links use outline: none;:
      view plaincopy to clipboardprint?
      1. a:focus {  
      2.     outline: none;  
      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]
      view plaincopy to clipboardprint?
      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.
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      1. <em>XHTML:</em>  
      2. <div id=“wrap”>  
      3. <!– Your layout goes here –>  
      4. </div>  
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      1. <?xml version=“1.0″ ?>  
      2. <?xml-stylesheet type=“text/css” href=“http://you.com/rss.css” ?>  
      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]
      view plaincopy to clipboardprint?
      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:
      view plaincopy to clipboardprint?
      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]
      view plaincopy to clipboardprint?
      1. #regular_logo  
      2. {  
      3.     background: url(‘test.png’); width:150px; height: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]
      view plaincopy to clipboardprint?
      1. #container  
      2. {  
      3.     min-width: 600px;  
      4.     max-width: 1200px;  
      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]
      view plaincopy to clipboardprint?
      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

    Posted by: siddesigner on: July 15, 2009

    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…

    view plaincopy to clipboardprint?
    1. p { margin-top: 10px;  
    2.     margin-right: 20px;  
    3.     margin-bottom:  30px;  
    4.     margin-left: 40px; }  

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

    view plaincopy to clipboardprint?
    1. p { margin: 10px 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:

    view plaincopy to clipboardprint?
    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 CSS – Andy 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

    Posted by: siddesigner on: July 14, 2009

    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

    Posted by: siddesigner on: July 11, 2009

    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.

    Globle Styles

    Posted by: siddesigner on: February 14, 2009

    @charset “utf-8″;
    /* CSS Document */

    /***** Global Settings *****/

    html, body {
    border:0;
    margin:0;
    padding:0;
    }

    body {
    font:100%/1.25 Arial, Helvetica, sans-serif;
    }

    /***** Headings *****/

    h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
    font-weight:normal;
    }

    h1 {
    padding:30px 0 25px 0;
    letter-spacing:-1px;
    font-size:2em;
    }

    h2 {
    padding:20px 0;
    letter-spacing:-1px;
    font-size:1.5em;
    }

    h3 {
    font-size:1em;
    font-weight:bold;
    }

    /***** Common Formatting *****/

    p, ul, ol {
    margin:0;
    padding:0 0 1.25em 0;
    }

    ul, ol {
    padding:0 0 1.25em 2.5em;
    }

    blockquote {
    margin:1.25em;
    padding:1.25em 1.25em 0 1.25em;
    }

    small {
    font-size:0.85em;
    }

    img {
    border:0;
    }

    sup {
    position:relative;
    bottom:0.3em;
    vertical-align:baseline;
    }

    sub {
    position:relative;
    bottom:-0.2em;
    vertical-align:baseline;
    }

    acronym, abbr {
    cursor:help;
    letter-spacing:1px;
    border-bottom:1px dashed;
    }

    /***** Links *****/

    a,
    a:link,
    a:visited,
    a:hover {
    text-decoration:underline;
    }

    /***** Forms *****/

    form {
    margin:0;
    padding:0;
    display:inline;
    }

    input, select, textarea {
    font:1em Arial, Helvetica, sans-serif;
    }

    textarea {
    width:100%;
    line-height:1.25;
    }

    label {
    cursor:pointer;
    }

    /***** Tables *****/

    table {
    border:0;
    margin:0 0 1.25em 0;
    padding:0;
    }

    table tr td {
    padding:2px;
    }

    /***** Wrapper *****/

    #wrap {
    width:960px;
    margin:0 auto;
    }

    /***** Global Classes *****/

    .clear         { clear:both; }
    .float-left    { float:left; }
    .float-right   { float:right; }

    .text-left     { text-align:left; }
    .text-right    { text-align:right; }
    .text-center   { text-align:center; }
    .text-justify  { text-align:justify; }

    .bold          { font-weight:bold; }
    .italic        { font-style:italic; }
    .underline     { border-bottom:1px solid; }
    .highlight     { background:#ffc; }

    .wrap          { width:960px;margin:0 auto; }

    .img-left      { float:left;margin:4px 10px 4px 0; }
    .img-right     { float:right;margin:4px 0 4px 10px; }

    .nopadding     { padding:0; }
    .noindent      { margin-left:0;padding-left:0; }
    .nobullet      { list-style:none;list-style-image:none; }

    Introduction to Javascript for Newbies

    Posted by: siddesigner on: January 24, 2009

    Javascript is a client-side programming language whose processing engine is embedded in web browsers like Internet Explorer, Netscape, Firefox, etc. This enables the processing engine to read and interpret web pages that contain the javascript code when browsing.

    Javascript first made an appearance in 1995, although by that time it was known as Livescript. This name was later changed to javascript.

    Javascript was invented to add more exciting features to HTML pages. HTML on it’s on is pretty boring and it cannot do much besides display a webpage. Javascript programming, on the other hand, can provide a host of exciting features like perform calculations, allows the user to interact with webpages, perform form validations, manipulate elements on a webpage, provide excellent visual effects, enables dynamic functions and so much more.

    All of this provides the user to the site with an enhanced user experience. Because javascript is a client-side language, all of these features are available in real time without the browser having to refer to the server all the time. This prevents time delays and increases user satisfaction.

    Let’s take a closer look at the great things you can do with javascript programming:

    Perform Calculations

    Javascript can be used to perform simple to advanced mathematical calculations. This is especially useful if you want your users to interact with your site by inputting some information that requires some sort of calculation and displaying the relevant content based on that result. For example, javascript can calculate a loan repayment and display the appropriate result if a user enters a required loan amount on the site. Furthermore, javascript can also tell date and time, time a certain activity and perform intricate date and time calculations.

    User Interaction

    The javascript on the webpage can take interaction from a user and perform a certain function by way events. Some of the most popular events are:

    onblur
    onchange
    onclick
    ondblclick
    onfocus
    onkeydown
    onkeypress
    onkeyup
    onload
    onmousedown
    onmousemove
    onmouseout
    onmouseover
    onmouseup
    onselect
    onsubmit

    Perform Form Validations

    Javascript can validate and check user input to determine whether it conforms to a certain requirement. For example, you can check if a field is left empty, if an email address is in the proper format, if a zip code code is in the proper format, etc. In most cases, if an error is made by your site visitor, an alert can display the appropriate error message to him or her.

    Manipulate Elements On A Webpage

    Javascript allows a user to change content or styles of a webpage upon a user interaction by way of the aforementioned events. For example, hovering over a certain text can make an image appear, text on a submit button can change on submit, etc.

    Provide Visual Effects

    Javascript has a host of ways to provide visual effects to a webpage that other server-side programming languages cannot. A typical example of this might be some fancy image rollover buttons.

    Enables Dynamic Functions

    Javascript, together with AJAX (asynchronous JavaScript and XML), can be used to create dynamic applications. One example of this is to load dynamic content onto a webpage without refreshing the page.

    In my next chapter, we will delve further into javascript programming.

    Older Entries

    Search


    • Mr WordPress: Hi, this is a comment.To delete a comment, just log in, and view the posts' comments, there you will have the option to edit or delete them.
    • sagar:

    Categories

    Archives

    Blog at WordPress.com.

    Albeo theme by Design Disease