• Put away the computer
• Start with a six-up template:
  • A piece of paper with six thumbnail boxes
  • Designers tend to come up with only 1 or 2 ideas at first
    Usually influenced by tools and recent designs
  • Six-up template forces you past that wall
  • Don’t limit yourself to six

• Conceptual frameworks:
  • Spectrums: explore 1-dimension of project
    Ex: Experience Level: Beginner to Expert
    • First timer: how-to guide
    • Intermediate: Choose template, step-by-step process
    • Expert: DB stuff with past evites, invitees, etc. (control panel)
• 2×2: spectrum on top of a spectrum
  • First-Timer/Expert plotted against Manual/Automatic
    • Quadrant A: First-Timer/Automatic
    • Quadrant B: First-Timer/Manual
    • Quadrant C: Expert/Automatic
    • Quadrant D: Expert/Manual
• Grids: plotting all the spectrums across x/y axis

• Word Association:
  • accordian, auto-complete, bookshelf, breadcrumbs, carousel, cart, collapsible, comments, comparison, configurator, …, icons, …, modules, …

• Inspiration Library:
  • Use screengrab tool for Firefox to grab screenshots of things that are interesting.
  • Use iPhoto to catalog them

• Assemble an ad-hoc team:
  • Make sketchboards
    • Post sketches by group to a large board (like a mood board!)
      • Ex: requirements, home page, create invitiation, re-visit invitation
  • Run template-based workshops
    • Design the box: front, back
    • Concept Sheet: title, draw a picture, …
    • Design the experience: title, …

Decorate your space with your project sketches and materials while you are working on it (not after). Invite people into the process.

When someone starts describing something to you, give them a pen. Ask them to draw it out.

• Have a black-hat sessions:
  • Get everybody together for a fixed period of time and play a game where everybody has to take a turn being a villian and they have to go through and point out every possible objection they could possibly have. Gets people who won’t shut up about their concerns and let them feel heard. Takes people who were too afraid to give you their criticisms and gets them to open up and voice their concerns.

Get rid of the idea of a genius designer (d’oh!)

• Use design principles (5-7 pithy statements about the essence of the experience):
  • Tivo Ex:
    • It’s entertainment stupid.
    • It’s TV, stupid.
    • It’s video, damnit.
    • Everything is smooth and gentle.
    • No modality at deep heirarchy.
    • Respect the viewers privacy.
    • It’s a robust appliance, like a TV.
  • Google Calendar Ex:
    • Fast, visually appealing, and joyous to use.
    • Drop dead simple to get information

Quiddity (great Scrabble word): a statement of what you want the essence of the experience to be. You will not create a great experience unless you define what the quiddity is.

• Evite was the case study used for the session:
  • Three step process:
    • Choose design from the design gallery
    • Add recipients
    • Send evite
  • How would you improve this process?

Download this file

I’ve been meaning to simplify my work / life by creating some classes that I can use to streamline a lot of the projects that I work on. I found myself with some time this week and finally took a small step in that direction by creating a pagination class.

Up until now I’ve used a function that I wrote way back when for paging. It was clunky, kludgy, and limited. I looked around at what was available online and what I found was, for the most part, clunky, kludgy, and limited.

Starting from my existing code, I laid out some goals for how I wanted my new pagination object to work:

• It had to be very simple to integrate. I wanted to be able to drop it into a file and have it just work.
• The output had to be semantic, valid (X)HTML that would be easy to style with CSS.
• I wanted options for how the links would display.
• It needed to have options to output clean URLs (for when I’m using mod rewrite) or normal URLs with ugly query strings.
• It needed the option of using sessions to store SQL queries since, much of the time, this would be necessary when using clean URLs.
• It had to be drop-dead simple to configure options, such as how many pages to display per page, enabling mod rewrite functionality, enabling the use of session data, etc.

The idea for using sessions and clean URLs came from Ben Jamieson / Thyme Online. I’m also going to credit him with the idea for highly compartmentalizing the code used in the class (he has a highly compartmentalized pagination class of his own with sessions and clean URLs…) even though I remember what his code looked like when I first met him and I think this may be a case of the student becoming the master!

If you’re wondering why I wrote my own class instead of just using his, well, there were a couple of reasons:

• I wanted the practice (I re-read the chapter on OOP in my PHP book before starting).
• I’m an idiot: I was concerned about security and I didn’t realize the session data was only storing a session ID in the client side cookie and not the actual SQL queries. I initially wrote this class to include Alexander Valyalkin’s most excellent md5_ encryption and decryption functions.
• There were some things I wanted to do differently.
• And because I already had my own paging code that I wanted to adapt.

If you already have something in place to handle pagination, a lot of this code will probably look familiar — there aren’t that many ways to skin this particular cat — but hopefully this code is clean enough and reusable enough that some people will find it useful.

A Simple Example

<?php
   include_once('class.pagination.php');
   $sql = "SELECT * FROM table_name";
   $paging = new pagination();
   $result = mysql_query($paging->paginate($sql));
   while ($record = mysql_fetch_assoc())
   {
      // Output records here
   }
   print($paging->getLinks());
   print("<p>".$paging->getCount()."</p>");
