Writing web design proposals that get signed

signature

signatureWriting web design proposals is time consuming and non-billable unless you land the job. I had a salesperson tell me it’s a numbers game, the more proposals you get out there, the more jobs you land. Not true. It’s a combination of weeding out the weak and solidifying the strong potential clients.  You are going to spend hours or days researching and writing a solid proposal, so make sure it is worth it.

Weed out the weak

This is done by asking questions. There is no such thing as too many questions. By the time you leave the first meeting, you should be able to understand the problem at hand and have a good idea of how to solve it.

A web design questionnaire is absolutely crucial. If you don’t have one, write one. If you need help with the questions, Web ReDesign | Workflow that Works by Kelly Goto & Emily Cotler is a good place to start. The book has a sample questionnaire to base yours on.

The answers to the questions are almost as important as how the questions are answered. For example, “What is the budget?” actually means, “how much research has been done?”

“What technology would you like to see used?” means “how many bids have you gotten?”

“Do you have a sitemap or website structure?” means “how serious are you?”

Know when to walk away.

If a potential client is just in research mode, keep the meeting short and don’t waste time on a proposal. Point them in the right direction to help with their research, like your blog and eNewsletter, leave a card and add them to your mailing list.

Sometimes they are serious but not clients you want to take on. Watch for anything outside of the scope of your business plan. If you are just starting out and willing to take on most types of projects, beware of PITA (Pain In The rear) clients. If you are up to the challenge of a PITA client, make sure your bid reflects the extra headache. What is it worth for you to do the job?

Sometimes they are just trying to get a better deal from someone else. They are working with another web design firm and they just want your quote as a baseline to try to get them to lower their price. You can usually find out by asking the right questions.

Solidify the strong.

Listen, don’t sell.

Talk about the website at hand, not past websites or clients. You are there for one reason – to help them. Offer suggestions and solutions. Show them you understand the challenges they are facing and you can help them to meet their goals head on. Of course, you have to be able to do this. If you realize at any point during the meeting the goals and requirements for the website outside the scope of your business plan, gracefully bow out. Refer a more fitting web designer if you can.

Be trustworthy.

As a web designer, you will have access to passwords, email accounts and other sensitive information. Your potential customer has to trust that you will do a good job. They have to feel at ease trusting you with this, and that isn’t something that can be faked.

Be honest.

Business owners can smell BS a mile away. If they couldn’t, they wouldn’t be in business very long. If you don’t know an answer, don’t give an answer. Look into it and get back to them.

Set clear expectations.

Before you leave the meeting, prepare them to receive the proposal. Let them know what your standard contract terms are. Give an estimated price range if you can. State the up-front costs. Handle any objections immediately. No surprises allowed. The potential client should be in agreement in all but signature before you put any time into writing a proposal.

The proposal

Research everything.

Know what kind of research to do and do it. Keep notes of all apps, themes, fonts, graphics, programmers, writers and anything else you might need. If you have to get an outside quote, get it now. If you have more questions, call the client. If you will be using new applications, download them, install them, and try them out. You have to know the potential pitfalls before setting a time line and price. Assume the proposal will be accepted when it is presented and get all of the information you need to begin working right away.

The proposal.

The size of the proposal should be proportionate to the size of the job. For a small website that will have few changes, a one or two page proposal can outline the job and include the terms. If the job is a two year long project that needs to be approved by many levels of management, it will be several bound pages and might include charts and graphs. You don’t need to include every detail, just enough to establish boundaries of the job, payment schedule and a time line.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

WordPress Web Design Tips

WordPress logo

WordPress logo

Our little shop is primarily a WordPress web shop. We design custom WordPress websites that are search engine friendly and easily editable by the client. Here are some tips for WordPress web design.

Do not modify core files in WordPress.
It might be the easy way to do something, but it will be over written when WordPress is updated. It won’t seem like such an easy fix when you have to do it again. You should be using a plugin instead. Plugins are the best way to add functionality to a WordPress site. If you can’t find a plugin to do the job you need done, build one.

Modify the child themes, not the parent themes.
That is what child themes are for. Create your child theme and keep your modifications to your own child theme files. Parent themes are updated occasionally and you will lose your changes.

Use one javascript library.
Find a suitable javascript library and stick to it. jQuery is good. Mixing javascript is bad. Finding pre-existing scripts on the web to incorporate in your design is a good way to learn. If the comments in those scripts in any way contain the phrase “I don’t care,” ditch the script. Learn from it if you can, but do not waste time trying to make it work.

Keep your code clean.

  • Delete extra styles in the CSS.
  • Remove unused PHP from the functions file.
  • Remove old analytics code if it is no longer needed.
  • Delete unused or unnecessary plugins.
  • Consolidate your javascript and CSS whenever possible.
  • Clean up files while you are working and make sure all files are organized and clean before the site goes live.
  • Comment your code clearly.

Do cross browser checks as you work.
It’s far better to frequently check as many browsers as possible as you work than to try to fix many things at the end. All too often, fixing one thing means breaking something else.

Validate code. Validate code. Validate code.

