Your Twitter account is not only a hub for you, but is for your followers as well. Take a moment now and actually go and look at your twitter page and think about what you see. If you are young, healthy then you most likely have great eyesight. Not everyone does. Think if some might even get a migraine just from viewing your profile?

The way your Twitter design is laid out is an expression of your own marketing. Although we are not all celebrities or big companies where followers come just to follow us, we have to work for it. Having a profile that is horrific is the same affect a scarecrow would have on the birds in a cornfield. We are trying attract people to us, not scare them away.

The Twitter design consists of 5 possible parts you can use to your advantage in creating that unique twitter marketing look. But before we start, let's look at a couple of good and bad sites.

The Good:


The Bad:


Now that we have that out of the way, to the naked eye some might look normal enough. But there are aspects to all of them that just kill the look and the experience all together. Think about each of these parts of them: Header; Profile Image; Background Image; Link Colors and Image/Video history. Now when you take a look back to all these examples you can see where some succeed and some fail, and even epic fail.

We will now break it down part by part on do's and don'ts of working with your twitter look and feel.

The Background

First, Read this article: http://blog.spoongraphics.co.uk/tutorials/twitter-background-design-how-to-and-best-practices

We will start with the most important because it is the most prominent. If not done right you can just make the whole thing look ugly. For example, Google has a nice look and feel, but no matter how much they try to lighten their backdrop, it looks like crappy wallpaper in a children's hospital ward. Making it difficult to focus your eyes on the tweets.



If you do to little, then it will not be interesting. And less with a graphic that has absolutely nothing to do with you or your companies presence, will just ruin the whole thing. Like AOL.


Do it with a faded background going from left to right. Make the left different than right. Do a tiled background in a color scheme that wont burn the eyes. ABC tried and succeeded in this area.

The Header Image

First, Read this article: http://designshack.net/articles/graphics/how-to-design-the-perfect-twitter-header-image/

This is a nice touch you can add to your profile. If the background is your body, your profile image is your face then this is the your hair, and you don't want it to be messy. Go browsing around and you will find that 80% of these header images kill the text you are trying to read over them. CBS didn't get the memo about this. You can see by not reducing the balance of colors the text is just next to impossible to read clearly.
And if you want to do the collage thing, darken the image. Do a transparent overlay layer to make the color more solid. Take a page from Pepsi's book.




Profile Image:

Your profile image to be crisp, clear and eye catching. Even before looking at your actual Twitter page most people are going to see this first. So pretty much this is your first impression. There is no right or wrong to do this as it all depends on the type of personality you're trying to portray. Some tweeters use a personal picture and some use corporate logo. There are even some great cartoon drawings out there, speckyboy being one of my favorites.

Twitter is well programmed using some of the best technologies, so make sure you have a high quality crispy image and don't worry about loading times.

Link colors:

In Twitter we are restricted to the background color that we have on the actual tweets, but we can make hyperlinks any colors we want. For some reason some people seem to think that light orange goes great on white which is hardly the case.

So when picking your link colors make sure you either stick with the default or choose a darker color that will always be legible. You can keep with your color scheme just make sure you find a color in your palate that matches.

Image and Video History:

One final area that is always overlooked is the video and image history. When users visit your twitter page every image or video that you have directly shared shows up as a last six history on the left. These stand out quite a bit.

 I have yet to seen a page where anyone has taken advantage of this. You've seen it on Facebook where some have made their last pictures posted a work of marketing art so you could potentially get away with the same thing here. If there are any out there we would love to see it!

Conclusion:

If you are a big corporation, put a little effort into it. Drag your graphic designers into a board room and don't feed them until they have the perfect look for You.

However, if you are smaller and lack the talent, you could always find me @ http://www.syrupd.com and I would be more than happy to work with you to design that eye catching twitter page.

We all need to concentrate on making our websites compatible with all the funky resolutions around now a days, and responsive frameworks cut our job in half. I cheat sometimes and use ones built into software suites, but sometimes you need a solid framework to get the job done just right.


For example I recently had a site where they had a slogan & phone number on the right of the header, but I needed it to be prominent when scaled down to a mobile view. This is where I used an outside framework to get the job done just right. Here are four of the best ones I have tried out.


1) Bootstrap - http://twitter.github.com/bootstrap/index.html

By nerds for nerds they say. Well, it's by some folks at twitter so you know it's made by some seasoned programmers. It's is most likely the most widely used framework out there for doing a responsive site. It's very easy to use and implement, but also very powerful and customizable.

This is where most developers search for a framework starts and ends. But you don't know if you like all flavors of ice cream until you try them!



