graphiceyedea » workshops

jQuery for Designers

prisca — Sun, 16 May 2010 11:02:34 +0000

Another brilliant day courtesy of “for a beautiful web” [#fabw] :)

I had been playing around with various bits of jQuery on several sites – and really seeing the potential of enhancing my designs with it. My problem was not being able to troubleshoot errors and not being able to edit the effects properly to suit my designs. I was starting to gain more understanding and being to do much more than I thought – but I kept hitting walls… So this workshop with the lovely Remy Sharp was just the ticket to get me going :)

[photo by Remy Sharp]

And it was brilliant – I learnt a lot and left with a full head, bursting with geekery, tons of new ideas and solutions to old and new problems flying through my mind. Now I just hope I will be able to put into practice what Remy taught us, fingers crossed :)

Andy and Sue as always were lovely hosts – the venue was wonderful, the food delicious. We received a beautiful cloth which is delicately embossed with the #fabw pattern and text. Just gorgeous ;) And the workshop was just brilliant.

While Remy’s talk is still fresh in my head (with a few reminders taken from Remy’s slides) – here are just a few of my notes from yesterday for reference:

first and most important point was “Build without jQuery” first. Focus on designing the page and making sure it all works correctly with CSS alone before even starting with jQuery. Design the page and once complete – add jQuery a little at a time, testing as you go along. A brilliant quote from the slide:
(a lot of it is) “all about CSS”
one of the advantages of jQuery is that it simplifies – using the JS library allows for simpler and shorter code to implement the effects.
For example, to get table striping to work in IE6 – instead of several lines of JS code – you only need one:
$(‘table tr:nth-child(odd)’).addClass(‘odd’);
to check whether a website is using jQuery and which version – use FireBug and type the following into the Console:
$.fn.jquery
you can use jQuery on every site – to run scripts and more – using the jQuerify bookmarklet: jQuerify on ‘learning jQuery
to install jQuery on your website – you can either keep a copy within your site’s directory or hotlink it to a source repository (from Media Temple, Microsoft or Google). Remy recommended to link to Google – saying it will be very efficient due to the CDN. This works by loading in the geographically closest copy of the script you are using and it is therefore likely that your site’s visitor already has a cached copy in his/her browser – therefore speeding up page loading.
code order — all JS should be kept at the very bottom of your HTML code, just before the closing body tag. This will allow the page to load fully and only then begin to read the JS. And the order of the code for using jQuery should be:
1 – jQuery link
2 – jQuery plugins
3 – custom code
And if you are using other JS libraries in addition to jQuery – put those first, followed by the jQuery order listed above.
From Remy’s slide:
JS usually needs to check for ‘document.ready’ – by placing the code at the very bottom of the page this is no longer required as it will be loaded last, once the rest has already been loaded. The code usually looks like this: $(document).ready(function () {
// < YOU >
});Following Remy’s advice of the order of code – the above can now be shortened to this:$(function () {
// < YOU >
});
Remy also pointed out that it might be useful to use the below instead, especially when handing over code to others. The code below is practically the same as the one above but has the advantage that it clearly mentions jQuery and can avoid clashes with other JS functions.
jQuery(function ($) {
// < YOU >
});
an example of the click function – briefly explained:
$(‘a’).click(function () {
alert(‘I got clicked’);
return false;
});
First the anchors are found. Once they are clicked – the function is run (in this case showing an alert text).

‘return false’ cancels the default behaviour of the browser which would be to follow the link and redirect.
For debugging – use the following:
$(‘a’).click(function(event){
event.preventDefault();
alert(‘I got clicked’);
});
WARNING : selectors fail silently, the same way CSS does.
When you target selectors for use with jQuery and make a mistake (similar to making a mistake in your CSS by getting the selector’s name wrong) – you will not see an error show up. Your function will simply fail but not break the page or show a warning.
In order to find exsiting selectors within a page – use the FireBug console. The code below would look for any selectors named ‘remy’ in the page’s code and return the result in numbers.
$(‘remy’).length

to target specific selectors within teh page – you can simply use the same names as in the HTML, for example:
$(‘#nav li.contact’)
To target selectors found only within a set element – use the following:
$(‘#main’).find(‘.header,.footer’);
The above code will look for elements with the class of ‘header and ‘footer’ within the ‘#main’ element.

for finer control – use a combination of ‘find’ and then filter the results. For example, first to find all anchors:
$(‘a’)
Then to filter the links by title attribute:
$(‘a’).filter(‘[title]‘)
A very useful application of this is the finding of links to other file types such as .PDF – then adding a class to them which can be targeted via CSS to add an icon to those links:
$(‘a[href$="pdf"]‘).addClass(‘pdf’);
The code above looks for all links which end in pdf and then adds a class of ‘pdf’ to them. To look for links starting with a hash key – you’d write this instead: $(‘a[href^="#"]‘).addClass(‘someclassname’);
for faster loading – you can chain functions together though you should avoid chains which are too long.
For example, the function below first looks for all divs, then shows them, then hides them. Then slides them up and then down. This could be written as separate functions:$(‘div’).show()
$(‘div’).hide()
$(‘div’).slideUp()
$(‘div’).slideDown();
Or you could write this – putting them all together in a chain, written like this:
$(‘div’)
.show()
.hide()
.slideUp()
.slideDown();
or this:
$(‘div’).show().hide().slideUp().slideDown();
To end a chain in case of very long chains – you can use this:.end()
a popular jQuery effect is to show extra information when the user rolls over a specific element, like an image for example. Remy pointed out a common mistake is made with this which would cause the effect from carrying on despite the cursor no longer being above the set element. This function could be written like this:$(‘div.picture a’).hover(function () {
$(this).find(‘strong’).fadeIn();
}, function () {
$(this).find(‘strong’).fadeOut();
});
To stop the looping effect by telling hover effect to stop properly once mouse is no longer over element – this code below should be used instead:$(‘div.picture a’).hover(function () {
$(this).find(‘strong’).stop().fadeTo(‘normal’,1);
}, function () {
$(this).find(‘strong’).stop().fadeOut(‘normal’,0);
});
NOTE: the hover function always needs 2 functions, one for hover and one for mouse out.

There was so much more which I might write up another time – looking at animation via jQuery and some neat Ajax techniques. This would turn into too long a blogpost if I tried to fit it all in. Just for future reference – a few links to get more info and help with jQuery:

jquery.com
forum.jquery.com
API: docs.jquery.com
API: api.jquery.com
API: visualjquery.com
IRC channel: irc.freenode.net/#jquery
jqueryfordesigners.com (Remy’s site with great tutorials, screencasts and more)

I had a great day, learnt lots and met some lovely people, some old faces and new. A huge thank you to Andy [@malarkey] and Remy [@rem] :-)

PS: in case I made any mistakes in my notes or code samples – please do comment and let me know ;)

Andy on visual design

prisca — Tue, 02 Dec 2008 22:55:54 +0000

Yesterday was the “Visual Web Design Master Class” with Andy Clarke – if you don’t know it already – have a look at the website ‘for a beautiful web‘ (to see it in its full glory – view the site in Safari :). I had been looking forward to this workshop as its focus was on design rather than coding. Though I love learning more new techniques and clever methods for the technical aspects – I feel I don’t have the time to delve on the design aspect of my work, though I always wish I had.

So you can imagine my shock as I arrived at the chosen venue of StMartin’s to find the building dark and without power…! Thanks to a last minute venue change which seemed to have gone amazingly smoothly the workshop went ahead without much delay :-)
You can read more about this near disaster on Andy’s blog.

Andy started with a look at how to get fresh inspiration. As webdesigners we do look a lot at other people’s sites and their online work – taking inspiration from the design we work on ourselves. Breaking out of this habit – Andy listed a few things we can do to find inspiration in more unlikely sources: read a short story every day, read a poem every day, drive someone else’s car, look up, swap your iPod with a friend, read classified ads (for showing a lot of info in an condensed space), watch a bollywood movie, learn to ride a motorcycle, take a different route every week / once a week.

After this introduction – Andy’s presentation went onto typography and grids and was amazing – and I will not be able to do it justice here – so I will point you to the beautifully crafted designs on the FABW site’s blog: Typesetting The Waste Land

