CSS for Navigation, Menus, and external Navigation for web designers

http://www.twinhelix.com/

Web Design Project Management

The Initial Contact With Your Client

Collect Client Contact Information

• name and title of initial contact:
• Business/organization name and location:
• email address:
• Business phone including area code or country code:
• existing website(s):
  

If you are unable to respond right away, find out if the standard response time is ok.

Assess objectives and requirements

Conduct surveys and interviews to determine the Main Objectives:

• Who do we want to visit the site? [Identify audiences]
• Who are you?
• Who are you competitors and what are their strengths and weaknesses?
• What are we publishing that those visitors will find important? [Identify site goals]
  
• What do you do?
• What is the concept, product or service provided or promoted by this site described in detail?
• What is the primary purpose of a new site?
• What business problem(s) need to be resolved with redesign?
• Where are our visitors in terms of geography, ambient environment, and client platform? [Identify audiences]
• Why does the sponsor want the site built—what are its business objectives? [Identify site goals]
  
• Why does what your company does matter?
  
• When should the site be launched, phased, maintained, and finally taken down or redesigned? [Generic project timeline & Key factors in creating your timeline] [size of site (12 or 1000 dynamic pages)] [mandatory launch date?]
• How are we going to build the site—what tools are we using, and what’s the budget? (browser support guidelines) [Key players on your development team] [technological requirements] [features? forum, chat, streaming video/ audio, CMS, ecommerce, commenting, reviewing] [Who will administer these features (what staff members)?] [Who will create and administer content?]
  

Review Current Content and Plan for Development

• Content review, delivery plan, and timeline
• Web-writing guidelines
• Consistency check

Note: Get approval on the main objectives before moving forward.

Note: Design preferences/requests should be noted separately. They will be reviewed later after any usability testing and wire framing.

Conduct User Testing

This is the UX testing portion which can be done with as much complexity as needed. If your site has undergone formal or informal usability testing please provide copy of the results.

Roleplay likely visitor sessions of your primary and secondary users:

• personas that you want
• personas that are likely
• personas who you hope will not visit but could and influence others

What primary action should a primary user take when visiting your site?
Examples:

• becoming a member
• subscribing to a newsletter
• reading editorial content
• purchase product

What user needs does your existing site fulfill?

Produce wireframes (and establish site architecture)

Determine Site Structure and Navigation

• Organize content and create sitemap
• Determine navigation

Basic layout of the entire site’s significant elements:

• page headings
• navigation
• primary content
• sidebars
• application interfaces

Create a wireframe for all page types not just a general wireframe for the whole site.

Produce sketches, comps, and (if necessary) prototypes

Any client design requests should discussed first. Anything that is recommended against because of usability or accessibility guidelines should be documented.

Things to discuss:

• branding
• brand attributes (caring, honesty, humor, professionalism, intelligence, technological savvy, sophistication, reliability, and trustworthiness)
• feelings (warmth, friendliness, reassurance, comfort, or excitement)
• desired look and feel (Easy to look at, edgy, classic, up-to-date, crisp, modern, traditional, understated)
  

The art director or designer will determine visual elements:

• colors
• typography
• illustration
• photography
• composition details that are important at the section or element level

The sketch/comp/prototype incorporates:

• the layout described by the wireframes
• the visual elements agreed upon by all art directors, designers, and clients involved

Get comp approved before moving to the next step.

Draft the style guide

Rules/Recommendations for styling, such as:

• blockquotes
• how much whitespace should exist between sidebar sections
• the desired aspect ratio of inline graphics
• what icons should be used for list item bullets

List the rationale next to each styling rule/recommendation.

Produce templates and stylesheets

This should start with a framework and adding site specific html and styles.

Include a favicon with template.

Write code

add links to rss

ad links to analytics

ad links to webmaster tools
ad links to other seo tools
write robots text
write sitemaps

Test presentation and behavior

use check list to make sure all areas are accounted for [example web design proof checklist]

