Wednesday, August 29, 2007

A Stitch In Time

I've got a probem with date sorting.

I have a PHP/mySQL application which requires sorting a dataset by year.

As mySQL won't let you store just the year, I originally used a varchar (text) field to store the year, YYYY, which sorts nicely.

However, I now have a client who wants to be more specific with some dates only, ie they want to be able to store YYYY, YYYY/MM or YYYY/MM/DD in the same field and still have it sort nicely.

OK, so I can force them to input the full date (when required) in the YYYY/MM/DD format, but that looks really ugly when output to the web page as a human-readable date.

So my problem is this:

  • If I want human-readable dates, like 1 January 2007, and go for a text field, they won't sort properly as 1 April 2007 comes before 1 January 2007 in that case.
  • If I opt for the date field, it would sort properly but I can't store dates which are just month/year or year only, as mySQL throws a wobbler and protests when you don't have the full date input.
Storing the "date" as a string: 2007/08/01 (the pubDate) sorts nicely, and I had hoped using the following PHP:
<?php echo date('j F Y', strtotime($row_rsByDate['pubDate'])); ?>
would solve the problem, since it gives a nice date 1 August 2007. But there are still issues with just storing part of the date - see screenshot below:

The entries are sorted correctly (most specific at the top, descending order). The first date (red) is the nice output of the PHP function - the second (puce green) is the actual stored text.

