Yesterday here at Bytewire we had a most interesting debate about something which was seemingly un-important when it began. Let me explain the situation and set the scene quickly, before I dive right into the debate at hand.

Our popular online game, Street Crime, which we have been developing for over 2 years now has a reasonably intuitive, clever design and interface. However as we have expanded on the game and built lots of new features we have found the left hand menu, which importantly is our main menu in the game growing increasingly vertically larger and is now in our opinion a little overwhelming for new players. The left hand menu is divided into subsections and each subsection is collapsable and expandable and the state is held as the user flicks through pages. The left hand menu consists of around 40-50 links to other pages, which is pretty large as things go.

So along comes Friday and we have a new feature to release into Street Crime, yet we are not sure where it belongs, on the one hand we want our players to see it but on the other hand we have got to draw the line at making the left hand menu larger and larger, somewhere right!? Looking at this in more detail made us start to think, how incredibly important menus, navigations and terminology of the items in the menu really, really was to our game and to the players playing it. After about an hour of deliberation we had split our views into two seperate view points or theories if you like.

The Blue Pill or The Spoon Fed Approach

The first of which is the Blue Pill or the Spoon Fed approach which regards users as thickle, lazy and that they require spoon feeding to find what they are looking for. We Adopted the blue pill/red pill matrix scene to our game, arguing that if you opted to take the blue pill, you are thickle and you want everything in front of you in an easy navigation menu with a simple one click depth and you are happy that you know this is where you will find everything and that it will only be a case of scowering through the long menu list to find what your looking for, look hard enough and you will find it. By looking at this approach we identified some pro’s and con’s particularly adapted to the way our online ‘game’ works.

Cons

• Menu items get forgotten about as they are hidden by the player to make the menu small and manageable enough.
• New players feel overwhelmed by a large menu
• Forcibly not allowing a user to explore deeper into the rabbit hole at his or her own leisure.
• Get what you click approach – not always the best approach especially not so for online games.

Pros

• Its quick
• Minimal effort
• You get what you click
• Everything is in the menu somewhere approach

The Red Pill or Depth In Pages Approach

“Take the red pill and see how deep the rabbit hole goes”.

Adapted from the matrix we thought up this approach amongst the theory that users are so thickle that if they need to find something that they know exists somewhere on your site, they will sure as hell try to find it. Which importantly for a online game, creates a contact point, especially so for online games with a chat facility – “hey does anyone know where i can find the weapons shop?” etc. It also allows you to think more logically about how your game is put together, ie, some pages relate directly to another so why not link back and forth to each one from that page. The more time a player can spend navigating around without returning to use the left hand menu the greater depth and indulgence you have managed to achieve. What this would also allow us to do is to spend time making our menu as concise as possible. Cutting it down from 50 items to just 10 and cutting out the collapsible and foldable menus. Take the example below for instance.

Current Menu

• Game Forum
• Off-topic Forum
• Crew Forum
• Bug Forum

Making this more concise could mean a link in the menu with “forums” which takes you to an overview page, perhaps with the 10 latest posts accross all forums and then links to the individual forums themselves. You have added another click level, but you’ve also improved the experience and likelyhood of them getting involved. As you have made the forums link more viewable and you’ve added an easy way for people to jump right into a thread from the overview page.

New Menu

• Forums

Another important factor to always remember when using a long list style navigation menu is that if its long, its likely areas are going to be forgotten about or due to the page fold don’t get visited as much as they should. This is the wrong approach especially with a social game. For us currently our forums are situated at the very bottom of our long menu and thus probably dont receive as much clicks and visits as they should do. With a new shortened menu, we can really put more emphasis on the real important aspects of the site in the menu and link the less important pages using a depth approach, clever linking and page relationships.

Cons

• All menu items and pages within the game are not accessible on a one click basis
• Lazy players may suffer.
• If implemented badly could add an annoying amount of extra clicks and time to perform routine tasks

Pros

• Intuitive
• Its not overwhelming at first and it lets the user dive deeper into the rabbit hole as and when they feel comfortable doing it.
• Its small and it makes sense

Although my opinion clearly sways to towards the Red Pill approach, this is not to say it will work on our site or indeed on your site. However, what you might be interested to know is we are going to run some tests and analysis of both approaches and see which one works better for us and then of course go ahead and implement it. If your interested to see how we get on and or would like to read our findings be sure to follow us on twitter @Bytewire.

Here at Bytewire we have the football fever! A few weeks ago whilst sitting in the summer sun enjoying a few quiet drinks after a kick about, some friends and us got thinking about upping the stakes a little bit this world cup, but we didn’t really know how or what we wanted to do. There were tonnes of people jumping on the dream team world cup site / apps wagon. But as there was no budget or any kind of valuation cap, everyone just picked similar teams of the best players. So we decided it would be more fun to run a predictor with points accumulation for the correct winner of each game and bonus points for correct score. We also introduced a few tie breakers like total goals in the tournament, total red cards, total yellow cards, top goal scorer, top goal scorer goals and top scoring team. As this seemed alot more difficult to end up with the same scores, and also alot more riding on every game. Especially if you and a friend are neck and neck for the prize pot at the semi final stage. Entry to the predictor costs £5.00 only.

