I got to working and had the site done in about 30 minutes. The first thing I did was tweet the link to all of my Reds twitter users and some other Cincinnati public figures. A couple of my first retweets were from @JohnGumm (Weather Man, Ch 12), @RedLegNation (Reds Blog), @JFraz14 (Todd Fraziers GF), @DallasLatos (Mat Latos wife/Blogger), @JamieBlog (Media Relations for Reds). The site had 300+ visits in the first hour and had 832 visits in the first day. The site continued to do pretty good and got a lot more social media coverage (800+ shares in the first 2 days).

On Wednesday, 9/5, I woke up and had an email from Katie Clavey, the Online/Social Media Reporter for Channel 12 in Cincinnati. She stated in the email she wanted me to write up a description about why I created the site, it’s purpose and what I would like to ultimately see happen. I had 50 minutes to write a response and get my ass all the way to Hamilton for my 10am class. I wrote the following back:

Katie,
Thanks so much for the email! My main goal with RedsCountdown.com is to excite the city about the play offs and to build up that play off atmosphere early. This team is really something to be proud of and to rally behind and that is the goal of RedsCountdown.com. As the Reds magic number gets closer and closer to that 0 I am going to bring back jerseys from the reds past as a way to remember reds past players and also celebrate current players.

My goal once the magic number hits zero is to turn it into a countdown to the big number that this city really wants to see: The number till we clinch the World Series. The site will serve as easy reminder of all that this team has accomplished this year as well as a great look back at what they have already accomplished as the most decorated franchise in history. This city deserves a play off team and more media presence. Being a college student there is not much that I can do to help with that, but there is one thing I know how to do well and that is create web sites. So, I used what I know how to do best and it really took off. With over 1000 visitors in the first day and over 500 social shares I can really say this city is energized and they are ready to see this team #TakeTheCentral!

I also reached out to her on Twitter to let her know that I had emailed her. I got a response from her letting me know that my site would be covered the next day on the air.

RedsCountdown.com was featured on Channel 12 in Cincinnati at 6:19am on “Good Morning Cincinnati” and also on the 6 o’clock news. You can see the video below. I also got a write up on Local12.com.

The site has really taken off since the coverage on the news. Its averaging 900 visits a day with the average visitor spending 50 seconds on the site. It has been visited by 47 states and 23 different countries. As of writing this post it has been shared 2378 times, with over 1000 Facebook likes/shares and over 600 Twitter mentions/shares.I also found out today that I have been given 4 free tickets to an upcoming Reds game by the Reds!

The way this little project took off has really blown me away and has shown me the true power of Social media. It has has been seen now by more than 4000 people ( not including the people that saw it on the news ). The only cost of this project was the $10 bucks for the domain name, it had no other marketing done at all. This really shows that with some hard work and a good social media plan, online marketing is a must have marketing tool and can pay dividends. I can’t wait to see where this goes and to also take that Jersey number down to 0 and watch my Reds in the World Series

Learning to Code HTML, CSS and Design Web Sites

This is going to be your hardest part, if you haven’t already started on this part. Learning to code HTML and CSS can be pretty frustrating and designing web sites can be even worse. You have to take your time and really concentrate on learning to code the right way. Skipping out on this and just using a WYSIWYG program is only going to kill you later on. Learn the latest tech and keep working at it. Learn all you can about HTML5, CSS3 and JavaScript as your going to know all of those to be successful.

