Helping You Rock Out Your Site Like A Rockstar!

A web developer’s job is often confused with that of a web designer’s; while both pertain to the creation of a website, the former deal with aspects that lie under the hood while the latter is more about the visual department and the way the website looks. You could say that development is the nuts of bolts of a website while design is its beautified exterior that serves as the user interface. In fact, most people don’t understand that web design starts with web development and that the two aspects are inter-related. If you’re an aspiring web developer, here are a few mistakes that you must be careful not to make over the course of your career:

• Trying to do it all: While web developers may double as web designers at times, it’s best to focus only on one part of the creation aspect. Focus on improving your skills as a developer rather than trying to master all creation skills at once. If you’re a freelance developer who is hired by clients for the whole package, hire the services of a designer who you can work with. This way, you can concentrate on your responsibility and the designers on theirs. Besides, you stand to gain when they send you the development work for sites they’ve been asked to design, so it works out to both your advantage.
• Not understanding what the client needs: Misunderstandings tend to happen when developers don’t understand what the client needs for their website. While they may have an idea of the design they want, most clients are not familiar with their web development needs. It’s up to the developer to find out the purpose of the site and liaise with an employee who understands technology. Also, if a middle-man is involved (some people outsource their web design and development services to outside agencies), it’s the developer’s job to ensure that the client’s instructions are not lost in translation. When you go ahead without understanding what your client wants, it involves a lot of wasted time and effort.
• Ignoring the power of cooperation and teamwork: There are various aspects to a complete and comprehensive web design, and unless all these aspects integrate in the right amount and at the right time, the design is not satisfactory. There are some things that must be done before others and others that can be done in parallel. The team working on the design is responsible for planning the various stages of the design and then executing the plan in the least time possible and with the least effort. When web developers don’t cooperate with the rest of the team, they compromise the entire project. Teamwork is essential, and web designers and developers need to be team players to come up with an exceptional design.

While there are plenty of normal tips for budding website owners to read about, there are still a lot of mistakes happening. Putting a website together is a learning experience that requires careful attention. There are people who will just slap anything up for a quick buck, but in the end, it bites them in the ass.

Here are some tips to avoid when creating a website for the first time:

Your Brand

Do not put any old name and logo together. Be creative, but remember this is something you are putting together that may become something people will remember you by. Even if you do not know what you want right away, at least use something simple and tasteful. You can later change your brand as your business grows.

Your Design

Avoid choosing the easiest route for your site’s design. Even if it is free or really cheap… it might not work for you later on when you are needing to make changes and… 1, you are not able to make those changes, or 2, you do not want to spend money to pay someone to make those changes. Find something you can use, but will aesthetically pleasing for your brand.

Do not design with one browser in mind. Even if you might prefer one browser versus another, your visitors may be using something else. Be accessible.

Do not clutter up your site. While you do not want things looking like they are floating miles apart, you definitely do not want to blast people with content so smashed together that it is hard to discern where one thing ends and another begins.

Avoid using a font that is either too tiny to read or a font that is hard to read because of its design. A lot of 12 pixels tall will suffice for normal reading. Anything smaller may have vision impaired visitors squinting or giving up on your site.

Your Content

Do not write like you are trying to write for a newspaper. It is silly and may not even encourage people to leave feedback.

Do not forget to have some type of contact form. Leaving your email address is risky. A nice and secure contact form is great to bring in potential leads.

If you are selling a product, keep the copy clear and concise – avoid unnecessary words. People want to get to the point quickly. If you cannot convince people in less than 500 words to buy your product, you need to tweak your pitch.

These are just a few tips.

What tips do you recommend people to avoid if they are putting together a website for the first time?

Website consultations are usually a detailed process that cannot cut corners. Regardless if it is over the phone, email, or instant messenger, it is necessary to come prepared.I got the most awkward call and the person was quite fast when talking and asked me for a quote. Seemed in a rush and really did not have an idea of what type of direction they wanted with the site.

Funny thing is that is was the fastest call ever. My mind was kind of dazed when I got off as the words were so rushed I barely even got to understand what was being said.

