Recently in xhtml/css Category

Grok'ing the Ah-ha Moment

| | TrackBacks (0)

One of the most satisfying experiences a technoluster can have is becoming proficient with a new technology, especially one that's not easy to master. Geeks sometimes use the word » GROK, which basically means you 'get it'.

The term was coined by Robert Heinlein in his novel Stranger in a Strange Land (SciFi, 1961). The martian word implies you understand something (such as how a particular technology works) .. on an intuitive level, in a satorial kind of way.

Stranger in a Strange LandThe difference between possessing a working knowledge of a particular technology and 'grokking' it is difficult to describe. Grokking impies a deeper understanding .. that surpasses mere facts & figures.

It suggests you can 'see into' the inner workings and comprehend how the different elements interact.

I've been studying CSS (off-n-on) for months, applying the concepts I learned (.. cuz that's how I learn best). And today I finally 'got it'. It came in a flash .. known as the » ah-ha moment.

[ Hmmm. That's interesting » I was looking for a good article to link to the phrase » 'ah-ha moment,' when my Google search returned a page referencing CSS. Surprisingly coincidental, no? Seeing that I didn't query the term 'CSS' (only » 'ah-ha moment').

What are the odds of that occurring? Of those two concepts being found grouped together so prominently (link #2)? Of all the possible topics in the world, CSS comes up. Maybe it means something. ]

It's not like I didn't understand CSS before. I'd long been reading about and felt comfortable wielding the technology .. using it to whip up sophisticated layouts. But now it seems my insights were superficial .. that I was merely applying recipes, cookbook style, mechanically.

Today's insight came so dramatically that it felt like I'd swallowed a ball of CSS enlightenment. "I finally get it," I muttered. Incredibly satisfying experience. Accompanied by a feeling of arrival, completion, mastery.

Of course, this doesn't mean I know everything there is to know about CSS. Far from it. Gladwell says you need 10,000 hours to master a skill. But I now 'see' how it works .. on an intuitive level.

I would love to be able to plug a cable into my brain and upload a whole slew of other cool technologies (.. like they do in the Matrix). Unfortunately, that ain't how it works. Nor can you grok something by sheer force of will. (If we could, I'd be grunting loudly.) You 'get it' when you get it and not a moment before.

Tho I'm curious about what happens at that moment. I mean, I knew everything I did about CSS now in the moments before I 'got it'. I've also been studying Programming. Maybe that helped yield insight, cuz CSS in some ways resembles programming.

The experience, in retrospect, could be described as a 'breaking thru,' or a 'crashing thru,' or a 'falling thru,'. The thing you 'break thru' seems like a semi-translucent crystalline membrane .. that obscures your vision .. from seeing deeply .. into the inner-workings.

The distance traveled (knowledge-wise) was very small, yet the resulting effect was dramatic .. sort of like the view you get when cresting a big hill. The straw that broke the camel's crystalline back, you might say.

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.

HalloweenThe 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]

Changed the underlying markup that controls the links in the blue-green sidebars on the home-page. They were previously coded as » paragraphs. I changed them to » list-items .. cuz that's what they are » a list of items (links) grouped according to category. Certainly not paragraphs .. not even sentences.

Website InspectionIf I did this correctly, you shouldn't notice any difference. Cuz I applied the same styling to the list items .. tho this was trickier than it might sound. I nearly freaked when a single misplaced comma trashed my whole layout. Yikes!

This change represents a semantic improvement. Semantics (i.e. » 'meaning') is one of the buzz-words kicked around when thinkers discuss the Web's future.

Most surprising was that it took me so long to realize I had coded the home-page with semantically incorrect markup. It suddenly hit me (last night), when out of the blue (actually » blue-green), I thought » "Those links aren't paragraphs; they're a LIST."

Reblog this post [with Zemanta]

Web typography. It would seem to be a fairly simple topic, no? While I was reviewing some related concepts recently, the following question popped into my head » What exactly is an em?

EM | Usage in Web Typography I've been using em's a long time, and knew they were based somehow on the letter 'M.' Wasn't sure however, if they were based on the size of the capital [M] or lower-case letter [m].

Also felt confident they were based on the horizontal measurement, but not certain. (In both cases, I was wrong.)

Trying to answer this simple question led to a surprising amount of confusion. Many sources on the web discuss ems, and detail their usage, without ever defining what exactly an em is.

