Blog Stuff we're discovering, learning, reading, watching, enjoying...

I enjoyed reading this 15 CSS Tricks That Must be Learned post and think it’s a valuable resource. Whilst I agree with some of the comments that none of the tricks are anything new [nor does the author claim them to be], there are so many CSS workarounds that experienced developers use daily, some of which are incrementally developed over time, that it’s often handy to have a visual refresher such as this  to remind ourselves why we apply such tricks. And any young pups out there for whom the tricks are still new could do a lot worse than to start with this set of essential but well-explained suite.

Apple have given pretty strong direction about the design patterns and approach to creating iPhone application UIs [in fact 'strong direction' is being kind when you consider some apps have been rejected for using chat bubbles incorrectly]. However, more often than not we’ve found that even when following the Apple UI Guidelines there are often multiple ways to tackle an interface challenge. A good solution is to take direction from other apps that have already made it into the App Store, and to create [where suitable] consistent interfaces through common design patterns where standard methods are becoming established.

I love Android. It’s not quite as slick in certain areas as iPhone but overall, especially if your connected world revolves around Google, it’s a fantastic mobile platform and day-to-day experience. However, one thing that’s been scuppering me for the past few weeks since using an HTC Magic was that I couldn’t get MMS working on Orange UK. Despite checking out the usual forums [Modaco, Android Central, XDA Developers] I couldn’t get the correct settings. And then I came across ‘Android Bloke‘. Were there ever a more male, techie “I call a spade, a spade” name for a blog? Anyway, not only can he accurately title garden implements, he also has the magic [ahem] combination of APN settings for Orange. The trick that I hadn’t previously come across is the value to enter in the ‘APN Type’ field at the bottom of the APN Settings. Instead of a helpful dropdown with options [presumably because in theory some developers may like to create their own APN types], the field is just a text entry field, and hence didn’t know to enter ‘mms’. I can now send pictures of my children to their grandmother again.

As WordPress developers, we’ve all come across the same situation when starting out on a site build… the default WordPress theme sometimes just isn’t barebones enough. Well, the obvious approach is to install a theme which is designed to be a blank canvas from which to start, and Starkers: The completely naked theme for WordPress appears to offer just that. We’ll be giving it a bash it in the near future I expect.

Our blog has been suffering a little lately… summer attitudes, holidays, deadlines, etc. However, via Twitter I came across the Design for Service blog this week, offering excellent insight and resources around thinking and designing using a Service Design approach. Whilst quite niche, I think the general thread of the site demonstrates the important but often misunderstood role of Service Design within the digital/interactive environment.

The Guardian’s recent availability of most it’s data via API was a pretty big announcement and is in itself an excellent demonstration of a on a large media entity embracing future platforms. Even better, in a matter of weeks it seems that the examples and tools to help you get up and running have been vastly developed and the Guardian Data Store is now an amazing resource even just to browse or to get tips from, let alone to actually use their data.

Having just been working on a concept with a more dark theme than my instinctive slant towards light/spacious/clean web design, I can across this collection of inspirational black websites. Whether you find the collection inspirational or not, webdesign.fm have a range of colour-theme comparisons of websites which can offer inpiration in when you’re scratching your head. Though there’s nothing like getting up from your desk and getting some fresh air to help on that front.

Fireworks is pretty much the most powerful tool in our box, enabling us to deliver everything from interactive wireframes through to fully design UI mock-ups. However, it wasn’t until recently that we started to dig a little deeper into it’s customisation potential, and it was a very pleasant surprise to find that with only a little Javascript you can create very powerful Fireworks extensions. Photoshop introduced ‘Actions’ many versions ago but they always felt a little clunky and only worth setting up if you had a lot of repetitive tasks to get through. However, with extensions it is much quicker and more flexible to consolidate a whole range of steps into one command, and vastly increase your productivity in the meantime. Check out the Adobe documentation Adobe documentation or this tutorial to get started. You won’t regret it when it avoids a thousand select/copy/paste/tweak/save tasks!

Note to Mac CS4 users: the place to put your saved extension files is:
Macintosh HD:Users:<User>:Library:Application Support:Adobe:Fireworks CS4:Commands

With Wordpress having generally excellent documentation in their codex it’s not often we use other sources as general Wordpress reference material but DBS Interactive have produced a particularly nicely formatted and highly usable Wordpress template tag function list, a worthy alternative to the official Wordpress documentation for template tags.

