Semantic Naming Conventions for CSS

Be Consistent

Consistently write the code the same way. This helps make the code easier to read and more managible.

Be Managable

As well as consistency, you may have to do other things to help other people on your team manage code more easily like not using shortcuts when working with programmers who are less familiar with css and having a set of semantic naming conventions for everyone to use.

Semantic Naming Conventions

Consider "structural naming, as opposed to presentational naming" - Eric
Meyer

Consider the semantic role. Here's a naming conventions table of names used on popular websites.

Using the same names helps write code faster. This means that you may end up writing the same code over and over. A CSS Framework can help you use the CSS you have already written for other projects.

CSS Frameworks

Here is a place to start on the subject:

Modular CSS

A CSS Framework

Other ways to make your life easier

Introducing BleachedBlack and White: without the distractions of colour

Global White Space Reset

Read More at

The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS
What’s in a name
Elemental Nomenclature
Semantic Coding

Vintage Games

Handhelds

Commodore 64
What you can do with a commodore 64?
Free C64 Games
Commodore 64 Still Loved After All These Years

Atari
Atari Game Manuals

NES

XHTML Special Character and Symbol Entities

W3C XHML 1.0 Entity Sets
W3C DTD Special Characters
Beginner's Guide to XHTML: Special Characters

ALA article from 2001: The Trouble With EM ’n EN (and Other Shady Characters)

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

social science notes

the corporation - the patholigical pursuit of profit and power (name of an article)

playlist

• intro common be
• hellogoodbye in my arms
• css lets make love
• music is my hot hot sex - css
• you outta know - fannypack
• ice cream - nypc
• samian vs justice - we are you friends
• still not a player - big pun
• where the party at - jagged edge
• lets get married - jagged edge
• fantasy - mariah and odb
• don't stop the rock - freestyle
• gonna get thru this - daniel benenfield
• sugar - talking heads
• will to power - dreamin
• pick it up - home team
• it's just the way i are - timbaland
• i'm damaged
• say it's gonna rain
• heart
• fleetwood mac/stevie nicks
• after dark diplo remix
• four to the floor remix
• slip away - sam cooke intro hook
• release me - angelina
• tegan and sara - walking with a ghost remix

Playlist from the phone conversation with the Lisben Girls

[girls] Gilbert O'Sullivan - Alone Again Naturally
[boys] James Taylor - You've Got a Friend
[girls] Cat Stevens - Where Do The Children Play
[boys] Beatles - Dear Prudence
[girls] Elton John - Candle in the Wind
[boys] Rolling Stones - Wild Horses
[girls] Janis Ian - At Seventeen
[boys] Jim Croche - Time in a Bottle
[girls] Carol King - So Far Away

Make Me These Audio Books

Craig J Thompson (consumer culture)
A Cyborg Manifesto - Donna Haraway
Autobiography and Black Identiy Politics - Kenneth Mostern
Don't Make Me Think - Steve Krug
The Artist’s Guide to Making Money - Matt Cassity and Sam Spratlin
The Visual Display of Quantitative Information
culture shock: working holidays abroad
debt cures they don't want you to know about - kevin trudeau

Mind Your Money

Price Protector
Startup News
Buy Cheap Land
Starting Up - A site for Entrepreneurs
Ben Stein financialist
How To Quit Your Job In One Year: A Step By Step Guide
Money Book for broke
What’s Keeping You Financially From Living Your Dream?
Why Career Planning May Be Time Wasted - And Personal Finance Planning Isn’t 1
15 Things You Can Do Right Now To Help Your Career

The Artists and Designers Collection

Atari Game Manuals
The Almightys
Emm Design
knoxville site
Coudal
Joshua Davis
Graphic Design Archive by Alki1
Obsessive Consumption on flickr
Jogger
svenigson
Okapi Studio
pool film fest site design
Tak Tak
Mik Mik
Anna Melcon
Tristan Henry-Wilson illustrator
20nine
Fresh View
Red Bubble
Raw Pixles
31three
Don't Click It
All On One Page Webmaster Reference
design wire
Ryan Sims
Supercharged
Method Arts
Zero ru
Happy Cog
Kevin Cornell
Mein Brandenburg
32FPS
Subcircle
JS Box
Unstructure
Oh You Pretty Things
Tom Dominey
Cameron Moll's portfolio
Cameron Moll
Chris J Williams
Electric Pulp
Yucesoy
24 Corporate Event
Marc Dahmen
Electric Heat
Air Bag Industries
on finding a designer
Mike Industries
Signal vs. Noise
37 Signals
Grow Collective
Rob Goodlatte
Smashing Magazine
Hello Color
Dale Harris
Lyndsay Meager
Light On Dark
Foan 82
Illustration Mundo
Vintage Art and Ads
eleven3
res72 (BG)
veerle
subtraction
pearsonified
A catwalk show with a conscience
fadtastic
jared christensen
SECRETS OF SELF-TAUGHT WEB DEVELOPERS
free vector downloads
quickform.net
Jen Gordon
FWA
Design Snack
Neil Paterson Curvey Speech bubble css
Chris Erickson
Best Web Gallery
Spice Shop
Luke Stevens
Tony Yoo
Cabana Digital
Mercury Cloud
5 nak
Jeremiah Shoaf
svenigson

