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
Friday, March 30, 2007
Thursday, March 22, 2007
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
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
Sunday, March 18, 2007
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
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
Thursday, March 15, 2007
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.
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.
Grids
Grid System for Layout
1. determine the layout size (based on which screen resolution you choose for web design)
2. choose a ratio:
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
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)
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
Wednesday, March 14, 2007
Tuesday, March 13, 2007
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?
Salon.com: The Coulterization of the American right
I thought Ann Coulter was soooo Fall 2005 political banter?
Monday, March 12, 2007
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??
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
.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
Friday, March 09, 2007
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
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)
Visual
Caption
Headline
Copy
Signature (Advertisers name, contact information)
Thursday, March 08, 2007
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.
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.
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.
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.
Wednesday, March 07, 2007
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)
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/
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/
Tuesday, March 06, 2007
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/
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/
Friday, March 02, 2007
I spent sometime on shutterstock once
And saw this pretty unicorn:
And found out the name of this flower:
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
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)
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
KonteraGoogle 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
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"
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.
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:
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
The Century of the Self - Freud's affect on the social, corporate, and political landscape
Thursday, March 01, 2007
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? BecauseResources
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
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
Subscribe to:
Posts (Atom)