Author: Khanh



CSS Tutorial: Simplifying :nth-child

I’m going to take a moment to explain a CSS concept that tripped me up when I first heard about it and started using it: nth-child. This is a really basic and quick overview of the nth-child class so it won’t go into any specifics or lots of details about the philosophy behind the pseudo class.

It does assume that you already understand basic CSS terminology (ex. you know what a pseudo class is, you understand how to write CSS). So without further ado.

nth-child sounds like a B-List horror or sci-fi movie, but it is actually a CSS concept that allows us to select multiple elements at once by using numbers and some simple algebraic equations. The :nth-child pseudo class allows you to target specific items, elements and even a chain of elements based on a little bit of math. For now, let’s focus on the simplest nth-child declaration:

ul li:nth-child(4) {
	color: #89f89f;
}

The CSS above uses nth-child to search for the fourth list or LI item and make only that fourth item the color of #89f89f. You can change the number 4 to any other number. For example if you changed the number from 4 to 5, and it will change only the fifth item to become the #89f89f color instead.

Moving on to more complicated nth-child classes we need to do a bit of light math. Most notably; algebra. nth-child pseudo classes allow us to target specific elements inside of another element as we saw above, but it can also allow us to target chains of elements. For example:

ul li:nth-child(3n+1) {  
  color: #89f89f;
}

The above CSS rule will change the color of every third list item to #89f89f. But how is it doing that and what is this crazy algebra formula for?

The formula 3n+1 can also be expressed as (3xn)+1. In this case, you’d have the first selection for every third item. If you’re like me, and think this all sounds way more complicated than it should be and numbers give you nightmares, then don’t worry. Thankfully there’s a trick to figuring out how nth-child works without resorting to too much math.

Here’s the trick: Think of the 3n portion in the above equation as the pattern or how many you want. Think of the +1 portion in the above equation as the first number to start the pattern.

So if we had 3n+1, nth-child will start the pattern at the first item according to the +1 portion, then for every third item according to the 3n portion, it will affect those.

Here’s another example that we can walk through:

ul li:nth-child(4n+2) {  
  color: #6699ff;
}

In the above example, the second list item will have the color of #6699ff according to the +2 portion of the formula. Then every fourth list item will be of the color #6699ff because of the 4n portion of the formula.

Some very awesome people have created a tool called the :nth Tester to illustrate how the formula works. You can access this tool here: :nth Tester

Pseudo classes can throw a few people for a loop, but it is important to understand how they work because they come in handy if you were to dabble in jQuery, work with more complex HTML5 and CSS3 concepts or even while working with other web programming languages.



Iron Ion Site Design Updated

Welcome to the updated design for Iron Ion. I decided to go with a less cute design while still maintaining a level of personality with some of my favorite bright and fun colors. There are still some things I need to work out with the design. Most notably the wonky blog layout, but for those of you looking for the articles on this site, they should display good enough for now.

My portfolio is also going to be undergoing a lot of major changes over the next two weeks. The pages will have more content and be tailored for each individual project.

Please be patient while I get the rest of my site back up to speed in the next week or two and hang tight for some brand new tutorials and articles as well!



WordPress Code Snippet for PHP Display Shortcodes

I’m always finding myself having to look through my notes for this little snippet for php display shortcodes. I use it often enough to have to look for it, but at the same time, not often enough to commit it to memory. So here, once and for all, is the PHP code to display a shortcode in a WordPress template file.

The PHP Display Shortcodes Snippet

<?php
echo do_shortcode("[shortcode]");
?>

Where [shortcode] is the shortcode that you want to display.

While we’re here, what the above code is doing is first identifying itself as a PHP section of code using the opening and closing php tags <?php opens the section of PHP code and ?> closes it, in a similar fashion as opening and closing HTML tags. These two components in the code tell your browser that whatever is contained inside is a segment of PHP.

Then it is calling an echo (printing out) to “do_shortcode”. This means that when you use echo, you’re telling the browser to “display” something in very simple terms. Within the “do_shortcode” function, we’re giving it an argument. That argument is the shortcode itself. We’re sending the value which is whatever shortcode you want to display. This can be a shortcode for a form, gallery or some other plugin shortcode you were provided. Then we close up the PHP section with ?>.

Now I won’t have to dig through my notes for this php display shortcodes snippet anymore. Hooray!

Resources

WordPress Documentation, Do_Shortcode
Describes this little function in immense detail with examples!



Coding a Button with CSS Only

When I found out how to create CSS buttons, it was like someone handed me a big, free piece of candy. Finally, no more time spent in Illustrator drawing buttons, variations for buttons and making sure all of them lined up and worked when someone moused over them! So here’s a beginner’s guide to creating some fancy CSS buttons!

First thing’s first, we have to create a link in HTML with a CSS class so we can style our fancy new button. Here’s what my code looks like:

 <a href="http://www.google.com" class="fancy_button">
Go to Google</a>

All right! So we got the first step in making a pretty button. But, if you preview your button right now, it’ll probably look something like this:

Go to Google

Yeaaaah, not the beautiful button we were expecting. That’s where the CSS class that we defined (fancy_button) comes into play. When we declared a class for the HTML link that we made, we’re telling the link to go search in our linked CSS Stylesheet for a class called .fancy_button and pull the styling options for our button from there.

Let’s add some styling to our link to make it more button-like. First I declare the link as a block element. By default, links are inline elements. We are making our fancy_button link a block element instead so we can manipulate different parameters such as background color. So, your CSS should look like this:

.fancy_button {
 display: block;
 }

In the above code, I’m declaring a CSS class named fancy_button so our link will know where its class styles are being referenced. Then I declared a display: block to make the link behave like a block element instead of an inline element. It still won’t look like much if you preview things at this stage. But let’s add a background color and see how that mixes things up:

.fancy_button {
 display: block;
 background: #62869b;
 }

Your button should now look like this:

The button has a background.

The button has a background.

Still doesn’t look like much of a button, right? Part of that is because there are no defined widths or heights for our button. So it assumes an automatic height, and an automatic width. The nature of a block element is to assume that it should take up the entire width of a page unless told otherwise. Let’s tell it otherwise now.

I’m going to give my button a set width so it doesn’t stretch all the way across my page, and I’ll give it a bit more height so there’s some padding between my link name and the edges of the button. Here’s my CSS code now:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 }

And here’s what your button should look like now:

It's slowly coming together.

It’s slowly coming together.

Some problems with our button still, but let’s remedy the most immediate one which is the text of the button sitting in the upper left. We can resolve this issue by using some padding on the text to push it down into the middle and then center aligning it on the button:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 25px 0 0 0;
 }

OK, I added a text-align that centers our text and then some padding to push our link down to the middle. I arrived at the padding amount of 25px at the top by dividing 50 in half. You can do this to other height values too. For example, if you had a button that was 20px high, you’d push your text down by 10px or 20px divided in half. Anyway, here’s what the button looks like now:

Now things are aligned properly.

Now things are aligned properly.

OK, let’s do something about that ugly font and link color. I’m going to go with a web standard to keep things easy, but I’ll definitely do something about that default blue. And while I’m at it, I’m going to get rid of the underline too:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 25px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 }

