CSS, JavaScript and XHTML Explained

22 Questions to Ask Before Developing a Website April 29, 2009

I developed this “Website Development Questionnaire” in 2002. It is old, but it still serves me well, so I thought I would share. I don’t actually add the bold or italic sections below. Those were added here to help you understand the rationale for the questions:


1) Corporate Identity: Corporate Information (for site development):
Company Name (Legal)
Company Name (Branding)
Company Tag Line:
Company Phone Number
Company Fax Number
Address:
Other contact information
Business hours of operation (store hours / when phones will be answered, if relevant)

2) Domain Names and Hosting:
Main Domain Name:
What other domain names do you own?
Do you have web hosting? If so, what type (IIS, Apache?)

3) Briefly describe what your company does:

4) Adjectives: Please list 5 (or more) adjectives that you think describe your company or should describe your company in order of relevance / importance

This information is used to get a sense for design, and to help in SEO

5) Competitors: Are there any websites that you would consider your “competition”? Feel free to provide more information on how they are your “competition”, but, at minimum, provide for each competitor, include the company name, web address, and a list of “keyterms” that describe what they do and/or sell.

In addition to getting a good look at what key terms they may be targeting, I take a look at these sites to get an idea of the features they may need, target audiences we should be considering, and what the competition will be like in terms of SEO

6) Favorite Sites: Please list 5 websites you like. Include the URL, what you like about each site, and what you would improve upon.

These sites don’t have to be in the same business realm. By getting sites they like, i get a good feeling for their design sense. By finding out what they would improve upon, you learn alot more about what they are looking for in their site.

7) Least favorite sites: Please list 5 websites you don’t like, Include the URL. What don’t you like about these sites? What redeeming qualities to they have?

The pitfalls they list tells you what you need to avoid. Though redeeming qualities are rarely included when clients fill out this list, I get a good sense of what they like when they do answer that question. I usually find that the redeeming qualities from this answer helps me understand better their answer to question 6 above.

Products / Services: List the top ten products / services you provide

This should be redundant to the answer of question 5. If it’s not, I usually have to do some business development with the client to get them to focus the purpose of their site. I ask this question this way as well because I don’t want to start developing a site for a client if they haven’t finished developing their business strategy.

9) Selling points: Tell us why you, your products or your services are better than your competition (both online competitors from question 3, and offline competition)

10) User goals: Why do you think people will visit your site? When people don’t know you exist, why would they find you or happen upon your site? Why would they come back? If they do know you, why would they take the time to visit your site?

Most clients think users will just come to their site. This question helps them focus on why an average Jane or John Doe may end up on their site. Many brochure sites get most of their visits from people looking for an address or phone number. You can create a one page website for that. This helps the client focus on what the site’s real goals should be.

11) Target Audience: What types of visitors do you want to get? Who is your target audience? (age, education, and other demographics? Job status? Economic status? Role in the community?) Describe your “average” visitor as best you can.

The layout targeting a Japanese middle school students will be very different from a site targeting rural agricultural workers or British graduate school applicants. Knowing your target audience, their culture, their technical savvy, and their internet expectations can help you design your page in terms of look and feel and help you determine site functionality and user experience design

12) Secondary Audience: What other visitors is your site going to get? Job seekers? Board members?

This helps me determine what additional pages to include in a site. Your client may be a sole proprietor, but they may want to hire, incorporate and/or get venture capital funding. Making sure your site can grow to accommodate future features is important. Thinking about those potential features before beginning the design process give you an added edge.

13) Technical: How technically savvy is your average visitor?

14) Accessibility & Usability: Will web visitors have any special needs? (eyesight, language, mobility, reading level?)

15) Site Purpose: What do you want the visitor in question 11 (and 12) to do when they get to your site? What are your goals for the web site in terms of visitor actions? What do you think your site visitor should accomplish on your site?

16) Site Goals: What are your goals for the web site in terms of you company goals? How is your site supposed to help your business? What is the purpose of your site?

17) Site Analytics: What are your goals for the web site in terms of popularity and virality? What type of exposure do you anticipate your website, when “successful” should achieve?