So, it got me to thinking about writing a post.

1. Be prepared. A web designer cannot help you if you are not able to take the time to talk about your project. So, here are some tips when talking with a web designer when conveying to them what you want your project to encompass. You cannot be vague about describing your site project and must do a little work to find at least a direction you want to go for your website design project.
2. Provide plenty of details. What is your site about? Your web designer needs to know so they can keep in mind what to look for in your niche. This will help them design so your site is hopefully one step ahead of the rest. A few other questions might be: How big will your site be? Do you need a lead form? Do you need an about page? Do you need a different look to different pages?
3. Set your standards. What are your design expectations? Are there sites that have features you would like to be included in your site? How do you want your site to function? If you want a certain CMS or not, this would be it.
4. Define your budget. Be reasonable on this. If you are wanting a single theme, especially if you want to use WordPress, you will not be paying the same as a premium theme. Those are sold thousands of times over whereas yours is unique and may take many hours to complete. Be aware that you are paying someone for their time and their work will eventually benefit your job in the future.
5. Do not rush a quote. Be prepared to spend a good 10 minutes or more talking about the web design project. (Side Note: I have been on the phone with clients well over an hour.) Web designers do not always quote off the top of their heads. Some have starting rates, while others charge depending on services needs. Some even charge per hour.

You owe it to yourself to take time to talk with a knowledgeable web designer so your website project can be built smoothly. If you are not detailed enough, you will leave your designer guessing and might even have a product that you will not be satisfied with.

It might be best if you do contact a web designer, do it by email first.

What other tips do you have for people who may be new to shopping for a web designer?

HTML has done a lot of growing up. So has a lot of other coding languages. However with some older tutorial sites and older manuals that people read online, there are still a lot of mistakes happening. In most content management systems, including WordPress, it is allowable to use HTML when creating posts or pages.

Here are 8 HTML mistakes you should avoid.

1. Image tags do not have a name (alt)

WRONG WAY:
<img src="YOURIMAGEFILEHERE" />

CORRECT WAY:
<img src="YOURIMAGEFILEHERE" alt="NAMEOFIMAGEHERE" />

2. Lists are not formatted correctly

WRONG WAY:
Peaches<br />
Milk<br />
Bread


OR


1. Peaches <br />
2. Milk</br >
3. Bread


CORRECT WAY:


<ul>
<li>Peaches</li>
<li>Milk</li>
<li>Bread</li>
</ul>


OR


<ol>
<li>Peaches</li>
<li>Milk</li>
<li>Bread</li>
</ol>


3. Italics and Bold tags are wrong

Bold is <strong>, and not <b>

Italics is <em>, and not <i>

4. Using the line break tag instead of the paragraph tag

If you are putting a space between two paragraphs, use the


<p>

tag and not the <br />. Just make sure the style the paragraph tag in your CSS.

Example:

<p>I need to go shopping soon, but I forgot to make a list.</p>
<p>I am busy now, but I might be able to make that list later.</p>


5. Using outdated code or elements that have deprecated

Here is a short list of some that should not be used:

• <applet>
• <basefont>
• <center>
• <dir>
• <embed>
• <font>
• <isindex>
• <menu>
• <noembed>
• <s>
• <strike>
• <u>

6. Not specifying a DOCTYPE

This is the first thing that should go on any website. This tells the browser what kind of markup language you are using for your website. W3C has a great list of recommended DOCTYPE declarations.

7. Using Tables for design

Tables can be nice to work with, but can be very limiting. They are intended for hard core data. So if you have a post that for example compares WordPress to Blogger, you are going to want to put a table. That is considered data.

You should be using division layers (not div layers, even though the tag is <div> to design your website.)

8. Not closing tags or forgetting to write an opening tag

This is the part that a lot of people have, including long time web designers. A lot of times for long time designers it is just a mistake, but for those who are new, not closing a tag might distort the layout. This is probably the #1 solution I end up recommending when people ask me to help them out with their website.

Blogging is awesome and these days there are so many people I need to visit that I literally need to put it on a schedule. That is not including all the return comments I need to do.

