My first encounter with Aaron was through his book, Adaptive Web Design. Several people that I respect in the industry had recommended it and I bought it shortly after it was released a year and a half ago.

Want to work with @aarongustafson? if you are a front end gal/guy here’s your chance: ajo.bz/j4/13912

— Veerle Pieters (@vpieters) August 13, 2012

When I saw Veerle’s tweet in August, I was instantly interested. Aaron had gained my respect through his writing so I knew that I wanted to explore this opportunity to see where it would lead. I was thrilled when they expressed their interest.

My respect for Aaron and Kelly continued to grow over the next four months as we interacted over the phone, email, and finally face-to-face in December. They run a solid business and work on some exciting projects. Each time I talked with them, I knew that I wanted to be a part of it.

My family will be relocating to Chattanooga, Tennessee later this spring. We are all excited for the new chapter in our lives and look forward to falling in love with our new home later this year.

I am still working on building a microsite that tells more of the story. It has been fun to retrace the steps and see God’s leading in our life.

Read Aaron’s introduction on Easy Designs’ blog

For those of you who don’t understand the post title, it is a reference to the song, Chattanooga Choo-Choo. It is a song I have been thinking about a lot lately. We visited the attraction when we visited Chatt in December.

Today marks my final day at Bonnier Corporation. It has been a great 2 years of working in this fast-paced environment where I have grown exponentially in my skills as a front end developer.

It has been gratifying to work within an agile process. The projects ship within days or weeks of the time that I have touched them.

I have appreciated working with so many smart, talented, and hard working people. I respect that our team cares about doing things right and coming up with solutions that are solid.

So Many to Thank

• James Winslow – I worked with him the longest. He has been an incredible teammate. We have made a lot of magic together for SAVEUR. It is hard to express appreciation for someone who you have worked so well with and helped bring out the best in you.
• Anique Halliday  (online producer of SAVEUR) - What a wonderful person to work for (with). She involved us in early in each project and valued the input that we brought to the table. She was also quick to give praise. She really created an environment that motivated my best work.
• Emily Jorgensen – I really liked working with Emily. She is a great project manager who empowers the team their best. She brings a lot of great insights into a project. And she makes things a whole lot more fun.
• Helen Rosner and everyone else on the SAVEUR team - You guys have built a great brand and it was a privilege to be a part of your success.
• Bridget Gigi, Kathy Allender, Melissa Wykle, Matt Law, and Kyle Plonchak – I have really enjoyed working with Parenting over this past year. This is a great team helping to build Bonnier’s most popular brand.
• Michellina Jones, Trey Dear, Carol Henry Lee, Rochelle Free, and Erika Relic - Our project managers rock. It has been a pleasure and a joy to work with all of you.
• Anne Easterling, for being my partner in crime and for fielding so many questions from me. I learned a lot working with Anne and always appreciated her professionalism.
• Cody Craven – Thanks for being such a great teammate. We made a great team working on projects for American Photo, PopPhoto.com, PopSci.com, and many others. I appreciated that he understood enough about what I need in the code in order to pull off my part. He set me up for success time and time again.
• Justin Wine, Keith Ort, Jim Elder, and Riad Kilani – I interviewed almost all of you and I am so glad that we added you to the team. I appreciate the hard work you put in day in and day out. Thanks for another pair of eyes to help me when I am stumped. And thanks for seeking me out so I could help you. Special thanks to Jim who has helped me improve my JavaScript skills.
• Bonnier designers – There have been a lot of different ones that I have worked with. I have really enjoyed implementing many of their designs, especially on SAVEUR.
• Sherilyn Keaton, Mary Jo Morelly, Rafael Sardina, and Chris Hill - I appreciate your leadership and thanks for giving me an opportunity to be part of this team. I appreciate the warm send off you have given me.
• Everyone else on the development team that I did not mention by name – It has been great working with you guys. I appreciate your hard work and commitment to doing it the best way possible.

Sampling of my work over last 2 years

SAVEUR

SAVEUR Video Festival – The last project I worked on for SAVEUR.

SAVEUR Cookie Advent Calendar – I wrote a post about this project a couple of weeks ago. Check out the 2011 version, which was also a lot of fun to work on.

SAVEUR Food Blog Awards –  I applied a CSS trick to make a more elegant solution on the voting page.

SAVEUR Mobile Site – I built this site using Mobify. The layout has a flexible foundation so it will work across a variety of devices although the scope of the project focused on iPhone, which is the largest audience on mobile for SAVEUR.

Parenting

I worked on a variety of different projects for Parenting this year.

 Digital Days

Digital Days – The first site that I used Sass and modular CSS architecture.

American Photo

One of the projects I am most proud of. We built this site under an “extremely aggressive” timeline (words of my project manager). I built my part of the site in a week. It was a great job of teamwork from everyone involved.

Science Illustrated

