Filed September 2nd, 2010 under
Resources and
Web Technologies
I sat down to read Jeremy Keith’s HTML5 for Web Designers this morning. At a slim 95 pages, it’s exactly the kind of introduction to the future of HTML that warrants the attention of the general web designer.
Keith swiftly illuminates the subtle political squabbles amongst competing standards organizations in a historical overview of HTML itself. With the pilloried politics and regulations of the WC3 on the one hand, and the business gumtion of Ian Hickson and the WHATWG, it’s anything but a boring recap of an otherwise theoretical dispute.
It’s exactly this kind of overview that mirrors the philosophy of HTML5: much of the markup specification is a recognition of the practical applications of HTML over the last decade, rather than the wishful thinking of XHTML 2.0. His jabs at the WC3 are backed by a design philosophy of “Priority of constituencies,” whereby consideration is given to users over authors over implementers over specifiers over theoretical purity.
It’s easy to get bogged down in the debate behind the merits of any particular specification design principle, but Keith’s language displays a kind of knowing recognition of his audience. Web designers don’t really care about vendor politics – they care about features they can use right now. To that end, Keith elegantly uses humour to explain the seemingly archaic incubation time of HTML5: “[it] seems to have been written with a level of detail normally reserved for trainspotters who enjoy a nice game of chess while indexing their stamp collection.” This wry humour continues throughout the book, including a particularly choice section where Keith describes the wrongheadedness of disabling JavaScript to remove HTML5′s boolean autofocus attribute as “a heavy-handed solution, like gouging out your eyes to avoid bright lights.”
Beyond the politics and theory, HTML5 for Web Designers contains an excellent description of rich media. He masterfully explains the audio and video tags, and how to progressivel support Ogg Vorbis, MP3, MP4, and Theora Video. Again, he gives a passing nod to the patent-laden politics behind the brewing codec war, but the real depth of his description comes in the form of practical advice to web designers today.
Although much of the community’s attention has been given to the canvas, audio, and video tags, I found the Semantics section to be the most engaging topic in Keith’s overview. HTML5 introduces contextual tags such as section, article, header, and footer – but I was only aware of these new tags in a cursory way. Keith illuminates some of the inconsistencies, and admirably tries to explain the design philosophy behind these new semantic tags.
tl;dr: HTML5 for Web Designers is a highly recommended and practical introduction to the HTML5 spec for web designers. It is available in a softcover print edition or in the electronic ePub format from books.alistapart.com for $18 or $9, respectively.
You can follow Jeremy Keith on Twitter or follow his blog at adactio.com/journal
Joshua Kelly
Director of Human/Machine Synthesis
Filed September 1st, 2010 under
ResourcesThe pillar stone of branding is the brand manual or style guide. It’s the central, unifying component of most brand development today. So it’s become the kind of thing that freelance designers might be expected to produce. And this trend isn’t limited to graphic design.
Smashing Magazine – a web design trade blog – recently broke down the basic components of style guides in a post by Kate Neville titled Designing Style Guidelines for Brands and Websites. In its wake, I thought I’d put together a premium package of example style guides for your own inspiration. Read more after the jump.
All files hosted here are for educational purposes only. We’ve hosted them to ensure availability, and make no claim to original ownership of anything herein.
University of Northampton
“Like any brand manual, its objective is to help people who use the brand to understand its origin, the brand values and provide detailed specifications and guidance on the use of all aspects of the brand.”
University of Northampton Brand Manual (PDF)
Government of Alberta
“There is also a new Government of Alberta corporate identity that was designed to align with the brand. It is straightforward, clear and strong – attributes that people think of when dealing with Albertans.”
Government of Alberta Corporate Identity Manual (PDF)
Cornell University
“This style guide has been developed to assist the individual units of the university in using the Cornell logo in their communications materials in print, web, television broadcast, and electronic presentation media.”
Cornell University Style Guide (PDF)
Brasil Telecom
Brasil Telecom Style Guide (PDF)
Cunard
“This information has been designed and presented to ensure that the Cunard brand is marketed in an appropriate and consistent manner. It is essential that the heritage, quality, elegance and reliability of one of the world’s leading brand names is upheld and adhered to in all circumstances.”
Cunard Style Guidelines (PDF)
Princeton University Press
“The purpose of this manual is to explain the components of the Princeton University Press visual identity program, to define its graphic design standards, and to illustrate how these standards are applied.”
Princeton University Press Style Guide (PDF)
Kew
“These guidelines will help you produce consistent and effective communication materials for Kew. As well as providing the details of how
elements should be used together, the guidelines should inspire you when developing our brand, establishing useful parameters without restricting creativity.”
Kew Brand Guidelines (PDF)
Think Brick
“The purpose of the guidelines is to create uniformity in the visual image of Think Brick. It is important that the standards are strictly followed, especially in regard to those concerning the Think Brick logo.”
Think Brick Brand Guidelines (PDF)
BlackBerry
“What’s a brand? More than a name or a logo. More than a name or a logo on a box. And more, ultimately, than what the box contains. What’s inside the box may change, after all–or be succeeded by some other product that’s better, faster and less expensive.”
BlackBerry Branding Guidelines (PDF)
Channel 4
“Whether it is seen on screen or in print, the logo is continuously changing. It can adapt its texture and colour to the surrounding environment. The new identity reflects Channel 4. It is challenging, distinctive and innovative.”
Channel 4 Style Guide (PDF)
Barbican
“Our identity is not just a logo. It is a design scheme composed of a number of core elements that come together to create a distinctive look and feel that makes the Barbican brand instantly recognisable.”
Barbican Brand Guidelines (PDF)
easyGroup
“Like any manual, its objective is to help people who use the brand to understand its origin, the brand values and the best ways of getting the most out of it.”
easyGroup Style Guide (PDF)
Zopa
“Consistency in both layout logic and graphic treatment is essential in providing the user familiar experiences across all user journeys within the site. These style guidelines provide a visual framework to ensure future developments of Zopa.com are consistent with the key foundation pages produced.”
Zopa Style Guide (PDF)
Skype
“This is a guide to the basic elements that make up Skype. Have a read, it will help you to get to know us a little better.”
Skype Brand Book (Flash)
BBC
“The design philosophy underpins everything we do as a user experience and design team. It informs the way our services look, the way they behave and the way we operate as a team. The foundations should be used by all. They include a vertical grid, baseline grid and recommended templates.”
Global Visual Language 3.0 (PDF)
Joshua Kelly
Director of Human/Machine Synthesis
Filed August 31st, 2010 under
How to and
Web TechnologiesWe’ve all been there – project is nearing completion, your site looks great in webkit and firefox, and you want to get paid, but your curmudgeonly client cares what his site looks like in IE6 because his clients are all civil servants, and the government only updates their computers once a decade. Or maybe you just run a publishing site like mine, at SalaciousSound.com, and would prefer not to ignore the largest browser segment in the market.
Either way, Internet Explorer can be a pain in the butt, but only if you let it!
I just came across a solution in the google code repository called ie7-js, which
is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Pretty sweet. I just tried it out, and it worked like a charm.
Option 1 – If all your png images with transparency end in “-trans.png”
Only one quick step is required, since the people hosting the code are cool with direct linking to the js file (which helps load time a lot, especially in the case of jquery). Copy and paste this code, and you’re good to go:
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
Option 2 – No consistency in filenaming of png images with transparencyCopy and paste this code, and you’re good to go:
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js">
IE7_PNG_SUFFIX=".png";
</script>
<![endif]-->
Cailen
Music Guy
Filed August 27th, 2010 under
Web Technologies and
WordPressI‘ve been working with WordPress since 2005, way back in its version 2.0 days. Back then, endlessly tinkering with CSS selectors I didn’t quite understand was about the limit of what I could do with the platform.
So it’s interesting to me to reflect on where WordPress has come from in that time. From introducing the WYSISWG editor and post previews to custom post types, taxonomies, and on-the-fly menus. It’s come from being a basic blogging platform, to being the starting point for ideas big and small.
But the WordPress core itself is a slow-moving beast. And rightfully so – it’s a mature environment now, and integrating features into the core has to be methodical and well planned. With that in mind, much of the true innovation comes in the form of the theme and plugin market.
I’ve gathered a collection of these resources over the past few months, and I’d thought I’d share them here.
Dubbed “Social networking in a box“, BuddyPress is a plugin that sits on top of an existing WordPress installation. By default, it provides activity streams, extended profiles, friend connections, private messaging, WordPress blogging, extensible groups, and discussion forums.
Documentation and Collaboration: WordPress Wiki
If you’ve ever played with the official Wikimedia platform, you know that creating an easy-to-use Wiki is a pain in the ass. WordPress Wiki gives you the core functionality of a knowledge database with minimal trouble.
Ticket tracking is hugely important for project management and customer service. And everyone in the web design/development community deals with on tickets on some level. But just like the Mediawiki platform, most ticket tracking environments are either complete overkill or get a “please gouge my eyes out” rating on the difficulty scale. Quality Control gives you an extremely lightweight ticket tracking system, and you get to keep your sanity.
Yellooh! is one of a few different examples of using WordPress as classified ads board. It stands out for its low cost and nice design. Users are able to add new entries from a front-end form (saving the trouble of logging into the WordPress backend), Google Maps is tightly integrated, and it even features PayPal integration if you’re looking to charges users to post ads.
Instant Q&A provides an easy to use Q&A forum perfect for customer support.
Joshua Kelly
Director of Human/Machine Synthesis
Filed August 21st, 2010 under
How to and
WordPressThe WordPress admin back end can be overwhelming. Combine a default installation with a handful of custom-post types and plugins, and you’ve got yourself 15 or 16 options panels – many of which an end user (i.e. a client) will never use.
It’s easy to forget that this sort of clutter confuses users. That’s why hiding some of these panels can often be a good idea. Luckily, there’s an easy to do that.
The CSS Technique
Every admin panel in the WordPress backend is identified as #menu-title in the HTML formatting. If we want to hide a particular administration panel that’s natively displayed for a particular user class, we just need to declare display:none; as a CSS attribute of the ID.
If we want to hide the Plugins panel from users, we simply add the following to functions.php:
<?php
add_action('admin_head', 'hide_menus');
function hide_menus() {
global $current_user;
get_currentuserinfo();
If($current_user->user_login != 'admin') {
?>
<style>
#menu-plugins{
display:none;
}
</style>
<?php
}
}
?>
Let’s break this down.
The function hide_menus queries the user info for the currently logged in user. If the user isn’t an administrator, then the content in the <style> attribute is embedded in the backend. In this case, display:none; is applied to #menu-plugins, and the Plugins panel is hidden from the user’s browser.
Changing which option panel is hidden, or hiding additional panels, is simply a case of modifying which #menu-title is defined in the <style> attribute.
This technique doesn’t disable or modify actual user permissions, but simply modifies the way browsers display the backend. It’s not a secure solution, but it’s not meant to be – it’s just a quick and dirty way of modifying the administrative UI for end users.
Plugin Alternatives
There are a number of plugins that reproduce the CSS technique, without the need to manually edit functions.php.
Hide Admin Panels enjoys fairly robust support for recent versions of WordPress, and is updated regularly.
Credits
Kudos to Brian Williams for his article and source code for this technique.
Joshua Kelly
Director of Human/Machine Synthesis
Filed August 11th, 2010 under
How to and
WordPressOne of the challenges with using WordPress as a CMS is the lack of truly robust sidebar control.
Sidebars can be widgetized, and template files can be assigned different sidebars (i.e. pages, posts, archives) – but assigning specific sidebars to individual pages and posts isn’t exactly painless.
Let’s say that I’m creating a WordPress-based site with three pages: About Us, Services and Contact – all of which are generated using page.php. On each page, I’d like to have a different (widgetized) sidebar. There are three basic ways to accomplish this.
Multiple template files
I could create three different page template files (i.e. about.php, services.php, and contact.php) and include three different sidebars. For example, in about.php I could include:
<?php include ('sidebar-about.php'); ?>
While in services.php I could include:
<?php include ('sidebar-services.php'); ?>
Then within each sidebar template file I could define a widgetized structure. This is fine with only a few separate pages requiring individual sidebars, but it quickly becomes an annoying task with a large site. Furthermore, if you’re developing a product for a client, it’s not exactly easy to use.
Custom values
This is a pretty clever approach, and definitely makes it easier to use. In your template files, you define get_sidebar based on custom post meta. This lets you associate particular posts and pages with various sidebars on the fly:
<?php $sidebar = get_post_meta($post->ID, "sidebar", true);
get_sidebar($sidebar);
?>
So now if I create a new page, I enter a custom field with a value of the name of the sidebar I wish to associate it with (i.e. “sidebar-about”).
But I’m still going to be limited if I’m dealing with a complex information structure. I’m going to have to create individual sidebar.php files for every sidebar I want to include on the site. Doing this is both messy and near impossible for non-technical end users.
Conditional awareness
I can use
<div id="sidebar">
if (is_home()) {
echo "<ul>";
wp_list_cats('children=0');
echo "</ul>
";
} elseif (is_category()) {
echo "<ul>";
wp_list_cats('children=1');
echo "</ul>
";
} elseif (is_single()) {
} elseif (is_page()) {
if (is_page('About')) {
echo "
This is my about page!
";
} elseif (is_page('Colophon')) {
echo "
This is my colophon page, running on WordPress " . bloginfo('version') . "
";
} else {
echo "
Vote for Pedro!
";
}
} else {
echo "
Pedro offers you his protection.
";
}
?>
</div>
But wait…
You can define specific widgetized sidebars in each conditional statement, eliminating the need for separate page.php or single.php template files (i.e. about.php and services.php), but an end user will still have to register the sidebar in functions.php and in a conditional statement when creating a new page with a unique sidebar.
A better alternative!
Well, it’s better in a lot of ways at least. It’s called Core Sidebars. It’s a plugin written by Daniel from Nexterous LLC. Unfortunately, it doesn’t appear to be actively supported anymore – with the last update being from 2008. That said, I can confirm that it works with WordPress 3.0.1.
Basically, Core Sidebars enables you to give end users really robust control over widgetized sidebars. Users can create page or post specific sidebars on the fly simply by clicking “Add Widgets” in a column that’s added to the Page/Post list in WordPress. Core Sidebars registers and creates a widgetized sidebar specifically associated with the page/post on which it was created.
It’s pretty easy to set up too. After installing and activating the plugin, simply post the following wherever the sidebars are going to appear:
$sboptions = array(
'order' => 'title-content-widgets',
'before_title' => '',
'after_title' => '',
'before_content' => '',
'after_content' => '');
coresidebar($sboptions);
Do you use a trick or technique I haven’t covered here? Let me know with a comment!
Joshua Kelly
Director of Human/Machine Synthesis
Filed July 13th, 2010 under
Tutorial and
Web TechnologiesI’ve been doing some database optimization lately, and I found this script super handy. It will find any fragmented tables in your database:
select TABLE_NAME,Data_free
from information_schema.TABLES
where TABLE_SCHEMA NOT IN ('information_schema','mysql')
and Data_free > 0;
Once you have found your fragmented tables, you can optimize them with this handy piece of code:
optimize table %TABLENAME%
Cailen
Music Guy
Filed July 13th, 2010 under
How to and
WordPressOne of the difficulties with using WordPress as a CMS is that the out-of-the-box URL construction is limited. In this respect, categories have particularly poor control.
By default, WordPress constructs category URLs as http://domain/category/category-name and post URLs as http://domain/date/post-name. While you can control most aspects of the post URLs (whether or not to display the month of the post, for example), the only customization available for category URLs is the base name following the domain in which all categories reside (http://domain/series/category-name, for example).
But this can lead to counterintuitive URLs.
For example, if I file a post about about the Godather under a category called Film, the post URL will read http://domain/2010/01/01/the-godfather while the category URL will read http://domain/category/film. This might work well for a blog format, but for large-scale content management, intuitive URLs are a big deal.
Thankfully, we can get WordPress to do our bidding with a simple hack – and it even works with WordPress 3.0!
Let’s say I want to create post URLs in the form http://domain/category/post-name and category URLs in the form http://domain/category-name. Makes sense right? Well here’s how we do that.
Step One: Edit the Post Permalink
Open up WordPress administration panel, and navigate to the Permalinks options screen. Under Common settings, click Custom Structure and enter /%category%/%postname%/ into the field.
Step Two: Edit Functions.php
To edit the category URL structure we have to go into the functions.php file in our WordPress theme. Before the closing PHP bracket, enter the following:
add_filter('user_trailingslashit', 'remcat_function');
function remcat_function($link) {
return str_replace("/category/", "/", $link);
}
add_action('init', 'remcat_flush_rules');
function remcat_flush_rules() {
global $wp_rewrite;
$wp_rewrite->flush_rules();
}
add_filter('generate_rewrite_rules', 'remcat_rewrite');
function remcat_rewrite($wp_rewrite) {
$new_rules = array('(.+)/page/(.+)/?' => 'index.php?category_name='.$wp_rewrite->preg_index(1).'&paged='.$wp_rewrite->preg_index(2));
$wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
}
Make sure to save functions.php and upload it to the theme directory.
Now, to go back to the Godfather example, category URLs will look like http://domain/film and post URLs will appear as http://domain/film/the-godfather. Cool eh?
There are other ways of doing this using .htaccess but this is a cleaner approach in that it modifies how WordPress generates URLs, instead of modifying how the server interprets them.
Joshua Kelly
Director of Human/Machine Synthesis
Filed July 6th, 2010 under
Tutorial and
WordPressOne of our main portfolio pieces is a music blog called SalaciousSound that I started about 2 years back. I’ve been using timthumb on the site for about 6 months, though when I first added it I wasn’t able to grab thumbnails for videos, and it also didn’t handle posts without images well. I’ve added two pieces of functionality to the function that calls timthumb, catch_that_image(), which resides in my theme’s functions.php file. The former grabs thumbs from videos as the title describes, and the latter just adds a default image that I have defined if the function can not find an image or a video to get a thumbnail from.
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if ( $first_img != '' ) {
return urlencode($first_img);
}
/*
$match = array();
preg_match("/http://www.youtube.com/v/([^"][a-zA-Z0-9-_]+)[&"]/siU",$post->post_content,$match);
if ( $match[1] != '' ) {
return 'http://img.youtube.com/vi/'.$match[1].'/0.jpg';
}
$vimmatch = array();
preg_match('@vimeo.com/[^"&d]*([^"&]+)@i', $post->post_content, $vimmatch);
if ($vimmatch[1] != '') {
$vimhash = unserialize (file_get_contents ("http://vimeo.com/api/v2/video/".$vimmatch[1].".php"));
return $vimhash[0]['thumbnail_medium'];
}
*/
else { return 'http://url.com/wp-content/themes/themefolder/images/defaultimage.png'; }
}
Cailen
Music Guy
Filed May 14th, 2010 under
Web TechnologiesSteve Jobs has written what amounts to an open letter, stating really clearly why Apple doesn’t support Flash. Incidentally, these are also the reasons why KMSM doesn’t support Flash.
Adobe has responded, and is currently running an advertising campaign urging Apple to open support for Flash. You can see the ad, and open letter from John Warnock and Chuck Geschke at these links, here and here respectively:
Cailen
Music Guy
