Working at home or the office

Aside from the great income web designers can make – and yes we’ll get into actual numbers  – web designers and developers often have the luxury of being able to work from home. Better yet, many designers are independent contractors with their own business, which allows them the potential to earn more than they might working for a company. How is that? Well, let’s say that I bid $500.00 to build a five page website  for a company that sells web-enabled toasters. It takes me about 3 hours to come up with the design and another hour or so to add the client’s content. I just made $125/hour, or $500 for an evening’s worth of work. And maybe I even got a free toaster in the deal!

Working for a company on their web team is also a great career choice. As of this writing the latest industry statistics show that Web Designers enjoy a good salary, averaging $50,555 annually. In the United States, compensation runs from entry level starting pay of about $35,000 to $47,000 to $71,500 for experienced web designers. However,  according to the U.S. Department of Labor, well established and talented Senior Web Designers and Developers can demand salaries well over $100,000.00.

Web Design jobs are staying here

You may have heard news stories about design jobs going overseas, and indeed some jobs have gone that route. However, in my personal experience as a web designer and developer, I have never NEVER lost a job to an overseas contractor. Yes, some very large corporations do business overseas, but small and medium sized companies want to stay local. They want to be able to call their web guy in the morning with an update, and have it live on their site in a timely manner.  Language barriers, time zones and  even cultural differences can mean serious lost revenue for companies that need their sites built and maintained in a timely and professional fashion.

The key to success: learning

Web design is not rocket science, but you need to know your stuff to make it in this field. You DO NOT need a computer degree to be a highly paid web designer or developer. I don’t have a computer degree, but I have made an excellent living  as a designer and developer for the last 10 years. To get started in your web design career, check out our web design course. After all, you want your site to look good on those  toasters…

Next, we need to create a style rule for our container that gives us a fixed width and centers the content.

As we can see the declarations “margin-right:auto” and “margin-left:auto” do the heavy lifting. It’s really that simple.

Now before everyone starts emailing me saying this method does not work in IE5, I would submit most respectfully that I don’t care. My personal policy on web design is to provide support for 2 versions back. In other words, IE5 and IE6 are dead to me. It’s time to move on, people!

Let’s take a look at a few simple steps you can take to make your site more accessible.

Use Web Standards

You can never go wrong coding to web standards. Validating your markup is a good start to helping text-to-audio readers and other tools perform properly on your site.

Use the alt attribute – Everywhere

Most designers know that the alt attribute is required for all images on your site. For example:

Be sure that your alt tag is highly descriptive of the visual content, and don’t “skip” images that you may feel are unimportant. The reader needs to know why the image is there.

Use Summary attributes and Caption Tags on Tables

The summary attribute of the table tag works like the alt attribute of an image tag – it describes the table’s content. The caption tag is also important, as is using table headers. Here’s an example of an accessible table:

By using the summary attribute, the caption tag and table headers a text-to-speech reader can give the user a better idea of the tabular data you are trying to display.

Obviously, accessibility issues are one reason why it’s not a good idea to use tables when designing your layout. Tables are made to display tabular data, and CSS is best suited for layout.

Use Keyboard Navigation Techniques

Not everyone can use a mouse, and audio command tools simulate keyboard input. For this reason consider making your site navigable with a keyboard alone. There are several ways to accomplish this task,  including using JavaScript,  the accesskey attribute, and in some cases specifying the tab order. If users can get around your site without a mouse, you’ve come a long way toward designing an accessible website.

Use an Accessibility Evaluation Tool

There are many great tools on the web you can use to check the accessibility of your site. A  bunch are listed here but our current favorite is the one provided by the good folks over at webAIM.org . This tool shows parts of your page that might be difficult for disabled users to view, and does so in a way that is clear and concise.

No matter which tool you decide to use, checking your page for accessibility will allow all your hard work to be seen by a wider and appreciative audience.

Benefits of Web-based Learning