Pay attention to the details.
As Ludwig Mies van der Rohe said: “God is in the details.” The details will make or break a design. It’s okay to be a perfectionist.

Test everything.
Never publish anything without testing it first. Test in multiple browsers and platforms. Have your friends test it. Have others in the shop test it. Make sure all forms work. Make sure it works as it should before publishing live content.

Written by Shanna Cramer, owner of The Web Shoppe in Fargo, ND. Twitter Facebook

Gravity Forms Contact Form Plugin for WordPress

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

Calculating a selector’s specificity

(from http://www.w3.org/TR/CSS21/cascade.html#specificity)

A selector’s specificity is calculated as follows:

* count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
* count the number of ID attributes in the selector (= b)
* count the number of other attributes and pseudo-classes in the selector (= c)
* count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Example(s):

Some examples:

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=”" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */






In the above example, the color of the P element would be green. The declaration in the “style” attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

10 things web design taught me in 2009

top-10

The thing I love about web design is getting to learn something new everyday. There are a few lessons this past year that stand out. Maybe you can relate.

  1. Do not buy software that does not have a manual or help files.
    If a company doesn’t take time to write out a FAQ or help page, how well do you think the software is written?
  2. Do not deal with Hostway.
    There is no nice way to say that. Hostway has perfected the art of pissing people off.
  3. Do not buy web design from a pawn shop.
    Seriously. Don’t. They use Hostway.
  4. Always get the user manual and read it from cover to cover.
    Even if it’s an eBook. I know it hurts to read a book sized PDF, but sometimes it’s worth it.
  5. Say no to jobs that are outside of your business plan.
    Sometimes even long time customers have to be cut loose if the project will take time away from reaching your goals.
  6. If someone wants flash drive graphics, refer them to your least favorite competitor.
    They also probably want a one page website that just shows different things when you click. They might also want 40 high res graphics that load fast and look exactly the same on every monitor. They also probably know everything about websites so they don’t need to listen to you.
  7. Test new software for at least a month before paying for it.
    See also #1.
  8. Accomplish something every day.
    Taking on large projects means a project will not be finished or checked off the list every day. Try to have a few small projects that can be checked off because finishing a project feels like progress and progress = happy.
  9. Help someone everyday and expect nothing in return.
    It’s good for your Karma. Check twitter. There are always people asking for help on something or other.
  10. Clients do not make the rules.
    Just because a client really, really wants this website live ASAP does not mean you have to spend every day and night working on it. One client is not worth burning yourself out on. Steady pace wins the race.

What have you learned this year?

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

I learned something today

WP-logo

I have a new server now, so I am in the process of transferring all of my sites and my customer’s sites from the old hosting account to the new server. The old Dreamweaver sites all went smoothly as expected. The newer WordPress sites on the other hand, have been a little more challenging.

What I learned is there is a proper order for transferring WordPress sites to a new hosting account. It goes like this:

- Clean up existing Blog
- Use EXPORT tool from old wordpress
- Apply for new hosting (transfer existing domain)
- Propagate DNS nameservers
- Fresh install of WordPress (via Fantastico/Simplescripts/Independent) on new hosting
- Adjust permalinks on new hosting
- Use IMPORT tool in new wordpress
- Transfer via FTP images from wp_content/uploads
- Upload/Transfer current theme to new hosting
- Install new plugins to new hosting
- If necessary, meddle with .htaccess on new hosting

Thanks to Pigduck over at wordpress.org for that information.

Even if you do everything right and in the correct order, sometimes the themes cannot transfer correctly. Notice Custom Design Tool’s new design? It’s not the only site that is looking a tad bare today. This is my own custom child theme based on the Hybrid Theme framework.

Another thing I learned is that if you and tech support are having communication problems of any sort, get off the line with tech support immediately. It is just not worth the headache to try to work through it. Actually a dental implant procedure would be less stressful than a difficult tech support call.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

Everything you need to design a website

960 Grid

Assuming you have basic HTML/CSS skills, you can find everything you need on the web available at no cost to design a nice looking, professional website.

First we will start with some web design tutorials.

Next you need a grid system to hold up your site structure. Try the 960 Grid. Very good, very free.

960 Grid

960 Grid

Then you need a color palate. For the best custom color palates that always look good, use the Color Scheme Designer.

Color Scheme Designer

Color Scheme Designer

Now some graphics. Now that you have an awesome color theme, find some graphics to match. Some free stock photo resources are listed here.

Maybe you want a drop down menu. Try the suckerfish family. It has been built on and improved so many times, you should easily find something suitable. Here is a link to Son of Suckerfish.

How about some cute icons? RSS, twitter birds, download, etc. can all be found by the hundreds from any graphic or web designer that is trying to get web traffic. Smashing Magazine has a post with some really high quality free icons. Here is another good resource for free icons.

Free Icons

Free Icons

If your graphics and icons are looking a little clunky next to each other, you can edit them with Gimp.  Gimp is a free image editing program along the lines of Photoshop.

Gimp

Gimp

At this point, you have everything you need to be able to put together a reasonable looking, valid xhtml/css-based website.

W3C Validation Service

W3C Validation Service

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)