Freelance Resources

Freelance Switch offers 101 Essential Freelancing Resources

http://www.jek2k.com/wp/index.php/2007/05/05/resources-for-freelancers/

100 web apps for freelancers

The 100 Tools Freelancers Can’t Live Without

Web Design Magazines & Inspiration

Early on, web and graphics magazines have been my source of inspiration. I was fortunate enough to have a teacher who provided us with her left overs. I soon discovered that my mom had collected some from thrift stores. It didn't matter that they weren't new or fresh because it was all new to me. It provided reference for what ideas circulated in 92, recirculated in 98, stayed strong from 98 - 03, what methods improved, what methods should be embraced again, and that real creativity is not now-centric. Keeping up with trends in web design gives you a frame work for what is expected of you. There is no rule that limits you only to that. It's frustrating to look at designs for inspiration that are all text book examples of modern design - all variations of each other. It's important to have the ability to produce that textbook example. I just can't be inspired by it on a regular basis. I feel like my inspiration comes in two seperate forms: creativity & skill. I really want to see more sites that inspire both.
I'm placing together a list of magazines. I immediately identify How Magazine, A List Apart, Digital Web, and Smashing Magazine as my most frequently visited sources. I spend most of my time in galleries and surfing through sites.
Magazines I need to work into my routine:
Computer Arts
Ping Mag (Japan)
I'm about to read six articles on Smashing Magazine, all of which will probably drive the content of the next couple of posts.

If your computer is infected with something...

Get Rid Of Trojans
1) Turn your firewall on!
2) unplug the connection to the internet - this will stop anything that is taking commands from someone/thing over the network/internet
3) run hijack this a couple of times and see if there is something that keeps coming back or if something shows up the second time
4) delete folders in c:/program files that are obviously not welcomed software
5) if I am unable to delete certain folders, I try:
----hold down control then click & drag the folder to the trash
----restart and go to c:/program files as fast as possible and try to delete the program before it starts running

Get Rid of Viruses
6) The more virus definitions the better. On another computer, download 2 other top Anti-Virus software trials as well as the most recent version of the company you are currently using and put on a CD/ jumpdrive.
----McAfee Virus Scan Plus
----AVG Anti-Virus Free Edition
----Norton 360 Free Download
7) Install, restart, update definitions, and run a scan from each of the other virus software. One at a time. You will have to plug into the internet to install them. Install the company your using last because it will require you to uninstall your version first.
8) The software should be catching and removing most of your problems. If I keep getting problems I go back to step one and keep working my way down.

Get Rid of Spyware
9) Install one of the Spyware and Adware Protection and Removal Tools listed here:
----Windows Defender
----Trend Micro Antispyware 3

Resolution?
*If you still have issues but finally can get on the internet, use recommended free virus scanning services. They are opportunities to find more definitions that may have not been updated by your software.
*If you still have issues and have patiently and successfully installed and updated definitions on 3 of the top anti-virus programs, and a couple of anti-spyware programs, you could have someone take a look at your hijack this results for anything that was hard to recognize yourself. There are sites and resources to look up what is bad and good but most likely you are not in a position to do internet research.

Stay Current!!!
10) update windows
11) update your anti-virus and anti-spyware protection
Make sure your definitions are set to auto update. Make sure you are set up to scan in real time as well as a full system scan on a regular basis once or twice a week to start. Make sure you will always stay protected and don't let your definitions skip updating or all your trials expire. It's good to have one annual current subscription as well as using trials through out the year to double check your software. At the end of the year, you might prefer a different software that's easier and doesn't slow down your computer as much.

TOO Slow?
Once you recover, your computer will slow down from running 3 anti-virus programs unless your computer has a really fast processor and a lot of memory. Decide what Anti-Virus program you would like to use and invest in purchasing the most recent version. Search Download.com for "anti-virus" and you can see the ratings to help you choose.

What you should have installed:
NOW: hijack this, 3 anti-virus programs, 1-2 current anti-spyware programs, and your firewall should be turned on
Once you feel safe: hijack this, 2 anti-virus programs, 1 current anti-spyware program, and your firewall should be turned on
Wait a couple of days or a week before going down to this if you really need to otherwise stay with what you have: hijack this, 1 anti-virus program, 1 current anti-spyware program, and your firewall should be turned on
Once a month: try a virus scan tool that doesn't need to stay running
Once every couple of months: install a trial of a top company to see what your software might be missing

Resources:
Protect Your Computer

CSS Resources for Layout

How C.R.A.P is Your Site Design?
Exploring the Limits of CSS Layout helps you understand common issues hopefully before you run into one of these situations.

They're All in the Same Gang

Oh, a link to Vitamin again. Yeah, yeah, yeah, what is that? I'll get to it later. And why is it listed among the likes of alistapart, eric myer, mezzoblue?