I started using WordPress a long time ago because I saw a lot of potential. Before a lot of you were blogging or even had a website, I was in web competitions and already making my first freelance web design transactions.

However, today, after the wonderful social media and branding and all that goodness…why oh why are people jumping on board with Thesis?

I know the default Kubrick theme for WordPress was not that pretty and if I remember correctly, it was introduced in 2005. The TwentyTen default theme introduced in WordPress 3.0 is actually a real gem for newbie bloggers. However, there are hundreds of free and premium themes out there- why do I keep seeing Thesis?

I have designed and used it based on request by a few clients, I am not really much for it. I am not even keen on giving it out to new people to the blogging community. I do not care what marketing ploy there is to get someone to blog, there are better and cheaper options than Thesis.

“I use Thesis for SEO.”

Alright, go ahead, but you can do it with plugins and WordPress all the same. You are the one that controls your SEO because you are writing the articles. If you are needing your site to be optimized, there are a lot of great search engine optimization articles out there… that are FREE! Google it.

If you want to brand yourself with Thesis, you need to get away from that cookie cutter look. There are people out there who have, but as few as I have seen, there are many more who have the same look.

I have said this before in my presentation at WordCamp Chicago 2010 on Rocking Out Your Site With WordPress and will again – Think outside the box!

In thinking outside the box, you will create a site that is worthy of your brand and something you can be proud to share with others.

When you are putting a site up and it is a business and a blog, will you be able to turn that site into a business site, or a blog that is a business.

While you could customize Thesis, you might want to answer a few questions:

• 1. What do you want your site to do?
• 2. What is your budget?
• 3. Can you find a better method?

People already have enough going on with learning WordPress. I receive dozen of Thesis questions from the same crowd daily and frankly, it is kind of sad and frustrating to see that their site is barely different from the next.

If you have a Thesis theme and cannot customize it, have someone do it for you! I do it all the time and frankly it is better knowing someone wanted to be different from the next hundred in their niche sporting Thesis for their WordPress theme. I am not totally ruling out Thesis, I just want to see people use it better. It is hard to believe social media consultants who specialize in branding if they have nothing to back it up with their own branding.

If you use Thesis, how are you thinking outside the box in terms of branding your site?

Freelancing is something that has its own risks. Like any business, you are dealing with all sorts of clients. Those who are new to the game may not have a set policy, but they should.

Whether you are new to freelancing for writing or even web design, here are some ideas to include into your policy.

Have a clear policy written from the beginning before the project begins. Everything that is expected should be included:

1. Define your duties. Go into detail. There are some clients who believe you will do more for free and it ends up being a time consuming job.
2. List an estimated time of completion or a timeline. Your client might be on a deadline, so make sure you agree on one and set it to paper. Even if you might be a little late, you should always give room. Some clients may try to pay less for your services. Make sure to include in the policy a clause that prevents this. If a client brings in another developer to help, make sure you get paid from your time.
3. Define payment method. If you require 50% of payment up front and the rest upon completion, you need to have that in your policy. This goes double for web designers. Just google about it – there are a lot of stories where web designers have been completely stiffed.
4. Make a transfer of project policy upon completion. This is a big one. If you give the final draft or load the live site up before being paid, are you sure the client will pay you? Once the client has approved the project, make sure you get paid. If you have to include a clause in your policy on a third method of payment just for transferring, all the more power to you.
5. Define methods of communication. Some clients require more communication than others- some ridiculously so. Outline your hours and expectations of communication. Some clients feel communication might involve chatting while you are trying to get a project done. This is distracting and could push your time. If the demands can be listed outside of phone or a instant messaging program, insist that they send an email with their list of requests. While you might be happy to give your phone number out, you might have to put a policy on it. Some clients might be obligated to call you whenever they feel like.
6. Define your support policy. If you have finished a project and the client is getting use to it, especially in web design, they might have questions. You need to specify how long you will provide support for a project after the main project has been completed. You will also have to define what is included in the support. There will be times when the client actually wants you to add something. That is not support… that is site maintenance and you should be charging them. That needs to be listed in your policy.
7. Define copyright and disclosure. This is where you define what type of project – whether the client allows you to put a credit line or it is a non-disclosure agreement (NDA.) You also need to include the disclosure for the sources of your images and what the rights are. For web and graphic designers, this is important, especially if you purchased a license to use certain images.

