I take great pains to keep up with news and info related (directly or indirectly) to my particular areas of expertise. During the week, I typically filter out all the links, articles, tutorials, tools, etc that appear in my RSS subscriptions, Twitter feeds, newsletters, and general perusal. At work, this gets translated into emails I send out to my fellow developers in the hopes that they may glean something useful, or at the very least have an interesting read. For myself, these end up in my vast, every-lengthening bookmarks list, which I have been suprisingly slow to add to a service like Delicious.

So, I’ve decided to start making posts of Useful Things, and because I’m all crazy about acronyms and stuff I’m going to call them LUTs. I thought about calling them Selected Lists of Useful Things… but I think we know what that would end up shortened to. Anyone reading these gets the added benefit of the info already being filtered out from all the plankton that drifts through the media ocean each day. And like any journey, it begins with this first step:

List of Useful Things – Week of March 14^th

Resources

Debugging tools for IE

http://samuli.hakoniemi.net/debugging-and-testing-in-internet-explorer-made-easy/

I don’t develop in IE (at least, as a primary). Part of that is a residual disgust with Microsoft from the IE6 regime years, but largely it has to do with the fact that there have never been quality tools or approaches for debugging issues in IE, compared to tools like Firefox and – more recently – Chrome. The tools listed here put a heavy dent in that viewpoint.

jQuery References

http://net.tutsplus.com/tutorials/javascript-ajax/uncovering-jquerys-hidden-features/

http://addyosmani.com/blog/50-jquery-snippets-for-developers/

You can never have too many lists of snippets or brief how-tos on hand. These links provide a fairly extensive, if arbitrary, list ranging from simple items to things I barely know anything about. Especially useful is the concise explanation of event namespacing and what that means for rolling your own plugin.

User Experience

http://www.uxbooth.com/blog/essential-controls-for-web-applications/

A well-developed list of UI controls for use in, well… anything. Screenshots and examples included! A good, quick-reference list for inspiration on your next UI project or redesign.

http://www.lukew.com/ff/entry.asp?156

PDFs and pages of process diagrams relating to design, development, UI, and UX.

http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

The title says it all: “Ultimate guide to table UI patterns”

http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/

Working on an iPhone app, or Droid doodle? Some examples of input forms on mobile devices/OS’s.

Articles

http://www.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/

Containing some reference items but largely dealing with the theory behind designing for business applications versus traditional websites, a well-written article that lays out the processes involved and some best-practices for creating the levers and switches users will flip to run a web app.

http://vimeo.com/9641036

A fantastic video visualization of data pertaining to web usage, social networking, communications usage, etc, etc. Superb visual motif and a fun little soundtrack:

[vimeo]http://vimeo.com/9641036[/vimeo]

Tools

http://gomockingbird.com/

A completely free, easy-to-use, web-based wireframing app. Exports to PDF or PNG formats. Create an account, save your work, share it with other people. Safari, Firefox, and Chrome only.

]]> http://ryanburrell.com/2010/03/lists-of-useful-things/feed/ 0 http://ryanburrell.com/2010/02/notre-maison/ http://ryanburrell.com/2010/02/notre-maison/#comments Mon, 08 Feb 2010 20:20:52 +0000 Ryan Burrell http://ryanburrell.com/?p=604

So, some months back we bought a house. As you may imagine, such a decision came at the end of a lot of debate and discussion… and an even longer searching period.

Brenda and I had been engaged for six months when we began discussing our impending apartment situation. By sheer luck our leases would be coming up at the same time at the end of July. The decision needed to be made as to if we would find an apartment together or plunge headlong into the search for our first home. Some of the defining factors in our debate were:

• We needed at least a three bedroom apartment, because we couldn’t fit all of our crap into anything smaller.

• A three bedroom apartment in our area would range anywhere from $850 – $1200 a month.

• Traditional 30 year loan rates were bouncing around between 3.5% – 5%.

• We had a sizable bit of savings to put down as a payment, thus significantly lessening our potential loan.

• Given the loan rates and money available to put down, a monthly house payment would range from $700 - $950.

We made the decision to buy a house. Or at least to look for one. And we picked a helluva time to do it. As history will reflect, the housing market at this time was (and still largely is) a complete buyer’s market. Foreclosures, short sales, and all-around good deals abounded. This proved to be a double-edged sword, however.

It provided a huge number of possibilities, but at the same time became a daunting search tasks. As we sat down with our realtor to browse through the listings that matched our criteria, we were bewildered to find over 300 potential homes. And the hunt was on.

We went “shopping” two or three times a week for a month and a half, spending part of our time filtering through the search results and physically visiting those houses we felt were most promising. We wanted a large kitchen, as we love to cook. We wanted a big back yard with lots of space, because we love to garden and grow things. Three bedrooms, two baths, a garage for two cars. Those were our goals.

The best part of the entire experience (in my opinion) was getting to go through these different homes and make inferences about the people who lived there, currently or in the past. You quickly start to pick up on little quirks and modifications, shortcomings and repairs that define the house as being more than just a collection of materials to keep the rain and cold out. People inhabited these places, and parts of their personalities and behaviors color the surroundings. Some were fools, having a foreclosed house that still contained the 60-inch plasma TVs, satellite dishes, and expensive furniture that were more important than keeping their home. Some were quaint, expressing unimpressive but satisfied existences. Some were simply… odd, containing bathrooms barely large enough to stand in, stumps in the middle of their concrete patios, or (in one case) a set of train tracks running through the back yard.

Ironically, when we finally found what would shortly become our first home, it only partially matched the “must-have” requirements we had set forth. Its kitchen was not as large as what we had wanted. Its backyard had little useable space, trading open area for a beautifully constructed and finished deck. Its three bedrooms were noticeably smaller than what other houses had boasted. No single facet of it was impressive overmuch.

