It’s been a little over a week since I launched the latest version of the Schiffner.com UI. The overall visual design has remained largely the same but I have made some changes to modernize the user experience. If you haven’t had time to familiarize yourself with the changes please read all about them below.

For starters the site now leverages CSS 3 styling. If you’re using a modern web browser (Firefox 4+, Google Chrome, Safari 5+, Opera 10+, and IE 9+) you’ll now notice softly rounded corners in the top left and right corners of the page and the entire page has a subtle drop shadow. Some elements, such as the search box utilize CSS 3 glows and you’ll find some CSS 3 text styling.

Dynamic Width
Under the previous UI this sites content was displayed at a fixed width. Now the entire layouts width is dynamic. When the browser window size is changed the page’s content area will resize within predetermined minimum and maximum bounds. The sidebar’s width will remain fixed while the content area grows and shrinks. This will allow readers to experience the site at a width they find comfortable.

Post Pop-out
Want to quickly read a post? Click the pop-put icon. Previously the only way to read a full post was by clicking into the full post’s page. Now it’s possible to quickly view a full post without leaving the directory. Full commenting is supported within the pop-out. Still prefer to view the post in it’s full page? You can still do so by clicking the post’s title, the “Read Full Post” link, or the [...] following a post’s excerpt.

Resizable Text
Each individual browser has it’s own method of scaling web page content for users with less than perfect vision. Unfortunately many website layouts break when employing native browser scaling. This discourages it’s use and creates an accessibility issue. Schiffner.com supports native browser scaling but adds the ability to quickly scale content’s text by click the font-sizing icons on the top right of any page. These options greatly expand accessibility.

Improved Search
I used to employ Google Site Search for Schiffner.com searches. The quality of the search results was fine however searches were displayed in a less than satisfactory method. The results were formatted similarly to Google’s old search pages. Very bland and textual. I have migrated Schiffner.com to a locally powered search which provides results of similar relevance but displays them in a more visual way — similar to how posts are displayed in the site index. I will likely tweak the search page in the coming weeks but the experience will remain similar to how it is today.

Syntax Highlighting
I host several programming projects here. Occasionally I publish some example code to help coders world-wide with often asked and seldom answered questions. It’s always easier to follow formatted code so I’ve added in some syntax highlighting for these posts & pages. To see the formatting in action click here.

Take me Home
You could always find your way home by clicking the “Home” link on the menu, which was displayed on every page. Now you can also click the logo to accomplish the same thing.