Tag Archives: CSS

Sometimes It Takes A Detective To Solve CSS

css-detective

It’s probably safe to say that the process of developing a website requires debugging issues that just don’t make sense. Floats don’t clear. Web fonts don’t display. Internet Explorer 6 doesn’t do anything right (at least it’s on its way out). Solutions are sometimes easy to find and apply, but many times a bug doesn’t seem to have a logical solution!

This is why I like the structure and premise of The CSS Detective Guide by Denise R. Jacobs. Bugs can be mysterious and the codebase can look like a crime scene, so why not frame the process with that in mind? The book devotes a couple chapters to general HTML and CSS knowledge and two more to bugs, debugging techniques and things to look for when debugging CSS.

The other six chapters in the book are case studies with real-world code and bugs that Denise walks through and solves with the reader. This is the kind of book that would have benefitted greatly by providing live code that the reader could load on their computer, test and revise, but even though the book has a companion website (www.cssdetectiveguide.com) there is no code to download and work with. It is mentioned that files and live versions of the cases are “coming soon,” but the book was published in April.

HTML and CSS code is published within the book so readers have at least that to go on when learning how to debug the CSS. I thought the case studies were quite good, with several bugs in each—some specific to Internet Explorer but many others that apply to all browsers, or to other browsers like Firefox.

I think many CSS books on the market are more high-level or experimental (Dan Cederholm’s books come to mind) and don’t focus on the nitty-gritty details of CSS bug fixes. Dan’s books are exceptional resources for CSS pros but The CSS Detective Guide is written for those learning CSS or those wanting to improve their debugging techniques. It’s also fun to read thanks to the mystery/detective/crime story angle, which I think is a nice touch in a technical book.

The CSS Detective Guide
Denise R. Jacobs
Published by New Riders
Rating: 9/10

Dreamweaver CS5 Review

dw_box

This review supplements Dreamweaver CS5 First Impressions, which I wrote just after CS5 was announced. That article explains most of the new features in Dreamweaver CS5 like other reviews, but the goal of this article is to share my experience in the field with Dreamweaver CS5 and to tell what works and what doesn’t work for me.

What CSS can do for you

Dreamweaver CS5 got quite a few new features focused on making CSS easier to use, and they have changed some aspects of the way I work with CSS. I still do a lot of hand-coding and don’t care to use the CSS Styles panel and its new features. I do like the Inspect button, which will put the Design view into Live View and color various properties of the CSS elements such as margins and padding. You can turn CSS rules on or off as well in the CSS Styles panel, which helps you see how the webpage is affected by specific rules and properties.

I love the Inspect feature for specific situations but most of the time my troubles with CSS happen with properties that aren’t easily seen, such as position, display and float/clear. I try to do a lot of my CSS positioning without absolute positioning when I can avoid it, and CSS1 and CSS2 tricks like floats aren’t really designed for the task. I wish Dreamweaver could solve these situations, but Inspect doesn’t provide easy solutions.

Handling CMS-generated websites

In my “First Impressions” article I mentioned Dreamweaver CS5 handles dynamic websites generated by PHP-based content management systems (CMS). At the time I couldn’t figure out how to get Dreamweaver to work with a website of mine that uses ExpressionEngine, and a little research suggests Dreamweaver CS5 actually doesn’t work with ExpressionEngine. Joomla!, Drupal and WordPress are the three CMS’s that Dreamweaver CS5 will handle dynamically—and there’s no support for the ASP-based CMS products out there, though there aren’t many.

Dreamweaver CS5 has taken an important first step toward working with dynamic websites but there’s a lot more to be done. Other dynamic systems, such as e-commerce products which are coming up more and more in my work, aren’t covered by Dreamweaver and I don’t do anything more than the design and production in that application. If you run Joomla!, Drupal or WordPress often, then I’d purchase Dreamweaver CS5 since it works beautifully with those products. Other CMS’s—like ExpressionEngine—don’t gain anything new.

The Inspect button is my favorite new feature, but the redesigned Site Definition dialog box is a close second. It makes creating new sites and handling multiple remote servers and environments much easier, though I think this says more about the weaknesses of the previous interface than the strengths of the new one in Dreamweaver CS5. Improvements like these are doubly important because interfaces like the Site Definition dialog box are used very often and if they aren’t well-designed they really grate on you. The other great new interface improvement from Adobe recently is the new File Import interface in Photoshop Lightroom 3, and that one proves that a lot of time and effort can be saved with a flexible and simple interface.

About the HTML5 Pack

Adobe released a Dreamweaver CS5 HTML5 extension a couple weeks ago that adds some HTML5-specific elements to Dreamweaver CS5. HTML5 has become a buzzword now that Apple is throwing it around as a replacement for Adobe Flash (which it really isn’t, at least not yet). I’m sure many web designers will switch from XHTML to HTML5 and Adobe has tried to embrace HTML5 even with the uncertainty around web video and whether it threatens its Flash products.