This project stands out because of the rich visual design. I had a lot of fun executing it and making it happen. I applied a trick that I learned Roger Johansson for styling ordered list items.

Sound + Vision

This is the second big redesign project I was involved in at Bonnier. It was the first Bonnier site I used font embedding. And there were a lot of fun challenges to solve to make this one happen.

PopPhoto

This was my first major project at Bonnier. I really cut my teeth on this one. I really enjoyed working with the development team on this one. It was a great team effort.

So What’s Next

Come back next week and I will share with my next great adventure is going to be.

“It’s a dangerous business, going out your door. You step onto the road, and if you don’t keep your feet, there’s no telling where you might be swept off to.”

I am a big Tolkien fan. But I did not discover him until I was an adult. Although I enjoyed Sci-fi as a kid, I was not very interested in fantasy literature. I finally read through The Hobbit and The Lord of the Rings after I saw Peter Jackson’s first film. I fell in love with the world of Middle Earth, the characters, and the fellowship forged through common adventures.

I saw The Hobbit movie this past week and re-read the book. I am a lot like Bilbo. I like comfort and like when things are “normal.” I am glad for the certain routines that bring structure to my life. And to be honest, I am more prone to choose safety than to step into the uncomfortable ground outside my comfort zone.

But my heart is also drawn to adventure. So much so that I have stepped out of my comfort zone because the pull of adventure upon my heart was too strong to resist. I believe Bilbo is the same way.

I don’t know that I have ever really considered myself a “courageous man.” It has taken the observations of others to help me to stop and consider that the direction I am moving is courageous.

So often the reason that I move out of my comfort zone is because there is a dissonance in my heart. I am not the kind of person that can live with that. Other times, I just have a strong desire to do something. The call of adventure pulls on my heart. It is why I found myself living in Hungary 15 years ago.

Another reason why I can have trouble seeing myself as courageous is because I spent a lot of time in a culture where everyone was courageous. For 16 years, I was part of a Christian ministry where everyday was a faith adventure as we depended upon donations from churches and individuals to put food on the table. We were constantly challenged to respond to the mission and go new places and try to solve problems that were not easy to solve. When you are surrounded everyday by courageous people, it can be easy to take that approach to life for granted.

But I realized recently, not everyone is willing to pay the price and to act courageous to move in a new direction in their life.

Let me pause a second to set the record straight. I don’t want to come off as someone who has it all figured out or has it all together. I don’t always act quickly. I can let fear keep me from moving forward. To be honest, when I look at my life and see all the ways that I have acted courageously, I am in awe. I cannot believe that I have done many of the things I have done. How could that be me?

Reluctant Adventurer

Just as Bilbo, I feel like a reluctant adventurer. I am tempted to stay in the comfort, safety, and certainty. But for me, I cannot live very long with the dissonance in my life and “have” to act and seek change.

I share this because I want to encourage others. Step out on the road. Choose to have courage. Seek to change your life when you sense it is time to move on to something new and more challenging. It is worth it.

One of my scariest adventures

Three years ago, I took one of the most courageous steps of my life. I left an organization that I had been with almost 17 years as an employee and had been involved with for 6 years as a volunteer before that. I really liked my job. I had a lot of friends there. I loved being part of the cause. When I started, I thought I would be there my entire career.

But God has other plans. He put other desires on my heart. The dissonance built. I had to move on. And it was not quite how I expected. I had hoped to find another job to jump to. But that was not happening. And for a variety of reasons, it was time for me to go. Without another job, without a place to land. With a wife and three kids, that was incredibly scary. But I drew courage from my relationship with God because I knew He was in control and I could trust Him.

Things did work out. It took a bit longer than I had hoped to get a full-time job. We were blessed with a great severance and I was able to pick up some freelance work to sustain my family. I eventually landed at Bonnier Corporation, where I have spent the last two years. It has been a challenging environment and I have grown exponentially in my skills.

I share this to prove my point. It is worth it. Yes it was difficult road. It took me far beyond the realm of comfort and safety that I would have chosen. But it was also rich and exhilarating to follow my heart and seek the work experiences I had longed for.

But my story does not stop there. I have stepped out on the road again. In just a couple of days I will leave Bonnier for a new opportunity. I am really excited about what is next. My patience and persistence have paid off and I believe I have found a dream job. This step will involve relocating so it is a pretty big deal. So there is a lot of adventure ahead.

I start my new role on Monday. I will be working remotely from Orlando till later this spring. I will be sharing more about it next week after my new employer has had a chance to share the news.

Takeaway

Be courageous. Chase your dreams. Go for it. Don’t let fear stop you for making a change in your life.

I just started reading Seth Godin’s book, The Icarus Deception last night. The world has changed. To succeed in today’s brave new world, we need to act courageously. There is so much opportunity out there. This book might be a great resource to help you get started.

See you on the road.

I started thinking about the word architecture this morning. What is architecture and what insights can thinking about the meaning of the word inform my thinking about working with CSS?

