Wednesday, February 28, 2007
DIY
Design It Yourself has reintroduced me to my personal self. I keep forgeting about this side of me - the unprofessional designer. The one who could enjoy creating things without having to live up to some formal standard. Designing to communicate something. Designing for fun. Creating accessibility for others to design.
My Morning Encouragement
"To you who feel like failures because you spent last year honing your web skills and serving clients, or running a business, or perhaps publishing content, you are special and lovely, so hold that pretty head high, and never let them see the tears." - Zeldman on "Web 3.0"
The first post by Ian Landsman is a about Motivation and is still motivated years later
The first post by Ian Landsman is a about Motivation and is still motivated years later
Monday, February 26, 2007
The Future of Web Design is still unknown
"todays hegemony of signal designers" - viceroy321 describes the web designers of now in a comment to an article on Web 2.0, 3.0, 4.0: A Design Perspective
CSS:
The Future of CSS (direct PDF download) - Andy Budd [Apr. 2007]
CSS:
The Future of CSS (direct PDF download) - Andy Budd [Apr. 2007]
Images: the IMG in perspective
Internet Explorer cannot render 24-bit alpha transparent PNG's: Here's the workaround
swfir let's you do more with images
swfir let's you do more with images
Friday, February 23, 2007
Photoshop Mock Up
New File at designated width you designed for (accounting for the most popular screen resolution + browser + browser settings)
1024 x 768 ie6 is 1003 × 568
800 x 600 ie6 is 779 × 400
If I don't have a lot of content, I might as well design to stay safe at 779 x 400.
I could standardize this part of the process by always creating a file 1024 x 1000 px
Left justified: place vertical markers at 779px & 1003px and horizontal markers at 400px & 568px
Centered: place vertical markers at 10px, 112px, 902px, & 1014 and horizontal markers at 400px & 568px
Then I would place the most important content in the main 779 x 400 area and have extra room to build into and crop when I'm done
1024 x 768 ie6 is 1003 × 568
800 x 600 ie6 is 779 × 400
If I don't have a lot of content, I might as well design to stay safe at 779 x 400.
I could standardize this part of the process by always creating a file 1024 x 1000 px
Left justified: place vertical markers at 779px & 1003px and horizontal markers at 400px & 568px
Centered: place vertical markers at 10px, 112px, 902px, & 1014 and horizontal markers at 400px & 568px
Then I would place the most important content in the main 779 x 400 area and have extra room to build into and crop when I'm done
Thursday, February 22, 2007
What's Up DOCTYPE?
Quick Link: W3C Doctypes
Standards Compliant Doctype from the horse's mouth
W3C's List of Recommended Doc Type Definitions (DTDs)
W3C article "Don't forget to add a doctype" explains the importance of DTDs
When something's wrong, check your doctype
Fix Your Site With the Right DOCTYPE!
Standards Compliant Doctype from the horse's mouth
W3C's List of Recommended Doc Type Definitions (DTDs)
W3C article "Don't forget to add a doctype" explains the importance of DTDs
When something's wrong, check your doctype
Fix Your Site With the Right DOCTYPE!
"if your pages use outdated elements such as the bgcolor attribute in table cells or the target attribute in links, then HTML 4.01 Transitional is likely the best document type for your pages." - Jeffery Zeldman
Doctype Advanced
Beyond DOCTYPE
From Switches to Targets
Related Topics: deprecated HTML
VALIDATE your mark up
validate your HTML and CSS
search: free validation HTML CSS
World Wide Web Consortium (http://validator.w3.org)
Web Design Group (www.htmlhelp.com/tools/validator/)
CSS: http://jigsaw.w3.org/css-validator/
Tidy: www.w3.org/People/Raggett/tidy/
validate yourself too: Invalidation may be the single most damaging form of psychological abuse
HTML Toolbox shows errors
search: free validation HTML CSS
World Wide Web Consortium (http://validator.w3.org)
Web Design Group (www.htmlhelp.com/tools/validator/)
CSS: http://jigsaw.w3.org/css-validator/
Tidy: www.w3.org/People/Raggett/tidy/
validate yourself too: Invalidation may be the single most damaging form of psychological abuse
HTML Toolbox shows errors
Accessibility
"Although many people automatically think about people with some sort of physical impairment when accessibility is mentioned, the term actually refers to a Web site that is open to all. Even visitors with old equipment, tiny monitors, slow modems, and screen readers can use accessible Web sites.What happens when a designer considers how the page will look to all visitors? The usability level of the site increases, as does visitor satisfaction - and hopefully repeat visitors. You don't have to design an ugly site geared towards the lowest common denominator. Just put some thought into how the site looks in configurations other than your own.If you assume that "everyone" has a huge monitor running at the highest possible resolution or other cutting edge equipment, then you could be locking out well over half of your visitors. Why not invite them in instead?"
Providing text equivalents for non-text elements in the form of an alt or longdesc tag
Resources:
30 days to a more accessible web site
Accessify
Providing text equivalents for non-text elements in the form of an alt or longdesc tag
Resources:
30 days to a more accessible web site
Accessify
CSS vs Tables
"...tables or absolute positioning. That’s so 1999." - A List Apart
Educating your client why css layout instead of a table layout:
"Large and/or nested tables in particular can dramatically slow page display." - Designing for the Web
"Web standards such as HTML 4, XHTML, and Cascading Style Sheets (CSS) gives you the best of all possible worlds" - Jeffery Zeldman
"The most amazing thing about this tutorial, is that somehow, even though it was completely unrelated, and supposed to be humorous, people STILL managed to get into a tables vs. css debate. YAWNNNNNNNNNN. So tired. So over it. Will someone just buy the domain tablesvscss.com and document all the arguments so we can keep it all in one place and never have to look at it again? I am pro web standards, but at the end of the day, it is such a meaningless thing to be zealous about. People are hungry. " - a comment by anathema on an educational CSS "how to" post
Educating your client why css layout instead of a table layout:
"Large and/or nested tables in particular can dramatically slow page display." - Designing for the Web
"Web standards such as HTML 4, XHTML, and Cascading Style Sheets (CSS) gives you the best of all possible worlds" - Jeffery Zeldman
"The most amazing thing about this tutorial, is that somehow, even though it was completely unrelated, and supposed to be humorous, people STILL managed to get into a tables vs. css debate. YAWNNNNNNNNNN. So tired. So over it. Will someone just buy the domain tablesvscss.com and document all the arguments so we can keep it all in one place and never have to look at it again? I am pro web standards, but at the end of the day, it is such a meaningless thing to be zealous about. People are hungry. " - a comment by anathema on an educational CSS "how to" post
Test Your Site
Test your site in multiple browsers, browser versions, screen resolutions, operating systems, and monitor sizes combinations.
Become familiar with the major assistive technologies used by visitors with disabilities.
Running IE 6 and 7 at the same time
Become familiar with the major assistive technologies used by visitors with disabilities.
Running IE 6 and 7 at the same time
Color Me Good
"Web-safe color, basically, is the set of colors that will render consistently in browsers on the two major computer operating systems (Windows and OS X). A true cross-platform Web-safe color palette is 216 colors." - Designing for the Web
The 216 Color Web Safe Pallete are the only colors that will render correctly on both PC and MAC
Visibone's Swatches
Be Accessible:
Use Contrast to make text readable. Do not use color to convey information. Example, Use an * to note a form field that is required not just changing the color to red.
You can check how you page will appear to different visual users at Vischeck.
You can also check a color before you use it on the Accessibility Color Wheel .
Tools:
Tons of Other Color Resources for Web Design
Genopal Online Tool
Geno Color gives a simple Color Lesson
HTML Color Names
Adobe Kuler
Color Lovers
http://wellstyled.com/tools/colorscheme2/index-en.html
The 216 Color Web Safe Pallete are the only colors that will render correctly on both PC and MAC
Visibone's Swatches
Be Accessible:
Use Contrast to make text readable. Do not use color to convey information. Example, Use an * to note a form field that is required not just changing the color to red.
You can check how you page will appear to different visual users at Vischeck.
You can also check a color before you use it on the Accessibility Color Wheel .
Tools:
Tons of Other Color Resources for Web Design
Genopal Online Tool
Geno Color gives a simple Color Lesson
HTML Color Names
Adobe Kuler
Color Lovers
http://wellstyled.com/tools/colorscheme2/index-en.html
Notes on Usability
This information has been moved to User Experience, Usability and Usability Testing
Web Design - a step by step quide
This is still in the process of being written. I am using my current project as a model to write this and am re-researching anything I haven't read new material about in the past 6 months.
1} If project is a redesign, have someone test usability of old site to determine what works and what needs improvement.
2} Research the dominant companies in the industry. Print out thier sites and become familiar with what users expect as well as where there is room for improvement/innovation.
3} Sketch out the wireframe to define a the page's content and functionality without touching on design, colors, graphics, or fonts yet.
4} Determine your canvas size. Look at visitor stats for what Screen Resolution And Browser Type to optimize for. Determine the height and width of your main content area.
5} Find Your inspiration. Take screenshots of site components so you can have them for reference.
6} Sketch out designs. Document your design sources, ideas, and process. These will be your points of reference for pitching, understanding, explaining, and being professional.
7} Make A Paper Mock Up. (You can cut up the pieces of the other web sites.)
8} Make a Photoshop Mock Up with everything on seperate layers so you can move and Shift everything Around.
9} Create A Simple HTML file mock up to test color. Save your photoshop mock up as an image and insert in the document. Set the background color of the body to match against the different background colors you plan on using. Test on a PC and a MAC. You might need to use some of the 216 Web Safe Colors
10} Let a peer look at your design. Educate them first. Show them a copy marked with what is permanet and why (industry related usability, CEO mandated, ect...). Present a sample sheet of the major influences of the design. This will save a lot of your peer's time so they can focus on the design and brainstorm improvements or even trigger an innovation. Use multiple peers who are strong in different areas - usability, seo, design, psychology, industry guru, ect...
11} Present your comp(s) to the company for final changes. Explaining to them what's industry related usability, SEO realted, accessability related, as well as samples of the major design influences.
12} Create css mock up.
13} Test css mock up in different browsers and resolutions for font readability
14} Create and optimize images and add to css and html
15} Add content to HTML
16} Test your site (again) on different browsers, screen resolutions, and operating systems
17} Make sure all images have alt and long description
18} Make sure all links have title tags and don't open in new windows
19} Validate your CSS and HTML
Other Effective Guides:
CSS From the Ground Up
1} If project is a redesign, have someone test usability of old site to determine what works and what needs improvement.
2} Research the dominant companies in the industry. Print out thier sites and become familiar with what users expect as well as where there is room for improvement/innovation.
3} Sketch out the wireframe to define a the page's content and functionality without touching on design, colors, graphics, or fonts yet.
4} Determine your canvas size. Look at visitor stats for what Screen Resolution And Browser Type to optimize for. Determine the height and width of your main content area.
5} Find Your inspiration. Take screenshots of site components so you can have them for reference.
6} Sketch out designs. Document your design sources, ideas, and process. These will be your points of reference for pitching, understanding, explaining, and being professional.
7} Make A Paper Mock Up. (You can cut up the pieces of the other web sites.)
8} Make a Photoshop Mock Up with everything on seperate layers so you can move and Shift everything Around.
9} Create A Simple HTML file mock up to test color. Save your photoshop mock up as an image and insert in the document. Set the background color of the body to match against the different background colors you plan on using. Test on a PC and a MAC. You might need to use some of the 216 Web Safe Colors
10} Let a peer look at your design. Educate them first. Show them a copy marked with what is permanet and why (industry related usability, CEO mandated, ect...). Present a sample sheet of the major influences of the design. This will save a lot of your peer's time so they can focus on the design and brainstorm improvements or even trigger an innovation. Use multiple peers who are strong in different areas - usability, seo, design, psychology, industry guru, ect...
11} Present your comp(s) to the company for final changes. Explaining to them what's industry related usability, SEO realted, accessability related, as well as samples of the major design influences.
12} Create css mock up.
13} Test css mock up in different browsers and resolutions for font readability
14} Create and optimize images and add to css and html
15} Add content to HTML
16} Test your site (again) on different browsers, screen resolutions, and operating systems
17} Make sure all images have alt and long description
18} Make sure all links have title tags and don't open in new windows
19} Validate your CSS and HTML
Other Effective Guides:
CSS From the Ground Up
Reading List
these have been moved to the super long list here:
Reading List for Web Designers and Pop Culture Enthusiasts
Reading List for Web Designers and Pop Culture Enthusiasts
Web Design Resources
Lorem Ipsum Generator
216 Color Web Safe Pallete
HTML Toolbox shows errors
Browser Photo screenshots in 16 different browsers
216 Color Web Safe Pallete
HTML Toolbox shows errors
Browser Photo screenshots in 16 different browsers
Screen Resolution And Web Page Design
Read Optimal width for 1024px resolution?
I wish I did before I wrote all the following out...
The comments have both good information and a fixed vs fluid debate. Comment debates give me headaches.
Here's the archaic research I did:
Researching an old question for the newest answer.
1. Check Visitor Stats
2. If you have no stats history, Check Current Research - Preferably Industry and Geographically Specific
2001 [1]
Check your visitor stats
Reference online user surveys at WebSideStory and BrowserNews
They indicate that 800x600 is the most popular resolution, with 1024x768 close behind in 2001.
A page optimized for 800x600 should have a maximum width of about 760 pixels.
2005 [4]
The rightmost part of a page is cut off when printing a frozen page. This is especially true for Europeans, who use narrower paper (A4) than Americans
mistake #1 is to freeze the fonts - then they are too small for browsers
2006 [3]
Percentage Of Users:
1024 × 768 - 56% (2005) & 50% (2004)
800 × 600 - 28% (2005) & 35% (2004)
Screen Size In Browser:
For Screen size 800 × 600
IE 6 779 × 400
Firefox 781 × 434
Opera 777 × 427
Mozilla 779 × 420
Netscape 781 × 389
For Screen size 1024 × 768
IE 6 1003 × 568
Firefox 1005 × 602
Opera 1001 × 595
Mozilla 1003 × 588
Netscape 1005 × 557
"I use both fixed-width and percentage-based designs, and determine which to use based on user research, intended audience and client expectations. If I use a fixed-width design I tend towards an 800 × 600 screen size, usually around a 762 × 400 design size. If I use a percentage-based design I will design in stretch points so that the information looks good at both of the dominant screen sizes." - Joshua David McClurg-Genevese
Resources:
1. Screen Resolution And Page Design [Dec 2001]
2. Screen, which screen size should a web designer design for? [May 2000]
3. Designing for the Web [Jan 2006]
4. Top Ten Web Design Mistakes of 2005 [Oct 2005]
Read More:
Resolution Dependent Layout
Accessibilty Guide to Screen Resolution and Page Layout
I wish I did before I wrote all the following out...
The comments have both good information and a fixed vs fluid debate. Comment debates give me headaches.
Here's the archaic research I did:
Researching an old question for the newest answer.
1. Check Visitor Stats
2. If you have no stats history, Check Current Research - Preferably Industry and Geographically Specific
2001 [1]
Check your visitor stats
Reference online user surveys at WebSideStory and BrowserNews
They indicate that 800x600 is the most popular resolution, with 1024x768 close behind in 2001.
A page optimized for 800x600 should have a maximum width of about 760 pixels.
2005 [4]
The rightmost part of a page is cut off when printing a frozen page. This is especially true for Europeans, who use narrower paper (A4) than Americans
mistake #1 is to freeze the fonts - then they are too small for browsers
2006 [3]
Percentage Of Users:
1024 × 768 - 56% (2005) & 50% (2004)
800 × 600 - 28% (2005) & 35% (2004)
Screen Size In Browser:
For Screen size 800 × 600
IE 6 779 × 400
Firefox 781 × 434
Opera 777 × 427
Mozilla 779 × 420
Netscape 781 × 389
For Screen size 1024 × 768
IE 6 1003 × 568
Firefox 1005 × 602
Opera 1001 × 595
Mozilla 1003 × 588
Netscape 1005 × 557
"I use both fixed-width and percentage-based designs, and determine which to use based on user research, intended audience and client expectations. If I use a fixed-width design I tend towards an 800 × 600 screen size, usually around a 762 × 400 design size. If I use a percentage-based design I will design in stretch points so that the information looks good at both of the dominant screen sizes." - Joshua David McClurg-Genevese
Resources:
1. Screen Resolution And Page Design [Dec 2001]
2. Screen, which screen size should a web designer design for? [May 2000]
3. Designing for the Web [Jan 2006]
4. Top Ten Web Design Mistakes of 2005 [Oct 2005]
Read More:
Resolution Dependent Layout
Accessibilty Guide to Screen Resolution and Page Layout
Wednesday, February 21, 2007
I will be leaving my residence at the end of March.
Intent to vacate forms:
All the forms you could need and more - FREE
The actual form I need: Notice of Intent to Vacate
It was recommended that I send it certified mail and get a reciept: Acknowledgment of Notice of Intent to Vacate
Move In/Out Checklists:
One of four on Total Real Estate website
FYI: Why I'm Glad I had Renter's Insurance and My Landlord Should Be Too
Prepare to get your security deposit back (read and understand tenant rights in FL):
http://www.floridapirg.org/consumer/renters/rrpage4.htm
http://www.800helpfla.com/landlord_text.html
http://www.coj.net/Departments/Community+Services/Consumer+Affairs/Floridas+landlord+tenant+rights.htm
All the forms you could need and more - FREE
The actual form I need: Notice of Intent to Vacate
It was recommended that I send it certified mail and get a reciept: Acknowledgment of Notice of Intent to Vacate
Move In/Out Checklists:
One of four on Total Real Estate website
FYI: Why I'm Glad I had Renter's Insurance and My Landlord Should Be Too
Prepare to get your security deposit back (read and understand tenant rights in FL):
http://www.floridapirg.org/consumer/renters/rrpage4.htm
http://www.800helpfla.com/landlord_text.html
http://www.coj.net/Departments/Community+Services/Consumer+Affairs/Floridas+landlord+tenant+rights.htm
Tuesday, February 20, 2007
Monday, February 19, 2007
Keeping Up with the Jones's
First I clicked on a link in a comment http://www.2dolphins.com/ (it really does drive traffic to your site when you post a link) and ended up checking out links to life hack sites: http://www.lifehack.org/, http://www.lifehacker.com/, and http://toomuchimagination.blogspot.com/2007/02/sms-to-do-lists.html. Next thing I know I'm on a site called "twitter" where someone was working on a WP layout so I lurked to see what they were up to and they mentioned 3 things I wasn't familiar with so of course I had to know what The Style Archive, Open ID, and Habari are.
The thought I'm having lately:
It seems like a waste to design something from scratch with all those templates sitting around? Please tell me I'm wrong. And lazy.
The thought I'm having lately:
It seems like a waste to design something from scratch with all those templates sitting around? Please tell me I'm wrong. And lazy.
Friday, February 16, 2007
Just Digging Around
Today's findings on digg.com
Vintage Audio:
Chrysler's in-car phonograph
more about the 1950's genius idea (more pitures too)
Travel Links which reveal that I am:
a> frugal: How to Vacation at Home
b> anal: Packing for Travel
The very pretty Table of Malcontents:
It ranks #1 on google for the term "malcontents". The article examines linkology and describes the relationship of "professional regurgitators" (boing boing) to the "amateurs" (http://andrewsullivan.theatlantic.com/).
The dictionary.com definition of malcontent is "a chronically dissatisfied person" and implies that this article portrays blogs as "dissatisfied with existing conditions". I tend to find more blogs that are excited about things - satisfied. These blogs are probably just "amateurs". If they want to be popluar they'll have to get a more "dissatisfied" quality of life. Examining the content of poplular blogs, you'll see that you need a fascination with modern celebrities and gadgets to become "dissatisfied". I think that the true test of your malcontent is to think about unexisting conditions (a world without celebrities and gadgets) and be completly satisfied.
Marketing Related:
Marketing On Myspace has posed many questions for me. If fake blogs are "flogs", what are fake myspace profiles? "frofiles"? And, where can i get a "mass friend adder" that doesn't make me look desperate?
How Social Sites Reveal What Your Audience Likes
Calacanis offers to buy out digg users {Ooooo, me! me!
Ok, back to working on my "figg" (fake digg account, duh).
NtS>Upload floppy with favorites from 1996 to del.icio.us.
Thursday, February 15, 2007
Why I should visit del.icio.us more...
Free British TV: http://www.vanityfair.com/ontheweb/features/2007/03/piratebay200703
70's Hair Ads: http://meathaus.com/2007/02/06/hairstyle-names-from-1970s-ebony-ad/
There's something to this simple layout: http://www.themorningnews.org/archives/new_york_new_york/the_morning_news_guide_to_urban_etiquette_new_york_city.php
I read this after I found out that my digital camera is broken: http://gizmodo.com/gadgets/feature/horseshoes-and-hand-grenades-joel-johnson-returnsto-spank-us-all-for-supporting-crap-236310.php
I will not purchase another digital camera but instead borrow all my friend's cameras that they don't use but HAD TO BUY!
70's Hair Ads: http://meathaus.com/2007/02/06/hairstyle-names-from-1970s-ebony-ad/
There's something to this simple layout: http://www.themorningnews.org/archives/new_york_new_york/the_morning_news_guide_to_urban_etiquette_new_york_city.php
I read this after I found out that my digital camera is broken: http://gizmodo.com/gadgets/feature/horseshoes-and-hand-grenades-joel-johnson-returnsto-spank-us-all-for-supporting-crap-236310.php
I will not purchase another digital camera but instead borrow all my friend's cameras that they don't use but HAD TO BUY!
Google Sitemap for Blogspot
option for free blogspot account w/o custom domain name:
http://brokensyllabus.blogspot.com/atom.xml
if you get a custom domain then you can use:
http://www.mycustomdomain.com/atom.xml
if you change publishing settings to ftp then you, of course, won't have a problem publishing a sitemap.xml like normal
"fun" way to create a sitemap: http://www.writemaps.com/
http://brokensyllabus.blogspot.com/atom.xml
if you get a custom domain then you can use:
http://www.mycustomdomain.com/atom.xml
if you change publishing settings to ftp then you, of course, won't have a problem publishing a sitemap.xml like normal
"fun" way to create a sitemap: http://www.writemaps.com/
Wednesday, February 14, 2007
making money off of loans
http://www.johnchow.com/want-to-get-rich-get-into-debt/
I'll revisit this later but my mom said that she used to borrow money at a low percentage and put the money in a CD and earn a higher interest rate on it. In the 70's.
text after an image float left
A lot of times I need to start a new section after a paragraph that contains an image floated left.
This little break attribute will help start a fresh line of text:
BR clear="left"
This little break attribute will help start a fresh line of text:
BR clear="left"
income tax time
heath care:
tax credit for out of pocket health coverage
50ways to cut health care costs
tax cuts:
phone bill taxes
state and local general income tax
10 tax breaks
charity donations:
5 - 10 % flags you for an audit: isn't 10% a tithing standard
savings:
retire in a decade
5 big goals
Inside-Flyer.com WebFlyer.com
tax credit for out of pocket health coverage
50ways to cut health care costs
tax cuts:
phone bill taxes
state and local general income tax
10 tax breaks
charity donations:
5 - 10 % flags you for an audit: isn't 10% a tithing standard
savings:
retire in a decade
5 big goals
Inside-Flyer.com WebFlyer.com
center img
W3C SAMPLE :
img class="centeredPIC"
IMG.centeredPIC { display: block; margin-left: auto; margin-right: auto }
FINAL:
#flkr-cntrPIC{ display: block; margin-left: auto; margin-right: auto; float: center; padding: 5px; margin-bottom: 8px; border: 1px solid #ccc;}
References:
Web Publishing Secrets - Zeldman [written 10 days before 9/11]
Centering Images is harder than you think [2004/09]
W3C section on centering [lu 2007/01/15]
img class="centeredPIC"
IMG.centeredPIC { display: block; margin-left: auto; margin-right: auto }
FINAL:
#flkr-cntrPIC{ display: block; margin-left: auto; margin-right: auto; float: center; padding: 5px; margin-bottom: 8px; border: 1px solid #ccc;}
References:
Web Publishing Secrets - Zeldman [written 10 days before 9/11]
Centering Images is harder than you think [2004/09]
W3C section on centering [lu 2007/01/15]
Tuesday, February 13, 2007
Subscribe to:
Posts (Atom)