Tag Archives: CSS

You can have your standards and eat them too.

Thanks to my recent completion of Jeffrey Zeldman’s book “Designing with Web Standards” and my subsequent epiphany, I am now infected with a rather infectious bent to put into practice the promise of creating some truly standards-compliant, truly useable, truly 100% cross-browser/device accessable websites. Dammit – I didn’t think such a thing was possible – to create a compelling visual design and have my content render just fine in the Blazer and EudoraWeb browsers on my PalmOS-Based Handspring Treo. At least not without some major code forking and JavaScript madness, or creating alternate text-only versions of my sites. This has been my goal – to make a one-stop shop for all devices when they hit a given URL. Zeldman shows me the way, and explains it in an intelligent and humorous way so that you come away knowing what you have read.

I think the key takeaway from the book is to focus on writing your XHTML the way it was intended to be – semantic markup that represents your document’s content structure, and leave the presentation to CSS. Using some of these basic, basic ideas, I was able to quickly go in and rework some of the pages I had adopted at my new gig. The pages to be reworked were nice enough – a clean design that was readable and compelling – and thoroughly laden with font tags and deeply nested table layouts. Right away I was able to cut the file size down by an average of 66%. And that’s before I get to redoing the drop-down navigation menus. This was all much easier than I had suspected, thanks to Zeldman’s clear examples and thoughtful concepts that I had gleaned from the book.

I really appreciated the fact that the code examples in the book were accurate, thanks in no small part to a couple of all-star technical reviewers. My biggest pet peeve in tech books is to go and sit down and try to hammer out code examples only to find that they had committed a fatal bug to print in 20,000 copies. That experience sucks because not only have you just written a bunk piece of code, but all that enthusiasm for said technology and all that trust you placed in the book has now been shot to hell as you curse the author and editors for leading you down that black hole of despair. I can tell you how many books I’ve been through getting pumped with the first few philosophical chapters only to then find out that the friggin’ code doesn’t work. Errata on the website? Well all too often those sites don’t exist anymore or were mothballed too soon after the book went to distribution. And that’s just a pain in the ass.

Zeldman shows realistic and practical strategies to achieve standards compliance, accessibility, and best practices for writing code that treats all browsers and devices with respect. This book is highly recommended for any webslingers like myself that are looking to take their design practices into the 21st century.

Browser stats

Some random browser stats for sanbeiji.com:

56.82% of visitors use some flavor of MSIE
17.13% of visitors are using Safari
11.32% of visitors are using some sort of Gecko-based browser like Mozilla 1.x, Camino, Firebird, etc.
0.16% of visitors are using Konqueror
0.13% of visitors are using Opera

56.86% of visitors are using Windows
25.47% of visitors are using Macintosh
1.48% of visitors are using Linux

and my favorite stat:

only 0.25% of users still use Netscape 4.x

Why is this cool? It means a pure CSS layout is entirely within reason for the next design rev of this site. Netscape 4’s horrific misrepresentation of CSS layouts was my #1 limiting factor last time. Now it’s barely an issue.

Geek Books

Just finished, or rather put down, the Macromedia Flash MX Training from the Source book. I got about 80% of the way through it and, while I found the book somewhat interesting and informative (despite some code typos here and there), I just got installed my copy of Flash MX 2004 and I would much rather go through the What’s New docs on that thing right now than mess with what’s going to be basically obsolete information as of, well, today.

Now I have a dilemma. Despite of course the fact that I’m going to be messing around a bit with the new Flash stuff, Flash itself isn’t exactly my meat and potatoes. No, no it’s more of a side dish. An appetizer, if you will, or maybe a dessert. What I’ve really been waiting to sink my teeth into are these two books: Eric Meyer’s “Eric Meyer on CSS”, and Jeffrey Zeldman’s “Designing with Web Standards”. Ugh, I hate it when I have too much stuff to read. The line of books that I purchased enthusiastically and never found time to go through now scowl at me from their perch high up on my bookshelf, waiting in earnest. No more bookstores or Amazon.com until I finish what is in the current queue.

So now that I think about it, look at the TOCs, browse around and all that, I think I’m going to move forward on Zeldman’s book first. His covers more topics at a somewhat higher level – talks about standards, theory, religion, and then moves on to discuss XHTML, CSS, DOCTYPE switching, and other nice geeky web coder topics. Meyer’s book is, as the title implies, strictly focused on the study of CSS, and is a lot more hands on. So, if I have planned this right I should finish the Zeldman one just before the holidays start up and then I’ll have more time to go through the examples in Meyer’s book during Thanksgiving and/or Xmas break.

And off I go…

Dreamweaver MX 2004

Dreamweaver MX 2004 was just recently released, and I have given it extensive road testing. My overall feeling is that there are some exceptional improvements and features in this product overall, but there are some bugs to be aware of.

First of all the big feature: Dreamweaver has been reworked extensively to be more of a CSS-centric design environment. Past versions were very HTML 4-oriented, and while it had some good CSS features, it really was tending to steer the user towards a lot of inline font styles and table-based layouts. The panels and the Property Inspector have been greatly enhanced with CSS in mind, and rendering is much better now in Design View.

