We don’t redesign a website only for the sake of spending money. We do it because we feel that the site needs a visual revamp, we feel that our visitors want to see something new from a visual stand point. Considering the redesign is entirely for the users, it’s them we should focus on when we think about creating a new identity for our blog, publication or whatever kind of webpage it is.

The bigger and more important your webpage is, the higher the probability to fail when redesigning it is. Why? Because when you have to take hundreds of thousands or millions of users under consideration, it might be difficult to please all of them – quite frankly, it is impossible to do it. I personally experienced leaving a website I liked only because they changed the design – and I am aware of how the web works. If I left that webpage for good, I am wondering how many other users that don’t have anything to do with design did the same.

In order to increase the probability of your redesign being successful, I have created a list with some tips for you.

Make sure you need to redesign

When you already have users that come back to your site, most of them expect certain things; they know where the navigation is, where to search for content, where to find archives and so on. By redesigning you will most likely change those things.

Image by buritikid

If you are lucky enough and have a responsive community, you can even make a poll and ask them if they think the site needs to be redesigned. If you don’t have such a community, the decision will be up to you and will be more difficult to make unfortunately. Try to ask fellow designers about the particular website and see what they think about it.

Involve your users

The second step in a redesign process is to involve the community base. This can help your new website to look and suit your audience better, because you get feedback from them and use it to inform your designs.

A good tip would be to try and keep the main elements in the same place, or at least to ensure the functionality is similar. Moving the sidebar from left to right is confusing for the first time; the same with the navigation – if you had a dropdown menu before, either go with this type again or simplify the navigation. It’s important to always make sure the user doesn’t find the new website more difficult to navigate  than before. Thus it’s necessary to avoid a total redesign. More important, involve the users in the process.

Image by Dominik Gwarek

Test the website

Testing the website doesn’t only happen behind the closed doors of an agency, but also with the users. Offer them the option of testing the new website – and make it visible. Afterwards, allow them to send you feedback through forms or a survey and always keep track of it. This is another way of involving the users and helps because, I am saying it again, the user is always the focus. You never redesign for yourself, but for them. Allowing them to test the new design before it’s done will also give you the opportunity to adjust it. Expect this to be a difficult process, because you will start with some ideas and will end up with a different site – but make sure your visitors will appreciate it and will come back afterwards.

Don’t change the layout right away

This is a strategy most of the social media sites use. Whenever they change the layout, they either allow you to stay with the old one for a predefined period, or change to the new one and give you the option to go back to the old style. Why do they do this? The answer is simple. Not everybody has the required time to get used to a new layout when the designer wants. Getting used to a new style takes time and if the user doesn’t want to spend that time right away, give him the right to do so.

Allow users to change to the new design (and specify it is still in beta) and give them an option to go back to the old one. Sure, don’t keep this forever, but look at Facebook. They only force everyone to update their layouts to the new ones after one or two months after they make them available for the first time.

Some of the users decided to go for the new “Timeline” of Facebook. I decided to keep the old layout because I liked it. Moreover, I didn’t even think of getting the timeline because Facebook wouldn’t allow me to go back to the previous style. Therefore my Facebook still keeps the old style. But as a matter of fact, Facebook will update my layout to the timeline very soon, when the old style will not be available anymore.

This is an interesting strategy and is very well implemented in social media. Therefore think of implementing it with your site’s redesign.

Allow feedback even after the process is done

You redesigned the website and now it’s on. Users can’t go back to the old one and there is nothing else to do other than accepting it as it is. Fair enough, but allow the users to give feedback.

There are lots of tools you can use for this on the internet and this way you will make sure that if something is wrong, users will point it out to you- this happens mostly if you have a responsive community supporting the website, but it is always worth trying.

If a lot of your users feel the same thing is wrong, make sure to fix it as soon as possible. This way they will feel like they’re a part of the community and, since their opinion is valued and taken into consideration, they will happily continue their stay there.

Make the reasons behind your decision clear

It is always smart to tell your users why you think it is important to redesign a website. Some of them have no idea of design changes, usability or new technologies and I am afraid they don’t even care – they just want to be able to use the website like they were accustomed to. Changing the design will not allow this for a period, until they get used to the new layout, therefore some of them might be against you customizing the style.

Thus, explain to the users why you think it is important to make changes. Use some basic theories and explain that being up to date with new technologies will allow the website to offer even more and will probably even make it load faster. When they hear about speed, most of them will be excited about the new design.

Make a guide for the new layout

If you make major changes to your website, then creating a photo, text or video tutorial about this would be great, interactive and helpful. I am sure the visitors now knowing what to do next will appreciate the tutorial which will allow them to adapt faster to the new design. This gives them the impression that you care about them – which again will make them come back to your page.

Image source

In case you already redesigned your webpage and it kind of failed, there are solutions for you too. This happens if you hear way too many complaints from your community and you don’t want to spend money on a new design again, but want to do something to improve the atmosphere for your users.

It’s about your mistakes

If this happened, then it is probably your mistake as a designer, because you either did something wrong during the development process or you failed or miscommunicated with the users. It is clear that if they are not happy with the new design, there is something wrong and it’s obviously something major that you’ll need to address.

This is the perfect moment to show how close you are to your community. It can be on Twitter, Facebook or even on the site, make sure people find out you want to fix your mistakes. Let them speak and let them tell you what was wrong, this way it will be easier for you too, when you will have to decide on the solution.

Use their feedback

When they send you feedback, make use of it as much as possible. Acknowledge some of the complaints and show the community you are involved and want to change everything for the best. This will, again, make your life easier, because all the feedback you get and discussions you stir with the community will end up with some conclusions, ideas and possibilities. It’s much easier to repair a mistake when you are backed up by your community, then when you are not.

Go back if you need to

There is no shame in acknowledging that your redesign has failed, therefore if the community strongly asks for it, you can go back to the old design. Sure, going back to the old design means you still have to use resources to redesign (that is where you started from in the first place), but at least until you prepare a new strategy the number of visitors will not decrease.

It is really important to keep the community happy and the way of doing it if you are in this situation is to allow them to go back to the old style. Don’t force this into them, it will definitely get confusing for the ones who thought well of the new layout. Just offer the option of choosing their own style. This will, for sure, solve the problem in the short-term and will allow you some time to prepare the new design better.

Always follow opinions

The most important thing whenever you launch a new design is to monitor carefully the community and their behavior. Google Analytics is the best tool you can use, because it is free and gives you an in-depth insight into how the users spend their time on your site. If the number of visitors decreases soon after the launch date, it might be because of the new layout.

"Just my two cents"

Image by claymor

This is the time when you have to start interacting more with the visitors and ask what is wrong. The bottom line is that many users would rather stay on a bad page if the designer is interested and involved with them, than staying on a very good page where the designer doesn’t really care. You have to show your community you care about them.

Another way of keeping track of the opinions is to closely follow social media posts. Most users actually prefer Twitter and Facebook when talking about these kinds of changes, so keep an eye out there too. This is another way to show your users the redesign is for their own good.

Bottom line

The conclusion is that redesigning your website is not as easy as it sounds. Not being able to involve your community in this important decision will most likely turn your project into a failure and will drive the users away. Thus it is smart to keep the community close and use their feedback and opinions – in the end, everything you do is for them – at least consider their opinions. This way you will be closer to success than if you do this the other way around.

In the world of children oriented websites, the conventional rules of web design don’t quite work. There are many elements that live on child-oriented websites alone, for children are a whole different audience (rather, a whole different species in the world of design).