Clearly, Web-based learning delivers a variety of benefits, not the least of which is convenience. I was perusing a web development course this morning in my boxers, a fashion statement that would not fly in the traditional classroom. Scheduling is also a factor. Many online classes offer on-demand training, so you can squeeze that CSS lesson in right before bedtime. Online courses allow people to learn and still have a life (…or a job, or a spouse, etc.)

Convenience is the obvious benefit, but there are other benefits that are not so apparent. For example, a true leader in a particular field may be teaching an online course, which can have an unlimited amount of students. Live classes, on the other hand, are constrained by the size and location of the venue. If Bill Gates was going to teach a programming class, but it was only available in Bakersfield, California, many students who would like to attend would miss the boat. Not only because of limited seating, but also because Bakersfield is kind of a dump.

Finally, another great reason to take a class online: the rewind button. If you miss a concept, or don’t understand, or the teacher mumbles, the rewind button can save your butt (and tuition dollars). Though we would love to have one in real life, the rewind button simply does not exist the conventional classroom.

So Why Go to a Live Class at All?

Though there are many benefits of a live class, the one that stands out the most is the sense of community one feels when a group of people congregate for a common purpose. College has its own unique set of benefits – like the parties. I threw some off-the-hook parties back in the day, but they did NOT contribute to the absorption of my studies.

So Which Is Better, Live Courses on Online?

If you skipped immediately to this paragraph then online classes are for you. Just like the rewind button, online classes often come with fast forward too, so you can get to the meat of the issue. If you are in a hurry, or need flexibility, then online classes can’t be beat.

But if you truly enjoy the atmosphere and shared experience of a live setting, then you should definitely go that route. Many people consider school a primary source of social interaction (that means parties), and web development goes great with beer.

If you are looking for other types of training, check out the training-classes.com directory of

medical training seminars

The biggest and most widely practised concept of web color implementation is the RYB approach. Being the main three colors, Red (R), Yellow (Y) and Blue (B), hence RYB, these 3 colors are known to have a great impact on how web visitors react and interpret messages on your webpages. You’ll realize that most of the links on the web are underlined in a default blue. Error messages are usually in red. Yellow provides a nice light addition which compliments dark backgrounds really well. Orange (red + yellow) texts for example is extremely popular with black backgrounds. Try it and you know why. Take a look at www.microsoft.com for example. It has an excellent application of the primary and secondary colors together with the support of black and white. Apply this technique to your web designs and you’ll improve the overall layout appearance significantly, if not greatly.

Different classification of websites require different approach. In most cases, you don’t want to have a corporate website with a black or any extremely dark background. Apparently a white background seems to signify formality and a certain level of layout cleanliness. Not that a dark background can’t have a clean cut look, it is just a typical mental translation of human observation that the color white is in fact the cleaner one or simply easier on the eyes. Black background in the other hand, frequently portrays something which is fancy, elegant, playful yet has a reasonable level of seriousness in it.

A majority of designers or rather webpage creators believe the role of emphasization by utilizing light and dark colors. For example, a dark background combined with a light content area, simply attracts visitors to emphasize more in the middle, which happens to be the content area. It simple works too if you have a light colored background with a dark content area. Alternatively you can add patterns or images into the background to spice things up. Just don’t get these additional items to change the original apperance of your colors. The only issue with background with exceptionally large images is that it might kill some of the attention that you want your visitors to have on your main content.

There’s nothing wrong with having a website with either a light or dark background, provided that it looks good, and of course if it is nicely presented together with a readable content with a friendly user interface. How do you know if it looks good is simply something that can’t be measured by words, but rather by simply looking at it. If you look at it and by some spontaneous self agreement, that you think the color fits perfectly with everything else, then you’ve hit the big jackpot. If it works otherwise, and you just feel like there’s something wrong, play around with the colors till you have that comforting feeling that you’ve done a great job.

