Artikel - Modern CSS Layouts, Characteristics & Techniques

[krischi]

moinmoin liebe Forengemeinde,

ich hab mal wieder einen interessanten Artikel gefunden, auf den ich
hinweisen möchte. Für die alten Hasen ist das natürlich alles alter
Kaffee, aber einige Anfänger und Noch-nicht-so-weit-Fortgeschrittene
können hier bestimmt einiges gebrauchen:

Quelle
Smashing Magazine

Part I - Modern CSS Layouts: The Essential Characteristics

Part II - Modern CSS Layouts: The Essential Techniques

Part I unterteilt sich in

• Progressively enhanced
    - Progressive Enhancement: What It Is, And How To Use It?
    - Progressive Enhancement on Wikipedia
    - Progressive Enhancement: Paving the Way for Future Web Design

• Adaptive to diverse users
    - Market Share by Net Applications
    - Actual Browser Sizes
    - Screen Resolutions and Better User Experience
    - Fixed vs. Fluid vs. Elastic Layout: What’s the Right One for You?
    - Mobile Web Design Trends for 2009

• Modular
    - Object-Oriented CSS
    - Making Modular Layout Systems
    - Definitive List of CSS Frameworks: Pick Your Style

• Efficient
    - 7 Principles of Clean and Optimized CSS Code
    - Simplifying CSS Selectors
    - Best Practices for Speeding Up Your Website
    - The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
    - 35 CSS Lifesavers For Efficient Web Design

• Typographically rich
    - Webfonts.info Wiki
    - Beautiful Fonts With @font-face
    - Why Web Font Services Are the Future of Fonts on the Web
    - The Direction Forward with Web Fonts
    - Roundup of Font Embedding and Replacement Techniques

Part II unterteilt sich in

• CSS3
    - CSS3 Visual Effects
    - RGBA and HSLA
    - background and border techniques
    - box and text drop shadows
    - transform functions
    - Animation and Transitions
    - CSS3 Usability / Readability Enhancements
    - Creating Multiple Columns of Text
    - Controlling Text Wrapping and Breaking
    - Media Queries
    - Improving Efficiency Through CSS3
    - CSS3 Pseudo-Classes and Attribute Selectors

• HTML5
    - New Structural Markup
      - Cheat Sheet (PDF)
      - Coding Layout From Scratch
      - id/class name cheatsheet (@boblet)
      - articles on header, section, aside, nav, footer
      - articles on div, figure, hgroup, h1-h6
    - Reducing JavaScript and Plug-in Dependence
      - Get Ready for HTML 5 (covers forms and canvas, from A List Apart)
      - The webforms2 script
      - Canvas tutorial (Mozilla Developer Center)
      - HTML 5 canvas – the basics (Opera Developer Community)
      - The video element (HTML5 Doctor)
      - Native audio in the browser (HTML5 Doctor)

• IE Filtering
    - How To Support Internet Explorer and Still Be Cutting Edge
    - CSS3 Solutions for Internet Explorer
    - How to Handle IE6: Aggressive Graceful Degradation (Monday by Noon)
    - Definitive Guide to Taming the IE6 Beast (Six Revisions)
    - How To Fix 25+ Internet Explorer 6 Bugs (Virtuosi Media)
    - Conditional comments (quirksmode)
    - Wrapping Your Head around Downlevel Conditional Comments

• Flexible Layouts
    - essential resources for creating liquid and elastic layouts (zomigi.com)
    - Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
    - Adaptive CSS-Layouts: New Era In Fluid Layouts?
    - Resolution dependent layout update (The Man in Blue)
    - Dynamic Layout (Fortes)
    - Create Your Own Sliding Resizable Grid (Hackito Ergo Sum)

• Layout Grids
    - Designing With Grid-Based Approach
    - Grid-Based Design: Six Creative Column Techniques
    - Grid design basics (Opera Developer Community)
    - Five simple steps to designing grid systems (by Mark Boulton)
    - Fluid Grids (A List Apart)
    - Grid-Based Web Design, Simplified (Design Informer)
    - The Grid System (portal to articles, tools, templates, forum, and more)
    - Ultimate Guide To Grid-Based Web Design: Techniques and Tools (Noupe)
    - CSS Grid Generators & CSS Grid Layout Generators (Web Design Tools)
    - Inspiration galleries Design By Grid and Grid Based Designs

• Efficient CSS Development Practices
    - CSS Frameworks
      - Design From Scratch
      - Jump-start (CSS Newbie)
      - What Are The Benefits (CSS-Tricks)
      - 5 Popular CSS Frameworks + Tutorials & Tools (Noupe)
      - Frameworks for Designers (from A List Apart)
      - Guidelines for Developing (W3Avenue)
      - Creating a Time Saving CSS Template (Arbenting)
      - Why I don’t use CSS Frameworks (Warpspire)
      - Please do not Use CSS Frameworks (Monday by Noon)
      - What’s not to love about CSS frameworks? (JeffCroft.com)
      - Making Modular Layout Systems (24 Ways)
      - Definitive List of CSS Frameworks – Pick Your Style (W3Avenue)
      - Compare CSS frameworks at bestwebframeworks.com
    - Object-oriented CSS (OOCSS)
      - the original blog post at stubbornella.com
      - The Lowdown (TYPESETT)
      - What, How, and Why (Nettuts)
    - CSS Generation
      - 50 Extremely Useful And Powerful CSS Tools
      - 35 CSS-Lifesavers For Efficient Web Design
      - 50 Useful Design Tools For Beautiful Web Typography
      - Zen Coding: A Speedy Way To Write HTML/CSS Code
      - 50 Useful Tools and Generators for Easy CSS Development (speckyboy)
      - List of Really Useful Tools for CSS Developers (W3Avenue)

• CSS Performance
    - CSS Compression
      - Principles Of Clean And Optimized CSS Code
      - Automate Optimization and Deployment Of Static Content
      - Online Tools and Apps to Help Optimize and Format CSS
      - Resources for Clean and Compressed CSS
      - Tools for concatenating and minifying CSS and JavaScript files
      - Make your pages load faster
      - Single Line CSS (Ordered List)
    - CSS Sprites
      - Techniques, Tools And Tutorials
      - What They Are, Why They’re Cool, and How To Use Them
      - Case Study: The Power of CSS Sprites
      - Useful Technique, or Potential Nuisance?
      - CSS Sprites are Stupid – Let’s Use Archives Instead!
      - How to reduce the number of HTTP requests

• Font Embedding and Replacement
    - Beautiful fonts with @font-face (Mozilla Hacks)
    - @font-face in Depth (User Agent Man)
    - How to use CSS @font-face (includes links to articles
      on performance, from Nice Web Type)
    - Mo’ Bulletproofer @Font-Face CSS Syntax (Readable Web)
    - Becoming a Font Embedding Master (Snook.ca)
    - Font Squirrel’s @font-face kits contain multiple versions
      of free fonts to accommodate different browsers, plus the
      CSS to make it work. They also have an @font-face generator
      to create your own kit.

Ich hoffe Ihr könnts gebrauchen, aber reinschauen lohnt sich in jedem Fall

lieben Gruß
euer Krischi