Group items tagged

Demographics. Regardless of the assessment tool you use, questions first should address basic demographic information. Prior to conducting a survey or focus group, spend some time online. The U.S. Department of Commerce publishes the Country and City Data Book which captures hard statistics for all U.S. states, counties, and cities with a population of 25,000 or more. Then, compile a questionnaire to address market segmentation along specific criteria:

Age: Users' wants and needs tend to change based on their generation. Knowing the average age range of potential users can help you design and market the site to meet that group's expectations. Gender: Male and female users often differ when it comes to what they value in a Web site. Studies show the factors that motivate women to visit or purchase from a particular site don't necessarily inspire men to do the same. Knowing gender predilections at the outset can impact the entire Web design process. Education: Data regarding potential users' educational background will help the Web developer determine design and content. In general, a site's format should target the average likely visitor, rather than aim at high or low ends of the academic experience curve. Geographic location: Where the target audience calls home drives the Web page content. For instance, urbanites living in a densely populated northeastern U.S. city likely will have different needs and preferences than their rural counterparts.

Marital status: Married Internet users typically access different retail/service sites than do single people. A TAP will help ascertain which group comprises your largest consumer demographic, with your Web site following this direction. Occupation: Although exceptions invariably exist, Web sites servicing "blue-collar" consumers will differ in style and content from those catering to professionals and "white-collar" workers. By the same token, retirees usually will have different preferences than consumers still in the throes of career building. Income level: A company targeting consumers who are apt to purchase luxury goods and services will require a Web site that differs considerably from a discount retailer's Internet page. Nationality: Businesses trading in goods and services for an ethnically diverse target market may need to consider multilingual content, as well as adjustments in design and format to fit cultural standards. Social class: A consumer's perception of his or her social status impacts preferences in goods and services - even when individual income does not reach this level.

Psychographics. Once you've finished with demographic-based questions, you're ready to take the line of inquiry a bit further. The science of psychographics (also known as "enriching characteristics") addresses why consumers act as they do. So, while demographics offer a general outline of your customer pool, psychographics brings critical characteristics of your target audience into sharper focus. Employing a psychographic methodology means devising queries about lifestyles, attitudes, values, beliefs, purchasing habits and other qualitative criteria. Although possibilities are numerous, key questions can help you and your designer hone and refine your Web site. Depending on your business, you might ask, for instance:

Do you consider yourself conservative or liberal? Is it important to care of the environment? What are your hobbies? Interests? Are you family-oriented or a loner? What type of entertainment do you prefer (cinema, theater, symphony, etc.)? How many books do you read monthly? What magazines do you read?

When you shop, which is most important - friendly staff, nice surroundings, good prices or convenient location? Do you shop for fun, because you must, or to relieve stress? Do you purchase (our) company's product because of quality, ease of use, price or availability? Do you patronize our competitor because their product is cheaper, product quality is better, service is friendlier, the store is nicer, or returns are simpler? Do you go online to work, shop, do research, play games, or e-mail? Do you think the Internet is tough going or easy to navigate? Do you prefer retail/service Web sites that are easy to navigate, easy to read, picture-heavy, or text heavy?

Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }

1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)

While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.

The x-height of a font describes the height from the base line to the upper reaches of the lower case characters, like the x. A proportionately large x-height helps with readability.

It’s a classic way of pairing; take a decorative serif for the heading and a sure-footed sans-serif for the body. Or take a no-nonsense sans-serif for the headings, with a pleasantly legible serif for the body. A winner in many cases. Let’s look at a few, kicking off with two system fonts. That’s right, even they can work well together.

Condensed fonts always work well to get your attention, as they take up a lot of vertical real estate.

Slab serifs make very effective attention grabbers, but can be a bit pushy if you’re not careful.

Pairing 3: Conflict Let’s not focus too much on what doesn’t work well, we don’t want to sour the joyous combinations in the rest of this guide do we? That said, let’s just illustrate how two fonts, which are arguably too similar, can look awkward together.

Once you’ve concluded that you don’t like a font pairing, try to work out why and it will help you make decisions more quickly in the future.

Once I exhausted the idea branching, I started drawing thumbnail sketches

Once I had a few rough compositions I liked, I began studying typefaces and letterforms.

In addition to my affinity for the letterforms, the pronounced medieval style of the headline type created a perfect contrast with the sans-serif modernity of supporting keywords and titles which I set in Helvetica.

My next step in the process was to research imagery which could be used as the foundation for background texture, and act as supporting visual content.

I started writing the CSS for the design at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page.

This unity of thought at the final stage of the process is a strong reason the designer and person responsible for generating the HTML and/or CSS need should be working together as closely as possible, if the two are not already the same person.

a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices

down to the eye again to optically adjust the letter-spacing and font size together

line height should also be relative to the font size as it scales up for larger displays

sites that have adopted bigger body text even at small desktop or laptop resolutions such as 1440 x 900. They go from 20px all the way up to 58px!

Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands

Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */