Todd Santoro's Website Design Blog - Web 2.0 Design Firm Columbus, Ohio

jQuery + WordPress 3.3 may = problems

Jan

2012

If you have recently upgraded WordPress and found your theme a bit under the weather then you may have been a victim of “jQuery update”. This is what I am calling it. The simple solution it to look for all of the “$” DOLLAR signs within the<script> tags and replace them with “jQuery” (For all of the novices reading this please do not use or acknowledge DOUBLE QUOTES like this “. Only use what is inside the DOUBLE QUOTES.) This is a safety feature WP uses called no-conflict. You can read more about it here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.

Just about all jQuery / JavaScript issues can be eliminated by checking your code for “$” and changing it to “jQuery”.

Happy code hunting:)

WordCamp Columbus was awesome

Jun

2010

WordCamp Columbus was the first time I have ever attended a WordCamp and my first time speaking at the event. I met some great people doing some incredible things like John Cook of iqace.com who has developed a WP plug-in that provides video support for the back-end of WordPress right on the screen. My clients will love this!

I can’t wait to attend the next WordCamp somewhere in the US or beyond.

If you would like to view my presentation on designing a killer WordPress theme you can download it here.

WordCamp Columbus… here I come!

May

2010

I submitted a request to speak at WordCamp Columbus last week and just got word that I Will be speaking on June 19th, 2010.

I will be speaking about designing and developing a killer theme in WordPress. The talk will also include some WP3.0 tips and tricks.

If you are in the Columbus, Ohio region on June 19th stop on by WordCamp Columbus @ The Ohio State University http://wordcampcolumbus.com, it’s FREE!

3 tools of the trade

Apr

2010

This post is not about geeks, nerds or what ever else you might call a tool. It’s about my favorite design tools I use on a daily basis.

1. The first is called Concept Share and it helps me communicate design proofs with my clients. It also saves me a ton of time. For a small fee per month you can collaborate with your clients in a visual way so they get exactly what they want and you don’t waste any of that precious time we designers need more of.

2. Fresh Books is a god send. Since I started using Fresh Books I get paid faster and my accountant loves me even more than before. There are plenty of free or open source invoicing applications out there but you get what you pay for. Plus if something happens you can always bang on their door and get satisfaction.

3. Delicious is a bookmarking service that keeps all of my “continuing education” links in one place. The search feature and the ability to keep links private save me more time and sanity that any other tool. How many times have you bookmarked a tutorial only to be unable find it when you need it. I rest my case.

These three tools are something that every designer should have in her/his arsenal. What tools are you using?

Why everyone should keep a professional face to face network

Apr

2010

Everyone should keep a professional network. I will go further and say that you should meet face to face on a regular basis. I will even go further and say that you should even consort with the enemy, your competition. It does not matter how many of these people you carouse with. Start off with one that you can stand. Just get off Facebook and Twitter. I know they are essential but human contact is something that is not simulated. I can hear my dad saying “The telephone is no place to do business” let alone SMS or the dinosaur e-mail, we won’t even mention the USPS.

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!!!

We now offer iPhone and iPod specific website design

Feb

2010

We now have the capabilities to develop iPhone and iPod specific websites with location features and touch and slide technologies.

Give us a shout so we can start working together!

The OSU logo screw up

Feb

2010

I am a stickler for details and balance so thought I would point out an example I recently saw that does a sub par job. Sometimes I can get tunnel vision and miss things too but the high profile logo of The Ohio State University should be perfect.

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.

Free WordPress Setup

Feb

2010

We are now offering free WordPress setup for any man, woman, or child. It does not matter if you are an individual or a company! We just want to help you get the most out of WordPress. Simply fill out the form below and we will contact you to schedule the setup. It’s that simple!

Your setup includes the following:

Uploading of the latest WordPress version to your server
Creation of a database on your host server
Standard Template activation
Testing

What it does not include:

A domain name (You can purchase one from a registrar)
A hosting account (You can purchase one from us for $240/yr or use one of your choice pending they can support the minimum requirements for WordPress. WordPress minimum requirements can be found here.)
Installation of additional themes, plugins, or widgets. WordPress makes this very easy; even for a novice:)
Custom coding or theme manipulation (We can be hired for these types of things and can be discussed when we speak)

cforms contact form by delicious:days

A complete blog post inside of a QR Code

Feb

2010

This blog post is completely contained in the QR Code below. It is a post about how to creatively use QR Codes in a successful mobile marketing campaign.

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.

WPbeginner publishes article written by Todd Santoro

Jan

2010

WPbeginner is a great resource for WordPress developers and has just published my article on CSS Sprites. Syed Balkhi, the founder of WPBeginner, has graciously allowed me to write an article as a guest author titled Use CSS Sprites to Beautify your WordPress Post Dates.

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

How to set up a wordpress blog in 5 simple steps

Dec

2009

Setting up a WordPress site in no time flat

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;&amp;xGhd%{YKC^Z7KKGh j&gt;k[.Nf$y7iGKdJ3c*[Kr5Bg');
define('SECURE_AUTH_KEY', 'TufWOuA _.t&gt;#+hA?^|3RfGTm&gt;@*+S=8\"\'+\"}]&lt;m#+}V)p:Qi?jXLq,&lt;h\\`39m_(');
define('LOGGED_IN_KEY', 'S~AACm4h1;T^\"qW3_8Zv!Ji=y|)~5i63JI |Al[(&lt;YS&lt;2V^$T])=8Xh2a:b:}U_E');
define('NONCE_KEY', 'k1+EOc-&amp;w?hG8j84&gt;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.

sIFR is how we made our headlines look so smashing

Dec

2009

Like the fonts our headlines are in?

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; }

.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!

Icon Global Sports Case Study

Nov

2009

Icon Global is a full service sales representation and market management agency. They were in need of a slick and polished web site that embodied the brands they represent.

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

The Brown Bag Deli Case Study

Aug

2009

Creation starts with a pencil and a sandwich

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.

Client background

The Brown Bag Deli is located in Historic German Village, close to downtown Columbus, Ohio. This long time resident of German Village offers a wide assortment of delicious hot and cold deli favorites, such as the Mohawk Stroller and The Village Addiction. The Brown Bag serves fresh crisp salads, homemade soups, and delectable desserts that change daily.

Services

Graphic Design
Web Design
Photography
Print
E-mail Marketing
thebrownbaggv.com

Client testimonial

“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”

-Molly M.
owner

Barrio Tapas Restaurant Case Study

Jul

2009

Something here…

A free Twitter background template that so many people need

Mar

2009

After looking at a lot of Twitter account pages I noticed one thing… There are not many backgrounds / customizations that pay attention to design, so I created a template for all of you to use here. It is a PSD file so you will need Photoshop CS or better to open it and change the design.

Remember that Twitter always centers the page so your design should make note of that so it displays correctly on multiple monitor sizes and resolutions.

Todd Santoro was a guest on Inside Mac Radio

Dec

2008

A few days ago Todd Santoro was a guest on Inside Mac Radio! Scott Sheppard was a great host and really easy to talk to about iPhone / iPod Touch games and apps that he helped create. Todd is a member of Accelerator Labs who develops iPhone and iPod apps. You can read and listen to the post on InsideMacRadio.com. The interview starts around 20 minutes in and continues for about 10 minutes.

Thanks again Scott!

QR Code text

Feb

1978

I have been playing around with QR Codes today and thought I would write a whole blog post about them.

I have a ton of ideas on how to use QR Codes in marketing so I will share a few of them here.

1. Use them in print ads to distribute coupons.

2. Use them in an interactive marketing campaign/scavenger hunt. eg. Client: McDonald’s – CTA: Announce that when a customer visits 10 different McDonald’s restaurants and scans the QR code on the door they get a burger coupon sent via SMS to their phone.

3. Use them in confetti. Print a number of loosing QR Codes on paper then one winning one and distribute them at a concert or event. All confetti QR Codes would include some marketing message too.

These are some of my ideas on how to creatively use QR Codes in a marketing campaign.

My firm is available for QR Code Marketing Campaigns and consulting.

ToddSantoro.com DesignsColumbus, Ohio Web Site Design

this is our sandbox. from time to time we will post items of interest.

our blog

jQuery + WordPress 3.3 may = problems

WordCamp Columbus was awesome

WordCamp Columbus… here I come!

3 tools of the trade

Why everyone should keep a professional face to face network

We now offer iPhone and iPod specific website design

The OSU logo screw up

Free WordPress Setup

A complete blog post inside of a QR Code

WPbeginner publishes article written by Todd Santoro

How to set up a wordpress blog in 5 simple steps

Setting up a WordPress site in no time flat

What you will need:

What this Tutorial will accomplish:

Let’s get started…

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

sIFR is how we made our headlines look so smashing

Like the fonts our headlines are in?

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

Things you will need for this tutorial:

Lets get started

Icon Global Sports Case Study

The Brown Bag Deli Case Study

Creation starts with a pencil and a sandwich

Great design follows function

Sweat the small stuff

Tada!

Client background

Services

Client testimonial

Barrio Tapas Restaurant Case Study

A free Twitter background template that so many people need

Todd Santoro was a guest on Inside Mac Radio

QR Code text