Answer: Their Advisory Board consists of...
*Dan Cederholm: SimpleBits
Thomas Fuchs: Script.aculo.us
Cal Henderson: Flickr
*Molly E. Holzschlag: molly.com
*Shaun Inman: Mint
Jeffrey Kalmikoff: Threadless
*Eric Meyer: meyerweb.com
*Mike Rundle: 9rules
*Dave Shea: CSS Zen Garden & mezzoblue
*Jeff Veen: Google
*Ryan Carson: Carson Systems

*all authors on alistapart and/or referenced in alistapart articles

They're all in the same gang!

So I will start to map out the Gang connection starting with ALA as a connection source:
ALA
}SimpleBits -- Dan Cederholm
}Mint -- Shaun Inman
}9rules -- Mike Rundle
}CSS Zen Garden -- Dave Shea
}mezzoblue -- Dave Shea
}Adaptive Path -- Jeff Veen
}Zeldman Presents -- Jeffery Zeldman
}HappyCog -- Jeffery Zeldman
}Various -- Ryan Carson, Eric Meyer, Molly E. Holzschlag

Resolve Your Domain Name and DNS Problems

When testing to make sure a domain name is resolving correctly, here is your tool box:
DNS Stuff to look up DNS, Reverse DNS, whois, and you know... stuff.
You can also ping the URL to get it's IP address

http://www.networksolutions.com/whois/index.jsp
WHOIS Search provides domain registration information from Network Solutions

Icon - ography

[Fireside Chat] Icon designers (Part 3 of 3)
Josh: Well, our ongoing side project is IconBuffet: http://www.iconbuffet.com/. It’s morphed into this freaky social-type-network for designers and creative types

Icon Design: Anti-Aliasing

CSS for Print

Quick Link: Going to Print

Standards Compliant
W3C CSS Print Profile [css3]
W3C Paged Media [css3]
W3C XHTML Print DTD

CSS Print Media

Seperate styles will need to be added for printing. You have options on how you can add them to your code:

Link (preferred)

link rel="stylesheet" type="text/css" media="print" href="print.css" /
Import
@import url(paged.css) print,projection;
Embed
STYLE type="text/css"
@media print {
BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
BODY {font-size: medium; line-height: 1em; background: silver;}
}
/STYLE

Remove the Extras
#header, #footer, #nav { display: none; }

"What I do is gang up all the things we don’t want to print in a single block at the top of the sheet. I always know where the 'don’t print' stuff is, and removing another thing from the printout is as easy as adding the class or ID selector to the common display: none; rule." - Jason Fried (getting things done the simple way) [3]

Floats Don't Always Print
Well, they only print from Gecko-based browsers. So cross-browser printing means stopping the floats.
#floatedContent { float: none; }

Bye, Bye Backgrounds
Get rid of background images and colors by setting your body background to white and all other content with background images or colors to transparent. Remember to update your font colors also when you were using light font on a dark background.
body { background: white; }
#contentWithBackgrounds { background: transparent; }

Print Readability
Use points and serif fonts (Georgia, Times New Roman) for print. All font sizes that are not relative (% or em) to the body font size will have to be adjusted (ex. 12px changed to 12pt; 14px changed to 14pt).
body { font-size: 12pt; font-family: serif;}

Control the Print Layout with Your Margins

"Unfortunately, some browsers have trouble handling padding appropriately, so it’s currently a better idea to move things around with margins whenever possible." - Eric Meyer [1]

Visible Links
Ideally you would want your links to stand out and be referenced in the print version.
This example provided by Eric Meyer at the least will show your links as bold, underlined text and at the most will show as red text with the linked URL displaying next to the hyper linked text. Gecko-based browsers give the most ideal results.

a:link, a:visited
{
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}

#content a:link:after, #content a:visited:after
{
content: " (" attr(href) ") ";
font-size: 90%;
}

#content a[href^="/"]:after
{
content: " (http://www.yourURL.com" attr(href) ") ";
}

Replace http://www.yoururl.com/ with the site's URL.

Paper Size

"We chose 535 pixels as the maximum dimension for the page layout because that is the widest table that will print on standard letter size or A4 paper " - Yale Style Manual [5]

Resources

[1] Going to Print

[2] Print Different

[3] Little CSS print stylesheet tip

[4] W3C Paged media

[5] Yale Style Manual - dead link

Read More

• 
  Applying CSS from Screen to Print to Handheld – Part 1: Preparation and Groundwork
• 
  Ben Meadow Croft gives you templates that include print style sheets

Related Topics: Email for Print

HTML Symbols & ASCII Characters

ASCII CHARACTERS

Site Speed Optimization

http://www.websiteoptimization.com/services/analyze/

deprecated HTML