Do you need some awesome links to help you with these? I really suggest using CodeAcademy(http://www.codecademy.com/) it walks you through everything you need to learn and actually lets you type it out using its online interface. Starting out you will need their web fundamentals course (http://www.codecademy.com/tracks/web) but later on take a look at their Javascript and JQuery courses.

Designing is really an acquired taste. A lot of it is playing around, learning from others and experimenting. Download Photoshop and head over to PSDTuts (http://psd.tutsplus.com/) , they have a lot of great content that will really help you learn all about Photoshop and the techniques that we use to create all the elements. You also need to learn good design principles. Take a look at some of the best sites on the web by using a CSS gallery (http://csselite.com , http://www.awwwards.com/ , http://cssheaven.com etc) these are some of the best designed sites on the web and really give you inspiration and lets you see what is hot and what you need to work towards.

How to Get Clients

Getting web design clients is always one of the hardest part about being a freelance web designer, and its even worse starting off. Here’s some things you can do if you are just starting to design web sites:

• Ask family, friends, acquaintances etc. if they need a web site designed, they may not bring you all the bank you need but it will definitely get your name out there.
• Do non-profit design work. Get a hold of non-profits thats web sites need work and offer to help them. It will get your name out there for doing a good dead and also help you network.
• Check Craigslist/web. Head over to your cities Craigslist site and put /web after the address. That will lead you to the web design section. There is always people looking for cheap work and interns on Craigslist and it can really help you.
• Post an ad on eBay. This goes for really any body looking for web design work. People love eBay and they look for everything on there. I still have a lot of work sent to me on eBay and it’s pretty cheap (15 bucks for a 30 day ad).

Once you start to get a solid client base built up start to ask for referrals and build a referral program. Reward your clients for sending you work, maybe a certain percent or a base number. Take a look at creating a successful referral program.

Maintaining Your Web Design Client Relationships

When you are a freelance web designer you do not have all the resources that the bigger companies have, and that’s usually a good thing. You do need to have some basic business sense and communication skills. Constant communication between you and your clients is pivotal and means a lot to your success. Nobody ever wants to be forgotten about. You need to keep a list of all your clients and emails so you know everything that is going on. You also need to keep all your financials in line. The best invoicing software that I have used is called Pancake App (http://pancakeapp.com/) it handles all your invoicing for you, does client management and can do recurring payments, its well worth the initial investment.

You also really need to work out how you are going to communicate with your clients. Sure the phone, email, im, text, Skype etc will work but sometimes you need more. For that I suggest using Podio (https://podio.com). Podio is a great communication app that lets you share files, interact with clients, create lists, and do much more. Its a great system to keep your life less hectic and keep your clients informed and up to date.

Being a freelance web designer is really a crazy lifestyle. You have to be ready to put in longer days, challenge yourself, face some hardships and overcome challenges but its all worth it in the end knowing that you control your destiny and knowing that its all up to you. If your not doing what you love right now, why not take a shot?

Did I miss anything that you would tell a freelance designer or developer starting out? What would you tell your younger self? Sound in using the comments below!

In order for a referral program to work you really need to make the incentives worth it for your customers. My referral system uses a tiered system to reward for new clients. For example:

If the customer they sent me has a project under 400$ they get 50$, if they send one from 400-700 they get 75$, 701-1000$ gets 100$ and anything over that gets 150$. It insures that I am still making a good profit while rewarding my clients with a pretty good payday for just mentioning my name.

Another thing you need to make sure of is that you are paying your referrers in a timely manner. Nobody wants to have to wait months on months for there money. If you pay fast you are insured that they are going to use your service again and again.

The last step is to make sure that all your clients or customers know about the program, weather that be including it on your newsletter, telling them in person, emailing them individually about it or posting it on your web site. The program won’t do you any good at all if your customers don’t know about it. You also need to keep reminding them. Its a known fact that people these days are very forgetful. So don’t be afraid to mention it every month in your newsletter, Facebook and Twitter.

If you want to see any example of my referral program you can see it at: http://jibdesigns.com/referralworks .

and here’s my new design..

Its pretty easy to make your own. I will attach my custom Template. It is the exact size that you need and has the space shown where your actual profile picture is so you can have some fun with that.  I am going to be posting some of the best in a post. So add them to here and lets see them!

If you are interested in having a custom design done email me at jake at jibdesigns.com. My rate is 150$ for a completely custom design.

Get the template here: www.megaupload.com/?d=VPBENDQB

Creating The Static Site Using Only XHTML and CSS

I begin coding all of my themes by designing the basic site in XHTML and CSS. This is the step where I create all my graphics and repeating backgrounds I will need and the basic layout. I also perfect my CSS and my XHTML to make sure that when I start coding my loop and all my other WP functions the site will be easy to create. I also comment out the end of my header, my container, any sidebars and the beginning of my footer.

Filling in WordPress Loops. Adding to .PHP files. Creating Custom WordPress Theme

After coding the basic layout in XHTML and CSS, I start plugging in the basic info in a blank WordPress theme that I have. I start by copying my header parts from the basic XHTML file into header.php and the container into my index.php and footer into footer.php and everything else in its designated php file. Once everything is in its php files I start replacing images so that they use the proper in the image link. Once all that’s done I start working on the loops. I have already commented into my html where the loops are and the default css,xhtml foundation is already set so I just start plugging things in. The most important parts are getting the foundation set so that when it loops it will display correctly. Once you get everything working right in the XHTML file its all easy sailing from there. What I suggest doing is making sure you know the different tags and formatting that WordPress uses. Also make sure to use the query_posts to your advantage, that’s a really easy way to make specialized post areas by utilizing the category id.

So its just plug and play. This is just one way out of a million ways to code a custom WordPress theme. How do you go about it? Do you start from the top and not even mess with the XHTML file or do you use more planning? Let me know in the below comments. This is just a real small portion of what goes into making a custom wordpress theme, I didn’t cover magicfields, custom fields, custom page themes, any commenting themes, widget/plugins etc. If you want to see some more info on those subjects let me know and I’ll write some more posts. Until then, Jake

Meta Tags Used By Mobile Safari

To make your app full screen when it is added to the iPhone /iPad home screen using the + button on the browser, the below meta tag will remove all buttons and the url bar and will give it the “native” app look that we are going after. To use any of the meta tags below just add them somewhere in your head tag.

Now when you pinch on the app it will still zoom and scale. Now, native apps will not zoom or scale, so when need to do something to stop that. Luckily Apple has designed a Meta tag to do that also..

The last thing that you may notice is when you tug the app up or down it kinda zooms down and you can see the “background” of the browser. Apple has also designed a meta tag to get rid of that. However, you do need to add a tag to your body tag also. Below is an example…

Home Page Icon

Now to make a home page icon for your app, open your favorite image editor and start a new document sized 72×72. Then design your icon and save it as apple-touch-icon.png and save it to the same folder that your index.html file is located. Now take the below code and paste it in your head tag somewhere.

Making Links Open Fullscreen and Not In Safari

Now this was one of the most frustrating problems I had with making my web app in the beginning. If you use…

that tag will take you straight out of your fullscreen app and right into the normal safari, we don’t want that. So the solution to get past this is to use a little bit of Javascript. Now, how we would do this using the Javascript is below…

Now some of you familiar with Javascript will see that we are using the ontouchstart instead of onclick. This is a iPhone/iPad only event trigger that will only work on iOS devices. Its a lot smoother on iOS devices but will not work on computers. You can use that event trigger anywhere in your web app. Since onclick takes about one extra second for the device to read, ontouch start is a great asset to have on our side.

Dragging and Dropping Elements

Now what if your user wants to take a certain element and drag it around with there finger? How are we going to do this? Well the technique that I am using is called Drag Drop Library. Its very simple to use, go to this website http://www.gotproject.com/blog/post2.html , download their javascrupt Library using the green button. Then link to that JavaScript file on any page where you would want to use drag and drop. Now, the syntax for getting an element to be able to be dragged is below…

So what you are going to do is give an element that you want to be able to be dragged a unique ID using css. Then take that css and input it into the above code that reads ‘id_of_element’. So that sample code would find and html element that has a id=”id_of_element” and make it be able to be dragged around by the users finger. It’s fairly simple and creates an awesome “WOW” affect with your apps.

iPhone and iPad web apps are slowly becoming more wide spread around the world. Especially now that Apple is finally giving us Web Designers and Developers the required tools. Now every iOS developer doesn’t have to be an Obj C wizard and have a mac, any person with a little HTML know how can create easy, good looking apps.

Update 2/17/11:

Getting iPad Web App to Work Offline Using Localhost, not Cache-Manifest

I spent so much time looking around trying to figure out how I was going to get my web app to work offline. My client will be using the app at large conferences to showcase there product and give a presentation. Wifi is very very unstable at large conferences so it is necessary to make it work offline. What I finally decided to do was to Jailbreak each iPad, and install a server on the localhost of the iPad. To do that I used a program on Cydia called PHPod. This creates a server on that iPad and gives me access to files stored directly on the iPad. What I did next was SSH into the iPad and copy my entire Web App into the WWW directory. Next, I went to localhost on safari on the iPad, clicked my web app and boom there it is right on the iPad. It runs fast, my JQuery still works, all my forms work, its perfect. Now I am looking to make my own Cydia repo where I can host the web app so that the clients wont have to ssh into the iPad every time there is a change. It will just update the package and the site will be updated by the Repo. Yes there is the option to use Cache Manifest and all that but it doesn’t really work all the time and there’s a limit so I couldn’t cache all my videos and larger files etc.