You might be thinking right now, which color goes with which color? You can either browse all over the net, looking at websites and noting down good combination of colors as you go or you can simply go to http://www.colormatch.dk. This website is extremely simple and easy to use, yet very powerful in terms of features. Simple and straightforward, you simply choose one dominant color for your website and it’ll simply chooses for you 6 other colors which compliments your main color, together with the color codes. Simple as 1-2-3. Note that colormatch.dk only works in Internet Explorer browsers. Try googling for colormatch and get enhanced and modified versions of the original.

Additionally, always try not to get your website too dark or too bright. You can use either one or both of them at the same time, but not too excessively, and try to find a supporting color which compliments or enhances your initial choice. Try to balance up usage of color tones all over your website too. If you think that the upper right of your website is too bright compared to the rest of your page, then either you reduce the brightness to equal the overall layout or simply brighten up the rest of the website, in a controlled manner of course. If you’re adventurous, replicate that bright top right area to the bottom right area, making the right area somewhat a “bright colored zone”. The key point here is to maintain the balance of your color usage. You don’t want to drive a car with one of the door being slightly and yet obviously darker or lighter.

Lastly but not least, try to limit the number of colors to a reasonable amount. 2 to 4 are good amount of colors, not counting black and white. Black and white are just simply too important to not to be used. If you really need to use extra colors, try to use a darker or lighter version of your main colors. If your main color is red, wine red, crimson or even maroon are good alternatives. Even certain tone of brown could actually look like red sometimes. Try to “recolor” your graphics or get some graphics which tally with your overall selection of colors.

Another good concept to follow is to apply a color scheme according to your logo. If you logo has orange and black for example, try to enhance that color by applying those same colors as well as the same colors with different tones throughout your whole website. Some designers even select their colors based on the pre selected images they have for their website. Certain images are just tend to be too exceptionally perfect to be omitted, thus explaining such occurrences.

I hope this guide will help you to get your colors right and have a better understanding of what to choose and what not to do in any of your future web design works. Nevertheless, try not to limit your creativity and imagination based solely on this article. Get your ideas flowing and experiment with your ideas constantly. Good luck!

Our thanks to author John Teh, a full time web designer and developer, who also operates a web template database website at http://www.dead0eye.com.

The “terms and conditions” clause is, in essence, a contract. However, formation of a contract requires both an offer and an acceptance. Terms and conditions are really part and parcel of an offer of the services offered by your website. In order for there to be a contract, the customer must do something to communicate acceptance of all of the component parts of an offer. Just because you have terms and conditions posted doesn’t mean they have been accepted. That is the first point you should take from this article.

Case in point: Some years ago, Netscape tried to enforce the component of its terms and conditions requiring arbitration (more about that later) against a customer. It lost (Specht v. Netscape Communications Corp., 150 F.Supp.2d 585, S.D.N.Y., 2001). Apparently, there was no requirement in one of Netscape’s upgrades that the customer make any manifestation of acceptance of the terms and conditions, usually accomplished by clicking an “I accept” button adjacent to them. This is called a “click-wrap agreement,” a term that arose from those so-called “shrink-wrap agreements” on computer software—you know, the ones where it reads on the wrapper of the disc on which the program is recorded that “by breaking this seal, the customer agrees to…” The best click-wrap agreements are the ones in which the default setting reads “I do not agree,” so the customer must change the selection to the “I agree” button, and then click. This obviates customer claims that the buttons were confusing or that the “I agree” button was accidentally pushed.

Perhaps the most important components of terms and conditions have to do with dispute resolution. Let’s say you operate a website in New York and have a disgruntled customer in Montana—or worse, in Paris, France. The customer in one of those far-flung places can claim that, since you took advantage of the stream of commerce in that jurisdiction by selling your services within it, then you are subjecting yourself to being sued there in the event of a dispute. Think about it: If the customer in Montana defrauded the New York webmaster, the New York webmaster could sue the customer in Montana, and in fact would be required to utilize the court system of Montana to collect any money. Turnabout is fair play, and the customer also can sue you in Montana. However, courts consistently have held that the parties to a contract can agree in advance to the place (venue) where disputes arising from it are resolved, so long as the venue has some interest in the dispute (e.g. one of the parties lives there or the contract is to be performed there). This is called a “choice of forum” clause, perhaps the most important term or condition—and the second point you should take from this article.