The HTML5 Pack should be a no-brainer for designers wanting to learn HTML5. The pack includes a couple HTML5 starter layouts accessible from the New Document window, but these layouts are fairly simple and don’t have many HTML5 elements other than the semantic additions such as

and

DVD REVIEW: “For A Beautiful Web” DVD Series

andyclarkedvds

The three-disk “For A Beautiful Web” DVD series is a very nice resource for web designers, with roughly two hours per disk on three important topics: CSS, microformats and web accessibility. Presenter Andy Clarke, a web designer based in the UK, knows his stuff and presents things clearly and also with a bit of his own opinion on how CSS and other design elements can improve one’s workflow, which for me was a welcome addition to what could otherwise have been a merely informational resource.

My favorite disk was Designing with CSS: I know CSS pretty well but Andy suggested a different approach to conceptual design and advocated building mock-ups with CSS-based layouts instead of the usual graphical design that others (including myself) produce in Photoshop or something similar. This was a new idea to me and one that I want to implement this year for my web design business. The DVD was not just monologue on workflow but also a survey of basic and advanced CSS techniques and applications. The working webpage he used to illustrate his points was well-designed, well-executed and illustrative.

Designing Web Accessibility was also very useful. Designing with Microformats was interesting but I got the impression that microformats are not yet widely used. This was the disk I was most interested in since I had heard very little about microformats previously, but after viewing the disk I’m not sure if I have a very good reason to look into microformats further.

I should also note Andy Clarke’s presentation. He is definitely a very skilled web designer with strong CSS chops, and his presentation skills are good—I was able to follow the DVDs easily. But I thought Andy was too methodical, slow and a little monotonous in his delivery. Sometimes there were long pauses in the monologue that broke up the flow. I think if Andy could bump up his energy level and fluidity of his speaking it would help make the series more engaging and fun to learn with.

“For A Beautiful Web” DVD Series:
Designing Web Accessibility
Designing with CSS
Designing with Microformats

Presented by Andy Clarke
Published by New Riders
US$39.99 (Designing with CSS US$34.99)
Rating: 8/10

Cederholm’s “Handcrafted CSS” Is An Enjoyable Read

handcraftedcss

I never did get a chance to review Dan Cederholm‘s Bulletproof Web Design, but I know the reputation it has in the web design community. That’s why I was excited to grab a copy of his newest book, Handcrafted CSS: More Bulletproof Web Design. Handcrafted CSS is a very good book: well-designed, full of both hands-on projects and commentary, and also well-written.

New techniques require new books

Handcrafted CSS is really a book about a handful of new CSS techniques that weren’t feasible when Bulletproof Web Design was written. A new batch of modern browsers and some designer ingenuity have given Dan new cutting-edge techniques to write about, including new methods for creating rounded corners, parallax scrolling, improved floats and more. Ethan Marcotte also writes a chapter on his own contribution, a fluid grid-based layout.

Some of these techniques are browser-specific: modern browsers like Firefox and Safari make several of Dan’s techniques possible, but old version of Internet Explorer ignore the code because the browser is just plain lousy. Dan advocates progressive enhancement, adding the improvements for those who can enjoy them and allowing the site to degrade—but still work—for everyone else. Handcrafted CSS even has a chapter on this topic (“Do Websites Need to Look Exactly the Same in Every Browser?”). A few years ago, most of my clients would have answered “yes” to this question; today, my clients seem to understand that Internet Explorer doesn’t allow them the web’s full potential.

Leaves you wanting more

Handcrafted CSS lacks a larger perspective that I hoped would be included. For example, in Chapter 2 Dan explores two vendor-specific extensions: -webkit-border-radius and -moz-border-radius. These extensions allow CSS to apply and control rounded corners in Mozilla and Safari browsers. Chapter 2 is a wonderful read and makes the popular “rounded corner” design easy to execute, but it left me wanting to read more about vendor-specific extensions. Handcrafted CSS is focused on specific projects and techniques to the detriment of the broader theory and techniques, and I think some of “the big picture” could have been included without making the book much larger or expensive. It would have also made the book more accessible to beginners, though a book on advanced CSS techniques is not a bad thing for advanced users. This all is a minor complaint though, because the material is so good.

The cutting edge

I would recommend Handcrafted CSS for any experienced web designer working with CSS today. Like Dan says in the book, the cutting edge continues to move forward and new techniques must be learned to stay current and maintain true craftsmanship. I really like the “craftsmanship” angle that Dan sticks to throughout the book, and the DVD (available separately or together) and companion website (used in all chapters and exercises) make this a very hands-on book as well as a good read without them.

I also think that beginner and intermediate designers will benefit from Handcrafted CSS, though this is not a book from which to learn CSS. It’s written to expand your knowledge of the cutting edge and employ new CSS techniques that weren’t practical just a few years ago. I’m already looking forward to Dan’s next book, which will surely be needed just a few years from now.

Handcrafted CSS: More Bulletproof Web Design
Dan Cederholm with Ethan Marcotte
Published by New Riders
US$39.99
Rating: 9/10