You've triple-checked for typos and accuracy. You've tested for cross-browser, platform, and ADA issues

Reconcile test results, if possible

Publish

You upload your files to the server.


Launching, Tracking, Maintenance

• Launch timing and publicity [launching your site at the lowest-possible traffic times and publicize when ready]
  
• Feedback and site statistics [email or form available on site for feedback?]
  
• Updating content [provide a resource for use with in house content publishers/editors]
  
• Prioritizing Phase 2 ideas

Thanking

Sources:
Avoid Edge Cases by Designing Up Front by Ben Henick at alistapart.com
Public Affair's Web Project Management Guide
Happy Cog Project Planner available on Happy Cog's Contact Page

CMS Information

CMS and the Single Web Designer

CSS Framework will make your life easier

please pardon my mess. information is in the process of being collected for this subject.

tools

libraries

conventions

• naming conventions: Make a Naming Conventions Chart
  Create a chart of agreed upon naming conventions for all parts of your framework. A web design comparison table of naming conventions by industry professionals is available at stuffandnonsense.co.uk.
• other conventions

best practices

• W3C Web Standards (XHTML/CSS Validation)
  
• Accessibility (content preceeds the navigation) [Flexible in response to user initiated font-size adjustments.]
• content should dictate our layout, not the other way around (one single XHTML might not be the solution)
• SEO [Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).]
• Accomodates IAB's Ad Unit Guidelines for common ad dimensions.
• Cross-browser compatibility - Offers full A-grade browser support.

examples of things web designers use on every project that can be abstracted