1. Bright and Lively Colors

Color combinations that are normally scoffed at in normal web design will actually be effective in a children’s website. Most children’s websites are lively, bright and cheerful. Don’t worry to go crazy with bright colors and weird combinations–the more offbeat, the better.

And yes, it seems like kids have more tolerance to clutter than adults. Color and high activity in the web site stimulates the child’s senses, which is effective for retaining their interest and attention.

Cartoon Network

Wizards of Waverly Place

Spongebob Squarepants

Home of everyone’s favorite yellow sponge, Spongebob Squarepants.

Pictures, pictures, pictures

Pictures are important in children’s websites. Text should be used sparingly, it should be easy to understand and straightforward.  You can emphasize language by adding relevant pictures.

Fish Hooks

2. Games and Activities

Most kid’s websites feature mini-games to keep kids entertained for long periods of time. These games are one of the main reasons why kids come back again and again to the website. Featuring games, quizzes and activities is perfect for retaining traffic to your site, making it popular among children and thus retaining their loyalty.

Most kid’s websites feature mini-games, to keep kids entertained for long periods of time. These games are one of the main reasons why kids come back again and again to the website.

Also know your gender group. Pattern the games and activities after the intended target. For example, girl’s games are often about dress up and playing house. Little girly girls love clothes, makeup, princesses and the color pink.

But it doesn’t mean that boys can’t enjoy ‘dressing up’–they can create and ‘dress up’ their own cars in the official Disney Pixar’s Cars website.

• Games that Promote Education

Aside from entertainment, games can be used as a tool to educate, inform and allow interaction.
Nasa Kids Club>

A great educational site for kids to learn more about astronomy and space.
PBS Kids

PBS Kids is a rich resource for educational games. Kids will love this site. Parents will love this site. The children are learning even when the kids are not intending to.

• Activities

Printables, coloring pages and crafts are also important to sustain the fun, even if the child is not in front of the PC. These options are often available on the ‘Downloads’ Page.

3. Know your Age Group

Children can be divided into three groups according to age bracket: very young (ages 3-5), mid-range (6-8) and older kids (9-12) The different age groups have different activities, behaviors and interests. As kids grow older, they also get more web experience and knowledge.

• Young Kids (3-5)

Cute characters, nature themes, clean colors and graphics are just some of the common elements found in web sites for young kids. Use of text is very minimal, instead compensating for buttons, graphics and sound.

Octonauts

Kids appreciate web site design that is rich in depth. 3D animation, rich shadows and highlights, subtle gradients are what composes this beautiful web design from Octonauts.

Barney

Crayola

Coloring activities and printable color pages are popular especially for websites targeted to the younger age group.

• Mid-range Kids (6-8)

The older the child, the more proficient he/she is with reading. Consequently, more words appear in web design targeted to older kids. Sites also offer more challenging and varied games, now growing bored of the young kid’s simple games and one-task activities.
Ben 10

Scooby Doo

• Older Kids (9-12)

Kids ages 9 to 12 are now more mature and experienced in web use. Older kids are bored with repetitive games, so it will take a deal more for them to come back again and again to a web site.
This means developers should craft sites that allow frequent visitation to the site. Games for older children should be more engaging and interactive, by means of which they now have more freedom to create their own characters, upgrade them, create houses for them, and compete in games with other online players. Websites for older teens should have the option to interact with other players but still providing the necessary security and privacy for the young users.
Neopets

Go Supermodel

• Parent’s Section

Responsible parenthood requires parents to supervise their kids on their net use.

3. Low Attention Span

But kid’s websites are often heavy (using Java and Flash) for they carry plenty of games, animations, sounds and music. To prevent kids from closing the site, websites create creative pre-loaders.

Pre-loaders offer your kids something interesting to look at while waiting for the whole page to load.

4. Ease of Navigation

Navigation in children’s websites must be oversimplified so that kids can navigate through it easily. Spatial navigation is important, thus the ‘map’ layout is popular among kid’s websites. Text-based links are not as effective compared to large buttons and graphical icons. Finally, children do little or no scrolling, so design websites with no scrolls, and be sure everything of relevance is located at the front page of the site.

• Navigation Bar

The most important links are of course placed in the navigation bar. The navigation bar is a common element in web design, even so in kid’s web design. Kid’s websites tend to be unconventional and unique, but the navigation bar keeps for it keeps the important links organized. They are a constant element in the site, to ensure our young users won’t get lost amidst the maze.

Kids don’t use the search feature as often as adults, instead relying on bookmarks and clicking on buttons. Because of this, make navigation as simple as possible. Everything should be present at first sight.

• The Map Layout

The layout of children-oriented websites can be more complicated because of their target market. While adults use the internet for information and communication, children log on to the internet for fun and entertainment.

Claus.com

A fun, Santa-themed website for kids with games and activities. The site allows kids to navigate through the North Pole. Fun places include the Elf School, Reindeer Barn and Mrs. Claus’ Kitchen.

Neopets

Spatial navigation is necessary for children’s websites. Kids want something that’s imaginative, but in a world that is real and familiar to them. Create creative layouts such as a room where you can click and interact with the objects.

5. Animated Animals and Characters

Interaction is vital for a child’s entertainment. Design a children’s website that offers plenty of stimulus such as sound, music, animation and videos. While most adults find music unnecessary and annoying, for kids it can make and break the website. The music and animation sets the mood and tone of the whole website.

Disney Princess

Phineas and Ferb

Club Penguin

An MMORPG winter-based world for kids age 6-14 where they can play games, customize their igloos and penguins.

Dr. Seuss

In the Dr. Seuss site, whimsical music set the theme and environment of the entire site. The site looks exactly like the Dr. Seuss storybooks we have as a child.

Bob the Builder

Bob the Builder welcomes visitors to play games, to click on the trucks to see how they work or click on him to create something from start to end. Then it plays the familiar ‘Bob the Builder’ theme song in the background.

Conclusions

Designing for a children’s website is tremendously harder to develop and design, but more rewarding and fun. Designers learn to design and layout according to their audience’s behaviors, preferences and web experience.

When designing for children’s website, we learn:

• Website should have bright colors and a cheerful mood.
• Use minimal text and plenty of graphics and pictures. Stick to plain talk and be straightforward. Font size should be around 14 for younger kids, and 12 for older kids.
• Ease of navigation is key — navigation bar should be where it is most visible (like on the top), with heavy graphics and big buttons. Maps and open-ended environments offer kids freedom to roam and have fun.
• Kids click more than they type. Kids don’t do searches as often as adults do. When saving their favorite websites, they rely more on Bookmarks than Google.
• Animation, sound and music is integral in web design. Add sounds and animation that trigger upon hovering or clicking the mouse.
• Games are just as necessary. Printables and crafts as well. Games should be varied and plenty, fit for the age group.
• Give kids a chance to create their own characters and reward return users by giving them the option to personalize and upgrade them.

In this article I will be sharing:

• Tips
• Fonts
• Tutorials
• Examples

How to Make Typography Stand Out

1. Choose Your Fonts

This is crucial, because you need to match your font to your message and layout. Mismatched fonts can lead to a misleading and confusing message to the viewer if you just carelessly pick any font.

2. Creative Color Schemes

It used to be a big deal if you used mismatched colors. In this new generation, stepping out of the box may be the best thing you’ll ever do. So keep it unique when choosing color schemes for your typography. You may also want to consider the background of your layout. So just put in the right blend on your design.

