Bloggerrific

Javascript is a useful coding language that creates “client-side” changes to a website. It is really a great tool for simple and yet amazing interactivity on your website. Now for those of you who are used to only coding with HTML and CSS, Javascript will be quite a jump for you. Where HTML and CSS apply simply to content and layout, javascript can be very heavy on logic, something that typical computer programming is founded on. So be aware that JS could be a very big change for you.

So what can you do with JS? You can automatically rotate through images, or let users rollover thumbnails to enlarge a main photo. You can change text or even the styles that apply to text or other layouts. You can apply a simple watermark to a text box to indicate what users should do with it. You can sort tables or have fantastic animation effects to coincide with user actions. Have you ever encountered a popup window that greys out the background? Yep, that’s javascript (often combined with a few other fancy things such as AJAX, but no need to worry about that). There are really an endless number of options, many of which are pre-written to make your life easier! Here are some great resources for pre-written JS:

1. JQuery and JQuery UI are fantastic libraries of pre-written javascript. JQuery is an open-source (free for the masses) series of core JS files.The public then uses this open source base to build plugins that can do everything you could possibly imagine for client-side scripting. I’ve used jquery plugins on collegeprowler.com for a content slider and table sorting just to name a few items. JQuery UI is a subset of JQuery that focuses on very cool animation effects. I’ve used this (again at College Prowler) to implement an accordion (multiple items where only one is visible at a time), sliding content boxes open and closed, and selection sliders, again to name a few. Great tools, and incredibly easy to implement! Be aware though, because it is open source, a lot of the plugins you end up using can be very finicky on your site…

2. Carousels and Content Sliders are a great way of exposing users to a lot of content without overpowering them with options. A lot of people choose Flash for the same purpose, but flash is awful for SEO purposes, is limited because not all of your users will have it installed on their computer, and is more difficult to update. I’ve found two great carousels that can be applied to either photos or content, and have a lot of customization abilities. Check out jcarousel by Jan Sorgalla, or for a slightly lighter version (the one I ended up using) take a look at jcarousellite. Another one I’ve found out there is at cssglobe.com, which seems pretty sweet as well.

3. Popup Boxes are one of the best javascript tools you’ll ever find. They also are one of the only ones you’ll ever find yourself contemplating paying for. Even though most web users hate the idea of popup windows, popup boxes are entirely different. When used in response to a user action, the popup box offers great opportunities for what you can provide your users with, without navigating them away from a page. They can login to a site that requires registration, they can fill out forms without being forced to have the form take up space on the regular page, or they can view slideshows of images, all without feeling like they’ve left the page that they felt comfortable enough on to click a link. The two best implementations of popup boxes (or shadow boxes or lite boxes as I’ve also heard them called) are Highslide and Lightview. I have more experience using Highslide, but I think Lightview is very well made and looks gorgeous. I had found Lightview by accident some time ago, and when trying to relocate it for this post, I found a listing of all the JS popups out there here. Careful, I haven’t tested any of them.

Those are just a handful of examples of pre-written JS that you can use. In upcoming posts I’ll write a little bit about simple JS that you can implement easy peasy on your own without any coding background.

Google Analytics is an amazing tool for web designers and web developers. There are really four different types of things you can do with Google Analytics, and I’m here to write about each one, and some of the benefits of them, as well as a few downsides.

1. Enhance your user experience: Google analytics has tools to track the types of users you are getting. You can look at their location (in the world), their computer specs (computer type, screen size, operating system, browser/version), their viewing trends (page views, bounce rates, time on the site), and much more.

So why is this helpful? It allows you to design your site around your users. You know what browsers and versions they are using, so you can decide how much time to spend cross browser testing. You know what screen sizes your users are using, so you can figure out how wide you want your designs to be. You can see when you launch major changes to your site what happens to your user trends (did it cause an increase or decrease in the positive experience of your users). But these are all very broad things, let’s get more specific.

2. Test and improve specific content: Google analytics takes the first benefit a step further by allowing you to look at most of the above data and more with specific pages and sections of your site. This will allow you to test out smaller changes to your site by looking at user trending and navigation on specific pages or new sections that you just launched or changed.

So why is this helpful? Imagine you just put up a new section of your site that is a little more alternative to the standard navigation you have throughout the rest of your site, or the design is a bit more energetic and you aren’t sure how it will be received. Now, say a week after your launch, you can go back and see how your users interacted with the new section. You can see where they came from in the site to get there, what they did there, when they left, and where they left to go to. You can compare the visitor trends with the overall site averages and get a feel for whether the new design and/or navigation is an improvement to your site, or a detriment. It can then guide future changes to that section, or even the rest of your site!

3. Pimp out your SEO efforts: With the “sources” section of Google Analytics, you can track where your users are coming from, and how they are finding you. You can see how many users are coming in directly (typing in your web address or using a bookmark), through referring sites (external links), or through search engines. Then you can look at keywords that people used to land on specific pages within your site, or the site in general.