Commonly used tags by WYSIWYG's
align="center"
center tags
border attribute
target attribute
marginheight attribute

name attribute: replaced with the id attribute. (In transitional documents both name and id can be used, but a name without an id is not allowed).

Resources:
W3C Attributes Chart: has a column to note which attributes are deprecated

Designing An Email That Will Be Printed

Delivery

Don't just attach an HTML file and a bunch of images to a message and hit “send.”
Don't just paste all your code into your email application, either.

Use a Multipart/Alternative MIME Format so that your mail transfer agent bundles your HTML code, PLUS a plain-text version of the message, together into one email.

Layout

Rely on styles within the TABLE, TD, H1, H2, P, A, and other tags.

Rather than use a p tag, use a font tag with br tags to create the paragraphs

Redefine the font tag inside and after each anchor tag

Create a gutter around the frame (wrapper) table by setting the width to a percentage and/or using the cellpadding to at least 5.

Avoid colspans

Be sure TD cell widths have accurate widths

Email layouts will have to be left-aligned in Lotus Notes

Use those deprecated tags like background= and bgcolor= instead of CSS

The recomended width is 400 - 500 px which is less than the width recomended for printing.

Look Good at 194 pixels wide for AOL users

Tables are recomended and as few as possible. DIVs usually fail and are not usually supported.

Tweak the cellpadding and cellspacing attributes of the HTML tables instead of style="padding: 5px 5px 5px 5px;"

Padding style in the content TDs is set at 10 pixels all round for Google

Browser based emails strip out your HTML, HEAD, and BODY tags. Which means that you should use embedded or inline styles placed below the body tag and that no styles can be placed on the body tag. CSS is not supported well in gmail so it is recommended to test without CSS.

For background color of email, put all content inside a table with the preferred color & style the table width at 98% because Yahoo needs the 1% cushion on both sides.

No CSS-positioning

Required: Gmail requires inline styles.

Images paths are to be absolute paths to images hosted on your server.

In your plain text layout, you’ll want to enter a hard return after each line gets about 60 characters long and create dividers with special characters (ie. *, -, and _). Don't use periods to create divider lines.

Outlook 2007 will not support background images, background colors on nested tables/divs, floats, positions, and poor support on padding & margin attributes.

Required: an extra line break or two after the final HTML tag for AOL & O2000 users

Test with placeholder images for apps that block images and don't use alt tags so that placeholders show up.

Don't start any line with a period. Some ISPs use email servers that will strip any content below a line in your email that starts with a period.

Placing the closing td tag right after (on the same line as) the IMG tag eliminates the annoying and mystifying 1 pixel gap.

Content

Required: use your title tags

Required: an opt-out link

No JavaScript, or ActiveX, or embedding

Use target="_blank"

No free hosted images

"List a valid, physical mailing address. The more contact information you provide, the more reputable your email will look."

Required: Use a legitimate working reply-to with your company domain.

Test

Test in as many email applications as possible! (AOL, Yahoo, Yahoo!Mail Beta, Hotmail, Gmail, Outlook 2003, Outlook 2000, Outlook Express, Thunderbird, Apple Mail, Apple’s Entourage, Lotus Notes 6.5.3 and 6.5.4, Eudora 6.2)

Test for free with a MailChimp free trial account

You can use a downloadable validator to test what actually will work in Outlook 2007 Word Based Email Viewer.

Print

<style type="text/css">
h1{
page-break-before: always;
}
</style>

OR

<DIV style="page-break-after:always"> … </DIV>

Yale Style Manual choses 535 px as the max width because that is the widest table that will print on standard letter size paper. Our width should be no wider than 500px for an email so we are already print friendly.

Resources

HTML Email Design from Mail Chimp

Email Newsletter Design Archives

Microsoft takes email design back 5 years

Email Design Gallery

How To Code HTML Email Newsletters (All New Version)

Style in Email

Quick Tip: Testing your email design with images turned off

Pre Gmail and Outlook 2007, ALA Optimism: CSS and Email, Kissing in a Tree

HTML Emails - Taming the Beast

Review: 10 Emails with Images-Off

Mail Chimp Directory:

What Email Applications Should You Test?

HTML Email Tips for Web Designers

Top HTML Email Coding Mistakes

Tools:

MailChimp Inbox Inspector

Creating Images to become the next IMG

File Types:

GIF (more widely used than png)

• best used for bitmap images, line art, and images with a large area of solid color
• lossless
• transparency needs BG color assigned
• supported in all browsers
• 8-bit 256 colors
• capable of animation

JPG

• best used for photographic images and color patterns
• lossy (sharp edges will appear blurred)
• NO transparency
• supported in all browsers
• millions of colors
• No animation

PNG (becoming an increasingly popular replacement for GIF)