there's no accounting for taste

I didn't say it but I quote it all the time:

"There's no accounting for taste"

I have noticed that I'm not the only one:

"First we write a stylesheet for screen display (remember, there's no accounting for taste): /* screen display styles */..." - Eric Meyer in "Print Different"

analyze your web site

69 Tools to Monitor, Measure, and Track Your Website

Styling Tables (not so yikes! as it sounds)

Thanks to this guy:
Welcome to Tablecloth

Logo Design

Creating a web 2.0 style logo:
Wedeed logo example of process

Glossy Globe Logo Design

DIY Logo:
Design It Yourself Logo

Resources:
Creating a Business Logo

Sociology & Marketing

" When asking for something you want from someone else, appeal to their self-interest and never to their mercy or gratitude." - Ask the SEO Guru on SEO secrets

PPC Accounts - Adwords

General Info

How long did it take before your ad showed? - AdWords Starter Edition | Google Groups

How to get the most from your Google AdWords Campaign

Google Adwords - how to maximize your advertisement dollars spent at Google Adwords

To succeed with AdWords think differently

To succeed with AdWords you have to think differently. Here are three tried and proven techniques to improve your chances.

Google's new review everything policy is ruining their testability.

googles new review everything policy is ruining their testability.

Moved AdWords

Appear nowhere now! moved adwords

Geotargeting

LOCAL
Google Adwords Geo-Targeting [video explaining local geo-targeting]

INTERNATIONAL
After using the &gl=uk or what ever country code I was looking up at the end of a google search string, and trying to locate a working proxy from another country to connect to, I still could not be sure that my results were accurate and then I went straight to google to a help question called "Why can't I see my ad?" and found what I needed:
Ads Diagnostic Tool will help you check to see if your ad is displaying in other countries depending on what google.com extention the cutomer uses, language, location, ect...

life hacks, hackers and simplifiers

No Impact Man
8 Tools To Ensure You'll Never Lose An Idea
Don’t be Afraid of Contract Work
100 Keyboard shortcuts (Windows)
BlueOrganizer for Firefox
Sell Your Old Stuff
top 20 motivation hacks
The Power Traveler's Checklist, Part One: Pre-Flight

User Experience, Usability and Usability Testing

Understanding usability is the core to creating innovative design. If you find a way to present information with more clarity, your ability to design improves. I have been trying to focus more on "content" when designing than actual aesthetics. I've been trying to communicate the site's purpose and making everything clear, organized, and easy to find what you are looking for. When I saw UX Mag's site, I was amazed by the layout. I realized that it's a user experience publication and thought to myself "of course!" Then I realized that my design focus wasn't on "content" as much as it was on usability.

Usability Focused Site Design(s)

1. UX Mag: User Experience Publication

I hope I find more examples!

The mistake of ignoring usability
"Violating Design Conventions: Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave. " - no. 8 of the Top Ten Mistakes in Web Design

Best Practices
No link on the homepage that links to the homepage itself
site search is important

Case Studies
Wired Article "How Would You Redo the Google Interface?"
Design View: Google Redux
Design View: eBay Redux

Resources
UX Mag is a publication dedicated to providing information on user experience
Wide Open column: Digital Web Magazine
Jakob Nielsen: Useit.com
Human Factors International
Association for Computing Machinery
Adaptive Path
Fast and Simple Usability Testing
Criteria for optimal web design (designing for usability)
Who are the best communicators? features advertising best practices from David Ogilvy
User Experience Design Illustrated
30 Usability Issues To Be Aware Of

Read More
Twenty Usability Tips for Your Blog — Condensed from Dozens of Bloggers’ Experiences
Things to avoid when creating a website
Weblog Usability: The Top Ten Design Mistakes
10 Ways to Increase Blog Usability

Don’t do this on your website, it bugs me

Internet Socialization

Social Networks

List of social software - Wikipedia, the free encyclopedia

CRAIGSLIST
FLICKR
MYSPACE
Orkut
Friendster
Live Journal
reddit
digg
twitter
virb
spurl
google bookmark

Web Design Networks
Refresh
9 rules
designrelated

Bookmarking

del.icio.us/login

Digg - Login to Digg

