The Client Questionaire

Getting the most out of that first client meeting is incredibly important. Finding and isolating the core issues quickly can mean a final product that meets and exceeds all of a clients expectations. In this post, I have included a great primer of a client questionnaire; covering lots of ground around the logistical and creative direction a project should take.

So here it is, version one of the Client Questionaire. If you have any suggestions or questions about it, I’m happy to help.

Also included is a downloadable and printable HTML5 powered version, which can use used and styled as you should choose. It being based on the kick ass HTML5 Boilerplate by Paul Irish et al.

Quick links: ‘Multicolr’ image search and Git Immersion

Couple of really great quick links I’m sharing today: one’s a really cool tool that can help you find images based on a certain color palette; the other’s a great beginners tutorial for the Git version control system.

‘Multicolr’ image search via Idée Inc.

The great tool from the creators of the indispensable Tineye, is a prototype tool that allows you to search Flickr for photos based on a user selected set of colours. Unlike a lot of these tools it seems to work really well, as it’s based on their great Piximilar image search technology (that also powers Tineye).

Git Immersion from EdgeCase

This great introduction to the Git version control system from Edgecase is a great introduction to what some people can find a really intimidating tool. It’s lucidly written and really straightforward, I really recommend it.

A simple jQuery powered image slider

This is another quick implementation of one of Orman Clark’s designs from Premium Pixels. As with the last previous slider I shared, this is based on malsup’s awesome Cycle jQuery plugin.

Considering the apparent complexity of Orman’s design, this implementation came out relatively light-weight; I used sprites for the nav links and pager and we’re obviously using Google’s CDN to serve jQuery.

It’s been manually tested in all modern browsers (although it’s kinda borked in IE6, but frankly I stopped caring about IE6 quite a while ago now). But if you run unto any problems let me know in the comments and I’m happy to help.

At the following links you can find the demo, and the download link.

As with all my freebies, it’s distributed under the Creative Commons Attribution 3.0 Unported License.

Why the ‘outline’ CSS property is so important

There are a lot of designers and developers who (for whatever reason) choose to remove any styling from the outline property that highlights focused anchors. This is a short post about why you shouldn’t do it, or if you really need to; how you can make it look a little better than browser default outlines.

In short, removing any style to focus’d elements is really bad when it comes to the accessibility of your pages. People who can’t use conventional methods of navigating pages (like a mouse) are prone to using the tab key navigate links on a page, removing the main method of determining which link that currently has focus is therefore obviously not a good idea.

If we look at the Web Content Accessibility Guidelines (as published by W3C) we can see that it includes a relevant passage about the focus property:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Now, there are a lot of people who respond to being told this with a resounding: ‘BUT IT LOOKS SO BAAD!’. The truth is, in it’s default state in most browsers they’re right. But that doesn’t mean we can’t style it ourselves with some simple CSS.

If you take a look at demo, you can see a couple of different methods of using the :focus property to help the accessibility of your pages without a detrimental effect on your design.

Tool: A Google Maps powered Twilight/’Golden Hour’ Calculator

No, not that Twilight. This is a really cool Google Maps powered tool that allows the budding photographer in us to work out when the ‘Golden hour’ is wherever we are on the planet.

In photography, the golden hour (sometimes known as magic hour, especially in cinematography) is the first and last hour of sunlight during the day,when a specific photographic effect is achieved due to the quality of the light. – Wikipedia

A really useful tool I strongly recommend you check out (the UI could use a little work however).

The link: The Twilight Calculator

An accessible and validated PHP/jQuery contact form

This is a really accessible and well validated contact form powered by PHP and jQuery. The design is based on Orman Clark’s ‘Clean and Simple Signup Form‘.

Using both serverside PHP and client-side input validation (powered by Jorn Zaefferer’s great jQuery Validation Plugin) this form is developed using ARIA accessibility standards, making it one of the most accessible and reliable contact forms available.

Usage

In order to get the form working, all you need to do is open up index.php in your favourite text editor and replace the pre-configured sample email address with your own. That’s it. It’s as simple as that.

As you’ll notice, both jQuery and the validate plugin are served via CDN (Google and Microsoft respectively) so all you need is the core PHP script and the dependent presentational files (images and CSS).

The form has been tested in all major browsers and works great, but as there are a couple of very minor CSS3 presentational things it might not look quite as great in non-compliant browsers (I’m looking at you <IE8) but even then I doubt users will really notice.

See the demo or download the contact form.

License

As with all my freebies, this is distributed under the Creative Commons Attribution 3.0 Unported License.

A jQuery and PHP RSS Feed Syndicator (with auto-reload!)

This simple jQuery and PHP feed loader is a dead simple and effective way of adding the contents of a news feed to any page you choose. Inserted into a page using only jQuery, it’ll allow you to keep your users up to date with whatever’s happening right now with it’s inline Ajax powered reload.

There are several ways in which you can display the contents of an RSS feed within another page: doing it only with built-in PHP functions on page-load; using external classes or by using JavaScript itself to grab and parse a feed using a PHP proxy. All of which have their distinct advantages and disadvantages.