I’ve added a font declaration that told my button to display the text as 12px Verdana (and some fallbacks), with a white color and to get rid of that unnecessary underline. Now here’s what things look like:

Text looks a bit better.

Text looks a bit better.

Before we go on to modify what the button will do when someone mouses over it, let’s fancy it up even more with some rounded corners to make it a little more interesting to look at:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 30px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

I added a border-radius of 15px that will affect all four corners to my button, and since border-radius is one of those CSS3 things that are in the works, I’ve included a browser prefix for Webkit and Mozilla-based browsers. Also I’ve noticed the text on our button doesn’t look like it’s sitting quite in the middle. So I increased our padding from the top to 30px. Here’s what our button looks like:

looks more button like, already.

looks more button like, already.

I’m pretty happy with the button right now. So let’s go on and define how the button will react when a user mouses over it. For this, we’re going to need a pseudo class that does something when a user hovers (or mouses) over the button. Here’s my CSS:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 30px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 -webkit-border-radius: 15px;
 -khtml-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

 .fancy_button:hover {
 background: #3e5a6b;
 }

I used a pseudo class on my .fancy_button class to tell it to change its background color when someone hovers their mouse over the button. So now when you visit your button, someone hovering over it will change the button’s background color to something darker:

Hovering over the button makes it a darker color.

Hovering over the button makes it a darker color.

That was vastly easier to do than in the old days when you had to work with Javascript, or replace images in your CSS. At this point, you should have a pretty nicely working button. You can take it to the next level too and add shadows, gradients, and even transitions. But maybe that’s a tutorial for another day–or maybe you want to play around with that stuff on your own and see what masterpieces you’ll come up with.

Click here to download the source code for this tutorial.

Good luck on your button creation adventures!



Choosing a Good Web Host

I’ve encountered a lot of situations where clients are having trouble with their web host. Most often, it’s related to how slow their website is loading after adding a content management system to their previously static website.

Content Management Systems (CMS) such as Drupal, WordPress, Joomla, etc. tend to add a bit more load to a web server compared to static websites coded in strict HTML and CSS. This is because CMS sites have to interact with the web server with more frequency whereas HTML/CSS only sites rely on less communication with the server. In short, the more a website communicates with a server, the longer it takes to load the site.

Before we talk about choosing a web host, let’s identify some different hosting choices. I’m only going to list examples for the most likely options that a small business client might want to choose.

Free Hosting
I think most web designers these days started out sometime in the 90s with a free website that they had hosted somewhere like Geocities, Angelfire, Homestead. Most of these free hosting services are now obsolete. I still remember the day Geocities went down (October 26, 2009). New free hosts are available such as biz.ly, FreeHostia and Wix. If you’re running a business website, it’s probably a good idea not to use a free host as they are often limiting in spacing, bandwidth and sometimes have uptime issues and sometimes including advertisements on your web site in exchange for hosting. Free Hosting services almost always place your website on the same server as many other sites. This can cause your site to load slower.

Some free hosting solutions…

Biz.nf – Offers free hosting with no ads on your site. You can also get a WordPress, Drupal, Joomla, etc. CMS up. The catch is you’re only allowed 250MB of space and 5GB of bandwidth.

Wix.com – Free hosting with a very easy to use website builder. The amount of storage and bandwidth you’re allocated as a free user is not clear, but their first tier paid option gives you 500MB and 1GB of bandwidth so you can assume the free tier may be less than that.

FreeHostia.com – Gives you slightly more bandwidth than Biz.nf and includes support for content management systems as well. 250MB of space and 6GB of bandwidth. You must pay for and provide the domain yourself.

The above are just a small sample of free hosts. I always recommend clients move away from free options when they’re dealing with a business site. If the site is personal in nature, a free host might be all you need. But if you want your site to work for you, draw in potential customers and reflect professionalism, it’s best not to consider the free options.

Shared Hosting
One step up from Free Hosting is Shared Hosting. Shared Hosting costs money, though very often the fees are fairly low. This option places you on the same server as other websites too. Shared hosted sites are often sharing servers with hundreds and sometimes thousands of other sites. Most of the time, this arrangement doesn’t cause loading problems but if a host overloads their server or if one website uses a ton of resources, you may experience some loading issues as well. If you’re on a shared hosting plan, you can actually do a look up to see how many other sites (and who they are) are sharing your server. Check out Reverse IP on DomainTools to see how your website is doing. Generally speaking, the more sites that are on a server, the slower it will be–especially when it comes to using a CMS.

Update 1/4/2015 – I’ve recently had to amend my list of recommended Shared Hosts because I discovered a couple of them had been acquired by EIG, having spent some time hosting with EIG/having clients hosted on an EIG account or one of its owned companies, I can’t recommend their services. I’ve replaced two of the three recommendations as a result.

Hawk Hosting – $2.99/month for 10gb of space and unlimited bandwidth*. Hawk Hosting is speedy and reliable. I’ve had one client host with them and had no problems with their server or responsiveness.

LiquidWeb – $14.95/month for 5gb SSD space and 240gb bandwidth. LiquidWeb is upfront about what you pay for and what you’ll get, which is always a plus. They also offer their space on an SSD which provides a nice speed boost for load times on your site. Their customer service is also exceptional.

Dreamhost – $8.95/month for unlimited space and bandwidth*. Dreamhost boasts that it’s optimized for WordPress and largely has a decent reputation as a shared host. Reasonable uptime, server responsiveness and of course all the scripts you want.

*Now, a very common theme you’ll notice with some shared hosts is that they’ll say they offer “unlimited” space and bandwidth. While this might be true in theory, in actuality, what’s happening is the host is betting you won’t use a ridiculous amount of resources on the server. It’s not unheard of for a very popular website to consume thousands of GB of bandwidth every month and if a shared host finds someone is being greedy, they might try to throttle back the user either by slowing down their site or even just sending them a notice that their site is consuming absurd amounts of resources and that they should either upgrade or stop being greedy. So while “unlimited” might look like a great deal, keep in mind that it’s only unlimited up to a certain point.

Reseller Hosting
Getting hosting through a reseller is usually pretty similar to getting hosting through a shared host. The reseller will often have the same level of service as the shared hosting operators, but may provide different levels of support.

Virtual Dedicated Server or Virtual Private Server
Virtual Private Servers (VPS) load you up on a server with other sites but divides that server into virtual sections. VPS services tend to cost more than reseller or shared hosting plans. You aren’t technically getting your own server, but you are allocated a specific amount of server resources that no other site but yours can use. This solution will let your site load fast because it’s not sharing RAM or CPU with anybody else and are given root access to their virtual server allocation. Sometimes VPS setups require you to update and maintain your own server section unless the provider offers managed services.

Some VPS providers include…

Knownhost – Offering a VPS starting at $25/month for 25GB of space, 3000GB of bandwidth and 1024MB of RAM. Knownhost also offers managed services for their VPS customers. As with most VPS providers, sites load fast, you run what you want on your own space and you get root access.

