Tuesday, 12 March 2013
We are not all rock stars or movie stars, so we cannot just jump onto twitter and expect to have a massive following of millions one week into the process of tweeting. You have to start by being honest with yourself, how interesting am I? If you have an answer to that question then you will now how much of a following you can get.

The main thing you always need to remember when you are going for finding your masses, is the type of audience you want to attract. Someone with a more general interest is going to attract more followers than someone who’s tweeting about their chewed bubble gum collection. Although interesting, not many people want to hear about that or the flavours. However if you have a solid opinion about something interesting or can deliver news like the paperboy then you have a better chance at playing the game of tweeps roulette.

Here are some basic rules that you need to follow to create your public and gain minions.
Patience!
I can get you 10,000 twitter followers overnight!  But, only 25% of them are active and of that 25% they all live in countries that don’t speak your language.
That’s the catch people! Don’t pay someone to get you followers! Not only is it a black-hat, disrespectful method it is also a waste of your hard earned money. If you want to waste your cash like that I’ll send you a postage-paid envelope and you can just give it to me.
Gaining followers is sort of like gaining street credit. You have to earn the respect of your initial followers and more will come – and not overnight! Set yourself a realistic goal. Mine is 100 a month. Plain and simple, if I find half way through the month I am not going to meet my personal goal then I look back at what I may have done boring or wrong in the last 15 days. As your numbers grow then so should your goals. For example if I have 20,000 followers then I should be able to see my audience raise by another 1000 a month with some effort.

Think of the simple side of how you gain followers, if someone if following you then you will potentially show up as a suggestion for their followers. So the more people following you the more times you come up as a suggestion. Like the old fashion one friend tells two friends who both tell two friends concept. 
Engage vs. Influence
This is the tricky part. Who are you and what does your audience care about you? Myself, I am a human so people expect human interaction. Some others are a corporation so they expect it to be faceless and newsworthy. You need to sit down and figure out your Engagement with followers versus the influence you have over them.
We’ll use Pepsi-Cola as an example. If you were to find them on twitter you would only expect that they are going to blab about their products or sell-out style advertising because that’s the presence they already have. There is nothing wrong with this, it is just the natural expectation you should have with following them.
Now we will use Justin Bieber as another example. Although it may not actually be him doing all his tweets 100% of the time when you follow him you expect human interaction. He may not respond to you mentions, but when you read back through the tweets you see human conversation. This gives us the engagement factor.
The two extremes that you have to get to work together are these and it can be a tough formula to create sometimes. The best way it is to Post often during peak times for where you audience stretches. I post in the morning for my eastern followers and more at noon for the waking pacific followers. Then I toss in some in the afternoon & evening to satisfy the rest. Find other tweets that spark your interest and retweet them with a comment or just plain out reply to them. You’d be surprised how many people are ready for a conversation.
Content, Content, Content

This goes back to asking yourself if you are interesting. Well, are you? The content you put into your tweets will equal the interest people are looking for.
The key thing is pick a topic and stick with it. I post about social media and web design related material and do my best not trail away from it. And when I do I even put that it is off topic in the tweet.
You can trail off topic depending on your audience. I like to post the occasional geek related tweet because I know I have people that are interested in it in my follower-base. Take some time and look at some of the people that would potentially follow you and read what they tweet about.
Find your content from various sources. You can use a tool like Google Reader to watch multiple blogs and have fresh news daily. Retweet what others are talking about, but don’t overload it because then all you are doing is using other peoples words over and over again.
You can also write words of inspiration. Not everything has to be a link you found on the internet with a tweet button. Sometimes a little insight is refreshing for people to read and you will be surprised what you say can get a retweet.

#Overload!
Don’t over do it and don’t under do it. Find that happy medium of tweeting during the day that keeps people interested but not annoyed. If you have gained and lost followers, this is usually why. Nobody likes an overtalker and the same goes for an overtweeter.