Here are my initial rough thoughts. I hope to continue to expand on these thoughts in some form later.

• it is designed
• it is a carefully conceived plan that is meant to be implemented
• a problem exists that must be solved
• it is a conceptual model
• it takes thoughtful planning
• it implies structure and organization
• the goal is to create an organization or core concept around which a system is constructed
• it is about coming up with an agreed upon system
• it is about intention and purpose
• it involves both art and science
• Many players are involved in building a piece of architecture. They must all agree upon the common plan and stay committed to that plan as they implement.

I am going to go ahead and expand on a couple of these things.

A Problem Exists

What is the problem? Andy Hume helped me to define this in his talk, CSS for Grownups. The problem is that CSS is very powerful tool. It has a lot of flexibility and few constraints. The problem is that CSS gets complex very quickly and becomes increasingly more difficult to maintain.

This is a problem with a single developer. It becomes a more complex problem when a team of developers is involved. I saw this problem when I was working alone and more so when I joined a team that did not have a system in place.

• Where do you add new code?
• How do you write your code in such a way that it does not have to be overridden multiple times?
• How can you make it more efficient and easier to maintain over time?

Andy proposed that the solution to this problem is to architect and structure our code to make it more maintainable over time. The goal is maintainability. In order to do that, we need to introduce constraints and build a system that everyone understands and is committed to implementing.

So the solution includes thought, planning, and agreement in order to achieve the goal of maintainability.

Thoughtful Planning

More work is necessary on the front end of the development project to stand back and look at the big picture. It is so tempting to just jump in and start coding up a design without thinking through how all the parts are related, connected, and vary from each other.

Planning is not always as much fun. It can be really hard work.

As I have embraced a more intentional and purposeful approach to writing my CSS, my workflow has changed. I spend much more time reviewing mockups. I have started printing them out and marking them up.

I am looking for patterns and common elements throughout the site. I stopped focusing on individual pages and started looking at modules or components. Taking this approach helped me to be more efficient as I implement a design.

More to Come

I have been thinking about writing about CSS architecture for awhile. (I only started calling it that recently. I like the term because it does a great job of describing what it is.) Finally, I have gotten some thoughts out of my head and into a post. And I believe that there will be more to come.

I hope to follow through and write more this year. I always have a lot of thoughts and ideas swirling around in my head. I want to become more comfortable with writing shorter pieces and not worry if my thoughts are not yet complete.

Resources

This is not a comprehensive list but a good place to start when thinking about CSS Architecture. These are the sources that have helped shape my thinking and continue to challenge me to put this into practice.

• SMACSS – A style guide and approach toward building your own system for CSS by Jonathan Snook. This is the thing that got me all started thinking about the importance of CSS architecture.
• CSS for Grownups – Excellent talk by Andy Hume that really convinced me of the importance of approaching CSS with more thought and intention.
• CSS Architecture – post by Phillip Walton that lays out some great goals for CSS architecture
• Harry Roberts – Harry is a front end developer in Great Britain. He has done a lot of writing about CSS architecture that continues to challenge me and help me go deeper. He also has developed a framework, Inuit.css that I need to dig deeper into.
• OOCSS – Nicole Sullivan is the first person I know of that started writing and talking about the need for a CSS architecture.
• About HTML Semantics and Front End Architecture – great thoughts from Nicolas Gallagher. He has also written a style guide for writing idiomatic CSS.
• BEM Methodology – more great thoughts on approaching CSS architecture

On December 1, the SAVEUR team launched the 2012 Cookie Advent Calendar. There is an interesting backstory to this project that I believe is worth telling. It highlights the importance of learning from a project that was not as successful as you hoped and having the courage to believe in a concept and try again by applying lessons learned from the first attempt.

Last year’s version is an example of a large-scale project that was not a success. It was beautiful. It was clever. But it was under-visited and performed poorly. We poured a lot of labor into something that did not live up to expectations.

Despite this setback, the SAVEUR team believed in the idea and made three intentional changes that has led to a more successful product this time around.

• All the cookie recipes were clickable on day one. Last year, we would “unlock” a new cookie each day so you could only view the cookie for that date or earlier. So it functioned much like a physical Advent calendar. It was designed to get readers to visit over and over again. But that did not happen. So this year, visitors can view all 25 recipes whenever they visit.
• Involve notable foodies/food bloggers. Instead of just going back to the SAVEUR archives to put together a cookie collection, this year SAVEUR invited people from different segments of the online food world. This broadened the reach as we were able to harness the collective social media power of the different contributors.
• The calendar rewards clicks. Last year we tried to introduce a sort of gaming element with clever animations. This year we made it much simplier. We started with a black and while illustration of a kitchen and visitors would click objects around the kitchen to access the recipes. But as they clicked a recipe, they would reveal pieces of a full-color illustration of the kitchen.