Linode – Starts at $20/month for 48GB of space, 2TB of bandwidth and 1GB of RAM. You are responsible for maintaining, securing and updating your own VPS. Sites will load fast, you run what you want on your space, and you get root access.

BigScoots – $39.99/month for 40GB of space, 500GB of bandwidth and 512MB of guaranteed RAM. BigScoots also allows for a fully managed VPS. Once again, fast load times and you do what you want with your space.

One thing that makes initially causes some raised eyebrows is why a VPS costs so much more than shared hosting and doesn’t offer unlimited resources. Remember that the promises of “unlimited bandwidth, space, etc.” aren’t really unlimited and with a VPS you get guaranteed access to bandwidth, space and RAM on a server. This means you aren’t sharing with other sites which guarantees your site will be served up fast.

Dedicated Hosting
Dedicated Hosting will allocate you with your own web server with no one else on it. You still don’t technically own this server and are more likely just leasing it, but you will be the only customer using it. This ensures fast load times but also puts all responsibility for that server on you including maintenance and updates. Some dedicated hosting providers will also offer managed services for additional fees.

Colocation Hosting
Frequently the most expensive option. Colocation hosting means that you own a server but that a company is housing that server for you in a certain location. While the company is housing that server, you pay the company for your server’s use of their electricity, internet connection and sometimes maintenance. Sometimes colocation hosting doesn’t offer maintenance outside of your server being housed in a location and you will have to visit your server to perform maintenance yourself. Colocation is often fast, though all speed and reliability is up to you to maintain and determine.

Cloud Hosting
A relatively new addition to hosting options. Cloud hosting services let you put your site up on a provider’s cloud servers. This ensures that your site loads quickly and has the added bonus of ensuring your site’s up time is as good as possible since your site doesn’t have to rely on just one server. Cloud hosting is often billed on a ‘per use’ basis.

Some cloud hosting providers…

Amazon AWS – Amazon Web Services is a powerful cloud hosting solution. They bill per use and have a ton of different plans and options. They also have a free one year trial if you want to test things out. Like with all cloud hosted sites, you get lightning fast load times and redundancy. The catch with cloud hosting is that you have to figure it out first ;-).

Rackspace Cloud – Another powerful cloud hosting solution. They offer bill per use as well as a fully managed option that will run you $100/month on top of bill per use.

Joyent – Offering cloud hosting services that are bill per use. Lots of options to choose from too.

I typically don’t recommend cloud hosting to most clients as they tend to be start ups or small businesses whose websites don’t need the power of a cloud hosting solution. Cloud hosting is very powerful and will hopefully continue to grow to a point where the service becomes less expensive. Who knows? We might all be hosting in a cloud someday. 🙂

Private Hosting
Private, personal or home hosting solutions involve someone running a server out of their home. Sometimes this involves running a normal desktop computer or even a server rack out of a residence. The server or computer would draw electricity from the residence and use the residence’s internet connection. Maintenance and uptime depends solely on the individual running the server and the cost may vary.

Choosing a Web Host

There are a lot. And I mean a lot of different web hosts out there and many of them offer pretty similar services and prices. It really comes down to what you need in a web host.

Low on budget and just need a site up with reasonable uptime?
Go for a shared hosting package. I can recommend either Bluehost, HostGator or Dreamhost. All three are big companies, are likely to stick around for a while and offer reasonably good service. Bluehost is pretty good, has good uptime and offers a fairly competitive price for their service. HostGator and Dreamhost are also good options to consider for shared hosting.

Want to run WordPress/Drupal/Joomla etc.?
Any shared host worth their salt will offer you the ability to run a WordPress site. It’s almost a given that VPS options, dedicated servers, cloud hosts, and so on will let you run WordPress too. If you’re paying a web host and they don’t offer you the ability to install a CMS or run other common scripts, consider moving to a less restrictive host. If you’re paying for it, you should at least get some freedom for your buck.

Having problems with slow load times for your site?
If you’re on a shared host and you find your site is slow or just not performing the way you want it to, consider switching to another shared host. Unfortunately, when it comes to shared hosting, the speed your site loads is entirely up to the server, what other sites are doing on the server, how many visitors those other sites are getting, and the hardware of the server itself. If one shared hosting provider has been giving you absurdly slow loading times, maybe it’s time you considered other options. Before you move, check to see how many other sites are hosted on the same server as you: Reverse IP Lookup. I’ve had clients on servers with only a couple hundred other sites that were slow because of server issues, and clients on servers with up to twenty-five-thousand other sites which were slow because the server was just overloaded.

Need consistent load times and don’t want to share?
A VPS is good if shared hosting hasn’t been giving you what you want. Keep in mind that moving off of a shared host and onto VPS, Dedicated, or Cloud will increase your hosting fees per month and require you to know a little bit more about the administration of your server. Not all website owners find it necessary to get off of a shared host.

Is cheaper generally worse than more expensive?
When you’re dealing with hosts in a similar line of business ie. Shared Host, or VPS Provider, or Dedicated host, the differences in cost between one or the other isn’t necessarily indicative of their quality or level of service. For instance, you might find yourself paying two to three dollars more per month for a Shared Host that’s slow, unreliable and just generally not very good. Or you could just be spending $3/month for an excellent Shared Host. If you’re not happy with the way your host is treating you or the services they’re providing for what you’re paying them for, there is a huge amount of other hosts available. The market is big and open and the ultimate say is up to you.

Are well-known hosts better than lesser known hosts?
Reputation does count for a lot these days, but well-known hosts aren’t necessarily always better than lesser known ones. Some well-known hosts might not offer as many features as a lesser known one. Larger hosts might also have to deal with more customer sites and may have servers that are more frequently overloaded. Then again, sometimes a larger host offers something a smaller one doesn’t.

Should I get a cloud hosting account?
How knowledgeable are you in terms of cloud computing technologies? How much time do you have to dedicate to learning cloud computing? Does your website absolutely need that much power? And how many resources will your website actually consume? Cloud computing is excellent and a very exciting new option, but it may not be the right choice for everyone and someone completely new to the technology will take some time because it can be a pretty steep learning curve.

Ultimately, if your site is going to small at first and you don’t need it to run super resource heavy scripts or systems, a shared hosting account will probably be a good for for 90% of you. If you want more power, and more control, you can see that there’s plenty of choices and options available. The providers mentioned in this post are just a drop in the bucket.

Resources

Research as a Hobby, List of EIG Owned Companies
A handy list compiled by Research as a Hobby that lists all the companies owned by or run by EIG. Having run into them a few times, I cannot recommend any company under the EIG umbrella for the poor support and server uptime I’ve experienced with them. Maybe things will improve, but at the time of this writing, I cannot recommend their services or products.



Colors on the Web RGB vs. HEX vs. HSLa

For people just starting out in web design, finding out about all the different languages and their various nuances is difficult enough. Add in the fact that web languages change on a daily basis–even plain old HTML and CSS have hundreds of considerations to take into account, and all this stuff can be pretty overwhelming. One of the sources of confusion that I’m often asked about is the difference between RGB and HEX and why someone would want to use one or the other.

The Definitions