Another highlight of the workshop was the working lunch during which guest speaker Brendan Dawes did his presentation. Brendan was very dynamic and entertaining and inspiring, showing amongst others his Cinema Redux and one of my favourites DoodleBuzz.

Apart from a head full of typography, grids and inspiration – we all went home with a beautiful Moleskine sketchbook (squared) and Lamy pen. I love both – and the subtle branding is just gorgeous ;)

The workshop was brilliant, I thoroughly enjoyed Andy’s presentations, as well as Brendan Dawes talk, met some interesting people in my fellow attendees – and was happy to see Pixeldiva Ann McKeen again :-)
The day concluded with chat and drinks in the pub and I went on to join Andy & Sue, Mikey (Andy’s brother) and Owen Gregory for meal which was a lovely end to an inspirational day. Thanks, Andy :)

→ view flickr slideshow #fabwlondond08

INMD workshop – last day

prisca — Mon, 19 May 2008 15:52:47 +0000

today is the last day of the INMD workshop – on the program for today is more usertesting and an afternoon of talk from selected experts. I will try to keep notes as we go along today as I am not sure whether I will have time to write this up afterwards.

MORNING SESSION – user testing
I had fun helping the Lisa, Alex and George with their ‘iBrow’ application. Their idea of a image sharing / uploading application is inspiring and it was nice to see our users have fun with images and with sharing their interests.

We went onto to testing a site in working progress:
newham – easy read

It was interesting to hear the different opinions – very surprising at times. Though we expected people to find the icon driven navigation easier – our testers seemed to prefer to read the text. A few points we found:

rollovers should be as larger as their boxes (if visually prominent)
text colours with high contrast are preferred for ease of reading
symbols were interpreted quite unpredictably at times – careful consideration needs to be taken in order to avoid confusion

making guidelines accessible…?!
our task was to brainstorm notes on how the guidelines might be written to be inclusive of our ID group. This proved to be as hard as expected – and thought we managed to put down a few good points I feel we merely pinned down good practices for usability and accessibility. Here are our notes in detail:

AFTERNOON SESSION – expert panel

Ann McMeekin – PixelDiva

testing tools might be suitable for specific tasks but not for the ID usergroups
ID users will require specific testing
keep trying to push toward the right aim, making site as accessible as possible
pick your battles – and show examples (eg YouTube videos) of disabled users to make your point
accessibility is a journey not a destination

Nick Weldin - Paddington Arts

internet is becoming more complex – so are the user groups
bare in mind the support workers who might assist people with learning difficulties
keyboard control is vital

Simon Detheridge – widgit

symbols can hugely enhance the accessibility of websites
speech facilities will also aid usablility
symbolworld = online reference
additional advantages are easy understanding for people with poor language skills, literacy problems
isaac site as example of symbol usage
for symbolised alternatives: access from home page, limit navigation to less than 8 items, symbolise 1 sentence in 1 line (due to no symbols for punctuation), do not overload the page with a vast number of symbols

Antonia Hyde – United Response

five tips on ‘big is beautiful’
icons, graphics and pictures
keep supportive graphics at a large size
interaction
be clear in indicating interactive elements
controls
put user in control over text size for example
control access – be clear on the main functions
help – make help files available and clearly visible within the page

Jonathan Hassell – BBC
(participating writer on PAS78)

inclusion
try multimedia, such as video – make use of web2.0 functionalities
personlisation
try personlising interfaces – complexity vs simplicity
(working example: BBC’s homepage feature is customisable)
beyond inclusion
try creating something special where needed (be careful not to ghettoise…)
in specific instances it will be the better solution to create specific features/pages for a select audience

Andy Minion – RIX centre

including multimedia is clearly a preferred interest of the ID group
positive influence of symbol usage making people re-think content structure

Today was a nice end to a great workshop ;-)