3. Don’t Over-do it

Just put in the right amount of effects, colors and patterns.Over done Typography may just ruin the concept of your design. If you go for very characterized fonts, you may want to take it easy on using patterns and/or effects.

4. Put in Emphasis

You may want to make certain words pop out and get noticed. This way you convey a message that would really make the whole design memorable. Balance the font size and position in a way that it is not distracting from your “big word”. You can also use quotation marks, apostrophes or other punctuation marks  like (“,! or ?) to place emphasis on words.

5. Harmony

Make every element in your typographic design harmonious. Check if it goes well & looks good with all the other objects on your layout. Sometimes, you may end up having  the typography will be more distracting than pleasing.

Fonts for Good Typography

1. Diavlo

2. Nevis

3. Fertigo Pro

4. Alte Haas Grotesk

5. Honey Script

6. Romeral

7. COM4t

8. Diogene Bold

9. Bleeding Cowboys

10. Riesling

Bold Typography Design Tutorials

1. Photoshop Tutorials: Colorful Light Burst Text

2. The Sugar Bag Effect – Photoshop Typography Tutorial

3. Smashing Your Creative Block – Photoshop Tutorial

4. Create a Steampunk Typography  – Part I & Part 2

5.Smoke Type in Photoshop in 10 Steps

6.Trendy Grunge Type – Photoshop Tutorial

7. Create a Cool Wet Ink Typography Effect in Photoshop

8. Horror Style Typography Effect with Dirt and Splatter Texture in Photoshop

9.  Super Easy Neon Style in Photoshop – Screencast

10.Tutorial: Photorealistic Perspective

Inspirational Typography

1. Getfinch

2. N. Design Studio

3. Mohanbalaji

4. Four24

5. Ryan Keiser

6. Carsonified

7. Wearecupcake

8. Kyle Steed

9. Fajne Chlopaki

10. Cool

11. We Shoot Bottles

12. 1md.de

13. Hull Digital

14. Benlind

15. YISY

16.Tiptopland

17. Crowley Webb

18. Stackoverflow Carsonified

19. Maurivan Luiz

20. This by them

21.Alpha Multimedia

22. fl-2 Blog

23. Pallian Creative

24. Gummisig

25. Denise Chandler

26. Wordit

27.Kerplunc

28.Lorem Ipsum

29.Fabriziobalestri

30.Household Design

Big & bold Typography gives a web design that great bang and makes its approach more aggressive. Amazing, how a bunch of over-sized letters can convey a great message to viewers.

For all types of communication, the most important thing is to be able to fully transmit the message to the receiving end. In other words, in web designing, the most important thing is to make our readers understand whatever it is we are trying to convey. This is where typography comes in. If the text in our design is too small to read, or too cramped up, or if it irritates the audience while viewing the design, the page won’t get a second glance.

Now, 95% of the information communicated on the internet is written language. Therefore, it’s just logical to suggest that a web designer should preferably get effective training in the key discipline of shaping written information, putting it simply: Typography.

Marriage of Typography and Web Design: Why is Typography Important?

Whenever people visit a website you have designed, chances are they won’t care much about the illustrations or pictures or sounds, people will immediately look at the text.

People search the internet hoping to find the information they need. They are looking for information and this information come in the form of text content. How else are we supposed to communicate the message we want while integrating it in our design?

Regardless of how many special features you have built into the website you’ve designed, everyone will always depend on text content to obtain whatever they want when visiting the site. This alone should make typography a suitable wife for your web design.

So, why is typography important?

1.  People immediately look at the text of your web design.

Thus, you want your text to be as catchy as possible. Not flashy, but catchy, just enough to keep the readers interested. For example, what do you think headlines are for? Correct, headlines are there as headlines to grab the readers’ attention.

2. 90% of your web design is typography.

If we master that 90 %, which is typography, we can already say that our web design is a huge success.

3. If you do not give importance to typography, you won’t reach your readers.

Readers are like spoiled brats (no offense), they like to get what they want, when they want it. They want to get what they are looking for in an instant. That’s why you need to have a design that can attract and maintain the interest of the readers. In order to do that, you need to have a proper blend of typography and graphics.

The Golden Rule: In Search of A Perfect Font

Our goal as web designer is to showcase our designs to the whole world, and convey information and a clients message through design – in written language!

Speaking of written language, not a lot of people (who just might stay and have a blast with your site!) have the same fancy lineup of fonts that you have. Therefore it just follows that the very first rule in web typography is that web designers should use default fonts.

In order to wow(!) our readers, we need them to be able to read and understand the information and messages we want to convey in our web design. To do that, we need to utilize fonts that all computers have.

Differences between Serif and Sans Serif fonts

Let’s begin with the serif family. Look at the image above. Do you notice those cute little finishing strokes? That’s Serif. If we remove those cute curls and little blobs at the end of the strokes we get Sans Serif.

When creating our designs, we should always consider these types of fonts. All our readers’ computers, for sure, have these fonts!

Here’s the list.

Sans Serif

• Arial
• Geneva
• Helvetica
• Lucida Grande
• Lucida Sans Unicode
• Tahoma

Serif

• Book Antiqua
• Georgia
• Palatino
• Palatino Linotype
• Times New Roman

It is said that the Serif family is the older one and originated from the Roman Empire. It is very wise to use Serif in our content body because it guides the horizontal flow of the eyes. And Sans Serif? As we all know, headlines are very important and we need it to catch the readers attention. That’s why Sans Serif is the best choice for headlines. Using Sans Serif as font for headlines helps the headlines pop out from the whole article.

Thus, the most popular combination that CNN and BBC use is to use Serif for the article body, but use Sans Serif for the article headline.

Spacing Between Lines of Text

Another term for this is line height. For a great web design, line height is a very important factor to consider. I’m sure each and every good web designer out there already knows this simple fact.

Before we become web designers, we are readers of our own design. We want our design to as easy-to-read as possible, and we want everything in our design to look good. That includes line height.

The best, and perhaps the easiest, way to achieve the most natural balance in the typography of our web design is to use the em measurement in CSS.

It’s a wise decision to utilize between 1.2em and 1.4em. This approach makes sure that the reader will not have a hard time differentiating between the lines of text you’re presenting and will be able to comprehend the text much better.

Limit Your Typefaces

In the field of web design where creativity and an unlimited source of it is very important, it is really, really hard, especially for beginners to see the fine line that separates a great web design from a very confusing one.

It is very easy to get lost in using a lot of fonts in our designs. Everything always seems good for something. This one’s great for this, and that one’s great for that. But in reality, web designs which include a lot of different fonts are generally unpleasant and confusing to look at. By doing this you may overlook the element of consistency your design should have. This does not necessarily mean that it is best to just use one font, however, try limiting it to two to three fonts per page

Tools for Web Designers

The following tools can help beginners (and experts) with their web design and typography.

1. I Love Typography

This is perhaps one of the coolest typography blogs on the planet.

2. CSS Type Set

Enter the text you want to modify, test its readability, and see how it will look like in any style you set.

3. SenCSs

Pronounced as “sense”, this tool allows you to actually focus on developing your website’s style.

4. dafont

This is a beautiful collection of fonts, free to download.

5. flipping typical

Try out different text and see how it will look like on various web safe fonts.

Throughout history, be it internet or real world, typography has always been very important. It is as important today as it was back then. Typography is an integral part of web design, from headlines to sub headlines to smaller-sized text in the content, typography is a pure combination of art and science and it is a very crucial piece of web design.

