I have been meeting with a guy named Jesse Segna randomly since we had a common client Pure Imagination Chocolatier. Jesse does some web design but he is famous for his branding and logo design. He has names like Chris Perry Golf and Wendy’s Old Fashioned Hamburgers under his belt and anyone from the Buckeye Nation will recognize these names:)

What I am getting at is that you should always play with people you admire and respect; even if it is the competition. The only way to get better is to be jealous of others talents. I don’t mean this in terms of obsession or some religious theme.  All I am saying is that you should surround yourself with talent and with your drive/determination you can become as good or better than your competition.

Jesse and I have been sharing clients for years now and as we continue to meet-up and share ideas we both get better and ultimately we end up sharing more clients. I wish I had more friendships that were professional because no one steps on your toes and the result is more fun, more clients, and we both get better at what we do.

Wil Schroter, a friend and serial entrepreneur, once said in a famous blog post, at least to me, that …If you are unwilling to share your ideas with the masses, then your ideas are worth nothing…  Basically if you don’t believe in the execution of your idea it is a commodity and you are better off selling gasoline at at a BP.

CONCLUSION:
Share your ideas in person! Everyone will reap the benefits. Go Capitalism!!!

Give us a shout so we can start working together!

We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR or Scalable Inman Flash Replacement. Come on, I’ll show you how to do this in 15 minutes or less.

This is a quick start tutorial and will accomplish two things:

• Replacement of your site’s <h1> tags, if you have any
• Replacement of a CSS class named “replace-me” which we will create on a page

Things you will need for this tutorial:

• A simple text editor (I use Dreamweaver CS3 – you can use anything)
• Adobe Flash (I use Flash CS3 Professional)
• A font you like (I like to look on daFont.com – they are free:)

Lets get started

Step #1: Download and unzip the latest version of the sIFR project here. This tutorial uses sIFR-2.0.7
Step #2: Fire up Adobe Flash and open sifr.fla (it is in the .zip file you just downloaded in step #1) If your version of Flash will not open up the sifr.fla file (Usually cs4 users) then you can download a compatible version here
Step #3: Double click on the stage.

Step #4: Select the Dynamic Text box on the stage.

Step #5: Change the font to one you like. Don’t worry about the font size as sIFR takes care of that for you. The font color will be defined later on in the implementation process.

Step #6: We are now done with Flash, so save the file as the name of the font you used and publish it (eg: swatch_it.fla). This helps when you have multiple fonts on a page.

Step #7: Open up your text editor and follow along. It is pretty easy to just cut and paste:)

Step #8: Open customize_me.as and change line 14 to your reflect your domain name. You just need your domain name here. It does not matter where you will be using sIFR on your site. Make sure you have one with www. and one without. Then save and close it.

example:

allowedDomains = new Array("*","www.toddsantoro.com","toddsantoro.com");

Step #9: Open up your site’s stylesheet (Hint: its a .css file)

Step #10: Add these lines to your sites stylesheet:

example:

.replace-me { font-size: 18px;  display: none !important; }
h1 { display:none !important; }

OR

.replace-me { font-size: 18px; height:75px; width:250px; padding-left:25px; }
h1 { display:none !important; font-size: 22px; }

The class replace-me will trigger sIFR to replace the text with a Flash movie that has your special font. For those people that do not have flash installed, they will see normal text. By adding attributes to the class you can achieve different results, be creative:) As for the <h1> tag… everywhere a <h1> tag is on your site, sIFR will replace it with a Flash movie.

Step #11: Now we bring everything together. Open up your header.php page if you have one. If not; open up the page you want to have sIFR replace your text on. I usually work with WordPress and it has a header.php file that is included on every page of my site.

Add these lines to the <head></head> of your page:

<script src="sIFR-2.0.7/sifr.js" type="text/javascript"></script>
<script src="sIFR-2.0.7/sifr-addons.js" type="text/javascript"></script>

Step #12: Add this line somewhere in the <body></body> of your page:

<div class="replace-me">This is the text I wanted to replace.  Yippie!</div>

Step #13: Open up footer.php if you have one or continue working with the file you were just working with in Step #12. Add these lines just before the ending </body> tag:

<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }</script>
 
<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }</script>

Be sure to set your font and link colors in the code above. Also make sure your paths to stuff are correct. You can also combine these like this:

<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"h1,#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }</script>

Notice that I simply added a comma to separate the two CSS elements I wanted to replace. This method would also render the same font colors on both <h1> tags and the replace-me class.

Step #14: You are done!  Upload all of your files to your server and check out your work.  If you have problems… I would first make sure all of the paths to the sIFR stuff are correct and that you have uploaded all of the sIFR files.

I will try to help troubleshoot if you post your comments below.

Cheers!

We started with numerous phone conversations and chat sessions.  We were trying to figure out who the audience was, what the goals of the site were, and what the brand would come to mean. We developed a smooth identity that signified the brand and moved on to UI.

Once the wire frames were hashed out we proceeded to online collaboration with Concept Share where all visuals were communicated with the client. The client had the opportunity to mark up the designs right on their screen.  Online collaboration allows for a smoother development cycle because it keeps the conversation going forward.

Once the site was completed and tested we moved it to a production server and turned it on, so to speak.  The site has been gaining steady traffic since going live and presents an image Icon Global can be proud of. Mr. Angwin, President of Icon Global Sports says, “The site gives my business a high-end look and feel. We deal with the worlds top athletic brands in New York City so competition is all over the place.  ToddSantoro.com Designs helped us achieve this look.”

• Logo / branding design
• Web design
• Graphic design
• IconGlobalSports.com

It’s really easy to peruse some nice website gallery, and point to a nice looking site and say “YES!” that is exactly what I want. I like that one the best. It’s a more serious responsibility to understand what makes a successful web site and why. The new site had to be easy to navigate and to satisfy The Brown Bag’s core aims to sell more gourmet sandwiches and to show a commitment to the deli customer; desiring their loyalty.

So what did we do?  We started eating and sketching our initial thoughts, of course. The food was delicious and we were inspired to create a website that said come and eat at The Brown Bag Deli!

Great design follows function

During the first meeting with Molly and Josie it was clear that they wanted something unique and easy to use.  We looked around The Brown Bag Deli and noticed the casual feel in the restaurant.  After speaking with the two ladies for a while we had what we needed. We were armed with photos, interviews with the client, sketches, and ideas for the first proof.

Sweat the small stuff

It does not take long to bounce around from casual dining site to casual dining site before you realize that they all looked like a line of ants, they were the same! We set out to change this.

We photographed every sandwich the Brown Bag had and gave them a brown bag frame to complete the look.  Little details like this immediately speak to the customer saying come and eat me.

Tada!

The Brown Bag Deli now has a site that embodies their culture and helps bring in new customers. “We have been consistently thrilled with both the creative and professional services ToddSantoro.com Designs’ provides, as well as the outcome we have seen as a result of the marketing strategies they continue to facilitate” said, Molly.

Their email list went from zero to over 600 the first year. Molly says, “so many people stop in or call, telling me they got the email and were drawn in as a result!”  The Brown Bag has established a very steady lunch and dinner crowd and recognizes that marketing is key in extending brand loyalty.