Before I finish this post however I have to say my bit about one part of our expert panel which really bothered me – the symbols and widgits issue… This had shocked me at the very beginning of the workshop when we heard about the licensing of these symbols and the sheer cost imposed upon anyone wishing to implement them.
Simon Detheridge from widgit, the company selling the software and licenses, presented what I would describe more of sales pitch than a few words on the issue of ID users needs. I was skeptical from the start, of course. But listening to him elaborate on the symbols being part of education – only to be less available once people leave school – sounded just like a perfect – and horribly exploitative – business scheme to me. Highlighting other benefits of symbol use just made this point even clearer.
During the Q&A – to be fair – Simon Detheridge did receive a bit of a grilling and did well in answering. But again, what he said only confirmed what I felt. Being asked to give a ballpark figure of licensing for the use of symbols on a site such as Curry’s for example – the answer was around £2500 (to be paid by the website owner). The browser the company developed to interpret exisiting websites and translate them into symbols would cost the user a yearly licensing fee of £60 (to be paid by the user).

I think these prices are an absolute outrage – profiting from disability is simply wrong. Full stop.
No reason can be given which makes this right. One line sticks in my head “it is not like we are taking people’s language away” (quoted from memory, Simon Detheridge, widgit). – sorry, that is exactly what you are doing! By charging for the use of what you call ‘standardised symbols’. How can you claim property of something that so many people rely on?

The development of the symbols will have taken a lot of research, work and time – no doubt. And I am by no means saying that the people involved do not deserve their money, of course they do. There are however other ways of bringing in money and still do right by the target group of disabled people. Open Source – charity with funding bodies – anything….
I could go on with my rant here but I will leave it at that…. enough for 1 day ;-)

UPDATE: here’s a quick video collage of the panel which the INMD team put up on YouTube.

transcending CSS with Andy

prisca — Thu, 15 May 2008 22:55:42 +0000

yesterday I had the pleasure of meeting Andy Clarke and attending his workshop “Transcending CSS: Styling For A Beautiful Web”. It was a great day with quite a few ‘lightbulb moments’ for me.

It was great to listen to such clear and to-the-point explanations and I finally clicked with relative positioning ;-) Andy presented a beautiful demo site inspired by Billy Bragg and talked about a lot of wonderful techniques. It was inspiring to hear Andy’s take on the different issues and I was glad to find my own opinions were very much along the same lines…

Hopefully, if time allows, I will soon try to write a post about some of the things I’ve learnt. For now – I can’t wait to implement a few CSS techniques and start by creating a new and cleaner CSS for this site here :)

THANKS, Andy :)

September ’08 UPDATE:
Andy has now put together his own and brand new site for his workshops. Titled ‘for a beautiful web’ – the site is very different in visual style and shows off some of the new techniques – you should have a look (viewed in Safari the site will show off its best side ;)
→ forabeautifulweb.com

PingPong game for ID players

prisca — Wed, 19 Mar 2008 18:56:34 +0000

[part of the INMD project]
PROJECT PAGE: PingPong game for ID players

OUTLINE: This game is intended for the ID group with the most severe intellectual disability.
It is therefore intended to be played with assistance, at least for the start of the game. It can be played by 1 person alone – or be played as a 2 player game, each player taking charge of 1 side of the game (left/right black bar and their corresponding half of the screen/projection).

Though this project started off as a group project – both Anuschka and Darren ended up not working with me on this. The plan had been to set up our game in 2 versions: 1 in Flash, 1 in Javascript. I was happy to do the flash work (and was lucky to get help from Simon) – and Darren was hoping to find time to set up the same in Javascript. In the end however – only the flash version was done and ready for testing…

The 2 days of User Testing organised by the INMD team together with the RIX centre were very interesting and fun :) It was great to meet our user group and we were lucky to be introduced to a great team of support workers and such a nice group of people in our testers :)

Day 1 turned out to be a bit of a disaster for me and my game… Though Simon had helped me to get the 3 levels setup and working – a missed flight meant he was not around on the day to help with the switch setups (which I was not familiar with). This then meant that I was stuck with an almost non-functioning game. I ended up having to use my own versions – which were split level and very plain. Though my users seemed to like the idea of the game – it was way too short to be engaging enough – and I felt bad wasting their time. The short duration of the game however did give me opportunity to ask a lot of questions and find out what additional elements might be good to implement. Initially I was unsure how to proceed (being very disappointed and thrown by the fact my planned test game was not working) but Rasime Singh from the RIX team was there to support me and we ended up having some nice chats with the user group :) – THANKS, Ras :)