The Prizes

• Winner takes 60% of the overall pot.
• Second takes 25% of the pot
• Third takes the remaining 15% of the overall pot.

Check it out here – http://worldcup.bytewire.co.uk

We thought it would just be a bit of fun and something a bit different to alot of other ones out there. All prize money goes into the pot, its literally all for free (well £5.00 but thats it).

One Last Thing

Remember to share, it would be really great if you could share the link to this bit of fun with the provided facebook share links etc on the predictor site. We would much appreciate it.

The last 2 years or so have been a huge learning curve for myself and Elliot, we’ve gone from novice programmers to learning and juggling 4-5 different programming languages on a daily basis. Some might say an impossible task, except….its not. We don’t really feel like anything is impossible and we don’t feel like more knowledge can ever really be bad knowledge. It does however throw up a very good question in the life of a programmer and designer. When is taking too much on and learning too much really too much? When does juggling too many different things and trying to do too many different bits and bobs really start to affect the productivity in areas which are really the important ones to your business?

Well heres the view we take, get the work done that you need to get done in your normal daily working hours……then try maybe every other night spending an hour just looking at something new (somedays or weeks as us designers all know this just in reality may not be possible), read a book, learn something and before you know it you’ll be surprised at how much it helped or what that extra bit of knowledge might help you with in the future.

This could be as simple as writing a blog post, following some interesting people on twitter, spending the time just to see what other designers are up to or just setting personal goals together about what potentially could be most useful for you individually to learn for the greater collective of the company. Eg maybe what could help improve an existing project or maybe what we need to learn to unlock greater possibilities in the future. As techies we’ve somewhat got our work cut out, as you could never learn everything in our field of work, nor would it seem like a good idea to even try and attempt it.

Interestingly especially for us as company directors and full time designers / programmers we often have to prioritize our work as a matter of utmost importance. Not only do we have to pull all of the strings with the work load our products produce, but we also take care of all the running of the business. Thus if we spent all our time improving our own personal skills but not metaphorically speaking ‘putting pen to paper’ with any produce, its worthless to us as a company and after a while most likely Bytewire would be no longer.

I think that controlling this at a personal level is really difficult, even when you are a director of the company….just like me. I’ll always look at things other people have done and think woah I want to do that as well, but one thing weve learnt over the 2 years we’ve been a company is that produce comes first, refining and development comes after. After all first you must have a base to build from as the saying goes…..”don’t try to walk before you can crawl”. With everything you try to do, especially if you are running your own company you should try and tie learning it into a real product or finished product that could be of use. That way things aren’t simply just a waste of time from a business perspective. As a small business moving in a quickly changing environment its very important to get out there and make sure you identify what is ‘your thing’ and build your base here as quickly as possible. This is not to say you shouldn’t toy around, some of the best things ever made started out as just messing around to see what could come of a random idea. Infact that’s where Bytewire came from

So try something new, spend some time learning something, develop your skills…..but remember if your ever faced with a choice……fix or make something for a REAL project or spend time to learn something new. ALWAYS make sure the product comes first.

As web developers we all use a range of different programs and tools to help us go about our day to day work. As time goes on new programs are released which take away that really annoying problem which you wish wasn’t there. However as soon as that problem is eradicated we tend to forget what it was like before.

So if you didn’t have the use of the programs, tools and knowledge which you have gained over the years how would this have effected your development of becoming a web developer that you are today? Below I will be looking at 5 different programs or tools which I use on a daily basis to make my life that little bit easier.

Coda

Coda is a superb text editor for Mac OS X, its so easy to use, allowing you to manage multiple sites and format your code in a way in which suits you. Coda also allows you to preview your site, write beautiful CSS and even includes a built in terminal. Without Coda coding websites would take us alot longer and require alot more tools, don’t hesitate to try it! Download Coda >>

Tiny Grab

Tiny Grab automatically uploads screenshots you take and copies them to your clipboard so that you can easily send them to a friend for quick viewing. This is an excellent tool if you work with other web developers on the internet as it allows you to quickly show examples of something you have seen to help explain/describe/show the matter being discussed. Download TinyGrab >>

Subversion

Subversion is a revision control system which allows you to work on a new revision of a website whilst still showing your current users a previous revision. Once you have finished making the necessary changes you can commit your latest revision and the changes made will go live. This excellent tool therefore allows you to make changes to a website without effecting your users until its complete. If at any point you make a mistake you simply role back to a previous version!

Dropbox

Dropbox is another tool which is very useful for web developers who outsource work, for example to graphic designers. Dropbox allows you to share files between users avoiding the hassle of sending large files through email. If a file is added or modified a notification is displayed. Although limited to 2GB simply invite some friends to use Dropbox and this gets increased. Download Dropbox >>

