Most of my Wordpress theme work has centered around hand crafted solutions for each client but this has meant I have started from close to scratch for each project. Over the next couple of months I plan to evaluate a variety of frameworks to see what I can learn and how much I can package to speed up some of the production work.

I am not sure if I will find one that fits my needs or if I will blend a few together to make my own framework but I anticipate learning a good bit about customizing the entire theming experience.

My goals include:

• Creating a theme option page to allow user customizable options such as a header graphic
• Exploring the new version of Flutter
• Integrate it with my CSS reset and general styles
• Allowing widgetized sidebars if it will not break the design

Some frameworks that I will be exploring:

• Thematic
• Sandbox
• Theme Hybrid
• WP Framework

And here are a few useful tutorials about theming:

• Building Custom WordPress Theme
• Frameworks, Child Themes, Filters and Hooks?
• How to make a child theme for WordPress: A pictorial introduction for beginners
• Justin Tadlock explaining his reasoning behind creating Hybrid Theme

What did impress me was the frequency with which the following were emphasized:

• Creativity in designing & coding the user experience.
• The importance of an honest approach to users, clients and team members.

Here are a few highlights from the sessions that I attended:

The Future of Organic Search

Vanessa Fox, editor of Search Engine Land and former Google employee, gave a strong session talk entitled The Future of Organic Search. Her knowledge and passion for the subject stood out as she covered the history and future of search. It was staggering to see how Google has grown to dominate the space, with YouTube actually being the second ranked search engine (which is also part of Google).

The strongest takeaway for me was that old style thinking of home page and interior pages is not nearly as useful as it once was, since a majority of users will arrive at your site from a search engine link. This means that more often than not, they are not going to end up on your home page when they arrive at your site. So make sure that your messaging is working for them throughout the entire site!

Cooking up a Gourmet User Experience

Cooking up a Gourmet User Experience by Jarred Spool from UIE was a great presentation that provided me with the opportunity to take a step back and look at how I approach project management. The studies that his company did about design teams and successful projects were truly fascinating and surprising.

His research revealed that a project approached more from a techniques perspective and less from methodology is likely to result in a more creative and successful product. I will be considering what areas of project management I can loosen up to enable more creativity in my work.

How to Win Projects and Influence Budgets

How to Win Projects and Influence Budgets by Daniel Schutzsmith was by far my favorite session. Inspired by the book, How to Win Friends & Influence People, Daniel emphasized approaching projects and clients with a sense of reality, respect and honesty. By using personal anecdotes from his years running a design agency, Daniel covered how to identify and work with ideal clients. He also shared what he has learned about clients and what they are really looking for, which is most often peace of mind.

I was impressed with how he presented suggestions for approaching your business in an authentic and honest manner, something that seems to get lost in the realms of budgets and deadlines.

The Rise of Modern Making

My favorite keynote was The Rise of Modern Making by Mark Frauenfelder who is the editor-in-chief of MAKE magazine as well as the founder of Boingboing.net. His keynote covered topics such as the history of the ‘making’ movement, creativity, living your ideals, and sustainability. He presented an inspired and authentic vision and I would have been quite happy if he had a few more hours to present.

“Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information”

If you develop websites, as I do, you most likely have been using them for years as well. Does this look familiar:

1. a:link
2. a:visited
3. a:hover
4. a:active

So the state of the link is not itself in the document tree (the html), but we can reference it in our CSS.

So why is it time to explore these very nifty developments in CSS now? Two reasons:

1. As we can see at CSS3.info the number of selectors that are available to most browsers has grown in recent years.
2. And the IE7/IE8 project, spear-headed by Dean Edwards, which in their words is – “A JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.”

A quick look at this page of examples will show you how many more pseudo selectors this tiny bit of javascript code can add. I have used the code for years, and there is a google group available for bug reporting and support.

Learning to use pseudo classes not only will add more ways of reaching items on your page, they will also help you get more out of the powerful javascript library jQuery.

In the past I decided not to dive too deeply into learning new CSS tricks that I could not make much use of due to IE5.5 and IE6 limitations. However with IE6 in it’s waning days, and the ability to shore up some of it’s short comings with the IE7-Javascript code, now is the time to jump in and an make us of these tools.

Overall I enjoyed the experience and I like where they are going with this open source project. First off you do not have to use every aspect of the framework. If you would like to just zero out all the elements you can do that, but the real selling point is their customizable grid that you lay everything out with.

The default size is something like 950px which to my mind is a bit too large, however an active community has provided a third party (also open source) solution for making a quick custom grid.

I settled on 750 pixels and began exploring. Going through the tutorial took about 10 minutes and allowed me to grasp most of the functionality. A few more minutes reading the well commented files filled in the gaps.

One problem that I did run into was some browser rendering issues. While my layout looked great in Firefox and Safari, IE refused to render the main column’s background color all the way down the page. It took about 30 minutes to get things working correctly, mostly finding the correct places to put height=100% (on the html, body and center column). I have been using my own framework built over the years which the correct code already built in so this was a bit frustrating.

There are a few default settings that I do not agree with as well:

1. The body has a top margin by default. and while this might be nice for a text only page, almost every site I desgin (and have seen) has it’s content at the very top.

2. Images have a default margin of 1.5em. Once again this works well for a plain vanilla layout, but once you have some design elements worked in this becomes a pain. I would prefer image margins of zero since that is what I use mostly, and I will adjust them as needed.

Overall it was a fun project and I enjoyed learning a new tool. I will certainly continue to use the feature that zeros out all the elements, mixed with my own style sheets. I am not sold on the grid yet. There seem to be a few oddities still in the code, but hey, it is only version .6 and they seem to have a lot of positive momentum. I will certainly be keeping an eye on their progress.

And that is not all: This open source component also allows the playback of AVI, MS-MPEG4 v1 & v2, DivX, 3ivX, H.264, FLV1, FSV1, VP6, H263I, VP3, HuffYUV, FFVHuff, MPEG1 & MPEG2 Video, Fraps and more!

The latest changes to the site are
1. Added a favicon to the site (make sure to download the free open-source exporter for Photoshop to get them to work on the PC).
2. Added a slick ‘to the top’ floating link to the portfolio pages
3. Went in and figured out permalinks so the URL looks nice now, instead of .com/P=3223?
4. Added some new work.
5. Added new flash buttons to the home page with fancy rollovers
6. Registered and figured out how to use feedburner for the blog’s rss

Design Considerations of the Portfolio Section
I mentioned before that I had one reason for doing the new site in such a big format, but I actually have three.

1. I never updated my old one. With the new CMS/Blog engine running the back-end, all I have to do is prep the image and upload it. I also decided not to do any descriptions with the projects, as that would have just allowed me to procrastinate. Upload an image, its title and category, and new work is live!

2. Keep it simple: Instead of having an individual page for every project, I show one long webpage that can be quickly scrolled through. This has its downsides because the portfolio section does have lots of large images. I think this is outweighed by ease of use by my primary audience, creative directors, who on fast connections can get a good grasp of my work quickly.

3. Full-size (or close to it) presentation of my work. The web and digital media is about the pixel, and many times I spend hours getting a sight looking just right in 5 browsers. I want to show the hard work off at full size!

More soon I hope. I am looking to put a Flash section up and add some more work. I am also going to take some time to look at how I can control the order of the portfolio more.

1. Updates: Wordpress is a complete CMS system that I can easily add new work to. As many designers and companies know, the job of updating a website can often fall through the cracks. With this in mind the open and full size portfolio section was born.

2. Blog: In the coming months I will be sharing my thoughts on my favorite techniques, software and interesting tidbits from across the web.