Before we get into when you use one or the other, we have to do some defining and for this, we’ll go back to a topic near and dear to my heart: Color Theory.

RGB or Red/Green/Blue is a color model. Similar to the more familiar RYB (Red/Yellow/Blue) model that most people are more familiar with if they’ve studied the color wheel. RGB is the color model used for websites. We use RGB instead of RYB because it is additive. An additive color model is one that works for illuminated media–which is a fancy way of saying, content that lights itself. Additive can also be thought of as colors that add up to emit light. When you’re using the RYB color model (or even the CMYK model) you should be working with subtractive color. This means that instead of lighting itself up, the content is displayed on a surface where light is bouncing off of it. This is because subtractive colors work by reflecting and absorbing light.

The Difference Between HEX and RGB

Back to the question at hand. This is an example of a HEX color code:

#33743b

This is the same HEX color code in RGB, where red is the first number, green is the second, blue is the third:

51, 116, 59

Having looked at those two, you’re probably wondering why on earth you would ever use RGB, considering the first example is a lot easier to remember and type out. The thing is, both versions have different uses, even if the end result is usually the same.

The one time you may wish to convert from HEX to RGB is when you need to access the opacity or alpha of an element. At which point, you would use RGBA. A typical RGBA value would look like this:

51, 116, 59, 0.65

In the above code, the first three values represent the Red, Green, Blue values and the last value (0.65) represents the alpha. At 0.65 alpha, we are seeing the above colors at 65% opacity.

Then There’s HSLa

HSLa stands for Hue Saturation Lightness alpha. HSLa somewhat resembles RGBA, except the first value stands for our Hue–or color. We declare our colors by looking at the color wheel. The wheel is–obviously–a circle where reds are around the 0 degrees to 360 degrees area, 120 degrees are our greens, and 240 degrees are our blues.

Saturation is expressed as a percentage. When we talk about the saturation of a color, we’re talking about how much grey it has. AT 100% the saturation is all the way up and we are viewing the color fully.

Lightness is also expressed as a percentage and describes how much black or white we have in a color. At 0% we have full black. At 100% we have full white.

Opacity works as a decimal like it does in RGBA, where 1 represents fully opaque, 0 represents fully transparent, and everything in between is partially opaque. For example, 0.45 means that an element is 45% opaque.

A typical HSLa value looks like this:

310, 30%, 20%, 0.65

Writing CSS for HEX, RGBA & HSLa

Here are some examples for how you would write a CSS rule for a paragraph tag using these three values.

First, let’s look at HEX:

p {
color: #25547f;
}

Here’s that same declaration, only in RGBA this time:

p {
color: rgba(37, 84, 127, 1);
}

And here’s the same declaration in HSLa:

p {
color: hsla(209, 55%, 32%, 1);
}

Which one to use?

HEX is very attractive because it’s short and simple to remember and type out. But HEX might not work for you in all situations, which is when you may wish to consider one of the other two methods. Both of which have their pluses and minuses.

RGBA is well-known and supported in older versions of Internet Explorer (9 and older). It has an additional field for alpha values which come in handy when you want to work with opacity.

HSLa is a newer, more intuitive way to work with colors. Unlike RGBA where we have to mesh some numbers around to get the color we want, we can grab the Hue then work with percentages to get the saturation and lightness levels that we need. HSLa also includes an alpha value for opacity.

The one thing to note regarding HSLa is that, like I said above, it isn’t supported by older versions of Internet Explorer. So if you were going to use HSLa, you’ll need to rely on some fallback codes and this could mean bringing in RGBA or HEX. A typical fallback code for an HSLa statement would look like this:

p { 
    color: #25547f;
    color: hsla(209, 55%, 32%, 1);
}

In the above code, the first declaration is a HEX value that’s meant to work as our fallback. The second declaration is for HSLa and will be used for browsers that can support it.

Some stuff to make things easy

Some designers/developers use programs that favor HEX over RGBA, and some even use programs that have built-in tools for HSLa, but what if you find yourself needing to convert one to the other? Here are some online tools to help you convert these values back and forth:

HEX to RGB: Converts HEX values into RGB.

RGB to HEX: Converts RGB to HEX.

HSL Color Picker: Can convert HEX or RGB into HSL.



CSS Tutorial: Simple Text Transitions with CSS3

With CSS3 comes some very fancy effects including text transitions that you can use to create a bit of animation and interest in your websites. Some CSS3 transitions work with pseudo classes to create an effect when a user hovers their mouse over a link or image. I will only be covering transition effects for links or text in this post.

What I mean when I talk about a text transition is something like this:

Hover Over Me!

See how the colors shift and change gradually? Good thing you can easily create a simple text transition like that with almost no code at all. Here’s the most basic text transition you can write in CSS:

a { 
   color: #888777; 
   -webkit-transition: color 1s ease-in;
   -moz-transition: color 1s ease-in;
   -o-transition: color 1s ease-in;
   -ms-transition: color 1s ease-in;
   transition: color 1s ease-in;
} 
a:hover {
   color: #668899;
}

The above chunk of shorthand code has a couple of things going on. First are the two link rules, one sets the styling for the general link, the other one sets the styling for the link when someone hovers over it. You’ll notice, rather obviously, that we’re applying the transition effect on the general link rule.

The Anatomy

When we declare a transition, we have to target the specific browsers that contain the functionality for it. In the above code, I’ve targeted three major browsers and I have a general “transition” declaration at the end. In this case, “-webkit-transition” refers to Webkit based browsers (Chrome, Safari). “-moz-transition” refers to Mozilla browsers (Firefox), -ms- is Internet Explorer, and “-o-transition” refers to Opera.

The four values in a transition declaration are the value to be transitioned, duration of the transition, type of transition, and transition delay.

For the value, we are declaring that the color should be affected here. For the duration, we are saying it should only last about a second. You can draw this number out longer, but a 5s transition for a hover over link can get pretty silly. Finally, we declare the type of transition, which in this case, is ease-in.

Breaking it Down

Let’s break down the above shorthand CSS declaration and view transition in its basic components. If we were to dissect the above chunk of code into its base elements, it would look like this:

a { 
   color: #888777;
   -webkit-transition-property: color;
   -webkit-transition-duration: 1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0;

   -moz-transition-property: color;
   -moz-transition-duration: 1s;
   -moz-transition-timing-function: ease-in;
   -moz-transition-delay: 0;

   -ms-transition-property: color;
   -ms-transition-duration: 1s;
   -ms-transition-timing-function: ease-in;
   -ms-transition-delay: 0;

   -o-transition-property: color;
   -o-transition-duration: 1s;
   -o-transition-timing-function: ease-in;
   -o-transition-delay: 0;

   transition-property: color;
   transition-duration: 1s;
   transition-timing-function: ease-in;
   transition-delay: 0;
}

You can see how all the different declarations of transition work together now that they’re broken up from the shorthand declaration. However, I don’t really want to spend all day writing out my transitions in long chunks like that, so the short hand version is more efficient and works the same way.

Delays