Did the changes pay off? Well from December 1, 2011 till November 30, 2012, the first iteration saw a total of 19,312 unique visitors. As of the morning of December 12, this year’s version had already drawn an audience of 18,207 unique visitors along with referring 2300+ unique visitors to last year’s version. So it only took 12 short days to surpass the audience that we had in a year’s time with version 1.

This year’s version was also a personal success. I have intentionally been focused on deepening my JavaScript/jQuery skills. That focus has paid off and I was able to make the magic happen for this year’s version with a very simple script.

I also approached this year’s version from more of a progressive enhancement perspective. The basic functionality still works if the visitor has JavaScript disabled. The visitor can still get to the cookie recipe which is the end goal.

Visit 2012 Cookie Advent Calendar

Note: Much of the content for this post was written by Helen Rosner, SAVEUR Senior Web Editor.

Adaptive/Responsive design (Experience) – I have read Ethan and Luke W’s books. I think I have a solid understanding of building a responsive site. What I need is more experience in actually building sites implementing what I have learned. As Chris Coyier has repeatedly said on ShopTalk, “Just build Websites.”

Over the last couple of months, I have gained that experience. And I wanted to take some time to share some lessons and thoughts I have as I taken away.

Embrace Fluidity

If you are going to design and/or build responsive sites, you have to embrace fluidity. We need to emerge from the age of trying to impose fixed restraints on a fluid medium. The number and variety of devices has exploded and I believe the only logical approach available to us right now is what has been coined “responsive Web design.” This approach embraces flexible systems.

Our job now is come up with a system of proportions. That is what responsive Web design is all about. (Thanks to Trent Walton and Dave Rupert for that understanding.)

Going from Pixels to Ems is Hard (But it is so worth it)

I have been building web sites for over 12 years and I have always worked with pixel values. I have resisted the advice/wisdom of people like Dan Cedarholm to switch over.

As someone who has worked with pixels for years, I can say one of the hardest things for me when I started building my first responsive site was using ems. I had the hardest time getting them to work out the way I wanted.

But this is where the responsive design formula comes in to save the day, Target/Context=Result. Horizontal margins was where I got tripped up the most. I always had to remember that the context was based on the font size of the element that I was putting the margin below.

Though making the switch to ems can be a challenge, it is one that is well worth it. Ems embraces the fluid, flexible nature of the responsive approach. We need to embrace this relative value as we move forward in building the sites of today that will continue to be friendly tomorrow.

FitVid is a Great Solution for Fluid Video Embeds

One thing you will learn as you implement responsive design is that the techniques to make images flexible (max-width:100%;) does not work with video embeds. My company uses Brightcove as our solution.

I had heard of FitVids from Dave Rupert when he spoke at the Front End Design Conference this summer. I tried it out and it works great. I was easily able to find a way to add support for Brightcove videos. It just works. Use it.

Box-sizing:border-box Is Your Best Friend

This CSS property is a must have when doing a responsive layout. In the CSS box model, padding + border + width = total width of the element. With the box-sizing property, width = the actual width of the element with the border and padding applied “inside the box.” Using this model, you can easily declare your widths in percentages and know that adding a border or padding to an element will not mess up your layout.

I have even used pixel values for padding because then I don’t have to worry about consistency between horizontal and vertical values (ems for horizontal and percentages for vertical).

Chris Coyier has written a great post over on CSS Tricks about box sizing. I know he prefers to use a method of declaring a universal box sizing property.

Responsive Image Solutions are just not there yet

This is one of the biggest challenges still to solve, delivering images to different devices taking bandwidth or high density displays into consideration. Many different solutions have been put forth but each has there own limitations. In the end, there is no one good solution to this problem yet.

Once again, I am going to refer you to Chris Coyier. He has done a great job of defining the current landscape of responsive image solutions.

Implementing Responsive Design

Tim Kadlec recently released a book, Implementing Responsive Design. In the book, Tim covers such topics as:

• fluid layouts
• media queries
• responsive media
• planning
• workflow
• responsive content
• RESS – an approach to serving content progressively

I am only in the fourth chapter, but I can say that it is a great resource. I highly recommend it.

Ethan Marcotte’s book is more of Responsive Design 101. Tim’s book goes much deeper into the topic. It tackles the challenges and nuances we face in our day-to-day responsibilities.

The book does a great job of surveying the landscape of current practices in implementing responsive sites.

What are you waiting for. Go order it now.

Resources

• Dave Rupert’s article, Five Steps to Getting Flexy in Responsive Design. This article touches on a lot of the content in Dave’s talk at the Front End Design Conference.
• This is Responsive – Great new resource from Brad Frost highlighting patterns, news, and resources for responsive design
• Responsive.is – One of many online tools where you can see your site in different viewports. My only complaint is that is based on Apple products. But it has one of the better interfaces of the tools I have tried. So it is a good place to start beyond just resizing your browser.
• What to Do When You Can’t Design in the Browser – Some great thoughts from a designer about making changes to the design process that still puts a high value on the creative process.

