Grow your CSS skills. Land your dream job.

Question & Answer Wrap-Up: Quickies

Published by Chris Coyier

Mackinley Drummond

What's the deal with the "cardboard cutout" CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what a CSS-based site had to look like. I have begun the early stages for a design refresh for this site. I'm pretty pumped about it. Don't get too excited though, it's gonna take me a while to complete it. I'm hoping it's before or around the new year though.

Sanjeev Sharma

How did you manage to get IE6 on your Mac?

I run VMWare Fusion to run Windows XP where I run IE Tester. I have to have IE 7 installed in order for IE Tester to be able to test all the versions: 5.5, 6, 7 and 8. Somedays I wish I had a real PC with a real original version of IE 6 to test on, because there are little quirks and differences between the IE Tester versions and the real thing. You could use Parallels or Bootcamp to do the same thing, and IE Tester also runs on Vista. You'll need an Intel Mac to run either of these. If you don't have an Intel Mac or can't/don't want to run Windows on your Mac, you could use ies4osx which runs on Darwine (the OS X flavor of the "wine" virtualization software that allows you to run Windows programs without running Windows). I have ies4osx kind of slow and buggy, but it's been a while since I've used it.

Anders Kleve

When should we use image replacement instead of actual images?

The perfect place to use CSS image replacement is the logo for a website. A logo will often include the text title of the site, which eliminates the need to display the title of the site in actual web text. For both SEO and Accessibility purposes, it makes sense to have the title of your site be an h1 tag as the first thing on the page. With CSS image replacement, you get the best of both worlds. The h1 tag contains the text title of your site, but if a "regular" visitor sees your site with both CSS and images enabled, they will see the graphic logo.

Steve Davis

If you replace the h1 with an image, how do you also have an image (typically the logo) in the header that acts as a link to the home page, as is the convention.

This is a great follow-up to the previous question. I said above you should be replacing the h1 tag as that makes the most sense for SEO, accessibility, and semantically. But... this complicates things if you want to make it into a link. If you wrap the inner text in an anchor link, depending on what technique you use, it will either hide or push off the page the text, leaving no clickable area. So what you should do is perform the actual image replacement on the anchor, not the h1 itself (something like "h1#logo a"). Same theory, just leaves the area clickable.

Denzil Rowe

Which is better for building a website layout, Photoshop or Illustrator?

Whichever one you like better and feel more comfortable in. Although it doesn't hurt to know them both well.

James Dadd

If you could build everything from scratch for a website, infrastructure through to front-end programming what would be your ideal stack?
Server:
Prog/Script Lang/Framework:
JS framework:
Database engine:
Design (CSS/Tables/Templating..):

Server: Don't know enough to comment. I guess it's usually Linux or FreeBSD + Apache
Prog/Script Lang/Framework: PHP or Ruby, although I'm a huge novice with both
JS framework: jQuery
Database engine: MySQL
Design (CSS/Tables/Templating..): CSS/XHTML + CMS

Comments

  1. Permalink to comment#

    Um… Fireworks. :)

  2. Permalink to comment#

    Wow… it’s way too early in the morning. Forgot to paste the quote I was responding to above, which was:

    Which is better for building a website layout, Photoshop or Illustrator?

  3. Permalink to comment#

    You can get a standalone version of IE6 here: http://browsers.evolt.org/?ie/32bit/standalone

  4. In response to the first question/answer: I’m really in love with the current CSS-tricks layout. It demonstrates what CSS is really capable of. I especially like the footer, with all the author info and stuff.

    In response to this question:

    If you replace the h1 with an image, how do you also have an image (typically the logo) in the header that acts as a link to the home page, as is the convention.

    Is it ok for me to have an h1 tag that has my site name, and use CSS to hide that, while displaying the logo in an img tag (SEO-wise)? I want to be as semantic as possible (X)HTML-wise, while being SEO-friendly… or is there another way of doing that?

  5. Permalink to comment#

    Hope your time off is going well Chris!

    Enjoyed the Q and A

  6. Jeff Dion
    Permalink to comment#

    Which is better for building a website
    layout, Photoshop or Illustrator?

    Photoshop is way easier to work for website layout design, unless you know the small techniques to avoid visuals bugs in Illustrator.

    First of all, you need to know that you can only use full pixels values for your borders (if you plan to use css to generate them), because you can’t use 0.25px as a valid css measure.

    Also you might want to set the document grid to 1px and activate the snap to grid option in Illustrator to avoid placing your objects over 2 differents pixels, which will result in a poor looking product because of the anti-aliasing that this will produce.

    And remember that for the Web you need to work in 72dpi :D

    And sorry for the awkward syntax, English isn’t my main language :P

  7. I just wanted to expand on the question

    When should we use image replacement instead of actual images?

    My understanding of when to use a css image replacement tecnique and when to put the image within the html rests on one way of assessing the particular image. If its design/presentation related in anyway, it goes in the css. If its motive/purpose is adding to the content, it belongs in the html. So a logo would be design related and it would be appropriate to use an H1 for the logo and replace it that way, but a graph of todays stock market analysis would belong in the blog post being made about todays stock market.
    Thats the way i try to think about my code when im working on a site.

  8. Will Lau
    Permalink to comment#

    @Matt:
    I’m also a huge fan of Fireworks. :)

  9. Permalink to comment#

    I have recently began to design websites with indesign. I find it more usefull for all the grid tools and the typographic elements. I make graphic elements in photoshop and/or illustrator, then import them into indesign, put some fake text, and can easyly style it.
    You can use paragraph styles, margin, padding etc, and it seems to me that it is much more closer to the html-css logic/semantic than photoshop or illustrator (plus the fact that working the text/typography in photoshop is just a pain…)

  10. John Paul
    Permalink to comment#

    Chris:

    Is there are any advantage to testing various of IE on both Windows XP and Vista? I’m not clear on what difference the OS version makes in terms of the browser’s ability to render. Any insight is, as always, much appreciated!

    Thanks,
    John

  11. @John Paul: Good question… I don’t think so though. Operating system shouldn’t make any difference. I guess I won’t be surprised if there was some little but that got through though.

  12. Permalink to comment#

    ” Which is better for building a website layout, Photoshop or Illustrator?”

    I’m a fan of fireworks myself. Rapid prototyping allows for creating mockups with click throughs so you can send it to a client have them navigate the mockups just like a webpage (sort of). But since I’ve been doing most of my work in fireworks I’m turning into a photoshop weekling.

  13. Permalink to comment#

    Here’s a question for you…

    Do you think Microsoft will ever manage to get a working standards-compliant browser released, and if so, how many years will it take before the mass market upgrades to it?

    You can tell I just spent hours trying to make an xhtml strict design work in IE5/6, and I dream of the day when designs work flawlessly across all browsers…. :-)

  14. Rob Stathem
    Permalink to comment#

    Chris, Thanks for putting together these CSS tutorials! They are superb! I speak on my behalf, but I’m sure all of us greatly appreciate the time you’ve put together to create all of these! How do you find time to put all these videos together, plus your job, and other life committments?

    So…did CSS layout give you some trouble in the beginning? What do you think is the most difficult thing for a web designer to grasp with CSS?

    Thanks again,
    Rob

  15. Rob Stathem
    Permalink to comment#

    In response to Dave’s post,

    Oh Dave! Microsoft is at the mercy of all my CSS frustration! I hear your pain! All I can say is…we need to send Microsoft some letters or something. Maybe if they receive enough emails/letters…they’ll start taking action!?

    Wellll….all we can do is hope, right!?

    -robster

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".