Give us a shout so we can start working together!

I noticed that my alma mater’s logo looked a little off.  I did some digging and even contacted a friend of mine with an officially licensed logo in PDF format.  It turns out that the logo is more than a little off.  As you can see below there are some large balance issues that make the design appear “off”.

The logo looks OK on its own but only a keen eye for pixels can identify the balance issues a logo may have.

If you could not get your reader to pick up the very large and consequently info heavy QR Code above don’t worry.  Try using the smaller one below.  It actually contains a link to the text of the blog post rather than the full text of the blog post.

Have a look at the tutorial and super style your WordPress dates on your posts.

I just got off the phone with a friend who really does not know much about web design and we got him set up with a Wordpress blog in 5 simple steps. After talking with him I decided to write a tutorial on how to set up a Wordpress website. This tutorial will take about 15 minutes if you don’t count file transfer time (FTP).

What you will need:

• A FTP program like FileZilla (I use Dreamweaver and FileZilla)
• A web hosting company (Obviously… I use Media Temple)
• A Text editor (I use Dreamweaver but you can use anything)

What this Tutorial will accomplish:

• You will have a basic Wordpress website running

Let’s get started…

Step #1. Download and unzip the latest version of Wordpress (This tutorial uses v. 2.9) into a local folder on your computer (remember where you unzipped it to)

Step #2. Create a database on your server and take note of those settings. Most hosting companies provide help documents on how to do this. Its should be really simple.

Step #3. Open up this file: wp-config-sample.php and SAVE AS wp-config.php right off the bat. Then edit the lines of code that talk about your database. Remember those settings I said to keep handy. You will need them here.

//  MySQL settings - You can get this info from your web host  //
// The name of the database for WordPress //
define('DB_NAME', 'put_your_database_name_here');
 
// MySQL database username //
define('DB_USER', 'user_name_here');
 
// MySQL database password //
define('DB_PASSWORD', 'your_password_here');
 
// MySQL hostname 99% chance you will not have to change this value.  Some hosting providers like mine require something different.  This is something that anyone at the hosting company will know.//
define('DB_HOST', 'localhost');

Down a little further you will see the Unique Keys. FILL THESE WITH UNIQUE CHARACTERS LIKE:
86dfg79835g6%^$R@!^7^Hn76h&*!@Yhnd*@^#8yem They should all be different from each other and help with the security of your blog. Please do not use the ones provided in these examples and make sure to keep the single quotes around each value.

define('AUTH_KEY', ':dr+%/5V4sAUG-gg%aS*v;&xGhd%{YKC^Z7KKGh j>k[.Nf$y7iGKdJ3c*[Kr5Bg');
define('SECURE_AUTH_KEY', 'TufWOuA _.t>#+hA?^|3RfGTm>@*+S=8\"\'+\"}]<m#+}V)p:Qi?jXLq,<h\\`39m_(');
define('LOGGED_IN_KEY', 'S~AACm4h1;T^\"qW3_8Zv!Ji=y|)~5i63JI |Al[(<YS<2V^$T])=8Xh2a:b:}U_E');
define('NONCE_KEY', 'k1+EOc-&w?hG8j84>6L9v\"6C89NH?ui{*3\\(t09mumL/fFP_!K$JCEkLuy ={x{0');

For more security I like to change the table prefix from wp_ to something else.

// You can have multiple installations in one database if you give each a unique table prefix
$table_prefix  = 'r235_';   // Only numbers, letters, and underscores please!

Step #4. Fire up your FTP program and upload all of the files including the 3 directories to your web server.  This is where a lot of your time will be spent.

Step #5. Open up your favorite web browser and type your site’s address in the address bar and add /wp-admin/install.php. i.e. www.exampleurl.com/wp-admin/install.php or www.exampleulr.com/blog/wp-admin/install.php if you place Wordpress in another directory like blog. Fill in the simple info Wordpress asks for and your good to go!

That’s it!  You have now set up your first Wordpress site.

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.