Perfecting typography means perfecting readability, ease, usability, and all in all graphic harmony for readers. By doing so, we achieve our goal as web designers to communicate clearly with our readers and they in turn, enjoy our web designs.

People go to blogs without knowing exactly what to expect. They are there to look for brain foods, our job is to get them to bite our bait through headlines. Keep in mind that websites like Digg, Designbump, Delicious, and many others will only display your headlines (or a sentence or two) making it more prone to be ignored if you do not read this post carefully. Promise!

First off let’s talk about the types of headlines that we usually see.

Types of Headlines

A headline tells the beginning and the end of the content. It should say what the article is all about and what to expect from it, either explicitly or implicitly.

Taunt

Image by: Miguel Ugalde

Headlines that taunt people generally lacks the idea of what the article is all about but is full of ideas. For example, when I say “100 Writing Mistakes You Thought Were Right” gives your audience the impression that you’re telling them they are absolutely wrong about something, and that hurts their pride but won’t tell and just read on. This is a good tactic to have a great number of audience as long as majority of that 100 is truthful, unless you want to risk being harassed in the comments. *laughs*

Tips and Tricks

Image by: Svilen Milev

Then there’s the How To type which works every single time because people are born to be very curious about how things work. Presented with 10 How To articles I will probably read 8 of them. It is like hypnotizing your readers into reading How To: Maintain Enthusiasm For Work, you want to know how? Come and get it.

Similar to How To are headlines like Tips and Tricks, the readers will expect to see a list of information they don’t know yet. This includes headlines like “Feeling Uninspired? 6 Best Ways To Find Enthusiasm”, “5 Killer Ways To Streamline Your Coding Efficiency” and many others.

Demanding

Image by: Jenny Rollo

Another type is a headline that commands, it demands you to get something done. Good examples are “Use PHP Flat File Cache To Lighten Database Load” and “Improve Your Skills: 25 jQuery Beginner Tutorials Roundup”.

News

Image by: Ton Koldewijn

News headlines generally lack color. They tell directly what happened or what event is to happen. This is for serious stuffs (not ninja-serious stuffs). Example: “Google unveils new smartphone, Nexus S” straight and direct. Although nowadays, even newspapers use quirky headlines.

In a Nutshell:

• Taunt –  will get into people’s nerves and attack by clicking it
• Tips and Tricks –  sparks the audience-to-be’s curiosity; feeds the mind with lists
• Demanding –  demands the reader to act
• News –  straight to the point and serves as an announcement of an event or product.

There are many types of headlines, these are just the common ones.

Importance and Characteristics of a Good Headline

As much as possible do not make your headlines like you are advertising, even if you really are. No one wants to buy stuffs on impulse (really?) and it makes the article look dangerous to approach. Although you are really selling an item, which is your blog, make it more appealing so that the readers will find it comfortable.

A good headline instantly tells the reader that he/she should read it. A good headline is a sign that the content is too. “He who controls the headline controls the readers” is the one single point I want you all to remember when writing a headline (I really need to remember that too).

Examples of Good Headlines:

• Where Have All The Comments Gone? (SmashingMagazine) – In six words the headline tells us half of the story and leaves us hanging, wanting for more.
• The Biggest Mistake of Julian Assange (woorkup) – this one taunts Assange’s supporters and surely will be flocked by those who don’t like him. Even people who do not know who Julain Assange is will wonder “just who is this person?”
• 100 Exceedingly Useful CSS Tips and Tricks (Six Revisions) – it does not matter how much you use CSS, once you finish reading this headline you’ll surely click it because of “100 Exceedingly”.
• Just in! Minutes before submitting this article I received an e-mail saying “President Obama Busts a Myth!” Am I kidding? Nah, here’s the proof: PROOF and a screenshot:

Examples of Bad Headlines (I will not cite real-life examples!):

• “Buy This Because You Need It” –  and you badly need to sell?
• “This story is about a man who bla bla bla and bla bla bla” –  A headline should tell a story but never turn it into a 15–word headline.
• “I Want You to Read This!” –  this may work sometimes like how those “ReadMe.txt” work but still a bad headline.

An Example of a Headline in the Gray Area:

• Colleagues Finger Billionaire (The Wall Street Journal) – I don’t know what to make of it, sorry.

Although quite unrelated, I think these headlines I found at clevelandseniors.com will make for a good inspiration when creating your headlines. Funny Headlines

Few Tips on How to Write a Good Headline

Because of this article’s headline I am obliged to give tips on how to write a good one. I am no expert when it comes to writing good headlines but please bear with me. Below is what I have observed from the headlines that caught me by their bait.

1. It’s fine to use superlatives as long as the content is really awesome.
2. The shorter the better.
3. Should answer the question “What the heck is this about?”
4. It is OK to use humor. Like the headline of this post…what?

It is really simple to create a good headline, no sweat in writing one. Just make it reach the audience. Easier said than done? Yes. Look at my headline, not good. If you were to write a “creative” headline for this article what would it be?

And don’t forget to share your favorite headlines. Share some tips too!

“In order to beat your enemy, you must first understand the enemy.”

Factors Involved in Losing Enthusiasm

Image by: Gabriella Fabbri

1. Overwork

Skipping a weekend’s rest because of a deadline or you just love your work too much? Not good, you are being too hard on yourself. The longer you work without rest the faster you will lose motivation, no matter how much you like doing it. Mental exhaustion for freelancers and office workers involve being sleepy and tired all the time, frustration, and easy to irritate. No one can work and produce quality materials in that state! That’s why rest days are made.

2. Procrastination

“Deadline is moved to next week, more time to procrastinate!” The nearer the deadline is, the bigger the feeling of being unproductive. Feeling unproductive can do two things: first is it can make you start now or make you even more unmotivated to work.

3. Boredom

Image by: leila haj-hassan

This happens to everyone, especially people who work at home. Believe me when I say that most freelancers experience boredom several times a week, even while in the middle of work! This is normal, even the most introvert would experience this while working inside a room, alone, for long hours.

4. Unhappiness

You are good at it but you don’t like it. There is such a thing. I’m a good liar but I don’t like lying. Most freelancers love what they are doing, you are reading this because you want something out of this. But there are instances when no matter how grand a passion you have for your work, clients would easily ruin your day. A way to combat it? Realize that you are not alone in your struggle with your clients. Laugh and share your experiences at Clients From Hell.

5. Unrealistic Milestones

Setting goals to achieve for both short-term and long-term is a good way to motivate you in your work. There may be an air of great challenge to be a millionaire at the age of 23, but is it possible if I’m just a few months away from that age and I’ve just started earning money? No way, that would be too optimistic to the point of foolishness (Albus Dumbledore). The product of unrealistic milestones? You won’t get things working the way you planned because you will always be rushing to beat the deadline.

A good example (and incidentally a terrible warning for all) of this is when I was still studying at a university. One of our professors gave us a project on the first week of the term, which will be passed by its end. Most of us thought that it can easily be done in just a week (it seemed like it) so we did what we wanted except start on the project. A week before the deadline most of us were confident in finishing. Nobody succeeded, and the project was extended for another term. A combination of procrastination and setting of unrealistic milestone resulted to loss of enthusiasm, people started talking about dropping the course. *laughs*

Tips to Regain Enthusiasm

Image by: Asif Akbar

Learn how to avoid feeling despair during Sunday evenings while knowing that next day is another day for work.