So why is this helpful? If you have been trying to up your SEO, then you can see how often people are linking to you (based on the rate of referring sites) and how effective you are at certain keyword searches that you are trying to optimize for. Knowing what people already land on your for and teach you what your site is doing well, and help you decide what other keywords you might want to focus more on.

4. Make some moolah: Lastly, Google Analytics allows you to track sales and other goals within your site. If you have specific items you are trying to sell, you can put in a specific goal that tracks it. Then you can see the paths those users took to get to that sale and optimize for it even more. To be honest, I haven’t focused on these tools much myself. For my own website, I don’t have much of a need for it with all the other customization options. For my work at College Prowler, though we do have sales, I tend to focus more on the user experience considering that is where my background is, and my boss looks at everything, including the sales “goals” and “ecommerce” options.

All of these sections have some additional benefits that Google Analytics is still testing out, in particular the “advanced segments” tool. This tool allows you to set up segments of your visitors or your site so that you can get even more detailed with your website’s statistics. Say you have too main sections of your site, and though they sometimes cross over with users, they are often relatively separate. You might want to see just what one half of the users are doing, as compared to the other half, because they really represent two completely different user bases. Again, it allows for even more customization to your user. There are some downsides to this tool though. In particular, you can create segments, but you can’t share them with co-workers that might be on the same analytics account, they are only available to you. I already emailed Google months ago and complained about this, but they are slow to respond to that kind of stuff. I think sometimes they pretend to be all focused on usability, but in reality, they lose that focus too often…

One more downside to Google Analytics is the slight inaccuracy of information. Data is never 100% accurate or reliable. This is a problem with really small sites where small differences can really cause issues with the data (because of low statistical power). Still, take everything you see with a grain of salt, but also put some trust in it. If anything, it will lead you in specific directions for real user testing! Overall though, fantastic tool!

The float property in CSS is a blessing if you ask me. I use it almost exclusively for layout, with occasional tables or absolute/relative positioning. The float property leaves your layout incredibly fluid so that you can change it very easily. However, there are some difficulties that are easy to run into when using the float property.

What float essentially does is force block level elements to not actually take up space in the document. Only floating elements will move around other floating elements, but you might find that sometimes your elements overlap or float around another when you just don’t want it. This happens very commonly when you define the height of an object such as a div, and float elements inside of it which actually will exceed the height of that div. Some browsers will not expand the containing div automatically. Other times, you might have a div floating left, and another immediately after that, but you don’t want them next to each other horizontally. For all of these problems, there is one simple and easy solution:

The “clear: both” property: Think of the clear property as a horizontal line that forces everything written after it in markup to appear below it (within the containing div). The most common implementation I’ve ever seen is a div solely created to contain this property. I’ve seen this all over the web, and I use it all the time, without any hesitation. Make a CSS declaration like this:

div.clear{
   clear: both;
}

And the HTML:

Putting this div below another other set of divs will essentially create a forced break between everything written above it in the HTML, and everything written below it. This is limited to the containing div though. I personally can only think of a single situation when you wouldn’t want it limited to the containing div (if you wanted to force a two column layout to be the same height, but you just can’t do that). So yeah, stick to this… you won’t regret it!

Finding clients, especially when you are new to the web design business, can be both incredibly easy and difficult. It is easy because there are actually a lot of people out there in need of web design services. Small businesses are leaving the yellow pages en masse for the web, and most of them aren’t very web savvy. However, because most of them aren’t web savvy, they can be incredibly difficult to work with. So really, the better question is, how do you find good web design clients.

First let’s figure out some places you can look for any web design clients at all, and then we’ll tackle weeding out the bad ones.

• Craigslist: That’s right, depending on the city you are in, you’ll probably see several posts a day related to web design and graphic design. The other good thing is that you don’t even have to limit yourself by city if you are alright working remotely. The only warning I give for that is that not being able to meet clients in person can cause some issues.
• Guru.com: Guru, whose office happens to be right next to my employer, College Prowler, is an online marketplace for freelancers and employers. I personally have never used it, and it does have a few fees mixed in there, but if you are looking to do contract work for the majority if your income, you’ll need all the help you can get, and this one is definitely worth it. There are other sites out there like this one too, just look around a bit.
• An Online Portfolio: Make sure you have examples of your own work available to people. Then advertise this by passing out business cards, purchasing online advertising spots, or linking to it from sites you’ve already worked on. Just having something ready to go shows potential clients that you are viable, and will encourage them to reach out to you instead of you reaching out to them.
• Business Cards: Making as many connections as you can is always a great idea. The more clients you meet, the more people in the web business you deal with, the better. So go mingle, and pass out a nice business card to everyone you can. They might pass it on to someone they know. A majority of my clients have come through word of mouth and other connections I have, as compared to searching myself on websites like Craigslist and Guru.

But that is really only half the problem. You’ve really got to be able to weed out the bad clients, the ones that will be a pain to work with. Trust me on this one, for every good client you find, you’ll run into two or three bad ones. So now just a few suggestions to clean out the grime.