Another oft-utilized contractual provision involves how (as opposed to where) disputes are resolved. Terms of a contract, and terms and conditions, can provide that disputes will be resolved by arbitration—this is the third point. Here is how arbitration works: If a suit arises from a contract containing a typical arbitration provision, then a party that is sued can demand arbitration, and the judge will suspend the court action pending resolution by arbitration.

An arbitrator is a third party who acts somewhat like a “rent-a-judge”; many arbitrators, in fact, are retired judges. Now, why would you want to be required to pay for something that the state will essentially give to you for free? Because each side is required to post half the arbitrator’s fee in advance—and this is not just $100 or $200 in court filing fees; it is more like thousands of dollars, because arbitrators aren’t cheap. Therefore, if some customer has an inconsequential beef about his Web service, he has to put up some serious money! Plus, he has no right to a jury.

The fourth important point involves “attorneys’ fees” clauses, which may sound like a good idea but require serious second thought. Be realistic: You are much more likely than your customers to screw something up, and an “attorneys’ fees” clause instantly raises the stakes in any dispute. Think about it: Somebody in some department screws up and double bills a customer for $200. An attorney looks at this and figures he can just file suit for the $200 plus his or her fees (granted, some states do not allow attorneys in small claims court), so if you use an attorneys’ fees clause, you are asking to get sued. The general rule in the U.S. (the so-called “American Rule”) is that each party to a dispute bears the cost of its own attorneys’ fees, absent a statute (and there are enough of those as it is) or a contractual provision. Most of the reasons nobody files suits for small amounts of money is that attorneys are so expensive. Why volunteer to pay the opponent’s bill?

Finally, perhaps one of the best reasons not to just copy terms and conditions from another website and post them on your own is that you are subjecting yourself to a claim for copyright infringement—and that’s just one more hassle you and your company can do without.
Daniel A. Pepper is the founder of Pepper Law Group, LLC, a law firm based in Somerville, New Jersey which provides strategic advice and sophisticated legal services to businesses, entrepreneurs, and entertainers in the areas of technology law, intellectual property, Internet law, entertainment law, business formation and general business counsel, and privacy and security law.

Dan is a member of the State Bars of New Jersey and Pennsylvania, the District Courts for the District of New Jersey and Western Pennsylvania, the American Bar Association, the American Corporate Counsel Association, the Internet & Computer Law Committee of the New Jersey State Bar Association, the Somerset County Business Partnership, the Philadelphia Volunteer Lawyers for the Arts, and the Free Speech Coalition. Dan has received a BV peer-review rating by Martindale-Hubbell, which is an indication of an exemplary reputation and well-established practice. He is also a member of the National Academy of Television Arts & Sciences and the Licensing Executives Society. He received his Bachelor of Arts degree from Rutgers University, and his Juris Doctor degree from the Duquesne University School of Law.  More information on the firm can be found at http://www.informationlaw.com or by telephone at 908.698.0330.

Thank you to this post’s author, Daniel A.  Pepper, Esq.

The following is a practical, real world guide to the 10 essential steps you need to build a successful website. Technically, there are really 10,000 essential steps, and everyone eventually comes up with their own workflow that suits their own unique style. But when first starting out, there is a process you can use to help get the job done quickly and professionally.

1 Know Your Stuff – Especially HTML and CSS

HTML and CSS should be like old familiar friends. Div elements with unique id’s should give you a warm fuzzy feeling, and few things should be more exciting in your life than a pure CSS nav bar positioned perfectly below the site’s name – residing snuggly, of course, inside its <h1> heading element.

