Comments on: Using image tags (for style elements) in HTML is bad design http://gabrito.com/post/using-image-tags-in-html-is-bad-design Anecdotes on Java, Ruby, Sysadmin, SEO, Design, and Management Fri, 05 Mar 2010 18:01:27 +0000 http://wordpress.org/?v=2.9 hourly 1 By: col col http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-29664 col col Fri, 13 Apr 2007 08:15:33 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-29664 This site served as a reference. Kikky Method http://kikky.net/pc/css_ir_e.html This site served as a reference.

Kikky Method
http://kikky.net/pc/css_ir_e.html

]]> By: JamesM http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-485 JamesM Wed, 12 Apr 2006 22:18:55 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-485 I've used this exact trick (text-indent: -9000px) myself a few times, but the worst niggle I have with it, is the focus lines which appear in Firefox (PC). When a link using this technique is clicked, a momentary band of focus lines is visible across the screen from the link itself right to the far left of the screen (tracking the path of the negatively indented text) remaining visible until the browser or server responds and the new page loads. Apart from that minor visual niggle, it's a great idea. I’ve used this exact trick (text-indent: -9000px) myself a few times, but the worst niggle I have with it, is the focus lines which appear in Firefox (PC).

When a link using this technique is clicked, a momentary band of focus lines is visible across the screen from the link itself right to the far left of the screen (tracking the path of the negatively indented text) remaining visible until the browser or server responds and the new page loads. Apart from that minor visual niggle, it’s a great idea.

]]> By: Tony Collen http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-473 Tony Collen Wed, 12 Apr 2006 13:28:13 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-473 :) It's the details that count. :) It’s the details that count.

]]> By: Todd Huss http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-468 Todd Huss Wed, 12 Apr 2006 04:26:06 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-468 Tony, I completely agree with you and I guess I didn't do a good enough job clarifying in my initial post because I think other people misunderstood me as well. Near the bottom of my post I say that it's fine to use image tags for content. If your document contains an image that is content, not style so image tags are totally appropriate in that case. Tony, I completely agree with you and I guess I didn’t do a good enough job clarifying in my initial post because I think other people misunderstood me as well. Near the bottom of my post I say that it’s fine to use image tags for content. If your document contains an image that is content, not style so image tags are totally appropriate in that case.

]]> By: Tony Collen http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-465 Tony Collen Wed, 12 Apr 2006 01:35:17 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-465 you wrote: It violates the separation of content and design by including a design element in your HTML I have to disagree with this, too. What if your document contains an image? Compare this to an image embedded in some other XML document. The way I see it, there's a separation from design elements, and the actual content of your document. Say you have a page template, for example, with a logo header graphic. This is completely separate from an image that might be embedded as part of a document, e.g. a screenshot, map, etc. In the case of a blog, I'm more apt to use the CSS image trick for template stuff, and then use img tags in the content of the posts. Conceptually, the template that the page is on is totally separate from the content that it houses. This can be solved with a two-step view pattern. For example, say you had all of your blog posts marked up in some descriptive XML format. If you wanted to inline an image, you'd be forced to use a tag to describe the fact that an image belongs at that point in the document structure. With two-step view, you'd convert your descriptive XML format (to something like XHTML), and then merge it with the site template. Your end result is an HTML page, and your original source document correctly (and richly) describes the location of something like an inline/embedded image. you wrote:

It violates the separation of content and design by including a design element in your HTML

I have to disagree with this, too. What if your document contains an image? Compare this to an image embedded in some other XML document.

The way I see it, there’s a separation from design elements, and the actual content of your document. Say you have a page template, for example, with a logo header graphic. This is completely separate from an image that might be embedded as part of a document, e.g. a screenshot, map, etc.

In the case of a blog, I’m more apt to use the CSS image trick for template stuff, and then use img tags in the content of the posts. Conceptually, the template that the page is on is totally separate from the content that it houses.

This can be solved with a two-step view pattern. For example, say you had all of your blog posts marked up in some descriptive XML format. If you wanted to inline an image, you’d be forced to use a tag to describe the fact that an image belongs at that point in the document structure. With two-step view, you’d convert your descriptive XML format (to something like XHTML), and then merge it with the site template. Your end result is an HTML page, and your original source document correctly (and richly) describes the location of something like an inline/embedded image.

]]> By: Todd Huss http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-463 Todd Huss Tue, 11 Apr 2006 23:38:06 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-463 Jan and Sergey, I agree that image replacement is hack but I think when used appropriately it keeps the page cleaner. In reality you can design a great looking site that's predominantly text based using background images and image decoration leaving the text visible. The only time you need to do image replacement is in those rare cases where for whatever reason you completely want to replace the text with an image and then it works very well while keeping the design cleanly separated from the content. I just hope a future version of CSS will natively support image replacement instead of forcing us to resort to these type of workarounds to have good separation of concerns. Jan and Sergey, I agree that image replacement is hack but I think when used appropriately it keeps the page cleaner. In reality you can design a great looking site that’s predominantly text based using background images and image decoration leaving the text visible. The only time you need to do image replacement is in those rare cases where for whatever reason you completely want to replace the text with an image and then it works very well while keeping the design cleanly separated from the content. I just hope a future version of CSS will natively support image replacement instead of forcing us to resort to these type of workarounds to have good separation of concerns.

]]> By: jan http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-460 jan Tue, 11 Apr 2006 20:16:22 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-460 While the goal is good, the method is stupid: This is abusing some technique (CSS/text-indent) for something it was definitely not designed for. This will cause more problems than it solves. BTW: You should not trust anyone who asks questions like "Are you supporting $BROWSER version xx,yy?" I never used or tested with or designed for IE5, but I'm still "supporting" it. For sure. It's a browser, it's more or less compilant with some subset of web standards. If they break my site, I may or may not work around it, but I'm not going to break anything (on purpose), not even MSIE. While the goal is good, the method is stupid: This is abusing some technique (CSS/text-indent) for something it was definitely not designed for. This will cause more problems than it solves.

BTW: You should not trust anyone who asks questions like “Are you supporting $BROWSER version xx,yy?” I never used or tested with or designed for IE5, but I’m still “supporting” it. For sure. It’s a browser, it’s more or less compilant with some subset of web standards. If they break my site, I may or may not work around it, but I’m not going to break anything (on purpose), not even MSIE.

]]> By: Sergey Smirnov http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-459 Sergey Smirnov Tue, 11 Apr 2006 18:02:45 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-459 If web designer wants to have a secure job, this might be really a good approach. Nobody else can understand the code without hard digging into it. The text-indent: -9000px; sounds very promised :-) If web designer wants to have a secure job, this might be really a good approach. Nobody else can understand the code without hard digging into it.
The text-indent: -9000px; sounds very promised :-)

]]> By: topfunky http://gabrito.com/post/using-image-tags-in-html-is-bad-design/comment-page-1#comment-458 topfunky Tue, 11 Apr 2006 16:52:46 +0000 http://gabrito.com/post/using-image-tags-in-html-is-bad-design#comment-458 I use the Rundle method often, but find that I also have to specify overflow: hidden to get it to work right in most browsers. I use the Rundle method often, but find that I also have to specify overflow: hidden to get it to work right in most browsers.

]]>