del.icio.us/smjdesign/
barcampindy2008
| Graphic design | ||
| Web Hot or Not? {link} | ||
| CSS | ||
| Less obvious | ||
| Finding a Wisconsin cheese store on a WAP phone | ||
| Copy good sites: Advertising and design firm portfolios (my company does it) | |
| Graphic design books | |
| Influence of FortifiedLiving.com {link} on RachelSteely.com {link} | |
| kuler.adobe.com for color selection
(need Flash 9) {link} |
|
| Functional versus informational in branding |
| Illustrator and Photoshop Best Practices | |||
| Alternatives: inkscape.org {link}, gimp.org {link} | |||
| Use layers to organize | |||
| slices | |||
| button | |||
| button-hover | |||
| button-selected_self (use cursor: default in CSS) | |||
| button-selected (for sub-navigation) | |||
| button-selected_hover (for sub-navigation) | |||
| content | |||
| sidebar | |||
| background | |||
| Illustrator and Photoshop Best Practices | ||
| Go up layers from background and "Save For Web" with slices |
||
| JPG for photos | ||
| GIF for vector graphics or 1-bit transparency | ||
| The future: PNG? (IE6 issues) | ||
| Illustrator and Photoshop Best Practices | |||
| Name images the same as CSS rules: | |||
| CSS rule: .div_header_bg-1 {} | |||
| IMG src: div_header_bg-1.gif | |||
| Standardize nomenclature for CSS class rules and image file names reduces confusion | |||
| I use hyphens to separate sections of words | |||
| I use underscore to separate words | |||
| Where to divide DIV tags | ||
| Choose CSS background graphics NOT inline graphics to simplify HTML |
||
| Separate content from form | ||
| A “mass reset” of default browser styles. Set margin and padding to 0 on all elements, turning off borders on images, etc. |
| Study and learn from others | |||
| WordPress Themes | |||
| Yahoo! CSS Frameworks {link} | |||
| Example of Tab View {link} | |||
| CSS Zen Garden {link} | |||
| Firebug {link} | ||
| Inspect elements, view inheritance, edit HTML and CSS on the fly | ||
| Web Developer {link} | ||
| Disable CSS, JavaScript, & Images, outline blocks | ||
| Measure It {link} | ||
| Ruler on webpage | ||
| ColorZilla {link} | ||
| Sample and copy hex values | ||
| Link Checker {link} | ||
| Internet Explorer Developer Toolbar {link} | ||
| Tables for tabular data | ||
| DIV tags for layout | ||
| Lists for navigation {UL and LI tags} | ||
| CSS tabs {link} | ||
| no Javascript mouseover scripts | ||
| Annual Naked Day is April 5th | ||
| "I mean, who doesn't want to get
naked?" -Dustin Diaz, Founder of CSS Naked Day {link} |
||
| Disable CSS for one day | ||
Search Engine Optimization (SEO)
| Content at top of page valued higher | ||
| Place navigation after content | ||
| Absolute Position DIV if navigation at top {link} | ||
| Float DIV if navigation at side {link} | ||
| PURPOSE: Remove items out of layout flow | |
| Can create columns | |
| Remember to clear your floats! |
Internet Explorer 6 layout bugs
| If it looks good in FireFox and Safari, then use | ||
| PositionIsEverything.net | ||
| QuirksMode.org | ||
| IE / Comment Conditional Statement | ||
| <!--[if IE]> <![endif]--> | ||
| HTML 5 and IE versioning is currently a hot discussion in the blogoshere | ||
| In the first 10 years of professional web development, back in the early ‘90s, browser support was binary: Do you — or don’t you — support a given browser? When the answer was “No”, user access to the site was often actively prevented. In the years following IE5’s release in 1998, professional web designers and developers have become accustomed to asking at the outset of any new undertaking, “Do I have to support Netscape 4.x browsers for this project?” By contrast, in modern web development we must support all browsers. Choosing to exclude a segment of users is inappropriate, and, with a “Graded Browser Support” strategy, unnecessary. | |
| - from developer.yahoo.com |