1. Say Hello to the Sun

When was the last time you saw the park? Being a slave to work doesn’t help. Go outside and greet the sun, feel the fresh air, say hello to neighbors, or buy an ice cream. Encourage yourself to have an active social life, escape work from time to time! Do not always be too strict about work, slack off sometimes to know the feeling!

2. Know Where to Go Next

Having a solid map of the things you need to do before advancing will help you avoid getting lost. Clarify the things that needs to be done to get from point X to point Z, knowing this will potentially remove distractions and things that are not really necessary for your work.

3. Talk to People

Image by: sadkeanu.tumblr.com

Knowing that you are not alone in losing your mojo for work will instantly give you a recharge, how? Humans are built to share their feelings to other people. The more you share about the bad feelings(and the good things) the better it becomes for you. People can empathize, and knowing just that is good. This might sound odd but try motivating each other, it works too.

4. Find Inspiration

It’s a given, you are too uninspired to maintain enthusiasm for your work. A change of pace is needed! Do not quit just yet, I wrote an article about Finding Inspiration, you can use the tips to renew your energy and get motivated in the work you do once again. No matter how down you are now about your work, remember the saying “The darkest hour of the night came just before the dawn.”

5. Treat Yourself

Image by: Gabriel Bulla

Go to the spa, get a massage, buy yourself a pet, indulge yourself with your favorite foods, go to the movies. No one is too old to do this, in fact everyone should be kind to themselves. Believe me when I say that most hardworking people do not really want to work, all people want to do is enjoy their lives outside their cubicle or room and play!

And lastly…

6. Share Your Techniques!

Let us know if you have any additional tips to Maintain Enthusiasm For Work

P.S You can check the online Demo here.

Forms

First things first – To create a form in our HTML document, we will need to select the location we will be placing the form. Generally, most forms will start with:

<form>

and end with the closing tag of:

</form>

The form action will tell this form what to look for when the submit button is pressed. In this example we will be working with below, this is a second file that we will be creating called mail.php

The beginning line of our code that begins our form shows our action of mail.php – and the method of POST – which will trigger the php script to send the email when the forms is filled out, and the submit button is pressed.

Action and Method of mail.php

<form action="mail.php" method="POST">

The last thing we will need to understand before starting our form is the use of INPUT – which will tell browsers to allow an input of text type, to complete a field. Using this along with textarea will allow us to create our form and create a space for users to input information that we will later use PHP to send via email. Each one of these areas we create on our form will be given a NAME that we will also be using on our PHP document to mark the information being sent.

Taking a Look at It

Now let’s begin our example. We will create a very simple starting point that I will show you how to modify for your own needs. Understanding the code and how it works will help you use it better and help ensure you have less problems when placing this on a live website.

I will start with a very basic contact form to get us started. Here is the basic HTML that we will use to create our form.

HTML Form Code

<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>

Using the code above – You can insert this directly into your html document to create the form itself. Later we will look at modifying this more and creating something a little more custom.

Now for the PHP

Now, to make our form work, we will need to use a little php. This part is actually easier than most people think. We will be using the PHP $_POST funtion, and creating labels for each name that we have created in our form. This will allow us to further customize the form later on as well.

Now we will create our mail.php file – This is what will generate the email from the form and actually mail it:

mail.php

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>
 

Notice our three name tags we have created. We have Name, Email, and Message. These are the three that we created in our form. This is the information that will be sent from our contact form via email.

The $recipient area will need to be modified to fit YOUR email address where you wish to have the email sent to. You can also modify the other information as needed such as the subject, and success message. We will get more into these later when we begin customizing the form even more.

Customizing More

Now since we have the basic idea of the html form, and tieing it together with our PHP to create a basic contact form, I will begin to go a step further and now show how you can customize this form even more to fit your needs for your project. I will show how to add a dropdown option box, and explain adding checkboxes or radio buttons for selection items to be chosen, and emailed from the form.

Adding Dropdown Option Boxes

To add a dropdown box we will need to add the section within our HTML code to create the area for the form, as well as add the proper code to our PHP to recognize the input from the HTML, and be able to send it.

Here is a simple example HTML dropdown box:

<p>Dropdown Box</p>
<select name="dropdown" size="1">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<br />

In the example above, we have created a dropdown box with options 1 through 4. The option value will be what is actually submitted, and the Text within the will be what the user actually sees when making a selection. Remember that this will need to be inserted into your html document within the form fields.

Here is an example of the completed HTML form we have created with the dropdown box included:

HTML Form with Dropdown Box

<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Phone</p> <input type="text" name="phone">

<p>Dropdown Box</p>
<select name="dropdown" size="1">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<br />

<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>

Now we will need to change our PHP to make sure the information from the HTML form is rendered and submitted to the provided email address.

Let’s take a look at our modified PHP that will now have the dropdown box readable.

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$dropdown = $POST['dropdown'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

Notice that we have added “dropdown” as a $_POST variable that will now be sent. The dropdown name itself comes from the html portion that is labeled as

The size option lets you select how many rows will be viewable at one time. The most general setting for this is “1″ but you can change it to more if you would like.

Adding Radio Buttons and Checkboxes

TO add Radio Buttons and Checkboxes the same will apply as the above. We will need to add it within our HTML code, and then modify the PHP to take the input from the HTML form and properly send it.

Here is an example of the HTML code for adding Checkboxes:

<p>Request Phone Call:</p>
Yes:<input type="checkbox" value="Yes" name="call"><br />
No:<input type="checkbox" value="No" name="call"><br />

Full Example Using All Elements

For this example I have changed some of the names to we can create a custom contact form for our completed example now that we have a basic understanding of the way it works.

Our HTML Form

<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Phone</p> <input type="text" name="phone">

<p>Request Phone Call:</p>
Yes:<input type="checkbox" value="Yes" name="call"><br />
No:<input type="checkbox" value="No" name="call"><br />

<p>Website</p> <input type="text" name="website">

<p>Priority</p>
<select name="priority" size="1">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Emergency">Emergency</option>
</select>
<br />

<p>Type</p>
<select name="type" size="1">
<option value="update">Website Update</option>
<option value="change">Information Change</option>
<option value="addition">Information Addition</option>
<option value="new">New Products</option>
</select>
<br />

<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>

And again, our PHP that will correspond with this HTML form to make it work:

Our completed PHP

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$call = $_POST['call'];
$website = $_POST['website'];
$priority = $_POST['priority'];
$type = $_POST['type'];
$message = $_POST['message'];
$formcontent=" From: $name \n Phone: $phone \n Call Back: $call \n Website: $website \n Priority: $priority \n Type: $type \n Message: $message";
$recipient = "youremail@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

Customizing the Thank you Message on Form Success

Now for the final part of this tutorial I will explain how to customize the very last line of our PHP script we have created. The basic way will just echo “Thank You” on our screen, but we need to make a better way so our viewers can easily have a way to get back to another page. This will be useful in creating a custom page redirect, or a link to bring the user to a different area after completing the form. Remember that when working with PHP, some of the HTML will be different as to not disrupt our PHP code.

We will need to use single quotes ‘ instead of double quotes ” within this one, so we don’t end our php arg.

We will be adding a space after the “thank you” message, and adding a link back to our “form.html” document (Or whatever link you wish to create) – and also changing the color of the link using inline styles.

Let’s take a look at the modified echo command in our mail.php file:

echo "Thank You!" . " -" . "<a href='form.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";

You can play around with the example above to create your own thank you message for your site. Inline styles are not required, I just used them for this example instead of including a stylesheet. Remember that the echo command is only seen on a successful send of the message. Otherwise, the error message is sent.

Download The Files

I am providing the download for the completed form for you to play with. Feel free to use it any way you wish, and customize it for your own projects. There are still many other things that can be done with PHP for your contact forms. One that you might want to consider is CAPTCHA, which prevents spam email. You can also customize the other portions of the form and create your own! Have fun, and I hope that everyone has enjoyed the article and finds it useful for their own needs. You can download the example files by clicking [HERE]

Note: I have included a few styling examples using CSS in the demo download. This will allow you to see the forms styled and understand how to style them using CSS.

But how do you find a quality freelance designer who knows his, or her, stuff and won’t screw you over? Read on to find out how to get top class designers begging you for work, how to qualify them all, how to weed out the bad, how to finally choose one and how to handle payments properly and safely.

Before you begin

This isn’t a course on project management, but there are a few things you have to know before you can even start looking for a designer.

1) A high-class (aka: a good designer you can trust) will not even look at poorly written job proposal. It simply isn’t worth their time.

