spoongraphics grunge

So why are so many very cool and "hip" designers from the UK? Here's a great design blog -- with free stuff on Tuesdays. Quite a bit of grunge that's a great look.

http://www.blog.spoongraphics.co.uk/

Vector designs

Very cool vector designs to buy -- I really like the floral designs. On sale for another hour and 15 minutes tonight...?

http://www.designious.com/

Podcast software

Camtasia: Software to put together a video podcast:
http://www.techsmith.com/camtasia.asp

And a video that used it:
http://8weekstoprofits.com/blog/blogvideo3/

Graphic Design Sources

Adobe offers some visual design curriculum for use by schools -- some Photoshop related, some using other software:
http://www.adobe.com/education/instruction/teach/visualdesign.html

Here's a graphic design class syllabus with some resources, assignments, etc.
http://finearts.fontbonne.edu/115/115syl.html

A Graphic Design website to explore further:
http://gdbasics.com/index.php?s=pointlineplane

DogPile Search Engine terms

Dogpile is another search engine -- but the fun part is this option of seeing what people are typing in as search keywords -- important thing to study before creating your own key words.
http://www.dogpile.com/info.dogpl/searchspy/results.htm?filter=1

Website useability including homepage destruction

useit.com: Jakob Nielsen's Website: All sorts of articles about website usability/design
http://www.useit.com/

Photos with geodes

Here's another source of photos -- lots of great geode photos!!!!
http://www.canstockphoto.com/

Design links to follow up on

Logo Design Tutorials
http://lifehacker.biz/articles/logo-design-tutorials/

45 Best Icon Design Tutorials
http://dzineblog.com/2009/03/45-best-icon-design-tutorials.html

Ideabook.com
*** READ BLOG!!!!!
http://www.ideabook.com/


Website Designer (Web lady bug)
http://www.webladybug.com/webladybug/portfolio.html

Ethics in Digital Photography

Some articles in ethics of digital photography.

Ethics in Digital Photography
http://www.60-seconds.com/168_ethics.html


Digital Photography: A Question of Ethics
http://fno.org/may97/digital.html

Ethics Resources
http://www.sjmclib.umn.edu/viscomm/resources/ethics.html

Photojournalism Ethics
http://commfaculty.fullerton.edu/lester/writings/chapter7.html

NPPA ethics training
http http://www.nppa.org/professional_development/self-training_resources/eadp_report/

Amazing Photoshop Design Tutorials

Well, I don't know if the tutorials are amazing or not but the screen shots of the templates about each of the tutorials is absolutely amazing! And I'd really like to watch some of these tutorials!!!!

27 Best Photoshop Layout Design Tutorials
http://dzineblog.com/2008/07/best-photoshop-layout-design-tutorials.html

45 or More Best Icon Design Tutorials
http://dzineblog.com/2009/03/45-best-icon-design-tutorials.html

A List Apart

Very cool looking website plus LOTS of info on how to do various things!

A List Apart: For People Who Make Websites
http://www.alistapart.com/

Tutorials on Bluehost

http://tutorials.bluehost.com/

Bluehost has some tutorial videos that I should probably watch...

Managing Networks

Check out CISCO's Network Magic for managing network printing/file sharing, etc...

Not sure if it's needed or not for $49

http://purenetworks.com/product/pro.php?src=lbcnmar?src=lbcnmar

Form Submissions -- tips for the next step

I need to figure out how to do this -- one of many next steps!!!!

********************

There are two ways to handle form submissions. Either you have the form data sent to you by e-mail, or you have the data put into a database on the Web server. You can only do the latter if your Web server has that capability and you've already created tables to store the data from the forms. That's requires a special account, database design skills, and an intermediate language like PHP or ASP.NET.

That leaves you with the e-mail option. So you want to ask your webhost if they have a script that you can use to have the form data sent to you by e-mail. And if so, how should you set up your "form" tag to use that script.

**********
Plus, password protected tutorials:
http://www.easykiss123.com/easy-setup-of-login-registration-and-password-protected-areas-on-your-website/

Web Design Magazines

Web Design magazines:

Before and After: http://www.bamagazine.com/

www.alistapart.com

www.456bereastreet.com

www.websitemagazine.com

Rounded Corners

A whole list of rounded corners and other things:
http://www.smileycat.com/miaow/archives/000044.php

