Are you working as a freelancer? Do you constantly feel the pressure and stress of running your own business? In this article we’ll have a look at how this stress can be made easier to handle for you by following a few simple tips. You probably know a few of these from before, but are you able to remember them when it counts?

A certain amount of stress is healthy to keep you focus, but being able to keep the right balance can be really hard sometimes. This can result in anything from ulcers to insomnia, eating problems, restlessness, relationship problems and depression. Stress can also cause you to do your work at a lower quality and even have you work slower, ironically.

Picture by Muriel Miralles de Sawicki

For most people, the symptoms don’t have to be huge or dramatic, but it all starts with small tendencies and it’s important to try minimize the stress to not end up in a bad situation. The fact is that most people are more stressed than what they wish they were and often their work is the reason.

Now let’s have a look at some tips for how you can get less stress and more time to do your job properly.

Don’t take on more than you can handle

Picture by Marco Michelini

This tip is in my opinion the most important one. A lot of freelancers want to have the time to do as much as possible, to earn a lot of money and step forward in various ways. As much as you need to get things done to make a living, you have to make sure you only take on the projects you’re actually able to successfully do without putting your own health at risk. If you’re able to keep a good schedule and only say yes to the projects you’re able to do within the work hours you’ve set, you will feel less stressed every single day.

Have a schedule and keep it updated

Picture by Maxime Perron Caissy

To be able to make the best of the first point we’ve mentioned, you need to find a way to keep a schedule. For some people it works best to buy a simple book and write everything down by hand, while most of us prefer to use calendars in our computers and cellphones. The biggest mistake you can do is not having a schedule. You should look through it daily and remember to add new meetings or projects that have been added. This can help you in reaching deadlines and generally get days with less stress.

Use proper equipment

Picture by Dmitri Popov

It may not be the first thing that comes to mind, but having a computer and software that works will definitely have you stress less. Make sure that you are updated with the latest software updates and that everything works as it should. And of course you must have a good backup routine in case something happens. The last thing you want to happen is to have software that messes up your work, a computer that runs slowly and so on. Once you’ve taken the time and money needed, you will see that you are a lot more effective and feel less stress.

Realize you’re not perfect and admit it!

Picture by Bob Smith

A lot of stress can be because we’re trying to be someone we’re not or trying to do things we’re insecure doing. By making sure you say yes to only projects that you have the right expertise for, you will eliminate a huge source of stress. If clients want you to do parts of a project that you know are beyond your expertise and you’re afraid to lose them because of this, you could instead try to find another freelancer that can work with you.

Always have a plan B

Picture by Nate Brelsford

Many times you’ll realize that stress can be caused by last-minute changes due to a plan failing. No matter how good you are at planning, you will sometimes be in need of a plan B. By having thought through how to solve different situations that occur, you will not have to think of all possible scenarios or feel very stressed. Your plan B can be working with others, having some spare time that you save for these scenarios and so on.

Solve conflicts

Picture by Sebastian Danon

If you have anything unsolved or feel insecure regarding any client relationships, this can cause a huge amount of stress. Take the time needed to talk with your client and do what needs to be done to solve it. You will feel a lot better after and not have to spend a lot of energy worrying.

Tidy finances

Picture by Ivan Prole

Many freelancers worry all day and all night about their finances. How to get enough clients, how to get the bills paid and so on. This stress will always be there at some degree, but it can also be minimized. Keep a budget so that you know at all times how things are looking and how many projects you need to get to have ends meet. Always do work that you’re proud of and get returning clients who help you have a somewhat steady income. And finally, if you have the chance, get a buffer through savings to make sure you can pay the bills and get what you need to survive.

Exercise and sleep

Picture by Iwan Beijes

If you are tired or out of shape, you will be stressed easier and deal with it in a much more unreasonable way. By setting up a schedule that includes exercise and going to bed at a decent time, you will not only feel less stressed but also deal better with the stress that occurs. You don’t have to go run a marathon every month, it can often help with just smaller things like an hour on your bicycle every Sunday, playing with the kids, yoga on set days, tennis with the wife every Wednesday and so on. Use your imagination and you’ll be able to have fun, get fitter and minimize stress.

Learn to ignore what isn’t important

Picture by Scott Liddell

Having the ability to turn off “everything else” to work as well as you can, is a great ability to have. Most of us have to be available to clients through mail and phone, but did you ever think of all the unnecessary distractions you keep falling into daily? You can help yourself to better efficiency by not checking Twitter, Facebook and so on all the time. I personally have set hours for checking emails and Twitter and it works great for me. For a lot of people the distraction coming from “everything else” will cause a lot of unwanted stress. Before you know it, you’ve spent a lot more time on Twitter than you planned to and so on.