Think about it: if the designer is already a successful freelancer, then they know what to look for and they know which jobs will pay. Therefore, they know to look for quality written job proposals because then they know exactly what the client wants. And when the client knows what they want, it makes the designers job a lot easier. Which brings us to the second point.

2) Make sure you have a complete project description.

This doesn’t mean post the whole project idea and description up on the web for the whole world to see, but make sure you have the completed idea somewhere in your notes.

You have to know everything that needs to be done and in the way you want it to be done. If you have examples of the style you want used, make sure you keep links or copies of them that you can give to the designer. Once you have picked the designer, then it’s time to give them the full details, not before.

3) No great designer will work for pennies, unless you make it really interesting…

If you’re outsourcing that means you are trying to save (and thus earn more) money, but asking top rated designers to work for cheap just isn’t going to happen. BUT, if you make it very interesting and very creative they just might be willing to do it. This highly depends on the project and the mood of the designers, but once in a full moon you will be able to snag a great deal.

For the most part though, top rated designers do come with a hefty price tag. What is very interesting though is that if you don’t require the creme of the crop designer, you can still get professional and high quality designers for a good low price. You just have to shop around.

4) Don’t forget to shop around.

There is no one best place to find a designer. In this dime-a-dozen economy they can be found in all the usual places and even the most unusual places. Look at the designer job boards, freelance sites and even on designers private website. Ask anyone worth asking because you never know who will get back to you with a positive response.

Where to find designers

Designers are everywhere, you just have to know where to look. Here is a quick list of just some of the places you can find great freelancers.

Get A Freelancer (GAF)

GAF is one of the most well-known freelance site for both employers and freelancers. It features many categories of which one will most likely fit your needs. There are plenty of freelancers looking for work there. You can also post job with your requirements (more on this later). This is definitely one place you should look.

Freelance Switch

This blog based design website is a premiere site for designers and the like. With fresh content each week, many designers visit and sign up through this site. You are bound to find not only many designers here, but also very knowledgeable and friendly designers. This site is more community based than job board based.

Digital Point Forums

The Digital Point forums are a great learning resource, but they are likewise a great place to find freelancers. Under the Business section there is the “Buy, Sell or Trade” forum. There you can post your job and find many other DP users who can do the job for you, or at least point you in the right direction. This is a rather friendly forum and fun to hang out at, so be sure have a presence there before posting in the job board.

Creating A Quality Job Post That Will Gather Attention

You do not need to be a marketing expert to create a job post but you do need to create an attractive and descriptive title and description.

A title such as “I need a designer” is not good. You need to be more concise so that you can attract the right type of designer and not just bottom feeders. You title should be reasonably descriptive. Something like “Logo design needed for Design niche website” is significantly more descriptive and will garner more attention. Try to mention what specific item(s) you need and for what niche at a minimum. Also try not to make the title too long. 7-12 words max.

The job description should include what items you want them to do, such as a logo, banner,  or site design. It should also include your style requirements and any examples you want to show them. It’s also a good idea to state the time frame.

Let’s review, a good title will:

• Be short, but descriptive.
• State the item or items needed to be made
• List the Niche or topic
• If it’s a fast or small job, state so (ie: “quick job”).

A good project description will:

• Restate what needs to be designed.
• Give a time frame
• List your design requirements:
  • Color
  • Size
  • Style
  • ect…
• List of example work to explain some style points if need be
• List the budget (more on this below).
• State payment process (if need be, also more on this later)

But there is one more extremely important part which will significantly increase the quality of freelancer you can choose from and ease your vetting!

Pre-Vetting Designers

One step which most people never do and regret later, unless they get lucky, is to pre-vet people who respond to them. What is ‘vetting’? It’s the process of weeding out the bad and leaving the good! Pre-vetting is simply for doing this process before the actual selection process.

This is done in a very simple way on your job posts. At the bottom of your job post, you give the respondents a simple task to complete. This is not something such as making a mock-up design, it’s something very simple and really a no-brainer assignment. It’s a task that even a monkey could do!

Here is a short list of task you can pick from:

• “Respond to this job post with ‘I understand all the requirements!’ for me to consider you. Failure to do so will mean you will not be considered”
• “To make sure that you understand the requirements please Respond to this message/Private message me/E-mail me/Contact me with the message ‘I read all the requirements and understand it all’. If you do not I will not consider you for the job.”
• “To be considered for this job, please answer this preliminary question first: Is a hot fire hot or cold?”

See? You ask them to do something very simple. If they are unable to complete this extremely simple task or answer the question then they probably don’t have the brains to follow any of your other instructions.

Interviewing Potential Designers

After your job has been posted for a few days you will have several replies. From the people who replied, select the ones who replied correctly. Out of those who replied correctly, it’s time to sit down and interview them.

You do not have to do a full-blown job style interview, but there are several things you will want to know about them. You will also not want to interview them all.

Some job board websites have bidding and user ratings for each job and designer. If a designer bid above your budget, then it’s probably safe to ignore them. Try to follow these tips when picking final interview candidates:

• Does the user have a good rating? Yes? Good!
• Ignore users with no previous jobs done, zero rating(s) or a negative rating/feedback.
• Do not pick designers to bid above your budget. Though you can try to talk to them and negotiate a lower price.
• Talk to the highest rated users first.
• Don’t care if they don’t speak (or type) English (or your language) perfectly. This is design, not highschool English class.

When you are talking to the candidates, there are several very important things to ask for which will ensure that they are good for you and your project. You should ask:

• Have they done this type of project before?
• When (ie: how fast) can they complete the project?
• Do they have a portfolio to show you of their previous work?
• Do they have references?

The most important aspect is can you work with them. Do they fit you and the project? What’s the point of getting a great designer if you can’t stand them?

Weigh all the attributes and pick one that works for you. Don’t forget, pick one that has proof of past history of quality. And don’t be afraid to call their references!

How to handle payment

Usually the designer will be paid full price at after the project is complete. This is the norm for project such as logo designs, banners, ads, and (smaller) web page design. If you order through a private or company website, then you might have to pay upfront.

If you use a site like GAF or Freelance Swtich then payment will most likely be through Paypal. Most designers have their own Paypal account, so if you don’t have one make sure you create and verify one before you post to job boards.

For any small job, like the banner or page design, it’s ok to pay the designer after the project is complete. But if you have a larger scale project, the most secure way to establish payment is with milestone payments and through an escrow account.