Mozilla Firebug

Mozilla Firebug allows you to inspect elements of a website within the browser, this is excellent tool for diagnosing display problems as you can inspect the element of section which is incorrect and view the css etc of that element in order to solve the problem. This can save large amounts of time when developing a new website, its a must have for any web developer. Download Mozilla Firebug >>

If anyone has any other programs or tools they want to share, or think they have a program/tool which does a better job than the ones listed here be sure to leave a comment with your recommendations it would be great to hear some different opinions.

At Bytewire we are often faced with long projects which are developed over many months, sometimes even years in the case of our biggest project Street Crime and it can often be demoralising to continue to work on the same project over such a long period of time. There can be times when you feel the project is not moving along as well as you would like or you are stuck in a bit of a rut.

Below are a few hints and tips in ways in which we stay focused on our goal when working on a large project, hopefully some of you will find the ideas useful and perhaps even implement them into your projects.

Brainstorming

Yes, we still use old fashioned brainstorming, its a superb way to drum up some new ideas and start a roller coaster of improvements and changes which will make the overall project a better one. Sometimes on web development projects its not always possible to get everyone together in the same room, fear not, there are plenty of excellent tools which allow you to brainstorm without being together.

The main one we use here at Bytewire is Etherpad. Etherpad is a totally free real time text editor owned by Google. Its allows several people to simultaneously edit a document at the same time therefore allowing people to develop ideas started by someone else.

Time out

Believe it or not a large proportion of ideas are thought of away from your working environment, when your slaving away to meet deadlines and your heads in the game your unlikely to come up with inspiration for new ideas. Take some time out and take a step back from the project and take a look at it from the outside in.

Take some time away from the project to relax as a group of developers, you may well just come up with that idea which makes or breaks the project, it may not seem like “work” but as long as its not done too often it always helps motivation.

Progress

If your struggling to get over the line for that final big push spend a couple of hours looking at the progress you have made so far, as you progress the inspiration for what you have done so far will spur you on to finish the project.

Ask a friend

Friends are always there to help you, call on a friend who has no connection to the project. Either ask them for their thoughts on the project without going into too much detail to feed off any ideas they may have or chill out and relax to re charge yourself for another push at coming up with the best result possible for the project.

We use a combination of these techniques at Bytewire as we are often zoned in on a large project which can take a long time to develop. Street Crime has been in constant development for more than 2 years now and we are striving to make it the best we possibly can.

If anyone else has any techniques they use to stay motivated throughout a long project perhaps you can comment and share your ideas so that other people can benefit from what you have found works for you.

Adding google adsense to a facebook application has been a rather taboo subject for the last few years that you have been able to develop applications fully. It is now however becoming easier. Although still a taboo subject as to whether google will allow its ads to be displayed using an iframe and wether displaying google ads in this manor violates googles terms of service. Using these sort of ads on your application may run you the risk of having your adsense account closed or suspended at any time, but so far so good for those that i know.

My eCPM with Google varies from $ 0.50 – 0.75 (eCPM). That is reliable, since it’s been like that over a 6 month period.

Google does require you to have a website you own, that it will find acceptable to put Google ads on, that it is Google bots can view it, and it adheres to their policies so only having a Facebook App won’t work for getting you in the door.
You need to have something more than a Facebook App like your company or personal website to point Google at registration, then you are free to use the ads anywhere you want, including your Facebook App.
If you don’t, write up some basic html/php based website with a few pages, and it should be enough to keep Google happy.

Warning:
You run the risk of having the account suspended potentially, since Gooogle Adsense TOS does not permit the use of iframes to display their ads. so you take my advice at your own risk.

I recommend at most 2 ads per page.

Now to the ‘how to do it’ part:

Step 1:

Your first step is to create a page called ‘google_code.htm’ – This is going to be the actual ads page, you will need to add some keywords, targeted references and at the very least a paragraphs worth of content and of course your google ad box code itself.
An example of this can be seen below.

[sourcecode language='html']

keywords
keywords
Content – Atleast a Paragraph
keywords
keywords

keywords

keywords

keywords

keywords

keywords

keywords
[/sourcecode]

Step 2: The middle page

The next step is to create another page called ‘google_frame.htm’ this page has a frame which displays the google_code.htm actual ads page. (I think its a good idea to put some more keywords here too).

[sourcecode='html']

keywords
keywords
Content – Atleast a Paragraph
keywords
keywords

keywords

keywords

keywords

keywords

keywords

keywords
[/sourcecode]

Now for the final step

Okay now on your canvas page or on any page that you use for your facebook application you can now simply include the code below.

[sourcecode='html']

id=”games-header” name=”games-header”
marginwidth=”10″ marginheight=”10″ scrolling=”no” frameborder=”0″
height=”105″ width=”740″ />
[/sourcecode]

Now you should have your very own targeted google ads in your facebook application. It may also be good to make some pages that google can crawl from your google_code.htm etc pages.
Make links to some other pages which will contain some content this will help the relevance of your ads.