2) Cool Kitten - http://www.jalxob.com/cool-kitten/

Cool Kitten is fairly new to the scene but is a beautiful grid. It's smooth and seamless. I haven't gotten to deep into it yet, but it's very kind to work with. It would be a bad pun to say it's purrrfect?

Use this framework if you are planning on a long scrolling site. It has a cool parallax scrolling feature that adds a very nice look to your template. I'm just trying to find a reason to use it.


 3) Foundation 3 - http://foundation.zurb.com/

They call it advanced and it is. If you have passed by this one I suggest trying it again. It's very potent when it comes to making a responsive site. Major things I love about this framework is the CSS Pre-Processor.

It's super speedy and makes for a fast loading website. The grid system is something to brag about too. I have never had a problem lining my div's up for battle using this one.



4) CSS Grid - http://cssgrid.net/
If you know you will have users in many, many different resolutions. This is an awesome backend to use. I have thrown it around in different sizes and it has never misbehaved.

It's very clean and smooth. It's not as powerful for gridding and loading as the others, but packs a punch in display resolution.

CAPTCHA, good thing or bad thing? We all run into them and get very, very annoyed when they don't work right. And we have all noticed they have gotten harder and harder to decipher. Although we have to give these little boxes of injustice credit, they have slowed down the spam to some of our inboxes and hacking our passwords. This all came up after reading a great article today (http://www.webdesignerdepot.com/2013/02/recaptchaing-the-importance-of-ux/)

You also have to be careful of which one you use because spammers are sneaky, which is why they do what they do. If you use something that just images as letters, or something with a few strikes through the letters this will not always work. OCR has come a long way and can be done easily with these.

So lets cover what we have available to use..

reCAPTCHA
http://www.google.com/recaptcha

First, I bet you didn't know Google had their hands in this pot. Don't think of this as a money maker for this, this is part of Google's awesome plan to digitally archive the world.

So it's not that reCaptcha is trying to push some nasty hard to read words at you, it is actually trying to help archive something Google has not been able to OCR and digitally archive. So in all actuality, don't hate it, appreciate it! It is doing good for the world. It may be annoying but it is helpful. This is also depending on your audience, if you are going to have impatient or visitors that would have trouble deciphering the words, then you might want to consider an alternative.


 
Visual Captchahttp://visualcaptcha.net/
This is really a nice change of pace, it's very hard to get this one wrong. They also claim to be very mobile friendly.  I tested it on my Galaxy S3 and it worked very well. You don't have to drag it, just press on the right object and it drops into the circle. It is easy enough to implement and is built on our ever favorite JQuery (Supports 1.9 and under) and uses PHP. This also means you could technically mess around with the source and have some customizations to it.


Securimage
http://www.phpcaptcha.org/try-securimage/

As I was talking about OCR and you have to really cover the letters, Securimage really stood out. Somehow the codes are still legible but very covered. I took it through some OCR tests using Acrobat Pro X, which does a really, really good job at OCR and it failed miserably. It's very lightweight and based on PHP so it can easily streamlined into any code or CMS.

MotionCAPTCHA
http://www.josscrowcroft.com/projects/motioncaptcha-jquery-plugin/

This one is beautiful. Written by Joss Crowcroft it utilizes JQuery yet again to make a very elegant way of determining if the form-filler is human. Granted someone could code a way around this, but this one is fun and can be touch screen friendly. I give it total innovation points!


DigitalSpin
http://www.digital-spin.com/demo.php

This is more of a collection of CAPTCHA's. There is the Puzzle, The Smarties Chase (M&M's for American's) and my favorite the Horse Race. You don't get much more creative or human testing than this!

Go to their website and try the demos, even if you are not going to use them, they are still fun to play with!

No matter how many fancy tools we get in the world, some web developers like myself still love the basics. Sometimes I wonder what it is that others are using, if they are taking the easy way out?

Ahhhhhhh! ASP and Exchange! is this really the screenshot I picked??!?


I look back 20 years ago when doing HTML was a hard-coded art. We didn't have much back then, nor could most of us even afford what was on the market as time grew, until shareware and freeware began to form. Heck, HTML wasn't even mainstream for most until near 1995 when Microsoft FrontPage (Vermeer FrontPage 1.0 actually. Remember, Billy G. buy's things and improves them, he doesn't make the recipes) was first introduced. I remember I learned HTML by doing the simple task of View Source. According to about.com, this may have even been one of the first HTML editors, by one of it's first authors, Tim Berners-Lee.

Needless to say, we all pretty much used notepad back then to start out. Now we have a plethora of options and I wanted to put together an updated list for us old-schoolers.