Digg is a place for people to discover and share content from anywhere on the web. From the biggest online destinations to the most obscure blog, Digg surfaces the best stuff as voted on by our users

Drew Curtis' FARK.com

LookSmart's Furl - Login

Ma.gnolia.com - Find Web Sites & Build Community Online

Find web sites with Ma.gnolia's social bookmarking online community. Organize bookmarks, search other people's favorites and make friends and contacts online.

Newsvine - Login or Register

Login

reddit.com

Login

Spurl.net - Login

Login

Tailrank - Sign in to Tailrank

Technorati: Member Sign Up

Spurl bar

Social Science Notes
design ethnographers - interpret cultural differences
early 1970s - Stanley Milgram - "familiar strangers"
the new linguistic community = "PatTy D aka tHe ScO CitY 415 LiKe wHa!!!" [repurposing words for cultural self expression]

SEO
S.B.S.F! Social-Bookmark-Spam Facilitators!

Resources
G/localization: When Global Information and Local Interaction Collide

Ready to Launch

I'm waiting for them to launch. They did a good job at letting people know they exist before they actually launch.
http://www.15tags.com/

Copyright or Copywrong?

Copyright Chris Pearson 2005






Copywrong

In an attempt to create design of a better quality, I somehow ended up on a quest to create trendsetting design. I thought that was what would eventually happen if I did what I wanted and ignored the rest of the world but a little reasearch helped me realize I was "outdated". The next thing I thought was "Can I come up with something new that people will actually like?" People liking your design is strongly dependent on following trends. Coming up with something new has nothing to do with following trends. The only compromise is to set a new trend.
I looked at probably 5000 sites before I surrendered. They all started to look the same to me, my taste had changed, and I read enough self-proclaimed style pioneer comments to never want to design again. The further my studies brought me back in history the more ignorant everyone appeared and the more impossible my quest seemed.
I needed a baby step if I wanted to break my designer's block. I needed to create trendy designs and at least update my work. Since I was looking at websites to make websites (usually I looked at old print magazines and album covers), I had to be extra careful that what I created didn't look too much like any of those 5000 sites I've seen. As a whole if your site looks more than half like another site you will probablly be accused of ripping some one off even if they ripped someone off. I don't know why it's ok for a website to look like a Glaser rip off and get to be some kind of pioneer of the Glaser rip off style but there's hell to pay if you add the slightest Glaser influenced element into your design. So there's an unspoken blackout list of where you can draw influence from too. This baby step I'm taking is made for giants.
The next step for me was to understand what copyright really is and to be ready to defend my right to be influenced by the same things as other people.
I ran into a situation today that was an example of someone's work being ripped off and wasn't sure what to do. The design concept was so basic it was hard to entitle someone to the rights of it but it was an 80% dead on copy.
I thought to myself that it wasn't wrong to use the same minimalist style, colors, and have some similar placement of content. Maybe the new guy is trying to interpret it as their own but they are not sure how to get it down to a 40% influence. If I tell them how then it will keep him from doing it again. If I just call him out then he might just personally attack me and go on selling other people's designs to people who don't know better. I went to ask the original designer what they would say if they wanted to help the guy but I could not locate any contact information on the "Best Damn Blog on the Planet" and didn't want to call out the new guy in a public place like a comment string. So I say nothing. Maybe I'll send a link to an article explaining how to make something your own when I find one. Instead I'm just gonna read a couple of articles on the "Best Damn Blog on the Planet" and remember who copied them first.
An excellent example appears in the first article I read on The Best damn blog on the Planet, where he defends himself against an accusation of design plagarism and is point on in explaining design influence in the appropriate context.

A Very Formal Read on the subject
The Ecstacy of Influence talks about plagerism, intellectual property, unailienable rights, copyrights, and gifts

Read more on this subject:

Trade dress

Web Design - Imitation is the sincerest form of flattery [sitepoint forum discussion]

Good Designers Copy, Great Designers Steal

Theft of Wordpress Database [sitepoint forum discussion]

Copyright Tools:

CopyScape: Search for copies of your page on the Web

The Gallery Crawl

I usually only do a gallery crawl when I am hard up for ideas which is not frequently enough. So when the time comes, there are months of content to sift through. The more sites I go to, the worse it gets because I've already have seen 90% of the sites but crawl on to find the ones the others missed. I feel bad when I submit the same picture in similar flickr groups or post about the same site a couple of times on here before I realize it but my crimes effect probably only 2 people a year.

So I am making a crawl list that I can habitually visit monthly or bimonthly.

Galleries
http://www.thefwa.com/
http://www.screenalicious.com/

Reading List