Many pages are more complicated than need be. (It's not rocket science.) Finally have a handle on the topic, but my dang eyeballs are burning .. from reading so much.

First, let me answer the question I posed at the top, and therefore avoid the criticism I levied at many other sites.

An em is (drum-roll, please) » a unit of measure (.. defined by a certain number of pixels). So like inches & meters & light-years, which are also units of measure, the em is a » unit of LENGTH.

The thing that makes the em tricky is that » unlike inches or meters, or other fixed (or 'absolute') lengths, the em is a relative unit.

"Relative to what, Rad?" you might be asking. Relative to the font-sizing applied to (in pixels) its » parent element.

What this means is » the SAME font-size declaration (specified with ems) can yield DIFFERENT results (in pixels) .. when/if the parent element for each declaration specifies a different sized font. Hence, the confusion.

Reblog this post [with Zemanta]

Changed the type of layout I use on the home page .. to » LIQUID-ELASTIC hybrid. If I did this correctly, you shouldn't notice any difference .. unless you change your default text-size (.. by selecting 'Text Size' from the 'View' menu in IE). Lemme know if you notice any display quirks.

Liquid CSS Web Design LayoutThere are 4 different 'types' of layout designs:

  1. FIXED (column widths remain fixed, no matter what, used » here)
  2. ELASTIC (column widths change with changes to your preferred font-size)
  3. LIQUID (column widths change with changes to browser-window sizing, used » here)
  4. HYBRID (combination of two or more of the above, used »  here)

I've long preferred LIQUID layouts (sometimes called » FLUID), which resize column widths as you resize your browser window (called the "viewport" by those in the biz). It's easier for me to understand the concept behind LIQUID layouts .. than ELASTIC.

Today however, I'm demo'ing a » HYBRID layout .. that combines elements of both LIQUID & ELASTIC. [ If you've read my SCSI guide, you know I'm a fan of hybrid config's. ]

The center section/column remains » LIQUID, while the two sidebars (blue-green colums) are now » ELASTIC. This means they will resize with changes made to your preferred font-size (e.g. » small, medium, large, gigantic, etc.). The center section will continue to change proportionally, as you resize your browser window - just like before.

Resizing your browser window will no longer affect the width of the blue-green sidebars (which are already skinny), while changing your default font-size will not affect the width of the center column/section.

The design itself of the home page has remained unchanged. Only the 'type' of layout has been modified (.. from LIQUID to » LIQUID-ELASTIC hybrid). This new type of page layout is considered more 'accessible' ..

.. especially for those who might have difficulty reading smaller text, and need to bump up their default font-size.

(Today btw, is 9-9-09 .. for all you numerologists.) Anybody who has ever used Cascading Style Sheets (CSS) to style a web page has likely experienced the frustration that comes when a particular style refuses to render the way you want.

Understanding the concepts outlined here will help troubleshoot any CSS rendering problem .. much better than banging your head against the wall (.. a technique that seems to provide limited success).

Three rendering principles determine how CSS styles are applied to a web page, and which style(s) take precedence. They are:

  1. The Cascade
  2. Inheritance
  3. Specificity

For reference sake, here's a quick review of basic CSS syntax » selector {property: value}

For example » p {color: green} .. will apply a value of 'green' to the color property for the text contained in a paragraph ('p' = paragraph selector). This is called a CSS "rule".

Here's a brief overview of the 3 rendering principles listed above that determine how CSS rules are applied to a web page:

CascadeI. THE CASCADE

Styles are applied in the following "cascading" order: External style sheet » Embedded styles » Inline styles.

A given HTML page can contain one, two, or all three (or none). Styles lower down the cascade normally supplement (add to) styles higher up the cascade. If a styling conflict exists however, styles lower down take precedence.

In other words, the last style applied wins (.. given equal specificity). Here's a brief description of each type of cascading style mentioned above.

1. External style sheets (fileName.css).

These styles can be applied to an unlimited number of HTML pages .. which link to the CSS file. Very powerful, since they allow you to change the look-n-feel of an entire site by modifying a single file. Web pages normally link to only a single external style sheet, tho it's possible to link to multiple external style sheets .. which also cascade, depending on the order they're listed. Large professional sites often use multiple external style sheets.

2. Embedded styles

They are found within the head tag of an HTML page. These styles are enclosed within the 'style' tag <style> and apply only to the HTML page in which they are found. These styles supercede any styles contained within an external style sheet that may conflict with them (.. given equal specificity).

3. Inline styles

Inline styles are applied to individual HTML elements/tags, using the "style" ATTRIBUTE. Note that this is not the same as the style ELEMENT applied to embedded styles mentioned above, tho it's spelled the same way. Inline styles supercede all others that conflict with them .. since the last style applied wins. Plus, they carry maximum specificity (which we'll discuss later).

If you view this home page in Firefox (or a browser other than IE or Opera), you'll notice I added some rounded corners.

The rounded corners of this box use graphics to achieve its effect (1 in each corner). Not as cool as pure-CSS. But that's why you can see these rounded corners in IE & all browsers. This box will expand and shrink (down-n-up) as necessary to accommodate text inside, as its width is fixed (to 205 pixels).

Been reluctant to spend much time focusing on site styling, preferring rather to concentrate on generating » content.

In the world of cars, for example, I've always preferred the spartan cockpit of a Porsche to the bells & whistles you find sitting in a corvette. Tho admittedly, that's just my druthers.

My point » function should never take a back seat to form.

I've considered adding rounded corners many times before. Countless techniques exist. But they always seemed a kludge. (Andy agrees.) So I never felt it worth adding the extra markup necessary.

Techniques that use graphics to achieve their effect involve inserting additional HTML elements that are otherwise unnecessary, because current CSS standards (v2.1) allow only 1 background image per element (while each box has 4 corners). Future versions of CSS (v3.0) will support 8 images per element (for this very reason).

This approach has 2 main problems. First, adding (otherwise) unnecessary markup goes against all that is holy to the Web Standards movement, which touts the tenent of 'Semantic Markup' as one of its pillars.

Created a tabbed menu today .. something I've been meaning to do for ages.

Kandinsky's Black Spot

The menu displayed at the top of the homepage is pure-CSS driven (no images used). Using images would allow for more creativity, but would also add to the page's download-weight. (And I use enough images already .. in the daily entries.)

My goal was to design a tabbed menu that was both simple & functional. I'm pleased with how it turned out .. tho it took a surprising amount of tweakage to get it to look the way I wanted.

Now that I've developed a basic format, I can tweak & adapt as necessary.

Might look simple, but centering that menu had me jumping thru hoops. I reviewed several methods and finally decided to modify Ethan's approach .. so it would resemble the cleanness of Eric Meyer's tabbed navbar (which is not centered).

Redesigned the site's » Archive index page (from scratch). It contains links to all monthly archives posted since the site's launch (summer of 2000). Gateway to Memory Lane.

Knights debating the importance of good table design with King Arthur

Been meaning to do that for some time now (years, actually). That page was the single-most mucked-up page on the entire site. The code was a rat's nest of deprecated standards, poor design choices and mark-up errors. I'm surprised it would render.

Began that page back when I knew very little about HTML and before I'd even heard of CSS. Over the years, the muck seemed to multiply as the page grew. It's not a highly trafficked page, so I didn't worry about it.

Tho at sundry times, I'd go in and try to manually clean up the code. That always proved an exercise in futility. Seemed like the more I tried, the worse things got. The only real solution was a complete makeover (a move which could be viewed as symbolic of the site's growth and development).

