A nice exploration of what goes on below the fold…
July 9th, 2009 by Philippa
Moving from Sales into my new role as a fully-fledged Grudenite Account Manager, I’ve been looking to some of my mentors and various industry mouthpieces for some inspiration on effective mechanisms for online/offline campaign integration, online campaign development and how to mould some structure around the concept of the ‘big idea’.
Life at the Bottom, a creative industry blog for young upstarts within the advertising, public relations and digital sectors provided just the insight I was looking for.
There is a common perception in the creative industries that a big idea is a complicated one. A loud and zealous client might complain, “This idea needs bells! It needs whistles! Throw in some cornices! And shebangabangs! Would someone please give this idea some shebangabangs!” To hell with shebangabangs! We need simple ideas. The ones that seem so simple it’s a ‘risk’.
The fact is, nothing rings truer. Last week, the ‘Best Job in the World’ campaign picked up an unprecedented 3 Gold Lions at Cannes. The concept? A classified advertisement. As Mark Pollard simply puts it:
Content = Conversation = Content. Don’t use Social Media, let it use you.
Unfortunately, social media and the utlisation of online channels is in the too hard basket for many companies. In reality, if the ‘big idea’ is simple, digestable, relevant and entertaining, social media will do your leg work for you.
June 17th, 2009 by Guy
Google Analytics is pretty popular for tracking website usage, and we use it here at Gruden on our own sites – including this blog. Here’s our collection of general purpose Google Analytics tips and tricks…
1. Clever homepage tracking
Need to know which areas of your site’s homepage visitors are clicking on?
Google Analytics’ “Site overlay” functionality works OK for HTML-only sites but it’s fairly useless if your site includes Flash elements. To get around this add Google Analytics tracking parameters to your internal links.
Here’s an example of how you can structure these links to generate some useful stats.
This link is for a “Partners” link in our homepage’s top navigation area:
Do this for all links on your homepage and you’ll get a report on all clicks of the “homepage” source, and you’ll be able to break this down by section (e.g. “topnav”) and then by the link (e.g. “partnerslink”).
2. Filter out your own traffic
Traffic stats, especially on smaller sites, can get really skewed if visits from the people running the site aren’t being filtered out.
To fix this, add a new filter using “Exclude all traffic from an IP address”. Add your own IP address, and repeat for any other IPs you don’t want to be included (follow Google’s advice on how to use backslashes before the fullstop characters in the IP address).
Don’t know what your IP address is? Try going here: www.whatismyip.com
3. Get a weekly email report
To get in the habit of checking your site’s stats every week, simply get Google Analytics to email you a scheduled report.
4. See what people are searching for
Don’t forget to set up Site Search reporting on your account. It’s useful when creating content to know what your users are searching for – especially if it’s not something they can currently find.
5. See where people are going
When linking to external sites, track clicks on outbound links and you’ll know which sites you’re sending traffic to.
6. Use Advanced Segments
Google Analytics’ Advanced Segments aren’t really as complicated as they sound. You can use Advanced Segments to group together different types of data and then create a report.
For example, a car manufacturer might want to create a report on visits to its site’s “small cars” content only. To do this include all small car content in a custom segment by creating a series of filters that only include content with particular title text.
7. Know your site’s top-performing times
If you know the times of day when your site performs best you can then time other activity around this – such as only running your online advertising (Google AdWords etc) at these key times.
To do this create a custom report using Time on Site, Pages/Visits, and Bounce Rate metrics and then apply an “Hour of the day” dimension to the report.
Now you know when you’re getting your most serious visitors!
May 29th, 2009 by Mark
Last week I delivered a talk at the fantastic WebDU conference which focused on an area that I have been becoming increasingly concerned about over the last while – security in the browser. Unlike other areas of the web platform that have well defined and effective security mechanisms (SSL/TLS, firewalls, strong passwords, access control) the melting pot of HTML, CSS, Javascript that runs within the browser is increasingly being shown to be a weak link.

Photo courtesy of http://www.flickr.com/photos/webdu
The talk, aimed at a technical audience, hopes to raise awareness of the issues and solutions and makes the points that we as web developers carry a lot of the responsibility for minimising the impact and extent of the problem.
As I’ve gone through the process of publishing this presentation online I’ve been concerned about the loss of context that comes with publishing the slides alone. I’m still waiting to hear whether the conference organisers will be publishing the audio (or if it was recorded), but I will post a link if and when it is [UPDATE: Geoff has posted the link to the audio below!]. In the meantime, there are some footnotes below to give extra context, I’ve also collected up all the links I used for reseach at http://delicious.com/markstanton/js-security and comments and questions are welcome.
May 20th, 2009 by Anthony

