One of my favorite new tools is Sprite Cow. Sprite Cow helps you get the height, width, and background position of different sprite images within a larger sprite sheet. It is really easy to use and works much like a lot other graphic kinds of tools (i.e., Photoshop).

You just open your image in Sprite Cow, use the marquee tool to select your sprite, and Sprite Cow generates the CSS you need for height, width, and background position.

I had used simple sprites in the past, but was challenged by a colleague to make sprite sheets to cover the majority of background images for a site to improve performance. Sprite Cow has made it very easy for me to do this. I just build the sprite sheet as I go and use Sprite Cow to do the hard work. No more manual labor in Photoshop to determine these 3 values.

Sprite Cow is a side project from the guys at The Team. They created it to solve their own problem to create a quicker and easier process for this tedious, repetitive, and time consuming process. Then they turned around and shared it with the broader community. High five!

It is always great when you find great tools. And the timing of it coincided with my decision and desire to build more complex sprites back in June.

Shout out to Chris Coyier for mentioning Sprite Cow on CSS Tricks.

UPDATE: Chris Coyier released a screencast today (November 16) on Using Sprite Cow. Check it out.

Fast forward to this year. After several career changes, I am now working with CMS frameworks that do not give me the control over the code that I had in the past. At times, it can be a challenge to find hooks to target specific element with CSS.

Last Spring, I was reintroduced to CSS combinators. These powerful little statements are now part of my daily workflow.

Sidenote: I read this article around the time that I started using combinators. I found it to be a great resource because it had a handy reference to browser support.

Conditional CSS?

One of the powerful ways that I have started using combinators is to create “conditional CSS.” I had a project where the business unit wanted to add headings to their body content for recipes. They wanted to add “Ingredients” and “Instruction” headings to make the content more clear. At that time, all the ingredients in the ingredient listing were bold. Now that they were adding the headings, they wanted those list items to be normal weight.

The challenge. The headings were going to be added to new articles and then slowly added to existing articles on the site. Could I come up with a solution that would only be implemented on articles with the new headings?

Thus the need for “conditional CSS.” I found my solutions by using the adjacent sibling combinator (E +F) and the child combinator (E > F) to target the elements the ingredients listings and change the font weight to normal.

.recipe-page .body h4 + p > b {
font-weight: normal;
}
.recipe-page .body h4 + div b {
font-weight: normal;
}
.recipe-page .body h4 ~ span {
font-weight: normal !important;
}

I had to come up with several declarations because different editors had entered in the content differently.

Another Example

On another project where I needed some conditional CSS was showing the comment count for an article.

The challenge was to write CSS to cover several different conditions. Some comments would just show a comment count. Other listing would include a rating or there might be ratings without a comment count.

The business unit also wanted to have a link to the comment area for articles that did not you have a comment or review. The developer needed to have that link always be always present in the code so I had to come up with a solution to hide the link when there was a comment count  and/or rating was present. When there was not a comment, there would not be any code for the comment count. So showing the link when there was not a comment was easy.

Here is my solution to hiding the comment link:

The Comment Block on the page

The HTML

The CSS

So I am wanting to hide the div with a class of “rating-buttons” because users have already commented on this article.

.recipe-rating-comments-count .rating + .rating-buttons >
.write-comment, .recipe-rating-comments-count .comment-counts-text + .rating + .rating-buttons >.rate-review,
.recipe-rating-comments-count .comment-counts-text + .rating-buttons > .rate-review,
.recipe-rating-comments-count .comment-counts-text + .rating-buttons > .write-comment {
display: none;
}

Using a combination of adjacent selector and child combinator, I can target the different conditions in which I want to hide the “Write a Comment” link.

I also used a couple of combinations of adjacent sibling combinator and child combinator to add different margin depending on what elements were present. For example, I wanted the ratings to have more margin at the top when a comment count was not present.

In Closing

I spend the majority of my time working in Drupal. Both of my examples are not from a Drupal environment but I could share more. One of the ones I use most often is Panel Separators. I can use the adjacent sibling combinator to use target the class of the pane that precedes the panel-separator to target it for styling.

Just like a lot of things in life, once you are aware of something, you begin to see it everywhere. Or is this case, I keep seeing problems that these combinators provide a great solution for.

Special thanks to Chris Coyier, who encouraged me to blog about this when I shared the idea with him at Front End Design Conference.

It is a small, yet top shelf event with leading voices from the industry. The atmosphere that makes it easy to meet other Web professionals.

Each year I leave the conference inspired in my work and with new connections to other designers and developers.

Making a New Friend

The highlight of the weekend was getting to know Jason Weaver. I first met Jason when he commented on one of my blog posts 2 years ago. We follow each other on Twitter and have an occasion conversation.