An escrow account will hold your money for you, and is guaranteed for the designer at certain intervals and after approval from you. They are many places to create escrow accounts and each place will act as the 3rd party intermediary should any problems arise.

After project completion

Once you have sent the payment for the project, be sure to give a small tip. It’s not required but is a good gesture if the designer did a very good job and in a very quickly. This also creates loyalty. The designer is significantly more likely to work for you more often in the future if you treat them well.

If you are satisfied with their work, be sure to keep their name on file for future work or to reference them to others. If you send work to them, they are also very likely to recommend you (and your products) to their friends and clients.

Don’t be afraid to ask your own questions to the designers or to even ask for recommends of other designers for other tasks (if your current designers isn’t an expert at a certain task). Be friendly and they will surely do an extremely good job for you now and in the future.

Note: This tutorial uses some advanced css3 techniques which are not yet supported in Firefox. To get the full version, you should see the live demo in a web-kit engine for example Safari and Chrome. You can download the source code here. The final demo can also be seen here.

Step 1: Analyzing the Goal

A slide out panel can be used for various ways. Its uses depend on the requirement of the site. One may use it for a slide out login box or for just listing the subscribing options for the site. We are going to assume a scenario where we want a subscribe option for the viewers on the top right hand corner of the screen:

Now once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor.

Step 2: Creating the xHTML skeleton

Now that we know what we want to achieve, lets plan out how the xHTML architecture of the whole layout is going to be. We would basically need two parts of the layout. One part will be the top one, which will be our hidden panel and will contain the subscribing options. The second part will be the main content area for the whole layout. This area will contain everything which will be visible to the viewer. Here is how our code for the website layout is going to be:

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="slide-out">
		<div id="subscribe" class="page-wrap">
			<ul>

	<li><a class="<span class=">rss</a></li>
<a class="<span class=">" href="#">RSS</a>
				<li ><a class="fb" href="#">Facebook</a></li>
				<li><a class="twitter" href="#">Twitter</a></li>
				<li><a class="mail" href="#">Mail</a></li>
			</ul>
			<div class="clear"></div>
			<a href="#" class="button">Subscribe!</a>
		</div>
	</div>
	<div id="main-container">
		<div  class="page-wrap">
			<h1>CSS3 : The Future is Near!
			<h3>Hover over the subscribe button to see the cool slide effect created by using CSS3 purely.<small>Best viewed on Chrome and Safari</small>
Integer eu nunc in eros lobortis blandit. Suspendisse potenti.
Nunc porta tellus nec velit vehicula sodales. Aliquam vel grav
		</div>
	</div>
</body>
</html>

The body is divided into two parts, the slide-out and the
main-container. The slide out division contains the subscribe links along with the subscribe hyperlink button. Note that we have given a class of button to the subscribe hyperlink. The main container contains all the sites main text and information. Both the slide-out division and the main container division are assigned a
page wrap class to keep them aligned centered in the screen.

Step 3: Styling the basic layout

The style-sheet just contains some simple styling of the page. As explained above, there will be one slide-out division, one main container and one page-wrap class. These forms the basic styling elements of our page which give it the look we want.

The CSS for styling the basic layout of the page is as follows:

@import url('reset.css');
body{
	color: #484848;
	background-color: #f7f7f7;
}
.clear {
	clear: both;
}
h1{
	font-size: 58px;
	margin-bottom: 25px;
	height: 68px;
}
h3{
	font-size: 22px;
	margin-bottom: 25px;
}
p{
	text-align: left;
	margin-bottom: 20px;
}
#slide-out {
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative ;
	padding-top: 25px;
}
.page-wrap {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 635px;
}
#main-container{
	border-top:thick solid #484848;
	padding-top: 60px;
	text-align: center;
}
.button{
	background-image:url("../images/button.png");
	color:#FFFFFF;
	display:block;
	font-size:18px;
	height:28px;
	padding-top:5px;
	text-align:center;
	text-decoration:none;
	width:105px;
}
#subscribe ul li a{
	background-repeat:no-repeat;
	display:block;
	float:left;
	font-size:24px;
	height:38px;
	margin: 0px 20px;
	padding: 10px 0px 0px 55px;
	color: #d3d3d3;
	text-decoration: none;
	line-height: normal;
}
#subscribe ul li a:hover{
	color: #fff;
}
.rss{
	background-image: url('../images/rss.png');
}
.fb{
	background-image: url('../images/facebook.png');
}
.twitter{
	background-image: url('../images/twitter.png');
}
.mail{
	background-image: url('../images/mail-rss.png');
	margin: 0px;
}

After we have applied the basic styling to our page, it would look somewhat like this

Now that the basic styling of the page is done, we have to set the stage for the panel to hide and show. To achieve that, the first thing we need to do is get the subscribe hyperlink to the bottom right corner of the slide-out division such that it is just peeping out of it. To do this, we have to manipulate the button class in the style-sheet a bit. We are going to make its positioning absolute and then give its right attribute a value of 0px. This will push the subscribe button to the right of the division as shown in the image below.

Now we have to just push it down such that it sticks to the foot of the slide-out division. To do that we just have to assign a
negative 63px value to the bottom attribute.

Now that our subscribe button is at its proper place, all we have to do is push the slide-out div out of the screen. To do this, all we have to do is assign a negative margin equivalent to the height of the slide-out div. To prevent the step down bug in IE6, we also have to assign a line-height value of 0 px to the container of our subscribe links i.e. the subscribe box. To negate the 0 line height on the hyperlink elements, we have to assign a normal line height to them too. After modifying our button class, the slide-out id, the subscribe link elements and the subscribe id styles, they will now look like this:

#slide-out {
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative ;
	padding-top: 25px;
	margin-top: -98px;
}
#subscribe{
	line-height: 0px;
}
.button{
	background-image:url("../images/button.png");
	bottom:-63px;
	color:#FFFFFF;
	display:block;
	font-size:18px;
	height:28px;
	padding-top:5px;
	position:absolute;
	right:0;
	text-align:center;
	text-decoration:none;
	width:105px;
	z-index:100;
	line-height: normal;
}
#subscribe ul li a{
	background-repeat:no-repeat;
	display:block;
	float:left;
	font-size:24px;
	height:38px;
	margin: 0px 20px;
	padding: 10px 0px 0px 55px;
	color: #d3d3d3;
	text-decoration: none;
	line-height: normal;
}

We all hate Internet Explorer 6 a lot because we always have to add some extra code especially for it. In this case also we would have to do the same. To make the layout look the same as in the other browsers, we have to add some IE6 specific styling at the top of our html page, in the head section.

<!--[if IE]>
<style>
#slide-out {
	padding-top: 10px;
}
.button{
	bottom:-64px;
}
#subscribe ul li a{
	margin: 0px 15px;
	padding: 10px 0px 0px 55px;
}
#slide-out{
	margin-top: -83px;
}
</style>
<!--[<span class="hiddenSpellError" pre="">endif</span>]-->

Now that the slide-out panel is hidden, our task is to enable the hover event on the subscribe button such that the slide-out div reveals itself from the top of the page. You might ask why we have put the subscribe link in the slide-out panel and pushed it outside into the main container, rather than placing it in the main container itself.

