Following on from yesterday’s logo placement discussion — a few people quite rightly mentioned the simplicity of placing the logo using an IMG tag within H1 tags. There’s no doubt there’s a lot to be said for this method, and there’s a good reason why it is the current standard. However it might be worth noting that it may not be quite a robust as you may think.
Take the ‘CSS On /Images Off’ situation that many low-bandwidth users prefer. As a developer sitting on the end of a cable, it’s easy to scoff at this scenario, but if you’re:
- Paying a premium rate to browse through your web phone, or
- Living in an area where you don’t have effective access to broadband
– it’s not such a radical prospect. In fact, I seem to remember even Roger Johannson Johansson of 456 Berea St mentioning recently that he still only has access to dial-up in his area.
It’s fair to say that both current versions of Firefox and Opera do a great job at scaling and even coloring the ALT text to the H1’s styling if you block the images.
However, IE renders a nasty looking ‘missing graphic’ icon and super-imposes the ALT text in barely legible 10px type. Certainly not ideal, but perhaps tolerable.
Safari was the real eye-opener though. As you can see in the screenshot, disabling images removes them but Safari neglects to leave any evidence — ALT text or otherwise — that there was ever an image intended for the area.
Perhaps there’s an alternate method for switching off images in Safari that I’m not aware of? I must admit it’s not my default browser, so I don’t know it inside and out.
But if not, that’s not a great result and something to be aware of.
Related posts:
- Optimizing Images For The Web With Photoshop Jennifer looks at how to optimize your images for the...
- How to Override Inline CSS Styles Inline CSS can be applied to any HTML element using...
- How To Manipulate Images With The Photoshop Clone Stamp Tool Jennifer demonstrates how to use one of the most fun...
- Visualise This: Turning Numbers & Data Into Images With Infographics (10 Examples) Jennifer looks at ten examples of information graphics....
- Getty Images Call For Artists On Flickr Getty Images are making a formal call for artists through...
These two recent post have caused me to work on devising a better method for my site’s logo.
My only question involves this:
January 16th, 2006 at 10:01 pm
Note, it didn’t post the code:
January 16th, 2006 at 10:02 pm
I deal with a lot of people who are on 56k, and most don’t bother disabling images because many, many sites BREAK under this setup (especially the ones that use spacer gifs still). By the time this issue no longer exists (5-10 years from now…), broadband adoption will be high enough to not really warrant worrying about it. Furthermore, browsing with images off and CSS on seems counter-intuitive, and low-bandwidth users would be much better served using neither.
As far as mobile devices go: WAP pages, people! At minimum, you should be providing alternative style sheets for mobile devices. Ideally, you should be doing something a bit more dramatic, like entirely different pages for the mobile devices that are built around their needs (reduced feature sets, adjust for different input model, etc.)
Like I said on the other post — this is far too much work for what it yields.
January 16th, 2006 at 10:09 pm
Ethan, bear with us. We got code syntax highlighting working recently, but we haven’t documented it or made it super easy to use in comments yet. We are tackling that issue at the moment. For the time being you can get your code to show by wrapping it in PRE and CODE tags (CODE works inline too). Adding a class to the CODE will also let us color code it.
The options for classes are:
You will need to remember to escape your HTML snippets though (<HTML> becomes <HTML>).
We’ll try to get it all down to ‘push button’ code posting soon.
January 17th, 2006 at 12:32 am
“In fact, I seem to remember even Roger Johannson of 456 Berea St mentioning recently that he still only has access to dial-up in his area.”
You’re probably thinking of Tommy Olsson at The Autistic Cuckoo.
(It’s Johansson btw ;-) )
January 17th, 2006 at 3:41 am
Apologies Roger. Double ‘S’ fixed. ;)
Yes, I had a look and couldn’t track the quote I noticed. It may well have been Tommy.
January 17th, 2006 at 4:06 am
Putting aside the alt-attribute issue with IE or Safari:
People disabling images do so for a reason — Why bother working around those user’s decision?
January 17th, 2006 at 6:55 am
I believe there was a case study on either zeldman.com or alistapart.com last year regarding logo replacement with CSS, that there were issues with screenreaders.
If you’re looking for best accessible practices, I highly recommend browsing through Jeffery Zelman’s CSS.
Personally, I usually build for as many people as I can, but i’d rather build a site that degrades gracefully and is accessible, than one that’s not accessible at all!
January 17th, 2006 at 8:17 am
Etnu, from what I’ve heard, a lot of newer mobile devices don’t utilize WAP protocol, and even a new phone from Motorola is advertising that the internal browser uses Opera. WAP was a great idea, but not very well implemented. The phone making companies didn’t really adopt it, probably partly because it wasn’t highly adopted by designers themselves. It’s a catch-22.
January 17th, 2006 at 11:54 am
Yep, WAP is pretty much an afterthought in feature lists for phones these days. They all trumpet their XHTML/CSS rendering abilities, although besides the Opera phone browser, none usefully support the ‘media=handheld’ media type.
Etnu, I completely agree that the best way to build a site targetted specifically at PDA/phones is to send different, optimized HTML to it. However I think there are considerations you can make in a site that you aren’t specifically targetting to low-bandwidth users that can improve their experience.
For instance, you might not generally expect most users to browse your glossy company website on their phone. However, a client may want to check the address on his phone on the way to visiting you. Making it easy to identify the site and navigate quickly to the ‘contact us’ page without needing to download 300k of glossy images would probably be a helpful option for him — without you needing to incur the time and expense of building a separate, parallel low-fi site.
January 17th, 2006 at 8:57 pm
While surfing with my Blackberry I turn off images. I would think many would do the same.
January 18th, 2006 at 11:28 am
I’m stuck with dial-up, and I do surf with images off (but CSS on) from home. It’s very easy to toggle these things in Opera, which is my favourite browser.
The only problem with a (good)image replacement technique is that images have a fixed width, but the size of a text element is variable. I use a simple IR technique on my defunct blog which works for all ‘normal’ situations, but someone with a very large font setting might see an undesirable cut-off effect.
The question is whether user agents ought to respect the width/height settings of the image even when the image itself is not available. There are cases when that’s what you want, but there are also cases where you’d like the alt text to be shrink-wrapped. I think we need another attribute for the IMG and OBJECT element types. :)
January 18th, 2006 at 1:09 pm
Ah, Tommy, it was you! Actually I figured out that I was at Andy Clarke’s site when I had my ‘gee, fancy that’ moment — which is probably why I later struggled to track down who said it and where ;)
http://www.stuffandnonsense.co.uk/archives/mir_image_replacement.html#comment8
I did consider exactly that issue when I was experimenting with this stuff. In the end I decided that there is a point where scaling up a font can’t help you anymore, and that beyond that point it’s just users playing because they can.
However, if it was an issue for you, you could provide extra plain background on the logo graphic and set the width height in EMS. It makes very little difference to file size. For instance, changing our 160×50px SitePoint logo to 700×200px changes the file size from 1.70k to 1.75k. No real issue there.
You also ideally need to set a min-width/height to stop it scaling down too small and cropping the background image. IE doesn’t know mid-width though.
January 18th, 2006 at 11:41 pm
did it ever occur to anyone that if the user has images turned of they dont really care about what the page looks like? It may matter to you, but why bother if they couldn’t give a monkeys? as long as they can read the content its good enough for them, so its good enough for me.
January 24th, 2006 at 8:33 am
Your assumption is they don’t care. If that was the case, why would they leave CSS turned on? These people are motivated by reduced bandwidth demands, not a craving for Times New Roman.
January 24th, 2006 at 9:00 pm
You know what I get a kick of, every time I read stuff like this?
(noteable exception to those very few places that they can not get Broadband – and even then – they could by Direct TV or the like)
How many potential customers to a website are going to be one of the following
1) Can not afford broadband
2) Do not surf enough to care to about getting broadband
Really – how many of those are going to be someone that plops down a money online. The first group doesnt have any money, the second group would not be the type to shop online – otherwise, they would be online more often. I dont care if its a product from a store, or a subscription to content – that applies in both cases.
A lot of companies get that – and thats why so many of the bigger retailers sites are something that you would never try to browse on dial up. You have to either run basically two completely different websites – or scale back dramatically how you want to present your products. I am of the thinking that the small percentage stuck on dial up, versus the gained sales from really spruced up display of your products is a no brainer. You are going to make much more sales by displaying your products to the fullest, than you are going to by lowering the display to a be able to be seen by someone on dial up.
Not to mention – how many people are going to buy a product, with out looking at it? You will need images turned on to see it.
Unless that is that sitepoint only aims its content at bloggers these days – then I would be wrong.
January 30th, 2006 at 10:10 pm
Zach, we’re not really talking about an ‘either/or’ situation here. From a developer’s point of view, it takes no more time to work in a way that degrades elegantly. You don’t have to compromise your higher bandwidth users, and there’s equally no reason to cut a low bandwidth user loose.
Maybe you’re selling DVD players and I’m at the department store, looking to purchase. I know what the model I want looks like. I just want to use my phone to quickly determine if you can do it much cheaper. Why make it hard for me?
More than anything, these are issues that it’s simply useful to be aware of. It may be that you weigh up the situation and decide you’re ok with how your site degrades. As long as you do understand the situation and make a conscious decision, that’s a perfectly cool.
January 31st, 2006 at 1:48 am