Cool Website Design

A clean, crisp website design! Cool idea!
http://www.kyleschaeffer.com/?p=31

His tips for where to learn how to do this are:
March 5th, 2009 at 9:27 am

The absolute best site that you can use for web design tutorials is w3schools.com. They have a huge selection of tutorials ranging from basic HTML and CSS to JavaScript, XSL, MySQL, and server-side scripting in ASP or PHP. This site is a WordPress/PHP site; you’ll find that PHP.net is the best resource for any type of PHP programming. Hope this helps.

Sliding Door Menus

Love the look of these menus -- called sliding doors. They use CSS:

http://www.couchandassociates.com/index.php

And here are a couple sites that show how to do it...
http://www.alistapart.com/articles/slidingdoors/
(actually, this website is called "A List Apart: For People Who Make Websites" and has some cool stuff on it! His topics for many articles include:

Topics
* Code
* Content
* Culture
* Design
* Process
* User Science

Search Engine Optimization

A couple good blog items with links for checking SEO... probably worth checking out on a couple of my websites that it's important for...


http://www.dailyseoblog.com/2008/06/15-free-seo-tools-to-check-keyword-density/

This website has several cool SEO tools (free) -- including keyword suggestions and clouds based on what the search engine sees. The specific article talks about 10 mistakes that people make for SEO:
http://www.webconfs.com/top-10-seo-mistakes-article-24.php

A good article to think about some other tips:
http://blogs.msdn.com/webmaster/archive/2009/02/03/optimizing-your-very-large-site-for-search-part-3.aspx

For example:
Fundamentals, fundamentals, fundamentals

As with sports skills, no matter how good you get, you need to ensure that you have your fundamentals down. There's no difference in the world of RIAs. Your site needs to provide:

* Unique page titles
* Detailed meta page descriptions
* Quality body copy (e.g. timely, relevant, well written)
* Descriptive H1 tags (one per page)
* Discoverable navigation
* Informative ALT tags

****
Use keywords in the urls.
Use metatag of title on every page.
Make sure the content matches the keywords.
Check out the tools in the above website to see what's being pulled together.

Photos to purchase

Places to find photos for web/etc.:

iStockPhoto.com
(many cool photos in their dollar bin)

http://fotolia.com

Web Designer Wall

Lots of great examples, blogs, etc. with lots of design ideas to check out!

(And this blog definitely needs some good design moves to improve it!!!)

Free images to use

Microsoft -- can't use in logo but ok otherwise.

www.dreamstime.com
-- royalty free images and a small free image section. They don't have a lot of free images (6 pages of fish), but their images are very cheap (under $10.00 for a big image).

http://us.fotolia.com/
-- royalty free images that you can download for $1.00. (check dreamstime first - they have some of the same images for less)

Resources:
http://desktoppub.about.com/od/freeclipart/Free_Clip_Art.htm

Logo design

Logo design resources:
http://justcreativedesign.com/2008/12/02/logo-design-resources/#inspiration

Before and After:
A very interesting site about web/logo/graphic design and ideas that can make a huge difference ("before" vs "after")...
http://www.mcwade.com/DesignTalk/

CSS Drop Down Menus

Browser Version Market Share
http://marketshare.hitslink.com/report.aspx?qprid=2
Click this link to see how many people are using different brands and versions of browsers. You may want to bookmark this one or add it to your favorites to keep up with trends.

Browser Version Trend
http://marketshare.hitslink.com/report.aspx?qprid=3
Speaking of trends, this page shows market share of browser brands and trends over time. This is another good candidate for your bookmarks or favorites.

CSSPlay List of Menus
http://www.cssplay.co.uk/menus/
Here you'll find a huge collection of pure CSS horizontal and vertical menus by Stu Nichols.

The Ultimate CSS Only Drop-down Menu
http://www.cssplay.co.uk/menus/final_drop.html
Click this link for Stu Nichols' ultimate horizontal drop-down menu example.

A Flyout Menu With Four Sublevels
http://www.cssplay.co.uk/menus/flyout_4level.html
Here's another complex example from the king of CSS menus, Stu Nichols.

CSS Drop-Down Menu Tutorial Code
http://www.tanfa.co.uk/css/examples/menu/
Check out these tutorials on creating vertical and horizontal menus.

How to Create a Drop-Down Menu in Dreamweaver
http://webdesign.about.com/od/dreamweaverhowtos/ig/Dreamweaver-Drop-Down-Menus/index.htm
This link offers an alternative approach to creating drop-down menus for Dreamweaver users.

Drop-Down, Flyout, Pop-Up Navigation Menus With CSS
http://websitetips.com/css/tutorials/menus/#popupnav
Click this link for a large collection of links to different methods of creating pure CSS menus and pop-ups.

Son of Suckerfish Dropdowns
http://www.htmldog.com/articles/suckerfish/dropdowns/
Still more drop-down menus from the folks at HTML Dog

CSS Lists and Navigation Bars

Listutorial
http://css.maxdesign.com.au/listutorial/index.htm
Click this link for many tutorials on working with lists. The navigation bar at the top is the first one shown in Chapter 1 of this lesson.

Turning a List Into a Navigation Bar
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
This link takes you to a site that shows the second navbar example in Chapter 1. The article also describes how the author created his navbar.

Wildly Useful Free Web Development Programs
http://c82.net/article.php?ID=19
I've included this link so you could try out the third navbar example from Chapter 1. However, the site doesn't contain any description of how the author created the navigation bar.

Standards and Accessibility - Navigation Lists
http://www.brucelawson.co.uk/index.php/2005/navigation-lists/
This page is the reason why most sites use unordered lists for navigation bars these days.

CSS Design: Taming Lists
http://alistapart.com/articles/taminglists/
Here you'll find a great tutorial on styling lists with CSS.

Links, Menus, Navigation, and Rollovers
http://websitetips.com/css/tutorials/menus/#csslists
There are links to many tutorials dealing with lists, menus, navigation, and rollovers on this site.

Setting the Current Menu State With CSS
http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
Here's an alternative way to identify the current page in a navbar, using the "body" tag rather than a class inside the navbar.

Elastic Design
http://www.alistapart.com/articles/elastic/
You'll find a few tips and tricks for creating elastic layouts here.

Dynamic Drive CSS Library
http://www.dynamicdrive.com/style/
Here's where you'll find many sample navbars. Unfortunately, most aren't elastic. Many do nothing when you change the text size in your browser.

Professional Horizontal Series
http://www.cssplay.co.uk/menus/pro_horizontal.html#nogo
Use this link to discover some advanced horizontal navbars. The code is woefully complex and would be difficult to elasticize. You can really see the problems by pressing CTRL + + and CTRL + - while viewing the page in Firefox or a similar browser.

CSS Positioning

Pixel
http://en.wikipedia.org/wiki/Pixel
Click this link for Wikipedia's encyclopedic description of pixels.

Mountaintop Corners
http://www.alistapart.com/articles/mountaintop/
This page describes a simple method of rounding the corners of graphic images by coloring a few pixels at the corners.

Visual Formatting Model
http://www.w3.org/TR/CSS21/visuren.html
Here's the full scoop on CSS positioning and floats as defined in the official (and woefully technical) W3C specifications.

CSS Positioning: Static, Relative, Absolute, and Float
http://www.christian-web-masters.com/articles/web_CSS-positioning-tutorial__page_1.html
This page offers a quick tutorial on CSS positioning and floats.

Relatively Absolute
http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute
This site has a brief but useful description of CSS positioning.

Learn CSS Positioning in Ten Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Here you'll find a quick tutorial on CSS positioning.

CSS Positioning
http://www.w3schools.com/css/css_positioning.asp
Try this site for more useful information on CSS positioning, including techniques for handling overflow content.

CSS Semantic Markup and Planning

Guide to Semantic Markup
http://www.blue-anvil.com/archives/guide-to-semantic-mark-up
Click this link for a quick, no-nonsense guide to semantic markup.

Semantics, HTML, XHTML, and Structure
http://brainstormsandraves.com/articles/semantics/structure/
Here's another page that provides a good overview of semantic markup and using the right tags in the right places.

Lorem Ipsum
http://en.wikipedia.org/wiki/Lorem_ipsum
This is Wikipedia's encyclopedic description of the history and purpose of Lorem ipsum text.

CSS Reference
http://www.javascriptkit.com/dhtmltutors/cssreference.shtml
Here's a very brief CSS Properties reference that has an Inherited column that tells whether or not the style is inherited by descendant elements in the document tree.

CSS Properties
http://comptechdoc.org/independent/web/html/guide/htmlcssprop.html
Here you'll find another brief CSS Properties reference that tells you which properties are inherited and which aren't.

CSS: Use Descendant Selectors
http://www.websiteoptimization.com/speed/tweak/descendant/
Click this link for tips on making the most of descendant selectors in your style rules.

Defining and Using Descendant Selectors
http://www.adobe.com/devnet/dreamweaver/articles/css_best_practices_pt6.html
This page covers creating and using descendant selectors in Dreamweaver.

Descendant Selectors
http://www.westciv.com/style_master/academy/css_tutorial/selectors/descendant_selectors.html
More useful information on using descendant selectors in your Web designs.

CSS: Group Selectors and Declarations
http://www.websiteoptimization.com/speed/tweak/grouping/
This site gives information on using multiple selectors in a style rule.

CSS Background Images and Floats

FloatTutorial
http://css.maxdesign.com.au/floatutorial/index.htm
Here is a great resource for anyone looking to get a better understanding of floats. You'll also find examples of using floats to display graphic images in a tabular format without using tables.

CSS Float Property
http://www.w3schools.com/css/pr_class_float.asp
You'll find a brief but useful description of the CSS float property along with some examples in this site.

Floats
http://www.w3.org/TR/CSS21/visuren.html#floats
Here's the full story on floats from the W3C.

**** Color Palette Generator ****
http://jrm.cc/color-palette-generator/index.php?image=rec%2Flandscape-07.jpg&steps=5
Do you already have a background image in mind for a site? Wondering exactly what colors it contains? Send the picture to this site to find out.

Genopal Online
http://genopal.com/online.php
If you're looking for a quick and easy way to find colors that go well together, make sure you check out this site.

CSS Background
http://www.w3schools.com/css/css_background.asp
Click this link for some great examples and reference materials on using background images.

CSS Background Image Guide - CSS tutorial
http://www.tutorialhero.com/tutorial-52-css_background_image_guide.php
Check this link out for a quick tutorial on using background images.

Background-image
http://webdesign.about.com/od/beginningcss/p/aacss7bg.htm
This page provides some good information on using background images.

Working With Background Images and CSS
http://www.adobe.com/devnet/dreamweaver/articles/css_bgimages.html
Here you'll find tips and techniques for using CSS background images in Dreamweaver 8.

Colors and Backgrounds
http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment
This link takes you to a W3C page of all the CSS properties concerning colors and background images.

CSS Layouts vs Tables

The Anatomy of a Large-Scale Hypertextual Web Search Engine
http://infolab.stanford.edu/~backrub/google.html
Click this link for an early paper on the design philosophies behind the Google search engine. It's a good example of how most pages looked in the early days of the Web when traditional HTML reigned supreme.


Web Page Layouts Shouldn't Use Tables
http://webdesign.about.com/od/layout/a/aa111102a.htm
This page sums up all the reasons why professional Web developers have stopped using tables for page layout.

Why Tables for Layout Is Stupid
http://www.hotdesign.com/seybold/
Here's a somewhat comic book-like approach explaining why using tables for page layout isn't such a good idea.

Lengths
http://www.w3.org/TR/CSS21/syndata.html#length-units
Here you'll find the W3C's explanation of the various units of measure. As is typical of W3C documentation, it's woefully terse and technical. But these are the facts, nonetheless.

Elastic Lawn
http://www.csszengarden.com/?cssfile=/063/063.css&page=0
This link is an example of an elastic layout. Change the text size with View > Text Size in Internet Explorer, or CTRL + + and CTRL + - in Firefox or Safari, and watch how everything scales to the current text size.

Tableless Layouts With Dreamweaver 8
http://www.adobe.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
Here's a tutorial on creating tableless page layouts using Dreamweaver 8.

CSS Page Layout Basics
http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
From Adobe and Dreamweaver, this page provides a tutorial on creating page layouts with div tags and floats.

Sample CSS Page Layouts
http://www.maxdesign.com.au/presentation/page_layouts/
Here you'll find some sample page layouts from Max Design. These all use div tags and floats.

CSS Layouts
http://www.dynamicdrive.com/style/layouts/category/C9/
This link takes you to still more sample page layouts from the folks at Dynamic Drive.

CSS Layout Techniques: For Fun and Profit
http://www.glish.com/css/
Here you'll find a quick overview of layout techniques with links to many additional resources.

CSS Tips and Tags

Selectutorial
http://css.maxdesign.com.au/selectutorial/
This link takes you to a wonderful tutorial on CSS selectors at Australia's Max Design Web site.

W3C Selectors
http://www.w3.org/TR/CSS21/selector.html
This is the official W3C page on CSS style rule selectors.

XHTML Reference
http://xhtml.com/en/xhtml/reference/
Here's a quick reference of XHTML tags.

CSS 2.1 Selectors
http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/
This is a good tutorial on CSS selectors.

Use Class With Semantics in Mind
http://www.w3.org/QA/Tips/goodclassnames
Click the link above for some excellent advice on naming style classes, straight from the folks who brought you CSS.

Span and Div
http://en.wikipedia.org/wiki/Span_and_div
This is a quick encyclopedia description of the "span" and "div" tags.

CSS Shorthand Properties
http://mezzoblue.com/css/cribsheet/
Here you'll find some good general tips and techniques for getting the most from CSS.

CSS Tips and Tricks, Part 1
http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/
Here is a page of good general CSS tips and tricks. You'll find the link to Part 2 under "To be continued" at the end of the article.

Web Development Mistakes, Redux
http://www.456bereastreet.com/archive/200408/web_development_mistakes_redux/
As the title implies, this site covers the most common Web development mistakes and how to avoid them.

General CSS Standards

From Class 1 of an Intermediate XHTML/CSS Class

Cascading Style Sheets, Level 2 Revision 1
http://www.w3.org/TR/CSS21/cover.html
This link takes you to the World Wide Web Consortium's official documentation for CSS Level 2.1. This is the resource that defines what CSS 2.1 is and how it works. We'll be using CSS 2.1 throughout this course.

W3C CSS 2.1 Index
http://www.w3.org/TR/CSS21/indexlist.html
This link takes you to the complete index for the W3C's CSS 2.1 documentation. CSS properties are generally shown in single quotation marks like 'background', 'background-attachment', and so forth.

Cultured Codes' CSS 2.1 Properties Reference
http://www.culturedcode.com/css/reference.html
Here's a reference to CSS properties without all the jargon and technical details. This one is very compact. Click a section in the left column, then a property in the second column, to see facts in the Details column.

guiStuff CSS 2.1 Reference
http://www.guistuff.com/css/
Here you'll find yet another handy reference to CSS 2.1 properties.


HTML Dog CSS Properties
http://www.htmldog.com/reference/cssproperties/
Here's another quick reference to CSS properties.

CSS 2 Reference
http://www.w3schools.com/css/css_reference.asp
You guessed it: another online reference to CSS properties. Add all these CSS 2 references to your bookmarks or favorites, and you'll never again need to guess what's available or which values work with which properties. Just pick whichever one you like best as your favorite resource.

W3C Index of Elements
http://www.w3.org/TR/REC-html40/index/elements.html
Here's a page you'll probably want to add to your bookmarks or favorites. It provides a quick index to all HTML tags. Note that items with D in the Depr (Deprecated) column, or an L or F in the DTD column are either deprecated or on their way out in XHTML. So, you should avoid using those tags in your Web pages.

W3C Index of Attributes
http://www.w3.org/TR/REC-html40/index/attributes.html
Attributes are text you put in XHTML tags, like src= in an img tag. This page provides a quick reference to all of them. Again, those with a D, L, or F in the Depr. or DTD column are deprecated and best avoided.

Conformance: Requirements and Recommendationshttp://www.w3.org/TR/REC-html40/index/attributes.html
http://www.w3.org/TR/1998/WD-css2-19980128/conform.html
If you've ever wondered why so few Web developers seem to know about the document tree, check out this page at the W3C site. This is their official page on the matter.

12 Lessons for Those Afraid of CSS and Standards
http://www.alistapart.com/articles/12lessonsCSSandstandards
Click this link for some good advice on why making the switch from the old way of doing things to the new way is a good idea—despite the new learning curve.

First Post

I seem to be collecting all sorts of very cool web design tools and things to think about...

This is hopefully a way to keep it all sorted....