But there was something about it, standing in the living room with the sunlight shining through the unique five window arrangement. There was a peace about the place that was welcoming. It was not overlarge but had open space which felt relaxing. For reasons I still cannot accurately describe, this house removed all thoughts of living anywhere else. This would be our home.

In summary, here are some of the important things we learned:

• Much like love, when you find the house for you… you’ll know it. Having some prerequisites helps narrow down the pool, but once you walk into the living room: you’ll know.

• Pay attention to the details. Things that seem minor (like a sticky door) aren’t insurmountable by any means, but they are things you will have to deal with at some point. Just make note.

• Enjoy the house hunt! You most likely won’t get to do it again for a long time (if ever) and it provides you with the rare entertainment factor of glimpsing into the private lives of random people.

• Find a good realtor, preferably someone you can find personal recommendations for or that you know personally.

• In general, look at all the angles, weigh your options, and make the decision that’s best for you.

Yet, I encountered a problem that I could find no solution for, which plagued my nerves for weeks on end. I finally figured out the problem (with a hint from a dry-humored tech support rep), so I thought I’d share it here in case anyone else was having the same issue. However, to get the full feel for the frustration (and ultimate hilarity) of the situation I need to share the story in full:

(Hopefully research and options that I hit along the way may be helpful to others with the same issue, but with a different cause.)

Background, technical Info, etc.

I’m not going to explain a lot of the basic of the game in detail. If you’re reading this and don’t know what WoW is… well, hit my archives for some other posts that might better tickle your fancy. The setup is this:

• I’m a level 80 Tauren Shaman, with dual-spec Elemental and Enhancement
• The majority of my Elemental gear is level 213+; my Enhancement gear is mostly 200+
• In full 25-man raids with all buffs and the appropriate talents, I’m doing about 1700 DPS.

For the uninitiated, 1700 DPS for my gear (at the time) was exceedingly low. The Off Tank typically was doing more damage than I was in raids, and even in Heroics I could get bypassed by the tank. This is slightly embarrassing for a class that is supposed to be one of the most versatile in the game while still dealing very high damage. My gear was by no means the best possible, but it should be churning out waaaaaay more performance than what I was getting.

So, I started my research.

Fact-finding

There are a lot of things that impact the amount of damage that you deal, especially when playing a caster class (I was playing as Elemental primarily, but Enhancement also depends a lot on spell damage). While I knew the basics of a lot of this, I hadn’t been dedicating much time previously to raiding, so I had to delve into the murky realm of theorycrafting to acquire some info:

(all this info is current as of Patch 3.2.x)

Hit:

Your hit rating determines your probability for actually connecting with whatever attack you’re trying to do against your enemy. Hit is key. This stat more than anything else will make your DPS soar or sink it like a soggy towel in a pool. If you’re missing, you aren’t doing damage. The people-with-too-much-time-on-their-hands at Elitist Jerks (to whom I am very thankful) sum it up thusly:

“While this is the most valuable stat to have when not hit capped, it is worthless when over the hit cap.”

Spell Power:

This number increases the bonus damage applied to the base amount caused by any given spell. This is the caster equivalent to attack power in melee. The more spell power, the more damage caused by each spell. Some hybrid classes like Enhancement shaman and Retribution paladins can make use of this stat as well. This is typically the most important stat for casters, especially once the hit rating maximum has been achieved.

Critical Strike Rating:

This rating determines the percentage of times that a connecting damage spell or melee attack with score a critical strike and cause 150% (at least) damage. This stat is important for all classes, especially ones that have special spells or abilities that only occur on or after a critical strike. For shaman however, the importance is diminished as we have talent skills that give us plenty of crit and our Lava Burst spell crits automatically on any target that we have applied Flame Shock to – 100% of the time.

Haste:

This is a close second with spell power. While SP determines base damage increase, haste determines how fast you can fling your spells (or swing your axe). A 1% increase in haste can equate to a 1% increase in DPS. For shaman, haste is preferable over critical rating (see critical explanation above), especially in reference to spells like Lightning Bolt that have no cooldown.

An important note: haste does not lower the cooldown on spells.

Attack Rotation:

This is almost more important than your stats. Having down the order in which you fire off your attacks can be the biggest determining factor in maximizing damage output. If the attack rotation doesn’t make the most of any interplay that exists between spells, that’s damage (and time) wasted.

For Elemental shaman, the rotation is relatively simple. Glyph of Flame Shock is required (REQUIRED) for making the most of your damage. The rotation goes like this: Flame Shock, Lava Burst, Lightning Bolt.

Lava Burst has a long cooldown, so Lightning Bolt (LB) should be fired non-stop until it’s cooldown is up. Depending on haste rating, a complete rotation before Flame Shock expires on the target will look something like this:

Flame Shock, Lava Burst, LB, LB, LB, LB, Lava Burst, LB, LB.

If you’re attacking a group of creatures, you can interject a Chain Lightning here and there to provide more area of effect damage.

Applying what I learned

In every capital city, there is a section that contains immobile training dummies for players to whack away on. These exist solely for the purpose of recording data, using an addon like Recount or Damage Meters. I piled all my different gear pieces into my bags and headed for the Valley of Honor in Orgrimmar.

I started by first stacking all the gear that contained hit rating, giving preference to it above all other stats. I dropped my totems, hit Flametongue and let loose. I followed the rotation, and even used some of my trinket abilities to lead off. Lava Burst was hitting for around 6,000 from its automatic critical strikes. The damage meter?: 1500 DPS.

