Happy Halloween. I modified the method of placing the graphics in the header found at the top of the home page .. up where it says » RADIFIED | Nuclear Grade Technolust. There I implemented a technique known as » CSS Image Replacement, of which there exist many variations, each with its own set of pro's & con's.
The dividing-line among web designers seems to be whether or not to use a non-semantic span tag with CSS positioning, which involves a more complicated technique .. but leaves visible TEXT in place for visitors who surf the Web with STYLES turned off (primarily those using mobile devices).
I used a simpler IR technique, by changing the images you see displayed there .. from foreground images to background images.
This allowed me to replace the foreground images (contained in those heading elements) with TEXT .. which I then indented (way to your left), so it can't be seen. By moving the TEXT out of the way, this technique reveals the graphics (.. which look prettier than standard heading-text).
The advantage however, is » devices that don't render styles (such as screen readers and mobile devices) will now see a TEXT heading and tag-line displayed there, where before there existed only images. Search engines also gives more weight to TEXT than images.
Most Rad visitors will never notice the difference .. seeing most who frequent the site (fellow technolusters) browse with both images and CSS turned ON. But I'm gradually filling my webmaster toolkit with increasingly sophisticated techniques. (Learning by doing.)
After all the pages are styled however, and the markup is coded semantically, there's still no substitute for insightful content .. that is well written (.. and hopefully seasoned with a dash of personality).
This has always been the most difficult challenge .. because a stylish suit does not a charming pig make. And the ugliest person can say the profoundest things, and possess scintillating ideas. So it would seem that content trumps style .. no matter the venue (.. except maybe for those who focus on style).
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=6d497935-225c-4057-a3c2-4cb19f16a48f)
••• today's entry continues here below •••
UPDATE - after further review, I might prefer Technique #6 (Leahy/Langridge) .. if it will let me code a link, which my current method does not. (I mean, I can code a link, but it doesn't work.) This guy (who hails from a small village in Nottinghamshire) prefers it best in an IR comparison dated March 2009.
Moreover, I feel the odds of someone surfing with IMAGES turned off is far greater than the odds of someone surfing with STYLES disabled (but images turned on). Note btw, that Technique #8 appears to be the only one which works under ALL circumstances.
UPDATE #2 - After playing around with the various techniques, I found that #8 gives me problems centering the images (they shift to the right for some reason) and fails with images turned off. So I settled on technique #6, but it too fails when images are disabled. So I think the guy mis-spoke. I mean, I disabled images in Firefox (v3.5.4) and everything disappeared » no images, no text .. nada. Blank, white header. (Yeah, I saved-all and refreshed .. multiple times.)
And it's impossible to code a link, cuz all links are coded to text, which is then hidden. So my original (simple) text-indent method seems to work just as well as the more involved techniques. This stuff can drive you crazy. More tricks today than treats.
I'm beginning to question the value of image replacement. I mean, if I can't code a link, and no TEXT displays when images are disabled .. maybe I should just go back to using foreground images (which I can link to) and ALT tags (which reveal textual info when images are disabled) .. like I did before.
Or maybe I'll just invent my own technique .. one that works for me .. which would be something like Technique #4, but with no background image (for which I see no point .. since this technique uses a foreground image, and therefore the image will display with or without CSS turned on), but rather a SPAN tag with TEXT (for SEO, which I like/want) moved out of the way, so the linked image displays (like it did before I started this IR mess) .. if that's possible.
Lastly, I feel compelled to point out that the term 'Image Replacement' (as applied here) is a misnomer. These techniques are NOT designed to replace images but rather » TEXT. More specifically, they replace text *with* images.
One more tale of woe before I close » I also tried this method, but it gave me small visual artifacts directly above the letters .. perhaps because I use a 1-pixel border .. to avoid "margin collapse" (an unexplainable space between divs) .. which, by the way, would appear to be another misnomer .. since the margins in this case don't collaspse. Rather they separate.
Doesn't it appear that web designers are backwards? Or do they purposely use confusing terminology?
For more along these lines, here's a Google search preconfigured for the query » css image replacement technique
Just for what it's worth, mobile devices actually tend to have pretty good CSS support (for the standard selectors, anyway), even in the less mainstream browsers. Where they tend to fail is a) the trickery done by some Javascript to modify pages post-load, and b) layout quirks due to the low screen resolution. It's also worth bearing in mind that they tend to act as if they pull data down at dial-up speeds, even when connected via 802.11
So the good news is that image replacement you used works on the devices I have, although the huge title banner certainly doesn't help the page any - and it would need a LOT of help to be usable from a mobile device.
For instance, in the case of index.rad, the Sony PSP's built-in browser has trouble, and the middle column (i.e., the one with the actual content) ends up empty and the entire screen is taken up by the left and right navbars. It also takes a long while to decide that it's done because there's so much script being referred to - especially adsense - and mobile devices don't have as much cache as desktops.
The Nokia E71 browser is much better, and eventually displays a page not too different from a desktop view, although it's again awfully slow to load and the overfat navbars made the page really unpleasant to navigate - the actual page content appears only after an interminable delay (again not helped by it being the last thing in the page and by AdSense) and it's annoying to navigate because that whole left navbar is first in the tab sequence.
If you care about mobile devices, using good XHTML + CSS is certainly a good approach, but it's essential to have a much, much lighter page approach and especially one that is more parsimonious with horizontal space - columnar layouts are a REALLY BAD IDEA, full stop, for mobile devices even when they offer landscape mode. In fact, it bears repeating: columns SUCK. For real mobile devices both the left and right navbars are so incredibly huge they need to be combined into an entire separate page, linked off a more stripped-down single navbar.
There's simply no substitute for trying to use these devices to see how bad 99% of the web looks outside of Google and Yahoo who make the effort to provide mobile-friendly landing pages.
The XHTML+CSS layout is the right way to go in keeping the base pages the same, but you have to be really really ruthless in turning off page elements that are harmful to the mobile experience and that means: put your actual page content *first*, avoid columns like the plague, let the browser use the entire width of the page. You can do all that with CSS but to make it work when you keep the page content the same, you still need some form of server-side sniffing to ensure that the CSS the device is initially served grades the display experience appropriately.
Hi Nigel. Good to hear from you, especially since I don't surf the web with a mobile device.
I recall we had a similar conversion in days past.
Seems part of the problem is that the sidebars are FLOATED (CSS), and floated content must be list BEFORE the content beside it.
I could try going to a 2-column style, with the mainContent column floated .. so IT appears first.
I read an article about the ideal reading length .. see here:
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
If I were to let the text run side-to-side, it would kill readability .. especially for those with horizontal resolutons of 1280 and above.
Have you seen sites that handle this well?
Those guidelines aren't the be-all and end-all and you give them way too much weight. Although layout and typography matter - apropos of which, read http://www.mcsweeneys.net/links/hellbox/hellbox1.html - there are different kinds of text and different kinds of writing, and different kinds of readers, and you need to be more flexible. In particular, there's a vast world of difference between, say, a brief news report, or a poem, or a slab of exposition from a Calculus text, and similarly there's a world of difference between the levels of focus which readers bring to their reading.
If you're writing some general fiction, or a magazine article for the general public, then those guidelines are fine. But they don't suit the kind of writing - or reading! - that I mostly do. Form has to follow function, it has to live in service to the text and the goals of the text.
In particular, is the text designed to be skimmed or browsed by a reader, or it is meant to be *studied*? As you might imagine, I prefer consuming content that is about study, and therefore I have the general layout preferences to match (I prefer full width and have a pair of 1920x1200 monitors, properly calibrated for black text on pure white).
But, take the horrible narrow layout at the McSweeney's site which I linked above. Normally I loathe that layout but for the kind of text there, that layout serves the right purpose: it's fiction and storytelling there, not information, and so it's as often as not about a journey - the texts tend to be short and **strongly sequential**, and the layout helps to force the reader to take the journey by not revealing too much at once while there's also no need to ever re-read a sentence, unlike text that's for study or reference purposes where putting all the context together and having it visible at once is more useful.
> floated content must be list BEFORE the content beside it
Not strictly true. It happens to be the case that the *final* HTML rendering process does want that, but it's wrong to assume that's the best approach for your source page if you *really* value the page semantics - as you should. There are better ways to skin that particular cat.
The most important thing to actually making a GOOD web page (as opposed to the kind of all-to-common bad web-page that shows layout-fetishism and throws usability completely out the door as a result) is that what a focus on content is really about is the reader, *not* the page design, and to serve mobile users (or sophisticated users who actually do know their own needs better than you do) the best this go back to the basics of HTML and put the text first.
The focus has to then be on scalability; make a basic page first. Look at m.yahoo.com - that's a *GOOD* mobile landing web page, and then go look at the "Desktop" page.
Now think about how you can have *both* a spartan and a rich experience from the same source text by customizing which stylesheets your server gives to different clients, so that additional page elements start out display:none for mobile browsers but desktop browsers receive a stylesheet which makes them visible, so that the page layout can scale better.
The next step is to use script as a tool to help you again grade the experience. Take for instance, the YUI Menu control - http://developer.yahoo.com/yui/menu/ - which like all the YUI controls takes semantic markup as input and restyles it for you - doing this with script means that desktop browsers get a rich experience but your page is kept simple.
Moreover, the way these scripts work is by making DOM nodes in the browser - the scripts *aren't* constrained to have the text in a particular order , especially an order which makes no semantic sense, because they can re-order the document in the client browser to suit the final display.
XHTML and CSS are all very well, but you need script to go the rest of the way. These days, you don't even really need to write your own since there are great libraries like YUI: see for instance how you can make nav menus from markup - http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html
Using the above techniques you keep your basic page as simple as possible and with the document semantics as high-level as possible, and renderable for a mobile device, and then use the capabilities of desktop browsers to augment the page with the additional elements you want.
If you do this, then you can have the best of both worlds; pages that load fast and have stripped-down mobile experiences, but that extend themselves to be rich (and even properly interactive) as the browsers get more capable.
To continue: for testing mobile layout, there are good device emulators you can use: Microsoft have a version of VirtualPC which is used to develop for Windows Mobile (the pro editions of Visual Studio bundle it and I'm fairly sure you can get it installed standalone) and Nokia make a similar thing available for the Symbian SDK for S60 smartphones.
Emulators are particularly useful for something like S60 since although it's a very capable OS, the range of devices it's built into is huge; from small cheap consumer phones with tiny screens and numeric only to the E-series phones with keyboards, WiFi and GPS like the E71/E72 or landscape-screen slide-keyboard phones like the E75 and then there's the N-series... all running the same OS and can potentially load the same apps but developers need emulators to check that SISX apps scale correctly to the different device screens and capabilities.
So, do get hold of emulators for at least the S60 phones and maybe Windows Mobile; it's educational.
That said, lots of these devices are pretty full of awesome, more so than you might think from emulation or looking at specs. When you have one in your pocket, it's a different ball game - you start to hate having to pull out a laptop.
I treated myself to a PSP-2000 a while back when it was on sale (as the -3000 was coming out) and I've not regretted it for an instant; more recently I've got my first decent phone and I have to say the E-Series Nokias are both fantastic phones and really practical e-mail/internet devices, way better than I thought they would be; and then of course there's the Apple gear like the iPod Touch/iPhone (a bit too expensive for me to own one for myself, but I can see why folks love 'em).