Kaki Drop Cap; This is a drop cap with a khaki background, white text, and a dark khaki border. I’ve added some lipsum text to illustrate how text wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus eleifend sapien sit amet congue. Vestibulum lobortis dui auctor odio congue in mollis ante eleifend. Donec viverra tortor ut odio dapibus consectetur. Etiam et turpis nibh. Vivamus fringilla dictum purus vitae rhoncus. Quisque egestas ultricies massa, at aliquet sapien feugiat et. Nullam sed tortor eget ligula lacinia tincidunt. Vivamus ac purus eget enim rhoncus bibendum vel a arcu. Aenean vulputate enim at felis blandit pulvinar. Nulla ullamcorper nulla nec lacus cursus sodales. Aliquam suscipit ullamcorper nunc, id ultrices risus rhoncus eu. Etiam blandit tristique nisl eu molestie.
Here’s the code:
<!– the drop cap –>
<span style=”margin-right:6px;
margin-top:5px;
float:left;
color:white;
background:khaki;
border:1px solid darkkhaki;
font-size:80px;
line-height:60px;
padding-top:2px;
padding-right:5px;
font-family:times;
background-color: khaki”>K</span>aki Drop Cap; This is a drop cap with a khaki background, white text, and a dark khaki border.
Firebrick Drop Cap; I think I like the background color firebrick better than kwaki. The code is the same, only the color attributes have been changed. More some lipsum text to illustrate how text wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus eleifend sapien sit amet congue. Vestibulum lobortis dui auctor odio congue in mollis ante eleifend. Donec viverra tortor ut odio dapibus consectetur. Etiam et turpis nibh. Vivamus fringilla dictum purus vitae rhoncus. Quisque egestas ultricies massa, at aliquet sapien feugiat et. Nullam sed tortor eget ligula lacinia tincidunt. Vivamus ac purus eget enim rhoncus bibendum vel a arcu. Aenean vulputate enim at felis blandit pulvinar. Nulla ullamcorper nulla nec lacus cursus sodales.
Ralph Severson Miscellaneous drop caps, fonts, text tips
I came across this last night and really liked how it functioned.
More navigation options become available to the visitor once the “…” button is clicked.
Chris, think this is something you can figure out? 
Ralph Severson Miscellaneous navigation, pagination, paging, usability
The sign-up form is potentially one of the biggest barriers between you and potential customers. The longer the form, the more effort your visitors will have to make before becoming members of your website or, perhaps, paying customers. To speed up the process you need to minimize the barriers. This means removing all optional elements from the form and leaving only the core essentials. The optional stuff can be gathered later.
Ralph Severson Miscellaneous forms, sign-up forms
I saw in a message that I was copied on where a client asked what a lightbox was. Put simply, some applications include a lot of images that users may want to browse. Displaying every image on its own page may not be the most efficient way to do it — both for your visitors and your server. As visitors navigate back and forth the server incurs additional hits, which can be avoided with lightboxes because images are displayed without having to load a new page.
For example, the lightbox method will enlarge an image and place it as a modal window above the rest of the page, allowing the user to focus on the image itself while the background is darkened. This means less noise interfering with the viewing experience.
*Photo is “Mindy in Santa Fe” by Roger Thompson, a member of the Leica Historical Society of America; a Blackstone Media client.
Ralph Severson Miscellaneous gallery, lightboxes
I discovered this on the site Boston.com and thought, “Wow, talk about offering users more responsive and interactive user interfaces, this is sure one cool technique.” Just as with classic applications, this little feature of integration of keyboard shortcuts for navigation can significantly improve the work flow for users and make it easier for them to find what they are looking for.
Ffffound.com (Rick, I think you will find this site interesting.) uses shortcuts for basic navigation. Users can switch from thumbnail view to to list view and vice versa using “v”, back to top with “h”, previous “k” and next “j” through images.
My guess is, that shortcut keys should be logical or self explanatory. What I mean is that it wouldn’t make sense to make the shourcut letters for “previous” and “next” too far apart from each other on the keyboard. There should probably be some common conventions for keyboard shortcuts used throughout variouse websites. But of the few sites I’ve found, I see none.
How are shortcut keys setup. This might be best answered by Chris. But, what I’ve discovered in my research is, let’s take boston.com for example: All images in the gallery are labeled with the class bpImage in the markup, with JavaScript pointing to them. The onKeyPress event triggers the scrolling window in the background and the window’s browser is manipulated wsing the window.scrollTo() function. Here is the XHTML:
The JavaScript:
I’d like to see shortcuts implemented in our new site design. However, I think we need to clearly make sure to clearly communicate that keyboard shortcuts are available and that they can be used to perform certain task more efficiently. I haven’t seen any navigation like this on any websites that I’ve come across that utilize shortcut keys, but I think it would be a good idea to include the shortcut commands in the navigation. Like so:
Ralph Severson Tutorials navigation, shortcut keys, user interface
Recent Comments