Oxford Geeks

This beautiful Apple Airport Basestation was my 30th birthday present from my wife, quite possibly one of the best presents I’ve ever had. The gift of wireless. In those days it was 1mb broadband, but it was still exciting being able to work from anywhere in the house.

These days it’s been overtaken by N wireless devices, but it’s such a design classic that it has to be on display. It’s new home is the windowsill next to my desk at Webble Mill.

A recent plea on twitter for an Illustrator script has been answered! I needed to export all my artboards as 32bit PNGs (24bit + 8 bit Alpha Channel), with the artboard name as the filename, but Illustrator doesn’t come with a built in method to do this. The closest it offers is the standard export, where it can save all artboards, but it always appends the document name to the start of the filename.

Big hurrays then for Dan Smith for creating exactly the script I needed! It’s already made a big difference to my workflow. If you’d like a copy too, Download Artboards-PNG.jsx. I placed mine in Illustrators Presets/en_gb/Scripts folder to make sure it’s always loaded.

Tagged: adobe, illustrator

A recent plea on twitter for an Illustrator script has been answered! I needed to export all my artboards as 24bit PNGs, with the artboard name as the filename, but Illustrator doesn’t come with a built in method to do this. The closest it offers is the standard export, where it can save all artboards, but it always appends the document name to the start of the filename.

Big hurrays then for Dan Smith for creating exactly the script I needed! It’s already made a big difference to my workflow. If you’d like a copy too, Download Artboards-PNG24.jsx. I placed mine in Illustrators Presets/en_gb/Scripts folder to make sure it’s always loaded.

Tagged: adobe, illustrator

Last night I presented a 5 minute microslot on CSS Filters – excluding older versions of IE from seeing your CSS, and feeding extra styles to specific versions of IE and mobile browsers. The slides (with presenter notes) are now available to download from the new Speaking section.

Comment on this

I recently created a new Ninja character for WooThemes, but this time, the post about the work is on the WooThemes Blog!

Comment on this

Drew Strojny from The Theme Foundry (who I knew from his lovely Traction theme) recently asked me if I’d like to create a new WordPress theme for him. The offer-I-couldn’t-refuse was complete creative freedom, and the opportunity to make the design process visible. That doesn’t mean ‘open’ in the sense of ‘everything being up for discussion with the internets’ (that way madness lies), but documenting the steps as we go.

Everyone has a different workflow, and my workflow isn’t necessarily the right approach for anyone else and vice versa. However, I still love hearing others explain their thought process – the ‘Design Eye’ panels at SXSW spring immediately to mind as being good examples.

So on this blog, and on my dribbble account, I’ll be recording what happens as it goes along. Who knows, it might be fun! It’s the certainly the first time I’ve ever done a project in this way.

Before I go any further, I have to know the constraints. Even on jobs with creative freedom, there are still constraints. On this project there are 2 main ones: budget (which is usually the case) and saleability. It can’t be so esoteric a theme that no only my mum wants to buy it!

The next stage was to come up with an idea. Drew wanted it be something that I would excited about, that I really felt motivated to do. My original thought was something along an 18th century nautical theme, inspired in no small part by my love for the Kraken Rum packaging:

I discussed this with Drew, but the conclusion was that this was too esoteric, limiting the potential audience somewhat, which was fine. So I went away and sketched a more contemporary idea that had been brewing:

It involves a shelf (very subtle white/grey shades, not wood) with a series of ‘cards’ on it. The content is put into these cards and their size is dependent on the browser window. Content could be identified as different types of ‘cards’ (article, photo, video etc.) and each of these would have a slightly different layout.

There would be a fixed top nav and footer, and these would allow for different colour scheme options – a very modern grey/yellow but the background yellow and text colour could be interchangeable for any colour scheme.

As the content would resize to fit the height, scrolling would be horizontal. We’re always told to avoid horizontal scrolling, but I love a challenge! I’m keen to see if I can make it work, especially with what will be a fluid, responsive design.

This a theme that could multiple purposes:

• a Tumblog or Blog
• Photography or Design portfolio
• Shopping site

Basically sites with a lot of visual information, rather than text-heavy content. Stay tuned for more developments!

Tagged: shelf

Just as it was with their first album “Alpinisims” , the School of Seven Bells second album ‘Disconnect from Desire’ is in heavy rotation at the moment. It’s another one of those albums that even when I’m not playing it, it’s still playing in my head. Especially the closing number “The Wait”, which is nearing 25 plays in just a couple of days.

There’s already a few contenders for favourite album of the year, but this is the top of the list.

Delicious packaging design for Gail’s Artisan Bakery.

Comment on this

Delicious packaging design for Gail’s Artisan Bakery.