?>

The above example is the simplest usage. The class is included, the object is initialized, the SQL code is passed and returned with the LIMIT clause appended (note: it will replace any existing limit clause) and the links are output.

Sample Output

For large sets of data, ten or more pages, first and last links are added to let users quickly jump to the beginning or end of the data set. Otherwise, just the pages and previous/next links are displayed. You can change that by passing an optional variable to the getLinks() function or, if you’re going to output multiple sets of paging links on a page, you can override the default format via the setDisplayOptions() function (see description of this function below for more details).

Available Functions

paginate($sql) – This function initializes several variables and returns a modified SQL statement with a LIMIT clause appended to it.

setDisplayOptions($x) – This function changes how pagination links are output for a given page. It takes a numeric value between 1 and 4:

1. Only show the first and last links for large data sets (ten or more pages). Only show previous link when not on the first page. Only show next link when not on the last page. This is the default setting.
2. Always show first and last links. Always show previous and next links.
3. Never show first and last links but always show previous and next links (the Flickr option).
4. Never show first and last links. Only show previous link when not on the first page. Only show next link when not on the last page.

You can achieve the exact same functionality by passing this variable in the getLinks() function. Both of the following examples output the same thing:

<?php
   // Example one
   $paging->setDisplayOptions(3);
   print($paging->getLinks());

   // Example two
   print($paging->getLinks(3));
?>

setPageSize($x) – Override the default number of items to display per page. The default is 25.

setModRewrite(TRUE) – The default value is FALSE. Override this if you plan to use mod_rewrite to create clean URLs. If you don’t know what this is, leave it alone.

setUseSessions(TRUE) – The default value is FALSE. Override this if you have complex SQL statements that you don’t want to pass via query strings. You’ll probably need to enable this if you’re using clean URLs.

setSessionName($name) – This just exists to prevent any possible conflicts with existing code. The default session name is ‘searchdata‘. If, by any chance, you already use a session variable with that name, you can override the name used by the pagination class.

This function can also be used if you plan to store multiple SQL queries by assigning a unique session name for each query.

getSQL() – What goes up, must come down — or better put: what is input, must be output. You pass a SQL statement to the pagination object; this function returns that SQL statement to you with the LIMIT clause appended to it.

getCount() – This returns the “Displaying from x to y of z” string. It gets its own function so that it is easy to omit if don’t want to display it.

getLinks($x) – This is the meat and potatoes. This function returns the list of links for output. It accepts the same numeric option that setDisplayOptions($x) uses.

Miscellaneous Notes

Regardless of whether you use clean URLs or not, the the current page is determined by the $_GET['page'] variable. The page variable always needs to be the last part of the query string or path. Examples:

• domain.com/articles/title/5/
• domain.com/article.php?name=title&page=5
• domain.com/search.php?keywords=xyz&sort=desc&page=2

The first example above is using mod_rewrite.

To use sessions, you first have to initialize the session data with:

<?php
session_start();
?>

If you are using cookie-based sessions, you must call session_start() before anything is output to the browser. For more information on how to use session_start(), see the php.net website.

You can view the source code of this page and the associated stylesheet to see how the links are output and how I’ve styled them.

If you have suggestions regarding this class, please leave a comment. Also, this isn’t heavily tested, so if you find a bug (I’m sure there will be some) please let me know about it.

Download this file

But I’m missing it for a very good reason: Karina is due any day now and it turns out there are a (very) few things that are more important than south-by.

To all of our friends who are in town: we both want to say ‘hi’. Even though we probably won’t see any of you, we will think of all of you with envy for the next four days. Enjoy south-by and send us the cliff notes! (If you have my cell or email, drop me a line — I am hoping to make it downtown for an hour or two tomorrow if we’re not in the hospital.)

Data Conversion (Filemaker to MySQL)

Filemaker is a weird sort of database. Instead of tables you have “layouts” that show certain fields but all fields exist in the same bucket. The database is the table. In this case the Filemaker database had hundreds of fields in it that were spread across 16 layouts and all of it needed to be converted to MySQL. Unfortunately this was not an a => b scenario for several reasons:

- A lot of calculations and data manipulation are taking place in Filemaker
- The LDML code made extensive use of lists built into Filemaker
- A lot of data had to be translated
- Certain restrictions were placed on the MySQL databases (see below)

The data conversion is part of the larger conversion from Filemaker/LDML to MySQL/PHP. On the PHP side the client already has a database structure and code built out for several of the portions of the site being converted. In those cases some data has to be split across multiple tables, so data has to be converted to new formats, and various other tweaks had to be performed.

This is a longer term project (four months). Because the data conversion will have to be done several times, I chose to write a script to handle it. Again, because it will have to be run over and over again, it first starts by emptying the existing tables and resetting all of the auto_increment counters to 1. When the site has been fully converted and is ready to relaunch, we’ll be able to run the script again and at the push of a button grab the most recent data from the previous site. Whenever data turns out to need more “massaging” during the code translation process (i.e. something turns out to be wrong) I can make the changes and re-run the script without having to perform a lot of manual labor.