• best used for high quality transparent images (especially on a background that is not solid)
• lossless
• fully transparent; smoother edges than GIF
• Browser Compatibility Issues: The easiest way to PNG support in IE6
• millions of colors (doesn't support CMYK)
• No animation

Tutorials for Images to Create:

Random Lines Made With Mesh (AI) - Veerle

• Mod Lines
• Retro
• 70's Roller Disco
• Simple Shapes
• Geometric
• Clean

Resources:

More information on Web Graphics

Trick Out Your A HREF

Resources:
rev & ref attributes: Boost Your Hyperlink Power

CSS:
Styling Links

Lorem Ipsum Generators

The one I normally use was down today. It's good to always have a back up.
My Back Up: http://www.lorem-ipsum.info/generator3

Translucent DIVs

This focuses on the background of div being a transparent color because it will be overlapping a background image on the body.

Both background and text will be transparent if you don't use positioning or a transparent png for background image.

Start with high contrast between text and background colors to prevent visability issues. Both background and text will be transparent but it should still look good if your transparency is not too low and you choose colors that have a high contrast.

div.transparentDIV
{
background-color: #000000; /* dark background*/
filter: alpha(opacity=70); /* 70 percent opacity */
-moz-opacity: 0.7;
opacity: 0.7;
}

div.transparentDIV *
{
filter: alpha(opacity=100); /* everything in the div to have an opacity at 100 percent */
-moz-opacity: 1;
opacity: 1;
color: #FFFFFF; /* white text */
}

Resources:
CSS Transparency for Internet Explorer (IE), Mozilla and Safari
Background transparency in CSS

Displaying Gallery Images

Awesome Box

CSS Naming Conventions

Be Consistent.
Be Managable.
Consider "structural naming, as opposed to presentational naming" - Eric Meyer
Consider the semantic role.

Here's a naming conventions table of popular websites.

Make your life easier and apply these:
Modular CSS
A CSS Framework

Some Tricks to keep up your sleeve:
Introducing Bleached
Black and White: without the distractions of colour
Global White Space Reset

Forms

XHTML 1.0 Tutorials:
Understanding Forms and Input Fields

CSS Resourses:
CSS-Based Forms: Modern Solutions
Nice Forms
(Functional) Pretty Forms
The Man In Blue
Real World Style
Awesome Form

Pop Art

Pop Art Inspired by Lichtenstein

Line Drawings

Using some free stuff to create a wallpaper

Peeled Sticker in Photoshop

Peeling Sticker Effect

Vector Art

Wallpaper Tutorial

Beginner's Reading:
Vector drawing Basics
Vector drawing mistakes (read comments)

Free Stock:
Predrawn Logos of Major Companies

Photo Manipulation

Digital Cross Processing
Realistic photo print

Making Glass in Photoshop

Creating Shattered Glass In Photoshop

Web 2.0 buttons

Photoshop Tutorial: Create glossy button for web 2.0
Web 2.0 buttons
Photoshop Layer Styles that will move the process along much quicker

Creating Dotted Lines in Photoshop

Creating Dotted Lines in Photoshop

Web 2.0 tabs

Design a Web 2.0 tab with Photoshop
Cool tab menu in web 2.0 style using Fireworks
CSS for hovering tabs

Glossy Globe Logo Design

How Web 2.0 Logos are drawn (Photoshop)
Starting with a flat map
Glossy Globe Tutorial from a stock photo
They suggest finding an image from google. I like checking flickr because you will see something unusual.
Search for other terms than globe - wireframe, planet...
Buy A Glossy Globe Kit (Lucky Oliver makes it fun to browse and the pricing isn't bad either.)
.MAC style globe
Making a Glass Orb
Shiny Sticky Note

Fashion Site References

Couture Designers:
Chloe
jovovich-hawk

Collaborations With Illustrators:
Catalina Estrada

Site Design Ideas:
Reference for a Clean Layout

Independent Designers:
True Love and False Idols

Aution Sites:
Good Will Auctions
Amazon

Fun:
Polyvore

It's time I got real

I've posted 60 posts in the last 32 days since I started this blog. While I am happy with the amount of information I am gradually organizing into a cohesive reference, I am taking on every direction at once. It's time to try to focus myself. I'm starting with Getting Real.

I can definitely stand to get rid of some "Pie-in-the-sky functional specs"

"later is eternal, now is fleeting" - pull back scope and don't sacrafice quality. Stay on time and budget.

"American business ... is just about sucking everything up." - Ian Mackaye describes why you should do what you enjoy not just for bottomline.

Print style sheets

This information has been moved to CSS for Print.

Grids

Grid System for Layout
1. determine the layout size (based on which screen resolution you choose for web design)
2. choose a ratio:

• 1:3
• 2:1
• 1:1.1.618 (Golden Section)

3. Convert the ratio you choose to percentages



Subtraction's Grid Computing and Design

Google BluePrint
-- sample website
-- demonstration of the grid
-- demonstration of the typography
-- quick tutorial

Reading List
Five simple steps to designing grid systems
best articles and resources on the subject
Thinking Outside the Grid
grid background image
Grid Computing
Grid-based design: Part 2, Designing blog theme templates
Fracturing / Abstracting the Grid

distressed or grunge look

Tutorials:
Making a Grungy Text
Ocean Ripple Grunge Border in PS

Inspiration:
Cameron Moll Interview
30 Dirty Designs
Big Cartel
Misprinted Type
WWL

Political Dialogue in Popular Culture

Whether they like them or not, people love to talk about the same political figures over and over again. So it is a popularity contest.

Salon.com: The Coulterization of the American right
I thought Ann Coulter was soooo Fall 2005 political banter?

Fontent - Fake Content

Signal vs Noise has suggestions on making random contact info
Scraper site

I'm Failing But Most People Don't Know It

Today I learned about the benefit of failing in obscurity. That "in business, you’ll fail more than you’ll succeed". I guess I'll stop talking about quitting jobs and taking out start up loans.
This article reminded me about a post discussion to a participatory economics presentation that encouraged people to share what didn't work for them and help others learn from their mistakes. But that means you couldn't be too obscure about the failing thing.

Khoi Vinh on The Failures of Success:
Pleas for you to fail at WHAT YOU WANT TO DO!
"Be willing to have your dreams tested SOONER rather than later by the forces of nature, by the brutal fist of the market, by the snarky shortsightedness of critics, by the jealous discouragement of your friends and enemies..."

On Failure - a web comic artist talks about how they embraced failure

Reason to fail:
"managers at big companies... prefer to hire someone who’d tried to start a startup and failed over someone who’d spent the same time working at a big company" - Paul Graham's Why to Not Not Start a Start Up

Failure Quotes
Too Many Companies??

Centering DIV with CSS

Liquid:
.container{margin-left: 10%; margin-right: 10%;}

Fixed (including ie4-6):
body{text-align: center;min-width: 750px;}
.container{margin-left: auto; margin-right: auto;width: 750px;text-align: left;}

Resources:
CSS Centering - fun for all!
Centering a Div

Blogger Blogspot Template Editing

Old Blogger: How do I get rid of the navigational toolbar on Blogspot?
New Blogger: Remove the NavBar

Clients with a small budget

Why and How to Use Templates Effectively
Creating A Company Name From Scratch? Use the Random Business Name Generator
Designfruit Brushes
Free Css Templates

Ad Layout

5 Step Formula Based on Work of David Ogilvy
Visual
Caption
Headline
Copy
Signature (Advertisers name, contact information)

Designing Web 2.0 Style

"Remember the 2advanced culture and the hype that surrounded it? Flash-based wizardry was all the rage. And now? We've grown up. We've moved on. I see the same bell curve in the standards movement as of late. We've peaked, and although we'll see the greater design community continue to adopt, I suspect we'll see the thought leaders shift to speaking about more than just divs and selectors and the W3C validator. That's something many of us have been saying for months now." - Cameron Moll, istockphoto interview

This is just a bunch of notes and unfinished ideas...

Are You an Indifferent Designer?
What design cliches could be used to indicate
Is It Real Design If You Start With a Template?

Why I like designing for clients:
I like making people happy. I like enabling their ideas to appear exactly how they envisioned it. I like it when they say that they tried to have 7 other people do the same logo and I am the only one that knew what they meant.
It's a great skill to be able to interpret what a client wants, understand them, help them, guide them, listen to them, and put your personal taste aside.
Developing your disdain for popular culture will.... leave you behind.

artist struggle to create something that at most will be an original combination of already existing artistic expressions.

You have to be able to be a consumer of popular design style, a trend watcher

Most clients want you to design in a style that is current. You have to know what is current, how to create it, and not hate life because you have to design in a style that you didn't invent. Appreciate it. It's not gonna be here forever. If you stay on top of what new design styles major companies are using then you shouldn't have to reuse the same basic elements and bore yourself. You can sell someone a new style if a bigger company is using it but it's much harder to sell someone you've created to be in polar opposition to popular design.
If you can't embrace popular design in any context and make it your own, you'll struggle building a fan base but it grow with exposure. There's no reason to hate people that are open minded about what they do.


A Design Firm that uses the Web 2.0 style
Popular Graphic Design Tips
Glossy Web 2.0 Logo Photoshop Tutorial
Pixel to Life Tutorials
Creating a web 2.0 blog


The Web 1.0 Example:

Written in 2001, Web's Most Overused Graphics Techniques Revealed may seem like an outdated post with no relevance to you but it's history. A document to that reflects that that there will always exist design that people will feel is "overused" but these examples are all things that are still being used. Just in a different way.

Web 2.0 Work Group

The arguement for Horizontal Stripes in Web Design

I like horizontal stripes. I will always like them. I don't get to wear 1950's ties with horizontal stripes which I think are neat so I have to find another way to incorporate them into my life. The obvious place would be my work which has this view towards horizontal stripes: "the most overused visual device in contemporary interactive design". If you actually read the article by no substance. all eloquence., you would know that is just an opinion and not some kind of fact. The article is well written and innevitably ends up stating that "the stripes enhance layout contrast ". This article tries to exemplify the importance of understanding why something is a good design choice or not.

Is this my excuse to keep using them cause I think they are cute? No, but I now understand their power. If I think more about why I'm using them and how they relate to the rest of the design, that might be the real deterent. I also now understand why so many people dislike them. "They view popularity as overuse".

Here's a tutorial on making diagonal stripes - use it wisely.

I love people who are learning, inspired, and still happy about design, not so hateful.

Resources:
no substance. all eloquence.

Lists: The li, ul, and who they kick it with

Resources:
Bullet Image Problem: vertically centering bullet instead of inserting at first line
List Style Bullet Images
Breadcrumb trails
Bullet Madness: free bullets
Listamatic
Tabular lists

I sold my car and now take the bus.

Notes on selling a car taken from an LJ blog that belong's to the creater of LJ:
Look at CL and autotrader for asking prices in your area, mileage, & condition.
Don't set price too low!
KBB is more accurate for east coast pricing.
Check out the DMV requirements.
Forms: Notice of transfer and Release of liability
Bonus: carfax.com report to show buyers
edmunds.com will give you the true market value (TMV)

Web Design Inspiration

An All in One - Most Inspired
6 recent HUGE projects that are changing the internet
Delicious Library (an excuse to buy an isight)
SurfGarden
Suckerfish HoverLightbox Redux
Grids in Web Design
45 Fresh Designs (complete with a who did what first arguement in the comments)
Just so you know, you didn't invent bubble letters in 5th grade or horizontal stripes while working on your MFA.
Of the 45, I like SCPGT and UberSuper the best. I've seen most of these before (mostly on stylegala) so should I give them a hard time about "fresh" since stylegala featured them first? Or should I just accept that information flows in a wider range than "everything I've seen" and that content is limited by "everything they've seen"? If the scope of information was narrowed and the only people allowed to publish were regulated, well then, the internet would just be the next TV.
A more complex slideshow
Beatles Stamps
Web Design From Scratch
Folietto
34 Places to Get Design Inspiration - Online and Off

FLASH
While People who make beautiful flash sites tend to strip all usabillity, it is still a good I idea to be open to draw design inspiration from these sites and get out of the CSS galleries for some fresh ideas.
SM's Exploring Design: Outstanding Start Pages is full of very visually appealing sites with frustrating navagation.

Sites to Oggle
http://www.73dpi.net/
http://www.ilkilkilk.com/ WTFIGO
http://31three.com/
http://www.tangerine-tree.net/ pretty little unreadable font and dead links
http://www.cappen.com/
http://putput.cat/
http://www.wallcandyart.co.uk/



Sites to oggle later because they were down today
http://www.andyrutledge.com/
http://kelleradv.it/

Visual GUI Design and Designing Graphics for a UI

ASP.NET Reading List:
ASP.NET for Designers
A Sneak Peak at MasterPages in ASP.NET 2.0
Creating Template-Driven Web Sites with MasterPages

Resources:
Usable GUI Design
MSDN Design Templates
Tips and Tricks
Skin Crafter
Icon Experience
User Interface Design for Web Applications

Inspiration:
Apple .MAC
http://www.htmllife.com/
http://www.infectedfx.net/
http://devlounge.net/
http://thecity.org/
http://www.snook.ca/jonathan/

Vintage Fashion

1930's Sailor Pattern

1940's Wedding Dress

1930's hats

You can buy the vintage collars patterns or just look at them for inspiration like I do.

People who support vintage fashion:
neet
sarah morrison on treadmill (the myspace for fashion)

We digg digg digg digg

Represent Digg
Make Your Own Digg Button

I spent sometime on shutterstock once

And saw this pretty unicorn:
And found out the name of this flower:

Heliconia Psittacorum Andromeda

This information once kept me from being able to join a flickr group.

SEO, Internet Marketing, and Other Myths

The mysterious world of search engine optimization offers an abundance of high ranking speculation. When researching, more relevant results appear when searching for "search engine optimization" or "seo", rather than "internet marketing". Always look for an article date to identify if the page content is recent or outdated. Some sites provide newer and more relevant content but it's hard to recognize which ones if it's not google or wikipedia. That's why you should start with what you know.

Where to start: Understanding what SEO is and isn't
Tips for Google Optimization - know how to do well where it counts
Wikipedia: Internet Marketing - build on an understanding of concepts and vocabulary
DIY SEO mistakes - how distinguish between advice from '96 and '06 because older content ranks higher even if it is less relevant

SEO Checklists
The Ultimate SEO Checklist - sitepoint is a quality reference source
Google Ranking Factor Checklist - an example of a speculative checklist from a source that no one has heard of; they do rank number one for "seo checklist"; covers the entire broad spectrum of seo - good and bad
EZ Ecommerce SEO Checklist - an example of a more specific checklist; SEO should be different for blogs, ecommerce, portfolios, wikis, ect. (again an unknown source, so use good judgement when following)

Industry Experts
sitepoint.com - experts write articles on this site
johnchow.com - very popular blog about SEO techniques
Start with a publication from the industry you know best and search for "seo" on their publication to read SEO articles and get relevant links (ex.: a web designer would go to alistapart.com and search for seo to get a list of articles on web design SEO)

Just writing better content helps the most
Good Writing

Suggestion: Optimize Your Images
Using Google Image Search to Drive Traffic to Your Site

Analytical Tools
Google Trends Lab
Google Adwords Keyword Tool
Yahoo Keyword Selector Tool
SEO Book Keyword Suggestion Tool
Word Tracker
GTrends (WordTracker)
Compete
Built With

SEO Admin

Report spam in Google

Add your URL to Google

Kontera

Report Malicious Site

How to report paid links

How to report paid links

Google SiteLinks

how to get google sitelinks - Google Search

What are Google Sitelinks How to Get a Deluxe Listing in Google's Search Results - by Jonathan Hochman

Google Offers Help
meta tag to erase snippets

Conferences
SES

Where to submit other than search engines
css web design sites can use http://cssinsert.com/

Additional Reading List
SEO and Blogger PT 1
SEO Book
Ask the SEO Guru
Please tell me where to go at johnon.com
SEOmoz
Building the perfect page (pt 1)

10 Useless SEO Worries (Part 1)

10 Useless SEO Worries (Part 2)

Hochman Consultants - Don't Be a Link Miser - Why Outbound Links are Important

SEO for Firefox Extension: Free Search Engine Optimization Browser Plugin for Firefox

SEO for Firefox is a free Firefox extension which adds many search engine optimization data points into Google's SERPs and Yahoo!'s SERPs on the fly.

SEO for Firefox Extension: Free Search Engine Optimization Browser Plugin for Firefox

SEO for Firefox is a free Firefox extension which adds many search engine optimization data points into Google's SERPs and Yahoo!'s SERPs on the fly.

SEO for Firefox Extension: Free Search Engine Optimization Browser Plugin for Firefox

SEO for Firefox is a free Firefox extension which adds many search engine optimization data points into Google's SERPs and Yahoo!'s SERPs on the fly.

What do You do When Affiliates Call You a Scammer to Sell Your Product? : SEO Book.com

Clientside SEM - Search Engine Marketing Services - Organic Search

Search Engine Marketing & Web site optimization. Clientside. SEO & SEM.

SEO & Search Engine Marketing Mindmap

Free mindmap to help you understand search engine marketing and internet marketing.

The SEO Conference Calendar

Want to learn about search engine optimization, search engine marketing, or internet marketing? Check out these highly recommended conferences and industry events.

SEO Google Gadgets for Link Analysis, Competitive Analysis, & Keyword Research: SeoBook.com

Free SEO related Google Gadgets. Offers links to many research data points, including keyword research, linkage data, and other useful measures of relevancy or competition.

SEO for Firefox Extension: Free Search Engine Optimization Browser Plugin for Firefox

SEO for Firefox is a free Firefox extension which adds many search engine optimization data points into Google's SERPs and Yahoo!'s SERPs on the fly.

Seo Book Keyword Suggestion Tool

Learn which keywords you should be targeting to increase your website rankings, traffic, and profit.

Free Link Building Tools: SEO Book.com

Free link analysis and keyword research tools brought to you by SEO expert Aaron Wall.

Free Competitive Research Tools: SEO Book.com

Free tools to help you perform competitive research for your internet marketing campaigns.

Free SEO Tools & Search Engine Optimization Software

Free link analysis and keyword research tools brought to you by SEO expert Aaron Wall.

SEO Book - Affiliate Program

SEOmoz | Beginner's Guide to Search Engine Optimization

A comprehensive guide to the practice of search engine optimization for those unfamiliar with the subject. The guide covers dozens of areas of SEO including keyword research, page optimization, site structure, link building and more.

SnapShot of yahoo.com (rank #1), google.com (#2) - Compete

Website profile of yahoo.com, google.com - traffic charts, graphs, popularity rank, ratings, trust safety profiles, scores, deals, promotional codes, and more.

Compete

Compete helps you benefit from click-sharing by providing free services that create a more trusted, transparent, and valuable Internet.

CSS 2 Validation

That was easy: Congratulations! No Error Found.

CSS Validator

CSS Enhancements in Internet Explorer 6

W3C on CSS

Going XHTML 1.0 Strict

Before: Oh no! This page is not Valid XHTML 1.0 Strict!

It's like HTML but you put a different doctype at the begining of your page, you stop using certain tags and attributes you learned, and you close out the tags that you didn't have to before. There's more but but nothing that your knowledge of HTML and a validator can't get through together.

Start Here:
How simple going from HTML to XHTML can be
XHTML 101
Lesson 1: Writing XHTML in Notepad

Now that you are encouraged, Start here:
W3C QA
Doctype explained by ALA
XML well-formedness

Memorize a small list of deprecated HTML to get started. Don't worry about knowing it all cause the validator will give you a list of what needs to be corrected. Even if you write good code, you will have to catch the bad code your HTML editor ads.

Dreamweaver still sneaks these in:
align="center"
center tags
border attribute
font tag
target attribute
name attribute

Some Other Rules to Note:
XHTML is all lower-case
all tags must be closed (ex. br / or hr/)


Learn from my mistakes:

value of attribute "id" must be a single token

id="Tons of text I'm used to typing to help seeing impaired and help SEO"

W3C says ---- This attribute can not take a space-separated list of words as a value, but only one word ("token"). This may also be caused by the use of a space for the value of an attribute which does not permit it.

ID "deal" already defined.

p id="deal"

W3C says ---- An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element). -

I say ---- Before this project, I used class for everything and used id for things like a selected menu item (one element). When starting this project, I noticed that a lot of respected websites were using primarily id for group elements and class on a single element. So I tried something new. I would have never learned this if I didn't. I didn't know that what I was doing normally was a standard.

there is no attribute "border"

border="0"

W3C says ---- You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the embed element to incorporate flash media in a Web page, see the FAQ item on valid flash.

I say ---- Double check your mark up to see what your HTML editor added. I deleted border="0" once already from that tag.

After: This Page Is Valid XHTML 1.0 Strict!

1. Correct Doctype code in Header from w3C

2. Validate Template Page with one of these...

---- a. W3C HTML Validator

---- b. Tidy

---- c. Validome

3. Make changes and run validator until you pass.

More Reading:

Better Living Through XHTML

Modifying Dreamweaver to Produce Valid XHTML

Watch these movies

Moonrunners (1975) - Dukes of Hazzard was a spin off from this movie
The Century of the Self - Freud's affect on the social, corporate, and political landscape

2 columns in CSS

The Basic Layout Classes

The DOCTYPE has to be correct for this to work.

.contentContainer {
margin:0 auto;
width:800px;
}
.contentL {
float:left;
width:400px;
}
.contentR {
float:right;
width:400px;
}

The widths are very sensitive properties

content L width + content R width must be < = "contentContainer". Any padding or margin applied will disrupt their side-by-side balance so be careful.

Let Me Clear My Float

You will need to "push down" the div that follows the "contentContainer" div with this CSS property:

.following-div {
clear:both;
}

Backgrounds can cause trouble too

If you run into problems with background colors/images not showing up (in Firefox) of your "contentContainer" div, you can add one of these classes:

.contentContainer {
float: left;
}

or


.floatfix {
clear: both;
}

insert < br class="floatfix" > before the "contentContainer" 's closing div tag

Anatomy of the Layout

¿ Porque Container? Because

Resources

Simple 2 column CSS layout
Webmaster World Forum

Further Research

http://www.glish.com/css/9.asp

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

http://www.neuroticweb.com/recursos/2-columns-layout/

http://css-discuss.incutio.com/?page=TwoColumnLayouts

http://realworldstyle.com/2col.html

http://wellstyled.com/css-2col-fluid-layout.html

http://www.bigbaer.com/css_tutorials/two-column-header-footer.htm

http://www.maxdesign.com.au/presentation/page_layouts/

--- http://css.maxdesign.com.au/floatutorial/tutorial0809.htm

HR + CSS

solid line:

hr { border: 0;
color: #666;
background-color: #666;
height: 1px;
width: 80%;
text-align: center;
}

styled line options:

chose one:
dotted
dashed
solid
double
groove
ridge
inset
outset

use this code:
hr {
border: none 0;
border-top: 1px dotted #666;
width: 80%;
height: 1px;
text-align: center;
}

image as HR:
div class="hrIMG"
.hrIMG {
background: #fff url(../images/HR.gif) no-repeat center bottom;
height: 1px;
}

To put an image on top of an hr:
work with the div options at http://www.sovavsiti.cz/css/hr.html

Resources:
blakems.com