Enhancing Your UI Before Page Load
2009 October 13
- Comments
- Topics
-
A common drawback of progressive enhancement is that the UI will often "flash" or "flicker" when first loading. This is because conventional wisdom of separation of concerns calls for waiting until the DOM is ready to set up the UI for a richer interaction (tabs, accordion, drilldown, the list goes on). While this makes sense academically, we're not always putting the user experience first. Trust me, users do notice these things, even when they occur in under a second.
Personally, the majority of what I do to prepare for an enhanced interaction is to hide and show elements and apply some styles. So, why wait for anything to load? What I really need is to simply check for JavaScript support; an aspect of the browser, not the content being loaded.
Assuming a general case where all that is needed is to A) know that JavaScript is supported and B) apply some enhanced CSS styles when A is true, we can do this as early as the <head /> portion of the page, and incur no flicker penalty.
Continue reading Enhancing Your UI Before Page Load
Spellcheck HTML Inline with GoogieSpell
2009 August 18
- Comments
- Topics
-
Orangoo Labs' GoogieSpell widget is a really clever way of spellchecking input fields or textareas on a Web form, completely inline (think Microsoft Word) and without that nasty popup window you usually see that loops through all of your typos serially. As a bonus, by default it makes a call to Google's spellchecking web service so you don't have to install or maintain your own dictionary (although you can easily extend it to do so). Also, did I mention it's FREE?
I recently worked on an online workflow for writing, and one of our primary goals was to curb the amount of spelling mistakes we were seeing from the authors. Our solution was to spellcheck their content in an elegant but mandatory way. Enter GoogieSpell.
But, nobody is satisfied with just plain text anymore, right? Much of this content happens to be HTML from a popular 3rd party rich text editor. This presented a more complicated problem than it sounds (or maybe it sounds just about as complicated as it is?) and I'm going to walk through my solution: making GoogieSpell play nicely with both HTML and plain text.
Continue reading Spellcheck HTML Inline with GoogieSpell
Scrolling In-Page Links with jQuery
2009 July 06
- Comments
- Topics
-
In-page links (or, links that jump to specific areas of the current page) are definitely useful for lengthy or text-heavy sites, and often essential when these pages are consumed by screenreaders or "legacy" mobile devices. But they can also be disorienting for many reasons — did I just move up the page? Down it? With the instantaneous transition the browser provides by default, a user is left to guess.
I wouldn't be the first to suggest overriding this behavior with a scrolling effect that illuminates which direction you've traveled, and also how far. A global, automatic solution would be ideal. For animated effects, a robust JavaScript library can save a lot of time, and I'll use the popular jQuery library for this example. Out of the box, jQuery does not have this functionality, and although there is an appropriate plugin, I was determined to cobble together my own solution so as to avoid loading an additional plugin only to use it in this one instance.
Continue reading Scrolling In-Page Links with jQuery
<Prev 1 2