The Quirksmode Compatibility Master Table is so handy that it often gets overlooked as blog-worthy, maybe because it’s assumed that it’s already in everyone’s CSS toolkit and daily practice. Along with A List Apart, these are two CSS resources that are almost everyday visits when CSS coding. However, an interesting new service might help minimise some of the reasons for visiting those two essentials. The IE6Fixer offers the ability to automatically analyse your CSS and provide known fixes that should help with IE6 compatibility. The site clearly states that it’s not a one-stop fix, but might be of help in short-cutting the often similar steps we have to go through to make things work properly in IE6.

Ever since working with mobile WAP greetings in the mid-90’s I’ve been interested in the frequent need to micro-scale imagery. To some extent, the recent trends of clean, typographic buttons and clean mark-up has reduced the over-use of iconography on the web but it remains a critical part of most web projects and even more so in application interfaces. As ever though, if I’m at a creative dead-end I’m more than happy to just apply a set of rules to get things going again and Turbomilk’s article on 10 Mistakes in Icon Design provided just such a checklist for me recently. The very use of icons is often the point of much debate, let alone the resulting imagery, but the article covers some good points backed up with visual examples.

I know ‘modern’ web developers are meant to have this deeply ingrained in their pysche by now but I sometimes still find it helpful to refer to the W3 page on CSS selectors occasionally and invariably when I do it reminds me that there is always more than one way to do something [the unconsidered option so often being better too].

We’ve been exploring the options for easily adding code examples to a forthcoming new section on commonagency.com and CodeColorer definitely seems the most complete of all the available ones. We required a means of presenting various languages including AS3 and PHP, syntax colouring, line numbering, minimal admin effort and decent markup in the output, all in a plugin that must still be in active development but not in alpha/beta! Nearly all the examples tested used the Geshi underlying code but CodeColorer seems to be the best solution so far.

• CodeColorer - our preferred option so far.
• Chili Code Highlighter [still in beta]
• CodeHighlighter [seems good but couldn't tell if it supports AS3]
• FV Code Highlighter [didn't appear to support AS3 and not tested with v.2.7]
• Code Snippet [seems to be one of the original options but no longer in active development]
• Dojox Wordpress Syntax Highlighter [sounds quite good but limited documentation and not in English!]

…and lots more on wordpress.org.

Font-replacement methods for substituting text on-the-fly with a non web-safe font are widely used now. However, having had a few run-ins with the very popular Flash-based SIFR recently - either due to small glitches [especially Mac related] or simply due to it’s limitations in certain contexts [especially when used over backgrounds that are not solid colour] - we’ve been looking at other options. As a lightweight solution, PCDTR seems to be one of the best image-based alternatives due to it being purely PHP and CSS based [e.g. no Javascript] and we’ll be putting this through it’s paces in a forthcoming project.

Twitter led me to notice this article about five cool ways to support the W3C, and it made me think that perhaps the W3C isn’t this ‘far off’ organisation that we as a small agency may feel it to be. Perhaps the issue, as the article suggests, is that the wider and in particular lower level web design/development community don’t get involved enough other than [hopefully] using the excellent validation tools.

Web designers have always battled with, and found creative ways around, the limited number of fonts available for ’standard’ use on the web. On mobile there is usually no option but to allow the device to just render using a single system font, but on iPhone at least there is a selection to choose from - though not the complete set that is included on Mac OS X. This excellent review of the iPhone fonts explains the comparisons to the ones available on OS X and some of the shortcomings with the iPhone subset.

As an average mobile user, you walk into a shop, buy a phone and come out with it all nicely set-up. If you’re a mobile professional or developer however you’ll frequently have had to set-up a phone from scratch or possibly change the settings to those of another network. I can’t imagine how many times I’ve used the GPRS information and UK settings on the filesaveas site but they have saved me time over and over again when settings up the 3G/data settings for a phone.

Having been a fan of OmniGraffle since moving from PC to Mac over a year ago and needing a Visio replacement for wireframing and user flow work, Graffletopia has proved an invaluable resource for extra stencils. The free resources have saved significant time and have often helped provide far more coherent and clear documentation.

iStockphoto, a favourite amongst many designers for cheap image/video/flash stock assets, is developing an application to allow richer access to it’s library. The application offers enhanced features over an already capable web interface, adding things such as ‘cover flow’ view, multiple/batch downloading and improved lightbox management. The initial release - public Beta due in February - is Mac OSX only, with an Adobe AIR version to follow shortly after.

This simple CSS Shorthand Guide produced by Dustin Diaz is an invaluable resource and makes for good practice in streamlining your CSS code.

MooTools is our preferred JavaScript effects/extension library, not least because of it’s easy extensibility - as demonstrated by a wealth of 3rd party extension scripts that are available. We haven’t used all these but this round-up is a handy starter.

Never waste time again creating those web-2.0-tastic animated loading gifs, just use www.ajaxload.info instead.