Off the Top: CSS Entries
Nothing makes me happier than to see the winter holiday begin and 24 Ways start its annual release of web development and design goodness. Drew McLellan and the 24 Ways crew have done another great job and I look forward eagerly for every day’s gem that is released.
To make all of this better, 24 Ways is in its 10th year. Congratulations for all the great content and work, from the very first to the current offering of the day.
I’m in the midst of a structuring here across all the pieces of vanderwal.net. It started in January with another project, a meetp-up hack to dive into Zurb Foundation. Within a couple weeks of starting down that path I decided it would be fine time to rebuild and redesign vanderwal.net using Foundation. Before I started down the road leaving the horses behind I desided I was going to update the structure of the HTML of these pages and bring them into modern times with HTML5 and CSS3.
This thinking and tinkering has been finally fixing some of the underlying details that bugged me, but it also allowed to set a much better and more object focussed semantics. This shift will also enable the content objects to flow better and be better foundations for a redesign as well.
While I have no idea what the redesign will be and not even thinking of that, I did find the original photo that I modified to be used for the header image and I put that to the pages I have touched. The new image now is much wider to allow for a fluid page and the “vanderwal.net” text is now out of the image and I a truly proper H1, that has alluded me for a long time (and bugged me to no end). The menu of the updated pages has brought back the selected portion of the site with a bleed to page, which was there at the beginning, but some shift in CSS caused it to go away.
I may, possibly likely, shift hosting at some point in the near future, but that may wait until I have some of the underpinnings of the blog tool updated a little. Some of those changes will wait a little, but have been brewing a long time. I don’t think I am bringing comments back, but will likely bring in web mentions (Jeremy Keith has a great explaination). There is a lot going on in the IndieWeb that has been inspiring and may trigger some more changed that I have longed for to finally get put in place.
BTW, this is the short version of this. Two prior attempts at writing up something short both ended up over 2,500 words.
Both have me thinking this is really close, then I remember one of my favorite periodical apps, Financial Times went HTML5 more than a year ago. FT went HTML5 to better manage the multi-platform development process needed for iOS and the multitude of Android versions. While many have said the development is roughly 1.5x what it would take for just one platform development it does same incredible amount of time building an app across all platforms. Since all the major smart phone platforms have their native browsers built on webkit, there is some smart thinking in that approach.
Personally, my big niggle with the FT app is while it is browser based doesn’t have Instapaper built-in and it moves me out of the app to send a link of an article (often to myself because lacking Instapaper) rather than natively in the app, or exposing browser chrome so that I can do that while still remaining in the app and in reading their content mode. It would be really smart for FT to sort this out and fix these as it would keep me in the site and service reading, which I am sure they would love. If they could treat both of those like they do with Twitter and Facebook sharing out all within the app it would be brilliant.
A word to the wise, don't use naked div or span tags in your markup, as you are asking for trouble. Many validation tools will let you know you have messed up, but you will soon realize this as you start extending your design with CSS.
What is a naked div or span? Look in your markup and if you see <div> or <span> you have naked tags. A div or a span tag should always have an id or class attribute that defines what it is doing. Calling div or span in your CSS is one giant hint this are going wrong. Add CSS modifications to the semantic markup that must be in place and use an id or class to place all other presentation layers.
Sooner or later a class or id attribute will be dropped in the div or span and it may lose the intended value, but since the CSS and markup were not used correctly the headache begins. Naked div and span tags lead to embarrassment at best or headaches and cursing for those that have to clean up the mess.
Are you looking to practice and hone your standards compliant web design craft? Are you looking for an environment that is Web Standards friendly and want to join solid Web development team? You now have found a possible match. Does your vernacular include: "Zeldman, Eric, Tantek, Bowman, Christopher, Shea, and/or Molly said..."? Are you looking to get recognized for your Standards work? Can you make Photoshop purr? Do you know the bugs in Dreamweaver's rendering engine? Can you live with just one table in your layout? Are you proud of your craft and want to hone it more?
If you answered yes and are looking for a change of scenery read the following and send me an e-mail (see contact above).
We are looking to hire a strong Web Designer who has strong experience with hand-coding Web Standards (HTML, XHTML, and CSS) that validate. The designer must also have experience with accessibility (Section 508) and have solid web graphic design skills. Experience with information architecture and user-centered design processes are very helpful (wireframes, usability testing, etc). Experience with leading design and redesign processes is very helpful. Strong communication skills, including design documentation is essential. We design with Dreamweaver and Homesite and use Adobe and Macromedia graphics applications. [INDUS Corporation Web Designer Job Listing]
Nate Koechley posts his WebVision 2004 presentation on Web Standards and IA. This flat out rocks as it echos what I have been doing and refining for the last three years or more. The development team at work has been using this nearly exclusively for about couple years now on redesigns and new designs. This process makes things very easy to draft in simple wireframe. Then move to functional wireframes with named content objects in the CSS as well as clickable. The next step is building the visual presentation with colors and images.
This process has eased the lack of content problem (no content no site no matter how pretty one thinks it is) often held up by "more purple and make it bigger" contingents. This practice has cut down development and design time in more than half and greatly decreases maintenance time. One of the best attributes is the decreased documentation time as using the Web Developer Extension toolbar in Firefox exposes the class and id attributes that provide semantic structure (among many other things this great tool provides). When the structure is exposed documentation becomes a breeze. I can not think of how or why we ever did anything differently.
Those of you looking for a relatively short article or essay on current best Web practices should look no further than the Best Web Development Practices provided by Apple. Yes, this focusses on web standards, but what best practice does not as it is the cornerstone of accessibility as well as makes the same content usable on mobile devices (one caveat the article will not print on 8.5 by 11 inch paper).
Thanks to a heads up from Nick, we have modified our site so that it will allow highlighting text so it can be copied and pasted. All browsers allowed this highlighting functionality, except for IE 6 on Windows, which had a bug that blocked proper functionality.
It took a little bit of digging to sort out the problem. The problem was a result of using absolute positioning in the CSS. Once we changed the positioning from absolute to static everything was fine. Fortunately, we did not need to be using absolute for layout as this was the wrapper for the main content under the menu. This is a foolish bug to have in a browser and to have go unfixed (although minor compared to the severe security holes that are pervasive in the same browser).
Now our content here can be highlighted in all modern browsers to ease reading or copy and pasting. This important so that we may help others grab information for their Personal InfoCloud and reuse the information to help purposes.
We have made some minor tweaks to the presentation of the site. The menu bar has had the underlining removed on hover. Each of the items in the menu now has borders that change with hover and selection to create a little cleaner look.
The date bar in the weblog has been padded and has a slight border to off set it from the page and make the date more readable, the date has bugged me for a long time.
The permalink (comments) page now has a title of the entry. The entry titles have been added to the monthly archive pages also.
Lastly, the link to the Quick Link RSS feed has been added next to the Quick link title. This should make it easier to follow those links, should you wish. The Quick Links get updated far more regularly of late and there are some good gems that get nestled in there.
Definition lists explained and examples by Max Design. Definition lists are often used incorrectly, but these examples are done to show how to use definition lists when it is semantically correct to use them. Definition lists are used for presentation purposes then the information is actually a list, ordered or not. Using the proper structure for information is critical for those that can not see the presentation (visually impaired, mobile devices, text readers for those driving, etc.).
[hat tip Mike]
I am a huge fan of CSS Zen Garden and have been impressed for many months by the contributions, but Wiggles the Wonder Worm just floored me. I was and still am in awe. Joseph Pearson did a fantastic job and explains Wiggles and CSS on his site.
I am trying out visual enhancements on the Off the Top weblog display. I have added the header titles for each of the entries, which I have wanted to do for a long time. This should make the page easier to scan for information.
I have used the dark blue color for the type and given it shading in the CSS to offset the header from the date. Once the headers were added the dates were lost on the page, so I have given the pale orange background color to break up the page a little more. The pale orange background also seems to help the reader scan the page more easily.
Depending on feedback I may keep this and add it to the other multiple entry pages in Off the Top.
Dunstan (a fellow WaSP) has done a great job with his new site header at 1976design, his personal site. Dunstan explains that the header is made up of 90 image and uses scripts to drive the weather and time relative header image. The sheep in the header move depending on the weather conditions at Dunstan's farm as well as change based on the time of day (they have to sleep sometime).
I nearly forgot, Dave Shea has come up with a CSS cribsheet that flat out rocks. Dabbling or living in CSS? Use it.
The site is filled with all the good stuff we love, valid XHTML, CSS, accessible content (meaning well structured content). The site is clean and highlights the content, which is what Harpers is all about - great content. The site is not overfilled with images and items striking out for your attention, it is simply straightforward.
We bow down before Paul and congratulate him on a job very well done.
Peter J. Bogaards explains The Document Triangle: The interdependence of the structure, information and presentation dimensions. This troika is very important clear information consumption, but also information reuse. Structure is extremely important to transmitting information, but also important to information reuse. Information lacking structure nearly as reusable as a newspaper article printed on paper.
One great location to explore the ease of information reuse and the affect the presentation layer has should look no farther than, CSS Zen Garden, where nearly all the content is identical in the various layouts and designs. The structure of the content provides a solid framework to rework the presentation layer. The presentation layer can add to or detract from the clarity of the message as well as the attraction a user may have to the message.
I know this has been posted everywhere else in the world of those who care about CSS, but I need this at hand for me... CSS to links in paragraphs until a mouse moves over the paragraph. Stuart does a very good job of showing how this works.
Knopf offers a componarison of how well Help Authoring Tools create HTML. The testing includes compactness of code, but even better is validating the output against the W3C. Dreamweaver MX does quite well in the testing. It would be good to expand the testing to some of the other tools, like FrontPage and GoLive.
Mac Edition offers a Abridged Guide to CSS2 Support that documents in a matrix which browsers support what. Keep in mind that Gecko is Mozilla, which is Netscape 6 and up as well as Firebird (an insanely fast and standards compliant browser). It is also good to note that Gecko-based browsers render the same regardless of operating system, unlike Internet Explorer, which is different depending on operating systems. The matrix also includes how the browsers hold up to various hack tests, most of the test are for box model layout (Tantek and Owen Briggs tests included).
Doug Bowman provides an insanely excellent essay on the design process behind his Zen Garden offering. This is an insanely wonderful description of the thought process that goes into wonderful design. Doug has all the proper steps, which is wonderful to see. If you want to become a graphic Web designer, it takes more than knowing PhotoShop, (X)HTML, CSS, Flash, etc. it takes understanding the process and how to approach each need to solve a problem or fill a need. This really illustrates the information design profession on for the Web.
Tim Bray adds to the Microsoft IE is garbage chant that has been spreading around the Web developer community for some time. Oddly, until I think of Tantek, the IE browser on Mac is far more compliant. The font sizing issues that Tim discusses are largely only a problem on Windows version of IE browsers. Most other modern browsers (Mozilla (including its Netscape 6 and 7 variants), Opera, Safari, etc. all resize fonts even if the fonts are set in pixels.
In the accessibility community having a fixed pixel size has been taboo for some time. As I talk with more people with vision problems I find most do not use Windows IE browser to view sites, but choose one of the other modern browsers as they allow easy scaling of fonts (some like Opera even scale images). This seems to be a trait across the visually challenged users. Most users with visual difficulties have a strong dislike for the Microsoft browser just on this point alone. A few have mentioned they really like Mozilla browsers as they can easily change the skin on the browser to make the buttons and other elements more visible.
Me, I can read Tim's site just fine, which is ideal as Tim understands the problems and knows where the blame should reside.
Note: The MS IE browser on Windows shows its downfalls to those that are trying to us modern Web development techniques by using CSS layouts rather than table layouts for their work. As Web developers learn tableless layout is a pain to learn initially, largely because of IE 6 and lower do not follow the rules properly. To get Windows IE to render properly one has to hack the valid CSS to get the browser to render the page as does a browser that follows the standards. The irony is Microsoft claims to own the CSS patent.
Things have been a little busy around these parts of late. One site you should be watching is Joshua's redesign. Joshua is learning many of the painful lessons in a CSS redesign. Joshua has not only been redesigning and documenting in front of our eyes, but he has been sharing his resources. Joshua just rocks as he learned the mantra of the Web is to share openly. He has also learned Windows IE 6 is not your friend as it does not render valid CSS properly. Go get 'em Joshua
The separation of content and presentation is and has been extremely important. There have been many developers and designers that have showed there CSS-wares for switching presentation over the past two or three years, but Zen Garden is one of my favorites. The Zen Garden is currently functional (many others have replaced their presentation switching sites for no option presentation in the past year) and it provides a wide variety of styles and layouts. I hope Zen Garden sticks around for a while so it can be used as a great showcase for what can be done.
I am also liking Zen Garden as the various styles provide insight into the placement of headers and content. Not only do the different presentations provide different styles, but the user interface with the information drastically changes from style to style. This differing interface showcase is a great tool to help people understand the importance of presentation and understanding the user. Different audiences may have strong preferences or attraction to the various presentations and testing of the various interfaces most likly would generate widely different results with various user groups. [hat tip Eric Meyer]
Tantek discusses Jeffrey Zeldman handrolling his own RSS feeds (as well as his own site). Tantek also discusses those who still handroll their own weblogs as well as those that have built their own CMS to run their blogs. This was good to see that there are many other that still build their own and handroll (I stopped handrolling October 2001 when I implimented my own CMS that took advantage of a travel CMS I had built for myself).
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 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.
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 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.
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.
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.
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.
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.