Notepad++
http://notepad-plus-plus.org/

This program I can say is at the top of most peoples list, and I honestly live by it. I have a lot of time not been connected to any internet while working on some code. Notepad++ is perfect for straight forward coding for the hardcore scripter. It has wonderful syntax highlighting and supports many languages (programming languages that is). The only thing it lacks is a library. But it has great searching, excellent plug-ins and you can do macros! Even if you already have multiple editors, you should still just replace your regular windows notepad with this. For you Mac Users, Use Text Wrangler: http://www.barebones.com/products/textwrangler/


Microsoft WebMatrix 2
http://www.microsoft.com/web/webmatrix/

So I first downloaded WebMatrix 2 expecting it to be a WYSIWYG editor, in classic Microsoft style. However this is not what I got. Instead I was greeted with package after package being installed. Once it was all done I had a nifty little demo lab running on my pathetic laptop. On first launch this baby installs a lite version of SQL and IIS for all your playing needs. Now this program was a bit more confusing to get started with than other programs, but then proved itself pretty powerful. I love how if you don't know of a framework out there it will offer you some to work with, or you can just jump right into a working directory and get ripping through some code. I keep the bad part as Hard to use, but man this thing has one heck of a built in Library. Honestly combined with Notepad++ you can do some lethal coding. Or I could finally write that macro to take over the world.

NetBeanshttp://netbeans.org/

So, if you don't know, NetBeans = Oracle. Basically that means it's one powerful yet confusing program. It took me a long time to get the hang of NetBeans. But it is true what they say, once you use it you will never go back. I am horrible at Java, I can do it, but it requires one hell of a memory to program right in it. We all want to be amazing at JQuery, however not many can do it without cheating at it. Here comes NetBeans to save the day. It is for programming Java Web Applications and JEE. We use it for writing easy and wicked JQuery parts. It will support all your code and syntax everything, but don't expect it to mash all your PHP together. If you are cool with doing your PHP blindfolded, but need to peek for the Java stuff, then this is your program. Your desktop should not be without it. Grab a coffee and get ready for a long but satisfying installation. The netbeans.org community has plenty of tutorials, starting guides and plugins to get you rolling around in your freshly brewed code.

Hopefully you have a better artillery for getting your web programming done and these applications bring some amazing things from your mind to keyboard to the web.

Happy Coding!

I needed to add a nifty JQuery style image grid to my portfolio page in a really easy way, since I did not have the time to code anything special. There was no Joomla extension that met my needs so I went looking for a nice JQuery script. I found Flex (http://jsonenglish.com/projects/flex/) looked great!

404, Page Not Found... most likely the most undersigned page and not many developers even think about doing this. Just use the default they say. At least some don't and they use this as an adventure. I saw this today when Algonquin College update theirs for Valentines Day using Lionel Richie (http://www.algonquincollege.com/404.html)

Seeing this sparked a little hunt for some good and funny 404 pages to keep a website's audience entertained. It's also a great marketing push to show your company has a little bit of a funny bone hidden in it's depth of professionalism.

Say it with Chuck Norris!

 Use it as a dating request!






Say it with while providing comfort..


Go off the wall!
Be original! Use a comic strip!

Use classic error symbols, like image not found.



Use old and memorable terms, like "Uh-Oh Spaghetti-O's!"


 Capture your readers genre



Make it entertaining, and playable!


Admit you own embarrassment! 

I have been working with a client who wants something simple, yet oddly complicated added to their website. It is a restaurant who wants to be able to allow their customers to pre-order food online and have it waiting for them when they arrive to the restaurant.

As usual the site was designed with my personal favorite, Joomla. When I was going through the various options I looked at extensions available for this, but nothing was the right pick. They were all too in depth and do not offer the simplicity needed. All I need is to be able to add items to a virtual cart, add a total and email the restaurant (and the customer) the order. No payment, no checkout.

Then I decided to try some old fashion methods of using cookies since I don't really have a need to go fancy and save the order and use sessions. This worked fine when I used the desktop version, but then found that some of the mobile clients did not agree with this method. It was back to the drawing board.

Now I was about to step into the world of JQuery for my next attempt. When I started to do my research on how I would approach this method I found an interesting tool, called simpleCart(js)

This met all my criteria, plus it's free and open source! It was very easy to implement into Joomla, all I did was call the file from my template's index.php. Then I added the call to create the cart. Using the html editor built into JCE (another favorite!) it filled in so well.

So if you are looking for a simple shopping cart, it's named perfectly for what it does. They are anticipating a new version this month which I am excited to see and will be using it again for the quick shopping carts that I may need. I want to try it's call back to paypal one day soon.