Tag Archives: css

“Mozilla’s new technologies” (for Mozilla Power’13)

I was going to “manifest” myself in Cairo via the powers of videoconferencing for Mozilla Power’13, but connectivity issues happened, so I recorded a screencast with my talk:

Slides

Here’s hoping the Mozilla Egypt community is having a great event :-)

Do send me any questions you might have about the topics I discussed, and I’ll do my best to answer them!

“Sorry, technical discussion”

It happened to me several times while at OFFF past week: I was in a conversation with people whom I had just met moments before and the conversation derived into “technical” matters, which is to say mild-core development topics like CSS or HTML5. And then someone looked at me with a mix of pity and embarrassment and excused himself and the others, shoulder-shrugging while muttering Sorry, technical discussion. Like if I couldn’t follow the thread and all that.

It was kind of amusing –because I could indeed follow it–, but it’s also very sad to assume that only because I’m female I can’t follow a “technical” discussion.

It’s also funny that “technical” means “traditionally male-dominated topics”, such as software development. But that is absurd: as any sane person will agree, if you want to excel at a field you have to master the technique, whatever your genre is.

Thus, CSS are as technical as knitting, which is a traditional female-only field, but yet you don’t get to look at the only male caught by accident in the middle of a knitting discussion by passionate female knitters and tell him Sorry, technical discussion. No, it’s more like: Oh dear, women’s things! *giggles*.

I say, stop perpetuating the stereotypes. Keep on talking about your preferred subjects and let your audience decide whether it’s too technical for them or not. But don’t make erroneous judgements, please :-)

Proportionally resize images with CSS (and maybe JS)

With CSS only:

img { height: auto; max-width: 99%; }

I normally used only max-width: 99%;, but I found it tends to produce images which are too vertically stretched in some cases, and I am of the opinion that images should always preserve their aspect ratio, unless you’re trying to create some strange effect.

Tested in Firefox 3.5, Chrome 3, and Safari 3 — let me know if it works (or not) in other browsers!

If it doesn’t work, I have been playing with some javascript that you could use. In theory, something like the following could be used instead, although I can’t think of an scenario where CSS support was bad enough that JS had to be used… oh wait, I just remembered this script. Ha!

Anyway, here’s the javascript code:

if(document.getElementsByTagName)
{
        var imgs = document.getElementsByTagName("img");
        var i, el, nw, w, h, nh, cw, container;
        for(i = 0; i < imgs.length; i++)
        {
                el = imgs[i];
                nw = el.naturalWidth;
                w = el.width;
               
                container = el.parentNode;
                if(container == null) { continue; }
               
                cw = container.clientWidth;
               
                if(nw > cw)
                {
                        nh = el.naturalHeight;
                       
                        el.width = Math.round(0.99 * cw);
                        el.height = Math.round(el.width * 1.0 * nh / nw);
                }
               
        }
}

I’m not sure if I’m being extra cautious with the if(document.getElementsByTagName) check.

Of course, if you want to do things properly, this script should only be executed once the page and images have been fully loaded, because only at that point the real size of the images (also known as the naturalWidth and naturalHeight properties) can be accessed.

Corrections and suggestions are gladly welcome.

Being understood

(This is an extended version of the minispeech I gave at BarCampLondon2, “Being understood”, and here are the slides just in case you’re willing to see some bullet points goodness).

We are failing to make ourselves understood. We can be speaking the same language as our listeners and failing miserably in communicating even simple concepts properly.

I’ll show you a couple of real life examples, taken from a web design and development forum:

  1. Thread A: New website by xyz.
    When approaching a new website by xyz announcement, different people pay attention to different stuff. Designers which need to work with HTML tend to focus only on the design and the flashiness of the end result. On the other hand, developers and people which are really involved with the bare bones web tend to look minuciously at the implementation details and the use of technology, kind of ignoring the end users of the websites.Hence, you get answers like these ones:

    • Designer: it’s so cool! I like the design!
    • Concerned-with-standards person: it sucks! they use tables and it is not valid! they should use layers and CSS only!

    In truth, that website was visually great but the implementation was a terrible abomination.

    Normally there are lots of lurkers in the forums and they tend to read way more than they write. Occasionally, someone which is just starting in web development read this thread and got confusing information, which led to the next thread:

  2. Thread B: Help with a CSS design!!!
    I’m trying to do a CSS-with-layers-only design but I’m stuck on something. I’d like to show a list of prices, it should be something like this:

    LOREM IPSUM
    Dolor 10
    Amet 12

    I thought of solving it with something like this:

    <div class="table">
    	<div class="first_cell">
    		<div class="blue_3px_border">
    			LOREM
    		</div>
    		<div class="blue_3px_border">
    			IPSUM
    		</div>
    	</div>
    	<div class="row">
    		<div class="value">
    			Dolor
    		</div>
    		<div class="value">
    			10
    		</div>
    	</div>
    	<div class="row">
    		<div class="value">
    			Amet
    		</div>
    		<div class="value">
    			12
    		</div>
    	</div>
    </div>

    … but I’m having some problems for getting it all well aligned…

    Obviously someone got terribly confused here. There are real examples, like the main page of any forum using phorum’s default skin, which is built using div’s instead of using a table for what is a good table use.