Notice the addition of a “transition-delay” declaration that is set to 0 in the broken down declarations. You can use transition delay to tell an element to wait before beginning a transition. This allows you to stagger your effects for an interesting visual. To declare a delay in a shorthand declaration, simply add the delay value after the duration value. Like this:

a { 
   color: #888777; 
   -webkit-transition: color 1s 2s ease-in;
   -moz-transition: color 1s 2s ease-in;
   -ms-transition: color 1s 2s ease-in;
   -o-transition: color 1s 2s ease-in;
   transition: color 1s 2s ease-in;
}

The above chunk of code tells my link to wait two seconds before it starts to run the ease-in transition for my link. Not very practical for a link, but if you were working with multiple images or pop-ups, this could come in handy!

Types of Timing Transitions

Ease-in is only one of the timing transitions available. There’s a bunch more with W3 Documentation. Understanding and reading all that could take a full day. Here’s a quick run-down:

Ease: Begins an effect faster than it ends the effect (slower).
Ease-In-Out: Begins an effect slower than it ends the effect (faster).
Ease-In: Starts an effect slowly.
Ease-Out: Finishes an effect slowly.
Linear: Executes an effect at one speed.

Any one of these timing transitions can be substituted in for the above effect like this:

a { 
   color: #888777; 
   -webkit-transition: color 1s ease-in-out;
   -moz-transition: color 1s ease-in-out;
   -ms-transition: color 1s ease-in-out;
   -o-transition: color 1s ease-in-out;
   transition: color 1s ease-in-out;
} 
a:hover {
   color: #668899;
}

The above code will modify my link so that an ease-in-out timing transition will be applied to it instead of ease-in.

To add a level of complexity to your transitions, you can use the power of cubic beziers. Most of the time, if you’re just developing websites, you probably won’t need to mess with cubic beziers much. But, if you do and because I am barely competent with math (d’aww), I will let someone who is much better with numbers do the hard work to explain those. Check out The Art of Web for their excellent cubic bezier documentation.

There is also a super cool website where you can check out the various types of transitions and cubic beziers here: Cubic-Bezier

Transitions also work with images and can create some really cool effects. In fact, you can make entire slideshows with CSS transitions and images. But we’ll be covering that in another tutorial that’s coming soon!



CSS Tutorial: Using Text Shadows

I’m seeing more and more designs utilizing text shadows to increase legibility or create beautiful typographic effects. While I was planning my redesign, I wanted to incorporate the text-shadow effect to maximize the flat illustrative look that I was going for. Text shadows are a cool CSS trick that can apply a blurry or solid shadow behind your text. Here’s how to use them!

Probably the simplest text shadow you can make is the standard, solid shadow:

text-shadow: 2px 1px 0px #777;

In the code above, I’m using the CSS declaration “text-shadow”, which creates a shadow like this:

text-shadow01

The basic text-shadow declaration goes like this:

text-shadow: horizontal vertical blur #color;

So, if you were looking for a text shadow to cast from the lower right instead of the upper left, you would manipulate the horizontal and vertical positions in your declaration. So with that having been said, your declaration would look like this:

text-shadow: -2px -1px 0px #777;

And the text shadow would look like this:

text-shadow02

You can change the color of the text shadow, by altering the hex code at the end of the declaration (text-shadow also works with RGBA codes). Note: If you want to change the color of the text itself instead of its shadow, you just use a normal color declaration. Let’s say I want my text to be blue with a dark blue shadow this time. My declaration would look like this:

color: #669ae1;
 text-shadow: -2px -1px 0px #2f568c;
 

And my text would end up looking like this:

text-shadow03

Okay, so how does blur work for text shadow? Basically, you add blur by increasing the blur value from 0 to as high as you want. For example, if I wanted a bit of blur in my text shadow,  would alter the declaration like this:

color: #669ae1;
 text-shadow: -2px -1px 5px #2f568c;

The one thing to note is the third value behind the horizontal position value and the vertical position value. I raised that value from 0px to 5px and get a blurry shadow behind my text, like this:

text-shadow04

If that shadow is just too dark or too overwhelming, you can also reduce the shadow’s opacity through CSS. To manipulate the opacity, we’ll have to use the RGBA color value for our shadow instead of the HEX code so that we get some control over the opacity.

So, for example, if we took the code above and swapped out our HEX code for an RGBA value, we’d get this:

color: #669ae1;
 text-shadow: 2px 1px 5px rgba(47, 86, 140);

Now if we want to change the opacity, it is just a matter of adding one addition value to the end of the RGBA code. Opacity is measured from 0 – 1, where 0 is completely transparent and 1 is completely opaque. You use decimals within the 0 – 1 range to determine how opaque you’d like your shadow to be. I want mine to only be 50% opaque. So I would declare the opacity value as 0.5 like this:

color: #669ae1;
 text-shadow: 2px 1px 5px rgba(47, 86, 140, 0.5);

Note that the opacity value is declared inside of the rgba value and not outside. So the above code will generate my text shadow to make it look like this:

text-shadow05

Well, that seems less overwhelming at least. Text shadow, as you can see, is pretty simple to remember and use. But if you just need something quick to help you get up and running there is a generator for this that you can access here: CSS3Gen’s Text-Shadow Generator.



How to Remove the Smiley Face on WordPress

So you’re working with WordPress, possibly editing a theme, maybe making your own, or applying a theme you just downloaded. Everything is working OK and looking fine until you get to the bottom of the page and notice this:

Smile!

Smile!

What the heck is that smiley face doing there? At this point, you might be going through all your theme’s options or looking through your CSS and PHP files trying to figure out what the heck is generating that thing and how you get rid of it.

Relax. The smiley is actually a part of WordPress’ stats function. Basically they load a small smiley image onto your page so WordPress can collect information about how many visitors you have, which of your posts your visitors are favoring and so on. In fact, I’ll let WordPress field this question:

In order to tell you all the cool stats about how many visitors you’ve had, which of your posts are most popular, and how people get to your site, we need a way to track things.

We’re able to collect this information by loading a small image to your page when someone looks at it.

And we chose a small smiley 🙂

Source:WordPress.com

OK, that’s just fine and dandy, but what if that smiley is causing a lot of problems for your theme and you just want to get rid of it? Easy!

First, go into your WordPress installation’s Dashboard. Then click on Appearance > Editor. Most themes out there will default to show you the stylesheet.css file in your Editor. If you don’t see stylesheet.css immediately, try to find it on the right hand side where it lists the PHP and CSS files that your WordPress site uses. Sometimes, you may have to navigate further into your file system to locate the right stylesheet.css. But, for the vast majority of us, simply navigating to Appearance > Editor will take us to where we need to go.

Next, scroll down in your stylesheet.css file until you get to the very bottom and add this line of CSS code:

img#wpstats{
 display: none;
 }

Now click on the “Update File” button below your editor textarea and check out your website and the smiley should be gone!

For those of you who aren’t familiar with CSS or WordPress and want to know, “what did we actually do with that piece of code? And is WordPress still counting my stats?”

Yes, WordPress is still counting your stats. What we did with that piece of code was we hid the WordPress Stats image, which in this case, is that little smiley. So browsers will know not to display it, but the underlying purpose of it (to count your stats) is still functioning.