Comment on this

I’ve finally been through the entire site, and kicked out any legacy stuff (some of which went back to 2003!) and implemented the new responsive design. Originally, I’d intended to change the layout in the various sections, but in the end I’ve used the same one. After trying the other options, it just felt right.

Wallpapers

One of things I’ve changed is a new Goodies section. With the exception of the Hill House font (download link now works!), everything is new, including brand new desktop and iphone(4)/mobile wallpapers.

Icon Reference Chart

Another new goodie is a little labour of love: The Icon Reference Chart. Fed up of checking various sources to get the information I needed, I started compiling it all together in one table. I’ll add to and improve this chart over time.

Tagged: hicksdesign, updates

Every content management system needs its query builder—an application which creates customizable lists of content elements and present them in a similarly customisable way. Customization will be typically through an admin interface on the website, and the query builder can be as basic as a text box for SQL or as complex as a many-layered GUI across multiple webpages. Drupal, for its part, has Views. D5 has Views 1, D6 has Views 2, and it looks like the forthcoming Drupal 7 will have Views 3.

However, as the criteria for list-building get more and more complex, there will come a point where custom code will produce the exited result far more quickly and efficiently than Views. The problem for the developer is: while simple lists are obviously candidates for Views; and riotously tangled layouts are obviously candidates for your own modules and SQL; how do you cope with the middle ground? How can you tell from the outset that a particular problem will land you in a Views-only cul-de-sac?

Well, I contend that the individual developer needn't worry, so long as he's clued up about developing with, not outside, Views. I reckon that the middle ground can almost always be bridged by Views augmented with custom code; unless you're completely convinced from the start that, say, the logic of what you want is not representable in a query builder, you can start with Views and tweak with customisations later.

But to be sure you can extricate yourself from any small to medium tiger traps that "Views+your spec" might drop you in, it's wise to know in advance the full range of tools at your disposal. Here are five of what I consider the most important tricks for building a complex Drupal view.

1. Views themeing  Views has a very modular set of Drupal theme files. The markup and presentation of individual fields, rows of fields, and whole views of many rows can all be modified on a per-view, per-view-format or even cross-site basis. In a particular view's admin GUI, you can see an entry marked "Theme: Information." If you click on this, it will tell you what template files the view will try to use, and what files it's currently using (in bold.) You can copy these files across from the module directory to your theme and rescan to use them; you can even rename them to be specific to the current view or formatting options, and when you rescan the directories, Views should spot the new files.
2. Addon modules  There are a number of extension modules for views which will very quickly improve view presentation or data flexibility. At the one end is Semantic Views, which allows you to present certain fields in your views with more semantic markup: titles can be h2 elements; contact details can be in address elements, etc. At the other end of the workflow, close to the database, is the Views Or plugin, which lets you swap the normal views filter AND logic ("all items must be published AND have type=blogpost") for a more inclusive OR logic ("all items must have type=blogpost OR be less than three weeks old"). If you're not sure whether there's an addon module for you, ask on the #drupaluk IRC channel.
3. Views as a backend  Several third-party modules use views as an adjunct: that means that while the module itself is doing something apparently clever with your content, it's secretly using a view to manage most of the hard work. If you want to maintain arbitrary admin-sortable lists of content, Nodequeue provides a nice interface for doing so. But behind each nodequeue sits... a Drupal view, and a plugin which ties the nodequeue database table to your nodes to produce the required results. Tagadelic, a module which produces tag clouds for e.g. your recent blogposts, has over the years moved from a standalone module (which still exists), to a Views style plugin, so you can build the initial tags view yourself and activate Tagadelic styling and popular-tags filtering once you're done.
4. Views hooks  The workflow for views is like the workflow of Drupal itself in miniature: as such, it has its own set of views-specific hooks, including hook_views_pre_render and hook_views_pre_build. All the Views hooks are documented on drupalcontrib.org. So, learn the basic page-view flow, from a blogpost by Mr Views himself, Earl Miles. Pick it apart. See what each bit does in the code. You should eventually be able to find the views hook you want in the code, and be able to modify the view object, its compiled SQL, the results returned, and even the eventual output, all in your own modules.
5. Writing your own plugins  A Views plugin is less complicated than you might fear. There's not a great deal of easy-to-find, easy-to-read documentation out there about Views plugins, but try not to let that put you off. A plugin consists basically of a module, a hook function (or two) and a PHP object: the rest is just detail and theming! While that sounds a bit glib, it has some merit: look at the plugins for such modules above as Semantic Views and Nodequeue, and see how they all relate back to an object in a .inc file and a template in a .tpl.php file. You can extend an existing plugin using standard PHP class syntax, and develop it piece by piece by overriding methods one at a time. Views plugins are incredibly powerful, more so than using configurable third-party modules or just interrupting the current view using a Views hook. They get your code right into the heart of a given view's workflow and let you do (almost) whatever you want. Remember to clear caches if you get stuck: you might even need to resort to a "TRUNCATE cache" at your MySQL command line if your changes don't seem to be having an effect.