Did I miss something? Please add your thoughts by commenting on this post.

See more from Off Book.

Jeffrey Zeldman, Whitney Hess, and Jason Santa Maria share their thoughts on the history of Web design, user experience, aesthetics and talk about where things are going (Mobile, responsive design, etc.).

I enjoyed watching this video because I have been involved in designing and building Websites for over 13 years now. The practices and technology continue to change and evolve and it is an exciting thing to be a part of.

via Jason Santa Maria

I featured another video from this series, Off Book: Type, a little over a year ago.

Okay. This video is funny. Because it is true to life, which is not so funny. A lot of online shopping checkout systems are very user unfriendly. This video show what that kind of experience would be like in the physical brick and mortar world.

Via Jeffrey Zeldman

Here is a non-interactive version that have given permission for others to post on their sites. It gives you a taste of what you will find on their site.

Via: TemplateMonster.com

Last month, I attended the Front End Design Conference in St. Pete. This video gives you a taste of the experience.

Once again, I made the trek over to St. Pete for the annual Front End Design Conference. This was the fourth year for the conference and I have not missed one yet.

I am just going to touch on some things I took away from the weekend. Others have done a great job of documenting the day and Dan Denney has put together a great resource on the Front End site that has links to the speaker’s slides. I will include links to these at the end of this post.

Design is about Problem Solving

The talk that has stuck in my mind the most is the first one of the day by Jason Van Lue. The main premise of Jason’s presentation is that design is about solving problems. This is not a new concept to me but it is always great to come back to this perspective and think about what that means.

My big takeaway was to remember that design (or development) is about solving everyday problems for people. We are not in this business to gain attention or notoriety. Our primary purpose is to solve problems for our clients and their audience. Unfortunately, we can forget this.

The reality is that most people may not know what we do or be familiar with our work. But we are making a difference and changing the world each day as we apply our skills to solve the problems before us. And just because our work does not have the permanence of other mediums, does not lessen it’s significance.

It is nice to have people recognize and appreciate your work. If you are doing great work, it will be noticed. But that notice may not be broad. And we need to be okay with that.

We need to remember why we do this–solving problems for people; the ones on the other side of the screen and the people who hire us.

Documenting the Process of Your Solution

I had a conversation with Dave Rupert the night before the conference. He mentioned how we have a lot of people creating plugins or the such, but not really taking the time to explain the problem they were trying to solve or the whys behind their solution. This has led to a lot of people using plugins but not really thinking through if it is the right solution for their specific problem. Dave would like to see more people document their process. This will help others to learn and help us to better evaluate if a plugin or solution is the right one for our specific need.

Dave was not the only speaker to issue this challenge. Darcy also talked about it in his presentation on Front End Techniques for the Modern Web.

One example that Dave shared in his presentation was Jason Weaver’s Off Canvas. Jason describes the concept and shows proof of the concept by applying the solution to his microsite that explains it. Dave said this is a great example of talking through the process so that others can learn and understand if it is the right one for you.

Community

A Virtual Hug for Bermon Painter. Photo by Bermon Painter

One of the things I love about going to this conference is connecting with other people. It is a small and intimate conference that provides many opportunities to hang out with people. I am not sure I have been to another conference where you have such access to the speakers. It is great to meet new people and catch up with those that I have met at previous conferences or know from my networks in Orlando but just don’t see that often.

I love being able to come into the environment of this conference and talk about something I care deeply about. And to talk about it with others who are so passionate about it. I was really impressed with the talks I heard on Day 2. So many sharp people in this industry.

There is something refreshing and energizing about being able to hang out, talk shop, hear what amazing things other people are doing, and just be inspired. For me, this is was the thing I enjoyed most about attending this year.

Day 2 Talk

This year I took advantage of the opportunity to speak on Day 2. Each year, Dan Denney gives conference attendees the chance to do a 15 minute presentation. This year, the talks were on the same big stage as the main event.

This was a great personal development opportunity for me. Public speaking is not something I would naturally gravitate toward. But I love being able to share things that I have learned and help connect people to things that will help them in their life and their work. This was a great opportunity to commit to doing a talk, preparing it over the last month, and then having the chance to share it with other attendees.

The great thing in an environment like this is that your audience is for you and they want you to succeed. I received a lot of encouragement from people when I mentioned I was going to give my talk. And I appreciated the feedback I got on Twitter afterwards. I was a bit more nervous than I would have like to have been and I can find all kinds of things that I wish I had done better. But in the end, my talk served it’s purpose. And I went for it. And so glad I did.

I’m a Fan Boy

I am a big fan of this conference. It is a steal of a price. It is small and intimate. You have access to the speakers (I got to eat dinner with several of them and enjoyed just hanging out). And the talks are always awesome. They are always on topics that are big or will be big in the industry in the months ahead. And finally, Dan and Cherrie Denney know how to put on a quality event.

Links to other people’s perspective on the conference

• Front End Conference 2012 Wrap-up and links to speaker’s slides
• Summary of Day 2 Talks
• Page Break Podcast - Niki and Liz do a recap of the conference over 3 snippets (episodes). I enjoyed listening to the first one and look forward to another this week.
• Tim Smith of Lullabot shares his thoughts on the conference
• Nathaniel Deal’s Wrap-up
• Mimi Markham’s wrap-up, We Make the Interwebs
• The Power of the Plus – slides and links from my Day 2 presentation

Last night, I began teaching a course on building Websites the right way with HTML and CSS at the Bridgforth Academy. My students are my 11 year old daughter and 8 year old son.

I had the idea over a year ago to teach my kids how to build a Website. I just needed to commit to doing it. I thought summer would be a good time to do it. The kids have been excited for weeks. We had a really good time last night.

For my first class, I explained:

• what a browser is
• the four major players in the current browser market (Chrome, Firefox, Safari, and Internet Explorer)
• what a Web server is
• that the Web is now about a variety of devices
• what makes up a Webpage (HTML document, images, video, and CSS) – I know there are other things like JavaScript, etc. but I wanted to keep it simple for our first class

I talked about the difference between the HTML, which defines what is on the page, and CSS, which determines how the page looks. I used the example of a house and the structure of the house. We had recently been to a friend’s house who is adding on an addition. I talked about how the studs and drywall make up the structure and the paint is how the wall looks.

The kids really enjoyed our time. I think they really enjoyed doing something with me but also learning and understanding more about what I do. I really liked teaching them and sharing my world with them.

To finish the evening, I talked about the elements that every Web page must have:

• doctype declaration
• html tag
• head tag
• title tag
• body tag

In our next class, we are going to get on the computer.

• I am going to show them how to view source on a Web page
• I am going to teach them some HTML markup tags
• We are going to code a very simple page so they can put it into practice

I am using 2 resources to help me organize and teach the course:

• Build Your Own Website the Right Way using HTML and CSS – I used this book as the basis of a training I did with my creative team at Campus Crusade a couple of years ago. One of the best books I have seen.
• HTML & CSS: design and build websites – This is the book I wish I had when I learned how to build sites. It is visually inspiring, not the typical boring manual. Beautiful graphics and illustrations, it is my new go to book to tell those who want to learn how to write HTML and CSS.

On Saturday, I had the privilege of speaking at attendee presentations on Day 2 of the Front End Design Conference in St. Pete (another blog post is forthcoming to share my thoughts about the conference). We got to present on the same stage as the main speakers had on Friday at the Palladium Theater, which is an awesome venue.

The subject of my talk was little known CSS Selectors that I have found to be powerful tools when working with CMS markup. It was an expanded version of my post, The Power of the Plus.

I was encouraged by the feedback I received from other attendees. My talk served its purpose and inspired many to take a look at these lesser known CSS selectors and how they could provide creative solutions to the problems we are asked to solve.

Overall it was a great experience and I am glad that I took a step out of my comfort zone.

My slides and links to articles I mentioned

Read the content of my talk (with graphics)

What is Sass

Sass extends the functionality of CSS by allowing you to use variables, nested rules, selector inheritance, mixins, math, and other goodies. Sass is then translated into plain old CSS for use on your Website.

Sass as a helper function. It allows me to write less code and gives me several functions to streamline my development time. What I really like about Sass is that it does not lock you into a system. You can choose to abandon Sass at any time because Sass is generating plain old CSS files that you can continue to use if you abandon using Sass.

Sass needs a translator to compile it into CSS. Sass is a Ruby gem so Ruby is essential for it’s translation in CSS. Which brings me to my first tip.

Use Scout

Scout is a cross platform app that runs Sass and Compass in a self contained Ruby environment. No need to update your Ruby installation or use command line. With Scout, you can be up and running with Sass in no time.

My biggest barrier to entry into Sass was the fact that I had to update the Ruby installation on my operating system. As I tried to update Ruby on my Mac, I ran into problems trying to install a program that would run Ruby. I got no feedback from the command line as to whether or not the program installed. But when I tried to do some additional configuration, I discovered that the program had not installed. Way too much hassle.

With Scout, I install the app. Use the GUI to set up my new Compass project. And press “play” to tell my computer to watch the Sass files. Just as advertised, Scout is ‘Sass and Compass without all the hassle.’ Scout helped me cross hurdles I had to entry and  jump right into the world of Sass, without the hassle.

SCSS

When I decided to use Sass, I decided to go the route of using SCSS instead of the SASS syntax. Because the SCSS syntax is the same as CSS, it is a low barrier of entry. This was important because I wanted to encourage the other front end developers on my team to use it.

I also made the choice knowing that I will not be able to use Sass in all my work. I think it would be easier for me to get use to leaving out the brackets and semi-colons in my code if I was using straight up SASS.

Just as simply using <!doctype html> allows someone to start using HTML5, the SCSS format allows someone to get up and running in using Sass. You would simply need to create a new .scss file for a new project, or you could copy your existing CSS files, create a new folder, paste your CSS files, and change the file format to .scss. It is that simple. How much of Sass you use from there is up to you. Pretty easy.

Variables

Variables were the most attractive thing to me about using Sass because of it’s practical value. No longer did I need to keep declaring a hex value every time I wanted to declare a color. I could simply set up a variable and use it every time I needed it. I would have consistency in my color values and I could always change the declaration once and have it be updated in my code when the file was processed to CSS.

One way I have used variable is to define my font stacks. I have even created different variables for bold, medium, and italic faces for Web fonts. Using variables means that I define my stack once and then only have to remember the variable name each time I want to call upon it.

I found this incredibly helpful recently when a client decided they wanted to use a serif Web font only for headings and not for the body copy. All I had to do was change the font-family declaration in the variable and I was done. All the headings already were using different variables because of the font weights. I only had to change the variable in one place and let Sass do the rest.

Example of some of my variables:

$sans-serif:'OpenSansRegular', sans-serif;
$semibold-sans-serif:"OpenSansSemibold",sans-serif;
$bold-sans-serif:"OpenSansBold",sans-serif;
$italic-sans-serif:"OpenSansItalic",sans-serif;
$serif:Georgia,serif;
$belizio:"Belizio",Georgia,serif;
$bold-serif:"BelizioBold",Georgia,serif;
$medium-serif:"BelizioMedium",Georgia,serif;
$italic-serif:"BelizioItalic",Georgia,serif;

Extend (Selector inheritance)

Extend was the next thing that I got excited about. When I did a refresh to the design on this site, I wanted to randomize the color scheme. So I needed to declare different styles for the background of the header for each of the colors. I had already written out my styles for the header and needed to apply those same styles to the footer. This is where extend came in handy. I wrote one line of SCSS and Sass did the heavy lifting for me.

scss

Compiled to this CSS

Mixins

If there is a feature of Sass that I have under utilized, it would be mixins. One way that I have used them is for modular content. Another thing I am learning about and applying in my work is the idea of scalable and modular architecture (SMACSS). I plan to write a separate post about that in the near future.

One of the ideas of behind this approach is to recognize reusable components or modules in your site and then use classes to apply CSS to those components. This allows you to keep your CSS simple and maintainable by writing one declaration and then using classes in your HTML markup that will match.

On one site I was working on recently, it was not possible to add classes to the HTML. So instead, I created a mixin and applied that to different elements in my CSS. It involves more code in the CSS file but it still meets the objective of creating a more maintainable code for the developer in the SCSS file.

Here is an example of one of my mixins. It is for list items that will display horizontally, like an image gallery, horizontal navigation ,etc.

Nesting

When I started out with Sass, this was the one feature I did not think I would use. I am not sure why. Maybe I did not see a lot of value gained from it. Boy was I wrong.

Once I started using nesting, I really liked it. It is really nice to be able to write less code and visually to see the relationship of the child elements.

One word of advice. I have ended up with a couple of really long nested declarations. I have considered going back and breaking them up, mostly to increase the maintainability of the code. One strategy would be to put in comments to remind yourself or another developer of what the parent selector is and even to write out fully in the comments what the selector will be in your compiled CSS file.

Compass

There is a lot of things that Compass does. But I only use one part of it, CSS3 mixins. No longer to I have to write out all the browser prefixes but Compass includes these mixins to make my life easier and my code more maintainable.

What I like about Compass is that it is modular so I can choose the components of it that I want to use and can ignore the rest. It does not add additional load to my CSS files but works behind the scenes just like Sass to help improve my workflow.

Here is an example of a CSS mixin in action:

Compiles to:

Why I Chose Sass?

One question I might get is why did I choose Sass over LESS. As I weighed my options, I felt like Sass was a better direction to go. Chris Coyier did a great write up on CSS Tricks recently comparing Sass to LESS. I will warn you that his conclusion is that Sass is the better option.

Resources

I am a resource matchmaker. I enjoy being able to connect people to the resources they need to be successful. That is the reason I post on this blog.

Here are my recommendations:

• Chris Coyier’s post on Sass vs. LESS
• Sass Reference – This where I learned most of what I know
• Compass Documentation
• Pragmatic Guide to Sass – Short little book that filled in some of the gaps in my Sass knowledge. Also includes a section on Compass. I learned most of what I know about Compass through this book.
• Just build something! – This is a mantra from Chris Coyier that he oftens says on Shop Talk Show. The best way to really learn something is to use it. As I mentioned, I got my feet wet in a personal project. Then I looked for more projects to keep practicing and expanding my knowledge and skills.
• Shop Talk Show – Although this is not a specific Sass resource, this podcast is a great for Web designers and front end developers. Each week, Chris Coyier and Dave Rupert talk shop by answering listener’s questions. Most weeks they feature a special guest. Jina Bolton was their guest early on and there was a lot of discussion about Sass.
• The Sass Way – A friend of mine suggested that I add this to the resource list. He found the beginner tutorials helpful. I have also read several articles on the site since I originally wrote this post.