As part of the ongoing Gruden China training program, talented members of the interactive team – Peng, Haixia and Wenjie – are brushing up their Flex & Flash skills. This time around, I decided to move away from the training status quo and proposed a simple Flash game for development.
This initiative turned out to attract some interest from another Grudenite outside the interactive team, as Ronaldo from the tenders team joined the training crew. Equipped only with a basic understanding of game mechanics, a passion for playing games, and the good ol’ FlashDevelop IDE, they came up with a plan of attack.
The game-play concept was simple and addictive; treasures dropping from the sky from varying directions. Each kind of treasure boasts different score points. Some bestows the player with a special ability, some strip it away and causes negative repercussions. The player’s goal is to catch as many treasures as possible to achieve the highest score.
Since the training team will be developing the game from scratch, it’s important that each development phase is managed effectively, broken down into the following stages;
This is my first experience of creating a Flash game. The experience of localisation projects really assisted my understanding, but wasn’t comparable with dedicated training. By finishing the training phase 1 and 2, I have learnt that Math and Physics are the basics of any game.
- Peng, Gruden China Office
The graphics assets are sprites from the ultimate platform game, Mario Brothers. Currently the team has completed the first phase of development and the resulting prototypes are playable showcases of character motion. We’ll be blogging their progress and eventually posting the games live on the Gruden blog, so stay tuned for more game development updates the flash training team. To check out some of the phase one demo’s, please click on a name below and use your arrow keys to move the character.
Or, you can view the full page in our training site
Nice work…when is the next one coming out?
Btw, if y velocity exceeds the height of a tile, collision detection doesn’t stop mario from falling through the world.
Thanks teeps! We’re still trying to find time to continue it in the midst of production works. As soon as there’s an update I’ll post a new blog post again. Thanks for checking it out
P.S.: yes the collision detection still needs some major work as it’s very simplistic at the moment. I guess it needs some quick math intersection calculation, probably a dumbed-down version of those used in projecting bullet hits in FPS games.
April 21st, 2009 by Guy
Microsoft’s new browser – Internet Explorer 8 – will be made available to Windows Update users within the next 10 days. If you can’t wait for that, you can download the final version from Microsoft right now.
If you’re a Gruden customer and you’re wondering if the site we built for you will look like a mess when your users view it with Internet Explorer 8, we have some good news – you can relax!
We’ve spent the last couple of weeks checking all our clients’ sites with Internet Explorer 8, looking for:
We found only minor issues with a couple of sites.
So why the great results? The main reason is this new version of Internet Explorer is more standards compliant than the previous versions – and we always build web pages with web standards in mind.
One of the main goals of following web standards is to ensure that website code does not need to be rewritten as traditional desktop browsers evolve, and this is exactly what has been avoided here.
Gruden has been involved in the web standards community since the start of the Web Standards Group back in 2003. We’ve even been busy translating web standards articles into Chinese and Portuguese!
April 16th, 2009 by Peter
We recently commenced an effort to make the Gruden website more mobile-friendly. With the overabundance of iPhones in our office, that provided an easy start, and an easy platform to test with.
We’ve always been believers in the separation of presentation and content. We code our HTML to best practices, with a focus on semantic markup and well-structured documents. With this background, we didn’t want to go about creating a completely separate (or crippled) version of the site for mobile users. Mobile Safari on the iPhone makes it obvious that you really can deliver the real web on mobile. So instead, we looked into the little things we could do to incrementally improve the mobile browsing experience.
Everything we’ve done to date has been achieved with CSS. There’s no browser or user-agent sniffing, no redirecting users to an m-dot or dot-mobi version of the site. While such approaches are well-suited to providing mobile versions of an app (GMail comes to mind), they can be misleading when dealing with a website. As far as the end-user is concerned, they’re looking at the same website, and there’s no need for bookmarks or shared links to present something different on different devices.
So there are three main areas we’ve looked at:
<link rel="stylesheet" href="/lib/main.css"
type="text/css" media="screen,print">
<link rel="stylesheet" href="/lib/mobile.css" type="text/css"
media="handheld, only screen and (max-device-width: 25cm)">
The iPhone, along with other recent mobile browsers (such as Opera), loads the “screen” stylesheet ordinarily. It ignores “handheld”, though we keep that around for the older mobile browsers that do support the type.
But the iPhone also supports media queries, from the CSS3 spec. This lets you target devices based on the media features they support, including device-width/height, orientation, aspect-ratio, color, resolution. We’re targeting devices with a max-device-width of 25cm, which will include the iPhone, and any netbooks that go the way of supporting the directive.
We’re not actually doing anything server-side, and we’re still presenting most of the same content, so total download sizes aren’t going to be reduced dramatically. We already make an effort to keep download sizes pretty slim, however, and we’re not targeting those old mobile phones with web-lite browsers and 2kpbs downloads.
What we’re really interested in is removing noise; because we’re targeting small screens, we don’t want to be filling the screen up with unnecessary content or large images that are little more than decoration.
The most obvious difference, as a user, is that we don’t have Flash on the iPhone. So we’ve a couple of images as fallback content instead of the Flash-based carousel of portfolio items.
But we’ve also trimmed some content. We’ve removed the footer altogether — the content is available on our Contact page, and this was a couple of screens worth of content on the iPhone. And we’ve removed the big background image (a series of tubes).
We’ve also pushed content to the edges of the screen rather than leaving whitespace around the content area. In CSS, we’ve changed most elements to use % based widths rather than pixels to better allow the device to fit the content.
These are obvious. We’ve removed the large images, and removed the floated columns layout. The images are effectively decoration anyway, and would fill a screen if we left them in. This leaves the page with just the key content.
With touch becoming a common interface, we can no longer rely on the precision of a mouse pointer, or even a stylus. Wherever we can, we’ve increased padding on elements and switched many a elements to display:block, with exaggerated boundaries.
Some of this can be seen in the home page examples above, where the top menu items all have a little more padding in the iPhone version.
In the desktop browser version, each Portfolio item has two links — the name, and a “read more”. In the iPhone version, we hide the “read more” and have the name link displayed as a block, so the whole box becomes clickable.
Regardless of which screens we’re targeting, horizontal scrolling has never been particularly user-friendly. On the desktop, we minimise this by limiting the width of the content area. On the iPhone, we’ve eliminated floated columns in a number of locations. Combined with the change to % based widths, this makes most pages better fit the width of the screen, and to flow vertically as much as possible.
In this example, instead of floating the portfolio images alongside the content, we’ve dropped them to sit below the content instead. Because the HTML is written to flow correctly even without CSS, this was a simple matter of adding width:100% to any columns in the mobile CSS sheet.
This is only the beginning of our venture into making the Gruden site mobile-friendly. It does, however, demonstrate our key principles. Any difference between the desktop and mobile versions of the site needs to consider the user, and their context. We don’t want to remove any important content, but, as always, we need to keep in mind how the user is interacting with the site.
With the increase in popularity of mobile devices (be they phones or netbooks) with full featured web browsers, sites are going to see more and more visitors coming from devices with unique physical constraints. The changes we’ve made are all simple to implement, but provide immediate benefit to these users. And we’re going to keep working on those incremental improvements.
[...] Gruden site now iPhone-friendly [...]
when are we going to see an iPhone emulator for linux or windows?
Until I find some way to test without being expected to spend lots of cash from my own pocket I’m not going to bother and they will get basic xhtml mobile!
Reading this article on my iPhone is very readable as it eliminates the hassle and distraction of resizing and repositioning. However, I’ve noticed a couple of issues: the examplelinl tag is truncated, even in landscape mode and the email newsletter (on gmail) that informed me of your changes is not iPhone friendly.
Oops … Example link tag …
@Micheal: Apple provides a free iPhone simulator* for Mac and Windows. Not sure about Linux.
Really great post. Still waiting for Flash support on the iPhone!
[...] Gruden site now iPhone-friendly [...]
Its a shame that a company with such a capable flash and Adobe product development team needs to cripple their offering so their website runs on an inferior browser or the faux trendy toy telephone. Android and RIM FTW!
March 20th, 2009 by Mark
How’s this for a cool Friday mini-project…
Having just completed a massive project (which you’ll be reading about here soon), Anthony from our interactive team decided to have a play with the recently released FLARToolKit which uses the Flash player in your browser, your web cam and a specially crafted image to overlay 3d objects onto a real-world scene. The results of this have to be seen to be believed.
To test it out, just follow these instructions:
For those of you who don’t have a web cam here is a demo:
The possibilities of this technology are just beginning to be realised – however there are a couple of cool examples out there and the ideas were flying rapidly around our office tonight so watch this space!
March 12th, 2009 by Philippa