We split the cost of a hotel room and had a blast hanging out and getting to know each beyond throughout the weekend. We capped it off by visiting the Dali Museum before parting ways on Saturday.

Rooming with Jason made the conference much more enjoyable experience.

The Conference

We were welcomed to The Palladium by a giant banner flying above the steps leading to the auditorium.

It was a great venue with a comfortable auditorium and a coffee house type space where we enjoyed a casual breakfast and hang out during the day. I spent most of the breakfast hour catching up with different people that I have met over the past 2 years.

The Discovery Process

We kicked off the day by getting a look into the business of MindComet. With a lot of energy and enthusiasm, James May and Stephanie Fields shared about the process of discovery. It was a great behind the scenes discussion of the strategic role of discovery.

They shared how MindComet takes the time to get to know their client’s business and users so they can make better informed decisions in the design process. This leads to happier clients and more successful projects.

View their presentation and engage in a conversation

A Mindset for UI

Ryan Singer from 37 Signals challenged us to take a different approach when looking at an interface. Ask, “What’s this screen telling me?”, not “What’s on the screen?”, which is what we normally ask.

Ryan had us look at an interface for a tracking project time, something most of us have encountered in one form or another. He shared different principles on how to make an interface more obvious. As he went along, he mocked up a new interface giving us concrete examples of the principles he was sharing.

@rjs “Make design perform a job, not just make an interface look nice.”#frontendconf

July 22, 2011 9:49 am via Twitter for iPhoneReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

Reduce the cognitive load required to get to the point of information using design #frontendconf

July 22, 2011 9:44 am via Twitter for iPadReplyRetweetFavorite

@lorielue

Lauren Martin

The bottom line: eliminate obstacles between the user’s intention and the user accomplishing their goals.

jQuery Bling

Doug Neiner was next up speaking on the topic on jQuery. Doug shared some good tips about working with JavaScript/jQuery. He walked through an example of displaying Dribbble shots using the Dribbble API and jQuery.

“ugly working code always trumps pretty, broken code” — @dougneiner #frontendconf

July 22, 2011 10:54 am via Twitterrific for MacReplyRetweetFavorite

@miklb

Michael Bishop

Responsive Web Design

This is the session I was really excited about and it did not disappoint. Ethan Marcotte, author of Responsive Web Design, shared about the responsive approach to modern Web development.  I believe this approach will form the basis of how we make Websites moving forward.

Rather than just rehashing what is in his book or the article that started it all, Ethan shared about his experience working with the Boston Globe.

Ethan showed how his team has integrated this approach into their process as they reshape the Globe’s online presence using a responsive approach. The talk really fleshed out the ideas from his book and took the conversation further.

I also enjoyed getting to talk with Ethan at the after party. I found him to be a very humble person that listened and took an active interest in me as a person. Part of our conversation centered around my work at a large media company. It was fun to compare it to his experiences with the Globe.

I really appreciated him taking the time to engage me on such a personal level. I think that is one of the best things about this conference–the personal interaction with the speakers.

The Place of Web Templates in the Web Design Business

Brandon Jones challenged us to consider the role that templates or custom themes can play in the Web design practice. He believes it can help us to provide affordable solutions for smaller clients who cannot afford custom design.

The templates can serve as a foundation that we can build upon to provide a custom solution to our client’s problem. I liked this approach in that he encouraged us to not just use the template out of the box, but to build on top of it.

I have considered using a custom WordPress theme for some projects that have a smaller budget. The advantage is that many of these come with functionality built in that is currently beyond my skillset and would take time (money) to build.

I believe there is a place for using templates and custom themes to help smaller businesses create a great online experience to engage their audience.

The Wonderful World of Pseudo Elements

@chriscoyier makes CSS so entertaining. #frontendconf #csspseudoelements

July 22, 2011 2:48 pm via Twitter for iPhoneReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

I think Chris Coyier is one of the most entertaining speakers that I have seen. I love his excitement and enthusiasm. He shared a lot of great solutions using the :before and :after pseudo elements. He showed us how to generate CSS shapes, create a horizontal parallax without multiple divs, and lots of other cool stuff. Go look at the PDF of his presentation.

View Chris’s presentation

Chris’ article A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

Explore the Possibilities

Allison House was our final speaker for the day. Her talk was less on the practical side and more of a challenge to go out and experiment. This is an exciting time on the Web. We have a lot of great tools. The challenge is to learn how to tell stories (narrative) with these tools. This is largely unexplored place.

I enjoyed her examples. It is one of those talks that helps you to start dreaming. I have been thinking about narrative and have explored a couple of ways to bring narrative into experiences I have designed. I really enjoyed talking with Allison at the after party. We continued the conversation and I enjoyed her insights.

Fun, Fun, and More Fun

