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.
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.
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).
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.
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.
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.
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.
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).
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.
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.
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 (even if you are using a (light-weight PHP framework) with whatever’s happening right now with it’s inline Ajax powered reload.
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.
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.
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.
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).