Do’s and Dont’s of Great Web Design

http://pswish.com/do%E2%80%99s-and-dont%E2%80%99s-of-great-web-design/

When followed, this guide will prove to be quite a valuable web design resource. From the inexperienced to the experienced, this guide has something for everyone.

The Process of Great Web Design Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:

“a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface”.

The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).

All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites.
It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.

Stage 1: Conceptualization and planning
This stage is skipped more often than the other two stages. Most writers don’t enjoy creating outlines for research papers, and most web designers don’t like creating flowcharts either. Don’t be lazy. If you put forth the effort and plan out your website, then you will find the web design process to go smoothly with fewer mistakes made along the way.

There are a few things that you will need in order to effectively conceptualize and plan your website:

-a brain
-a pen and paper
-(optional) flowchart software
-a general idea of the different sections of your website

To begin, grab your pen and paper or launch your favorite flowchart software. We use OmniGraffle Professiona for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.

There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts search for flowcharts on Google or Yahoo.

View the flowchart that we created when conceptualizing Chromatic Sites. (1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.

(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your websites’ navigational hierarchy goes, the more descriptive each label should be.

The Dos
-Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enough -Whether you use a pen and paper or flowchart software, keep things as clean and organized as possible. Although you (and anyone working with you) are the only ones that will be using the flowchart, it still needs to make sense -Your primary sections should use broader terms, while secondary and tertiary terms should be more descriptive

The Donts
Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:

-Don’t use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topic -Don’t try and lump multiple topics on the same page. Create a general section for these topics and from that section create subsections. This will make the subsection (descriptive) web pages more likely to have better rankings in the search engines (Google, Yahoo, MSN, Ask) Once you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process:
modeling.

Stage 2: Modeling
In the modeling stage, static “wireframe” mock ups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:

-logo
-navigational menu
-content
-images, videos

To create these mockups, you can use a pen and paper or your preferred mockup software. In the past we have used Photoshop, but lately we have been using OmniGraffle Professional. OmniGraffle is not as resource intensive as Photoshop is and it allows us to assemble our wireframe mockups much quicker.

In addition, make sure that you have the flowchart(s) that you created nearby as you will need to reference these from time to time to make sure that you are mocking up all of the pages that will appear on your website.

Here is our example of how a wireframe mockup should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.

We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).

If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can).
Just be sure to mockup any unique layout that your website will have.
You’ll thank yourself later.

The Dos
-mockup all unique pages
-include important elements (logo, navigation, content placement, images/video placement) -start from the top and work your way down -reference your flowchart created in stage 1 to make you don’t forget to mockup any pages -save, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or so
-focus on clean, user friendly layouts -label your elements so you don’t forget what they are when you reference them in stage 3, execution -use other web sites as inspiration; there is nothing wrong with taking elements from other sites and making them your own (see “donts”)

The Donts
-don’t include graphics or colors (that’s for the next stage) -don’t make your mockups too “busy”; focus on clean, well organized, user friendly layouts -don’t skip this stage; it is just as important as the first and the last -if you take elements from other websites, make sure you don’t plagiarize; there is a difference between being inspired by another website to create certain elements of your design and blatantly ripping off their layout and colors

Stage 3: Execution
In the third and final stage, execution, the planning from stages 1 and 2 are combined to assist in creating a live, interactive website.
The third stage is by far the most time intensive since you will be 1) creating the graphics 2) creating the content, and finally, 3) converting the web designs from images into code that web browsers use to present your website to the world.

By the time you reach the third stage, you should have a clear idea of:

-how your visitors will get from one place to another (stage 1, flowchart) -how your web pages will be laid out (stage 2, wireframe mockups)

If you don’t have a clear idea of these two things, go back to the first and second stagees and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.

Ditch the pen and paper
In stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.

We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.

Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website).

When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit w3schools.com. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.

Here is an example of a nearly-completed website of the layout we mocked up in stage 2. This was taken directly from our web browser and as you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout.
Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.