This question has dual purposes: The first is to help set numeric goals for the site that can be tested with common analytics. The second is to guage the sense of reality of the client: if they expect to reach 1,000,000 page views their first month, they’ll let you know their expectations via this question. This is the time to take some sense into them so they aren’t disappointed and don’t set their expectations too high

18) Site Features: What features do you think your website should include? (calendar, forum, login, price comparison chart, contact form, anything?)
For each feature, please state the goal of said feature.

Some clients want the moon. By stating the goal of each feature, they may realize they don’t need the moon. Other clients have no clue what is available to them. They never ask for a contact form at the initial contact, but i have yet to have a sole proprietor client who doesn’t want a contact form after reading this questionnaire they just never thought of it. This question helps define which features are necessary even if they weren’t originally thought of, and which ones sounded good originally, but really won’t help.

19) Site No Nos: Do you have any definite remarks on what you DON’T want to have on your website? (Flash, splash page, the color pink?) Sharing why you don’t want a feature will help me get an understanding of your user experience tastes, so feel free to elaborate.

This question is really helpful as is. Adding the examples has helped me explain against the dreaded splash page.

20) Other: Anything else I should know?

21) Product Manager: Company Contact(s) Information for web decisions:
Primary Contact Name:
Contact Email Address:
Contact Phone:

Secondary Contact Name:
Contact Email Address:
Contact Phone:

Other contact information

22) Billing Contact: Company contact information for Contracts & Billing:
Name:
Department:
Address:
Phone:
Fax:
Email:
Other contact information

Always know who is going to pay you before you start working

Canonical tag for SEO February 12, 2009

Google, Yahoo and Microsoft are now supporting the canonical meta tag as the standard for identifying the actual source of your content: the real URL that you want to recieve page rank for your key terms.

Many sites have the same content show up with different URLs due to search features, dynamically generated URLS, tags, etc. Google, Yahoo and other search engines have been knocking your sites for having duplicate content as if you were spamming your terms. In other words, having multiple URLs pointing to the same content has been hurting your page rank and your site.

Now you have a way to make sure that your multiple content helps you instead of hurts you.

Implementing the CANONICAL meta tag

1. Pick one URL for your page – “the pretty, preferred or canonical URL” (to quote Matt Cutts). For example, this page’s main, or canonical, URL is http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/, though you may find it thru http://www.evotech.net/blog/?p=69 or http://www.evotech.net/blog/?s=SEO, http://www.evotech.net/blog/category/seo/ or simply http://www.evotech.net/blog.
2. Figure out how to include your page’s main URL in pages that are dynamically generated. For example, I need to figure out how to include my primary URL – http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/- in the web page showing this content no matter which URL from the bullet point above is shown.
3. Once you know how to get the URL you picked in step 1 into your possible other pages feeding the content from your main URL, place the canonical link tag inside the tag with the main content’s URL. For this example, I would place: <link rel=”canonical” href=”http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/” /> in my header.

The syntax is similar to the stylesheet link tag:

<link rel=”canonical” href=”http://www.yourdomain.com/yourpage” />

The canonical tag is ONLY for webpages in the same domain. So, http://evotech.net/blog pointing to http://blog.evotech.net or http://www.evotech.net/blog is fine. However, I can’t point http://estelleweyl.com/blog to http://evotech.net/blog if I were to have that URL as an addon domain on this server.

Now I just have to figure out how to do step 2 so I can create canonical links for this blog.

Added Notes:

Lori basically figured it out for us: (copied from http://beedragon.com/wp-test-site/2009/02/13/add-canonical-link/). Thanks!

Add canonical link tag to head

<?php if ( is_single() || is_page() ) { ?>
<link  rel="canonical" href="<?php the_permalink(); ?>" />
<?php } ?>

Occurs to me now that you’d have to hardcode main url, then get the slug and other url info dynamically:

<?php if ( is_single() || is_page() ) { ?>
<link rel="canonical" href="http://mainurl.com/<?php echo the_time('Y'); ?>/<?php echo the_time('m'); ?>/<?php echo the_time('d'); ?>/<?php echo $post->post_name; ?>" />
<?php } ?>

There is probably a prettier and/or more efficient way to do that, but can’t think of one at the moment.

CSS Background Properties: possible values, default values, browser support and DOM August 9, 2008

Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.

background-attachment: fixed | scroll | inherit | local;

document.getElementById("myID").style.backgroundAttachment

background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) /  rgba(r%, g%, b%, 1)  | #fff | #123456;