Ok, so maybe it’s not my hit rating. Looking at Recount showed I never missed a shot, so I decided to sacrifice a chunk of hit for spell power and give it another go. DPS: 1700. Spell power made a difference, but not a lot. Interchanging spell power with haste yielded similar results.

What was the deal? By all rights I should be doing waaaay more damage. During my testing period, another Elemental shaman had come up beside me to test his damage. Comparing our gear, I found mine was better but that he was doing roughly 2700 DPS. That’s almost twice as much damage as I could sustain – with a lower gear rating!

The “ah ha!” moment

Something I took notice of during my research through forums and blogs were several references to the crit amount on Lightning Bolt spells – somewhere in the range of 8,000 – 10,000. My Lava Burst was getting close to this amount, but my LB shots were getting critical hits of around 1,000. That’s a far cry from 8,000… so I thought I’d found my culprit.

There is a talent called Shamanism in the shaman Elemental talent tree that gives your LB spell an additional bonus from your spell power. My theory was that, for whatever reason, my talent was broken and wasn’t applying this bonus. I submitted a ticket to game support, briefly outlining my research and what my hypothesis was.

Roughly a day later I received a reply message stating (and I’m paraphrasing here):

“Hello! We’ve checked and do not believe there are any bugs in the talent you referenced. You might check and make sure that you are using all of your highest level spells when you’re doing your testing”

Well of course I was… wasn’t I? I looked at my status bar. Lightning Bolt – Rank 9: 347 – 389 nature damage. Hmm… that did seem a bit low. I checked my spell book and *BAM* I’m an idiot. My highest ranking of LB was actually Rank 14, which does a base damage of 715 – 815. I equipped it to my action key, fired off my anger at a target dummy: 2900 DPS.

The culprit (apart from my own blindness) turned out to be Dominos, the action bar addon I had taken to using. The default action bar interface automatically updates any spells you have assigned to it to their highest rank. Dominos doesn’t do that, apparently (at least in the version I was using).

I hope this has all been helpful, and that you will learn from my journey of knowledge to better inform yourself on the mechanics of your classes. And remember: always check your spells :)

If you’re in any sort of service profession or any type of job that deals with “the public” on a regular basis, you’ve probably developed a healthy amount of contempt for your clients. Be they in need of design service, building construction, or just a hot cup of coffee, those of us whose jobs depend on a final product tailored to our customers have a habit of labeling them all fools. Idiots. People who, frankly, don’t know what the hell they want and waste your time. We like those clients who come to us, full of understanding and respect for what we do, who want only to throw their money at us and give free reign of their project to the creative genius that drives our very existence. We dream about those clients, and despise the rest.

I’ve been fortunate (or unfortunate, if you’re a negative person) enough to have had a variety of job experiences in my relatively short life. At each firm I worked, each design or development job I had, there were a string of clients ranging from not-so-great to outright horrible. The type of people that, when they would call, I would spend several minutes “centering” myself before wrestling with them about their latest batch of nonsensical changes on their project. I became convinced that the places I worked at needed better marketing targeted at better clients; the work we were getting was awful. We were simply bottom-feeding from our prospective market, and all we were getting was crap.

What did you expect?

But something occurred to me the other day. I was going through old project files, and thinking back on the various clients I had worked with at various firms, and trying to pen down what exactly went wrong with them. That some of them were horrible people was quite obvious, but that doesn’t necessarily mean that the projects had to go bad, run over, look cheap, etc. And then it hit me: all this time I’ve been loathing these “bad” clients, but I should really be loathing myself or the company I work for.

It’s unreasonable of me to expect my clients (or my company’s clients) to come to the table knowing what they need. They may know what they want, but our job as creative service professionals is to build a rapport with our clients and guide them to what they really need. We’re as much teachers as we are designers. I can’t expect a client to know the best approach to their end goal or the best method of implementing it; if they knew that, why would they be talking to me instead of just doing it themselves? Instead, we must play the consultant as well as the producer, recommending best-practices and approaches first.

The Determining Factor

So instead of being angry at a client for throwing their own ill-informed demands into the project, I should be angry at myself for not establishing our relationship at the very beginning of our work together. The key factor here is trust. I’ve been a part of more projects than I care to remember where the process involved went something like this:

1. Meeting with client where the client tells you what they want.
2. General nods of acknowledgement from the decision-makers, affirming that we can do what they asked.
3. Meeting with the production team after the client has left, detailing out how we’re going to approach the project.
4. Project work commences. Samples, proofs, mocks, etc., are delivered to the client.
5. Client scoffs at provided samples, saying “Well, I was thinking of something more along the lines of (insert uninformed statement here).”
6. Changes are made to meet the client’s demands because we a) don’t have any sort of processes in place to deflect them and b) they’re the ones paying for it in the end anyway.
7. Resentment builds on both sides, culminating in a project that neither the client nor the producing company is truly happy with.

The key ingredient missing here is at the very beginning. The meeting with the client shouldn’t just be about what they want; it should be about what they want and how you plan to approach working with them to give them what they need. I use “want” and “need” separately on purpose, because what the client initially brings to the table is probably coated with lots of factoids that really don’t apply. What happens all too often is that we simply act as order-fillers, taking notes and then rushing to make it happen. We don’t interact and give the client a chance to trust in our judgment. “I want these colors” or “This needs to be really big on the page.” These aren’t details for the client to establish for themselves. Rather, you should establish a bond of trust with your client that says to them “Hey, I get what you need here, I really do. We’ve taken care of you and helped you out this far, trust us to take it the rest of the way and give you what is best. We’re professionals at this; it’s what we do.”