The reason behind it is that, we have assigned a negative margin to the slide-out div and pushed it out of the screen. To make it visible again, we have allotted a hover event on it which makes it margin back to 0. As the slide-out div is out of the screen, so it is a difficult process to hover over it. Now because the subscribe hyperlink is actually inside the slide-out div, hence hovering over the subscribe link also acts as a hover event of the slide-out dive making its top-margin 0 and revealing it.

We can imagine the slide-out div to be a person who is hiding and just his hand is visible to us. When we touch the hand, the person comes out. The hover event which will make the slide-out div pop out of the top of the browser on hovering over the subscribe button will be as follows

#slide-out:hover{
	margin-top: 0px;
}

Step 4: The CSS3 Factor!

We are almost at the end of our tutorial. The hover event is set. The slide-out div reveals itself when we hover over the subscribe button. But the whole process happens without any animation effect. The only thing required now is to spice up the whole thing with a pinch of CSS3.Using the transition property in CSS3 we will make the effect as a smooth animation rather than the abrupt effect it has right now. We will give the transition property in the slide-out id style as we are changing its styling on hover. After modifying the slide-out id style, it will look like this:

#slide-out {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative;
	padding-top: 25px;
	margin-top: -98px;
}

You can change the animation speed by changing the transition speed which is set to 1s at present. This completes our task of enabling a smooth slide out panel from the top of our page without using any javascript.

The Drawbacks

The main drawback of this method at present is that CSS3 transition effect is only supported by webkit browsers like Google’s Chrome, Apple’s Safari and Opera. Even though the slide-out panel on hover would work on other browsers like Firefox and Internet Explorer, but the animation wont work in them. The other drawback is that it wont work on Internet Explorer 6.0 because it doesn’t support the CSS hover event. But there is obviously a solution for this.

Conclusion

This trick just displays how we can use CSS3 to replace some of the major effects provided by JavaScript libraries like jQuery and MooTools. I believe that with time, these basic transition effects will be replaced with CSS3 transition only. It makes the rendering faster and the load time also decreases as the JavaScript libraries plug-ins are not required. There are many ways of creating a slide out panel and JavaScript libraries really take this to a very high level and provide more functionality than just animation effect. There are many tutorials out there which guide you to create a slide out panel like that using jQuery and CSS together. For further reading related to slide out panels using JavaScript, you can refer to these awesome tutorials

• Build a top panel with jquery
• Simple slide panel
• Create a Slide-in Panel with jQuery
• How to create a sexy vertical sliding panel using jquery and CSS3
• Nice clean sliding login panel built with jquery

Make a budget

Picture by Linusb4

Making a budget is crucial. You have to have plans and goals financially no matter what you do. This is sometimes underestimated, but you have to make one if you really want to succeed. With a budget you can see if you are on track or not, what you need to change, where you have big costs and so on. It’s a great way of keeping an overview of your business. Anyone can make a budget, it doesn’t take a degree in economy. All you need is to get an overview of all the money that come in and go out and put them into system.

Track your time

Picture by Nathan Sudds

To be able to make a living from freelancing you need to track the time spent on each project. If you bill too few hours, you won’t be able to earn enough to keep going. If you bill too much, well – then you can most likely say goodbye to your clients. Getting a time management application for this can be a very good idea, unless you are into doing it old-school with a pen and paper. Just pick whichever system that works for you, and make sure to also include time spent on research and other preparations for specific projects.

Set your hourly rates properly

Picture by Ivan Prole

Many sell their services too cheap trying to get into the market. This usually will lead you to failure within short time. To be able to set your hourly rates how they have to be, you must have a full overview of what everything costs for you and divide it into hours. Then you will be able to see what you have to make to get even. After this you will have to make a decision on how much you should have left. In many countries there are set average tables for what freelancers usually get paid in different niches, so you may want to check that out as well. To save you some of that work, check out the hourly rate calculator over at Freelanceswitch. CLICK HERE to visit it.

Make offers that are easy to understand

Picture by Rose Ann

When a client is getting an offer you should take some extra time while calculating it. Make sure to include everything and make your own copy of the offer to keep – with explanations to how you’ve calculated it. This way it can be easily altered if the clients wants something else included or if you need to have a look at it yourself afterwards. This way you do a very important part of the job beforehand. This will also help you when you are going to send out the bills.

Make offers that can be altered

Picture by Jakub Krechowicz

Make sure to include in your offers (at least the bigger time-consuming ones) that the price can be changed by up to a certain percent due to market changes or unexpected costs. The usual percentage to use seems to be around 10%. This way you will cover some extra work in case it turns out that something is a bit more time-consuming than you thought at first.

Bill your clients regularly

Picture by Shaun W

To not lose track of how much clients owe you, you have to get set routines for billing. If possible you should have a specific date monthly to send out the bills, or have a routine of sending them out due to the agreement with your client. This way you will have a good sense of how much you have coming in and make sure it doesn’t take too long before you get paid. And while you’re at it – make a routine for how to send reminders to those who haven’t paid in time.

Invest in your business

Picture by Thiago Miqueias

A certain amount of what comes in should be spent on your business. This can be upgrading software or your own knowledge by taking a class or buying books/magazines. For most freelancers it’s very important to stay updated on the latest technology and what goes on in the market. Because of this you should have a post in your savings that is marked for that purpose.

Marketing

Picture by Will Thomas

Another thing you would want to spend some money on is the marketing of your business. This can be done be either by investing of your time to do certain things for yourself and/or paying someone else to do it. It can be the redesign of your website and portfolio or a simple thing as buying an ad through an advertisement system. With all the competition in the market it’s very unlikely that your products will sell themselves from day one.

Save

Picture by Sanja Gjenero

I repeat this a lot in many of my articles, and it can’t be mentioned too many times. You have to put a savings post into your budget. No matter how well you earn – it won’t help you much in critical moments if you’ve spent everything. You will run into situations when you need to repair equipment or buy something new. You may also experience that a client doesn’t pay when he’s supposed to – or that a project takes more time than expected. Because of this, that buffer of savings can be very valuable.

Shop smart

Picture by Yaroslav B

When it comes to office supplies, coffee, equipment + + , shopping smart can make a huge difference in your budget. Don’t get the cheapest of everything if it takes away quality. But there’s often someone selling that exact keyboard you’re getting a little bit cheaper, a cheaper insurance company and so on. What may seem like a tiny dollar here and there can quickly turn into hundreds and even thousands of dollars over a whole year.  You should also think through it before going out to eat every day. Buying something in bigger quantities can help a lot.

Insurance

Picture by Piotr Dorabiala

Make sure you have insured yourself, along with your equipment. This monthly/yearly fee can seem “unneccessary” if nothing happens, but when that moment comes when you need it – you will see that this is an investment in the safety of your future. Check out different insurance companies, listen to the advice you get and get offers from different ones before you decide. Thinking that nothing bad ever will happen to you is an unrealistic thought that can cost you a lot of money and maybe your business if not taken seriously.

Be prepared to adjust

Picture by Colin Brough

If you have a budget with set plans for the next months or year, there is always the chance that something will not go as expected. The good thing is that you have a budget that you can monitor occasionally to see the signs early on. Because of this you should aim to have the ability to adjust on short notice. Be prepared to work extra hours in some periods to make ends meet, and be prepared to put in extra hours during the end of deadlines.

We hope these tips were useful to you. Remember that there can be variations from country to country when it comes to laws and regulations. Still most of these tips should apply to most freelance workers out there and hopefully be helpful advice on your road to success!

Thank you for reading this article, we would highly appreciate your comments. Don’t forget to share this article if you found it to be an interesting read!