The method I’m using is a combination of the two, using PHP to grab and parse the feed and then JavaScript (via jQuery) to load the data into the page and auto-update it every 10 seconds (or by whatever period you’d wish). The PHP is based on Gary White’s very effective RSSReader.

Usage

The address of the feed to be displayed is determined in rssfeed.php (contained within archive provided below), you can edit it as you see fit. Once this edit has taken place the demo should function perfectly, displaying the most recent entry from the specified feed.

However, if you wish to install the feed syndicator on another page (and let’s face it, you probably will) it’s simply a matter of copying the JavaScript marked and contained with the header of index.html (included in the download) into the desired page and adding id=”rssUpdater” to the div where you’d like the feed to be displayed.

Note: When installing the script, be aware that you need to keep rssfeed.php and rssreader.php within the same directory, and that the path to rssfeed.php needs to be accurately determined in the JavaScript.

If you’s like to alter the length of time between auto updating the data, it can be set up changing the value used by the JavaScript: this is set to 10000 milliseconds in the demo (10 seconds, obviously( but can be pretty much anything you like.

At following links you’ll find the demo and a link to download the zip file.

As always, if you have any questions feel free to ask in the comments.

Accessibility and an introduction to ARIA

First of all, what the hell is ARIA and why should I care? Well first of all, that’s a rather rude way to start a conversation, but whatever dude; the Accessible Rich Internet Applications (ARIA) is a proposed specification (currently in the working draft stage) developed by the W3C. What it does is set out a proposed structure for front-end developers to programmatically make their applications and pages more accessible.

So in short, it makes people who have trouble viewing normal pages lives a little easier.

As ARIA is still in the draft stage the final spec might change, but getting a good grasp of what it is now and how it can be used to improve the accessibility of your apps can be of real benefit.

First of all, if you want to take a look at the full draft spec as it stands it’s accessible via the W3C site. As with all full spec sheets produced by the W3C, it’s a little tough to wade through, but if you can stand to trudge through it I’d encourage you to do it.

At it’s core ARIA allows us to define the role of an element (say a navigation bar), what properties that element has (if a form field is required for instance), and last of all the current state of an element. All of this is done by using a new set of proposed HTML attributes and values. One of the most important is the role landmark attribute, what it does it is provide a way for assistive technology (like JAWS) to allow users to navigate a page using simple keyboard short-cuts. It’s simple as hell to implement too, check out an example below:

As you can see in above the example, the role attribute’s used to denote the role of this element in the interface.

Another of the new set of ARIA attributes is used to define the state of an element, there are a few we can use, like the following: aria-required=”true”, which is fairly straightforward in that it denotes the fact a fields is required. This is quite a large area in itself so I won’t go into it here, but please read the spec if you’re interested.

So that’s all good right? A simple and effective way of making your designs more accessible? Great! I love it! But wait, there’s a small problem: compliance with the standard.

The current versions of JAWS, Window-Eyes, NVDA and ZoomText have some preliminary support for ARIA. But as with all of these things it’s not complete support in any, and with the unfinished state of the spec that’s not gonna change any time soon, unfortunately.

I’m not gonna go into much more detail, this being an introduction and just the first in a series of posts regarding ARIA and accessibility more generally, and I’ll expand on it much more in the future. But if you have any questions at this point, I’m happy to help in the comments.

CSS3 Media Queries and Mobile Devices

Having trouble with pages rendering poorly on modern mobile devices? Want to target those devices using just CSS? CSS3 media queries are the answer to your problems.

Media queries are a way of telling a browsers which CSS rules (or entire style-sheets) to apply in different circumstances. They started out life as the not often enough used media=”screen/print” attribute in the CSS2 spec, which allowed the browser to apply different style-sheets to different representations of data. They have since transformed (in the CSS3 spec) to become one of the most useful tools in targeting specific CSS rules to different devices and screen resolutions.

Laid out below are a series of media queries that will allow you to target very specifically various modern mobile devices, predominantly among which are the Apple made iDevices.

The queries themselves target the devices by only displaying content to screen resolutions of certain minimum and maximum sizes (with the exception of the iPhone4) at the moment modern mobile devices function at below the average desktop resolution, making them easy enough to target without collateral damage to desktop user’s with small screen resolutions.

If you have any questions about media queries, or need help with something specific, feel free to ask in the comments below.

Simple and Minimalist Nav Bar (+ extra CSS3!)

Inspired by having a little free time, and the fun I had doing it yesterday; here is another implementation of one of Orman Clark’s designs, his ‘Clean and Simple Navigation Menu’. As you will see however, I made a couple of small changes: most noticeably to the font (due to browsers not rendering Helvetica Neue Bold nearly as well as Photoshop); and removing a couple drop shadows (just because I thought it looked a little better this way).

There are two versions available, one is a regular cross compatible jQuery powered bar built using image sprites that can be put right into production and works great on any browser (including IE6!) and the other is a CSS3 experiment, but without any images or JavaScript at all, which shouldn’t be placed into production for obvious reasons.

Find the demos of both here; the regular download here and the experimental CSS3 download here.

These files are licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. So feel free to ue them however you like and distribute them (with attribution!).