Daniel Mall likened the experience to going to your stylist/barber. You give them the big picture on what you’re going for, and rely on them to handle the rest. It’s in their best interest to give you something spectacular, a ‘do that your friends will be envious of and will compliment you perfectly. If they cut off one of your ears… that’s bad for business.

There will always be truly troublesome clients — that’s simply an unfortunate reality of any service job and it comes with the territory. But taking the extra time to really get a feel for what the client’s needs are can make all the difference in the world. Bad clients can become good clients, and good clients can become great clients. If the consultation process is structured into your business model, there’s nothing to lose by talking more with the client and building the trust integral to success -both yours and theirs. If they’re willing to take the time to sit down and discuss what they really need, then fantastic things are possible. Don’t hate your clients, because they are the monsters you make them. Instead, slow down and work with them before trying to meet their needs. It works out better in the end.

Image credit: bjearwicke

Organization, in general, is a highly applicable skill for almost any job.  However, given the vast numbers of files, directories, and formats that developers and designers tend to work with, organization must be made an especially high priority for those professionals.  The lack of a defined project and resource filing structure can accumulate to hours of time wasted on a project spent sifting through documents to find what you’re needing.  Worse, your thoughts become disconnected in the space between search and valid result, further deteriorating your precious time.

In recent months I’ve had several opportunities to work on a variety of projects with a number of different companies.  One of the things that has been immediately noticeable to me are the ways that these different agencies do (and don’t) organize their work.  I’ve found some of them to be extremely easy to work with; others not so much. I thought I’d share a few scenarios I’ve experienced and give  examples of how I organize my files, tools, and other resources for quick retrieval. I’d like to start off by issuing a set of guidelines that I’ve found are helpful in organizing your work:

It’s OK to be OCD

Anal-retentiveness is an ideal personality trait for project resource organization. A mantra of “Everything must have its place” is extremely useful to keep running through your head. Everything needs to be in a folder, and you should probably even make folders for items that don’t exist yet if you know you’re going to need them in the future. Files need to have specific naming conventions for standardization, and certain file types should possibly be placed in specific folders (like CSS or JavaScript files).  Even your source documents, such as PSD or AI files, need to have their individual layers grouped and labeled in a manner appropriate to their contents.

Stick with it

A great organization system is awesome to have, but it means exactly jack if you don’t stick with it. Just like cleaning your house, storing your important financial documents, or organizing your music collection: you have to keep on top of it. This is probably the hardest part; you can make the organization system up as you go along and modify it on the fly, but if you don’t make a commitment to place your resources in their proper place… chaos ensues. It takes only a few extra seconds of your project time to drop your files in the right spot – it takes hours of extra time to go through and move your scattered files into their correct locations (not to mention the time you may have wasted up to that point looking for them for other projects).

Alphabetized isn’t always best

… sort of. A lot of firms use only alphabetical sorting to store their records. This can work in a lot of instances, but sometimes it is better to sort your information by date. Instead of placing your latest project for Anderson Ant Farms in the “A” folder, it may be better to create a parent folder of “2009″ and place your project folder inside it. This all depends on what your typical filing needs tend to be; just keep in mind that there are other methods beside your ABCs.

Make folders for project processes

It may be tempting to stop at just creating a folder for your project title and dumping everything into it. Making folders for specific segments of the project, however, can greatly improve your information retention and speed up your retrieval process. For instance, I create a “Bid”, “Source”, and “Proof” folder for every project that I do – regardless of what medium I’m working in. Documents, sample images, contracts, and other files related to the initial project dialogue with the client go into the “Bid” folder. My layout PSDs, AIs, stock images, or any other design phase project files go in the “Source” folder. Anything that I generate that goes to a client (apart from the final deliverable) is placed in the “Proof” folder, possibly in their own dated folders to facilitate a project timeline.

Scenario #1: E-Commerce Firm

My first job immediately out of college was as the lead (and only) designer for an e-commerce company. The company produced its own flagship shopping cart application and had a development department dedicated to customizations of their a la carte storefront solution and other random client requests. My job covered everything from product branding, to website updates, to custom designs, to server maintenance.

One of the biggest productivity hazards I encountered while working at this company was their total lack of a standardized filing system for project resources. The key term in this case is “standardized” as I quickly discovered that all of the developers in the department had their own methods of storing files – none of them in sync with any other worker. We used a centralized development server that hosted client preview sites for projects in addition to our project files for both active and archived documents, with every developer had access to
this environment for storing their files as they saw fit. Each developer had complete freedom to change and move the files located anywhere in our development environment. This quickly became a problem for our client test sites, when Developer A would set their files structure and Developer B would later go in and change it to something they felt was more efficient, almost certainly without Developer A’s knowledge. Eventually, the server ended up as a giant mish-mash of filing structures, inconsistent naming, lost files, orphaned projects, and accidentally-deleted archives.

The root cause of all this mayhem was a lack of guidelines from the department manager. Standards for file storage were consistently lacking from leadership, and as a result we engaged in an internal struggle of ideals. Had a set of standards been implemented for storage locales, naming conventions, etc., then the problems with file confusion and ego battles would most likely have been avoided. An acute case of having too many cooks spoiling the pot, with no guidance at all from a master chef.

Scenario #2: The Lone Design Firm

I was brought on to head up the web work for a small design firm that had most of its experience in branding, print, and multimedia production.  I was eager to jump in and start cranking out projects, as I knew the firm had worked itself into a backlog (which is a good problem to have) and needed some of the more basic orders tied up ASAP.  The firm had been the domain of a single designer, being totally responsible for all the visual work being produced and a large amount of the project management for the company as a whole.

