It's been a while since posting something useful, but I thought I'd recommend a site that provides both visual and written explanation for CSS layout basics.
What I enjoyed most about discovering Matthew James Taylor's site was that he shares his two passions, art and web design, in easy-to-understand and relevant terms. The site is a nice "go to" resource for new designers or developers searching for more than just plain-text or academic explanations. For example, Matthew has a number of popular CSS layouts very well documented with visual guides that are sometimes missing from the vast majority of tutorial sites.
Each layout example can be further explored and studied just by reviewing the source code of its url. I like using Google Chrome's "Inspect Element" (right click, choose "Inspect Element"), or Firebug (choose "HTML") to study each tag or class and to give myself a better understanding of the underlying principals. However, the descriptive explanations of the how's and why's are an added benefit.
The Matthew James Taylor site also contains articles and insights into topics such as SEO, link sourcing, tabs and menus, and even an article on Dreamweaver's CSS rendering bug. And for a bit of lite inspiration, I especially appreciate his artwork gallery that's sure to be a hit with you Illustrator gurus.
I'm hoping this site proves useful to someone. It's difficult to know exactly what benefits the entire group versus smaller constituencies, so let me know if anyone found Matthew's site worthy of this notable mention.
Position is everything. Yes, this does happen to be the name of one of my favorite CSS sites, however, understanding the concepts and best practices of positioning using CSS is most often misunderstood and extremely important for good page layouts and innovative designs.
This weekend's reading will be a bit challenging to new learners, but I'm confident the articles selected, and the sites publishing them, will be very useful for long-term benefit. I'm also including an article from 2000 by John Allsopp that addressed the perception challenges designers faced concerning stylesheets, standards, and the web as "we know it" versus "as it should be."
Enjoy.
Lite reading:
Three excellent resources:
And from John Allsopp courtesy of A List Apart:
For this weekend's lite reading, I thought I start with actually using one of our most indispensable open source tools, Firebug for Firefox. To put it simply, Firebug, as well as Firefox's web developer toolbar, helps me help myself. True, IE also has a web developer tool set, but Firebug just seems more user-friendly.
I understand each of us find the tools of our trade through different circumstances and learning environments, even spending considerable amounts of time and money to try a new application only to find it wanting. I love Coda and CSS Edit, but I can't use them on my PC. I adore Notepad++, but I can't use it on my MacBook Pro. So Firefox and Firebug fills the void and helps me preserve hair folicles. Firefox, Firebug, and the web developer toolbar should be part of any one's arsenal of CSS democracy.
I'm including a few links to help new learners with Firebug, but I'm also providing a link to a wonderful article from A List Apart that speaks to why we use CSS to reach our lofty design goals, and a nice resource site chock-full of CSS goodness. And so, without further embellishment or bloviation, enjoy the weekend reading.
For Bookmarking:
Holy CSS Zeldman
And for the hearty among us:
In Search of the Holy Grail
Every Friday, I'd like to have someone suggest some easy reading that everyone should look over in their free time over the weekend (ha! free time!). I'll start off with a few links this week, but it would be great if someone would volunteer to post some stuff next week. The idea here is to keep it light so that we don't have to melt our brains. The goal should be something that will either prepare us for the coming week or something that will help reinforce that which we learned in the previous week.
For this week, I've selected three articles from A List Apart. Since we're first getting started, I selected articles that focused on core basics or concepts.
- 12 Lessons for Those Afraid of CSS and Standards
- Separation: The Web Designer's Dilemma
After you've read these articles (they are short and easy to read), post your thoughts or comments here. It will be a great way to start off our discussions each week as well.
Oh, one more thing -- if there are things you don't understand in any of these articles, just skip over them. No reason to get hung up on details just yet. We just want to start getting a feel for the concepts.
It's time to get over your fear of code.
If you're going to learn CSS, and if you're going to use it, you'll have to become comfortable with the prospect of reading and writing code. Now before you run away screaming, I'll tell you that CSS code isn't scary at all. It's actually rather straightforward and reads like normal english. It's a heck of a lot easier than HTML, and really, the only "hard" part is learning the grammer and punctuation.
Tools like Dreamweaver do have specific features that allow you, on some level, to work with CSS without having to write any code yourself, but I think you'll quickly come to realize that often you can decipher and edit code much faster and more efficiently when you're working directly with the code itself, and not some panel or feature. In my own experience, I rely on BOTH -- tools like Dreamweaver to help me visualize certain things, but at the same time, I'm not afraid to look at the code and copy and paste or make quick text edits just to save time.
So before we start diving into CSS, it's important to accept the fact that you will be doing some level of writing code. Deal with it. Get the fear out of your system now. You'll only benefit from it.
We're constantly caught up doing the things we NEED to do, but all of us also have a list of thing we WANT to do. Often, the things on the WANT list include learning new things. And that's what this group is all about. By joining together as a community, by taking on a single topic together, and by committing to learn something new, we can establish a goal and reach that goal.
If you're a designer, you know that in the past, there have been classifications like "print designer" and "web designer", but in reality, a designer is just that -- someone who designs. Someone who enables communication visually. It's rare that a designer today is called upon to work in just one medium. Rather, designers today are required to apply their keen eye and talents towards multiple mediums. More so that ever, designers are required to create and publish content on screens which include computers, digital ad displays, mobile phones and devices, and beyond.
To make it possible so that content could be displayed on multiple devices, some very smart people have defined a series of standards. Often referred to as "web standards" (although the concept obviously extends beyond just the web), these technologies enable designers to create and publish content that could be displayed on numerous devices while still taking advantage of what these technologies have to offer, such as search, scalability, editability, and most importantly for the digital medium, compatibility with dynamic workflows (auto page generation, text generation, etc.).
CSS, or Cascading Style Sheets, is a web-standard technology that enables all of this, and over the years, more and more designers have learned to use CSS in their work. Most designers have probably been told at some point that learning CSS would be a good thing. But unfortunately, for many designers, learning CSS has always fallen into the WANT list and not the NEED list. The fact that learning CSS also involves learning code on some level, it's easy for a designer to find excuses not to learn CSS.
That changes today. If you're a designer, make a commitment to learn CSS. By joining this group, you'll set goals at your level, and you'll be joining a group of others who share similar goals to yours. No one will talk down to you or snicker at you when you ask silly questions or when you struggle writing your first line of code. You'll share your experience with others, and before you know it, you'll learn how to design web content using CSS.
I know this because I'm going through the exact same transition, and I just completed my first website design using CSS entirely. It wasn't easy at first, but in the process, I've expanded my skillset and I hope to share my experiences with you along the way. Hopefully, we'll have fun in the process as well (learning HAS to be fun).
So are you in? Join the CSS Learning Group today!
Social By Design
others...