The bottom line is that even if you feel like your policy might be a bit strict, it is there for a good reason: to make sure you get paid. Your rights are protected. If you do not, it is like your car being hit and the culprit is no where to be found. You end up stuck paying the insurance. In the case of freelancing, when this happens, you end up eating your time or sometimes get your work stolen.

If you freelance, what do you include in your policy?

Sometimes when you get an outside service and apply it to your site, you are unsatisfied on how it looks and perhaps want to alter it – like the Facebook fan box. It really is not too much of a big deal, but for those who like to put a little more effort and get rid of outside branding on their site, this tutorial should help.

Really, all it is is copying the code, replacing areas of the code for your fan page, and then copying the css to your layout’s style sheet.

This is a short tutorial on how to make your Facebook fan box go from this:

To This:

However, the code here is a bit different from my stylesheet, so if you have a site with similar colors like mine, you are welcome to take a look at my site’s stylesheet for reference.

1. you need the Facebook fan box code. It does matter which code as well… whether it is the older code without the iframe, or the new one that includes the iframe


<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("b9786c0131cf453efe57a93566925d73");</script>
<fb:fan profile_id="95262735892" stream="0" connections="10" logobar="1" width="300" height="200":></fb:fan>
<div style="font-size:8px; padding-left:10px">
<a href="http://www.facebook.com/pages/Nile-Flores/95262735892">Nile Flores</a> on Facebook</div>

2. Replace the fan profile_id=”95262735892″ with your own page’s number. In the case you have a username for your page, you can get that id from your page’s settings. When you click “Edit Page” the URL will have your site’s ID at the end in your browser.

Example:

3. In your code, you will see logobar=”1″. Change the number to 0.

4. In your Facebook code on the same line as the height and width, add css=”YOURSTYLESHEETURLHERE?1″ .
In the YOURSTYLESHEETURLHERE, put the URL to either your stylesheet of your theme or layout.

5. Apply the following CSS to your stylesheet, no matter if you are using WordPress, another CMS, or straight HTML. You can alter the code to fit your site’s colors.


/* Start Facebook Fan Box CSS */

.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}


It really not much of a customization, but with some alterations to the CSS, you could probably do quite a lot.

A lot of people have an About Page, but really do not know what to do with it. Of course, you want some info about yourself, but how can you make it effective to allow people to know what you want them to do.

Your site is doing something, whether selling a product or just wanting people to hear you out. For me, although I love to help people with their websites and give a lot of free advice, I am a web designer by profession and my hope is that when you decide to revamp yourself, you might hit me up.

However, I am not in your face about it. Through creating valuable content combined with social networking (engaging in conversations with all or quite a few of you), I have established myself to at least know what I am talking about. That is how most of you coming here to read this very article are trying to achieve. This is what I have done for the past 7 years and will continue to do.

BUT…

…for those still wanting to get a good site together, the about page tells your visitors who you are, what you are all about and what you want to do with your site.

In the past, people split this up in an about page for the website owner, and a “domain” page for about the site. While both are great, both were not needed in two sections. People do not want to know all the history of your past site layouts… well, maybe some do.

Instead of going in bit by bit, I will show you a simple and effective About Page. Take for instead the About Famous Bloggers page at FamousBloggers.net. You will see the following:

1. Simple About the site
2. Short Info on the staff
3. A way to contact outside of the main navigation
4. A purpose
5. Important policies for visitors to know in case they are unsure of the site’s privacy and disclosure.

While your site might include a bit about the site, yourself, and maybe a few other tidbits, you might be able to get away with a few extras. However, be aware that if you are a web designer, you might want to put your portfolio in another section while linking it in your About Page. For example, if you are a web designer, you might like to take a look at Darren Hoyt to get an idea of what you could do.

What kinds of things do you do for your website’s About Page?