My first project was something very simple: a business card.  Our web-related projects were all out for client approval, so it was determined this was something I could hammer out quickly and move on.  The business card was for a repeat client, who wanted to keep the majority of the artwork from their previous design, but needed some textual updates and wanted a little more jazz added in.  My first indication of a problematic situation was that upon entering the Clients folder, I found every project was filed under a clients name, formatted first then last.  This wasn’t a huge problem, but many projects are for a business and not for a single client, making surname ordering not only cumbersome but sometimes inappropriate.  Regardless, I sought out the folder for this client based on their last name.

The contents of the Doe, John folder were a mess to say the least.  Example folder names included “Temp”, “sample images”, “2008 Business Cards”, “Business Cards”, “[Name of Business]“, “[Name of Business] Print”, etc.  Based strictly on those options, the source PSD I’m looking for could be contained within any one of four different locations. “2008 Business Cards” seems to be fairly specific, so I head for that one.  Alas, this is incorrect as the client has had work done since 2008, and the droids I’m looking for actually end up being in the plain “Business Cards” folder.  By this point, I’ve wasted probably about 5 – 10 minutes.  Not a substantial amount, but you can already see how this can add up over the course of several days worth of work on multiple projects.

When I finally located the correct PSD, it was to discover that none of the layers within it were group in any sort of fashion or labeled anything other than the standard numerical progression of layer 1m, layer 2, layer 3, etc. that Photoshop produces every time you make a new layer.  I had to resort to toggling the visibility of every layer on and off to establish the location of each element and determine which ones I needed to work with.  After working on several other projects that yielded these same pitfalls, it was obvious that the lead and formely-only-designer had never expected that anyone else would need to get back into those files… ever.  A prime example of not only shortsitedness, but extremely bad organization as a result.

Scenario #3: Within A Framework

I was a part of a very large project to create an internationalized messaging system, one that would easily handle multiple languages, a variety of user presentation layers, and a high level of customization and ease of maintenance. To meet these requirements, it we used the Symfony PHP framework.

One of the mandates of using Symfony (and many other frameworks) is a very strict file structure. Files available for public access on the user presentation layer had to be placed here and CSS files needed for the backend admin section had to go there. The Symfony documentation was long, and extremely thorough, which presents a sharp learning
curve for first-time users. But once the proper placements are grasped, productivity goes way up and organization chaos goes way down.

For this particular project, several developers and their designer (me) had to work together on a tight schedule, all having different approaches to their workflows and methods. In this instance, using the defined locations of Symfony’s file structure, we were able to keep it together and avoid the constant issues with misunderstandings on resources and their levels of access.

Header Image Credit: tome213

For most people, FeedBurner is old news.  Nearly anyone who has subscribed to an RSS feed from a major site has probably come into contact with a feed redistributed by FeedBurner, whether you’ve known it or not.  Heck, even I, a relative newcomer to this land of pingbacks, comments, and calibrated SEO measures has known of FeedBurner for quite sometime.  However, knowing it’s there and trying to use it are two different things, and I recently had a very pleasurable experience when I signed up for my first FeedBurner feed.  So, I thought I would share why I thought it was so nifty, and offer a few quick tips on how to easily get your WordPress site spitting out feeds enhanced with FeedBurner.

What Is FeedBurner?

I felt I should answer this first, before I dug into it a bit more.  Even knowing about FeedBurner beforehand didn’t really give me a clear indication of what FeedBurner actually does.  So, here’s the skinny:

• FeedBurner is, at a basic level,  a service that takes a single feed that you provide, and recompiles it into a “super feed” that is readable in all formats (RSS1, RSS2, Atom, etc)
• FeedBurner also modifies your feed output to include a number of custom features, such as animated images and links for social networking in each post (Share on Facebook, Digg It, etc)
• You are given a stats report, detailing who your subscribers are and what they are reading.
• Other options are available, like having FeedBurner notify indexing services when your feed has been updated, integrating AdSense

Why Is It So Awesome?

Lots of reasons.  The entire goal of having a blog (and the giant dispersal of information we know as the “Internet”) is to reach as many people as possible.  FeedBurner’s ability to take a single feed and tailor multiple XML formats for various readers means that you can hit a wider range of potential recurring readers.  Couple that with its custom modifications to include monetization (AdSense) and social networking links to improve your shareability, means that you have a much higher potential for making the most of your blog/podcast/rightwing ultra-conservative anarchist revolutionary feed.

Being a designer, I’m innately concerned with the presentation of whatever materials are before me.  With this in mind, the first thing I noticed was the superb usability FeedBurner brings to its services.  The homepage has a fair amount of information, but the reason you are most likely there is front and center and ready for easy use:

I was able to sign up for a free account, and convert my WordPress default feed to a FeedBurner super mutant feed in about a minute.   I then instantly had access to this wonderful workflow navigation:

Everything I need is right there, in an ordered format, with helpful hints and instructions under each tab.  That’s a breath of fresh air compared to a lot of web apps, which can easily become so cumbersome that they collapse under the usability issues of their own vast amount of features.  On top of that, I couldn’t help but notice the subtle humor and personality present throughout the site.  This is something I’ve come to expect (and enjoy) from most Google-owned services, which breaks the monotony of the business of business.  I found this starting page viewable immediately after creation of my first feed particularly…um…cute? :

It makes sense, it gives you some options, and it even makes you smile a little.  Perfect.

FeedBurner & WordPress

Ok, so now we’ve got this nifty hybridized feed that monetizes, optimizes, customizes and Simonizes…how do we get it into WordPress?  This part is really simple, thanks to Google/FeedBurner fully supporting the FeedSmith plugin for WordPress.  Basically, you follow the instructions on this page: Creating your WordPress feed (self-hosted WordPress).  The page details a 5-step process, but it can basically be summarized as:

