vanderwal.net

Goodbye glasshaus and Wrox

Owen broke the news today that glasshaus books is gone. So is its parent company Wrox books and all the other imprints from this publisher. Matt has very kind words to say about glasshaus and I will concur that they were wonderful to review books for. I looked in to my work bag and found two of my five reference books that travel from home and work are glasshaus (Cascading Style Sheets: Separating Content from Presentation which is a great book to get to understand CSS1, CSS2, and the box model, and Constructing Accessible Web Sites a great reference book on accessibility). I have a few others that I get great use from also, including Usability: The Site Speaks for Itself as an overal inspiration book for redesigns and understanding the use of various pages.

A few years ago I was picking up Wrox books left and right. I have a few ASP, PHP, UML, and XML books (some that have migrated to boxes in the basement as I do not use or prefer that language at the moment. On the whole Wrox and glasshaus had great authors that really communicate well and create books that are very useful as resources and good reads.

Scott does a great redesign

Scott LePera I kickin' it with his site's redesign. The black text on grey is easy to read (much better than grey text on white) and the color palete is warm and friendly like Scott. The redesign is insanely fast loading (which is more than I can say of Macromedia's redesign). If you are in Austin say hi to Scott for me at SXSW.

Tweaking the presentation layer for links

We are still doing some tweaking related to the recent redesign. This latest change includes the underlining of links. The style sheet now treats the distinct content area separately. The links page does not have any underlining on the links as the page is all links and the underlining tends to interfere with the user's scanning of the links and therefore the lack of underlining eases this pages use. The hover is identical for all the links through out the site, the hover provides an orange hue to tie the colors of the site together. The right content frame does not have any links either as the combination of the light orange background and the blue link has a little reading difficulty, but with the underlining there was strong reading hinderance. The links through the rest of the site are all underlined to ease the user's ability to discern that the links can be clicked. The links under the Off the Top remain grey with underlining with orange hover.

Let me know how these work for you.

Zeldman uncovers the mess of Aventis site

Zeldman hits the ugly nail on the head discussing Aventis. I believe that anybody who believes there is not an poor information design or site that is screaming for an Informaiton Architect has not been to Aventis, there are so many problems that begin with and end with the drop down menus that overlap. Zeldmen points out, as he always does, the need to understand what the HTML markup and code do in a browser. Not only understanding the browser but the user. The Aventis site fails in many areas, but the tucking product information under "About Aventis" makes it very difficult to find.

Zeldman has also been sharing his wonderful redevelopment pains and discoveries. I may tackle the last couple layout bugs I have left if he cracks the right nut.

Getting better

Comments are now working here and the CSS issues hopefully are resolved (fingers crossed). Now back to the regularly scheduled programs.

Redesign explained

You most likely have noticed. There has been a redesign here. This new site is nearly all XHTML and using CSS box model. Going through this process introduces one to all the bug that browsers have that you need to work around. I found that IE 5.5 and up on the PC is horribly buggy and does not follow standard box model too well. Netscape 7 on the PC is the best browser. On Mac OS X the best browser has been Navigator/Chimera and IE 5.2 (through this Chimera became my favorite browser on most any platform).

You dare ask why the redesign? Well it was well past time. The last design had been around for a year or so and the CSS was giving me fits. I really wanted cleaner markup and I wanted to have a font size that scales. I believe that the font scales on all web standards compliant browsers and platforms. It should even scale on the PC's IE 5.5 and 6 browser (this has had broken functionality since day one, if you need a browser to scale font sizes properly get a real browser, one that is Mozilla based will do just fine). I am trying to remove the thin white line under the logo graphic and above the menu bar, it is showing up in IE on the PC and on versions of Mozilla on the Mac (Please contact if you have a solution).

I also wanted a better layout that would permit a cleaner layout. I moved the global navigation to the top bar and it uses and unordered list and CSS to put it in line and give it the roll-over (I stole part of the code from Scott and tweaked it). I also moved the local navigation to the left, which has been a joy as it is near the scroll bar and has made life a little easier. The right navigation may also be a place for other goodies. The right navigation has also helped me on the links page as there are a ton of links and I wanted a sub-navigations (yes, the links page is going to be getting an over haul in the near future with some needed integration with other elements in the site). The redesign also give the opportunity to introduce some small photos or images on the pages and not have other colors overwhelm them.

The box model drove me crazy, but I created some cheats I hope to share in the near future, once I get some minor tweaks around here done. The redesign was done solely on the TiBook and using a combination of the Macromedia MX Studio (Dreamweaver MX is a decent text editor, but I could not find a way to have it show a passable rendering of the pages in its own browser) and BBEdit. I started the process with outlines in Omni Outliner (a tool that rocks and is unparralled) as well as Omni Graffle to put together some wireframes to help me sort out the layout and functionality. This set of tools has been one of the best combinations I have used, I wish I could use this combo at work. I really am missing Adobe Photoshop, which may become my next software purchase, as it is a great tool that saves time.

Please, please write wit questions or bugs found. Thank you. I did this for me, but I hope you enjoy it.

CSS to work around IE mistakes

I really could have used these IE tips for CSS the last week or two I have been learning the hard way (creating CSS and trying in IE then wondering what I had done wrong - I was not the one at fault).

Books to get us through

I have been working on a few interface changes around here. I have found two books to be very helpful today. Cascading Style Sheets: Separating Content from Presentation, which has been helpful with the interface foundation tweaks. The three writers really knocked themselves out to put together an incredible resource. Normally I turn to the Web to find the answers, but to have a book that has a few bookmarks in it at the time of coding, was quite a change and very nice.

The other book, Usability: The Site Speaks For Itself has been bedside reading for a couple months while we were going through our move. This was one of the few books I kept careful track of as it has been great downtime inspiration. This book, unlike the "Guru" usability books, teaches you how to approach Web interface design and development with the user in mind. The hard fast rules some espouse do not always work well with our own users. This book does a wonderful, teaches us how to think through the process and provides examples of six varied sites and their developers approaches to creating usable sites for their audiences. This books is a joy to look at as well as read. There are many nuggets tucked in the pages that make it worth the price. When building Web sites the one constant is "it depends" and we can always use help learning how to think through these situations.

What CSS

I think I am using "Crack Smokin' Styles" (CSS) as I have not touched the CSS is a couple days and I have seen four different font sizes today. There is no consistancy from browser to browser on the Mac, nor on the PC. It is very strange I am using the same styles for all the pages, but it varies from page to page. Time to dig in, maybe.

Tweaking begins again

I have been tweeking the code in the weblog and modifying the CSS too. I have the whole of my CMS running on my Mac, which gives me the ability to tweek and update the code. Having Jaguar behind the scenes made adding the MySQL component much easier than in previous builds. In the past it was similar to a Linux or Solaris compile and build. The Mac build was much easier and worked seemlessly with PHP and Apache. The downside was the Data Load element is not available so I used cat to import just the each table's data.

The CSS I started tweaking tonight as the pages were rendering very small on Mac IE 5.2 and oddly in Mozilla 1.1. Last night's updates to the weblog code have it a little closer to validating 4.01 transitional, and fixed a few font oddities of class clashing. I am using a body with 12 points and using percentages in to size the elements in the pages. This is giving me an adjustable font size in IE on Mac, which I will test tomorrow at work on a PC

One of the next steps on the tool side is building a RSS feed and making a few needed changes to the administration tools to ease editing submitted entries.

CSS and forms

CSS and forms [hat tip Michael]

CSS promise vs reality

Mark Newhouse offers a great CSS overview Cascading Style Sheets, Promise vs. Reality, and a Look to the Future at Digital-Web.

CCS with Moz bugs annotated

From the "this will be insanely helpful" department, CSS-1 with annotated Mozilla bugs. This could be a first-turn resource when the huhs? start. [hat tip Scott]

CSS explained

Scott offers a lesson on CSS is for separating structure, not content, from presentation. Those with slight or great questions of understanding should read it.

A few minor changes here at vanderwal.net. The comments link has been put on all dynamic pages of the Off the Top section. The only page that had the comment option was the main page (/random/index.php).

The CSS has also been modified to unbold and underline for the underblog links to categories, perma link, and the comments. I have found many users come straight into the categories with out a referring page (meaning they have it book marked). Google dumps users directly into categories, but that is understandable, based on their algorythyms. I had also been hearing from some users that they did not know they could click on the categories. Sorry about the confusion. You can go directly to view the categories used here.