Before my usual self-critiquing ensues, let me first say that I am pleased that the days have finally come to find me actively addressing contemporary Web design issues. From the beginning of my IT career I considered myself conservative but current with what was useful in my HTML-based practice. However, over the last three years (or more probably), since my dedication to Silverlight (and WPF) my Web design skills have aged.
My live sample, “XHTML5 Responsive Gallery,” represents a fresh, bold way of being expressive with what I consider are the ‘new’ fundamentals of Web design. These fundamentals include:
- A CSS grid system
- CSS media queries
- jQuery templating with JSON
Stacking image panel on thumbnails with absolute positioning…
My Responsive Gallery is essentially three pieces: the main panel that shows gallery images (of course), a “contact sheet” of thumbnails and a ‘command bar’ (button panel). My main panel should lie on top of the contact sheet—and a command-bar button, by the way, hides the main panel to allow access to the thumbnails.
This panel stacking with respect to the z-axis is obtained with these points:
- The panels to stack have to be in a container with
- The panels to stack have
position: absoluteand z-ordering.
- The panels and their container have the same height.
The idea of absolute positioning in a relative block is one of my CSS fundamentals and recorded for my education in a sample I call “Block Alignment: Absolute Positioning in a Relative Block.” It feels great to see that these fundamentals can be reused here. Fewer tricks to memorize… simple variations on a primal core…
Instead of using a negative margin, maybe try floating an element? Or perhaps positioning it absolutely to its parent? Before you even consider a negative margin, please consider what would happen if other elements on the page changed height or width. My guess is that your negative margin depends way too much on other parts of the page in a way that is not necessary.
Responding in the vertical dimension with CSS media queries…
Two other CSS samples out of my studio, “XHTML5 Responsive Client” and “XHTML5 Responsive Client with 6-Tile Panel,” are a wild celebration of ‘tiles’—inline blocks that respond to horizontal-dimension change by reflowing with respect to a minimum width. These samples have no concern for the vertical dimension outside of default flow.
The“XHTML5 Responsive Gallery” is my first attempt to respond to vertical-dimension change by rendering the height as a multiple of gallery-thumbnail height. The height of the gallery changes incrementally not continuously—and the response in height is limited (no endless vertical scroll). The height of the gallery is limited to expected height of the images in the gallery shown. This implies that the container holding the thumbnails have
Paging thumbnails based on hidden overflow and ‘visible tile count’…
Hiding the thumbnails means a “paging” mechanism is required to see the thumbnails that can fit in the current view. The number of pages must change responsively—responding to the
$(window).resize() event. But the resize event fires like crazy—almost continuously—while dragging a mouse on the desktop for some browsers. I needed a way to ‘slow down’ the resize event—what I found was a word I do not claim to fully understand: “debounce.” So now I have
$(window).debounce('resize', …) from a jQuery plugin called “.delayed()—A jQuery plug-in for delaying and debouncing events.”
Determining image orientation and doing resizing with jQuery…