1. Download FeedSmith, upload it to your plugins folder, and activate it.
2. Go to Settings > FeedSmith, and paste in the URL to your FeedBurner feed and hit the button…you’re done.

Easy.  There’s also a guide for using FeedBurner through WordPress.com, found here: Creating your WordPress feed (WordPress.com)

FeedBurner isn’t just another WordPress supporting service; it’s a standalone that you can use in any situation where a default feed can use some major optimization.  Try it out, recommend it to your friends, all hail Google.

I’ve discovered as of late that there are a lot of practices that haven’t been adopted by the web community that have been around for quite some time (meaning a year or two in web terms).  This is particularly surprising to me in some cases simply because of the sheer usefulness of the practice(s) in question.  A lot of this is simply because of ignorance, and I use that term as it was intended, not with any negative connotation.  So, to help correct that, I thought I’d churn out a quick post on one of the biggest time-savers: the reset stylesheet.

If you’re unfamiliar with what a reset stylesheet is, the concept is very simple.  So simple, in fact, that once you understand it you’ll wonder why we haven’t been using the idea all along.  But to understand why a reset stylesheet is so great, there’s a bit of a back story.

A Brief History of Web Browsers and Why They Suck

The web has been, unbeknownst to most people, a fairly brutal battleground since its inception.  The W3C has been the determining body for what standards browsers and other content devices should adhere to, and they have been soundly ignored from the beginning.  Things really came to a head in the battles between Microsoft and Netscape, with each racing to develop their own proprietary methods that would make developers want to create sites for their browser specifically.

Eventually things calmed down, mostly because of accessibility concerns.  However, the fallout from the earlier battles is apparent in that most browsers still have differing methods of rendering data on the screen.  Things like forms having extra spacing inside them, input fields having their own font families different from the surround elements, lists with varying levels of padding, etc.  This is a huge headache for design and development, to say the least.

Ok, so what is it?

A reset stylesheet is a specialized CSS file, or a collection of CSS definitions, that override all default styling provided by a browser for HTML tags with a visual output.  The practical result of such a sheet is that it removes the ambiguity in display, telling all browsers that this has these types of margins and that has this type of padding.

Exactly what a particular reset stylesheet does is, obviously, based on its contents.  Different stylesheets have been developed with varying degrees of specificity as to what styling they apply.  The stlyesheet that I’ve found to work best for most situations has been one developed by CSS guru, Eric Meyer.  I’ve made a few modifications to his stylesheet and added a few other items:

Download the stylesheet listed below here: Reset Stylesheet (save as…)

1. html, body, div, span, applet, object, iframe,
2. blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-weight: inherit;
14. font-style: inherit;
15. font-size: 100%;
16. font-family: inherit;
17. vertical-align: baseline;
18. }
19. /* remember to define focus styles! */
20. :focus {
21. outline: 0;
22. }
23. body {
24. line-height: 1;
25. color: black;
26. background: white;
27. /* opacity: .99; text-rendering bug in Fx2/Mac --- doesn't validate */
28. }
29. h1, h2, h3, h4, h5, h6 {
30. margin: 10px 10px 10px 5px;
31. padding: 0;
32. }
33. p {
34. margin: 5px;
35. padding: 0;
36. }
37. ol, ul {
38. list-style: none;
39. }
40. /* tables still need 'cellspacing="0"' in the markup */
41. table {
42. border-collapse: separate;
43. border-spacing: 0;
44. }
45. caption, th, td {
46. text-align: left;
47. font-weight: normal;
48. }
49. blockquote:before, blockquote:after,
50. q:before, q:after {
51. content: "";
52. }
53. blockquote, q {
54. quotes: "" "";
55. }
56. /* CLEAFIX */
57. .clearfix:after {
58. content: ".";
59. display: block;
60. height: 0;
61. clear: both;
62. visibility: hidden;
63. }
64. .clearfix {display: inline-block;}
65. /* Hides from IE-mac \*/
66. * html .clearfix {height: 1%;}
67. .clearfix {display: block;}
68. /* End hide from IE-mac */
69. .clearer {
70. clear: both;
71. }

It’s a bit lengthy, but still a very small overall file as far as size is concerned.  It can obviously be condensed and is presented in its current format for readability.  The notable changes that I’ve made to Eric’s base stylesheet have been the addition of the “clearfix” methodology (as described at Webtoolkit) to the bottom, as well as a utility clearing class that I found myself using in nearly every site.

Briefly, what the above code does:

• The <html> <body> <div> <span> <form> <ul> <ol> and other tags are all specifically told to have no margins, no padding, no borders, no outlines, and to inherit their font settings from their parent elements.
• The <body> is given a default color attribute of black and a default background color of white, so you don’t have to set these every time you make a new site.
• Headings and paragraphs are given a specified set of margins and zero padding.
• List items are set to show no bullet or other notation by default (especially useful since most lists tend to end up as navigation or with custom styling).
• For browsers with better support of CSS2 & 3 standards, other things like defining a default focus state for form elements are added as well.
• The clearfix code snippets allow the application of a clearfix class to any element, resulting in that element clearing itself after all floated elements inside it (extremely useful).
• The utility clearer class can be applied to any element, causing it to clear any floats above it.

And that’s basically it.  Here are some important tips and directions:

• Include your reset stylesheet above all other stylesheets.  People tend to forget that HTML is read in a procedural manner, and if your reset stylesheet is placed below all other stylesheets, it’s styling will take precendence over the other CSS definitions. “Thou shalt not have other stylesheets before me.”
• To make your life less of a hassle, always include your reset stylesheet from the very start of your design/development.  Trying to add a reset stylesheet after the fact can sometimes be more of a headache than starting from scratch.
• Recycle!  Save your reset stylesheet code as a snippet or simply as a file located somewhere that you can easily copy and paste into any new projects you begin to work on.