At the end of the day I was determined to have a better session the following day – and show our testers that their ideas and suggestions were taken onboard. I took their ideas of additional colours and imagery (the requested rainbow specifically) and worked on editing the game further. After a long night I was happy to be able to show a much more complete and fun game the next day.

Day 2 of the User Testing then was a blast :) It was fantastic to see the happy faces of my users when they played the game. The changes I made the night before seemed to make all the difference; Simon was there to help me set up the switches and it all went very smoothly. We had a lot of fun – and it was nice to see the different reactions. Some were happy to merely play very calmy and enjoy the colours and sounds. Others, especially the boys, were getting quite competitive and were keen to out-do each other. I was happy to see that my ending with applause and fireworks did bring a smile to the players’ faces :)

I am hoping to finalise the game for our last workshop day and to donate the game fully working to the RIX centre.

Here is a clip of a few of us giving our impression of the workshop and our experience with the user testing :

INMD workshop – day 2

prisca — Tue, 15 Jan 2008 20:10:36 +0000

Today was the day #2 of the Inclusive New Media Design workshops – and it was a very interesting day as I learnt about people with ID (Intellectual Disablility) and their perspective on every day life as well as their use of the internet. I’m hoping there will be some reference material going up on the INMD site over the next few days which will be good to read.

I was quite shocked at the poor standard of code and overall design for the example sites we looked at. These sites are designed specifically for people with ID and I somehow naively expected both their code and their visual design to be much more up to the modern standard. The code is very poor on most, the information often lacks / or neglects/ good structure, navigation is often confusing and odd … – I cannot understand why so little care is taken in producing these sites… :”(

Hopefully the links we looked at will soon be available on the INMD site – but for now, the ones I can remember (coincidentally these are the better ones out of the list of sites we looked at):

We also looked at the symbols and aids available for web designer to use to make a site accessible to people with ID – I was again educated – shocked to find out that these symbols and and helper application are priced so highly while remaining insufficient and at best merely adequate. Just a few related links for reference for now (again, hoping the INMD site will become a more complete reference):

BroweAloud – a screen reader, similar to JAWS
Symbol World – makers of one of the symbol sets used
Reactive Colours – a project to explore a positive computer environment for people with severe ID

That’s all for today – got to get back to things….

INMD workshop – day 1

prisca — Mon, 14 Jan 2008 22:34:07 +0000

Today was the first day of the Inclusive New Media Design workshops – to quote the site:

Inclusive New Media Design is a research project which aims to identify the best ways to encourage web designers and developers to build websites accessible to people with intellectual disabilities.

just summing up a few points which should by now be standard practice (WCAG 1.0 discussion points from Simon Evans):

do not use tables for layout – or forms (will not linearise well)
tables if used at all – should lineraise well, ie strippped of any formatting via CSS for example – the table should still make sense
create content that can be presented in different ways,
eg information, structure and relationships conveyed through presentation can be programatically determined and available through text
present page content in a meaningful sequence
whenthe sequence in which the content is presented affects its meaning – a correct reading sequence can be programatically determined
marking up forms for accessibility
1. fieldset (grouping of form fields)
2. legend (title for a group of form fields)
3. label (title for a specific form input field)
one approach to forms (by Darren West):
using unordered lists for list of options such as gender and status input fields – the layout will degrade gracefully and maintain a meaningful and visually decent layout

a few useful links:

workshop with the master ;)

prisca — Fri, 20 Jul 2007 21:46:42 +0000

Eric is back in town ;)

If you can spare the money and the time – this is a workshop you should not miss ;) This time around I am sadly not able to take part :”( – but I can tell you from attending last december that this is just a fantastic opportunity :) There’s nothing like hearing the master discussing CSS techniques and best of all being able to ask questions.

You probably know Eric through his books, articles and his blog – but it’s just nice to meet such an expert in person. He’s not only an inspiring speaker but also a really nice funny guy :) You’ll have a great time and learn a lot!

The price tag is quite steep and if you’re lucky enough to work somewhere you might be able to convince your boss to fork out the fee. If you are – like me – a freelancer – it might be a bit steep. But I still found it worth every penny :)
→ carson workshops / eric meyer