I really enjoyed getting to know people at the Beer Meetup on Thursday night and the after party on Friday. I met a lot of new people and had great conversations. I met one guy who owns an ice cream franchise and just got into Web design 2 years ago. It is a lot of fun to hear each other’s journeys.

I also enjoyed getting to catch up with friends and other people that I have met through previous conferences or through different working relationships over the past two years.

Takeaways

Here is what I took away from the conference:

• I want to do a responsive Web design. I have read about it, discussed it and thought about it some more. But I just need to get my hands dirty and try it. It is the only way to learn it. I believe this site will be that project.
• Consider using templates or custom themes as a foundation for freelance projects with small budgets. I think it makes good business sense and could allow me to take on some projects with those who could not afford a custom solution.
• Experiment with pseudo selectors. I had already implemented a solution last week for styling ordered lists.
• Write a blog post about using CSS selectors. I shared with Chris Coyier an idea to write about my experiences using CSS selectors like adjacent and child combinator. He thought using real world examples make a great read.
• Experiment. Look for ways to experiment. Don’t be afraid to redesign this site. This site is a platform for me to have fun and try new things.

My post about 2010 Front-End Conference

Dan Denney’s Flickr Set (Dan is conference organizer)

Sketch Notes

Once again, I decided to try sketch note taking. It is a great exercise to push myself. I think I did a great job capturing the content in a form that helped me (as I used it to help me write this post). Click on the thumbnails below to see a larger image.

First and foremost, a Web designer is a problem solver. A client comes with a message they want to communicate, information that they want to share, or a product or products that they want to sell. My job is to find an appropriate visual solution that will tell their story and connect people with the service they are offering or selling.

I craft a solution by visually organizing the text, images and video on the page to communicate my client’s message. I also craft a visual personality that helps supports the communication of that message.

A Hybrid ???

I have always assumed that a Web designer was one who not only came up with a visual design but also had the skills to build that design. My thinking is shaped by the fact that I first got into Web design by learning HTML so that I could create a Web page. This was back in the late 1990’s and visual design on the Web was in its infancy. Slow connections meant that you had to be creative to add graphics to a page and make it efficient to download. So I learned to code in HTML and later in CSS so that I could bring my creations to life.

Hence, I have always thought that it served a Web designer well to know how to build his or her creation (read a recent post on the subject.) There are many times when I will not even do a design comp but jump right into writing HTML and CSS and create as I build. I know what graphics I want to create and I prefer doing that in Fireworks. As I code, I begin to craft the design and start adding in details that make the design really come to life.

It is only recently that I have come to realize that many consider me unique. Hybrid is one of the words that someone used to describe my skills. I never thought of myself that way because most of the designers that I follow code their designs.

What are your thoughts? What word or words do you use to describe the work you do?

A talk from SXSW on the clever things designers put in their design to add pleasure to the experience. I listened to the audio but look forward to viewing the slides since this was a very visual presentation. I would like to think more about the ideas presented here. It goes on usability to adding value to people’s experience and I am really motivated by that in design.

I am currently working on a new design for Campus Crusade’s Summer Mission Projects site. It is an exciting project because it is the first to be a total package. Our team is working on the promotional videos, print brochure, sticker and Web site. The video has been the lead player in determining the common design thread that will weave through all the pieces in the package.

For the Web site, I am using “real-life” elements of a desk and it’s contents and combining it with illustrations that create a fantasy world within the video.

As I have progressed with the design, the headings typography was begging to be a scripted style that fit into the theme of a sketchbook on a desk. Now I was faced with the problem of how to create those headings in a scripted font. I decided to use image replacement for navigational elements. But as I thought about it, sIFR seemed to be a good solution for the content headings instead of image replacement.

I have never used sIFR before and this seemed like the perfect opportunity to give it a try. I found a tutorial, This is How I Got sIFR to Work. The author’s intent was to distill the “official” documentation into a simplier form. I give him kudos on accomplishing that intention.

I was very excited tonight when I finally got it to work. I had been working with it for a couple of hours last week but never had success. Now I am not always the best at following instructions so tonight, I decided to go back and go through each step. (I never follow the owner’s manual of a new electronic toy. I would rather play with it and figure it out myself.)

One of the first things I found was the swf file I created last week did not work correctly so I went back and created one according to the tutorial. Also the first time I was working through the tutorial, I did not download the latest sIFR from the place the author suggested. So as I had worked through his tutorial, several things were not matching up. That had really been frustrating. It was so much easier to have the right version and be seeing the same things the tutorial was describing.

I am so glad I stuck with learning. I think this is an appropriate and smart solution. I will not have to create images for every heading and it was also cut the download time.

I found this via The Rissington Podcast.

I enjoyed his seminar. It was a good review of the material I had read in the book. I am looking forward to rereading his book and applying more of it to my CSS skills.