Conclusion

Picture by Chris Withers

You may not feel it right now if you’re fairly new to freelancing or if you have a great way of doing things already. But, chances are you’ll have to deal with unhealthy stress at some point. By thinking through this beforehand and making some small changes to how you do things, you’ll be able to keep it at a healthy level. Even if you currently have a high level of stress but deal with it really well, it wont be like that forever. We all get older and your stress level today can lead to problems years down the road.

Think through these things, look at your own routines and try to do the adjustments needed for a long and happy freelance career.

We’d love to hear your comments and own tips as well.

Good luck!

In this article I will go over creating a custom framework to have and use for your own projects. This to me has been one of the best resources to me in creating websites for clients. I found just like everyone else that after doing so many web pages you hit the point of realizing you keep typing the same things over and over. To try and cut down on some of the time it was taking me just to get started on a project I decided to make my own “framework” that I would use as a basic starting point. I have found this to be a great way to carry around my framework with me anywhere I go on my USB memory stick, and to be able to start a project much faster than I normally would have. Since most of my programming is done with just a basic text editor, this has worked out really well for me.

Getting Started

To start with, I am going to take a look at my own needs and see what it appears I need the most. I want to make sure then when creating my own custom HTML & CSS framework, that I include the things I use the most so it will be useful to me in the future. When starting your own I would make a simple list of the most used things you have found yourself doing over and over with each website project.

For this example I will cover the items I found myself needing the most – You can always add or remove items to better fit your own needs when making your own custom HTML and CSS framework:

1. Basic starting DOCTYPE and website head area
2. Link on the HTML document to my .CSS stylesheet
3. A good .CSS reset file
4. A starting point for my project already in place
5. A .PNG fix for older browser versions

A Basic Starting Point

For a basic starting point we will need to know the main items that will be in every website. First will be our DOCTYPE. Although this may change for some people, I know that I mostly use the same one. I got tired of trying to remember it, and it was getting old trying to copy it each time I created a website. This is a must have item within our framework.

Lets begin by creating a new file and naming it index.html – This will be the first start of our framework. Open this file and add your DOCTYPE at the beginning of the document. Since I use the XHTML strict, then I have added the following to my index.html file.

Index.html File

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

Now that we have a start of our index.html – We will continue on it by adding the HEAD section. This will be the area that we contain our meta information and link to your stylesheets in. Since I have used the same items for years, I want to make sure I include them. Adding them and leaving them blank will allow me to reuse the framework as many times as I want, and customize it each time I create a new project, but will prevent me from having to re-type it over and over every time I am creating a new website.

Now we will take a look at the other information we will be adding into our index.html file. This is the HEAD area:

Index.html

 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />  <!--[if lt IE 7.]> <script defer type="text/javascript" src="js/pngfix.js"></script> <![endif]-->  <title></title>  </head> 

Let’s take a look at everything we have added in the above code:

First is our content type, which is a must for proper document retrieval. Next is our description, keywords, and author. After these are our links to our stylesheets we will be creating (Both reset.css and style.css) – Next will be our JavaScript used to fix older browsers with the .PNG file viewing, and then all followed by our Title tag.

Adding these to the framework, and leaving the description, keywords, author and title blank – Will make it very easy to edit each time we make a new website using it.

I am going to add the following to my index.html since it is still a basic start to my every website I create. This will finish up our index.html – This will also create our BODY section of the website framework, and close out our HTML in our document.

Index.html

 <body>  		<div id="wrapper">  		</div> <!-- End #wrapper -->  	</body> </html> 

Notice that I have also added a DIV for starting. This has always been my first created DIV on each website I have created unless I really needed something more specific and custom. For most generic websites this one has been a must, so I am adding it into my framework.

Here is a look at the entire Index.html file completed:

Completed Index.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />  <!--[if lt IE 7.]> <script defer type="text/javascript" src="js/pngfix.js"></script> <![endif]-->  <title></title>  </head> 	<body>  		<div id="wrapper">  		</div> <!-- End #wrapper -->  	</body> </html> 

Next we will take a look at our .CSS files that we will be adding. Since we have already linked to these in our index.html file, we can create them now to be added to our framework. Notice also that I am using a sub-folder called css. This folder will need to be created, and our .css files will need to be added to this folder. This will help us keep files organized in our framework.

First is going to be our main stylesheet which I have named style.css – Let’s take a look at the basic of what will be added to it for styling purposes:

Style.css

 html, body, div, p{   margin: 0;   padding: 0;   border: 0;   }  /* Main Layout */  body{}  #wrapper{}  /* Extras */  .clear{clear:both;} 

Now for the ever so popular Eric Meyer Reset. This will be in it’s own file named reset.css and will also be added to our css folder we have created.

Reset.css

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

Now we will need to create our JavaScript that will fix older browsers and allow them to see .PNG files correctly. I like to use PNG files when possible mainly because of the quality, but I need to keep in mind that some people still use older versions of IE which cannot properly view .PNG files. To fix this, I will make another folder and call it “js” – This folder will hold all of my JavaScript files that I would need to use on any website I am creating, but for now it will hold my pngfix.js file. Create a new file called pngfix.js and we will add the followiing:

pngfix.js

 var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1])  if ((version >= 5.5) && (document.body.filters)) {    for(var i=0; i<document.images.length; i++)    {       var img = document.images[i]       var imgName = img.src.toUpperCase()       if (imgName.substring(imgName.length-3, imgName.length) == "PNG")       {          var imgID = (img.id) ? "id='" + img.id + "' " : ""          var imgClass = (img.className) ? "class='" + img.className + "' " : ""          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "          var imgStyle = "display:inline-block;" + img.style.cssText          if (img.align == "left") imgStyle = "float:left;" + imgStyle          if (img.align == "right") imgStyle = "float:right;" + imgStyle          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle          var strNewHTML = "<span " + imgID + imgClass + imgTitle          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"          img.outerHTML = strNewHTML          i = i-1       }    } } 

This will make IE correctly display our .PNG files. We have already added the script code to our index.html file when we created it that will look for this file. Simple enough right?

Let’s move on! – Now we should have a basic setup of files that we have created that we can use as our framework. There are still a few other things that I have found that save time for me when I am creating a website so I have made sure to add them here. If you have seen my other tutorial on creating a PHP website from scratch, then you will know I frequently convert my HTML websites to PHP. To set up my framework to be readily modified to convert, I have set up my framework with the folders and files I would create when converting my HTML website. I will now add the vars folder, to place my PHP variables, and I will also add my includes folder that will have my PHP include files when and if I choose to convert the HTML to PHP.

Notice that I have also added another blank folder to my framework setup for images. This is the folder I always create and add my website images to for any project that I create. This helps organize my files when making new websites.

Here is a look at what my folder setup looks like with everything complete:

 HTML CSS Framework | |-- index.html |--- js |     |-- pngfix.js |--- images |--- vars |--- includes |--- css |     |-- style.css |     |-- reset.css | 

A quick overview of the files we have created:

index.html – Our main html file for website creation

style.css – reset.css – Contained within our css folder, and used for styling the look of our website

pngfix.js – Our JavaScript file that fixes IE to properly view .PNG files

images folder – For adding our website images we will be using when creating the website using our framework

includes folder – For placing files we would create if converting the HTML website to PHP

vars folder – For adding variables to use with our PHP website if we converted it

PHP Notes for Conversion

For those of you that are like me and would be using this framework to make the website, then convert it to PHP – Here are some quick notes on including the PHP files, and also setting and using variables. This is just a quick reference that you can save and even keep as a txt file within your framework if you want for later use.

 // Including the external PHP within XHTML <?php include('path/filename.php') ?>  // Setting the variable itself $variable="data details";  // Creating the output for the data <?php echo $variable ?> 

Overall Focus

The overall focus of creating your own HTML & CSS framework is really to save time. It helps when having everything together and ready each time you want to start a new project for yourself or a client. Saving time and having some things already in place can also help with organization. Putting attention into these can sometimes help you be more creative and flexible since you would not have to waste time doing the same things over and over again. This can also help you place more attention on detail and prevent you from running your energy out on items not needed. All together this could mean the difference in yourself or a client being happy or not, and also meeting a deadline in time knowing that certain things are already done for you.

Download

If you would like to download the files that I have created within this tutorial to use for yourself in your own projects then feel free to. I have found making a simple framework is a priceless thing to have and has helped me numerous times. I do know that many of you may already have your own framework that you use but I wanted to share mine with you. Feel free to download the example tutorial files by clicking [HERE]

In Closing…

I hope everyone has enjoyed the article, and finds it useful in making your own HTML and CSS Framework. If you have any suggestions or questions then feel free to comment below and let me know. I hope that you also find it useful in your own projects and see the difference in time it takes to begin a new project. I hope it also helps everyone with creativity since you can now focus more energy into more important things such as design, and client specifics instead of starting a project from small snippets or trying to remember DOCTYPE’s – Happy coding! and thank you for reading!