• If your client tries to swindle you down to a pay rate way below your average, or is incredibly surprised at “how high” you charge for your services, then keep in mind they don’t seem to value your work enough. Web designers can charge anywhere between $30 and $100 an hour in my experience. If they think that $30 is absurdly high, make it clear to them that is isn’t, and if they don’t understand, then drop them!
• Make sure they have an idea of what they actually want. When clients don’t know what they want, then it’ll be very difficult to produce anything they like (at which point they blame you). Then let’s pretend you magically figure out what they want, they are just as liable to change it up on you and request alterations all the time. Either don’t sign with this client, or if you do, make sure you are charging an hourly rate instead of a flat rate, so you get paid for your iterations.
• Often times, small business owners are looking to get on the web, but they have little expertise with computers or the web at all. This will make communication difficult, and you’ll often find them nitpicking over minute details that in reality are not important. You probably won’t get screwed over here, it’ll just be a huge hassle.
• If a potential client doesn’t email you back for 5 days, then that means they are probably disorganized or bad at communicating. Either way, this could be quite dangerous. Set up a strict communication schedule, or ensure that if anything falls to the wayside, that they’ll recognize when it is their fault.

Those are just a few suggestions for weeding out the bad clients, so you can keep the good ones around. Got any other questions? Let me know, and maybe I’ll have a few suggestions for ya!

CSS has two primary benefits. One is the ability to easily edit the look and feel (the theme if you will) of your website by changing very little code. This is evidenced by a quick visit to the CSS Zen Garden which has the same HTML code, but uses different style sheets to make it all look completely different. The second is positioning and layout which allows to easy move different pieces on a page because it doesn’t ascribe to the rigidity of tables.

However, CSS layout can get a little confusing when you are just starting out. So this article will discuss the different attributes you can assign to tag objects and when each of them is appropriate.

Position:

The position property has 4 possible values of static, absolute, relative, and fixed. Static is essentially the default that lets an element just fall wherever it falls. You’ll only find yourself defining an element as have a static position if you need to correct for a previous assignment of something else other than static. The fixed value will put an element at an exact location within the browser regardless of scrolling or screen size. The fixed value is always used in conjunction with the top, right, bottom, and left properties which will be discussed after positioning.

The remaining two properties are the more common definitions, and are also always used in conjunction with the top, right, bottom, and left properties. Absolute positioning is used when you want an element to exist at an “absolute” location within the page. The only difference between absolute and fixed is that fixed ignores scrolling, whereas absolute does not. So if I wanted the logo of the website I’m designing to always be located exactly 10 pixels from the top of the window, and 30 pixels from the left (and if I scrolled down the page it would go out of view), then I’d use the following CSS:

img#logo{
   position: absolute;
   top: 10px;
   left: 30px;
}

I personally think that absolute positioning is a bad idea because it leaves you with something almost as rigid as a table. To move something around you have to constantly adjust pixel positions, and use z-index in case objects overlap. This can sometimes be useful so you don’t have to layer things using background images with multiple divs, but in general, I personally choose to avoid it. Then there is the relative value. Relative positioning is exactly what it sounds like, it positions an element relative to where it should be located. So if an element naturally falls at a certain location, and you give it a “top: 10px;” and “right: 30px;” then it will appear 10 pixels further down, and 30 pixels left of that certain location. This is also occassionally useful, but I personally prefer another option… floating. This I’ll discuss soon.

Top, Right, Bottom, Left:

These four properties are used when a position of fixed, absolute, or relative has been assigned to the same element (such as a div or an img). These positions can be set using pixels or any other length measurement that CSS accepts, as well as %. They can also have negative values which is helpful to push things around when you need to. Again, I however personally prefer floating my elements.

Float:

If you ask me, the float property is the absolute best characteristic of CSS, and it blows position out of the water. Why do I love it so much? Well, I’ll admit that it can be finicky, but once you get used to how it works, it is absolutely fantastic for building very fluid designs that you can easily change. Float only has three options, left, right, or none. None is the default value. If you add a “float: left;” to your definition then that element will move as far to the left as it can, meaning within its own parent element. Giving is a “float: right;” will do the same thing but obviously to the right instead. Check out the example below of two divs, one floating left, and one floating right:

The HTML:

And the outcome:

So now that you see how the float works, you might be able to see why it can be so helpful. Imagine just having to change two words in your CSS file, and those two divs would switch locations. Now the reason it can get finicky is because of space issues. An element will float within its parent element as high up as it possibly can. So that means if I increased the width of those sample divs to more than half the allotted space, then the second div would be forced below the first (but still on the right side). You can apply float to a whole lot of elements, but primarily you’ll probably be using it with div, img, and p.

More notably, float is used to make text wrap around other elements such as an image. This is incredibly common and incredibly useful. Just apply a float to the image right before the paragraph and the paragraph text will wrap around it. You’ll probably also want to apply a margin so that the text doesn’t touch the image though.

Well, good luck with your positioning escapades. Let me know if you have any problems.