Tuesday, November 15, 2005

CSS and Web Design: Some Helpful Resources

In spite of Philip Greenspun's advice to "'just say no' to formatting your documents instead of working on the content," I've been tinkering with the CSS for my Web pages. For me this sort of thing always involves a lot of preliminary reading. Here are links to some of the most helpful advice I've found on-line.

Cascading Style Sheet (CSS) Basic Reference Material
  • glish.com : CSS layout techniques. "If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find, and some that I made up when I was bored last Thursday. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS. Feel free to steal all the code you find on this site, and consider linking back here on your site or in your source comments."
  • CSS Panic Guide. "CSS-a guide for the unglued. This is not a complete resource, this is a fast resource. These are the sites that I refer to first, and that I tell people to read. When you want more, just about all of them have their own links to good sites."
  • W3Schools Online Web Tutorials. "THE LARGEST WEB DEVELOPER'S SITE ON THE NET: Full Web Building Tutorials - All Free. At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, Multimedia and WAP." It's true. If it's a tutorial you want, this is the place. Really helpful!
  • HTML and CSS Tutorials, References, Articles and News - HTML Dog. "Welcome to HTML Dog, the web designer's resource for everything HTML and CSS, the most common technologies used in making web pages. If you are a beginner, the step-by-step HTML Beginner's Guide will get you started. If you are already a competent web maker, the HTML Advanced Guide and CSS Advanced Guide are the places to look for advanced tips, tricks and good practice techniques." Not as comprehensive as the W3Schools site, but what's here is quite helpful.
  • Lorelle on WordPress HTML, CSS, PHP, and More Cheat Sheets "If you are into tweaking your WordPress Theme or designing one from scratch, here are some HTML/XHTML and CSS Cheat Sheets you might want to add to your resources." This is a blogger's list of pages designed as handy hard-copy references for the novice Web designer.
CSS Templates

My favorite way to learn "computer stuff" is to start with a sample (shell script, program, html page, etc.) and try to modify it to meet my needs. Once I understand what it is I need to know, I can focus better when I read that fine manual. There are many sample CSS templates available for would-be Web designers. I've tried a number of them, and these were the ones I found most helpful.

Theory and Practice: Good Web Design

These resources offer advice on what makes good CSS design, and how it can enhance, not detract from, Web pages. They are interesting and thought provoking, and some of them offer practical tips as well.

  • Webaim--accessibility techniques and concepts. The Internet can be a fantastic resource for people with disabilities. This site will help you make sure everyone that might want to use your pages will be able to do so.
  • Free web design course - basics, layout, free tutorials, case studies, how to guide, examples (Web Design from Scratch). "Web Design from Scratch is a practical training course in web design for everyone interested in creating effective web pages. Web design is a complex discipline that involves a wide range of skills. I notice that some of the most basic skills are lacking in many web site designs. Those basic skills are quite simple, but can be hard to gain because of a lack of teaching material. That's what WDFS aims to solve!" The site is quite extensive, and I haven't finished reading every section yet, but it is interesting and insightful, and I feel I've learned a lot. There is very little "how-to," but plenty of "why."
  • css Zen Garden: The Beauty in CSS Design. "A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page." It's really pretty, and you can look at the style sheets to see how they do it.
  • A List Apart: A List Apart, "For people who make websites: A List Apart Magazine (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards." The writing is wonderful, the design is instructive. This is going to be a regular read for me.
  • css/edge. "css/edge is intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. It does not exist to present or explain safe cross-browser techniques; in fact, almost the opposite. The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations." While this sounds like something too esoteric for my minimalist needs, I've learned a lot from the material presented here, and the links have been very useful too.
  • Philip and Alex's Guide to Web Publishing. This is the reference I wrote about in my Sunday, November 13, 2005 post.
  • useit.com: Jakob Nielsen's Website. This is a must-read for anyone using the Internet. He has a helpful new article on blog usability mistakes, as well.

No comments: