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.

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

July 22, 2011 10: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 10: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 11: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 3: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.

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

May 16, 2011 1:48 pm via GowallaReplyRetweetFavorite

@vanshea

Van Shea Sedita

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?

May 16, 2011 2:03 pm via Tweetie for MacReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

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!

May 16, 2011 2:21 pm via Twitter for iPhoneReplyRetweetFavorite

@vanshea

Van Shea Sedita

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! http://t.co/OiS4Lfz

May 16, 2011 3:45 pm via Twitter for iPhoneReplyRetweetFavorite

@vanshea

Van Shea Sedita

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

@vanshea Wow!! Thank you so much.

May 16, 2011 3:50 pm via Tweetie for MacReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

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

May 16, 2011 6:07 pm via Twitter for iPhoneReplyRetweetFavorite

@vanshea

Van Shea Sedita

@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.

May 18, 2011 2:32 pm via Tweetie for MacReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

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

May 18, 2011 2:34 pm via Tweetie for MacReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

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

May 18, 2011 3:37 pm via Twitter for iPhoneReplyRetweetFavorite

@vanshea

Van Shea Sedita

Enjoying cookies from New York. Thanks @vanshea http://t.co/pW4RGvn

May 18, 2011 7:43 pm via Twitter for iPhoneReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

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

May 18, 2011 7:52 pm via Twitter for iPhoneReplyRetweetFavorite

@webcraftsman

Jeff Bridgforth

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

May 18, 2011 7:54 pm via webReplyRetweetFavorite

@vanshea

Van Shea Sedita

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.

February 23, 2010 4:00 pm via TweetDeckReplyRetweetFavorite

@jmspool

Jared M. Spool

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.

Yesterday, I attended Florida Drupal Camp at Rollins College. I started working with Drupal in July while at Rise Creative Group and continue to use it in my current role as a front end developer (themer) at Bonnier Corporation.

I have wanted to dive in and learn more formally about Drupal but like a lot of things, it gets pushed to the side just trying to do the day-to-day things. My current role is theming sites so I mostly work with CSS and occasionally touch Drupal template files. I do not really need to know much more than that to get my work done each day.

But I have wanted to learn. I have used WordPress for the last six years and have become pretty adept at building Websites powered by WordPress. My interest in learning Drupal was piqued recently after listening to 2 5by5 podcasts. I found out about Drupal Camp from my Veredus recruiter. They were co-sponsored the event and Chris hooked my up with a free ticket.

My Concerns Going into the Day

Last year I atttended the first WordCamp Orlando, which was also held at Rollins. One of my disappointments with that event is that there was not really a track for a designer/developer like myself. There were tracks for publishers and for developers. At times, I was either bored or things were a bit over my head as I bounced between the two tracks. (Disclaimer: The WordCamp experience was still valuable. I met some great people and did learn things about WordPress I did not know.)

So I had some concerns going into Drupal Camp. Drupal is very much a developer driven community. I decided to do the Beginner’s track but was concerned that some of the first sessions might bore me because I have worked some with Drupal. I am so glad that I was wrong.

The first session gave me a great overview of the terminology of Drupal. Ryan Price did a great job of explaining things in layman terms. I got a better hold of some the terms that I had heard thrown around at Rise and Bonnier. I had some understanding of those things but have a much better grasp after attending Drupal Camp.

I liked the setup of the Beginner’s track. It was a hands on learning experience, although I chose to leave the laptop at home. I still got a lot out of it as I watched them install Drupal, got some great advice on modules to use, and saw the beginnings of a site be created through about 4 or 5 sessions.

The part I was most excited about was Views. Views help you create a lot dynamic functionality on your site and is a tool that I see heavily utilizing in the future. I got a taste and now I want to dig in and really learn how to use Views. Tonight I did a local install of Drupal and began to play around with it.

One other thing I enjoyed about the day was getting familiar with Drupal 7. I have yet to work on a Drupal 7 site and I am excited about many of the changes they have made. The user interface is much better. I believe that Mark Boulton had a lot to do with that. I had heard him talk about the Drupal project on a podcast earlier last year. The admin interface is a much better experience than I have had using Drupal 6.

I am so glad that I attended Florida Drupal Camp. The Beginner’s track was very well done. I learned a lot and came away ready to learn more.

Parting Thoughts

Another thing I enjoyed about the day was connecting to others in the Orlando Tech community. I saw several people that I have met over the past year as I have gotten out to events like this. It was fun to see people face-to-face that I follow on Twitter. I also enjoyed seeing Frank Candamil and Stephan Barrett from Rise Creative Group and catching up with what is going on with them.

I believe the greatest value of events like Drupal Camp is the people that you meet and the relationships you start. Just a couple of weeks ago, I Skyped with Steve in Wyoming who I met at a conference in 2006. Conferences and one day events like Drupal Camp are a great place to network both in meeting new people and furthering existing relationships with people you don’t get to see in person as often. I definitely would encourage anyone to take advantage of any opportunity to connect with others in the community. Sometimes the best places to do that is smaller, local events. And the advantage of local events is that you meet people that live in the same city.

Florida Drupal Camp 2011 gets a big thumbs up from me. Thanks Veredus for the ticket. Thanks to Ryan Price, Gaelen Adams, and Joe Moraca, who taught the Beginner’s sessions that I got a lot out of. And thanks to all those wearing red shirts that helped to put on the event. Bravo.

Gustav obviously does not care about user experience.

I would love to use a space like this. I would love to sit in this space and journal or read or create Websites. I would enjoy meeting with God here in my daily devotions. I love how nature invades this space through the views.

I studied architecture in college so I have an appreciation for this on many levels. I enjoyed the architect’s explanation of some of his design decisions. I wish the video had given some more context to the site.

Via Typedesk via Herman Miller

I like this video explaining the new Priority Inbox feature of Gmail. It is one of the most entertaining introductory videos that I have seen. The music was fun. It had nice sound effects to enhance the presentation. I believe it did a great job of explaining the new feature.

I think this works well for 2 reasons. First, it uses cartoons. Cartoon or comic illustrations connect more with people because we can see ourselves and it puts us in the story. Scott McCloud makes this point in his book, Understanding Comics.

Second, this video uses a narrative or story to inform. Stories are more memorable, fun and engaging than just presenting information. The music and sound effects add to the fun of this video. It entertains as it informs. One of the things I want to think more about is how to use narrative and story in Web sites to help achieve business goals.

I had recently read part of the book, Resonate, which addresses using narrative in presentations. I want to dive more into this book and think about and how to stories and narrative it in the experiences I create online.

A couple of weeks ago, I attended the Front-End Design Conference in St. Petersburg, Florida. I had attended the inaugural conference last year and was looking forward to this year’s event. I won a free ticket to this year’s conference from Fuel Your Creativity blog.

As part of the contest, I had to answer why I attend conferences. Here was my response:

I attend conferences to learn, to be inspired, get away for at least a day to dream, and to meet other Web professionals. Conferences provide a great venue to do all these things, especially connecting with people and expanding your personal network.

This year’s conference did not disappoint. I enjoyed the content and had the chance to meet some sharp Web professionals. I also got to further many relationships with people that I had met at other events like WordCamp Orlando.

Kicking off the day

One of the things that I really like about this conference is that they provide a great venue for getting to meet people right off the bat. They provide breakfast in a very casual atmosphere that makes it easy for an introvert like me to begin meeting people. This is great because I don’t have to face a large room of people trying to figure out where I am going to sit in the midst of a sea of strangers. I made a lot of connections last year through the breakfast and was able to catch up with a guy I met at WordCamp Orlando this year.

Besides some new relationships, here are the three main things I took away from the conference:

No one is a blank sheet designer

I believe each of the first three presenters made a comment about the value of constraints. From a career test I took several years ago, one of the observations is that I am not a ”blank sheet designer.” I work best by having something concrete to start with. I am really good at modifying things.

One of the takeaways from the conference for me is that there really are no blank sheet designers. As Larissa Meek said, “we need constraints to be successful.”

The success of a project is really shaped by the defining stage where you get to know the client and get to know their audience. The more you know about the client’s business goals and know about the primary audience, the more successful your design solution will be.

Constraints begin to define the project and give a place to jump off from as you create a solution. Larissa encouraged me to discover the story to tell through my design solution. “What is the story to tell?” is a question I will be asking myself as I take the discovery research and begin trying to solve the design problem.

I am really excited about my new job with Rise Creative. We have a user experience person and a content strategy person on our team. Together they create a thorough discovery document. Working on my own within a non-profit organization for so many years, I did not have the time and resources to really dig into the discovery process. I believe the processes at Rise will take my design work to the next level because I will have such a wealth of information to provide a solid foundation to build a design solution on.

Larissa’s slides

Be consistent

Lea Alcantara discussed self branding. I became familiar with the subject through the book, Career Distinction, and through the Reach Personal Branding website and audio resources. The takeaway from Lea’s talk was to be consistent. Does the design of my website match my brand? I have wanted to redesign my site for awhile and this talk really gave me a place to start as I begin thinking how I want to represent my personal brand online.

Lea’s slides on Slideshare

Process, Process, Process

Meagan Fisher’s slides were awesome. She talked through her design process. She reiterated some points from the other speakers in the importance of knowing your project and then coming up with a strategy. I liked her idea of making an inspiration board. It is similar to a mood board and is a place for you to put together a lot of different ideas and inspiration.

Frank, a designer at Rise, does a very similar thing. I really like the idea and look forward to using it in my next design project.

I also liked Meagan’s last point of making it shine. This is where you go in and add some texture and lighting to really make your design come alive. She was beginning to go into some techniques she uses in Photoshop by taking public domain illustrations or textures and modifying them. Unfortunately, she was not feeling well and had to end her talk early. I look forward to reviewing her slides when she makes them available.

Work flow

It was great to hear about CSS work flow and see some practical examples of how Jina Bolton implements it in her work. Work flow is an important topic to me as I get my feet wet on a new job. I need to firm up my own work flow process and firm up my standards for how I name files, how I structure my stylesheets, and then integrate that into the existing work flows at Rise Creative Group.

Jina provided a lot of great ideas. She mentioned Modernizer, which is a javascript that allows you to target different browsers depending on their CSS3 capabilities. I have seen others mention Modernizer but had not made the time to check it out. I did take some time to look at it on Friday night.

I sat next to Jina at lunch. I enjoyed listening in as she discussed some different topics that related to her talk including frameworks and object oriented CSS (which I really don’t understand yet).

Jina’s slides

Final thoughts

The day wrapped up at the after conference party. I enjoyed hanging out and talking with different people. One of things I enjoyed was getting to meet Andi Graham, the principal of Big Sea Design and Development. I have been working with her as a contractor since the end of April. I finally got to meet her in person at the conference and I enjoyed hanging out with the Big Sea crew at the after party. I also really enjoyed meeting Stuart, Sarah Parmenter’s fiancee. We talked for several hours about a variety of different things.

Dan Denney and his crew did another awesome job at pulling off the conference. The venue was even better this year as we were in the middle of downtown St. Pete with plenty of restaurants around. This conference is such a great deal for the price, the venue, and the quality cast of speakers that Dan assembles each year.

Sketch Notes

I have always been impressed when I have seen people do sketch notes at conferences. I decided to try my hand. My owl did not turn out well for Meagan’s talk (I forgot what owls looked like). I am glad I tried my hand at something new and look forward to doing more of it in the future.

This was a situation I was faced with last fall. One of the objectives of the project was that the solution would enable the client to manage their own content. Their current site was completely static and they had been dependent on someone who could edit HTML code. They no longer had anyone on their team with those skills and their site had become stagnant.

Because I was familiar with WordPress and the price (free, open-source) was right for this non-profit ministry, I wanted to use WordPress as the CMS solution. But I needed to be able to tweak the default WordPress dashboard to provide a better user experience for the client.

As I searched for CMS plugins, I came across More Fields after reading a post on Kevin Leary’s site. I installed it and began to use it. I really like how it customized the WordPress Admin section for managing page content. I gave me just the functionality I needed. It was just the right solution to give a more usable interface for my client to manage and create their own content. I created a customized homepage that allowed them to post information about different conferences and leadership projects that they sponsor. I created a PDF guide that helped the client to take the site and manage/add new content.

What I liked about More Fields

• It used the existing custom fields functionality of WordPress. I did not have to make changes to my code in my WordPress template in order to use the plugin.
• It added boxes to the page or post editing pages. I was able to put in descriptions and instructions to help my client manage their secondary content.
• It allowed me to customize the page and post editing pages. I had many options of what to show and what to hide.
• It was fairly easy and intuitive to implement right away. I was able to create new boxes and new fields without having to read a bunch of documentation.

But no solution is perfect and there were several quirks in More Fields that did not set well with me. So I was a bit reticent about using it on a recent project.

Here were some of my concerns. Most of these were quirks that were annoying but still functional.

• The plugin had not been updated in quite awhile. This was my greatest concern. The plugin needed a bit more work and I was not sure that its creator was planning to do anything more with it. If that was the case, the quirks I experienced were not going to get fixed.
• The plugin allowed you to hide certain panels when editing pages. Soon after a WordPress upgrade, that functionality broke and several of the panels I wanted to hide were visible once again.
• When adding new fields, after saving changes to the new field, I went to a blank screen. I had expected and wanted to return to the manage boxes page to add more fields or edit current ones.
• The customized panel seemed to create conflicts with the AJAX functionality that allows you to reorder panels and hide/show certain panels on an Edit Page.
• The plugin added the custom page types to the left hand menu of the administrative interface. It created a main nav item with the name of the custom field type and two sub items of “edit” and “add new.” If you clicked on the name of the custom page type on that menu, it would not take you to the edit pages listing but would function like “add new.” This was different than the other main headings on the left menu.

Recent Developments

Recently, I had another project that needed some customization to make it a better experience for the site owner. Because of my concerns about More Fields, I decided to try another plugin. Unfortunately, this plugin had some major issues and the developer was not attending to it.

Then I came across another post by Kevin Leary about new development to the More Fields plugin. I was delighted and excited to check it out. The new version of the plugin addressed all of my concerns. It did not disappoint me. I plan to use it in future projects and would not have any problem in recommending it to others.

Thanks Kal and Henrik for improving More Fields.

I found this video interesting on 2 levels.

• First, I thought it was a creative and engaging. I enjoyed hearing the person talk. And the amazing drawings did such a great job of supporting the speaker. Being a visual person, it really connected with me.
• Second, the content of the presentation. It is very interesting to hear this perspective. It reminds me of many of the things I read recently in Seth Godin’s book, Linchpin: Are You Indispensable? This presentation hit on several things that Godin has observed about what companies need today and what qualities a person needs to have to be indispensable.

The change will affect me. It has been a least a couple of years since I embraced “Web site.” One of the main reasons that I embraced that change was because of AP. The AP Style book is a bible to many content creators. From the way I understood it, the reason why Web was capitalized because it is an proper noun or object that is short for World Wide Web. This made sense to me as to the capitalization. I decided to take my cue from this authority of style. Once I embraced this style, I have stayed very consistent with it throughout my writing.

Before that change, I used “website” for at least 3 years. I had been reading several of Gerry McGovern’s books and in The Web Content Style Guide, his usage was “website” as one word. I am not sure what style I was using before that, but I thought it would be a good idea to embrace some sort of standard and be consistent. I had determined that instead of deciding on my own what style to use, I would take the advice of those who had a more professional opinion. I respected Gerry’s work so I embraced this style until I came across the AP style.

My background is not as a journalist major or English enthusiast. I do care about language and content and look to others to take my cues on proper usage. I find this issue interesting in that a recognized authority embraced a change and how that affects those who care about language and usage a lot more than I do.

For me, I am going to embrace the change. It will take me a while to feel comfortable with the change but I will get use to it. I have debated on whether I am going to make changes to content on my Web site, oops (old habits are hard to break), I mean website to reflect this change of style. I think my strategy will be to change the content on my “pages” but keep the style in my “posts” to reflect my accepted usage of the style at the time I shared my thoughts.

While we are on the subject–is it “e-mail” or “email?” My preference for years has been the latter.

Shout goes out to Kristin at Covenant Communications. Her post who gave me the idea for mine.

Web sites are not “done” once they have been designed and launched. Successful sites need attention. Sites are more like organisms, they are dynamic and alive. I have seen so many sites over the years launch and then become stagnant and obsolete because they were not cared for and given ongoing attention.

Josh Porter wrote about this same issue last summer. It was the first time that I saw someone identify and address this issue.

One agency that is addressing this issue is Merge in Greenville, South Carolina. They have developed what they call a “partnership model.” I don’t know as much about it as I would like to, but I am intrigued by the little bit I have read. I am excited that Merge will be putting on a Webinar on April 21 called A New Way to Web. They are going to share more about the model they have developed.

I am looking forward to hearing how this new approach is working and hope that is the first of many innovative approaches to address this issue. I invite you to join me. You can sign up on Merge’s Web site.

MacWorld has an article, “Apple reveals its list of ‘iPad-ready’ Websites.”  The article brought some interesting questions to mind:

• What do you all think about the difficulty of upgrading websites that use Flash, to a more iPad friendly HTML5 + CSS + Javascript?
• Does upgrading mean that the design of the website must change?
• Is there a design-process for taking a UI developed in Flash and converting it into HTMl5 + CSS + Javascript?
• What does this mean for local (Florida) sales/marketing sites that are Flash heavy?  Should they move to become more iPad friendly HTML5 + CSS + Javascript?
• Will they be judged by potential clients, as being inferior, if their site appears broken on the iPad?

I think there is a much bigger question than just making sure things work on the iPad. If you follow Web standards thinking, I think we are hitting a point when we need to consider how anyone is accessing the Internet. Much more is happening through mobile and other devices such as the iPad. I am not so sure it is a good thing to move in the direction of proprietary development. PPK addressed this on his blog in February with the obsession he has seen with the iPhone.

If we embrace the fundamentals behind Web standards, then I think we owe it to our clients to educate them to the broader issues. iPhone is still a small percentage of the overall mobile market and smart phone market. How widespread will iPad really be? I think it is unwise as a business decision to not look at how to deliver the best experience over the wide-range of Internet devices that now exist and will only continue to broaden in scope in the years ahead.

I think as Web professionals, we need to be looking for innovative solutions like Video for Everybody. This HTML embeds HTML5 video into a site with fall backs to QT and then Flash. This solution may not be perfect yet but I like the idea of a solution that offers options, if one video solution does not work–fall back to another and so on.

I think that companies that rely heavily on Flash need to rethink their strategy. Those solutions just don’t work well throughout the spectrum of devices and do not really consider the context for mobile use. There have been plenty of posts since the announcement of the iPad that have reexamined the short comings of Flash and have called for new solutions. (Zeldman and Jeff Croft)

I think Web sites will be judged by whether they work across the spectrum because there will always be users on different platforms. To be honest, I am not a huge fan of browsing on my iPhone because  sites do not really work well with that platform unless the designer/developer has made it more iPhone friendly. But again, I think that same thinking needs to consider other Smart phones and devices.

The reality is that developing for the Web continues to be complex and continues to throw new problems at Web professionals that need new solutions. Let us embrace the challenge. That is part of the thrill of being in this industry. There is always some new facet to explore and new problem to solve. I hope that we respond by embracing the challenge and using our skills and talents to meet these new challenges with great solutions. Yes it means more development time and that we have to have a greater breadth of knowledge, but to move forward we need to embrace this reality and use the same passion we have in the past to make great Web experiences.

I like the point that Dan Mall makes. He says we need to approach a design project with the mindset that “I am going to design a Web site.” Not “I’m going to design a WordPress site”. Or “I’m going to design an Expression Engine site” or insert any CMS into this sentence. CMS systems are a tool but they should not define how you do a design. It limits the creative process.

I would much rather design a site and then figure out how I am going to pull it off using the tools I choose to implement the solution in. This is the approach that I have taken in my own design projects. I did not change anything about the way that I approached a design that utilized WordPress as a back end solution. If anything, WordPress just helped me to simplify the development process. In fact, several of the sites I have designed were moved into WordPress after they had been static sites. So WordPress did not even factor into the design decisions that were made in those projects.

I would not consider myself a “WordPress theme developer” or designer in the sense that my main goal in a design project is to create a WordPress theme. A WordPress theme is only a vehicle for me to implement a visual design solution. I do offer WordPress solutions but I am not sure I would feel comfortable calling myself a WordPress designer. Of course I wouldn’t call myself a PHP designer either. To me WordPress is just a solution.

What are your thoughts? Do you think designing for content management systems has lessened the creativity of Web designers? What do you think of Dan Mall’s approach on designing for a content management system?

I saw that Jared was going to be in town speaking at a conference so I invited him to join me for lunch. I really enjoyed our time together as we talked about:

• the Red Sox and baseball
• what Jared looks for in a conference speaker
• ethics in UX design
• my experiences at past UI conferences
• career and resume advice

Jared is just as personable in person as when he speaks to a larger gathering of people. One of the things that I really like about the Web industry is that speakers, writers and leaders of our industry are so accessible and approachable. I really appreciated that Jared took time out of his busy conference schedule to meet with me.

It was a real treat. I enjoyed engaging Jared in various topics and appreciated several nuggets of advice that he gave me. He took a genuine interest in me and offered help as he could.

Related posts:

• Read about my experiences at UI12 conference in 2007
• My original post on my Web design superheroes
• I hope to write a post on UIE’s podcast soon

• Cookie Cutter Web sites — This post from Think Vitamin is a challenge to create sites that reflect the personality of the company, product, or person we are designing for. The author’s presupposition is that more and more Web sites look the same. The challenge is to think beyond the standard “recipe” and not just follow the pattern of everyone else. What I like about the article is that she goes on stating the problem and gives some very practical advice on how to think past the cookie cutter. She states several of the conventions we typically follow and challenges the reader to consider how to do things a bit differently. She includes many great examples of how other designers have challenged the conventions or just stretched them a bit to create a site that has a unique personality and distinguishes site from the many others out there. I came away with a list of things that I want to think about as I approach any new design project in the future.
• Content is King — Colin James Firth challenges designers to consider the content and the message of the content when creating a new Web site. Colin argues that too many designs weaken the message of the Web site by not taking the content into account in the visual design. He encourages designers to think about how to present the message of the Web site through the visual design. He believes that copywriters can help us become better communicators. This article is a great companion to the cookie cutter article I have already mentioned.
• CSS3 — There have been several articles of late about CSS3 and specifically CSS3 animations. Smashing Magazine highlighted 50 Brilliant CSS3 and Javascript Coding Techniques. There are some really inspiring examples of what some designers are achieving with CSS3 animations. Web Designer Wall showcased 47 Amazing CSS3 Animation Demos.
• Neutron Creations Blog — I came across this site last week. I really like the work of Elliot Jay Stocks. I am a Firefox user. I liked the design of this blog so I wanted to capture it in Little Snapper. When I viewed the site in Webkit built into Little Snapper, I noticed a CSS animation that really added to the personality of the site. I encourage you to open it up in Safari and have a look. Nice job Elliot.
• Web Owners Need more than a Web designer — Paul Boag outlines the need for generalists in the Web design industry. He argues that being a Web designer in the 21st century involves more than building a Web site. They “need to have a good understanding of business practices, site analytics, marketing, copywriting, social media and more.” He encourages Web designers to broaden their knowledge in these areas. I would consider myself more of generalist so I appreciated the article. I have a variety of interests and enjoy being involved in more than just the Web site. I was very encouraged by one client’s recent comments to me. She said she appreciated me challenging her team to think more about the content and the strategy of the site we were working on together.
• In Defense of The Jack of All Trades — I appreciated this post by Mindy Wagner back in October. She outlines why being a generalist worked for her. She outlined several qualities that she thinks makes a successful generalist. I found that I shared those qualities. It gave me more confidence to embrace who I am. I just recently left a job where I was a jack of many trades. I had to be to get things done because there was no one else there that could or would do it. I enjoyed that role. I hope in my future employment to find a place where I fit well and can contribute out of my strengths and broad knowledge base.

I was delighted by this commercial last night as I watched the Super Bowl. It is a great example of storytelling. I was totally drawn into the story that this commercial tells.

As Paul Boag points out, “They take something very mundane like a search engine and give it real emotion and personality. This ad connects searching with living your live and makes it an intrinsic part of day to day living. Brilliant!”

Paul has been reading Made to Stick and recently mentioned it on his podcast. I started reading this book in the fall but had put it down. I am motivated to pick it back up.

This commercial is “sticky.” It connects to the viewer’s emotions. It is concrete because it connects with something most people come into contact everyday–a search on Google. I agree with Paul that they have done a good job of making something mundane into something that we connect with and will remember.