I’ll outline the conversion script another day — it’s about 800 lines of code. It took about a week to write and get right and since this project is ongoing it will almost certainly require more tweaks as the project moves forward. That’s a lot more than the one day I had estimated for the conversion.

Code Conversion

Once I had the data poured into 19 MySQL tables I could start setting up the website. First thing was converting the new layout into XHTML and CSS. No problemo. The second step was to setup the new navigation structure. A little bit more work and planning here but again, no problemo. The third step was to create pages for all of the static content. This was the easiest step in the process. The fourth step was, and is, where I get my hands dirty and start mucking around with the site code.

Now, it seemed easiest to start with the pre-existing PHP modules from the client and get those up and running. Unfortunately, this is where I ran headfirst into one of my own great shortcomings. I have a hard enough time reading my own well-formatted and well-documented code. In this case I’m reading someone else’s code with functions and classes that are spread across 25 different files. Everything is being generated or manipulated by something else. Coming into this from the outside it’s very hard to figure out what is going on. For me this has led to a lot of confusion, a lot of delays, and a lot of sleepless nights.

Finally, this weekend I decided that something had to give. I was trying to take the short route and fumble through things. Define a task, tackle it, and when it doesn’t work try to trace the code back through the various files to find out why. Fix, try again, run into another problem, trace it back through, etc.

For most people this would actually work. They can just learn from doing something hands on. For me that doesn’t work. I have to first read a manual, then get hands on and refer back to the manual as I’m going along. It’s not enough for me to know how something works, I have to understand why it works.

I determined that I needed to write a manual. In doing so I would develop a deep understanding of how everything in the various files worked.

Yesterday I spent the day printing out most of a ream (500 pages) of code. I got a binder and a bunch of tabbed inserts. I created tabs for each document, hole punched everything and assembled my book. Then I started the two day process of reading the book. For each file I created an outline of each class and function. I also outlined the structure for each include. This is my table of contents and is in the front of the book.

Now I have a much greater understanding of what is going on because I’ve read through everything once. I also now have a quick reference to any section of code without having to open five different files to track function calls. At a glance I can see what is going on and if I’m passing data to a function in the correct format or using a function in the correct way. This took two days and it could have saved me weeks of sleepless nights.

Planning and organization are incredibly important when working on projects. It may seem like wasted time but in the end it saves more time than it consumes.

More Firefox commercials here.

Of course, you can create text as a graphic using any font in your arsenal. The drawbacks to this tactic are that it’s not easily changed later, it can’t be copied and pasted with other text on a page, it doesn’t scale in size when the user chooses a different default font size for the browser, and it’s not accessible to people with visual impairments who use text-speaking devices. The benefit, however, is that the text you create in Photoshop appears exactly as you want it to appear, with your font of choice and any graphic effects or other visual stylings.

Now, there was a little bit of FUD there about the screen readers (text-speaking devices). If you provide the text in an alt attribute for the image it will be perfectly accessible. However, I found it amazing that a magazine for designers, primarily print designers, would be so astute as to point out all of the failings of using images for text.

Later in the article was another paragraph, this one about Flash:

When designing Flash projects, most of the same typographical rules mentioned above still apply; you’re simply gaining the freedom to use whatever font you like. However, Flash isn’t nearly as accessible as HTML, and certainly not as flexible as CSS if you want to change the appearance. Frankly, waiting for Flash animations to load can be annoying to site users, even those with broadband internet connections.

Steering designers away from Flash because of accessibility and load times? I’m not religious but Hallelujah! I take this article as a sign of the maturity of the online design community, our tools and our pool of knowledge. We’ve come a long way in the last 10 years and pieces like this give me hope for the next 10.

• Start drawing (both offline and with a sweet pen tablet)
• Write those stories I keep starting (and participate in this year’s National Novel Writing Month
• Look out for myself (okay I’m stealing that one from him)
• Stay in better touch with my friends — and get out more
• Practice my Spanish*
• Design more and code less — including designing some t-shirts
• Start blogging about things I’m passionate about (design and the web)
• Redesign my site — I’m using someone else’s design!

See? Same damn list. He might have tried to customize it a bit to “make it his own” but we all know the truth. James Craig reads minds. I don’t know if he has to get close to you to do it, so I want to make sure I get these out now:

• Finally create my web-based cartoon — it’s been six years
• Start a t-shirt company (hey, everybody else is)
• Create some sweet WordPress plugins:
  • Real estate listings
  • Events calendar using the hCalendar microformat
  • Contact list using the hCard microformat

Okay, it appears that Structured Blogging is way ahead of me on the whole microformats-for-WordPress thing, so I’ll have to check that out.

* This one is major since my wife’s family doesn’t speak English and we visit them several times a year. I would also like to learn German since my own extended family doesn’t speak English either. As it stands right now I can’t communicate with her family or mine.