If you've started building your listing page with Views, but the spec has ended up getting more complicated, try each of the five solutions above in turn. When the problem at hand suddenly gets a whole lot more complicated, escalate your solution's complexity by moving another step down the list!

There's obviously a lot more to developing with Views than a single blogpost could ever really summarize without turning into an extended essay. But there's a lot more documentation out there—although of a pretty sprawling and hard-to-navigate sort—and the tips above should hopefully give you pointers both for where to start your extending of Views, and also what to google for when you get stuck. Have fun and good luck!

The next Oxford Geek Night is on Wednesday 21 July, in less than two weeks' time. I for one am really looking forward to it.

We managed out of sheer luck and cheek to bagsy a fantastic speaker for OGN18, the ever-Interesting Russell Davies. Russell was the organizer of the 2007 and 2008 Interesting conferences, and is involved in lots of fantastic projects, including Speechification and Newspaper Club. He's also a writer for Wired, a speaker at many conferences including Lift 2010, and what one might frivolously call a futorologist or pundit. He's going to talk about his experiences turning internets into print, and what he's learned from doing it as part of projects like the Newspaper Club.

Along with our keynote speaker we've got half a dozen of the absolute best of local microslot volunteers. There's talks on topics as far ranging as "designing backwards", linked data, graphing 19th-century social networks, genomics, CSS and Rotacoo's Spotify #fridaymix tape. A few new faces and a few established (and deservedly so) local faces. As always we'll be putting video up on the site afterwards, so there'll be a permanent record of our high-quality speakers.

Finally, we hope to have space for the Pitches - our sixty-second open mic slots that anyone can volunteer for, even on the night - and a book raffle. All told it should be a great excuse to saunter over to the Jericho Tavern in the July sun / sudden downpour (delete as applicable.) Hope to see all the other Oxford geeks there.

Comment on this

One of Textpattern’s drawbacks has always been that page templates are saved in the database. Editing them means using the textarea in the TXP admin interface, but I’m sure most people would prefer to use their favourite text editor.

Here’s a workaround that works in TXP 4.2.0 (I haven’t tried other versions).

1. Enable ‘Allow PHP in pages?’ in Advanced Preferences if you haven’t already
2. Set up your sections and corresponding page templates as you want them
3. Copy and paste everything in your page template into a php file (such as ‘template.php’)
4. Create a ‘pages’ folder in your textpattern directory and save the file there
5. Replace the content of your page template in TXP admin with:

<txp:php>echo parse(file_get_contents(txpath.'/pages/template.php'));</txp:php>

From there on in, you can edit the php file. There may be a performance hit doing this, but all TXP tags work. Much easier!

Tagged: textpattern, tips

With the iPad and iPhone 4, there are as many, if not more, different size icons to create for iOS than there are for desktop apps. While there are plenty of templates and reference sheets for Photoshop users (see Cocoia) I prefer to use Illustrator CS5 to create mine. So I’ve made my own template, and it’s available here if you find it useful too!

Download the iOS icon template for Illustrator CS5

The top layer of the file contains labels and a mask to add the rounded corners of the icon. Don’t forget to hide these before you export.

Corner Radius

Something that Apple doesn’t include in it’s documentation are the various corner radius dimensions for all the icon sizes. This information has been compiled thanks to investigations of Sarah Parmenter and Tim Van Damme.

It’s best to create the artwork with 90° corners and let the OS round them off, but there is a mask layer to help you check how it would look. The mask also uses the appropriate colour for the context – white for the app store, black for the home screen and light grey for the spotlight results.

Also the icon that iOS uses for spotlight results on the iPad is trimmed by 1px around the edge. So while the artwork still needs to be supplied as 50px, the visible area is only 48px, and the guides reflect that, while the rounded corner mask stays at 50px.

Exporting

The icons are all set out on their own artboard, so when you’re ready to export check the ‘Use Artboards’ option to get each icon as an individual file:

Disclaimer

While I’ve worked hard to make sure this template is as accurate as possible, I can’t guarantee it’s completely error-free. Let me know if you find any bugs, and I’ll update it!

If you’re using CS4 or below, this template may well work for you, but hasn’t been tested and may explode leaving terrible stains. I target CS5 because of it’s the first version that has pixel snapping that actually works!

Tagged: adobe, icons, illustrator, resources