The Dos
-reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to -do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing) -include color and graphics to create the final look for your web pages -use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers -reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all (or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the search engine spiders stop by; a great place to get CSS drop down menus is at DynamicDrive.com -finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your design once it is converted into markup (code)

The Donts
-don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable by search engine spiders -don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead -don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process (instead of at the end) -don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of large image files; Photoshop has a “Save Optimized For Web” option (CS3 - “Save for Web and Devices”)

Process Makes Perfect
By following a web design process such as the one illustrated in this article, you increase the chances of creating a website that is well-organized, easily navigable, and very user-friendly. Lets face it - if visitors get lost or become confused while attempting to surf your website, they might hit the back button and look for a more user friendly website. People do not like to think when it comes to finding their way around websites. Don’t make them think. You do the thinking by planning out your website from stage 1 to stage 3 and you will find that more people will enjoy visiting your website.

.JPG vs .GIF - What Should You Use?

http://pswish.com/jpg-vs-gif-what-should-you-use/

Do you oftentimes feel confused what to use for your web images– GIFs or JPEGs? And more importantly why? Great. You deserve kudos as confusion leads to comprehension. Here is what you have been looking for all the way! Essentially, they are formats in which web images are created in. Any file with a .jpeg or .gif extension is recognized, by a browser, as an image file. A good web site is partly one that will load quickly into a browser. Agreed? Well, for this to happen, your web page has to be small in file size. The GIF and JPEG file formats compresses images so that it is web worthy.

This is vital for you that you don’t mess around when it comes to decide what to use when. Here’s what you need to know (a subtle reminder and congrats for tech guys who know it)

GIF ( Graphics Interchange Format)

• GIF was the first-ever image format created for use on the web. This implies that all browsers of all versions can read images in the GIF format.
• GIF can icorporate transparency . This is great. Isn’t this ? Especially so when you wish your graphic to blend in with your background.
• GIF compresses an image using LZW compression . Confused? Simply put, this means that the quality of your image does not degrade when it is compressed. Deterioration in image begins to crop up only when it is having more than 256 colors.
• Good results can be had using GIF when there is a large area of flat color in the image. And when it uses fewer colors. The fewer colors, the better.
• GIF can be animated . All animations, barring the more advanced Flash movies, are GIF files.

JPEG ( Joint Photographic Experts Group)

• JPEG uses a lossy compression schem. This means that you will, in fact, lose some data during compression. The more you compress, the more quality you lose. You will, therefore, have to strike a right balance between image file size and quality.
• JPEG compression rate can well be controlled . The higher the compression rate, the lower the size of the image. And as you have guessed, eh? The lower the quality.
• JPEG is optimally used for photographic images . The more colors and subtle gradients an image has, the better.
• Browsers take a longer time to display JPEGs.

Demarcating features of JPEG and GIF

One of the worst mistakes (hopefully you won’t make any longer) a web designer can make is to opt the wrong format for a particular type of image. As a thumb rule, for images with few flat colors, choose GIF. Images with lots of colors and gradients, you may go for JPEG.

Simple enough. Here is your turn to appreciate a couple of somewhat tricky tech understanding with regard to JPEG and JIFF’s. Pertaining to JPEG, if the horizontal rows of pixels undergo change frequently without patterns, then a JPEG may allow for a smaller file even if it is having few colors only. For designers if they can save a few kilobytes on each image, it can drastically improve the loading time of image-loaded pages intended for users with slow connections.

Further, though you can have animated GIFs, this is rarely a good idea in terms of design.

There are a few things you can do with GIFs that you can’t do with JPGs. The best way to get the smartest web images and graphics is up to you: technology is at your disposal only to be selectively used for spectacular results. So get going to harness tech understanding! People who work with a Web Design and Development always know these little tricks, now you do also.

20 Invoicing Tools for Web Designers

Every web designer has a need to create invoices and track payments that have been received or have not yet been paid. Fortunately, there are a number of tools that can streamline this process, and we’ll look at 20 options here. There is a good deal of variety in terms of features and pricing. Some are better suited for organizations that have several employees, while others may be a good fit for a freelancer. Some of these tools will simply help you to create attractive invoices and other will extend further into the area of accounting software.

PayPal

PayPal provides a simple invoicing system that will email your invoices to your clients. This system is fairly popular with freelancers because there are no monthly fees, just a small amount taken out of the money that you receive. The PayPal account is then linked to your checking account and you can easily transfer the balance from PayPal to your bank. Personally, I use PayPal for my freelance blogging and I’m very happy with the service.

FreshBooks

FreshBooks offers more functionality than many of the other choices. It will create and manage invoices, track your time and expenses, and create reports. You can get started with FreshBooks using a free (and very limited) account, or you can choose from a number of different options to meet your needs. The pricing is pretty reasonable. You can manage up to 25 active clients for $14 per month.

Billing Manager

The makers of QuickBooks, Quicken and TurboTax also offer a free invoicing system called Billing Manager, which will help you to create and manage your invoices online. Billing Manager keeps your invoices in different folders to keep track of what has been paid and what has not, including tracking what is overdue. On their website they address the question many potential users have – why is it free? They explain that once you are using the service you’ll have the option to accept credit card payments through QuickBooks Merchant Service, and there is a fee for this. Personally, I appreciate the fact that they answered this question upfront, because I was looking for the catch. However, I don’t think this is much of a “catch.” You can still use the service for free, and if you choose to accept credit cards you’ll have a fee for any option that you select.

Blinksale

With Blinksale you can manage unlimited clients, but you are limited in the number of invoices you can send. You can send up to 3 invoices per month for free, or you can upgrade to 50 invoices for $12 per month. The biggest package allows for 1500 invoices for $49 per month.

LessAccounting

Less Accounting has taken the approach of targeting small business owners by providing a simple software that will provide the essentials for small businesses without the extras that more complicated systems include. LessAccounting is a simple accounting solution that also allows to create and manage invoices. The cost for LessAccounting is $19.95 per month, and the first 30 days are free.

PaySimple

PaySimple will help you to create and manage invoices by allowing ACH payments, recurring billing, online payments and credit card processing. Prices start at $19.95 per month with a $199.95 set up fee and small fees per transaction. Their site does offer a demo and they provide a 30 day money-back guarantee.

Invoice Place

Invoice Place offers a free basic service, with monthly subscription options for upgrading. You can create and manage your invoices online for up to 3 clients for free (unlimited invoices are offered on every plan). Prices start at $12 per month for managing 20 clients and go up to $32 per month for managing up to 500 clients. With Invoice Place you also have the option to export to PDF, Excel, or Word.

WORKetc

WORKetc offers a wide range of functions, including contact management, calendars, email marketing, project management, and of course invoice management. The monthly subscription fee is $44.95, which includes access for 2 employees, with additional employees costing $10 per month. There is a 14 day guarantee.

Billing Orchard

Billing Orchard maintains hourly time billing, along with flat fee and recurring billing. It claims to be the ideal solution for web developers, web hosts, and hosting resellers. The price for the basic system with automated invoicing is $14.95 per month. From there prices go up to $69.95 and there is an option to pay $10 per month for a support ticket system.

Bill My Clients

Bill My Clients offers different options and solutions for businesses of different sizes. For freelancers, they offer and invoicing and time tracking service for $11.99 per month. For small businesses, the service includes A/R management, also for $11.99 per month.

Invoices Made Easy

Invoices Made Easy is one of the lower-priced options at $5 per month ($15 per quarter). With Invoices Made Easy you can create and email invoices, track payments, accept online payments, and they will also print and mail paper invoices for you if you wish. The cost for having them mail your invoice ranges from $1 - $1.50 per invoice.

Invotrak

Invotrak is a free option for creating and tracking invoices. You can enter clients and manage invoices accordingly, but there are no advanced options such as receiving online payments, and there are no upgrades to a paid service available.

Simply Invoices

Simply Invoices will allow you to create invoices for time that you have tracked in More Honey. There is a free option that allows you to 5 different invoice templates with no custom logo, and apparently the invoices will also include their own links. For $9 per month you can get 10 invoice templates with custom logos and no links. Prices go up to $25 per month for infinite templates.

SimplyBill

SimplyBill provides a number of options, including creating, emailing, and printing invoices. You can also save invoices as PDF’s, creates quotes that can be converted to invoices later, and track payments and time. There are 3 different pricing plans, ranging from $5 per month to $25 per month. For $5 per month you can create up to 25 invoices for up to 10 clients. For $25 per month these numbers are unlimited. Each plan comes with a trial period.

Time59

Time59 is designed for independent professionals and freelancers. It can handle time and expense tracking as well as invoicing and payments. The price is only $49.95 per year and there is a risk-free 30 day trial (no credit card info is required for the trial).

Invoice2Go

Invoice2Go provides over 300 professional invoice templates to choose from. You can also send the invoices and track payments, and there is a free 30 day trial. The basic product costs $129 per year, and the advanced option sells for $249 per year.

Cashboard

Cashboard is estimate, invoicing, and time tracking software. With cashboard you can send fully branded and customized PDF invoices and estimates. Like many of the others listed here, Cashboard has both free and paid options. The free account will allow you to manage 2 active projects with unlimited clients and invoices. Prices for upgrades range from $12 per month to $140 per month.

Bill4Time

Bill4Time is a time tracking and billing system for freelancers and small to medium-sized businesses and it includes reporting capabilities. The first 30 days are free for all plans. Pricing is calculated according to the number of users. For 1 - 10 users the price is $35.95 per user. For larger organizations (100+ users) the price is $14.95 per user.

Free Invoice Templates for Excel

If you’re looking for a different option, you can download free invoice templates for Excel and create and manage your own invoices.

Invoice Creator for Excel

The Invoice Creator for Excel will help you to create your own professional invoices with Excel and there is only a one-time fee of $29.95.

How to Create an Effective Web Design Questionnaire

The internet has given the web professional a plethora of venues for seeking project-based work. With lots of places offering freelance gigs such as allfreelance.com, classified listing sites such as craigslist , and job boards on popular weblogs such as FreelanceSwitch and Smashing Magazine, the resourceful web builder can scout and find jobs that extends their geographical boundaries.

An effective creative questionnaire allows you to gain relevant, focused, and helpful design information without taking up a lot of the client’s time. I use the term “questionnaire” because it’s a familiar term, but as you’ll see, some examples aren’t questions.

This article is primarily about developing a one-way questionnaire where you aren’t there to explain or expound on the questions you’ve asked the respondent, though the same concepts apply whether you’re communicating via email or during a face-to-face meet.

Keep it as short as possible

Long questionnaire forms, in my experience, tend to result in rushed responses. Keep questions and the survey as short, concise, and clear as possible. We have to respect the client’s time. Typically, a demand for a website arises when a business is just starting out or when current solutions can’t meet increasing demands; either way, they’ve got a lot on their plate already.

Instead of:

“Think for a moment about your company’s mission statement – How does that traverse into the online world and how will a website achieve your mission statement?”

simply say:

“In your mind, what’s the business value of having a website?”

The latter example is terse and unambiguous. Let them do the writing, keeping yours to a minimum.

Include creative questions, preferably in the beginning

A creative question, in this context, refers to unconventional questions that have two goals:

1. to extract information indirectly - “If your website was a car, what car would it be?”
2. to get the respondent in a mood where they’re comfortable to say anything without restraint.

An effective questionnaire gets the client’s uninhabited, raw thoughts and emotions. Including them at the start can set this tone early on in the process.

Examples of creative questions

• Imagine a typical user browsing your website, what would they be thinking right now?
• Use one word to describe your website.
• What features of your website would your competitors be most envious of?
• If your website disappeared for a week, what would your users miss the most?

Provide example responses to focus and clarify your meaning

Your questions may seem crystal clear to you, but to the client, it may mean another thing. Provide sample responses to direct your client’s answers.

Some examples:

• List down key words that you associate with your company. Without prompts, you can get very colorful responses like “awesome”, “da bomb”, “where I get money for my gambling debts”. Adding “For example, a Spanish restaurant may use ‘paella’, ‘international’, ‘culture’” would make your question less vague.
• What types of designs do you like? You can indicate your expected answer by saying instead, “Please view these websites [then, list down some website addresses]. What do you like about them? What do you hate about them?”

Avoid unfocused open-ended questions

An open-ended question is one that allows the respondent to answer in a less-structured fashion. For example, an open-ended question would be, “what do you think about web 2.0?”. In contrast, a closed-ended question would be, “What’s one thing you like about web 2.0?”

Open-ended questions are a necessity in design questionnaires, but avoid ones that are vague and overly generalized.

Examples

• Describe the design you want. You can focus the respondent’s answers by saying instead, “Write specific design features that you’d like to see in the design mock-up”.
• Describe the nature of your business. This can be revised to: “Describe a typical day in your place of work”.

Evolve (tailor) your questions

Web development projects typically take week to a month’s worth of work. This means that you can—and should—take the time to customize your questionnaires for each of your clients. If you use a web-based form, this can be a bit more tedious, but it can be done by sending more questions in an email. Not only will this allow you to gain information unique to the client’s industry, it also shows that you’re giving personal attention to their needs.

Typically, I prefer to have only ten questions per questionnaire, seven of which are my standard questions and three are tailored towards the client’s particular organization.

What to do after you receive a response

Internalize it. What I do after getting a questionnaire back is I read it thoroughly, once or twice. I digest the information I’m given by rewriting and rephrasing the responses on a text file that I keep open as I design the mock-up. Embrace the subtleties of your client’s responses, take notice of grammar or spelling mistakes, all of this can be significant in helping you learn about the people you’re working with.

Example:

Website name: My AWESOME Company
Tagline: This is so awesome that I capitalized "Awesome"
Preferred colors: none specified, but described as  “high-impact”
Look and feel: Web 2.0, gradients, large text
Key words (design theme): fun, young, colorful

Ask for clarification if needed. Don’t be timid in following-up on answers that seem unclear to you. Ask as soon as you can so that your client still remembers the questionnaire-answering session.

Use it to strengthen your mock-up presentation. Use the responses while presenting your initial design mock-up to explain the design direction you took. Quote responses verbatim, if appropriate. For example, if you chose a sans-serif font face, you can say “In your response, you indicated that you wanted a clean, modern, professional design, which is showcased in the mock-up by the dark-gray, Arial font…” If you chose green hues, you can say “You mentioned that you needed a website that ‘evokes a feeling of cleanliness and ‘eco-friendliness”, so I decided to use green hues to…”

Use their responses to explain why you decided to use certain colors, a certain layout, why you avoided particular elements, etc.

Some other tips I’ve found helpful

Outline the purpose and relevant information in an introductory paragraph. Describe the purpose of your questionnaire. Assert what you expect to get as a response. Indicate the importance of the questionnaire. Typically, I’ll say something along the lines of “You are a very important part of the design process so your responses here will prove to be a valuable asset throughout the project”.

Let the client know how much time to take. Most of the time, this avoids rushed responses. I ask each respondent to take between 30 minutes to 1 hour so that they may properly answer the questionnaire.

Leave out the tech jargon. It doesn’t impress anyone, and it will only annoy them if they don’t know what you’re talking about. Use terms that are common knowledge.

Fix flawed questions. Every few projects (usually I do it every three projects or so), I take my most current questionnaires and I evaluate each question for its usefulness and clarity.

Fill out your own questionnaire. I’ve found it very enlightening to fill out my own questionnaire form. When you write the questions yourself, you don’t really think too much about the effort and the process of responding to them. I’ve found questions where I thought, “Man, I don’t want to answer this, it’s too damn long and I’ve got so much stuff going on”. Try it, at the very least, it’s a fun activity.

A Simple Guide on How to Effectively Talk to Clients

Everyone needs a website made, but not everyone can talk “tech” like we can. From the farm owner in Indiana to the brain surgeon in Malaysia, we quickly see that employers can come from all walks of life. Learning how to carry on a compelling conversation about web development is a paramount skill that all web developers should possess if you want to keep the checks coming in. Maintaining your audience’s interest and gaining an accurate picture of what they truly need to get done can prove to be a challenging part of any web development project, but here’s a few tips that might help a bit.

Get an estimate of their computing/technological expertise.

So that you know how in-depth you have to explain certain concepts or ideas, you should first try to determine the individual’s computing/technology knowledge. This can be accomplished indirectly with, what I’d like to call, fishing questionsfishing for compliments“). (similar to “

For example, you can ask in passing, “Hey, what operating system do you have on your home computer?” or “What’s your preferred web browser?”. What you’re really trying to learn is: (1) if they know the basic terminologies like operating systems and web browsers, (2) if they have any experience with computers and the internet, (3) their tech savvy-ness, (4) how and why they use IT. A person using Linux probably knows a thing or two about computers and Mac’s are generally appealing to artists, designers, and musicians.

Other fishing questions are:

• What do you already know about search engine optimization?
• Do you use Adobe Photoshop (or a similar digital-image editing software)?
• What are some websites you frequent on your spare time?
• Do you subscribe to any RSS feeds?

Don’t underestimate a person’s knowledge.

You know that colleague who insists on explaining to you the difference between HTML and (X)HTML when you’ve just finished a strict-doctype XHTML website? Don’t be that guy. People don’t like to be treated like they’re stupid, and not being able to understand a person’s knowledge is a sure-fire way of landing yourself on his or her bad side. If you’re unsure of their grasp on a particular subject, don’t assume they don’t know anything, ask fishing questions and judge by their reactions whether or not you’ve explained enough.

Use actual examples.

When talking about a web project, it helps to have a computer with an internet connection nearby so that you can both communicate look at stuff that’s on the internet. For instance, if you’re trying to determine what look-and-feel a client wants for their website (i.e. “web 2.0″, dark, clean, etc.) you’d get a more precise answer if you were to show examples of websites that may have a similar theme that they described.

Keep an emphasis on the bottom-line.

People may not understand what SEO is, or how it’s accomplished, or why valid mark-up matters when trying to achieve a search engine optimized site, but if you talk in terms of results, they’ll be inclined to keep listening. For example, trying to describe the importance of standards-compliant XHTML, you can say: “standards-compliant XHTML ensures that the website’s mark-up is valid and supported by most modern web browsers which in the end means less maintenance and fewer customer support due to browser-rendering issues“.

Keep it simple.

Sometimes we have a tendency to overwhelm employers with technical jargon and over-explanation because we want to show them our knowledge and expertise. There’s no need to explain how you’re going to mock-up the web design in Photoshop (layer by layer, in excruciating detail). Most probably, they don’t care and you’ll only risk complicating things and adding to the client’s anxieties about a topic they’re not well-versed in.

Encourage questions.

It’s always good to figure out any questions or needs for clarification as early as you can to avoid dissatisfaction at the end. Give off the attitude that you’re always willing to answer questions and that no question is too simple or silly. If you have the luxury to meet with a client in person, you can do this by judging their facial reactions to the things you say. If they seem confused, ask: “should I explain further?”. If you’re meeting remotely (emails or phone calls), regularly say things like: “I’d be more than happy to answer any questions you may have”.

Talk using familiar analogies.

A great way to relate information to employers is by using scenarios and situations that are pertinent with their background. Be creative, make analogies funny, and most of all, use it to relay complex concepts. To illustrate with a satirical example: if you were talking to a basketball fan, you could say “using tables instead of div’s for page layout is as bad of a decision as picking Michael Olowokandi over Michael Jordan on your fantasy basketball roster because…“.

Be yourself.

Don’t pretend like you’ve worked on hundreds of websites and that you’ve been doing this for 15+ years… if you really haven’t. If you look uncomfortable or unsure of yourself, it gives off the impression that your trying too hard to impress or appear knowledgeable in the subject. A lot of web designers and developers nowadays don’t hide the fact that they are small, young, and playful. When working in an industry that’s complex and intimidating to outsiders, it’s a welcoming relief to find people that are normal. It can prove to be a plus when you don’t obfuscate the fact that you’re just starting out in the business. It’s easier to talk to a person who’s honest, sincere, and up-front then someone who appears to be B.S.’ing you all the time.

Do you have your own tips on how to effectively communicate with your clients? Share them by leaving a comment!

30 Websites to follow if you’re into Web Development

I’ve made it a goal to learn at least one useful thing each day so that I can stay sharp and well-versed on the topic of web development and design. To that end, here’s some of the websites I keep track of to find new techniques, resources, and news about building websites.

Most of these sites are updated frequently, so there’s never a lack of new content that fills up my Google Reader.

Because the role of the web developer is ever-expanding, I’ve also included a variety of sites that covers fields relating to web development - such information architecture, user interaction, and web/graphics design.

1. NETTUTS

NETTUTS is a recently launched blog/tutorial site that provides "spoonfed web skills". There are already plenty of useful and detailed tutorials that range from offloading static content to Amazon S3 to creating a beautiful tabbed content area using jQuery. NETTUTS is perfect for developers just starting out, since the tutorials are very thorough and in a "step by step" format. For more advanced developers, it’s an excellent source of inspiration and learning new techniques.

2. woork

Woork is a blog by Antonio Lupetti, a developer from Italy. He provides short, easily-consumable tutorials on various topics of web development such as PHP, Cold Fusion, JavaScript, and CSS. His knack for creating beautiful tutorials, chock full of custom-made images that illustrates the concepts he talks about is a testament to the detail and "work" that Antonio puts in each of his posts. Check out his awesome tutorial on a "Top-Down approach to simplify your CSS code" where he explains his preference on creating and formatting stylesheets.

3. Web Designer Wall

Web Designer Wall is a blog by Nick La that features design ideas and elaborate, stunning tutorials such as creating a CSS gradient Text Effect - a technique that uses an image overlay over normal XHTML text, and jQuery tutorials for designers which showcases ten techniques to get you started with jQuery.

4. Smashing Magazine

I won’t say much about Smashing Magazine since most of us have probably heard of it, but if you haven’t, Smashing Magazine is an excellent resource for web designers and developers looking to be inspired. Smashing Magazine also manages to publish almost everyday, despite their very detailed and thorough posts.

5. Vitamin

Vitamin offers a large amount of information on the topic of web development and design. With many contributors, Vitamin manages to cover a wide range of topics including Ajax, CSS, development techniques, best practices, and workflow management.

6. Wake Up Later

Wake Up Later is the blog of Samuel Ryan, a freelance web developer/designer. Rather than covering specific web development techniques or providing tutorials, he talks about general web development related things such as reasons not to write your own code, tips on improving productivity, and common design mistakes made by developers.

7. Snook.ca

Snook.ca is run by Jonathan Snook, an icon in web development and design. His blog provides tutorials and articles about PHP, JavaScript, and more recently (the blog dates back to 2001), Adobe AIR. He also provides useful resources and bookmarks that are worth a read, and talks about things that are part of being a web developer such as project management via email and maintaining your personal brand online.

8. Signal vs. Noise

Signal vs. Noise is a design/usability company blog by the people over at 37 Signals - known for developing remarkable web applications such as BaseCamp Ruby On Rails. The blog gives insights about being a productive and effective web application developer and keeping things simple, with entries such as "Workaholics fixate on inconsequential details" and "Sleep deprivation is not a badge of honor". and their involvement in the popular open source web application framework,

9. adaptive path blog

adaptive path’s company blog offers news and posts on the topic of user interface design. There’s a variety of useful posts that cover the topic of creating user-friendly designs (not limited to just web applications). Some things the adaptive path crew writes about are "Tips for presenting the look & feel to a client" and "The Lure of the Single Click".

10. Tutorial Blog

Tutorial Blog provides handy tutorials, resources, and lists on various web development and design topics such as code snipplets for web designers, using layer comps in Photoshop to manage designs, and Flash tutorials. Tutorial Blog has a section on user-submitted tutorials which allows readers to share their own tutorials.

11. WebAppers

WebAppers is a blog created by Ray Cheung, a freelance web developer. The premise of WebAppers is to provide news and resources related to open source and free applications that are useful to web developers and designers. From cost-free fonts and icons to navigation menus and image galleries, WebAppers seeks to hunt down useful tools and applications aimed at reducing your time developing custom solutions.

12. Web Resources Depot

Web Resources Depot is similar to WebAppers - it discusses new web resources that web developers and designers may find helpful. Web Resources Depot is an excellent way to stay up to date with what’s currently available out there all in one place.

13. Ajaxian

With continual advancements in Ajax, it’s imperative to keep up to date with modern techniques and news. Ajaxian is the leading Ajax community run by some of the biggest names in the field. You’ll find information, reviews on JavaScript frameworks, helpful tools, and server-side technology specific (like PHP, RoR, and .NET) articles. If Ajax news and information is what you’re looking for, you can be sure to hear about it from Ajaxian.

14.DZone

DZone is a social news site for developers. Users share links related to development and can vote on submissions (very much like Digg but limited to developer links). You can subscribe via RSS to various pages and sections such JavaScript, Flash/Flex, or databases if you want to get instant updates to things specific to your interests.

15. Design Float

Design Float is social media site created for web and graphics designers. Like Dzone, people get to vote up submissions. You’ll find stuff about CSS, HTML, and Photoshop submitted to Design Float.

16. IBM’s developerWorks

With the name camel-cased, you already know off-the-bat that it’s a great site for developers. developerWorks offers many articles and tutorials pertaining to development topics, not just about web development, but also on related fields such as systems administration and open source technologies and applications. developerWorks has a knack for writing about complex topics and boiling it down to consumable, understandable articles. Some of my bookmarks include "Debug and tune applications on the fly with Firebug" (an introduction to Firebug) and the "Make PHP apps fast, faster, fastest" series.

17. del.icio.us

del.icio.us is a social bookmarking site where members can post bookmarks to keep and share. It’s not strictly for web developers but you can monitoring specific tags such as webdev, development, or javascript.

18. Sharebrain

Sharebrain is site that shares useful resources for web workers. You can find resources and tutorials on various web development and design topics such as Photoshop tutorials, Usability, SEO Tools, CMS’s, and interviews.

19. Style Grind

Style Grind shares useful news and information about web technologies and designs. Resources and news reported by Style Grind include a variety of web development and design topics such as updates on Erik Meyer’s CSS Reset and new plugins for jQuery.

20. PSDTUTS

Your value as a web developer increases when you’re proficient in design as well. Some examples would be Wordpress theme developers who not only know how to develop themes, but can also design them. PSDTUTS is a great place to improve on Photoshop skills and is a site I follow to learn more about graphics/web design.

21. Design Reviver

Design Reviver is aimed at providing useful information for web designers. You can visit to read tutorials such getting started with 3D in Flash, to get free downloads like Photoshop brushes, and to find design inspiration.

22. Blog.SpoonGraphics

Blog.SpoonGraphics is a blog about graphics and web design created by Chris Spooner, a graphics and web designer. You can find many tutorials on Adobe Illustrator and Photoshop, free, downloadable resources like “Sliding Door” tab menus, articles for inspiration, and news.

23. John Resig

John Resig is the self-titled blog of John Resig - a premier JavaScript developer and author most known for his creation of jQuery, a popular JavaScript framework. John Resig’s blog shares his thoughts about JavaScript development and web applications. It’s where I found out about the release of his new project: Processing.js (a JavaScript port of the Processing programming language) and where he voiced his thoughts on Google Doctype.

24. Boxes and Arrows

Boxes and Arrows is all about best practices, innovations, and trends in the topic of design - including information architecture, graphics design, and user interaction design. You can read about findability (how people look for information), counter-arguments of front-loading information above the fold, and web accessibility.

25. PHPDeveloper

PHPDeveloper brings together news and resources about PHP from blogs and sites that cover PHP. You’ll find reports varying from PHP video tutorials to interesting developments over at Zend.

26. Coding Horror

Coding Horror is a very popular blog (over 100,000 RSS subscribers!) by Jeff Atwood, a software developer. He talks about web development too, posing questions such as Is HTML a Humane Markup Language?, discussing Amazon S3’s viability to host images, and sharing information on versioning databases.

27. O’Reilly Network

The O’Reilly Network by O’Reilly Media (publisher of development books) features articles and blogs pertaining to web development and open technologies. Some recent articles include Creating Applications with Amazon EC2 and S3 and Getting Started with the Google App Engine. Some blogs that are part of the O’Reilly Network include WindowsDevCenter.com (for Windows Developers), ONJava.comONLamp.com (which talks about Linux, Apache, MySQL, and PHP). (topics cover the Java language) and

28. Google doctype

Google Doctype is Google’s new project that will include entries "by web developers for web developers". Currently, it doesn’t have very many articles, but it’s certainly a resource to follow in the upcoming months.

29. Web Monkey

Web Monkey - the web developer’s resource is back! Though they’re just getting back to the swing of things, it’s definitely a website to keep track of.

30. Digital Web Magazine

Digital Web Magazine is the online magazine for web professionals (web designers, developers, information architects). You can find many things included here such PHP, Web Standards, and Programming.