Now the page contains a third the mark-up it did before (10-KB vs 30) and the styling looks 3X cleaner, by making use of advanced techniques such as colgroup styling for better readability. Leaner, meaner and faster-loading.

While recovering from the crud this weekend, I took the opportunity to work thru a video-tutorial for Dreamweaver CS4 .. consisting of ~10 hours worth of instruction and 18 chapters.

Lynda.com

So I've gotten up-to-speed on DW.CS4 .. the world's finest web design software. (This page you're reading now was created with Dreamweaver.)

Excellent tutorial. Last year, I worked thru the same title (» Essential Training) for Dreamweaver CS3, which was also good. But this one (done by different guy) was noticeably better.

I especially liked how the guy who narrates this video tutorial (for DW.CS4) spent significant time focusing on the intracacies of working with CSS.

Rad Goes Strict (XHTML 1.0)

| | TrackBacks (0)

I converted the homepage to » XHTML 1.0 Strict (document type declaration) from XHTML 1.0 Transitional (which applies the rules associated with rendering web pages more loosely).

Strict

Only problem I had was the square Google AdSense ad, which I've traditionally wrapped in a <table> tag/element .. which is not the correct way to code it. (Cuz it's not really a table. Rather it's a JavaScript script.)

In Strict, I needed to convert the <table> to a <div> and "float it" left (in CSS) .. otherwise none of the other text would wrap up alongside the ad (like it does now).

All the images in the center section had to be assigned a class and 'floated' right (in CSS), cuz the Strict DTD does not allow you to align="right" .. like I used to do.

Aligning deals with "presentation" (as opposed to structure and content), and the Strict DTD moves everything pertaining to presentation out of XHTML (and into CSS).

I'm actually fairly comfortable with the requirements of the XHTML 1.0 Strict DTD .. enough to begin creating all new pages using the Strict doc-type declaration.

Downloaded & installed a demo of the latest version of Dreamweaver (CS4, released last month). Been exploring its new features. (Using it right now.)

Dreamweaver CS4

I'm impressed. The improvements are actually useable (unlike most software upgrades). Fact, I'm more impressed with this upgrade than any upgrade .. of any software -- ever!

Adobe claims to have ventured out on the road to interview real-life web designers & developers .. folks who use Dreamweaver daily.

It shows. Every improvement solves a problem I've had myself. Kudos to whoever mapped the upgrade path. It's the first time I've felt Dreamweaver was finally the program it should be.

About this Archive

This page is a archive of recent entries in the xhtml/css category.

world events is the previous category.

Find recent content on the main index or look in the archives to find all content.