My personal favorite new feature is support for SSH file transfers in the form of SFTP. Granted the implementation is slightly odd – it’s an option in the FTP setup dialog, and the two protocols are entirely different – but at least to the end user they function in a fairly similar way. I can imagine though that there’s going to be a lot of noobs clicking that option and then wondering why they can’t connect to their server all of a sudden… This feature does lack public key authentication, so unfortunately you are stuck with user id/password logins, but at least this is a start. For my experiences so far, the SFTP connectivity and transfers have been a lot more speedy and stable in Dreamweaver than the FTP option, so that’s an added benefit. I still find it much faster to save files locally and then sync over SSH as a separate process because Dreamweaver is unusable during these file transfer and synchronization sessions – better to offload the task of actual sync and transfers to another app such as Interarchy or MacSFTP – but at least this lets me work securely on small sites or do quick patch updates directly from Dreamweaver. My hope is that at some point in the future, Macromedia will extract the file manager from Dreamweaver and make it a separate, standalone app similar to the Extension Manager, so that all MX apps could take advantage of it and that it would not lock up Dreamweaver during a process.

This version also offers full Unicode support, which is really great when working on multilingual pages. Before, it did an OK job, but there was no way to render two-byte characters in most of the dialog boxes with any accuracy and it was overall not fun to deal with that stuff in previous versions. This version however does treat two-byte characters in most of the dialogs pretty well, and there are added features for advanced Unicode features such as BOM signatures and normalization.

The user interface is, overall, quite pleasant to work with. The GUI has greatly improved with things like the ability to add commands to a Favorites tab on the Insert bar and a more overall streamlined interface. I still really miss the ability to save panel layout sets like I can with Fireworks and Flash though. I am constantly having to tediously rearrange my panels and they often disappear like they did in MX, though not nearly as much as before. The Files Panel has the cool ability to be able to function like a panel (which disappears when you switch away from the app) or like a regular Mac OS X standard window with the full title bar (which can be minimized or maximized). It is a bit buggy to switch between the two modes however, but I have found a workaround. If you open the Files panel into it’s own window, it becomes a regular Mac OS X window, and then I click the Expand button to give me a two column layout. I then drag another panel group, such as the Code Inspector, to dock itself above the Files panel by using the blue panel bar grip area and dragging it in place. I then quit and then restart Dreamweaver, and the panel group returns as a regular panel group – not as a standard Mac OS X window anymore. I know this sounds like a pain in the ass, and it is, but this is the way I like my layout: with the Code Inspector and the expanded Files panel docked together as a panel group and expanded full screen on my second monitor. I even grouped a bunch of other panels with the Code Inspector, such as Results, Validation, Reference, and the FTP transcripts.

Speaking of Validation – I had very little luck with this against XHTML 1.0. Better to use the W3C validator, or Zeldman’s favlets.

This version of Dreamweaver does seem to create fairly decent code. Usually validates, and the code is fairly well formatted and concise. Working in Code View itself, or the Code Inspector, is a pretty good improvement. There’s some nice code completion and lots of goodies to generate good code. However, it only has a niche role in writing code and is still no replacement for BBEdit and a good understanding of what you are doing. But if you do know what you’re doing, Dreamweaver can throw down a good initial code base for you to tinker with.

Dreamweaver does allow pretty cool functions with regards to dynamic code generation for PHP, JSP, ColdFusion, and, god forbid, ASP. I created this entire blog app that you see here using the previous version of Dreamweaver (6.0 and 6.1) on top of a PHP/MySQL server. This version expands on these great features. This is a huge time saver, once you get it set up. And I say ‘once you get it set up’, because the setup process can be really frustrating and clunky. But once I got it up and running, it worked great ever since.

One really nasty problem that has persisted since version 6 is that working with documents that have even just modestly complex table structures can become painfully slow. Even simple tasks such as typing a few characters can take forever to complete. If this happens, I am immediately forced to switch to Code View or I just switch to BBEdit altogether.

Another slow thing to avoid is choosing the Select Checked Out Files command in the Files Panel menu, and those similar commands. My god – took almost 20 minutes to complete. Avoid it.

With all that said, I find Dreamweaver to be overall a good program. Honestly – I am finding myself opting for more manual coding via BBEdit nowadays, especially because of some of the aforementioned bugs. But this app is great for things like quick mockups, site management, and dynamic code generation. I would get much of my work done much slower without it, and it is a key tool that I use every day. This might not be a critical update and some may really want to wait for some of the aforementioned bugs to get worked out, but those looking for an awesome dynamic code generation tool and site management tool will get some good mileage out of this application.

If you are ready to purchase Dreamweaver MX 2004, you can get it from Macromedia’s online store.

It’s All CSS From Now On

I coded my first professionally-done pure CSS-laid-out website today. Why oh why have I been slaving over tables for so long? Oh yeah, because I was striving for backwards-compatability with older web browsers. Well, I think that now that it is the year 2003, I can finally safely remove myself from the baggage of the legacy practices of my forefathers and start focusing on some more modern technology.

I usually use Dreamweaver about 80% of the time when working on these sites. However I found that DWMX ain’t all there just yet when it comes to CSS layouts, and it was just getting in my way and messing up my code most of the time. I found it much easier to just crunch through it all in BBEdit and use Dreamweaver for site sync and a few nice built in behaviors. I have high hopes and expectations that the next release of Dreamweaver will be more CSS friendly. It is a great product. I just feel that it encourages you to write using tables and inline styles instead of encouraging the coolness of CSS.

Well so far my site looks awesome in Safari, Camino, Mozilla, and Internet Exploder on Mac OS X. There were some minor issues with rendering using Mozilla on X11, but it looks great on that platform in it’s own way. I’ll test it on Winhose on Monday.