Thanks to all those people who have developed this idea long before I got hold of it, because it has saved me a ton of time and headache.  Enjoy!

Image credit: sumeja

In my previous post, I decided I would share my rough methodology on how I went about sprucing up my search widget in WordPress. If you’re just tuning in, here’s a quick update on what I described in The Making of a Not-So-Boring Search/RSS Widget:

• We downloaded some cool Photoshop brushes featured in Smashing Magazine, and used one of those to give a torn paper background to the search widget
• We took that background and prepped it for use from Photoshop, making minor modifications to include background transparency.
• We then modified the HTML for the search widget to accommodate the background styling.
• Finally, we added some simple CSS to pull in the background images.

Awesome. But what about the nasty, plain text links below the search area for the post and comment RSS feeds? Icky. Bland. Boring.

A Different Approach

Why do these links need to take up so much space? There’s no reason that we can’t compact them down into a single RSS button placed somewhere on the page, but I want to give my readers the ability to subscribe to both the posts and the comments…so we’re at a bit of a dilemma. But wait! Why can’t we roll these into a hidden section of the page that is easily accessible? A lot of sites do have that single button RSS link; this one will just have a special surprise.

Basically, the idea is to do this:

Making The Wrapping

Creating the images is just as easy if not easier than the images for the search background. I used the Rounded Rectangle Tool in Photoshop and then simple used the Pen Tool and the Direct Selection Tool to add some extra points for the tab curve and tweak the curve outward, respectively.

Once I have the shape the way I want it, I add a gradient across the surface in RSS-ish colors.  I add some text and a little RSS icon, and the tab is done. Then, all I need to do is turn off the background, crop it to just the tab portion (including the curve on the far left), and Save For Web.

That takes care of the tab, but we still need to save the background for when the tab is extended upward. That’s as easy as saving a 1px high strip from the extended background like so:

Note: the icons I’m using for the RSS links are adaptations from the Silk set found at FamFamFam. I’ve modified these separately and uploaded them.

Preparing The Box

Now that we’ve cropped out the images we need and uploaded them, it’s time to look at some code. As with the search box, it’s pretty basic. The following is placed in the sidebar.php file for my WordPress theme, right above the code for the search section:

1. <div id="rss">
2. <a class="tab">RSS</a>
3. <div id="rss_feeds" class="clearfix">
4. <a id="rss_comments" href="<?php bloginfo('comments_rss2_url'); ?>" title="Comments Feed">Comments</a>
5. <a id="rss_posts" href="<?php bloginfo('rss2_url'); ?>" title="RSS Feed">Posts</a>
6. </div>
7. </div>

Nothing scary there. Just some organizational <div> tags and some WordPress function calls to specific RSS link locations (which can be found in their Codex). I’m using the <a class="tab">RSS</a> tag to serve as the point of interaction where the reader will click to expand/contract the RSS section. And now for the CSS wrapping paper:

1. /* RSS Feeds */
2. #rss {
3. background: url(../images/bkgrd_rss_top.png) no-repeat;
4. margin: 10px 0 0 0;
5. }
6. #rss a {
7. display: block;
8. padding: 0;
9. }
10. #rss .tab {
11. height: 20px;
12. margin: 0 0 0 119px;
13. width: 68px;
14. }
15. #rss #rss_feeds {
16. background: url(../images/bkgrd_rss.png) repeat-y;
17. display: none;
18. padding: 3px 10px 3px 6px;
19. }
20. #rss_feeds a {
21. float: right;
22. padding: 2px 20px 2px 0;
23. }
24. #rss_feeds #rss_posts {
25. background: url(../images/ico_rss_post.png) no-repeat center right;
26. }
27. #rss_feeds #rss_comments {
28. background: url(../images/ico_rss_comment.png) no-repeat center right;
29. margin: 0 0 0 14px;
30. }

Nothing too fancy, but a brief explanation will help:

• #rss produces the background image of the tab, telling it not to repeat. This will sit behind the <a class="tab">RSS</a>.
• #rss a forces all <a> tags to display in block format, which allows margin and padding properties to be applied to them.
• #rss .tab sets the <a class="tab">RSS</a> to have a height matching the height of the tab background. It also sets a margin and width, making it act as a box over the tab on the right side, instead of a block clickable area across the top of the entire RSS section.
• #rss #rss_feeds sets the 1px background to tile and fill in the space occupied by the RSS links. We set it to hide by default with the display:none property.
• #rss_feeds a floats the RSS links, allowing them to still have block properties applied to them while displaying inline next to each other.
• #rss_feeds #rss_posts and #rss_feeds #rss_comments set the background icon images for the post and comments feed links, respectively.

All that give us the finished visual product. But how do we make it expand and collapse all nifty-like?

Enter jQuery

JQuery is a fantastic javascript library that makes visual effects extremely easy to achieve. It also does a lot more, like AJAX, but we’re just using the visual portion for this. Here’s what you need:

• jquery framework file
• jquery UI core file

You can customize the UI core file if you want to keep the filesize low. All we’ll be working with is the Blind effect, so you can build your own UI JS file to include just that. All I need do is link these files in the head section of my WordPress theme by writing:

1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.js"></script>
2. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-1.5.2.js"></script>

Now, I’ve made a separate JS file called functions.js where I store all my global javascript functions that are used throughout the site. I’ve linked this in the theme and I’ll take the following code and place it in there:

1. $(document).ready(function() {
2. //Function to hide/show RSS feeds tab and disable button unless JS is active
3. $('#rss_feeds').hide();
4. $('a.tab').click(function(){
5. $('#rss_feeds').toggle("blind", { direction: "vertical" }, 250);
6. });
7. });

In English this means that once the document is ready ($(document).ready(function()), make sure that the <div id="rss_feeds"> is hidden. Once that’s done, setup a function so that when the <a class="tab"> is clicked, jQuery will toggle the <div id="rss_feeds"> using the Blind visual effect of the jQuery UI.

That’s really it. It’s not very complicated at all, and it adds a nice little visual effect. The best part is, should javascript be disabled, the RSS tab will default to being open so that the reader doesn’t miss out on the easy access to the RSS links.

In the future, I’ll look for more little things that can be done to tidy up a site and add an extra little personality to it. Except to read about them here when I do.

Maintaining your own site can be a real chore.  That’s one of the many reasons why I like WordPress so much: it makes updating and adding new content easy.

But what about non-content updates?  I’m talking about tweaking something that doesn’t look exactly the way you’d like it to visually.  A lot of people seem to shy away from this because it seems very daunting.  That’s yet another reason why I love the general setup of WordPress: changing the visual composition is just as easy as changing the content.

Note: from this point on I’m going to assume the reader’s at least beginner knowledge of Photoshop, CSS, and HTML.

The Goal

As you can tell from the header picture above, the search section in the sidebar of this site was pretty lacking for awhile.  It worked fine, but looked like crap (which in my book is just as important as making sure it works).  So, I set out to give it facelift.

But where to begin?  Probably the most daunting part of making a visual change to any part of a site is the fact that it involves being *GASP* creative.  It’s really not that hard; give yourself some credit: you’re more creative than you think.  In my case, I’ve decided to go with this whole mixed-media jump-off-the-page approach because I feel it is more engaging to the viewer and keeps me from being entirely bored after staring at it for hours trying to get something to work right in IE6.  So, I decided I need to do something that goes along with that.  Enter the torn paper look.

Texturize Me!

Awhile back I found this great post on Smashing Magazine.  I think I downloaded almost every brush they had listed, but in particular I was intrigued by the torn paper brushes.  I selected one that looked like a scrap of paper, and smacked it over my original layout file in Photoshop.

I added a little bit of emboss to make it pop, and called it good.  Nothing super fancy, but enough to make it interesting.

Now, the bigger issue is scalability.  Since whatever I end up putting in this search area could potentially increase with the browser’s text size, I need to make sure that it grows.  So, what is now a single image will become two, and the bottom portion will have a transparent background so it can move down the page and still have the page background show through.  Let’s look at the code:

1. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
2. <div>
3. <label class="nodisplay" for="s"><?php _e('search for:'); ?></label>
4. <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
5. <div class="right">
6. <input type="image" src="<?php bloginfo('template_directory'); ?>/images/btn_search.gif" id="searchsubmit" value="search" />
7. </div>
8. </div>
9. <div class="btm"></div>
10. </form>

Now, I made my theme from the Default Theme that’s included with WordPress, so the above code is located in the searchform.php template page.  All themes are different, so yours may be somewhere else entirely.  The idea here is that the background portion that is more solid will be its own image that will tile, while the bottom part with the ragged edge will be a single, non-tiling image.  To accommodate this, all of the actual content of the search form (the <label> <input type="text"> and the <input type="image">) is contained within its own <div> that will have the tiling background.  A separate <div> (the one with the class="btm") is placed just below that, which will be styled to show just the ragged edge.

Next up, saving the images and writing the CSS.

Enter Photoshop

Photoshop is great.  Saving the first background image (the one that will tile) is easy.  The image is cropped to only have the solid portion, click the Save For Web option in the menu, and you’re done.

The ragged portion at the bottom is a little trickier.  We want the ragged edge to be able to move down the page as this search widget area lengthens.  If we simply cropped the image with the page background behind it, then when it moved it would eventually show the crop line.  Nope, instead we’re going to erase around the ragged edge of the image to make it transparent, and then save it as a GIF.  Don’t worry about being too exact; a surprisingly large amount of visual effects on the web rely on your eye automatically blending like-colored and blurred areas together on screen and other visual tricks:

The CSS

Now that the images have been cropped, edited, saved, and uploaded correctly, we’ll write in some simple CSS to make everything come together.  The following is entered into the stlyesheet I have connected to my site that defines the visual composition:

1. /* Search Form */
2. #searchform div {
3. background: url(../images/bkgrd_search.jpg) repeat-y;
4. padding: 0 12px 0 7px;
5. }
6. #searchform div.right {
7. background: none;
8. padding: 0;
9. }
10. #searchform div.btm {
11. background: url(../images/bkgrd_search_btm.gif) no-repeat;
12. height: 18px;
13. }
14. #searchform input#s {
15. border: solid 1px #A5ACB2;
16. margin: 12px 0 6px 0;
17. width: 100%;
18. }

I quick run-through on what the code is doing here.

• #searchform div assigns the background to the <div> containing all the form elements, tiling by default.  Since this is assigned to all <div> tags within the <form>, we need:
• #searchform div.right.  This excludes the <div> that aligns the search button to the right from tiling the background image again.
• #searchform div.btm edits the “empty” <div class="btm">.  It tells it to have the ragged edge as a background, to not tile, and to be the exact height of the image.  This is important, because otherwise the <div> would collapse since it contains nothing inside it.
• #searchform input#s just contains some simple styling for the search box.

That’s it; we’re done!

Going Further

Next time up: the RSS portion.  It’s a bit more complicated, but luckily it involes jQuery, which makes it extremely easy.  Until then…