• reset.css—handles the mass reset. A “mass reset” of default browser styles. For example, setting margin and padding to 0 on all elements, turning off borders on framesets and images, etc. (see also: Global White Space Reset) (Eric Meyer's Resetting Again)
• type.css—handles the typography. good typography - stylesheet that sets up the typography and Aligning the type to a consistent baseline. This includes things like setting the margins on block level elements like paragraphs, headers, and lists to the same value as (or some multiple of) the base line-height setting for the site. Relative font-sizes everywhere; typography examples are available at How to size text in css and Compose to a Vertical Rhythm
• Creating basic styles for forms.
• Creating a few CSS classes I always use, such as .hide (where I set the display value to none) and .mute (which I set to a smaller type size and sometimes a lighter color).
• grid.css—handles the layout grid. same basic 16-unit grid structure or An easily customizable grid (like in google blueprint )
  
• widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons. common widgets, like drop-down menus, navigation tabs, buttons

• navigation tabs:  
  ul.tabs li {
  border: none;
  background-image: url('/images/tabs/ »
  site-specific-tab-look.jpg');
  }   All the work of floating the list items the to the left and making the links  inside them display as blocks (also floated to the left) with the text centered  in the middle

• list of photos that appear as thumbnails
• hacks and workarounds (such as those that accommodate older browsers) tend to be too site-specific
• base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework. careful: adds to the number of HTTP connections
• stylesheet for printing
• An extendable plugin system
• Support for PNG transparency in IE5.5+ (js)
• Liquid layout version
• support for external navigation
• fixes like class="clearfix"
• cross-browser compatibility: like alt css for ie6 or gte ie 6; examples and info are at CSS Bugs in IE5.x Mac, Will the browser apply the rule(s)?, My CSS Framework
  
• page loads differently for different resolutions
• Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
• Layouts less than 100% are automatically centered.

Any framework must account for the most common layouts, otherwise it'll never get used.

• Vertical navigation with one content column
• Vertical navigation with two columns of content
• Horizontal navigation with one content column
• Horizontal navigation with 2 columns of content
• Horizontal navigation with local navigation and one column of content
• Horizontal navigation with local navigation and 2 columns of content
• four preset page widths,
  
• six preset templates, and
  
• the ability to stack and nest subdivided regions of two, three, or four columns.
  
• The 4kb file provides over 1000 page layout combinationss YUI
• Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
• Supports easy customization of the width for fixed-width layouts.

for multiple pages can use Body ids to switch styles

adjusting layout will use some tricks:
Dunstan published his absolutely positioned menu technique
negative margin tricks : Ryan Brill posted about them on Mezzoblue
floated layouts : clearfix method by Tony Aslett
Floats, Margins and IE

common building blocks in the above 6 layouts?

• Header
• Footer
• Main content
• Sub content
• Main nav (#nav-main rather than #main-nav) [programers call nav used on every page of site "global navigation"]
• Local nav [prgrammers call section nav "local"]

others building blocks

#branding
#branding-logo
#branding-tagline
#container for pg container or #page
#nav or #navigation
#nav-section for nav for that section of the site that you are in
#nav-external for external links
#nav-supplementary or #nav-supp for supplementary links commonly found in the footer; (they are suggesting that this could replace the footer but that would not be useful for a framework)
#search
#search-input [search form]
#search-output [search results]
#content
#content-main
#content-news
#siteinfo
#siteinfo-legal [copy right]
#siteinfo-credits
'related-links'
date
rss


blog:
--- .entry
---- .entryTitle,
.entryAuthor,
.entryAuthorEmail,
.entryCreated,
.entryModified,
.entryContent,
.entryChildren.

ecom:
#content-products
.products
.products-prices
.products-description
.products-review

structure our websites?

1. Header
2. Main content
3. Sub content
4. Local nav
5. Main nav
6. Footer

Read More at:

Yahoo!'s YUI Grids CSS

? CSS Framework Themes: a collection of different sets by multiple contest entrants
? My CSS Framework by Karl Dawson
? Schema by David Golding
? Modular CSS
? Smashing Magazine's CSS Frameworks

Schema Web Design Framework - David Golding Design

Yahoo! UI Library Grids CSS

Sources:
Frameworks for Designers by Jeff Croft at alistapart.com

Google's Blueprint CSS credits Jeff Croft, Nathan Borror, Christian Metts, & Eric Meyer

A CSS Framework by Mike Stenhouse at contentwithstyle.com

My CSS Framework by The Standards Guy



? Not Reviewed Yet

Improving Your DESIGN Skills for web designers and developers

The Struggle for Artistic Merit to No End
I talk about this subject too much and stumble on articles that touch on this subject multiple times daily. Today I found these two articles: Digital Web Magazine's Collecting for Design and A List Apart's Understanding Web Design.

Here are the highlights:

Jeffrey Zeldman implies the absurdity of it all, "What is the “London Calling” of television? Who is the Jane Austen of automotive design?"

Matthew Smith articulated it with unbelieveable conciseness, "...Good-looking design is useless unless we’re willing to conform to standard design patterns and accepted principles of user experience"

Matthew Smith sums up the major points I've encountered in my months of research to learn how to impress the art community with web design. With a minimal graphic design background, I feel like I have been given the impossible task of creating a fine art piece in the medium of web design. The two things that I learned is that creating a better user experience is true good design and that good web design is not going to be good art. Make a site that is well formed, pleasing to modern aesthetics of popular design, and make it's primary goal to create the perfect user experience. Once you finish your MFA, then you might be able to make a web site that is also a peice of art but until then, just make sure you're a good web designer.

Sorry if you have already read 5 other posts similar to this. Reading helps but moving on improves you.

Process
I've been looking for more process articles to learn how to improve my design process.
Smashing Magazine interviews designers with some process related questions in 35 Designers X 5 Questions

Process: Collecting
Collecting for Design states that there are three parts to the improvement process:

• Reading
• practicing
• collecting

His article talks specifically about collecting which contains three parts:

• Integration
• Separation
• Creation

You should find a place to store your images (examples, screenshots, ect...) either locally (iPhoto) or on the web (Flickr), so you can easily sort them for reference.

Make the process as easy as possible so you will follow it with tools that help simplify (FlickScreen).

Sample Collections:

• Gustavo Pimenta’s Design Solutions on Flickr
• Clearleft’s Design Inspiration Pool
• Patrick Haney’s Web Design Inspiration
• Factory Joe’s Collection

Practice Makes Perfect

Keep a Sketchbook

Try Tutorials

Best of Adobe Photoshop Tutorials

Gimme More

Please post process articles in comments!

Best Placed Soundtrack Music

Spoon - This Book is a Movie in Stranger Than Fiction

ORM, Online Reputation Management, aka SEO PR

The Marketing Pilgrim offers Online Reputation Management & Consulting and offers a Free Online Reputation Management Beginner’s Guide with the largest number of links in an article I have ever seen to sites like Moreover to help you keep track of your name in search results and feeds. The comments suggested other sites such as MonitorThis, Distilled ORM Tool, and Serph Buzz Tracker.

When you finally get done with the Marketing Pilgrim article, you can check out these related articles on the site:
Updated Online Reputation Monitoring Guide
Update to Reputation Monitoring Guide
What Should Your Company Monitor?
Get Your Free Online PR Briefing
Free Reputation Management Guide for Students

Managing Multiple ASP.NET Websites

Your CMS options are limited
DotNetNuke is a CMS that you can use to manage multiple websites from one login. Other available asp.net CMS can be expensive but may offer features that DotNetNuke doesn't. To see well designed sites using DotNetNuke, visit CMS Showcase. You can compare CMS's at cmsmatrix.org

Project Management and Organization

What are your goals?
make a list of all the goals of the project, being as detailed as possible. you may have only a few major goals and then, each major goal will have it's own set of goals.

What's the next step?
sort goals by priority. give each goal a weight (on a scale of 1 - 10) so that there is a clear understanding of how the goals are related to each other. you're next step will be to move forward on the highest priority while keeping in mind the goals that hold the highest weight.

Vegan Sweet Tooth

Wonderful Vegan Brownies
Vegan Ginger Cookies
Vegan Chocolate Chip Cookies

Web Development

Research
http://builtwith.com/

Frameworks and CMS may make your life easier
http://www.cmsshowcase.com/
[asp.net] http://www.dotnetnuke.com/
[seo/php] http://www.jojocms.org

Web Design Inspiration

You are Under No Obligation
Elliot Jay Stocks: ‘Destroy The Web 2.0 Look’ @ Future of Web Design, New York takes a look at just one of many popular design styles but the points that are brought up are just as applicable to all popular design styles. He talks about why designers adopt this style and offers us an alternative to drawing inspiration from what we see most frequently in CSS Design Galleries.

Learn from the Best
Avoid cliche use of style and look for inspiration from "big name designers" who coincidentally avoid cliche use of popular design styles. The ones listed in Stocks presentation, do not use the "web 2.0 look" at all:

Subtraction [subtraction.com]


Happy Cog [happycog.com]


31Three [31three.com]


Stuff and Nonsense [http://www.stuffandnonsense.co.uk/]


Jesus Rodriguez Velasco [jrvelasco.com]


Web Designer Wall [http://www.webdesignerwall.com/]


Veerle [http://veerle.douh.com/]


http://www.voulumeone.com/



Flame Digital [Flame Digital]

Web Development Financial Management

SXSW: The Figures Behind The Top Web Apps

NYC07

http://hitotoki.org/newyork/

Eco Razor Solution

Problem: I need a new razor that is environmentally friendly.
Solution:

Reduce
do you need this? does aesthetics play a role in your decision? think about the long term. what are the alternatives?

Reuse
use what you have. is there a better way to maintain and care for what I have? soaking in alcohol has been suggested. there are oils which prolong the life of your blades.

Recycle
what to do with you old one. can i find a use for it? can someone else find a use for it?

sort by: *price *enviromental impact *social responsibility

Some Items:
Wally Rubber Shower Razor
Cruelty-Free Razor Blades for Wally and Spike Razors
Disposable Razor Sharpener [available at Sustainable Village]

photography

flickr sets
Entoptic Phenomena