People are experimenting with animated GIFs again. These are not the flames of the 90’s. I especially like the cinemagraphs. I had seen these several years ago. I like the life that they bring to a photo. I am surprised others are not experimenting more with this technique.

There is something that resonates in my heart about crafting objects of beauty like a violin. It is not a piece of art, but a working tool. I like how the violin maker sees his role as a partnership with the musician.

I think I would really enjoy making violins or creating furniture with wood.

Short introduction to the different elements a designer considers when putting together a design solution.

via Inspiredology

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.

One of the techniques that I used for the first time was styling an ordered list using pseudo elements. I plan to blog about that soon.

Mike Kus – Designing for Humans from Codeworks Ltd on Vimeo.

I am so excited. I have really wanted to be able to listen or watch this presentation by Mike Kus. Mike is one of my favorite designers. He has a background in graphic design and he brings a fresh approach to design on the Web. I really like his work and have been inspired by his approach.

He wrote an article in December about Creating Meaningful Web Design. I believe this talk continues the conversation he started in the article. I am really looking forward to watching this soon.

“Off Book is a PBS Arts web-only series that explores experimental and cutting edge artistic media.” – From Off Book Twitter page

This episode focuses in on Type. I have not yet had a chance to watch it so part of the reason I am posting it here is for myself.

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.

[blackbirdpie url="http://twitter.com/#!/webcraftsman/status/94418797829701633"]

[blackbirdpie url="http://twitter.com/#!/lorielue/status/94417581225689089"]

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.

[blackbirdpie url="http://twitter.com/miklb/status/94435059523788800"]

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

[blackbirdpie url="http://twitter.com/webcraftsman/status/94493931856859136"]

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.

Twitter and social networking have opened up whole new avenues of relationships and with many people I have never met.

Three weeks ago, I was coding away at my job when I came across this tweet in my stream:

Amazing chocolate chip cookies! @ Culture Espresso Bar http://gowal.la/c/4eLgY

— Van Shea Sedita (@vanshea) May 16, 2011

I love chocolate chip cookies and wished I was in New York to share some with Van. So I replied:

@vanshea Can you send me some of those amazing cookies?

— Jeff Bridgforth (@webcraftsman) May 16, 2011

I was kidding of course because you cannot send cookies through the Internet. (This is when a transporter would come in handy). So I was surprised by the response I got:

@webcraftsman DM me your address!

— Van Shea Sedita (@vanshea) May 16, 2011

I responded with a direct message. “Dude, if you are serious, here’s my address…” I still was not sure if he was serious.

@webcraftsman Done! Expect 3 of these Wed afternoon! yfrog.com/gzvvfoxcj

— Van Shea Sedita (@vanshea) May 16, 2011

I could not believe it. Van FedExed three cookies to me and I could enjoy them on Wednesday.

@vanshea Wow!! Thank you so much.

— Jeff Bridgforth (@webcraftsman) May 16, 2011

@webcraftsman My pleasure! Can you please send some sun?

— Van Shea Sedita (@vanshea) May 16, 2011

@vanshea Cookies arrived! My wife is putting in a bag with piece of bread so the cookies can absorb the moisture. Can’t wait to try. Thanks.

— Jeff Bridgforth (@webcraftsman) May 18, 2011

@vanshea Still trying to figure out how to FedEx you some sunshine. Thanks again.

— Jeff Bridgforth (@webcraftsman) May 18, 2011

@webcraftsman I hope they’re still good man! Sun will be here soon enough..I think. Enjoy!

— Van Shea Sedita (@vanshea) May 18, 2011

Enjoying cookies from New York. Thanks @vansheayfrog.com/h3152zrj

— Jeff Bridgforth (@webcraftsman) May 18, 2011

Those chocolate chip cookies were sooo good. You’re the man @vanshea.

— Jeff Bridgforth (@webcraftsman) May 18, 2011

@webcraftsman Nice! Hope there’s milk nearby! Also, I’m not even a real big fan of cookies.

— Van Shea Sedita (@vanshea) May 18, 2011

I have never met Van in person. I thought about how generous he was to take the time and spend the money to send me some yummy cookies. I believe that Van started following me after the following tweet:

Had a great lunch with @webcraftsman, designer extraordinaire.

— Jared M. Spool (@jmspool) February 23, 2010

Van follows Jared and started following me right after this tweet. I thought this was a great example of networking and social media. (I still am working on trying to send Van some sunshine.)

I got a great laugh out of this.