Before you accept money to design a website, you need to have these tools confidently tucked in your belt, ready to use the right way. This may seem like an obvious first step, but you would be surprised how many people believe that the ability to draw boxes in Dreamweaver, or some other WYSIWYG program, make them a web designer. Courses like Web Design from the Ground Up are a great place to start building the skill set you really need.

2 Listen to the Client, Want What they Want

Ask the client to write down everything they want in their site, then read it like a love letter. Don’t skim over it like a grocery list, read it like it came from the person you’ve had a crush on all year, but never had the courage to talk to. Look at the blossoming site from the client’s perspective, anticipate their needs in ways that they themselves did not consider.

3 Draw a Picture

The next step is to “wireframe” your layout with the client’s needs in mind. Wireframing is really just a fancy term for drawing out the elements of your site, usually in boxes with labels like “logo”, “navigation”, etc. There are a ton of software tools that can assist you in wireframing your site layout, but in my experience nothing beats good old fashion analog paper and pencil, at least  for the first draft. Trust me, you don’t want to immediately jump into Photoshop, spend 20 hours on the perfect layout, only to find out that the site really calls for contextual menus instead of dropdown menus, or some other design-breaking revelation comes to light.

4 Draw a tree

A “site tree” is a flow chart of how one page goes to the next in your site, and once again this puppy can be drafted with nothing but a pencil and a slice of dead tree. Those of you who are environmentally inclined (and I suppose we should all be at this point), can use readily available tools in MS Word or other word processing programs.  With your client’s requirements in mind, draw your site tree logically, taking a user’s point of view whenever possible.

5 Check in with the Client

Throughout the planning stage, you need to keep your client in the loop. Getting your client’s input keeps the client happy, and happy clients write checks. Furthermore, you want the client to sign-off on each step of the development so there are no misunderstandings. That way, if the client changes their mind halfway through the process, you are within your rights to ask for extra compensation.

6 Draw the Page

Okay, you can put the pencil away. Now that the planning is complete we need to get out the big guns, and I prefer Photoshop for the job. There are many other programs you can use to design the site layout itself, but my personal preference is Photoshop (we will be adding some cool Photoshop tutorials soon).  At this point I like to draw a complete example page, with place holder text in the appropriate content areas. The layout should be to exact scale and should reflect your vision for the layout as accurately as possible.

7  Repeat Step 5

Once again, we need the client’s approval at this point. This is the crucial no-turning-back (at least without extra cash) point. Give the client the opportunity to suggest changes or adjustments in your layout, and finally get the client to sign off on the completed design.

8 Code it up

Slice up the Photoshop image of your site taking the image elements you need to code your site. Apply all the knowledge you acquired from step 1, keeping in mind that a well coded site is easier for search engines to index, and thus good for your client’s site rankings. A properly coded site that conforms to web standards will also look good in all browsers, including future browser versions, thus making your client happy. Did I mention that happy client’s write checks?

9 Add the Content

Most of the time the client is responsible to supply the content for their website. After all, no one knows more about their business than themselves. Once again, when adding the content be sure to comply to the web standards laid down by the W3C to insure consistent results between browsers.  On a side note, in my experience this step can hold up a website project for a long time. If your client is responsible to supply you with content, you might want to make sure that there are collecting and creating that content while you work on the layout. That way, it will be there when you are ready (and you are also more likely to get paid on time).

10 Take It Live!

Launch your site on the server. Some clients already have a hosting account, some ask that you set one up for them. If you are an independent contractor, you should have your own hosting account so you can re-sell hosting services to your clients. After uploading the site, fully test it in all the major browsers including IE, Firefox, Safari, etc. It’s also a good idea to go back 2 versions in your IE testing as IE users tend to ignore browser updates. If everything checks out, you’re done!

Summary

This was just a rough sketch of the many steps involved in  launching a new website, or even rebuilding an existing website. Keep an eye out on this blog for more information regarding web design and development.