relationaltithe.com
A Groovy Little Unit
Ten Little Cities
The Near-Fame Experience
Doc Ali Boot Camp
How to: Kiss Corporate Life Goodbye
When Does a Blog Become a Magazine
Read This and Become a Professional Design Analyst
6 Keys to Understanding Modern CSS-based Layouts
What Exactly is Social Anyways?
Having Fun With Blog Rankings
http://duennebier.carbonmade.com/
Matt Davies on design process
Your Client Problems Solved: Call for questions
Your Client Problems Solved: Answers (Part 1 of 3)
4 Utopian Communities That Bombed Miserably
Enormous Homemade Slip ‘n Slide.
http://dimmak.imeem.com/
look up gestaultist (sp)
813 art
Discover the edu underground
wikipedia: ziegist
http://upl.codeq.info/
Better Living Through XHTML
The Ten Videos to Change How You View the World watch!
In search of the One True Layout
Print designers can’t design websites
TreeHugger Picks: Downloading Design
Over 30 Cheat Sheets for Developers
Readymechs are free, flatpack toys for you to print and build
Century of Death
Getting Real
Free MIT Courses
125000 years ago: global warming was warmer
odeo for sale
search indie designer co-op
make your own audio tour
indie finds
else wares
girl shop
edge ny
travel... via hotwire
flickr rss
lectures at USF
pen
43 folders
How to Write a Keyword-Rich Home Page the Search Engines Will Love!
http://www.flickr.com/photos/williamhundley/sets/72157594235409275/
theme: THE MORNING AFTER
http://designdeadline.com/
Web Site Optimization: 13 Simple Steps
http://kevinjmireles.wordpress.com/2006/05/04/user-experience-101/
http://freelanceswitch.com/freelancing-essentials/how-to-continually-sharpen-your-skills/
Elements of Great Web Design: The Polish
Findings From the Web Design Survey
What Beautiful HTML Code Looks Like
http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Download of the Day: Google Web Accelerator
Fuser: Manage All Your Email and Social Networking Messages in One Place
http://builtwith.com/
https://www.cicatriz.se/
http://www.cmsshowcase.com/index.php
http://surveyedlife.blogspot.com/
Nerd Patrol: 25+ Sites For Collectors
GREEN LIVING TOOLBOX: 80+ Green Sites
http://www.e-worldways.com/
http://www.biola.edu/undergrad/
http://www.mochiads.com/
http://ungarbage.com/
How to Size Text in CSS
Free Stock Images
Social Distribution Platform for Media Publishers
http://www.jumpcut.com/
The Loop Hole
http://www.smashingmagazine.com/2007/10/15/the-showcase-of-big-typography/
http://veerle.duoh.com/blog/comments/a_css_styled_calendar/
Modifying Dreamweaver to Produce Valid XHTML
http://www.libsuccess.org/index.php?title=Website_Design
ALA article on Copyshot
Modifying Dreamweaver to Produce Valid XHTML
comments on designing for the web
Design in Theory and Practice Series
Jakob Nielsen's Alertbox - Top Ten Web Design Mistakes of 2005
The Most Hated Advertising Techniques
Writing for the Web
Let Users Control Font Size
taglines
Ten Good Deeds in Web Design
Mark Boulton articles and examples
http://www.shiftingcreations.com/blog/?p=221

Client Choices: Choosing a style

Web Design-isms: 7 Surefire Styles that Work is the best example I've seen at categorizing the various styles used in web design. This is a very resourceful guide to use with clients in narrowing down a design direction. Maybe they will suggest something that looks nothing like the 7 listed styles and wa-la a magical new style for you to work with.
This resource is a list in which the styles are different enough from each other that a client can differentiate which ones they like and dislike. It is a starting place and gives some common language to the discussion of the design direction. You say web 2.0, they say color bar thingies, you make no headway. You both say web 2.0, they say no, you make progress. There is a need for quick simple categorization. Not all conversations about design are going to be meritful or scholarlly. Art history knowledge would have a noble advantage in categorizing what artistic styles have not been or rarely been explored on the web.
The style(s) chosen are a focus point and your unique additions will help make it your own. Larissa Meek later explains in the comments that "I think it’s important not to 'copy' or 'emulate' but to focus on a style or movement. "
As a web designer the revolutionary ideas start with making content easier to understand, navigate, and use. Style only really influences the small details of the bigger picture.

The 7 styles:
COLLAGISM
ORANAMENTALISM
GLOSSISM
WORDISM
FUTURISM
MINIMALISM
RETROISM


Her examples:
http://www.jrvelasco.com/ - typography and collage [wordism]

Comments examples:
http://www.atelier.ie/ - [minimalism]
http://coudal.com/ - [minimalism]

Offline Reference:
Fresh Styles for Web Designers [listed as an outdated reference to the subject but still probably a good observation]