And then we also have the magic word: accessible. That word. Each time it’s used nobody gets its meaning right. You can find discussions like this one:

  • this site is not accessible
  • … but I can access the site, what’s wrong with it?

… which should start ringing all the bells in our brains but instead of stopping and trying to clarify things before it’s too late, we just contribute to increase the uncertainty and fear with more misunderstandings, like for example these ones which are very common:

  • cookies will steal all the data from your computer
  • javascript will steal and publish your compromised pictures in flickr
    • and tag them
    • and geotag them
    • and send an e-mail to all your friends
    • ok, just joking!

There are multiple sources of confusion for each person, even technically savvy ones. While browsing any website, we get bombarded with lots of acronyms and terms which not only can be completely unknown to us but also increase the probabilities of misunderstanding the rest of the content, because we get confused and our brain is still trying to figure out what those terms mean. Think of things like:

  • RSS
  • CC
  • XFN
  • ATOM
  • Tag cloud
  • XML
  • AJAX
  • Web 2.0
  • W3C
  • WSG
  • WAI
  • etc

Is this something to worry about? I would say definitely YES, specially if we look at some absolutely subjective facts that I’ve come up with:

  • Only 5% of sites do not make my eyes bleed when looking at their source code
  • 60% of people claiming they follow standards do not really understand what it means
  • Is the result of trying to follow standards worse than a step backwards? Look at all the cases of:
    • divitis < div class=”table”>< /div>, because someone understood he should just use div’s in a tableless design
    • classitis < h2 class=”title02″> < /h2>, < div class=”h2″> </div>, because people don’t understand html semantics nor css really
    • self proclaimed “valid html generators” CMS’s and alike, e.g. Joomla!/Mambo, Postnuke, vBulletin, phpBB, subdreamer, etc – the default template from each one of them may pass an automated test but it’s not “valid HTML”, and not semantic HTML either (which I believe is way more important than passing an automated test). Unfortunately, people with limited technology knowledge may choose one of these believing they are doing the right thing, thus contributing to the global disaster.
  • W3c icons are perverted. Most of the times you find them in sites generated with the aforementioned CMS’s, when not in governmental websites, and a simple test shows zillions of errors, which creates these two feelings amongst concerned users:
    • they are kind of useless
    • they guarentee nothing

    Ultimately, non-technology people do not have a clue about the meaning of those icons, which are part of the confusing elements I referred to before

So what can we do?

I think we, as technologists, need to take a different approach. Although we are responsible for building the www, it’s not us who are going to use it most of the times. Common people are going to enter the content, to play with the systems, to use them, and maybe extend them. If we don’t make ourselves understood and aren’t able to educate them on how to do things properly, we are failing.

We need to think out of the box, putting ourselves in their place, and trying to understand their goals and concerns. And while some of their concerns may look ridiculous to our eyes, we must be patient and not overreact. It’s like the “THIS SITE SUCKS” response to a posting in a forum. It doesn’t help, it’s not constructive, and just produces frustration.

But convincing people to use something abstract is very, very hard. Nobody’s going to take your new and shiny standards-based approach if they have something which works for them and you just have philosophy and words theorising about the benefits of standards and all that stuff. You need to demonstrate movement: be an early adopter, stop theorising and start building practical solutions right now. Show real applications of standards which give real advantage over the old practices.

(Obviously, you’ll need to assume risks but that’s part of the game.)

Finally, the most important rule of all is: be accessible – yes, YOU! Do not scare people away with a cloud of meaningless (for them) words when they come to you, and speak their language, not yours.

————————————————–

Some context:

This was inspired by an article which Ricardo wrote, “The accessibility is inaccessible”. After lots of comments and the discussion which followed outside the blog comments, and reaching a point in which I was almost getting angry I realised there was something very wrong about the whole discussion, and the “Think outside the box” sentence made me understand why me and the rest of the people which was against Ricardo had got it wrong, because we were failing to think in “non developer terms”. Extrapolate it a bit more and you’ve got a fantastic source for a BarCamp talk :-)