Hashtags are useful, but not needed for every word in a tweet. You want to make a rule of thumb of how many is acceptable? How about 1! You are using a hashtag to show relevance to a topic, that’s all. So if you are posting something about a freebie, then just use a #freebie comment, not #free #freebie #nothing #totallyfree (see how annoying that is)

Don’t tweet overload. Posting 10 things in a row can be annoying to your readers as well. Separate things by a few minutes or you can use a tool like Sprout Social to schedule your posts.

Have Fun With It!
Twitter is not for complaining, it’s a modern forum of chatters. Nobody wants to hear your gripes and be dragged down by negativity. Post interesting things, fun things and happy things and you will see that people will love what you write!

Good luck and happy tweeting! @SyrupD

 

 
Friday, 1 March 2013
Well I took the moden.ie testing tool from Microsoft out for a run today and I have to admit it is a good pre-launch diagnostics tool. It tests for several components of a website and gives a semi-detailed report with suggestions.



It is now going to be a part of my tool set along site with browsershots and the w3 validator. Let's take a deeper look at this tool and what is helpful about it.

Easy to use, and fast!
Just plop in your website address and wait a minute. Then you are presented the results in the nice Microsoft look and feel web format. And yes, I tested it's own self in attempt to exploit the paradox theory and it passed.

 
It found problems!
You need not to have much worry if it does find any problems as it gives friendly solutions and suggestion of what you can do. It will also point you into the right direction of articles.

It looks for and solves in areas like
  • Compatibility issues
  • Frameworks you are using and versions of them
  • Web standards and document modes
  • Plugins you are using (or not using)
  • Correct browser detection methods
  • If your site is responsive to various resolutions and devices
  • And being it's Microsoft, if your site is touch capable.
Conclusion
Like I was saying earlier in this article, it's a great addition to a web developers set of online tools. Some may not care for it, but it may prove itself handy. Give it a shot and judge for yourself!
Monday, 25 February 2013


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.
 
One other thing to consider is that if you are going to use this section for advertising or promoting, do it right. Bing did a good job using this area wisely. When you do your header image you can do a pitch perfect design by stick to a 520px by 260px guideline.
 
 
 
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.
Monday, 18 February 2013
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.
Friday, 15 February 2013
 
With the Nintendo WiiU recently released and the Sony PlayStation 4 and Microsoft Xbox "Durango" announcement on the horizon we all may have to start rethinking our web design tactics again. The WiiU looks like it has modernized it's way of doing web browsing where it works well on the tablet, but how is it on the big screen?
 
Microsoft has been keen on apps lately and has recently added internet explorer finally to the Xbox which makes it another form of web browsing. Now PlayStation 3 has already proven console based web browsing unpopular, but that was because of the approach. we have found it mundane to use a joystick to navigate webpages. The new consoles will obviously use touch and Kinect style technologies which will make the user experience better and people will be more apt to try their web surfing again in this manner.
 
 
 
With newer technologies we might see a re-spark of this. I remember when Nintendo first added the Wii web browser was quite the hit. Everyone was pushing out flash games on giant typeface site. Well of course the new potential browsers we will obviously goal for building canvas style games, the idea we will need to look at is being "TV and Couch" friendly. I know this to well as I am a computer hooked-up to TV kind of guy, and 99% of sites suck on the big screen.
 
We did it for mobile phones, it took developers a little while but they finally got it right. Can we do it again? Well get your framework thinking caps on and prepare to ride the next wave of technology!
Thursday, 14 February 2013

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!

Wednesday, 13 February 2013
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!

Saturday, 9 February 2013
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!

 
 
I added the JS file into my includes directory for my site, and simply called it & the 1.7 JQuery right from the article (also can be done in a Custom HTML module). This is breaking so many rules, but because the browsers support it. You can also just copy and paste the CSS & Sample DIV from the sample file that comes with flex and see it working yourself.
 




After some adjustments and CSS changes, It turned into a nice little portfolio page for me at http://syrupd.com/portfolio. The next thing I will do is try to use this on my next client to showcase articles or a photo gallery, and migrate it into a proper extension for Joomla.
 

Thursday, 7 February 2013
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!