Perhaps a Book

Rally Cap
Rally cap by web

Stemming from the SimpleQuiz, I’m looking rather seriously into putting the question and answer concept into a book. The scope would most likely be more of a “web standards FAQ” — with topics on structured markup as well as CSS tricks and tips and anything related.

What I’m looking for is a little help…

  • What topics would be important to you in this type of book?
  • What are common questions that one would come up against when diving into standards-compliant design/development?

The format is looking to be much the same as the Quiz: a series of topics each with a question posed, followed by exploration of available options, summary and extra tips based on the topic.

I’m open to hearing any and all suggestions. Feel free to email me directly as well. Thanks, fine people.

24 Comments

  1. Egor Kloos says:

    “The SimpleBook of <facts>”. Sounds like a plan to me and a good one at that.

  2. off the top of my head, a few I keep hearing…
    - the right tag for the right job, or why you shouldn’t use tags to achieve specific layout effects
    - is everything on my page effectively a point in a list ? it’s a series of paragraphs, so should it be a series of list items ? where do you draw the line ?
    - so now B is STRONG and I is EM ?
    - why use H1 ? it’s always so big…
    - i’ve got this whole spreadsheet of data…do i have to turn it all into nested divs (i.e. no, tables are not deprecated…you can, nay should, use them for tabular data)

  3. cody lindley says:

    - how to code and build css/xhtml layouts in consideration of search engines.
    - the least hacked cross browser css/xhtml coding standards in consideration of semantically correct markup.

  4. ssn says:

    how should I build a multilevel list? Where do I put the sub-list’s heading?
    Example:

    <ul>
     <li>element A<li>
     <li>element B
      <ul>
       <li>subelement B1</li>
      </ul>
     </li>
    </ul>

    Is this correct?

  5. Josh says:

    Hi Dan, good luck on the book idea. I hope it works out. I really enjoy your website so I know I’d enjoy the book.
    I’d like to see CSS Positioning as a topic with perhaps some examples of cross browser layouts and designs. It can be tricky and overwhelming to create these layouts and beginners will definitely be asking how to accomplish that while still being a good reference for those who are professionals. Maybe even devote an entire chapter to it.
    By the way, my favorite part of your blog/website is that when you discuss technique you usually give a live example of the technique, which really helps people like me who learn visually. I’ve been to plenty of other blogs and website who will talk about a technique but never really show you what they mean. They may not have the time or take the time to create those examples but you do so I thought I’d mention how helpful it is to so many of us. I hope this will carry over to the book.

  6. Dave S. says:

    A huuuge hole in available resources today is how to go from Photoshop mockup to CSS. Plenty of books will teach you how to slice up tables with the best of them. Nothing exists to tell you how to slice up a .psd when building a CSS layout.
    I’ve been meaning to write on this for ages but it keeps getting bumped down my list. I’d be more than happy if you beat me to the punch, Dan.

  7. Mike says:

    That’s a great point Dave, where I worked over the summer (web design firm in Chicago that shall remain nameless), all the web designers there had little to no knowledge of anything in the realm of CSS-P because they were used to doing mock-ups in Photoshop, then when they were approved, just slicing up the images into tables.
    I’m not sure if a lot of people do this, but when I first start to design a page, I write all the HTML first. Completely semantic, no extra tags, using all the <hn>’s, and THEN I match my CSS to go along with it.
    That’s just the way my mind works now I guess. I look at a design/possible design for a page and the CSS styles start forming in my mind.
    Unfortunately, people who *grew* up writing table code for websites (I did, but I adopted CSS probably a little too early lol) have a very different mindset from a newly minted “I write semantic XHTML” web designer, do you know what I’m saying? Do you know what I mean? <— Mike Tyson/SNL reference ;)
    Strategies to bring slicers over to the realm of CSS would be a fantastic portion of the book. And maybe some examples for the scores of designers who think that CSS can only be used when setting font-sizes and colors ;)

  8. Didier Hilhorst says:

    I think Dave touches on a very important subject. While most designers know Photoshop well enough to produce decent design (subject to taste, but I disgress), there’s always that step from graphic conception to mark-up (and presentation). With CSS this step has undergone massive changes.
    Judging from a few of the e-mails I get, some people are just baffled and impressed with what CSS can actually do and need to adjust their mindset and move away from the thoughtless slicing and numerous (meaningless) spacer gifs. One person asked me how much time it takes developing using standards like XHTML and CSS compared to the old table-based (WYSIWYG) method. In the end I think a great start would be looking at various layouts and indeed CSS-P.
    So far my experience has been that you can still create your mock-ups or compositions the way you used to do them. However the extra step in this case is to keep the code in mind. This will be a trial and error process. Once you’re comfortable with semantic mark-up and the behaviour of CSS in most browsers, you’ll get a feel for what will work and what will not.

  9. if i may be so bold as to contribute on the photoshop discussion for a second: i’ve found two ways of working, recently.
    one is, as outlined above, to concentrate on the clean, structured xhtml first, and then design specific modular elements (e.g. specific bullet point graphics, a header graphic, a logo). sure, i do have some idea initially of what i’d like the whole page to look like, but i often just do all separate elements and only when everything is set in place do i look at tweaking it for a pleasant overall appearance.
    on the other hand, if i want to go for a more static, pixel perfect type layout like http://www.csszengarden.com/?cssfile=http://www.photographia.co.uk/artists/redux/zengarden/phonephreak/style.css i find myself mocking the entire page up in photoshop first, all on separate layers, and then using photoshop to get accurate pixel coordinates for absolutely positioned elements, widths, etc. after that i isolate elements from their respective layers and trim them down to the smallest needed size. it sure beats trying to slice and dice an entire page, and offers the best of both worlds, in my opinion…

  10. sew roman says:

    (btw you know there’s a new bookout on historic manhole covers?)

  11. Matt says:

    I’m confused about the format of the book. Will it be in the exact same format as the SimpleQuiz (e.g. – multiple answers to questions that at first glance seem asinine)
    A book is a cool idea, but basing it around the format of SimpleQuiz might be a bit of a stretch. It takes the most hardcore of the hardcore to enjoy reading a long debate about the semantic correctness of different orders of tag nesting.

  12. Benvolio says:

    great idea dan – and the suggestion above are all good.
    for me – the most advantages thing i could have would be a tear-out card // poster i could stick on the wall where i develop that clearly defines the quirks between browsers. ie – what works in which browser where, how and why.
    like this useful resource at Centricle.com in a more detailed refernce-type… erm, um… thing.
    see why i need help defining things?

  13. Josh says:

    Regarding Dave’s idea about from Photoshop to CSS (which is a great idea): I do use Photoshop but mainly for editing and cleaning up photos. My choice for creating mockups is Macromedia Fireworks MX. I’ve found that I can create a mockup in FW in half the time that it takes me to do in PS. So maybe include Fireworks when going from mockups to xhtml + css.
    Regarding the process: I tend to create the mockups first in FW and then once I’ve got a pretty good Idea of what I want I’ll work on the HTML and then the CSS. When I design the mockups I always keep in mind what I’m able to do with CSS. I try not design something that I can’t reproduce efficiently in xhtml + css. And when something isn’t working correctly in my xhtml + css documents I pull that element out into it’s own document to see what’s causing my problems and get it to work there. After it works by itself I bring it back into the real document. I’ve found by doing that I save myself a lot of headaches because it allows me to quickly isolate the problem.
    I do agree with Dave, this is never discussed. And when I made the switch to CSS I had to come up with my own method of going from mockups to a working document. My way is probably not the most efficient way so I would definitely be interested in seeing what others have come up with for this process. Great idea Dave!

  14. Jacob Patton says:

    As a coder-turned-web designer, I often follow the process Mike outlined above, where I write standards-compliant XHTML first and then bang it into a design with CSS. This usually works for my projects—sometimes I have to change the base XHTML to make things easier for substantial design changes (involving nesting/padding issues, primarily). Maybe that’s just how my mind runs, but I think it’s because I’m rather clumsy with Photoshop!
    That said, I’d love a book outlining effective use of Photoshop/Fireworks to draft designs, and it would be great to couple this with a “best practices”-style book Dan is thinking of.
    Does anyone know of any good Photoshop-oriented web design books? I’m thinking tutorials for quick, professional-looking mockups for the clients who are uneasy with lo-fi wireframes.
    Dan, I look forward to picking up your book, although I wouldn’t balk if you continue the SimpleQuiz routine on your site.

  15. Dan says:

    Thanks much to all for the ideas so far. They’ve already helped me figure a few things out.
    It looks like Dave really tapped into something on the Photoshop to CSS idea. It’s a great one to think about.
    I’m going to add these all into the continuing brainstorm…

  16. I think a book based on the type of discussions that pop up in your SimpleQuiz questions would be great. I do think you need some sort of central theme to tie it all together, though. It would be interesting to take a look at a site design or redesign and during the course of the design work, questions come up. When these questions arise, you drop into the discussion sections. From the discussion you choose an approach and move on. It would be more work than just doing a FAQ style book, but I think it would be more readable.
    More than anything, the SimpleQuizes have shown me that at its current state, XHTML doesn’t have an obvious right answer to many questions. The best thing you can do is to pick a style and stick with it. That’s a lot harder to do than it sounds. Perhaps that could be one of the main points.
    Anyway, good luck! I think it’s a great idea.

  17. TOOLman says:

    How about a listing of all XHTML elements that are allowed in the <body> element, and a brief explanation of the semantic meaning of each one?

  18. Josh says:

    And perhaps some tips on stock photography & fonts? Where to find them, and what sources are good ones and worth the money spent.

  19. Rahul says:

    I think it’s important for all webstandards books to outline the reasons we’re promoting them in the first place. Things like the near-perfect summaries on Eric Meyer’s Complex Spiral website: “The truth is, it’s just the way the Web was supposed to work since the day it was born.” or “Most Web sites drag the past behind them like a deadweight.”. In other words, maybe some kind of intro as to why standards are an important part of web design and how we can relay that importance to our clients. I know I have a hard time getting some of them to understand the point, so the more wise words from experienced people, the more chance we have of getting somewhere.
    At least, I’d hope so.

  20. Michael Z. says:

    How to build a CSS theme switcher or font sizer, and other CSS+Javascript tricks.
    Detailed, practical advice on media-specific style sheets.
    I don’t think CSS browser bugs, and hacks to compensate for them have been covered in print.
    This is a good idea. I’ll probably buy a copy.

  21. Cam says:

    Personally (and like many here), what I’d like to see is a more in-depth look at CSS layouts — in particular liquid layouts. For the most part, CSS layouts (or those that I see most of, anyway) tend to be fixed width, but I’d love to learn how to do a good liquid one (like the layout here).
    A good look at media-specific style sheets would be cool too.
    While I agree with most of the suggestions above, a lot of them (including mine) have been covered to a greater or lesser extent in Jeffrey Zeldman’s book. A book that expands and extends on the lessons learned from there would be great.
    I’d definately go for an advance order on that one.

  22. Kevin McD says:

    Taking everyone up on the Photoshop/CSS idea, a book could clearly define sections on how to make specific areas of a popular commercial site(ie. Headers, Navigation & Footers). This would sell very well to an audience looking for a quick solution to thier new home page design but also would be of interest to the crowd of seasoned CSS Veterans looking to observe how you go about your new ideas and methods.

  23. Stephanie says:

    Here’s a quote from an actual professor of a beginning HTML course, circa earlier this week, upon reading Wendy Peck’s CSS 101 primer: “…why are you re-defining the <P> tag? As I have always used it, the <P> tag is just the paragraph (double space) tag — and it is a single tag (there is no closing </P> tag. Once you have re-defined it with the style sheet, I can see why you would need a closing tag. –
    But then what would happen if want a simple <P> to separate something?”
    I was so boggled by the 1998ness of it that I hardly knew how to respond. If you can bring yourself to address an audience that hasn’t learned anything new since HTML 2, by all means…
    Cam, have you tried Eric Meyer on CSS or Designing CSS Web Pages?

  24. KuraFire says:

    Dan, great idea about the book, I’ve only discovered your site today but I went browsing through your archives some and found very useful discussions going on throughout the articles and the comments made to them.
    That brings me to my main point: comments. There are many great comments underneath your articles, and sometimes they have really useful arguments in there (take for instance the SimpleQuiz part XI list of comments). I think it would be really great if your book had some of the most useful comments from this site in there, next to related sections of your book chapters.
    For instance, if you’re going to make a chapter about Semantics in webpages, have a little ‘side panel’ on some pages with handy quote snippets taken from comments found here, that would help understand the reader just exactly why `so-and-so-in-your-chapter`.
    Something else I’d like to see covered in this book is the topic of CSS Hacks, which ones to use and which ones not to use, and with the ‘fixes’ for CSS hacks kept in mind all along. For instance, Rob’s FOUC article on BlueRobot.com shows the issue of using the @import "style.css" hack without ‘proper implementation’. Similarly, there is a fairly well-known something: "\"}\""; CSS hack that will break IE 5.x’s CSS parser, so that a document can contain CSS that will specify styling on one attribute twice, first in an IE-only version that requires a workaround, and then in a non-IE version that doesn’t require the workaround and is ignored due to IE5′s parser bug. However, that CSS hack creates an issue with Opera, which require an additional fix.
    Somewhere on your site you made a comment about Tantek’s mid pass workaround, which is in my opinion much cleaner than the IE5-and-then-fix-Opera-CSS-hack method. For your book, some guidelines, tips, examples and (web)references about this whole topic would be absolutely great, I’d say.
    Conclusively, I want to note that I think the idea about `From Photoshop to CSS` is very good and could make a highly useful chapter / section in your book for a great many people.