If editing or adding code to CSS or your stylesheet.css file makes you too nervous, there’s another way you can hide the smiley face. If your WordPress site is using Jetpack, you can disable the smiley by going to your Dashboard and clicking Jetpack on the menu on the left. Then click on the “Configure” button under “WordPress.com Stats”. Like this:

Click on the Configure button.

Click on the Configure button.

On the page that opens up, find the checkbox for the option that says, “Hide the stats smiley face image.” Check the checkbox, then click on the “Save Configuration” button at the bottom.

 

Check the box, then save it!

Check the box, then save!

Once you do that, check your website and the smiley face should be gone, but your stats will still work. And there you have it!



Starting a Business in Central Florida

What this article won’t do is go into the crazy details of starting anything more complicated than a sole proprietorship in Florida. I found information somewhat intimidating and more than a little bit confusing when I was filing my forms and I could only imagine the same could be said for many other creatives in Florida looking to kickstart their business. So here’s a simple, hopefully easy guide, to help you start your business. 🙂

Please keep in mind that this is just a general guide I wrote to help reduce the confusion of wanting to start a business, but not knowing where to start. This guide cannot ever hope to trump the expertise and advice you will get from a trained professional. You are always better off talking to people who are trained to assist you in starting and developing your business!

With that having been said…

The Deciding Stage

1. Decide if you are going to operate under a fictitious name or if you are going to use your legal name for your business. This is important to discern because it determines whether you need to file for a fictitious name or not. For example, if your name was Jane Doe and you want to start an outdoor cat apparel company called Calico Coats, you would have to file for a fictitious name. However, if you called it Calico Coats by Jane Doe, a fictitious name would not be necessary.

2. Decide if you wish to file for a sole proprietorship or an LLC. Which one works for you is entirely your choice. LLCs require a bit more paperwork to set up over a sole proprietorship, but does give you some more legal protection that separates your business assets from your personal assets. This guide is aimed toward sole proprietorships with fictitious names.

Before Filing

1. Before you file for a DBA (Doing Business As, the form that you fill out to register your fictitious name), you need to advertise your business in a newspaper that gets circulated in the county your business will be operating in. For most of us, the local newspaper will often have a section that allows you to fill out a form to declare your business. Most people do their fictitious name ad through Orlando Sentinel.

There are other newspaper who will also do fictitious name ads too. Just for information purpose’s sake, you can check out public notices on FloridaPublicNotices.com.

2. Get an EIN (Employer Identification Number). An EIN is a number provided to you for free from the IRS that you can use in lieu of your social security number. It’s very useful to have, can be applied for and received online and best of all, it’s free! You can apply for an EIN on the IRS Website.

Filing

1. Once your ad runs in the paper, you can finally file for your DBA (fictitious name). Filing can be done through the mail using this form, but most people find it more convenient to file it online here: Sunbiz.org Fictitious Name Online Form. The form itself is very straightforward. No trick questions or information you have to dig around for. It costs $50 to file for a DBA and you have to renew it every 5 years.

2. Check with the state to see if you need to file for state sales taxes: MyFlorida.com. If your business is required to collect and remit state sales taxes, you should register for it at the Florida Department of Revenue’s Website. Thankfully, this part is free.

3. Next you will need to file for tax certificates for your city and county. Special care should be taken here because cities can vary slightly in how they work. First, you need to file for your city business tax. Here are some of the links to various cities in Florida and the number you can reach them at for help:

The certificates are valid for one year from September 30 to October 1. What this means is, if you apply on February 2nd, 2013 for example. You are still required to renew by September 30th, 2013. At this stage, it may also benefit you to determine if you need to do anything special for zoning. This is especially true if you are renting. Contact your city’s business offices and they should be able to give you some straightforward information about zoning and if it is necessary for your specific situation.

4. When you have received your city business tax certificate, you will need to take it and the county tax application to your county’s tax collector office. This will cost you around $60-80 depending upon your city and county.

Once you’ve done all that, you should be good to go. Remember to renew every year with the city/county, calculate and remit your state sales taxes, renew your DBA every 5 years, and pay your taxes quarterly to the IRS using Form 1040ES and other tax forms you may be required to pay depending upon the exact nature of your business.



Questions to Ask Before Hiring a Web Designer

All too often I encounter clients who are unhappy with a website that they had designed because they were working with a web designer who a) didn’t communicate with them, or b) didn’t know what they were doing. This sort of thing happens way too much and continues to happen. So here are some quick questions you might want to ask the next designer you’re looking to hire. These questions are by no means comprehensive and you should still be considering questions like scope, experience, former clientele, and so on.

Can I see your portfolio?
It amazes me that some clients will trust a designer’s word when they can’t present their portfolio. A web designer should, ideally, have their own portfolio website. And that website should not be a template that they got somewhere else. A good web designer should either be competent enough with code to design and code their own website, or have connections to good developers who will turn their designs into actual, functional webpages.

What’s your design process?
Good designers have processes that they follow from start to finish. They have a clear understanding of the steps and the planning involved in getting your project up and running smoothly. At the very minimum, they should be doing research about your company’s competitors, goals, target audience, products and overall market. They need to be designing for the goal of benefiting your company. A good website is not just a pretty looking website, it should be an effective a marketing tool. If you ask a web designer to describe their process and they balk or just don’t have an answer, be very wary. There is a lot of planning and research that goes into a website.

Do you design and code?
There’s a difference between a straight up web designer and a web designer who also knows how to code. It may also be beneficial to understand the difference between a web designer and a web developer. Very few people are good at both design and development, while there are many who are awesome at both, people will tend to lean toward one or the other. The key answer to this question is finding out if your web designer can do more than make beautiful mockups. If they design a wonderful looking PSD, you need to find out if they can make it into an actual website, if they can find someone who can make it a reality, or if you need to source a developer on your own.

How will we be communicating and how often?
Communication between the designer and the client is a huge part of the success of a project. Many clients still prefer to meet face-to-face with their designer, but meeting online, communicating through email, the phone or over Skype has facilitated some flexibility. However you choose to communicate with a web designer, you need to ensure that once you sign the contract, your designer doesn’t disappear into a void and you keep in contact with them. If you ask a question about your project, your designer should be able to get back to you with an answer in a timely manner. If you can’t seem to locate him or if your designer never gets back to your messages, be wary.

Do you have a contract?
The lack of a contract from a web designer usually indicates two things: 1) They’re inexperienced, and 2) They are leaving both you and themselves open for problems down the road. Professionals operate on contracts. If you’re looking to hire a professional web designer, be ready to either present your own contract or review theirs. Contracts exist to product clients and designers alike, and operating without one is risky for both parties.

Do you use templates and can you build from scratch?
It surprises me how often designers use templates from websites like Themeforest, which can be good or bad depending upon what kind of changes and tweaks are taking place. Make sure you’re clear with your designer whether you want a template modification or a custom built website and that they are just as capable of creating something from the ground up as they are modifying an existing theme.