document.getElementById("myID").style.backgroundColor

background-image: inherit | none | url(relative to CSS);
background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.

document.getElementById("myID").style.backgroundImage

background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;

document.getElementById("myID").style.backgroundPosition

background-position-x: center | inherit | left | right | px/em | %;

document.getElementById("myID").style.backgroundPositionX

background-position: bottom | center | inherit | top | 10px | 2em | 50%;

document.getElementById("myID").style.backgroundPositionY

background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

document.getElementById("myID").style.backgroundRepeat

background: background-color | background-image | background-attachment | background-position | background-repeat

document.getElementById("myID").style.background

Favicons: why and how to create favicons September 3, 2007

The "WHY" of Favicons

Favicons ARE an integral part of your website and branding.

Favicons are the single most important graphic appearing on a website. While that sounds like a strong statement, it’s true. Favicons are the least expensive and most overlooked visual branding opportunity.

Favicons are the 16 x 16 pixel images that show up in the navigation bar of your browser. They also appear in browser’s bookmark/favorites menu. You might think, "big whoop! that’s not vital." But those aren’t the only places they appear.

They also appear at the bottom of my blog: not my favicon, but the favicon for stumbleupon, digg, technorati, del.icio.us, etc. Web developers and copy editors don’t even need to use the names of those online brands: everyone recognizes these networking favicons.

They now also appear next to the page title on the tabs in tabbed browsers: if a user has 25 browser tabs, each tab may be as narrow as just the favicon: would you prefer your visitors see Internet Explorer’s blue E, Safari’s blue compass, an icon of a page (Firefox and Opera), or would you prefer that they see your logo? If they see a logo, they recognize immediately what site is opened in each tab: you want to be one of those recognized pages.

Are you looking at your open browser tabs? Can you tell which pages are which? Have you checked your bookmarks list? Are there some bookmarks that stand out more than others? Have you looked at the bottom of this blog entry? Depending on how many toolbars you have downloaded and have open, you may have a plethora of favicons there too. So, have I convinced you?

The "HOW" of Favicons: How to design & create a FavIcon:

Designing a Favicon:

• If you have a logo that easily translates into something that looks decent at 32 x 32 or 16 x 16, use it.
• If you can avoid using the color blue, especially the glassy shiny blue of IE, avoid using it.
• Keep it simple. Yahoo uses a Y!, Google uses a G. Flickr uses two little circles. Delicious is a square made of 4 squares. IE is an E. These are all ones you know.
• If your logo is very complex, try using just a part of it such as the first letter. If your first letter doesn’t represent your company well enough (like in the case of this blog), use your logo color to abstract an image.

Creating a FavIcon: Converting an image to a .ico

• Following the suggestions above, create a 48×48 or a 32 x 32 image that you will use as your favicon. Save it.
• If you have photoshop, you can download a Favicon extension for Photoshop. If you don’t have photoshop, or don’t want to deal with extensions, you can visit Dynamic Drive and use their tool to convert your .jpg, .png or .gif into a .ico file. The file created will be called favicon.ico. You will be directed to download it.
• Upload the .ico file to the root directory of your website.
• If your favicon is named favicon.ico, then you don’t need to add code. However, if you don’t have the .ico file in your top level directory, or if you saved it under a different file name, or if you have different favicons for different parts of your site (not usually a good idea, but Yahoo has different icons for some of their properties, such as Yahoo! answers), then include the following in the header:
   
  
  <link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/x-icon" />

Uses of Favicons

Now your favicon can appear all across the web:

• Branding in the browser address bar.
• Branding in the bookmarks/favorites menu.
• Branding on browser tabs
• Bookmarked links on other sites
• Branding in your email signature
• As a bullet or icon in someone else’s link to your site
• Let me know of other ideas in the comments section….