<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dauidus Design &#187; Blog</title>
	<atom:link href="http://www.dauidusdesign.com/tag/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.dauidusdesign.com</link>
	<description>Web design, graphic design and professional photography from Dave Winter</description>
	<lastBuildDate>Wed, 30 Jan 2013 19:09:18 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>Using WordPress as a Simple Client Management Solution</title>
		<link>http://www.dauidusdesign.com/using-wordpress-as-a-simple-client-management-solution/</link>
		<comments>http://www.dauidusdesign.com/using-wordpress-as-a-simple-client-management-solution/#comments</comments>
		<pubDate>Thu, 07 Oct 2010 01:57:44 +0000</pubDate>
		<dc:creator>Dave Winter</dc:creator>
				<category><![CDATA[Client Management]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[WordPress Plugin]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Freelancers]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.dauidusdesign.com/?p=802</guid>
		<description><![CDATA[So, you're looking to give your clients a secure way to access a client page (or group of pages) on your Wordpress powered site.  There's just one problem... there isn't a Wordpress plugin that can do it for you with out-of-the-box functionality that we've grown accustomed to.  But before you give up on client management (or Wordpress) altogether, let me assure you, it can be done.  So, if you're up for learning a new trick with some old programming knowledge and a little elbow grease, let's get started...]]></description>
				<content:encoded><![CDATA[<p><img class="blogtop" title="WordPress" src="http://www.dauidusdesign.com/wp-content/uploads/2010/08/login11.jpg" title="Using WordPress as a Simple Client Management Solution" alt="WordPress Client Management Made Easy" width="200" height="200" /></p>
<p>S<em>o, you&#8217;re looking to give your clients a secure way to access a client page (or group of pages) on your WordPress powered site.  There&#8217;s just one problem&#8230; there isn&#8217;t a simple WordPress plugin that can do it for you with the out-of-the-box functionality we&#8217;ve grown accustomed to.  But before you give up on client management (or WordPress) altogether, let me assure you, it can be done.  So, if you&#8217;re up for learning a new trick with some old programming knowledge and a little elbow grease, let&#8217;s get started.</p>
<p style="text-align: left;">Before we begin, have a look at this <a href="http://old.dauidusdesign.com/wp-login.php" >example client login page</a> from my old site to get an idea of our goal.<br />
Username:demo Password:client</p>
<p style="text-align: left;">This setup has been tested up to WP 3.1.2</p>
<p></em></p>
<h4 style="color: #0099cc;" >First Things First: The Plugins</h4>
<p style="text-align: left;">
<a href="http://www.im-web-gefunden.de/wordpress-plugins/role-manager/" >Role Manager</a><br />
This plugin is not directly available on WordPress.org, but makes for much less of a headache throughout the next steps.  To set it up correctly, go to users &#8211;> roles and add a new role named &#8216;client&#8217;.  Make sure to only enable the &#8216;read&#8217; function (otherwise, your clients may be able to access your dashboard or other administrative pages and change the content of your site.
</p>
<p style="text-align: left;">
<a href="http://wordpress.org/extend/plugins/iwg-hide-dashboard/" >IWG Hide Dashboard</a><br />
The main purpose of this plugin is to keep non-admin users out of admin only areas of your WordPress installation.  To enable this function, simply make sure the &#8216;hide dashboard&#8217; option is checked for the &#8216;client&#8217; role we created in the last step.
</p>
<p style="text-align: left;">
<a href="http://wordpress.org/extend/plugins/peters-login-redirect/" >Peter&#8217;s Login Redirect</a><br />
Really, this plugin is what makes simple client management possible.  It allows you to easily direct a logged in user to a specific page on your site that will serve as their customized client page.  It does this by checking the user&#8217;s role (that it integrates with the previous plugins) and sending the user to a pre-defined URL.
</p>
<h4 style="color: #0099cc;" >The Code</h4>
<p style="text-align: left;">There.  That wasn&#8217;t so bad, was it?  Well, we still have a ways to go&#8211; and it involves modifying some code.  Don&#8217;t worry, though.  I&#8217;ll try to make it as straight forward and painless as possible.</p>
<p style="text-align: left;">First, we have to add a login/logout form somewhere on our page.  Mine is located in the drop down menu at the very top of <del datetime="2010-12-12T11:02:21+00:00">this page</del> my old site, but you can easily place it anywhere in your theme.  The easiest is to add this to either your header or footer template pages, as they will (probably) require less maintenance and tweaking as your site evolves (many themes utilize more than one sidebar or main content template, whereas most stick with a common header and footer throughout).  Just paste the following code where you want the form to appear (files are found in the /wp-content/themes/your-theme-name folder on a standard WordPress installation).</p>
<pre class="brush: php; html-script: true; title: ; notranslate">
/* Login/Logout Forms */

&lt;?php if (!(current_user_can('level_0'))){ ?&gt;

    &lt;form action=&quot;&lt;?php echo get_option('home'); ?&gt;/wp-login.php&quot; method=&quot;post&quot;&gt;
        &lt;input type=&quot;text&quot; name=&quot;log&quot; id=&quot;log&quot; value=&quot;&lt;?php echo wp_specialchars(stripslashes($user_login), 1) ?&gt;&quot; size=&quot;20&quot; /&gt;
        &lt;input type=&quot;password&quot; name=&quot;pwd&quot; id=&quot;pwd&quot; size=&quot;20&quot; /&gt;
        &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Login&quot; /&gt;

            &lt;p&gt;&lt;input type=&quot;hidden&quot; name=&quot;redirect_to&quot; value=&quot;&lt;?php echo $_SERVER['REQUEST_URI']; ?&gt;&quot; /&gt;&lt;/p&gt;
    &lt;/form&gt;

    &lt;a href=&quot;&lt;?php echo get_option('home'); ?&gt;/wp-login.php?action=lostpassword&quot;&gt;Forgot Password?&lt;/a&gt;



/* if a user is logged in, display username and logout button */

    &lt;?php } else { ?&gt;
        &lt;h3&gt;Logged In as:
            &lt;?php global $current_user; get_currentuserinfo(); echo ''. $current_user-&gt;user_login . &quot;&quot;; ?&gt;
        &lt;/h3&gt;

        &lt;a href=&quot;&lt;?php echo wp_logout_url(); ?&gt;&quot;&gt;Logout&lt;/a&gt;

&lt;?php }?&gt;

/* END */
</pre>
<p style="text-align: left;">Next, you&#8217;ll need to create a template for your clients&#8217; pages.  I have chosen to name mine &#8216;client.php&#8217;, based on the role I created earlier and overall ease of use.</p>
<p style="text-align: left;">Simply copy and paste this code into a text file and save it as &#8216;client.php&#8217;. Of course, be sure to change the styled XHTML to fit your theme.</p>
<pre class="brush: php; highlight: [5,14,18,21]; html-script: true; title: ; notranslate">
/* client.php */

&lt;?php
/*
Template Name: client 
*/
?&gt;

&lt;?php get_header(); ?&gt;

*/ display the logged in client's username and provide a logout button */

    &lt;div id=&quot;pageHeaderText&quot;&gt;
        &lt;?php while (have_posts()) : the_post(); ?&gt;
		&lt;?php $pagetitle = get_post_meta($post-&gt;ID, 'title', $single = true);

		if($pagetitle !== '') : ?&gt;
                    &lt;h2&gt;&lt;?php echo($pagetitle); ?&gt;&lt;/h2&gt;

                &lt;?php else : ?&gt;
                    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;

                &lt;?php endif; ?&gt;

	&lt;?php endwhile; ?&gt;
    &lt;/div&gt;&lt;!-- end pageHeaderText --&gt;
*/ END */



&lt;div id=&quot;content&quot; class=&quot;full&quot;&gt;   /* this is part of my theme -- change accordingly */
	&lt;div id=&quot;center&quot;&gt;

*/ display the content of client's page */

        &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
            &lt;div class=&quot;entry&quot;&gt;

                &lt;?php wp_link_pages(array('before' =&gt; '&lt;p&gt;&lt;strong&gt;Pages:&lt;/strong&gt; ', 'after' =&gt; '&lt;/p&gt;', 'next_or_number' =&gt; 'number')); ?&gt;

                &lt;?php the_content('&lt;p class=&quot;serif&quot;&gt;Read the rest of this page &amp;raquo;&lt;/p&gt;'); ?&gt;
            &lt;/div&gt;

        &lt;?php endwhile; endif; ?&gt;
*/ END */
            


	&lt;/div&gt;&lt;!-- end center --&gt;  
&lt;/div&gt;!-- end content --&gt;

    &lt;div class=&quot;clear&quot;&gt;&lt;div&gt;
    
&lt;?php get_footer(); ?&gt;

/* END */
</pre>
<p style="text-align: left;">Go ahead and upload everything (client.php and whatever file you amended the login form to) to your &#8216;/wp-content/themes/your-theme-name&#8217; folder and we&#8217;ll be off to our final steps.</p>
<h4 style="color: #0099cc;" >Setting Up: Configuring the Plugins</h4>
<p style="text-align: left;">Now that we&#8217;ve installed our plugins and set up our php code to allow for client login management, let&#8217;s go ahead and configure those plugins to function properly.  On your WordPress dashboard, open your &#8216;users&#8217; tab and select &#8216;add new&#8217;.  Create a new user called &#8216;demo&#8217; and give it the role of &#8216;client&#8217; (that we created earlier).  Enter your email where required and give your new user the password &#8216;client&#8217; (we&#8217;ll test using this username and password in just a bit).</p>
<p style="text-align: left;">Next, scroll down to where it says &#8216;assign extra capabilities&#8217; (if this is not present, make sure you correctly installed the &#8216;role manager&#8217; plugin above).  Make certain that only the fields &#8216;hide dashboard&#8217; and &#8216;read&#8217; are checked, then save your new user.</p>
<p style="text-align: left;">Now, on your dashboard, go to the settings tab and click on &#8216;Login redirects&#8217;.  Under &#8216;Specific Roles&#8217; make sure that administrator is checked and set the URL to &#8216;http://www.your-domain.com/wp-admin/index.php&#8217; (this will automatically direct all administrators to the dashboard on login).  Click &#8216;update&#8217;.</p>
<p style="text-align: left;">OK, here&#8217;s what we&#8217;ve been waiting for.  Under &#8216;Specific Roles&#8217; again, let&#8217;s add the role &#8216;client&#8217; (that we created earlier) and give it the URL &#8216;http://www.your-domain.com/[variable]username[/variable]&#8216;.  Save it.  This will, essentially, redirect all users with the role &#8216;client&#8217; to a page with the same name as the client&#8217;s username.  In other words, if the username is &#8216;demo&#8217;, the corresponding client page must be named &#8216;demo&#8217; and point to a URL ending in &#8216;/demo/&#8217;.  (To make client pages more manageable, you may want to redirect users to a sub-page in order to keep your pages list more controlled.  In this case, you would give the &#8216;client&#8217; role the URL &#8216;http://www.your-domain.com/clients/[variable]username[/variable]&#8216; if you would like all client pages to be sub-pages of the parent page &#8216;client&#8217;.  This is not necessary, but will make your life a whole lot easier when managing more than a few clients at a time.)</p>
<p style="text-align: left;">Congratulations!  You have successfully configured all the required plugins.  Just one thing left to do&#8230;</p>
<h4 style="color: #0099cc;" >The Final Step: Creating Client Pages</h4>
<p style="text-align: left;">Finally, after all that, we can go ahead and create our demo client page!  Let&#8217;s add a new page called &#8216;demo&#8217; (if seeking to make all client pages sub-pages, make &#8216;demo&#8217; a sub-page of the page &#8216;clients&#8217;, or whatever you want the parent page to be).  On the right side of your screen, in the tab &#8216;Page Attributes&#8217;, make sure the template field is set to &#8216;client&#8217; and a parent page is selected (if desired).  I have also chosen to make my client pages password protected to disallow any unauthorized access.  To do so, just assign the client&#8217;s user password to the page.</p>
<p style="text-align: left;">Make sure that your permalink matches what you set under &#8216;Specific Roles&#8217; above and you should be good to go.  Just fill in the page with some client information, sign out of your WordPress account, and use the login form we installed on your page to login with the username &#8216;demo&#8217; and password &#8216;client&#8217;.  You should be redirected right to the demo client page.  If it worked for you, simply add more client pages and pat yourself on the back.</p>
<p style="text-align: left;">
<p style="text-align: left;">If you have any questions or comments on this tutorial, leave me a comment to let me know.  Happy coding!</p>
<p style="text-align: left;">EDIT:</p>
<p style="text-align: left;">Thanks to the comment by the user &#8216;underscore&#8217; in the <a href="http://wordpress.org/support/topic/my-crack-at-a-client-login-sectioncustomer-portal" >WordPress.org Support Forums</a>, we now have an easy way to limit each user&#8217;s login to viewing only that user&#8217;s client page.  It does this by checking a user&#8217;s username against a client page&#8217;s title.  If the two are the same, the page is allowed to be viewed.  If they don&#8217;t match, the user is sent to your universal wp-login.php page.  Simply add the following code near the top of your client page&#8217;s template.  Be sure to edit the highlighted lines to reflect your site&#8217;s requirements and you should be good to go.</p>
<pre class="brush: php; highlight: [13,20,23]; html-script: true; title: ; notranslate">
/* insert into client.php */

&lt;?php 
    $username = ( $userdata-&gt;user_login ); 
?&gt;

    &lt;?php
        $url =  $_SERVER['REQUEST_URI'];
        $urlItemsArr = explode( '/', $url );

    /*

        print ('client/'.$userdata-&gt;user_nicename);
        print '&lt;br /&gt;';
        print ($urlItemsArr[1].'/'.$urlItemsArr[2] );
        print '&lt;br /&gt;';

    */

            if ( strcmp( 'client/'.$userdata-&gt;user_nicename, $urlItemsArr[1].'/'.$urlItemsArr[2] ) == 0) {
	       print 'Allowed';
            } else {
	       header('Location:http://www.your-URL.com/wp-login.php') ;
            }
    ?&gt;

/* END */
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.dauidusdesign.com/using-wordpress-as-a-simple-client-management-solution/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>10 Tips for the Beginning Freelance Web Designer</title>
		<link>http://www.dauidusdesign.com/10-tips-for-freelance-web-designer/</link>
		<comments>http://www.dauidusdesign.com/10-tips-for-freelance-web-designer/#comments</comments>
		<pubDate>Sun, 29 Aug 2010 16:48:09 +0000</pubDate>
		<dc:creator>Dave Winter</dc:creator>
				<category><![CDATA[Design Advice]]></category>
		<category><![CDATA[Freelancers]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://www.winterwebcreations.com/blog/?p=94</guid>
		<description><![CDATA[So, you're a talented web designer with a few projects under your belt and you're thinking about setting up a small freelancing business for yourself.  That's great!  But, there's more to succeeding as a freelancer than just knowing how to design a functional web page.  Freelancing demands a constant balance between learning new skills and building expertise in a particular area of focus, while at the same time developing opportunities for your business to grow.  That last part is the toughest for most freelancers, and with good reason.  But, with the right motivation, skillset and some preliminary knowledge of what to expect, the bumpy road of starting your own web design business can become quite a bit smoother.]]></description>
				<content:encoded><![CDATA[<p><img class="blogtop" src="http://www.dauidusdesign.com/wp-content/uploads/2010/09/jump.jpg" alt="" title="jump" width="200" height="200"  /></p>
<p>S<em>o, you&#8217;re a talented web designer with a few projects under your belt and you&#8217;re thinking about setting up a small freelancing business for yourself.  That&#8217;s great!  But, there&#8217;s more to succeeding as a freelancer than just knowing how to design a functional web page.  Freelancing demands a constant balance between learning new skills and building expertise in a particular area of focus, while at the same time developing opportunities for your business to grow.  That last part is the toughest for most freelancers, and with good reason.  But, with the right motivation, skill set and some preliminary knowledge of what to expect, the bumpy road of starting your own web design business can become quite a bit smoother. </p>
<p style="text-align: left;">Here are a few tips I&#8217;ve found to be helpful along my path to setting up as a freelancer.</p>
<p></em></p>
<h4>1. Develop a Contract</h4>
<p style="text-align: left;">Okay, this is the big one for me.  After interacting with my first client without the use of a formal contract, I will simply never work without one again.  Having a set contract is the easiest way for you to define your boundaries as an independent consultant, guarantee payment for services completed and protect yourself with a &#8216;scope of work&#8217; agreement.  You wouldn&#8217;t believe how easy it is to fall into a situation where a client may decide to change the entire definition of a project while you have no way to amend cost or deadlines for that project.</p>
<p style="text-align: left;">In my own experience, I found myself trying to defend my initiative and professionalism with no contract agreement to back me up.  Besides not agreeing on a time schedule to post payment for services completed, I found myself wasting a lot of my time on smaller aspects of the project.  Something as simple as a Google image search for &#8216;something that would fit here&#8217; can be a real time-drain, especially if your creation isn&#8217;t what a client wanted in the first place.  I&#8217;ve also heard horror stories of freelancers completing an entire project just to find that sufficient funds never existed for it or, in one case, a designer who waited over a year for a client to provide content, just to have that client eventually demand that their down-payment be returned.</p>
<p style="text-align: left;">To get an idea of what a contract should cover, take a look at <a class="windowlink" href="http://blogs.sitepoint.com/bulletproof-web-design-contract/">SitePoint: Bulletproof Web Design Contracts</a>.</p>
<h4>2. Invest Intelligently In Your Business</h4>
<p style="text-align: left;">Now that you&#8217;ve decided to &#8216;do it freelance style,&#8217; you&#8217;re going to need to do some initial spending for your business.  Some key things to ask yourself are:</p>
<ul style="margin: 0 0 0 40px;">
<li>Can I do everything I need to with my current technical equipment?</li>
<li>How comfortable am I with my current backup solutions?</li>
<li>Will I need a separate business phone or fax number?</li>
<li>How much time do I foresee myself devoting to this each day?</li>
</ul>
<p></p>
<p style="text-align: left;">Let&#8217;s take a closer look at the first point.  In my case, I began my freelance business from nothing but a laptop, external hard drive, printer and some outdated Adobe software.  Since much of what I do revolves around photo quality and clean presentation, I had to prioritize whether I could make do with a better monitor while I built the financial security needed for a complete upgrade or to go for broke with the latest souped-up system or new software I really wanted.  Well, I actually just stuck with what I had for the time being and instead invested in business cards, social networking advertisements and print materials, exactly those things I didn&#8217;t originally think were necessarily at the top of my to-do list.  After all, without potential clients, that system would have just sat there collecting dust anyway.</p>
<p style="text-align: left;">One thing is certain in the freelance world: you will have to spend some money up front.  Let&#8217;s say you plan on developing apps for the iPhone software.  You may be best off investing in an iPad or iTouch (assuming you already have a Mac and are a part of Apple&#8217;s dev program).  Or, maybe you foresee yourself growing quickly and needing more space.  You might look into renting a cubicle in a shared office space.  Either way, one thing is certain; If you play it smart and prioritize, you&#8217;ll find yourself making the right decisions every time.  </p>
<h4>3. Create a Comfortable Office Space</h4>
<p style="text-align: left;">As a new freelance designer, you will probably spend more time in your home than anywhere else.  If so, its imperative to set up a separate area that you can dedicate to work, away from distractions.  If you&#8217;re like me, take the TV out of the room and replace it with an indoor plant or a piece of art.  And maintaining a clean, open desk space can really come in handy when it comes time to field that phone call and take a few notes.  Besides, a peaceful working environment with few social distractions [generally] works wonders for the creative mind.  Check out www.creativepublic.com for <a class="windowlink" href="http://www.creativepublic.com/designing_home_office.php" >some tips on getting started with a home office.</a></p>
<p style="text-align: left;">Ask anyone who sits in front of a computer all day, and you&#8217;ll hear one response over and over: Your office chair can be either your greatest asset or biggest disappointment.  Okay, dramatics aside, one of my first business expenses was a chair for my home office.  And looking back, it was the best thing I could have purchased for myself at the time.  Without it, I would probably find myself comfy-ing up to the couch, trying to use that awful laptop-mouse-thingy to do some tedious photo editing (while feeling the urge to give in for a nap.  Better to just stay at the desk.  When designed correctly, your desk space will be someplace you won&#8217;t mind being for a while, anyway.  <a class="windowlink" href="http://www.dauidusdesign.com/wp-content/uploads/2010/04/homeoffice1.jpg" >Take a peek at my small, but comfortable home office.</a></p>
<h4>4. Network, Network, Network</h4>
<p style="text-align: left;">With all the readily available (and mostly free) social networking sites many of us use everyday, there&#8217;s just no reason not to set up an account for your business.  Posting tweets, updating your status or sharing a photo is simple, quick and may even get you a client or two.  I&#8217;ve heard of many designers getting that break-away gig because a client found them through a friend on twitter or Facebook.  Fact of the matter is, you just never know who people know.  I try to stick with a somewhat-regular posting schedule on the big social networking sites, and frequently look for fellow designers to build a relationship with.  Not only is it a great way to keep up with new trends and meet new people, its a simple practice that can really help you to network your small business.</p>
<p style="text-align: left;">I also carry a few business cards with me wherever I go.  They&#8217;re really nothing too fancy (just a quick web address and my business email), but they come in handy quite often.  I&#8217;m pretty good about not only passing them around to friends (like I said, you never know who people know) but also generally keeping my ear open for any potential business opportunities.  You&#8217;d be surprised at how many folks don&#8217;t mind a quick conversation while in a grocery line, walking the dog or waiting for an oil change.  Of course, you need to establish your own boundaries and try not to appear desperate or creepy.</p>
<p style="text-align: left;">Do yourself a huge favor and come up with a simple one-liner to pitch yourself to a potential client.  Rather than responding to the profession question with &#8220;<em>I&#8217;m a web designer</em>,&#8221; say something like &#8220;<em>I help small businesses and organizations establish a strong and lasting presence on the web</em>.&#8221;  Essentially, you&#8217;re telling them the same thing, but the second is more of a conversation starter and will probably help them to remember you.  Slip them a business card and you may just hear from someone they know a few days or months later asking for a quote.</p>
<h4>5. Stay In Contact</h4>
<p style="text-align: left;">This one goes without saying, but it really is pretty easy to fall out of the practice of staying in contact with your old clients.  A few months after the project gets finished, give the lead contact a quick phone call just to check up on how the site is doing.  Make it clear that you don&#8217;t want to tie them into buying anything else from you, but that you would appreciate it if they pass the word along to others they may know.  Usually, anywhere from 30-70% of a web designer&#8217;s business comes from referrals by happy clients.</p>
<p style="text-align: left;">Even more often forgotten is the generally smart rhythm of keeping in contact with fellow designers and others in related fields.  Remember, freelancing can be a challenge.  If you&#8217;re going through a slump (it happens to everyone) an overbooked fellow designer may be open to passing along some work they can&#8217;t handle themselves.  And likewise, when you&#8217;re feeling like you need a twin to complete a project and have more coming your way, share the wealth.  There&#8217;s always someone looking for a designer, and just no reason to try and keep yourself extra busy all the time.  And, the old saying is true: What goes around comes around.  And with the network of freelancers you&#8217;ll be building for yourself, it should be pretty easy to make a few friends in the business.</p>
<h4>6. Research and Get the Necessary Tools for Your Work</h4>
<p style="text-align: left;">As a freelance designer, what&#8217;s the most efficient way to handle a time sheet?  Do you intend to keep all your past client contact details in a paper Rolodex, or is it better to manage all that with online software?  How about individual project contracts?  Trust me, you will have to find a way to manage these elements in a project quickly and with ease.  One of the drawbacks of doing freelance work is that there isn&#8217;t a company keeping the books for you.  What we do, we most commonly do on our own.  Fortunately, there are literally hundreds of tools (both online and as stand-alone software) to help us through it.  The tricky part is finding what works best for you.</p>
<p style="text-align: left;">For Windows users, look for online services such as <a class="windowlink" href="http://e-task.net/" >e-Task</a>, <a class="windowlink" href="http://www.getharvest.com/" >Harvest</a> or <a class="windowlink" href="https://www.toggl.com/">Toggl</a> for ease-of-use invoicing and simple project management.  If you&#8217;re on a Mac, you should already know about <a class="windowlink" href="http://basecamphq.com/" >BaseCamp</a>, a complete project management solution.  And, as always, feel free to search the web for other tools, many of them free, that may offer specific solutions to suit your project goals.</p>
<h4>7. Take Care of Your Own Needs</h4>
<p style="text-align: left;">Since freelancers don&#8217;t work on a fixed salary and don&#8217;t have the luxury of vacation time, the ball lands in our court to plan appropriate time off and provide self-care.  It may be nice to dictate our own schedule and work at our own pace, but it can be easy to fall into the habit of not looking after ourselves.  Just as everyone else, freelancers get sick, take vacations and need to deal with emergencies&#8211; things that sometimes can&#8217;t be foreseen.  Setting appropriate self-boundaries is a must.</p>
<p style="text-align: left;">Firstly, make sure you have sufficient medical coverage, either through a spouse&#8217;s plan or individually.  It can be a real challenge, but you&#8217;ll be happy when the time comes&#8230; and it will.  Second, don&#8217;t be afraid to take breaks.  I&#8217;m talking here about both hour-long lunches away from your desk as well as planned time off and &#8216;personal days.&#8217;  If you get sick, it may be best just to pound that medicine and sleep through it.  If you&#8217;re feeling overworked and a bit stressed out, take a walk down to the beach or a jog around the park.  Turn on the tube if you have to, just make sure you&#8217;re looking out for number one.</p>
<p style="text-align: left;">Its not uncommon for a freelancer to work clear through the weekend in an effort to meet a project deadline or satisfy a client&#8217;s schedule.  But, that means sometimes not getting a day off for a while and (for me) feeling temporary burn-out.  </p>
<p style="text-align: left;">Last, don&#8217;t let freelancing get in the way of your work-life balance.  All too often, designers will neglect their spouse, friends, dog or themselves by not allowing time to unwind and eventually end up leaving their freelance lifestyle behind.  Don&#8217;t be that guy.  Don&#8217;t replace your life with the computer&#8230; just add it to your life.</p>
<h4>8. Manage Your Time Seriously</h4>
<p style="text-align: left;">When beginning a freelancing career, ask yourself the fundamental question that will serve to define your purpose as a designer: Will I be doing this full or part-time?  [I'm guessing that by this point you are looking to freelance more as a business venture than a hobby]  Often, self-employed designers start out by taking a part-time position at some mediocre job to help build income while getting started at a career from home.  But, if you&#8217;re serious about making this your only profession and main source of income, you will need to ultimately set some general working schedule and revenue goals.  During those times when work is hard to find, will you take a few days for a road trip or devote that time to widening your network base or learning a new skill?  The more you put into your business the more you&#8217;ll get back from it.  Or, at least that&#8217;s the hope.</p>
<p style="text-align: left;">Try as we may to keep it under control, time management can get pretty tricky sometimes.  There will always be things that come up and we have to deal with immediately (for me, its playoff hockey).  But, with some planning and a bit of foresight, agreements can be reached.  Either I DVR the game and get to it later or offset the time I spent glued to the TV by working late or taking a working lunch.  As long as your guilty pleasures don&#8217;t hinder your work, you&#8217;ll be alright.</p>
<h4>9. Develop Multiple Targeting Strategies</h4>
<p style="text-align: left;">What is your strategy for &#8216;getting people in the door?&#8217;  Is it your pricing points?  Maybe you advertise heavily on SEO?  Or are you a Flash guru?  Chances are, you already rely on a number of skills and design practices to get noticed by potential clients.  But, deciding which to fall on in particular situations is what separates a great designer with clients from a great designer with old clothes.  Finding that balanced strategy isn&#8217;t easy, but it can pay off with work.</p>
<p style="text-align: left;">Let&#8217;s say you run an advertisement in your local newspaper or through a social networking service that gravitates toward logo design and awesome branding skills.  You may want to run a second advertisement through a second outlet that focuses on your excellent customer service or low prices and points the visitor to a different page on your site tailored to that purpose.  The truth is, different clients look for different skills in web designers, most of which we all have in common.  But, the only way to set yourself apart from all those others is to target the right consumer.  There is a ton of information on how to do this, even on a limited budget, to be found online.  Do some research and remember to sell your services wisely.</p>
<h4>10. Keep Yourself Motivated</h4>
<p style="text-align: left;">If you&#8217;ve made it this far, you deserve a thumbs up!  And here&#8217;s your reward: this might just be the easiest of my 10 tips.  Let&#8217;s face it&#8230; if you&#8217;re really serious about freelance web design, you&#8217;re (hopefully) a self-proclaimed geek.  And, what do geeks like to do more than keep up on the latest trends in technology and web based standards while learning new tricks and techniques as often as we can?  Nothing, I tell you.  It is in our blood.</p>
<p style="text-align: left;">Playfulness aside, it is &uuml;ber important for us freelancers to stay on top of things.  We don&#8217;t have the opportunity to attend company trainings or, more importantly, focus on one aspect of what we do while a co-worker lends his specialty to a project.  Nope.  We get to do the work all on our own.  But, we also have to compete with those larger companies and provide comparable services.  It can seem like a pretty daunting task at times, but as long as we are constantly learning new skills and improving on our tried-and-true methods, there will always be work for us.</p>
<p style="text-align: left;">
<p style="text-align: left;">// &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-></p>
<p style="text-align: left;">Freelancing is hard work&#8230; anyone that tells you otherwise is selling you something (but, probably not a website).  The best single piece of advice I can offer anyone just starting out is this: Stick to your guns.  There will be times when you just don&#8217;t feel you can handle a gig or just flat-out need a break.  Just like any other job.  Stick to your guns, and you might just surprise yourself in the long run.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dauidusdesign.com/10-tips-for-freelance-web-designer/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Easy Single Image Rollovers with CSS Image Sprites</title>
		<link>http://www.dauidusdesign.com/css-image-sprites/</link>
		<comments>http://www.dauidusdesign.com/css-image-sprites/#comments</comments>
		<pubDate>Sun, 20 Jun 2010 05:23:53 +0000</pubDate>
		<dc:creator>Dave Winter</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Bandwidth]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Image Rollover]]></category>
		<category><![CDATA[Image Sprite]]></category>
		<category><![CDATA[Style Sheets]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.winterwebcreations.com/blog/?p=91</guid>
		<description><![CDATA[With the advent of Style Sheets came the promotion of standards-based code that functions seamlessly across multiple browsers and displays correctly on most every machine out there. But, I often come across high-end websites that are based on outdated (and somewhat unreliable) CSS methods to produce an effect as simple as the common image rollover. Most older methods can give an otherwise professional site an amateur feel because they:</p>

<ul style="margin: 0 0 0 40px;">
	<li>use Javascript where not necessary</li>
	<li>cause the image to flicker on the initial rollover</li>
	<li>aren't accessible to some mobile browsers or systems with JavaScript disabled</li>
	<li>create a rollover by using multiple images, which take longer to load and uses extra bandwidth</li>
</ul><br />
<p style="text-align: left;">No need to worry though-- there is a standards-compliant way to use a single image to create that flicker-free, non-JavaScript rollover that will work on any system. It uses what is known as an <em>image sprite</em> and its easier than you might imagine.]]></description>
				<content:encoded><![CDATA[<p><img class="blogtop" title="cssgreen" src="http://www.dauidusdesign.com/wp-content/uploads/2010/09/cssrollover.jpg" title="CSS Image Sprites - Functionality Without Flicker" alt="CSS Image Sprites the Easy Way" width="200" height="200" /></p>
<p><span class="dropcap">W</span><em>ith the advent of Style Sheets came the promotion of standards-based code that&nbsp;functions&nbsp;seamlessly across multiple browsers and displays correctly on most every machine out there. But, I often come across high-end websites that are based on outdated (and somewhat unreliable) CSS methods to produce an effect as simple as the common image rollover. Most older methods can give an otherwise professional site an amateur feel because they:</p>
<ul style="margin: 0 0 0 280px;">
<li>use Javascript where not necessary</li>
<li>cause the image to flicker on the initial rollover</li>
<li>aren&#8217;t accessible to some mobile browsers or systems with JavaScript disabled</li>
<li>create a rollover by using multiple images, which take longer to load and uses extra bandwidth</li>
</ul>
<p></p>
<p style="text-align: left;">No need&nbsp;to worry though&#8211; there is a standards-compliant way to use a single image to create that flicker-free, non-JavaScript rollover that will work on any system. It uses what is known as an <em>image sprite</em> and its easier than you might imagine.</p>
<p></em></p>
<h4 style="color: #0099cc;" >Take a look at this working example.</h4>
<p><a href="#"><span class="imagesprite" title="CSS Single Image Rollover"></span></a></p>
<p>So, how is it done? To tell you the truth, its not much different than coding for standard hypertext markup using CSS. The only difference is the addition of some small attributes in our CSS <em>background-position</em> attributes that will define the position of our image at each of our rollover states. By using just one image to accomplish our goal, we will be eliminating any flicker caused by the initial image loading during the first rollover that calls a second&#8211; or third file from the server. So, by taking this step, we won&#8217;t even have to preload the alternate images by adding extra JavaScript into our page&#8217;s <em><head></em> tag. Here is the single image used in this tutorial.</p>
<p style="text-align: left;"><img src="http://www.dauidusdesign.com/wp-content/uploads/2010/04/cssrollover1.jpg" alt="CSS single image rollover" title="Single image for seamless CSS rollover" width="125" height="180" class="aligncenter size-full wp-image-187" /></p>
<p style="text-align: left;"> The only change&nbsp;to our XHTML is the&nbsp;assignment of&nbsp;a <em>class</em> or <em>id</em> value to the link itself. In many cases, you will already be using one of these, so really, this part wouldn&#8217;t really be any different for you.</p>
<p>Here&#8217;s the HTML. Of course, you&#8217;ll need to amend your <em>class</em> property to whatever it will be called in your CSS.</p>
<pre class="brush: css; title: ; notranslate">
/* Image Sprite HTML */

&lt;a class=&quot;imagesprite&quot; title=&quot;Your Image Title&quot; href=&quot;#&quot;&gt;&lt;/a&gt;

/* END Image Sprite HTML */
</pre>
<p></p>
<p>Pretty simple, huh? Well, the CSS really isn&#8217;t too much longer.</p>
<pre class="brush: css; title: ; notranslate">
/* Image Sprite CSS */

a.imagesprite {
    display: block;
    width: 125px;
    height: 60px;
    background: url(location-of-your-image.jpg) no-repeat 0 0;
    overflow: hidden;
    text-indent: -15000px;
    font-size: 0px;
    line-height: 0px;
}

a:hover.imagesprite {
    background-position: 0 -60px;
}

a:active.imagesprite {
    background-position: 0 -120px;
}

/* END Image Sprite CSS */
</pre>
<p></p>
<p>First, we must define the properties of our <em>a.imagesprite</em> parameter. The width and height must be set to the size of the visible part of the image as we want it to appear on the page. In this example, we want our image to display the full width (125px) and the height of only one segment of our image (in this case, 60px). The background position for the inactive state of our image is set to <em>0, 0</em>.</p>
<p>We&#8217;ve also included some parameters that offset our image&#8217;s <em>alt</em> text to keep it from overlapping the image. Omitting the tag completely is always an option, but won&#8217;t help the overall professionalism of your site. Here, we will simply pust the text 15,000 pixels from the left edge of our image&#8211; more than enough to get it off the screen and out of sight without dropping it altogether.</p>
<p>Finally, we must set our <em>a:hover</em> and <em>a:active</em> parameters to reflect the amount we need to shift our image for each of our three rollover states. Because this example strives to create three image segments, each 60px tall, we will be shifting that image up by 60px to display each successive segment. When done properly, this should create the illusion of calling a new image without any lagging or flickering that other methods may cause.</p>
<p>If a fourth value, <em>a:visited</em> is sought, simply add an extra segment length to the bottom of your image and insert the following code to your CSS:</p>
<pre class="brush: css; title: ; notranslate">
/* Image Sprite Visited */

a:visited.imagesprite {
    background-position: 0 -180px;
}

/* END Image Sprite Visited */
</pre>
<p></p>
<p>And, there you have it&#8230; a standards-compliant, accessible, single-image rollover that doesn&#8217;t use any JavaScript or cause unwanted image flicker. If you would like to use this in multiple instances for different rollovers on the same page, just paste the HTML where you want it and duplicate the CSS, making sure to replace <em>imagesprite</em> with the name of your new rollover parameter.</p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dauidusdesign.com/css-image-sprites/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Getting the Most Out of Google Without Spending a Dime</title>
		<link>http://www.dauidusdesign.com/seo-get-the-most-from-google/</link>
		<comments>http://www.dauidusdesign.com/seo-get-the-most-from-google/#comments</comments>
		<pubDate>Sat, 17 Apr 2010 08:49:17 +0000</pubDate>
		<dc:creator>Dave Winter</dc:creator>
				<category><![CDATA[Search Engine Optimization]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[best bet]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[breaking the bank]]></category>
		<category><![CDATA[common knowledge]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[header tags]]></category>
		<category><![CDATA[long time]]></category>
		<category><![CDATA[search engines]]></category>
		<category><![CDATA[search terms]]></category>
		<category><![CDATA[short answer]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[web designers]]></category>
		<category><![CDATA[web practices]]></category>

		<guid isPermaLink="false">http://www.winterwebcreations.com/blog/?p=13</guid>
		<description><![CDATA[Its pretty common knowledge nowadays that achieving top SEO rankings can take a long time and become a real hassle.  But, how do web designers expect to reach those coveted placements when seemingly everyone is fighting for them?  There are certainly some 'easy fixes' to be found, but many will result in getting your site banned from Google and promoting bad general web practices.  And, sure, you could shell out a ton of cash to search engine advertising programs-- but they only work for the engine you submit to.  In this article, we'll take a look at the best ways to improve your site's organic ranking on Google without breaking the bank... or your reputation.]]></description>
				<content:encoded><![CDATA[<p><img class="blogtop" title="SEO - Getting the Most Out of Google Without Spending a Dime" src="http://www.dauidusdesign.com/wp-content/uploads/2010/06/seo.jpg" alt="SEO Search Engine Optimization Find Google Results Top Rank Easy Steps" width="200" height="200" /></p>
<p><span class="dropcap">I</span><em>ts pretty common knowledge nowadays that achieving top SEO rankings can take a long time and become a real hassle.  But, how do web designers expect to reach those coveted placements when seemingly everyone is fighting for them?  There are certainly some &#8216;easy fixes&#8217; to be found, but many will result in getting your site banned from Google and promoting bad general web practices.  And, sure, you could shell out a ton of cash to search engine advertising programs&#8211; but they only work for the engine you submit to.  In this article, we&#8217;ll take a look at the best ways to improve your site&#8217;s organic ranking on Google without breaking the bank&#8230; or your reputation.</em></p>
<p style="text-align: left;">note:  This article will focus on SEO methods that produce the best organic rankings for Google, as that engine is generally regarded to use the most complex methods to rank its findings.  If you&#8217;re looking to produce quick SEO turnaround for specific search terms and money isn&#8217;t a problem, you may want to look into <a class="windowlink" href="http://www.google.com/intl/en_us/ads/ads_3.html" >Google&#8217;s advertising programs</a>.</p>
<p><strong><span id="more-931"></span></strong></p>
<h4>THE SHORT ANSWER:</h4>
<p style="text-align: left;">All Search engines grab a site&#8217;s readable content by utilizing small programs called <em>web crawlers</em>, also known as <em>spiders</em> or <em>robots </em>that randomly search the internet for information.  To learn about how Google&#8217;s crawler works, check out <a class="windowlink" href="http://www.google.com/support/webmasters/bin/answer.py?answer=70897" >Google basics</a>. Each engines crawling methods vary slightly, but careful utilization of some key methods will help them all to index a site more accurately.  Remember, top engines (and especially Google) look for site structure as much as content when indexing a page.</p>
<p style="text-align: left;">Your best bet is to write a readable, accessible page that doesn&#8217;t obscure content behind too much code and strategically places keywords in appropriate header tags.  Obviously, if Google&#8217;s crawlers can&#8217;t read the content of a page, they won&#8217;t properly index it.  And most of the time, anything linked from that page will suffer as well.  This is the most important reason to make sure each page within a site, and not just a select few, is built for SEO. </p>
<p style="text-align: left;">Avoid tactics such as keyword stuffing, cloaking hidden text or using redirects to try and trick search engines.  Google has built-in functionality that will easily spot these methods and ban your site.  Instead, focus on infusing your site with relevant content, keywords and genuine inbound links.  Not only do these practices help Google better index your site, they will also increase its overall style and content to provide a generally better browsing experience for your visitors.</p>
<h4>THE LONG ANSWER:</h4>
<p style="text-align: left;">While there is no clearly-defined set of steps a designer can take to automatically achieve top Google rankings, there are some tried-and-true methods for promoting your site on search engines. As a general practice, don&#8217;t implement a method you are either not familiar with or not sure of. As always, the safest way to build a successful site is to stick to what you know and do it well. That being said, let&#8217;s take a look at some easy ways to allow those spiders to better index your page.</p>
<p style="text-align: left;"><span class="boldtext">PAGE STRUCTURE</span><br />
Google&#8217;s spiders are exceptionally optimized for content that adheres to standards set by the <a class="windowlink" href="http://www.w3.org/" >Worldwide Web Consortium</a> (W3C), especially the implementation of Cascading Style Sheets. CSS both plays extremely well with spiders and promotes excellent general web practices.</p>
<p style="text-align: left;">Coding with CSS offers less clutter for spiders to crawl before they find the actual content of a page.  By eliminating bulky tags such as tables (that often run 3 or 4 deep) and replacing them with simple DIV tags, they are allowed to index pages faster and with more accuracy than the same page done in pure HTML. Keeping spiders happy means keeping them coming back. And the more they index your page, the better chance you have of getting found.</p>
<p style="text-align: left;">Within the code of the CSS page itself, it is imperative to utilize H1 and H2 tags to your advantage.  One of the first things spiders look for is properly functioning headings. Naturally, only one H1 tag should be found on each page, containing nothing but a targeted phrase acting as a page headline. I know this seems like a simple step, but you&#8217;d be surprised at how many websites just don&#8217;t utilize this feature. If possible, the page should also incorporate a number of H2 tags, though any more than 4 or 5 may look like keyword spamming. But, as long as those keywords stay true to the overall content, you&#8217;ll be fine.</p>
<p style="text-align: left;">Of course, some of that good old fashioned HTML between the <head> tags is still necessary for good indexing. Always make sure your TITLE tag includes some sort of keyword or descriptive phrase of the page content. Ideally, each page should have its own TITLE tag, but I&#8217;ve seen generic ones work just as well.  It&#8217;s really all about what you put up there&#8230; a page entitled &#8216;dog food&#8217; will never be indexed as well as &#8216;healthy, lean food for active dogs.&#8217; Better yet would be something like &#8216;healthy, lean food for active dogs &#8211; product information guide.&#8217; Try to be as specific as you can while sticking to the main point.</head></p>
<p style="text-align: left;"><span class="boldtext">CONTENT VALUE</span><br />
Regarding the content of your page itself, always think &#8216;keyword placement.&#8217; Thinking it yet? Great&#8230; make it your mantra. But, really, optimized keyword placement is possibly the trickiest part of getting a page indexed well for Google. There seems to be a fine line between choosing the right keywords and utilizing them to your advantage, and choosing the right keywords and using them too much.  Where the first will almost always guarantee higher page rankings, the latter may just get you pinned as a spammer.  There are many excellent resources to be found on the web considering this point, so get your <a href="http://www.google.com" >Google</a> on!</p>
<p style="text-align: left;">Another thing to strongly consider is that spiders cannot read all types of content on a page.  And what they can&#8217;t read, they can&#8217;t index. Specifically, JavaScript and Flash tend to give Google the hardest time, though some recent developments have been made. Even so, nothing can be indexed as purely, quickly and intelligently as pure text on a site. I&#8217;ve seen JavaScript behave both well and negatively for spiders, and, frankly, I&#8217;m still a bit skeptical when including it in my projects. And I (along with the majority of web designers) still don&#8217;t trust spiders with my all-flash content. But sometimes, you have to develop that special content for a site and you&#8217;re still expected to optimize it for search engines. What then? Well, the best way is to develop a non-flash version of the site, too. Not only does this allow spiders to index the site, it is becoming increasingly necessary with the exponential rise in mobile web-optimized devices (yes, I&#8217;m thinking the iPhone). Since the device doesn&#8217;t support flash anyways, it is always a good idea to develop for the widest audience&#8230; including those with limited accessibility.</p>
<p style="text-align: left;"><span class="boldtext">LINK CHECKING AND LINK VALUE</span><br />
Even with mostly JavaScript or Flash content, there are still ways of getting your site indexed. Despite being so common, sitemaps have proven over and over again to be one of the most efficient methods to attract spiders.</p>
<p style="text-align: left;">An obvious, but often overlooked element to SEO is simply making sure that <em>all</em> links on a site can be read and properly indexed. Remember, Google&#8217;s spiders can&#8217;t read any content that is embedded with the use of Javascript or Flash. Always make sure your relevant links can be read, one way or another.</p>
<p style="text-align: left;">The best way to keep your links highly visible is to code them cleanly and near the top of a page. But that&#8217;s not even enough to keep those spiders from getting confused. Be compulsive in making sure the portion of the link that can be indexed includes relevant text describing what it links to. A link that reads &#8216;click to view my portfolio&#8217; will certainly get indexed better than one that simply reads &#8216;click here.&#8217; And, per our mantra, include as many keywords as possible.</p>
<p></p>
<p style="text-align: left;">I&#8217;ve said it time and time again&#8230; and any designer worried about SEO will agree. A well-designed, simply-coded page with relevant keyword content is the easiest way to achieve those high organic rankings in Google. But, it does take some time for spiders to crawl and index a site. As long as you are patient and do your best to adhere to the latest web standards, you will most definately improve your site&#8217;s viewability in the major search engines.</p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dauidusdesign.com/seo-get-the-most-from-google/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