It falls over horribly when only the YYYY/MM is stored (returning 1st January 1970) or YYYY (returning today's date).

EUREKA!

After much discussion (via the comments on this post and my buddies on Twitter) , I was almost ready to explode with frustration at not being able to find a solution. Turns out, that's exactly what I needed to do!

James Aylett suggested I use the PHP explode() and implode() functions to write a custom parser. I didn't actually need the implode() half as it happens. Being a relative newbie to PHP, I'd never heard of the explode function, so thanks for the pointer, James!

So, to recap. The database column should be stored as TEXT or VARCHAR(10) not DATETIME. That way, all variations of YYYY, YYYY/MM or YYYY/MM/DD are acceptable, and will sort correctly. This will look horrible if put straight into the page, so use something like the following to present it nicely to the web page:

<?php $split = explode("/",$row_rsByDate['pubDate'],3);
print_r($split[2]);
echo " ";
if ($split[1]==1) print_r("Jan");
elseif ($split[1]==2) print_r("Feb");
elseif ($split[1]==3) print_r("Mar");
elseif ($split[1]==4) print_r("Apr");
elseif ($split[1]==5) print_r("May");
elseif ($split[1]==6) print_r("Jun");
elseif ($split[1]==7) print_r("Jul");
elseif ($split[1]==8) print_r("Aug");
elseif ($split[1]==9) print_r("Sep");
elseif ($split[1]==10) print_r("Oct");
elseif ($split[1]==11) print_r("Nov");
elseif ($split[1]==12) print_r("Dec");
echo " ";
print_r($split[0]);
?>

explode() - separates the string found in pubDate into its component parts (the separator is set by the first parameter, "/"), giving the $split array. This containts up to 3 elements, depending on how specific the stored "date" is.
$split[2] is the DD day element and is printed directly.
$split[0] is the YYYY year element and can be printed directly.
$split[1] is the MM month element, which requires the pretty formatting. So a match against each month number prints out a more human-readable month. Voilà!

Another screenshot - this time the green output is the unprocessed pubDate text field, and the preceding red date is the bespoke-parsed version - allowing for all cases of "date" format.

Some caveats:
I wouldn't normally recommend spoofing the date like this - if it's a real date (specified to day, month, year for every record) then use the DATETIME type in your database - this will sort and you can perform arithmetic on it quite readily (eg next month, last week etc).

I only went through this pain because of the special case I was finding - the publication "dates" of newspaper articles (day, month, year), journals (month, year) and books (year only) which my data required. Using this solution lets it all sort properly and look nice to viewers. Win!

Thursday, June 07, 2007

@media - Five Steps To Better Typography

Next up was Mark Boulton, who wanted us to work with typography in a better way.

  • Be Appropriate & Adaptable
    Typefaces tell stories, and the web is still playing catchup with this power. Comic Sans is appropriate for the menu at a greasy spoon cafe; you wouldn't want an invitation to a Black Tie event done in it though. Similarly, the BBC's use of Gill Sans evokes order and authority. The BBC logo has a twist - by reversing the type and blocking out the shapes of Gill Sans.
    Don't let type and design get in the way of words.
    Be adaptable to requirements, and appropriate for the story.

  • Use Rhythm
    Richard Rutter's Compose To A Vertical Rhythm explains about using the line height and leading of your blocks of text to best advantage. The basic theory goes: 12px font height with 18px between lines, give a line height of 1.5. You can use incremental leading to make 4 lines of text in the main body of a page line up with 5 lines of text in a sidebar.
    [Text in the sidebar bears no relation to the main body copy. It looks messy.]
    The maths gets a bit hairy: 18px x 4 lines = 72px for the main body. 72px ÷ 5 lines = 14.4px for the sidebar
    If you're using 10px height for your sidebar text, 14.4 ÷ 10px = 1.44 line height. You may find the sidebar top-margin property needs a bit of tweaking to get it to line up properly.
    [This looks much better now everything is aligned vertically]

  • Optical Grey
    If you squint at a block of text, you'll see the page has different tonal ranges depending on font, leading, letter spacing etc.
    Verdana has a more open shape, so is paler at smaller sizes.
    Combining serif and sans-serif fonts can be effective, giving different "colours". Minimize dark grey and balance the line height.

  • Use The Right Tools For The Job
    Hyphens "-" are NOT em dashes!! "—". Use an em — or en – where appropriate.

  • Use a Grid System
    Use grids as a tool to help you organise information. How to decide how big the grid unit should be? You can subdivide the units too - you might have a 3em high by 4.5em wide block, which divides nicely into 2x3 squares each of 1.5em width and height.
    Choose gutter sizes carefully, it can depend on the relationship between whitespace and font size.
    Using Alternate Row colours in tables must be done with care - don't use colours which are too strong.
    Set type to your grid, and align everything! The smallest error can really stick out.
In Summary
Typography is all about the details. Tiny increments can make a huge difference. The full slides are available at Mark's website.

@media - Design Interface Juggling

Dan Cederholm took us through the various elements of interface design that a good juggler should be able to "keep in the air".

[Dan and his interface-juggling octopus]

Colour
Colour evokes an emotional response in the viewer, and we need to be careful when choosing a palette. At Wellstyled.com, there's a handy widget for generating complimentary colour schemes. Try it out.

Dan had mocked up a site especially to demonstrate some of his points - go have a giggle over at ToupéePal!

One good way of choosing a palette is by taking shades from a photo - either sample direstly, or pixellate it and use some of the blocks. Dan often starts with colour as the inspiration for a site and works from there. He will re-use certain strategic colours throughout a site, eg Links, headings etc. The colour used for links will always carry weight in the design.

Typography
Great typography is actually invisible - we don't notice it. But do it badly and it sticks out like a sore thumb. He recommended the article, Web Design is 95% Typography to read.

There are a limited number of fonts we can realistically guarantee a user having on their system, but within these constraints, we can still get creative. Try using the text-transform uppercase or lowercase styles, change the letterspacing, text-align, leading etc to vary the typographical colour of a block of text. Good reading: "The Elements of Typographical Style" by Robert Bringhurst, if you can find it. Read more on applying it to the web here.

Favicons
Could be regarded as the most important design element on your site! They are the thing that represents it in the shortcut icon, browser address bar etc.

[Subtraction.com uses each site's favicon as shorthand branding for the link]

So when creating a favicon, it has to be something memorable. They must:

  • Scale well down to 16x16 pixels
  • If the whole logo doesn't work, choose a fragment to focus on
  • Use something unique about the site that still ties in with the branding
Icon files can be made with Iconographer or a plugin for Photoshop. As well as the standard 16x16 icon, 32x32 and 64x64 pixel icons can be inserted into the same .ico file. There's an interesting collection of Favicons at Delta Tango Bravo's blog.

Add Detail But Not Complexity
Understand the limitations of the browser, and suggest the box [model] but with minimal suggestions. Perhaps use just one rounded corner on an element. Re-use graphic elements where you can.

Microformats
If you site contains any sort of contact information, events lists, reviews or relationships, then you should be marking them up with Microformats. Using what works today can encourage others to do the same:

[The Microformats can be used by people, applications and as hooks for CSS]

Brian Suda did some parsing of Cork'd for Microformats, and used this information to add wine reviews (from Cork'd) to his Scrugy site, where you can learn all about wine. Corkd's Microformats had produced an accidental API. If you were to mash this up with a list of your XFN friends, you could use it as a filter for just returning reviews from your trusted sources.

@media - High-Noon Shoot Out: Design vs Implementation

This was a bit of light-hearted fun, with two heavyweights standing in opposing corners and trying to convince us their point of view was right.

[the protagonists on the podium]

In The Design Corner - Mr Simon Collison
The Design Manifesto went thus:

  • Visual design is not complex engineering
  • Design interfaces visually, don't be afraid to take risks
  • Reserve the right to veto decisions of technologists
  • Think, build & design organically
  • Don't pander to personal prefereneces
  • Deliver a rich, considered visual experience for all
  • Be expressive with web typography
  • Layout decisions are the preserve of the designer
  • Visual design makes the first impression - respect it!
  • Build everything in Flash (not really)

[Evil Drew - New Implementation, New Danger!]

In The Implementation Corner - Mr Drew McLellan
It all started with nxoc01.cern.ch, the very first web server. Drew said we were all implementers, and as such, we needed to know our enemies:
  • Fixed width layouts
  • Flash for non-media presentation
  • (Flash breaks the basic nature of the web when used for anything other than a player for graphics or audio, and each Flash player instance impacts on performance of the browser)
  • Text replacement, since text on a web page is a solved problem
  • Styled form elements
  • Potent GETs
  • Controlled heights
  • Controlled text size
  • Colour schemes and low contrast
  • The user agent
  • The FOLD - THERE IS NO FOLD since we never know where it's going to be from one browser/user to the next!!
[Drew gets all fervant and placard-wavey saying There Is No Fold]

Conclusion
Of course, we all know that life's not so black and white, and at different times, we may have to sit in different camps. So it was a nice way of stimulating some light-hearted debate, but there's definitely no "right" answer on this one!

@media - Diabolical Design: The Devil Is In The Details

The conference split into two tracks, and I chose to listen to Jason Santa Maria of Happy Cog Studios talking about Design. Design is intent, and that must be reflected in the finer details.

Colour
Colour means different things to different people and evokes emotional responses. Use colour for emphasis and to help deliver the message. Faith Inkubators uses purple sparingly for emphasis and it works nicely. A Film uses pink and a particular headline motif to great effect.

Sometimes unexpected colours can be equally effective, The Times' acid green isn't obvious for a serious newspaper, but it works. Some other sites may take a colour from a photo or logo and use this to add emphasis.

Hierarchy
Visual hierarchy should reflect the underlying semantics of headingd hierarchy. It will give users a sense of what's important and what's not in the page. Use a focal point to grab attention and drive home the message. Providing variety can also lead the viewer through a page.

[The visual hierarchy should reflect the underlying document's semantics]

Whitespace
Whitespace is often something designers are afraid of - but used effectively, the "nothing" can be just as important as the "something" it surrounds. Also, optimum line length is 66 characters (anything between 45-75 is OK) for easy reading. The longer the line length, the more leading is required for better legibility.

Organisation - Grids
Grids can be liberating rather than restrictive. But giving users a solid framework can mean they will find it easier to get around your site - less time investment is required to "learn" the grid. He showed us maps of Philadelphia and London and asked us which we would be happier in negotiating as a tourist:

[Philadelphia's regular street plan contrasts with London's maze of tiny streets]

Even when using a grid, there are many ways of breaking the rigid order and still getting interesting designs. These three screenshots are from Australian agency Trout:

[Trout's home page, a regular grid, but even this is broken up with the bright colour emphasis]

[Detail page when you click through from the home page. More of the grid is broken up into bigger chunks]

[The About Trout page, dominated by the main text panel]

Having said all that, make sure that alignment happens and doesn't fall down - subliminal effects can be powerful and if something doesn't quite line up, it will still look "wrong" without the user being able to put their finger on why.

Planning
It's easy to jump into the finished product right from the start. Step back and plan! Keep a sketchbook to jot down ideas - they may all come together at a much later date, but you have them to hand.

[Jason's sketch book showing early doodles for the A List Apart design]

Design should be an iterative process. Grey box comping can help you decide the best weight for various layouts. Jason doesn't show these grey box comps to clients, but just uses them for his own purposes. He would then expect a PSD comp to show to clients, and perhaps 1-2 iterations round the loop before they are happy. The whole process can take a couple of months.

Strive For Clarity
Storytelling gives people hooks and things to remember, they will come back!

Fonts
Use fonts in such a way to give some extra interest to the page. sIFR can be a useful method of delivering certain fonts if they are mandatory branding requirements.

Handover
The all-important step that is often overlooked. A style guide is best kept short, under 10 pages, and provide a dummy template for each type of page, so that other people can look after the site going forward.

Customer Interference!
We all know what he means. But if you find your client is trying to steamroller you, set up a meeting and let them know you are the expert. Try to convince them of you design, as long as it conveys their message and isn't just kudos for your portfolio.

@media - Beyond Ajax

@media has rolled around super-quick this year. It kicked off with Jesse James Garrett of Adaptive Path talking about the future of web beyond Ajax.

He started by asking us "what is the web good for (at)? It's still quite a young medium - as TV and Radio started out emulating theatre, before finding their own feet, a new medium needs about 10 years for us to find out what it's good for - so we should be getting some good clues very soon!

[Be careful not to get confused by the many faces of Ajax!]

Web apps such as Flickr are part of a much larger ecosystem, but benefit it by having an open API that other applications can hook into. The web is now moving away from static pages of documents towards applications and interaction. The kayak.co.uk interface (airline ticket price comparison) was cited as one where Ajax enables users to dynamically filter the search results almost instantaneously. And these products get better with use.

Value can come from the users themselves - YouTube's a good example. The OK GO Treadmill video was home made, posted on YouTube, has been watched more than 18.5million times, eventually got onto MTV and won a Grammy! Then Google buys YouTube for $1bn - it obviously recognises the value in the userbase.

Websites are now delivering a rich user experience via Ajax and other native browser technologies - ideal as no plugins are required. Bruce Sterling coined the phrase that Ajax is "roller skates for the web". It's like the way that gmail and google maps have revolutionised the way we think about interfaces, and now we want everything to be drag and drop.

What's the highest form of praise? Not "makes loads of money" or "never crashes" but "I can't live without it!". Making systems work is all about the balance between technology, features and the user experience. The Diamond Rio was the first ever mp3 player, but it pretty much bombed. Three years later, along comes the iPod - costs more, does less, but it's all about the way users buy into the experience.

Dealing with interactive products stimulates the same part of the brain as when we are dealing with other people. "People are products too". So, products who "know who they are" also seem to pique our attention and become successful. It's why we like things like the iGuy and TiVo logo:

[Anthropomorphic Personification aka "oh look, isn't that cuuuuuute!!!"]

[Developers look at technology but the users think it's all just magic underneath]

Successful web2.0 applications are designed from the "outside in" and focus on the user experience strategy. This was the way Google Calendar was built, and within 9 months it had overtaken the second most popular competitor on the market.

With photography, no-one owns the endo to end solution, but Flickr takes the same philosophy. The About Flickr page states the site's two main goals:

  • We want to help people make their photos available to the people who matter to them.
  • We want to enable new ways of organizing photos.
The longer explanation on the page sets out the goals, but puts no limits on the technology. "The experience is the product"

Wednesday, June 06, 2007

Interaction vs Passivity

It's that time of year again, and the Adobe Live roadshow has been to town. The two-day event was held at the Business Design Centre in Islington, and I went along to see demos of the latest versions of Photoshop, Dreamweaver and all the other goodies in the CS3 Suite.

As well as the product demos, there were also other seminars covering design topics. One by a guy from Avenue A/Razorfish was entitled Web Design With Emotion

This was quite thought provoking, saying users are starting to expect more and more from things like eCommerce applications, and there are more ways of presenting results that just boring old lists of stuff. Two examples he gave were:

Amaznode
Great way of querying Amazon - I ran a search for rugby books on the UK site, and got the following interconnectedness results back:

[Amaznode search results show a web of connectedness for the items]

It's fun watching the network to build up. You can pick up an item and drag it about (the blue knot). Double-clicking the centre book will bring up the item detail panel, which lets you Add to Cart or Go to Amazon. I liked the way it presents related stuff - could be good if you're looking for recommendations based on what you have already. Not sure how reliable they are though!

Etsy's Shop By Colour
Etsy is a site where folks who hand make craft items can sell to individuals. There's the usual way of browsing boring old categories, but the Shop By Colour feature is fun - especially if you are trying to co-ordinate stuff for an outfit or room.

[Etsy shop by colour display]

Swirl your mouse round to stir up the colour trail, and click one you like the look of. The database will bring back a cluster of stuff that matches. It's great fun - go and have a play!

So, just two bits of food for thought which show search results don't have to be boring. Users are getting smarter and prefer interaction to passivity, so whilst this kind of interface would have been unheard of even a couple of years ago, things are changing fast.

Thursday, May 31, 2007

Geek Dinner With Becky Hogge

This Geek Dinner saw us in a new venue, Ye Olde Cock Tavern on Fleet Street, since our old haunt, The Bottlescrue has called time for good. The new place is actually better, I think, because we can have one floor of the pub to ourselves and not encroach on anyone else too much. And the food was much better, too! Thanks to Ian for finding such a great place for us to meet.Becky Hogge was the guest. She heads the Open Rights Group, and explained the work of the ORG, who summarise their goals as:

  • To raise awareness in the media of digital rights abuses
  • To provide a media clearinghouse, connecting journalists with experts and activists
  • To preserve and extend traditional civil liberties in the digital world
  • To collaborate with other digital rights and related organisations
  • To nurture a community of campaigning volunteers, from grassroots activists to technical and legal experts
[Becky explains the work of the Open Rights Group]

[Attentive audience]

The ORG's website is well worth a read if you are interested in any issues regarding digital rights of various kinds.

Thursday, May 17, 2007

Playing Catchup

I seem to have got out of the blogging habit, so I'm hoping to catch up on a few posts now. I'll tweak the dates so they're relevent to the events roughly as they happened (chronology? what's that?!)

The first event I'd like to make a post about was the excellent -

Web Standards Group Meeting on Javascript

Some of us shy away from JavaScript (until recently, myself included) on the grounds that it's not accessible. But these days, if it's done right, it can be positively beneficial to accessibility.

Demystifying Screen Readers - Steve Faulkner
Steve is very knowledgable on screen readers and all their foibles, and is Director of the Web Accessibility Tools Consortium. This talk mainly centred around Jaws (65%) and Window Eyes (35%). The bracketed figures are from a US National Federation of the Blind market share survey - it's obvious these are the two big players.

The key issues revolve around:

  • Dynamic updates - user initiated and independent
    Can the user access the updated content?
    Is the user aware that the content has been updated?
  • Rich Internet Applications (RIA)
    Can the user understand the role of the control?
    Can the user successfully interact with the control?
    Is the user able to access information about the current state of the control?
He then explained the differences in screen reader modes:
  • Browse Mode (virtual buffer) - the user can navigate page content via paragraphs, headings, links, lists etc. They can also activate links and some form controls. But text characters can't be input into form fields, or interact with select elements in this mode.
  • Forms Mode (browse mode off) - the user may only navigate through a document to focusable elements via the TAB key. Text access is limited to "read all" functionality. Most of advanced content navigation is unavailable.
The crucial question we have to consider is, when and how does content become available to the user after it's been updated in the browser?

[Steve Faulkner and the Latency Issue]

Latency is a problem because the virtual buffer does not update and the user doesn't know anything has changed. However, JAWS v7.1 started "listening" for virtual buffer updates in response to things like:
  • window.setInverval()
  • object.innerText (for IE)
  • object.textContent and object.appendChild (in Firefox)
  • changes in form control values
  • And other stuff like ALT or TITLE attribute value changes.
Jez Lemon has an excellent article on Improving Ajax Applications For JAWS Users on his webiste. Steve summed up with some recommendations:
  • Do not code to accommodate the poor support shown by JAWS and Window Eyes.
  • Use unobtrusive methods where available and appropriate, to help screen readers along.
  • Don't use the excuse that JavaScript / Ajax is not accessible for screen readers to not bother to design for accessibility.
  • Start developing interface elements that use WAI-ARIA specs, which will provide some benefits now and many more in the future.
Steve's thought-provoking presentation was followed by a turn from Christian Heilmann entitled Seven Reasons For Code Bloat

[Christain's been on the beanz again]

His notes are available for download from his blog, so I won't repeat them verbatim. Needless to say, it was a fun presentation and contained the obligatory photo of a kitten ;-). Meanwhile, he's thinking of this as the title of his next book:

[Christian's Next Book?]

PubStandards XVIII
Of course, the next item on the social agenda was the PubStandards gathering. Lots of fun and revelry as usual, here's one photo, but you can see more on Flickr.

[Patrick & Ashe go head-to-head, while Ross butts in the middle]

Thursday, March 22, 2007

Disconnected

When I first started cutting my teeth on dynamic web site development, I was pleased that Dreamweaver has plenty of tools to help out. Because we used it at work for sites, I chose the ASP.NET/C# server model, and used Access as the database (perfectly adequate for the size and features of the sites I was building).

Now I'm beginning to get to grips with PHP/mySQL for development. That's going well too. And having used mySQL for a while, I can see the advantages over Access. But what I'd really like to do is upsize a few of my Access databases to mySQL and have them connect to my existing .NET applications, without having to re-write the damned things.

The data migration tools available to s smooth job, and the data is sitting there, ready to go. But now I've hit a brick wall. How to tell Dreamweaver I want to use a mySQL database instead of access! So I began looking for the correct connection string, this was some help. I also downloaded MySQL ODBC 3.51 and installed it.

Then I set the web.config file entry to this (bold being the connection string given in the link above):


Driver={MySQL ODBC 3.51 Driver};Server=localhost;Database=myDatabase;User=myUser;
Password=myPassword;Option=3;" />



I tried the TEST button and Dreamweaver connected successfully! But try running the site via the browser (or Dreamweaver Live Data View) and it falls over with an error:
System.ArgumentException: An OLE DB Provider was not specified in the ConnectionString. An example would be, 'Provider=SQLOLEDB;'.
at System.Data.OleDb.OleDbConnectionString.ValidateParse()

So tried a different connection method, using Connector/Net 1.0.9 with this syntax in the web.config file - but got very similar results. Then I found this following in an Adobe Tech Note (my emphasis):
Do I have to use ODBC?
No. For ASP sites you can also connect to a database using OLEDB. For ASP.NET sites you must use OLEDB or the native ASP.NET SQL Server connector.
So it looks like it has to be OLEDB, but how to put the correct provider in the connection string? Nothing I've tried seems to work! Any clues? Has anybody actually got this combination to work?
  • Dreamweaver 8
  • ASP.NET/C# server model
  • mySQL database

Tuesday, March 20, 2007

Mobile Web Best Practices

Sheila went to the 3GSM World Congress in Barcelona a few weeks ago, and picked up a handy set of cue cards on designing for the mobile web, which she was kind enough to give to me. It was great timing, since I'd been thinking for a while about the best way to go about designing for mobile devices. The cue cards promote the W3C's Mobile Web Initiative, and are great prompts on the best techniques to use.

[Mobile Web Best Practices cue cards]
So for those who don't have a copy, I thought I would share the wisdom that they detail. More info can be found at http://www.w3.org/TR/mobile-bp/ - but the below is a distilled and much more user-friendly summary.

10 Ways To Mobilise
The cards are broken into ten topics, with hints and advice on each:

1. Design for One Web
Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.

Thematic constistency - ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.

Capabilities - exploit device capabilities to provide an enhanced user experience.

Deficiencies - take reasonable steps to work around deficient implementations.

Testing - carry out testing on actual devices as well as emulators.

2. Rely on Web Standards

In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability.
Validate Markup - create documents that validate to published formal grammars.

Content Format Support - send content in a format that is known to be supported by the device.

Content Format Preferred - where possible, send content in a preferred format.

Character Encoding Support - ensure that content is encoded using a character encoding that is known to be supported by the target device.

Character Encoding Use - indicate in the response the character encoding being used.

Style Sheet Use - use style sheets to control layout and presentation, unless the device is known not to support them.

Structure - use features of the markup language to indicate logical document structure.

Error Messages - provide informative error messages and a means of navigating away from an error message back to useful information.

3. Stay away from known hazards

Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.
Pop Ups - do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

Tables Nested - do not use nested tables.

Tables Layout - do not use tables for layout.

Graphics For Spacing - do not use graphics for spacing.

No Frames - do not use frames.

Image Maps - do not use image maps unless you know the device supports them effectively.

4. Be cautious of device limitations

When choosing to use a particular web technology, consider that mobile devices vary greatly in capability.
Cookies - do not rely on cookies being available.

Objects or Script - do not rely on embedded objects or script.

Tables Support - do not use tables unless the device is known to support them.

Tables Alternatives - where possible, use an alternative to tabular presentation.

Style Sheets Support - Organise documents so that, if necessary, they may be read without style sheets.

Fonts - do not rely on support of font related styling.

Use of Colours - Ensure that information conveyed with colour is also available without colour.

5. Optimize navigation

Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.
Navbar - provide only minimal navigation at the top of the page.

Navigation - provide consistent navigation mechanisms.

Link Target ID - cleary identify the target of each link.

Link Target Format - Note the target file's format unless you know the device supports it.

Access Keys - assign access keys to links in navigational menus and frequently accessed functionality.

URIs - keep the URIs of site entry points short.

Balance - take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.

6. Check graphics & colours

Images, colours and style brighten content, but require care due to inconsistent support for some formats low-contrast screens.
Images Resizing - resize images at the server, if they have an intrinsic size.

Large Graphics - do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.

Images Specify Size - specify the size of images in markup, if they have an intrinsic size.

No Text Alternative - provide a text equivalent for every non-text element.

Colour Contrast - ensure that foreground and background colour combinations provide sufficient contrast.

Background Image Readability - when using background images, make sure that content remains readable on the device.

Measures - do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

7. Keep it small

Smaller sites make users happier by costing less in time and money.
Minimise - use terse, efficient markup.

Page Size Limit - ensure that the overall size of page is appropriate to the memory limitations of the device.

Style Sheet Size - keep style sheets small.

Scrolling - limit scrolling to one direction, unless secondary scrolling cannot be avoided.

8. Use the network sparingly

Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.
Auto refresh - do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.

Redirection - do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.

External Resources - keep the number of externally linked resources to a minimum.

Caching - provide caching information in HTTP responses.

9. Help & guide user input

Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.
Minimise Keystrokes - keept the number of keystrokes to a minimum.

Avoid Free Text - avoid free text entry in forms, where possible.

Provide Defaults - provide pre-selected default values where possible.

Default Input Mode - Specify a default text entry mode, language and/or input format, if the target device is known to support it.

Tab Order - Create a logical order through links, form controls and objects.

Control Labelling - label all form controls appropriately and explicitly associate labels with form controls.

Control Position - position labels so they lay out properly in relation to the form control to which they refer.

10. Think of users on the go

Web users on the go want compact information when time is short and distractions many.
Page Title - provide a short but descriptive page title for every page.

Clarity - use clear and simple language.

Central Meaning - ensure that material that is central to the meaning of the page precedes material that is not.

Limited - limit content to what the user has requested.

Suitable - ensure that content is suitable for use in a mobile context.

Page Size Usable - devide pages into usable but limited size portions.

And reading through these, most of the list sounds equally applicable to overcome other accessibility issues. Wise advice, which isn't always easy to follow!

Wednesday, March 14, 2007

Decisions, Decisions

I've been in a dilemma for the past few days. Ever since finding out that d.Construct2007 and BarCampBrighton are scheduled for 7th, 8th & 9th of September, it's posed me a problem. Which is that it's the exact same dates that the Rugby World Cup starts in France, and the opening games with France vs Argentina and then England vs USA are the ones I want to go to.

So, there's been some weighing up of pro's and con's, and I've just booked the rugby trip! I figured that, even though I had a great time at last year's d.Construct, since it's an annual event, there's always 2008 - whereas World Cups only come round once every four years - and the next one is in New Zealand - hardly a convenient hop across the channel!

The worse-case scenario would have been me prevaricating for so long that tickets to both events had sold out. So I thought it best to jump now and forever hold my peace :-)

Sunday, March 04, 2007

MiniBar4

Friday 2nd was the first time I had attended a MiniBar session, this time it was MiniBar4, held near Liverpool Street. I wasn't really sure of the format, but it was basically a chance for developers and investors to get together with a bit of free beer thrown in!

Each potential project was given a five minute slot to present their idea or website, and questions were taken at the end. The following sites were presented:

  • sellaband.com
    The basic premise is that "believers" invest in shares of new acts, so they can raise $50K to record an album. Each share is for $10 and will guarantee the believer one copy of the resulting CD. So buy $50 of shares and you get 5 CDs. Once the $50K has been raised, the website puts the band in touch with producers and the recording goes ahead. At any time before the full amount is raised, either band or believers may withdraw their offers. Two acts have already raised the neccessary capital and a third is well on the way.
  • spikesource.com
    Is a site for the Open Source community to collaborate and set standards for business-ready applications
  • flirtnik.com
    Billed as "Smart personals for smart people", it's apparently the first Web2.0 dating site, using folksonomy tagging. Users are able to add relevent tags for themselves and others, which can then be searched. Results can be filtered out on the basis of gender etc.
  • play.tm
    Site aimed at gamers and has loads of news about the latest gear, games, etc. Also has community section.
  • metaweather.com
    The site seems to default to Chinese (!), which was slightly disconcerting. It is an automated weather data aggregator that take the weather predictions from various forecasters and calculates the most likely outcome.
  • rouq.com
    An unusual search engine which brings up thumbnails of the results pages.
  • trustedplaces.com
    A site where users can rate restaurants, shops, or other places, and tag them with relevent meta data. You can play the tastefinder game, which will then match your tastes with other users on the site, in order that you get the recommendations which are most appropriate to you.
  • openrightsgroup.org
    The last presentation was from the Open Rights Group, telling us about the work they are doing spreading the word on copyright, DRM, and other tech stuff happening on the web today.
So, if you're an investor looking to put up some cash for good ideas, or a developer looking for financial input, MiniBar is the place for you. The next one is scheduled for 20th April.

There's also an event called the London OpenCoffee Meetup which does more or less the same thing. Only this time it's over coffee, every Thursday morning between 10:00 and 12:00 in Starbucks, Regent Street. I'll bear it in mind when I have my big idea and need funding!

Saturday, March 03, 2007

WSG London #3 - Accessibility

I'm playing catch-up a bit with blogging. I was at the third London Web Standards meeting on 28th February, which had an Accessibility theme.

We had three very different talks, each highly informative and enjoyable.

Niqui Merret on Accessbile Flash
Niqui started out by saying that Flash and accessibility don't have to be mutually exclusive, as many people presume. However, in the real world:

No single technology can be 100% accessible to all users. Aim to achieve the most accessible solution possible.
It's up to developers, programmers and copywriters to make sure their contributions are as accessible as possible. It's also up to the software vendors (eg of screen readers) to try and implement the standards properly and as quickly as possible. She also mentioned FlashAid (talks to screen reader and turns off the Javascript/Ajax so browser sees alternative accessible content) and SWFFix (a tool for progressive enhancement) as useful resources for Flash developers.

She talked a bit about the Accessibility panel in the Flash authoring environment, which allows developers to set things like Tab order and ALT text. And she demonstrated a fun little game in Flash, which was fully accessible without mouse and to screenreaders:

[Niqui demonstrates her accessible Flash game]

Ann McMeekin on Accessibility - What Not To Do
Ann is a Web Accessibility Consultant for the RNIB, and clearly knew her subject inside out.

She made many excellent points, but some of the most salient were:
  • Don't assume all users with disabilities are the same
  • Don't ignore users who come to you with a problem
  • Don't forget to set your page's default colours - background and foreground (if not, changing Windows default colour scheme could have a dramatic effect)
  • Don't waffle - be clear and concise, don't repeat yourself
  • Just because you can add a title attribute to almost anything, doesn't mean you should - it's largely redundant if your link text is descriptive enough
  • Don't be shy - show skiplinks, and use :focus and :active as well as :hover
  • Put instructions before forms - otherwise someone who has zoomed the page (magnified) doesn't have a hope in hell of seeing what the labels are
One of the most surprising things was to learn that most screen readers will read out the legend to an accompanying fieldset before every label in the fieldset - so it's important to keep legends short and concise, and so they will make sense when read with the form field label.

[right, Ann in full flow]

Two final thoughts from Ann:
  • Don't jump on the bandwagon and implement the latest cool widget without knowing what impact this might have on your users
  • Accessibility doesn't mean you can't be creative
Mike Davies on Web Accessibility - The Developer's Tale
Mike's talk was a case study of the re-design of Legal & General's website services and applications, which he had been heavily involved with before his move to Yahoo! in the summer of 2006.

Four years ago, before the project started, L&G's website was ranked 92nd in a FTSE100 survey of websites; it ranked badly with search engines, had at least 150 links on every page and was horribly inaccessible. Through the vision of the website manager, the site was completely redesigned with accessibility at the heart of the thinking.

They reaped the benefits very quickly:
  • 40% increase in website traffic
  • doubled conversion rates (that is, number of people completing an online application for insurance etc, versus those who start the process)
  • doubled online revenue
  • cut maintenance costs by two thirds
  • increased natural search-engine traffic by 50%
  • paid for itself in five months
[conversion rates for Home Insurance - lilac = old site, burgundy = new site. The first two bars are the numbers starting the process, middle represents those finishing a quote and last pair are numbers of completed applications]

And the website is now held up as a highly-regarded example of how to do things properly - it is a PAS 78 and AccessibilityNet case study, has accreditation from the Shaw Trust, and is cited in books on accessibility.

Thanks again to Stuart for organising an excellent event. I look forward to the next one.

Friday, March 02, 2007

My New Photographic Blog

I've decided to start a new blog, dedicated to purely photographic topics. Having thought about it for a while, the balance was finally tipped after BarCamp when I wrote up my tutorials from the presentation I did.

More and more of my photographic (non-geek) friends have been asking about them, and I thought it was easier to separate the content out into a new blog, rather than them having to wade through lots of web geekery here.

So please take a look at http://cazphoto.blogspot.com/ for the new publication!

Some posts from this blog's archives have moved to the new one; other posts are replicated (mainly my BarCamp2 stuff, or those with a few comments attached, which have stayed put here and been copied to the new address).

Henceforth, I shall be putting any photography-related topics on the new blog, so please put the address in your feedreaders if you'd like to keep up with my posts there.

Thursday, March 01, 2007

WebCards Extension For FireFox

Discovering Microformats
For viewing Microformats, and discovering them in a web page, I've blogged about Tails for Firefox in the past. But recently, I've been beta testing Andy Mitchell's excellent Webcards 0.3 extension for Firefox. So what does it do?

The first time you load a page containing Microformatted information, the green WebCards ribbon pops up at the bottom of the browser viewport to alert you. This also appears when you mouse over the bottom of the browser:

[WebCards ribbon tells you what sort of Microformats are in the page]

Playing Tag
Clicking the "Tags" link in the ribbon brings up the Tags panel:

[Default view of the "tags" panel is the Related option, allowing easy search of del.icio.us or Upcoming for the tags in question; "brian suda" in this example.]

Similarly, clicking the Feedback or Media icons gives alternative search options for that tag:













[Feedback offers to search Technorati, Media offers to search Flickr for the tag in question]

An alternate way to access the tags panel is to right click any tag on the page (which will be highlighted by the green TAG icon):

[Right-click (configurable) the TAG icon to get a floating version of the Tags panel]

Making Contact
When displaying contact information, the extension will display the blue Person icon whenever it encounters any hCard info. Right click to get the floating panel for the hCard information:

[Default view for hCard is the Information icon. Shows multiple links if they are in the hCard]

The Application icon will allow export of the hCard info to Outlook or other address book application. The Related icon shows other search options for that person:

[Related search options are LinkedIn, Google or Wikipedia]

Getting Friendly
My blogroll is marked up with XFN and when you mouse over the relevant link, WebCards will let you see the orange XFN icon. Right click and it shows relationship in the XFN panel:

[The XFN panel shows the page owner's relationship to the linked person]

Make A Date
The last major category of Microformat that I've been exploring with WebCards is of course, hCalendar. These are indicated by the little red CAL icon:

[Upcoming occasions displayed in the Calendar panel]

As with the other format panels, the Application icon lets you export the event to Outlook or Google Calendar applications; Related will search Upcoming or Google for the event:

[Add an event to my GoogleCalendar with the Applications icon]

Summing Up
So far, I've seen several iterations of this extension, and Andy has always welcomed feedback on the app. I like it a lot better than Tails for Firefox, it just seems to do more and looks much nicer - don't accuse me of being shallow, it just adds up to a nicer user experience! Anyway, I'd recommend it to anyone who is looking to get the most out of Microformats in the wild.

Wednesday, February 28, 2007

RDF - What's It Good For?

One of the presentations that I missed at BarCampLondon2 (I was attending another session) was a light-hearted debate about the similarities and differences between Microformats and RDF. The main protagonists were:

Thankfully, for those who didn't see the debate, Ian has uploaded a video of the session. It makes interesting viewing! And shortly afterwards, I found Ben Ward's insightful post about the whole subject too. I think Ben's second paragraph hits the nail on the head:
The thing about RDF is that no-one has yet demonstrated any real-world reason to care about it. It fascinates academics who would love — just for the sake of it — to model the entire universe in triples but in the real world of web browsers the value has never really been promoted.
Spot on.

The Microformats advocates have been very quick to explain what they are for, what they do, and how to implement them. I use them regularly in this blog, and try to incorporate them wherever I can into new projects. It's so easy to build them in from scratch when marking up events (hCalendar), people (XFN) or contact details (hCard).

But as yet, I'm really stumped as to what RDF - or more importantly, eRDF can do for me. Tom Morris has started a website called GetSemantic which hopes to chart the progress of developments about eRDF and spread the word. I'll be keeping an eye on it from time to time, to see what's cooking, but until then, I'll be sticking to my diet of Microformats.

Tuesday, February 27, 2007

Photographic Tutorials

Sheila had a good idea, to collect the titles/links of my tutorials on photography, initially written for BarCampLondon2. I'll also be updating the list regularly when I post a new photography tutorial, so you can easily keep tabs on them.

Taking Better Pictures
These were the posts which formed my presentation at BarCampLondon2. They are aimed at anyone who would like to improve their photography, whether they use a fully-automatic compact camera or SLR. The principles apply equally to film and digital photography.

Getting Technical
These are aimed at people with a bit of photographic knowledge, but would like to learn more about the technicalities. They will explain the affects of ISO speed, shutter speed, apertures and more.
Please get in touch by leaving a comment if you would like any other aspect of photography explained.