Intereactive Web Design - Sugar Land, TX

Our blog has been up and running for a while and we’re seeing some traffic, but Expression Engine just doesn’t have the stats control to really be able to see how many people are subscribing to our feed or what their stats might be. Feedburner seemed like the most logical choice for us to migrate our feed to because there are such a wide variety of stats that they track. The biggest question was, “How do we do it seamlessly so that our current subscribers aren’t affected?” Having to remove the old feed and then add the new one just because we want to change something is just plain bad form.

I’ve seen some plugins for Wordpress that hook right into the code and redirect it effortlessly, so I figured maybe someone had written one for Expression Engine. After doing a little research through the EE forums and repository, I came up with nothing of any real use. My thoughts turned to handling the request on the server side of things instead of the actual EE framework. I could do this pretty easy by adding in an .htaccess file with some URL ReWrite code. I’d seen this done for Textpattern by my friend Nathan Smith, so I knew “in theory” it would work just fine. Knowing the devil is in the details, I brushed off my regular expression skills and wrote a piece of code to make our EE feed redirect to Feedburner.

The first thing to do is create an .htaccess file, assuming you don’t have one, which will reside in your main EE directory. Place the following code inside that file being sure to change the URL to your Feedburner feed.
<IfModule mod_rewrite.c>
RewriteEngine On

# Redirect all feeds requests to Feedburner
#------------------------------------------------------------------
RewriteCond %{REQUEST_URI} ^.*(rss_2\.0) [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(FeedBurner|FeedValidator|Recent) [NC]
RewriteRule ^(.*)$ http://feeds.feedburner.com/intereactive [L,R=302]
#------------------------------------------------------------------

</IfModule>
Our RSS feed template in Expression Engine is named rss_2.0. Previously, you would subscribe to it by going to the URL http://intereactive.net/blog/rss_2.0, so what we needed to do was redirect that URL to Feedburner behind the scenes. If we take a deeper look into the code we’ll see exactly how I did that.

RewriteCond %{REQUEST_URI} ^.*(rss_2\.0) [NC]
We use {REQUEST_URI} to grab the URL and then search for rss_2.0 (our template name) by using the RegExp code ^.*(rss_2\.0) RewriteCond %{HTTP_USER_AGENT} !^.*(FeedBurner|FeedValidator|Recent) [NC]
We use {HTTP_USER_AGENT} to look at where the request is coming from and by using the ! (which means NOT) we can see if Feedburner is requesting the original feed. The reason we want to know this is that if we don’t cancel the redirect for Feedburner, it could get caught in an infinite loop. RewriteRule ^(.*)$ http://feeds.feedburner.com/intereactive [L,R=302]
This part of the code actually does the redirect. It’s pretty straight forward but I wanted to note that this code only runs if all the previous RewriteCond statements return as TRUE. Also note that you will need to put your Feedburner URL in the code and not ours.

Hopefully that helps some of you migrate your existing EE to a service such as Feedburner. Here are some references that may help you with RegExp’s and RSS feeds for EE:
Photo’s not showing up or text unformated in your EE feed?
The basics of RegExp’s in regards to ModRewrite
Some examples of ModRewrite

Six years ago Ryan, Phil, and I were part of the launch team for a local Church.  From a group of about 30 initial members, the church has grown to over 400 regular attendees, two services, dozens of community groups and hundreds of volunteers.  During this time the three of us have been involved in both serving and leading various servant teams within the church.  After 6 years of leading hundreds of volunteers we have developed organizational tools and strategies that are rooted in team theory but tailored to the modern church servant team.  Mosaic is our companies effort to provide other churches with proven organizational and communication tools. 

Mosaic is described as an ancient and contemporary art form which uses individual pieces of materials placed together to create a unified whole.  Individual pieces (tesserae) are arranged in groups that move and flow (andamento) throughout the entire work of art.  This fluid organization of individuals into a seamless whole is what we are creating with mosaic.  Our tesserae are not pieces of tile or glass but people and our andamento is not a pattern in art but structure and organization of servant teams in the modern church.

Mosaic is not designed to be your traditional “membership/volunteer” database.  While we recognize the need of some organizations to employ large complicated software to track everything from birthdays to anniversaries, and family trees to blood type we believe that most groups simply need a tool to manage the organization, scheduling, and communication between volunteers.  Mosaic is intentionally simple.  We don’t ask for members’ maternal grandmother’s maiden name.  You don’t even need a complete organizational plan to get started.  All you need are people…we’ll help you organize and stay in contact with them.

Over the next few months we will be posting more detail about features within the application and screen shots of the four core areas that comprise Mosaic.

Teams

All your info about your people and teams in one place

Messaging

Communicate easily with people and teams through Mosaic or email

Event Calendar

Tie your teams to events to easily track who is needed, when

Sub-Finder

Know when people can’t show up and easily find a replacement

These four core areas will work together to solve the major issues that surround team management even if you’ve never had to manage people before. The best part is that we’ve built Mosaic based on our years of experience (good and bad) managing servant teams. Our goal is to take the headache out of managing your servant teams and just let you serve.

So in the past few months I’ve been following Aaron Ivey’s blog after coming across it through a mutual friend. I don’t know Aaron personally, but I have enjoyed reading his posts, especially those that showcase his photography (those are just a small sample). I really dig the coloring and post effects that he adds to his shots and I’ve had a few friends inquire as to how he might be achieving that look. I thought I’d play in Photoshop a bit and see if I could come up with something similar. The idea is not to copy directly, but to come up with something that’s of a similar style.

First off let me say that large part of the effectiveness of these shots begins with how they are captured. You have to start with a strong picture first. You can add effects and tweak a photo all day in Photoshop but if it’s not a good shot to begin with then just forget about it.

So here’s the photo that I used as my starting point. I picked it because it has pretty good color to begin with, it’s a fairly interesting shot and it has a strong depth of field which is really nice to have especially when paired with these post effects.

And here’s the final image with the effects added:

Here’s the breakdown of how I achieved this. I’m working in Photoshop CS3, which is only important because of how my layers were assembled. You can achieve the exact same look in CS2 but your layers will be slightly different. Here is a screenshot of my layer window:

This is a fairly simple setup. First I started with the original image which is in “layer 0”. Above that layer I created these 3 adjustment layers: color balance, curves, and hue & saturation. Using adjustment layers is key because that allows you to make tonal corrections to your image without actually altering the image itself.

I won’t go into all of the specific slider values for each of these adjustment layers because those will be different for each image. I will discuss why I added each adjustment layer and the basics as to what’s going on in each.

Color Balance
Color balance is a powerful tool because it gives you the power to adjust the colors in the shadows, midtones and highlights of your image separately. So I want to add more green into my shadows but more yellow in my highlights, I can. I’ve used to use the color balance tool to only make slight tweaks to my image, such as making it warmer but still keeping the original colors intact. Recently I’ve been getting more aggressive with it and now I completely change the colors of an image which is what I did in this example.

Curves
Curves is one of those tools that most people open and then just stare at blankly. It’s not the most user-friendly tool, but it’s super powerful. The key to curves in my experience is slight adjustments. If you add too many points and severely drag the lines around your image will quickly begin to fall apart. What I usually do is adjust the curves for each of the 3 color channels in an image, those being the red, blue and green channels. Then I go into the composite channel (rgb) I then make very slight adjustments, usually creating what’s called an “s” curve. You create an “s” curve by adding a point to the bottom left portion of the rgb curve and drag it down slightly and then add a point to the top right portion of the curve and drag it up slightly, thus making an “s” with the curve. This adds contrast and can really bring an image to life.

Hue & Saturation
In this example, I only used the saturation slider of the hue & saturation tool. I brought the saturation down to give this image a more muted look. Pretty simple stuff.

The order to these layers is important, since they each build off of whichever layers are under themselves. That’s why color balance is first, because I want to make those color changes right away. Then I want to adjust the curves to just tweak those colors slightly. Then the hue & saturation layer is on top of everything to bring the saturation down.

Lastly I made a couple of tweaks to the original image layer itself. This is where CS2 and CS3 part ways. In CS3 Adobe introduced “smart filters” which is similar to the adjustment layer idea of making adjustments but not actually affecting the original image at all. In CS2 anytime you added a filter to an image it was a permanent change. In CS3 you can convert the layer to a “smart filter layer”, which means you can add filter upon filter to that layer and not only keep the original layer intact, but also be able to go back into those individual filters and make adjustments down the road. Very powerful stuff. If you’re using CS2 and want to know how you can add those same filters without the use of smart filters, just leave me a comment and I’ll expand on that more.

So you can see that I added sharpen and lens correction filters to my image. In the lens correction filter I’m applying a vignette to my image. A vignette is an effect that darkens the corners of your image, which you should be able to see if you compare the original to the final image. Then on top of the lens correction filter I applied a sharpen filter to just slightly bring out more detail in the shot. Another key thing with smart filters is that you can adjust the opacity (transparency) of that effect on your image. In the case of the sharpen filter I dropped it’s effect down to 35%.

That’s it. In the spirit of knowledge sharing I’ve provided the psd file of this image in case any of you want to open it up yourselves and look at each layer more closely. You will be able to open this in CS2, but it will give you a few error messages and I think it will either apply or remove the smart filters that are on the bottom image layer. You should at least be able to see the adjustment layer settings, which are the more important pieces of this effect.

Hope this was helpful or at least fun to read. My thanks to Aaron Ivey for the inspiration, my friends for asking how to do this which encouraged me to try it out and for whoever it was that took the photo of this guy that I used in this example...maybe I should just thank Flickr for that one then.

Download the PSD

I’ve always believed in the policy that if you take care of your employees, they will be happier and more productive. And so much so, that the company will grow beyond the growth rate if you had taken that same time and money and put it into the company itself. I’ll never forget working for a boss and asking for a specific software and laptop and the response I got was, “If we really need it and it will help… buy two.” I was completely floored and what resulted was me working very hard to complete the project.

This morning I picked up an article called, Workplace Experiments from 37signals where they posted about some of the things that they are doing to take care of employees and encourage them to grow. Being that 37signals is making a ton of money and can afford to throw some money around I think the normal small design firm will say.. “Yeah I want to do that some day!”, but the truth is that any company can apply these kinds of things no matter what their income is. I figured I’d make a similar post about things that our company has done from day one… even when we had almost no money and were just 2 guys going, “Uh.. I think we should build websites.”

One of the first things we did when we outlined money flow for the company was put at least 20% - 25% of the gross income from every project back into the company. This money was primarily used to pay for client lunches, gas to/from meetings, general client expenses, etc… We could have just taken payment on the balance of that money but we choose instead to keep it in the company. We had several categories that money would be available for:

Software Upgrades
We always wanted to stay current with what is out there so we can buy upgrades for Adobe/Macromedia products, plugins for various software, movie loops for animations, fonts, and/or pay versions of free software if it made it easier (i.e. FTP Programs). What we found is that there is an excitement around getting new software. It makes you want to use it and do something cool with it. Sure you get the same feeling with free software, but there is something to be said for taking hard earned money, buying a nice product… and then using it.

Books
Anytime we’d see something that we really felt we could use for better understanding.. we’d buy it. Of course we’d always hit the Half-Priced Bookstore first! We didn’t want any barrier to learning something new.

Conferences/Tutorials
The company always foots the bill for conferences. Signup fees, gas, hotel, food… the whole nine yards. We feel if we think it necessary to go, then the company will benefit. And being away from family is a hard thing to do no matter what the reason so hopefully not having any out of pocket expenses helps with that.

Personal Lunches
Anytime we all go to lunch, even for just hang out time, Intereactive picks up the bill. Having things like “planned team building” is good, but real community and friendships are built over coffee, lunches, dinners or breakfast. We find it much easier to work through conflict of vision and ideas if we’ve already established friendships along the way.

Gifts
The internet is a great place to learn and there are a ton of forums out there. Every so often you run across a person that has gone out of their way to help you get something done and a nice gift card to Amazon is always nice to give. While these people aren’t official employees of Intereactive, they are helping us get our jobs done!

Our mindset is that even though we are only a 2-4 person company we want to think like a larger company. We want to feel like what we get paid for is ours and that there is a definitive split between the company money and personal money. Please note that we are not advocating haphazard spending. You have to set up a budget and allocate that money. Currently in our transition of our company we’ve had to limit alot of that spending because income has drastically decreased. For instance, the first thing we scaled back was company paid personal lunches and we now have to plan for other purchases a little more. But we still have that element of taking care of and encouraging the employees no matter what our income. I love working for Intereactive.. not just because I own part of it, but because we’ve made it a fun company to be a part of.

Okay this is really cool.  We browse the excellent articles of Smashing Magazine on a regular basis and today we were extremely surprised and honored to see that the design of our main menu made the list of Navigation Menus: Trends and Examples.  A lot of care went into our menu when we designed it and it’s awesome to get recognition for our hard work.

Allow me to throw a little love back to Smashing Magazine.  If you are a designer or developer and are not familiar with Smashing Magazine, then you owe it to yourself to visit their site and subscribe to their article RSS feed.  It has proved to be a great resource of inspiration and information for us.  Plus you can clearly see that they have good taste.