Nov 30, 2009
Over the last couple of weeks we launched two projects of note that turned out exceptionally well. Our thanks to Xgaming and EACEF for letting us be a part of their new website projects. Both clients are fantastic to work with.
Posted in Design - Project83 - Showcase - Join the Discussion
Nov 12, 2009
A few weeks ago, the Google Analytics team released some fantastic updates to their software. Of particular interest to me was enhanced mobile tracking and reporting capabilities.
The first thing to understand about mobile website reporting is that it works differently than regular websites. Many mobile browsers do not yet support javascript, the language that platforms like Analytics depend on to track website stats. Instead of the browser doing the work, mobile tracking leans on some server-side code to track visitors properly.
Don't be intimidated by all the geek-speak though. It's not rocket science to implement analytics on your mobile site. If you've got five minutes, know how to use FTP and don't mind copy/pasting some code, you can do this!
From your Google Analytics account, add your mobile site as a new domain.
Once your site is added, Analytics will give you a Web Property ID like normal. Keep this around for future reference. In the example below, the Property ID is highlighted.
Click on the "Advanced" tab under the instructions heading. Then click on the radio button to select "A site built for a mobile phone". Finally, select the server-side language. I will be using PHP for this example.
There are two snippets of code that you must copy/paste onto each page of your mobile website. One goes at the top of each page, right after the <html> tag. The other goes at the bottom of each page, prior to the </body> tag.
Note that the third line of the top snippet includes your Web Property ID. This varies for each domain, so be sure to change it if you ever re-use this code.
Lastly, you have to download this file called "ga.php" and upload it to the root directory your domain. This means if your domain is m.yourdomain.com, this file needs to be at m.yourdomain.com/ga.php.
Give it a few minutes and refresh the tracking status in Google Analytics. Assuming you followed the directions, you should be in great shape.
Lastly, it's important to familiarize yourself with the currently known issues, published by Google in the sample code instructions:
Posted in Code - Software - Join the Discussion (4 Comments)
Nov 05, 2009
An extremely important part of the web design process is wireframing. It involves taking all of the specs, notes, creative briefs, content and so on, and finally putting them into one complete picture. Over the years we've tried all kinds of different tools and techniques, but have more recently settled on a process that works great.
Every project I work on starts with a Sharpie and a piece of paper. It's cheap, low-tech and fast. In a couple of minutes I have some ideas on paper to work with. Once it's full, I start over and try to make a better one. Sometimes we'll go into the design process with 2-3 home page wireframe designs just to see what sticks.
Why a Sharpie (Fine Tip) and not a pen or pencil? They are less specific and they fill the page faster. Sharpie's force you to get creative with space and make room for only what is most important. It's not possible to get too wordy or carried away with a Sharpie.
Another benefit of paper wireframes is that there is no learning curve. Anyone can read or create a wireframe without having to learn anything new. When working with people of all different technical abilities, paper puts everyone on the same level and forces focus on the important stuff.
Here are a few examples from projects we have done:
I've done a lot of research trying to find the perfect wireframing sketchbook. Without a doubt it is the Dot Grid Book. This notebook is super-functional, well designed and great quality, making it an ideal geek tool. It's a pleasure to use.
This notebook is double spiral-bound with 80lb, perforated paper. It's easy to scan everything in when finished and keep it on my computer for further reference. It also handles the Sharpie marker bleed through to the other side of the paper pretty well.
Although we believe it's best to wait as long as possible to worry about specifics of a design, eventually it comes time to take wireframes further. I recommend a couple of tools for making pretty digital wireframes:
Posted in Design - Project83 - Web - Join the Discussion