Sandbox
I spend a fair amount of my time at work investigating ideas for solving issues we run into, testing the feasibility of new ideas, or creating what I call 'smoke and mirror' functional prototypes for user testing. Many times what comes out of these efforts are general enough and do not have any proprietary issues attached to them, so I post the results here.
I also post some of my personal sandbox work here as well. For those items that are obviously of the more creative nature, I would ask that you respect my copyright on the material. Of course, duplication is one form of flattery, so I don't mind using the ideas for your own work if you might be willing to provide credit where credit is due.
jQuery Faux Form Elements
Summary
Creating customized form elements with CSS and jQuery.
Implementation Notes
I am working on a full set. Stay tuned...
The Inline Block
Summary
A fixed-height, content-determines-width box that stays centered on the page?? Here it is...
Implementation Notes
Once you have the CSS, the rest is easy...
Unobtrusive, No Flash of Unstyled Content, Fully Accessible
Summary
I saw an example of this somewhere awhile ago and gave it a whirl once I remembered it, as I have always 'suffered' from
the FOUC issue. Of course, now we have jQuery 
.
Implementation Notes
When the document is ready to receive attention before actually displaying on the page, we add the display: none property to the blocks we intend to hide. It's really quite simple - something jQuery makes even easier.
Accessbile Pop Ups
Summary
It seems that the biggest issue with AJAX/DHTML accessibility is one of focus. In the area of dynamic pop up windows for short sub-process flows (such as incremental buy flows), coming up with a cross-browser compatible solution was, in it's own way, a bit of fun.
Implementation Notes
(these are reiterated in the demo as well)
A checkbox is provided as a preference selection that sets a cookie.
When the user clicks the launch button (or whatever action meant to generate the popup), it calls a function that checks for the cookie.
If the cookie is present, a daughter window is generated, which loads the content html page via an AJAX call. Focus is then at the top of the page (e.g. on the close window X) and the user able to access the AJAX content.
If the cookie is not present, then a pop up div is dynamically 'generated' and the (same) AJAX content is loaded in the overlay/popup.
Links are provided to allow tabbing through the content.
Either option will support AJAX accessed content when a dynamic pop up is generated. For the daughter window method, the issue of focus is left to the default behavior of parent-child windows. With the dynamic div method, a little more programmatic finesse is required:
- First, it is important to note that upon generation of the window, focus is placed on an empty anchor tag (focus can only be placed on links and form elements in Mozilla browsers. IE will receive focus on ID'd divs). For this demo I have placed two entity spaces within the anchor so you can see the outline when it has focus. I have also placed this anchor after the 'X' close anchor to purposely set focus after this element. The 'X' close button can be used to target focus as well - this was just my preference.
- I have added a bit of 'tracking' where by the element's ID that launched the pop up is added as an argument to the close window function. This allows focus to be returned to the same position in the UI from where the user left when they initiated the pop up window.
- ......................................
- [all the code for this demo was tapped out rather haphazardly - there are no guarantees :)]
Tabbing Madness
Summary
This is just a simple playing around with providing a means for the user to skip around the page using only the keyboard i.e. tabbing.
Implementation Notes
All this really employs is a small bit of script to target id'd elements. There really is not much to it. It could get more involved (and more useful I suppose) if the idea were applied to the use of AJAX pulled content, which was the inspiration for going through this little exercise in the first place.
Drop Downs and Text Resizing
Summary
This is a demo that incorporates the CSS drop down menus from my notes page and a text-resize widget.
Implementation Notes
The drop downs are CSS (with a little JavaScript help for IE); the text-resize widget operates only on the main content of the page and stores the size in a cookie to hold the user preference.
CSS Layout Templates
Summary
This is a series of fixed and fluid columnar layouts created solely in CSS.
Implementation Notes
The concepts are fairly simple to follow. One caveat is the source order is not ideal, but to keep things simple in the CSS I think it is the better route to go. Using 'skip links' helps to overcome this possible annoyance for some users - especially where accessibility is an issue.
Cat and Mouse
Summary
This is a fairly old exercise with timing and motion in JavaScript.
Implementation Notes
The biggest challenge with this project was the two nested containers where timing had to be set so that, upon opening, the parent container has to gracefully slide down and end before the nested child container gracefully slides in from the left. In addition to that, the whole math, timing and positioning was fun to figure out. Nowadays, though, thank goodness for jQuery and all of the other JavaScript Frameworks that have been created - so we can spend more time being creative with the UI and less time figuring out the grueling baseline work.
kendouglass.com
Summary
When working through ideas for one of my old personal sites, I worked through this idea of using primarily abs positioning to create a more unique interface.
Implementation Notes
This is an interface design with a built-in photo gallery always present. The photos lay behind the page content until the arrow button in the lower right corner is clicked. This brings the photo to the front, over the content. Clicking anywhere on the image sends it to the background again. The tabs on the right side of the interface allow you to navigate through the photos. The transition from one photo to another could be further optimized - the project never really went any further. All photos are copyrighted.
Public Domain Books
Summary
As a User Interface Engineer I am burdened with a constant nag to try new things with UI's. This little project is one result of such nagging. I took my ideas from my "day-job" and combined them with my love of reading to come up with this little gem.
Implementation Notes
This is powered by JavaScript, is not unobtrusive in any way, does contain a few bugs (okay a lot) and could be much better built in PHP or some other. The goal was more to play with ideas about the functionality of particular features of the UI rather than the optimal coding of the application. This is very much related to the work I do 'in my day job' when I am tasked with building interactive prototypes for internal review or user testing. These applications are built as 'smoke and mirror' versions of the intended end product.
Of special note, I believe anyway, with this little application is the configurable portions of the UI. Areas of the interface like the masthead and left column are treated as ancillary in terms of allowing the user a reading experience with minimalized distractions - much like the page of a book.
Also of interest - and challenging to code - is the bookmarking functionality. It is simple, as it should be, and functions as it's tangible counterpart.
This remains, along with the kendouglass.com UI above, one of my favorite projects. Everytime I play around with it I want to put it back in the queue and extend/improve it.