The second seminar was Understanding AJAX by Jeremy Keith. I knew a little bit about AJAX and this seminar was a great introduction to the concepts of AJAX. The most helpful thing I got out of the seminar was a strategy to use AJAX to enhance a site but not to use it as an “all or nothing” approach as many sites do today.

Jeremy is applying the principle of graceful degradation from CSS and applying them to AJAX. I am really intrigued by this strategy and want to consider applying it to an AJAX solution I have considered for GodSquad. You can view his presentation online.

I also enjoyed getting to know some of the other conference attendees. One guy works for the Orange County Library system, one with the Census Bureau in D.C., and one of the attendees works for Central Wyoming College (I don’t believe he is responsible for their site current design). Most of the people I met are more on the programming side of Web development. I am looking forward to the start of the conference tomorrow.

[tags]refresh06, refresh orlando, andy budd, jeremy keith, css mastery[/tags]

Tomorrow I am taking 2 crash courses, CSS Mastery with Andy Budd and Understanding AJAX with Jeremy Keith. Andy’s book on CSS Mastery is one of the best books I have read on CSS. I am looking forward to hearing from him and practicing more of what I read in the book but have not had time to go back and do.

I am hoping to blog about my experiences at the conference this week. A friend recently cited an article on How to blog a Conference. It is written more for someone who organizes the conference but there are some good tips that even an attendee can use.

Today, I decided to try again using a different CSS strategy. I decided to try to do some absolute positioning to solve some of the problems I was having with my first try. IE6 was giving too much margin or padding to the design and was messing up the curve on the navigational elements. As I tried the absolute positioning today, I was able to solve that problem. I have one other problem of difference in rendering in browsers that I need to solve but I am optimistic. I had “thrown in the towel” but now I am picking it up and giving it another try.

I think I tend to forget how much time I spend working out the CSS each time I have done a design in it. I have done 4 different sites in XHTML/CSS and two of the sites I have done a second design so I have done a total of 6 designs that are tableless. I really like using CSS but it does add a lot more hassle at times because browsers render it differently. I hope IE7 does a better job and makes life a little bit easier as far as designing for it.

[Sidenote: When I think about the book title, I think about becoming a CSS Master which makes me think of Star Wars and Jedi Masters. At this time I am still an apprentice.]

Last week, I started working on changing GodSquad.com from using tables for layout to CSS. I have been wanting to move in this direction for quite awhile now and thought I would do it as part of a redesign of the site. But I continue to be stumped in that creative process so I finally decided to move the current design into CSS.

As I was working on a CSS design last week, I ran into some trouble where the site rendered correctly in Firefox but not in IE6. Reality is that most people are still using IE6 so I have to come up with a design that works well in it. I was really frustrated. I had some inkling that the problem was caused by the way IE renders “padding” but I was not sure I am far enough along in my CSS skills to diagnose the specific problem.

I started thumbing through Andy’s book and reviewed what I had read. I have not been able to use the knowledge I had gained in reading the book in May. I had to turn my attention to working on support for our ministry at the end of May and beginning of June. Then at the end of June, I took a month of classes through Campus Crusade’s Institute for Biblical Studies. It was good to review the book because I realized that I could do a lot cleaner coding with the GodSquad design I was working on. I came up with a plan to do the structure a little bit differently. And I learned some tricks that would allow me to change the layout of a page using the body property.

But I still did not have a solution for my main problem. But I did some tinkering and got it to work. I think it might have been Spirit inspired as I had prayed about my problem and asked God to help me with a solution.

All this is to say that it just brought me back to the fact that Andy’s book is one of the best that I have seen on CSS.

And I have not been disappointed. I have only read a couple of chapters of the book, but it has already been very helpful. The first chapter alone was worth it for me. I went back and rewrote the code for a site that I have been working on. Because I had a better grasp of some foundational principles, I was able to implement better coding which cut down on the amount of code and needless div tags. I appreciated all the tips that Andy gave on structuring, planning, organizing and maintaining stylesheets. I learned so much from only 25 pages. And I was able to immediately implement what I learned.

This morning I read the second chapter on the visual formatting model (box model and positioning) while waiting for new tires to be installed on my car. I was restless with ideas as I gained a better grasp on these foundational concepts. I can’t wait to start using this knowledge to build better layouts and implement better solutions. I just barely got into the next chapter on background images and image replacement. My mouth is watering with anticipation of what I am going to learn next. I can’t wait to learn more and using it in practice.

This is the most practical book on CSS that I have read or looked at. I have tried to work through some others books that are mostly exercises. I gain some insights here and there. But this book has taught me so much and really filled in my foundational knowledge so that I can take my CSS to the next level. This is going to be one of the books that stays on my shelf for quick reference.