When all is said and done, hiring a web designer shouldn’t be too stressful so long as you know what to look out for and what to expect. There’s more that goes into making a good web designer than how many projects they’ve done or how fast they work. There are many designers who’ve been working in the industry for years who still don’t know what they’re doing. And there are many new designers who are awesome and are just looking for their first break.

Many clients find themselves working with web designers who don’t know what they’re doing or don’t have the company’s best interest in mind because the budget doesn’t measure up or the deadline is too short or the designer simply lacks the expertise. Be realistic about your goals, ask some good questions, look over the designer’s qualifications, and you should be able to find a good web designer who knows what they’re doing and will do their best for your company.



Two Easy Ways to Pair Typefaces

Typography is the love of most graphic and web designers. But for some, it can be an intimidating task. Pairing together the right typefaces to create a cohesive design comes from years of experience studying type and understanding how one typeface interacts with another can depend on a huge amount of factors. Here are some tips for combining and using different typefaces on the web to help get the edge off of typography.

There are many different methods that designers use to determine typeface combinations. I will go over some of them in this post and hopefully give you some ideas on how you can pair off type for your next project.

Method 1: Type Systems and Super Families

Type Super Families are typefaces that have a large variety of variations. Within a super family, one typeface could have different variations for body text, headers, subheaders, italics, there may even be a serif and sans-serif version of the type. One example of a type super family is Lucida:

Lucida Std, Lucida Bright, Lucida Grande.

Lucida Std, Lucida Bright, Lucida Grande.

Super families generally contain typefaces with relatively the same structures and proportions, thus ensuring the types in a super family are harmonious but at the same time have elements that allow them to stand out from one another. Some examples of super families in use:

fago_superfamily

meta_superfamily

Method 2: Compare and Contrast

Contrast in choosing typefaces can mean a number of things. What it achieves is essentially an accentuation of the type that you use. You can mix and match things in different ways to achieve contrast. For instance, you might want to pair a sans-serif typeface with a serif. Or round typeface with an angular one. Maybe you could also mix a fun type with a neutral one.

When relying on contrast for your type choices, try to focus on weight, scale, proportion, and texture. Remember that you are not looking to draw attention to the type by highlighting their differing personalities. Things need to be done in moderation when choosing type too. Try looking for elements that help discern hierarchy while also harmonizing the text.

Some examples, using contrast by paring a sans-serif with a serif:

frutiger_sabon

garamond_futura

And an example of a distinct type paired together with a neutral one:

clarendon_din

With a little bit of time and thought, pairing typefaces together won’t seem as intimidating anymore. If you’re interested in other ways to pair together typefaces, check out these helpful articles:

Best Practices of Combining Typefaces
Four Ways to Mix Fonts

 



Resources: Some Useful Design Books

Most of my first two years of higher education were spent in a dark room with ten to fifteen other people, drawing from a still life or live model. Sometimes we were loosed outside to sit in the frigid autumns of Canada to commit a landscape to paper. Later on, I started getting more design, more web development, more programming and the days spent sitting in the frigid autumns of Canada turned into days and nights sitting in the frigid autumns of Canada with a laptop. In that time, I was given a list every semester of the textbooks I’d need. I would go out and purchase these textbooks and promise myself every single semester that I would read them and be enlightened. I amassed fifty or so books, possibly more than I don’t remember and I didn’t read a single one all the way through.

It wasn’t until I graduated that I finally sat down and went through any of those books. Well, it’s never too late to be enlightened. Of those books, here are some useful design books (including some I went out of my way to read after graduation).

Some Useful Design Books

Design is a Job by Mike Monteiro
Monteiro is one of the founders of Mule Design, and is a treasure trove of practical knowledge related to the web design industry. He talks about everything from the importance of contracts, how to deal with clients, how to work with other creatives, and how and why it’s important you get paid for what you do.

Thinking With Type by Ellen Lupton
Not the most detailed book on type, but if you’re intimidated by typography, Thinking With Type lays out the basics in an easy to digest manner. Great for undergrads who need to get their feet wet in typographic basics. If you’re a practicing professional who just needs a refresher, this book is a great quick read.

The Elements of Typographic Style by Robert Bringhurst
Bringhurst’s book seems to be required reading for most type enthusiasts and designers. It outlines ideas and theories all related to typography and design. I found it to be equal parts clever and useful. Be aware that this can be a bit of a slog, so take your time.

The Elements of Typographic Style Applied to the Web by Richard Rutter & Steve Marshall
The quintessential typographic style concepts applied to web design. I found this invaluable, and best of all, it’s free!

Making and Breaking the Grid by Timothy Samara
Describes various grid structures used in graphic design that could easily be reworked for the web as well. Invaluable book about organizing information and presenting it in fascinating ways.

Responsive Web Design by Ethan Marcotte
Tablets and mobile device use is on the rise and web designers need to stay on top of the game. Responsive Web Design applies CSS and Design techniques for the mobile device.

There are more useful design books where that came from because design and especially web design is an ever evolving beast. Reading and gathering inspiration is as much a part of being a designer as actually designing.



A Short Bit About Graphic Design Contracts

The second most boring possible subject involved in being a freelance designer would have to do with design contracts. The most boring are taxes. Whoopee. But contracts are essential for the operation of your business. This write-up isn’t meant to be a full contract tutorial, or a complete list of things you need to include in your contract. There are many write-ups out there that already do this and you can find them in the Resources I list at the end of this post.

Why You Need a Contract

Almost every freelancer has a story where they did a bunch of work for a client and then never saw the money. Or they did work that wasn’t remotely related to what they wanted or anticipated on doing for a client. Or a client disappeared halfway through the work never to be seen again. It’s not a remote possibility for a freelancer to find him/herself in a situation where their client has different expectations. It’s also, sadly, not rare for a freelancer to get stiffed on a project. Nothing would make designers happier than if all their clients were good clients and there was no such thing as late payments or payments that never happened. But take one look at The World’s Largest Invoice, and you’ll realize this happens every day. While having a contract won’t guarantee that your clients go from flaky to awesome, it will give you a base that outlines what you and are not responsible for and how you want to be paid.

Contracts aren’t one-sided documents either. They aren’t all about you and getting you what you need. Contracts should be a fair agreement between you and your clients so it should tell them what they can expect from you, in how much time, for how much money, and describe some contingencies in case things don’t work out well–whether it was because of a delay on your end or theirs. In general, a design contract should include detailed information about who is responsible for what, the timeline, the scope of the project, the fees, amount of revisions available, how the project will be deployed, copyright terms, warranties, maintenance agreements and many more. Remember, this list is lacking in some necessities and details that you can pick up at places with more dedicated write-ups on design contracts such as The Design Cubicle and Tuts+.

Don’t Make it Painful

While contracts aren’t the most exciting of topics and most people don’t relish on reading or signing them, they are essential pieces of the project as a whole. You can help make your contract less of a chore to go through by passing on the legalese and write it in something both you and your client can understand because if both of you understand exactly what’s in the contract, there’s less chance of one of you accidentally misinterpreting it. Now, just because you’re presenting a contract written in more casual terms doesn’t mean your contract isn’t a serious business tool. You don’t want an intimidating contract, but its purpose as a business document should not be understated or compromised. 24 Ways has an excellent example of a non-intimidating, casual language contract that you can use as a reference.

Sign the Contract

Freelancing brings some wonderful rewards, connections and friends. I know you’ll do a good job. You know that you’ll do a good job, but your clients don’t know that yet. They have to trust you, based upon the reputation that you built around your previous projects. Of course, if you’re first starting out with nothing under your belt, it can be intimidating and downright terrifying when you approach a client with your contract in hand and ask them to sign it. After all, there’s a stigma out there that contracts are “unfriendly”. But there’s nothing unfriendly about a document that’s meant to protect both the designer and the client. Having both of you sign off on the terms will only help solidify the importance of the project and your professionalism as a designer. Never start a project until you get the contract signed and do not make concessions on your contract unless absolutely necessary and this goes for you as well as your client.

Big Dogs Play Different

Depending on who your clients are, you might not get a chance to present your own contract. Small business, start-ups, non-profits, and one man operations don’t usually have specifically written design contracts to hand off to you. So when you’re working with smaller organizations, you’re more likely to be able to sign a contract without involving any lawyers while working directly with your clients to set the terms that both of you can agree on. When you get to larger organizations, things change–sometimes for the better. Sometimes not. Large organizations can be fun to work with, but when it comes to contract negotiations, things you wouldn’t think you’d have to worry about crop up. For one thing, you might find yourself in need of a lawyer who speaks to their lawyers because, as a very wise man once said, “lawyers speak to lawyers”.

If you’re dealing with a larger company that presents you a contract, go over it with a fine toothed comb. Ask for legal advice if there’s anything you don’t understand or aren’t 100% clear on. A lot of freelancers avoid hiring lawyers because of the idea that lawyers cost a lot of money. But think of the scenario you’d have to deal with otherwise when you’re working with someone else’s contract. You could come out with a portion of the contract money going to your lawyer, but you are otherwise paid and happy. Or you could discover halfway through the contract that you violated a term you missed or didn’t fully understand that could get you in a ton of trouble with your client. If you aren’t sure whether you need to lawyer up or just need to ask a small legal question related to the design industry, try My Lawyer Gabe, a site set up by aforementioned very wise man and his very wise lawyer.

In the End, It’s About Your Work

While being good with your contract negotiations is fabulous, remember that at the end of the day your contract is a small part of the whole and getting a contract signed is only the beginning of the work. It makes sure important details are outlined on paper and it helps to guarantee a fair and level playing field for you and your client. It’s a serious document, and it’ll be up to you to live up to your promises because once you sign that contract it’ll be time for you to do what you’re really good at: Making awesome things.

Resources

The Design Cubicle – Has a general list of items you should include in your contract.
Tuts+ – A detailed list of some of the essentials items on a contract.
24 Ways – A pleasant example of a concise but casual contract.
My Lawyer Gabe – Friendly legal advice about the design industry.



Not So Innocent WordPress Themes

The ease of setting up a WordPress blog is fairly common knowledge. WordPress themselves talk about the easy 5-minute installation. And it really is that easy! What isn’t so easy, and what a lot of people often overlook, is the maintenance and security of their blog after the initial installation.

WordPress security is about as exciting as–well, it’s not exciting at all. But like most unpleasant, but necessary things in life, your blog’s security shouldn’t be shuffled into a dark corner and never considered. This post aims to bring to light, one of the most overlooked aspects of running a WordPress blog: Malicious Themes.

While a large portion of malicious themes are free, there are some paid themes that might not be quite so innocent either. Your best defense against having your blog compromised is knowledge and the understanding that no matter how large, small, popular, or private your blog is, malicious code can infiltrate it.

I run a very small blog, do I still need to worry?
Yes. Compromised blogs don’t have to be big or popular. Most people’s blogs get infected with malicious code because they inadvertently installed something bad–not because they were directly targeted. It doesn’t matter how small your blog. Not even if you write in a blog solely for your family and friends, if you download and run a lot of unverified plugins and themes, you run the risk of compromising your blog’s security.

Do I need to a security plugin for my WordPress blog?
Some people run security plugins for their blogs, some people don’t. I can’t advise whether you should or not. It’s a personal decision with pros and cons. If you do choose to use security plugins for your blog, make absolute sure you are installing and using a trusted plugin. Read all the reviews, read reviews on different sites, make sure you are downloading the plugin from a trusted site, see what kinds of problems users have with it. Security plugins can be a lot of work, sometimes they ingrain themselves deeply into your WordPress installation so uninstalling them might be tricky. What you can do if you don’t want to run security plugins is know the risks that are out there and be vigilant about what you install.

With those two questions out of the way, let’s talk specifically about malicious themes. A theme might seem harmless enough. After all, customizing the appearance of your new blog is probably one of the more fun parts of the setup. But not all themes are created equal and not all themes are innocent.

Some theme authors will embed code that redirects, links to, or otherwise manipulates the theme to an unscrupulous website. There’s nothing wrong with a theme author linking back to their own website, and a link back to the original author is common practice. But there are some authors to embed links to sites with poor reputations. Sometimes these links can drag your own blog down, so if you’re trying to get into Google’s good books, having links to bad sites embedded in your free theme that you don’t know about won’t look good. Sometimes it isn’t easy to find these links in your theme because they might be encoded.

Base64 encoding is one of the things to be vigilant about. Very often, the presence of Base64 encoding implies that the theme author has something to hide. Perhaps it’s malicious code, perhaps it’s a link to a bad website, sometimes the purpose is legitimate but can you really take that chance? Decoding Base64 is straightforward. You can plug it into any number of websites you find on Google and discover exactly what’s being hidden from you. I recommend this site: Base64 Decode and Encode. There are a lot of reasons why Base64 encoding exists, but there better be a very good reason for it to exist on your website in the form of a theme.

Another sad development resulting from the glut of free WordPress Themes are ripoff themes. We have counterfeit handbags, counterfeit perfume, counterfeit toys, why not counterfeit WordPress Themes? These are themes that may have been offered as pay themes or were good free themes that were taken, altered to add some malicious code then released as “fresh, new, unique” and of course, “free”.

So how do you avoid downloading a bad theme?

1. Stick to official channels. Googling, “Free WordPress Theme” might yield tons of results, but who’s to say those websites are legitimate and offering good themes? Stick to WordPress.org whose theme repository contains a ton of perfectly nice free themes, Smashing Magazine and other trusted websites often recommend good free themes. But like with all things, you shouldn’t rely solely on a recommendation alone. Read other reviews, and do your own investigations before downloading and installing anything.

2. Consider paid themes. ThemeForest and WooThemes have huge selections of WordPress themes available, many of them are feature-rich, SEO optimized, supported by the authors/developers who made them, are versatile, and look beautiful.

3. Hire a designer or developer. Of course, I have to include this! 😉 Hiring a designer/developer to make you a theme isn’t for everyone–especially not for most personal blogs, hobby blogs, or blogs you keep just for fun. This can get expensive and it still requires plenty of research, but if you’re setting up a business and want to represent yourself well, a free theme that’s got malicious code in it most certainly isn’t going to cut it.