Here at Gruden, we like to let out our inner geek every once in a while.
Gruden’s development team compete against each other regularly for the ultimate glory of Code War champion and bragging rights at Friday night drinks.
Staff members are given a loose topic and creative license to develop something innovative using any approach they like. Previous topics have ranged from the weather (which saw an interesting Google Maps and Twitter mash-up and a tamagotchi inspired game built using Adobe AIR) to “Scissors, Paper, Rock” (which resulted in one particularly original approach) to using JSON and Google AppEngine to create micro web services.
Other Grudenites (including the more code-challenged amongst us) get the chance to vote on our favourites, and marvel at the cool concepts our dev team come up with.
This round’s topic is based on the concept of previewing music tracks online. Stay tuned to see what the team comes up with.
Have an idea for the next session of Code Wars? Let us know!
March 5th, 2009 by Mark
After many years as an attendee, I’ll finally be speaking at ”the premier Antipodean Web Technology Conference”, WebDU this year.
Covering a huge range of front & back end web technologies, WebDU will have five streams over two days plus a third day of workshops. For those that haven’t been before – the Code Wars, Card Trading Games and notorious extracurricular activities provide a unique vibe, but it’s not all fun and games – you will learn from, and rub shoulders with, some leading minds from across the industry.
My talk, Be Afraid. Be Very Afraid. Javascript security, XSS & CSRF, will look at some amusing incidents, their not-so-amusing implications and how developers can defend against this sort of thing.
Hope to see you there.
July 23rd, 2009 at 11:56 am
You can get many of the session recordings online via the webdu session podcast — including “Be Afraid, Be Very Afraid”
Enjoy!
http://www.webdu.com.au/mxsession/feeditunes
July 28th, 2009 at 8:47 am
Thanks Geoff!