Last week Google announced they are phasing out support of IE6. This follows the attacks to gmail accounts of Human Rights Activists originated in China, apparently consequence of a security flaw in IE.

Even before Google, the German government decided to advice against the use of IE6 and a the French government followed. The UK hasn’t joined yet bt there is a petition to discourage an discontinue the use of IE6.

Web developers consistently dislike IE6 for its many bugs, it’s lack of technology even for the date when it was launched but mostly because 9 years down the line even the best browser on earth should have long been retired. For a web developer, dealing with IE6 has been a major pain for years and it’s a source of frustration that great technology is deterred by having to support an ancient browser.

IE6 is not dead yet, but it’s terminal. Without Google support, with governments advocating against, with awareness spreading it is a matter of time, and not much of it, for IE6 to be largely abandoned.

Yay! We web developers applaud!

Now, how about the users? The user that has been using the same browser that came with their computer when it was bought. The user who has never upgraded software before and is afraid to start doing it. The user that is used to its piece of software and doesn’t want to change.

Do they have to upgrade just because some developers say so? Should they applaud too?

Ultimately, developers and users have a common objective: An open, accessible and usable web, so if we can applaud as informed developers the only thing that could prevent the user from applauding is the information itself.

IE6 has been around since 2001. If you consider that the web itself had only come to life in the early 90ies, this is as modern for web years as a car from the 50ties for the history of automobiles. For as lovely as 50ies models may be it’s hardly reasonable to argue that our streets and roads have to be build with these cars in mind.

Yes, some people still driving today learned to drive in those models and it may also be true that if roads had been build encouraging them to keep these cars, by now they’d be struggling to accept a more modern model and they’d be upset if they were now told by engineers that their cars are too big, consume to much petrol, emit too much carbon, are accident prone and overly not suitable for modern city life.

And rightly so because engineers would had failed to make the transition smooth but not necessarily because they should be entitled to drive anything they’d fancy on the streets.

A system chosen from the combinatory explosion of different browsers, different operating systems and different hardware(*) should ideally be tailored to the user’s needs and reflect their preferences on how to interact with the web and in this sense, it’s only fair that we, as developers, build a web the users can, though the technology they’ve chosen, reassemble the pieces in the way that suit them best.

In practice, many of the systems the users have are not built this way but instead are commodities and so are guided by price and availability.

It may well be that us, developers, had failed to make this transition smooth during the years. It may also be that the browser wars and Microsoft being next to a monopoly for many years had left us in a situation where not much could have been done other than support IE6 for so long.

But surely this is not to say a browser that is used by a minority of people that find challenging to update software should be artificially maintained in detriment of being able to fully use technology that may help people who are challenged in ways that are more difficult to overcome (e.g., physical and cognitive impairments).

If IE6 users mostly use that browser because it’s available to them, then is up to developers (web developers, browser developers and other developers alike) to make available for them better technology and allow them to change their game. And we should do it in the most helpful way we can but we should not feel forced to support old technology cluttering the roads for the fear of upgrading. Is the fear that must be removed, not the upgrade.

And if we are to learn something from the last decade of web and browser development, then I’d say it should be to work on educate and help users to continuously move forward to better technology rather to artificially maintain a fairy tale with chewing gum and strings.

Will this number increase in the future? Should we still concern about low resolutions? What is The ultimate answer to screen resolutions for web design?

I really don’t think the ultimate answer for screen resolutions is a number, no matter what the number is. I think the answer is a process by which websites are developed.

The solution for the screen resolutions on the web lies in a process, not in a number.

Smaller screens at sight in the future (and present)

First of all, as technology evolves not only computer monitors get higher resolutions, but also with a web enabled portable devices with much lower resolutions than normal computers. iPod and iPhone are a huge success and they are web enabled, but Apple is not pioneer on this nor will be the last to provides with this technology.

Mobile web is just starting and sites prepared for it would be on the heart of mobile web users, those who are not, will have to run after when they are already outdated, the mediocre middle, as Seth Godin says. People who are waiting mobile web to be a reality before they start to invest on it are really choosing poorly.

Not everyone maximizes

Just because monitors get bigger and bigger, and resolutions increase, it doesn’t mean users are willing to let sites they browse use their whole window. People may like to watch movies in full screen mode, but that doesn’t mean they’d like to surf the web like that.

In fact, many things done on the web require the user to interact with other programs or features that require monitor space, so even if a user has a high resolution, it doesn’t mean the browser will profit of that.

• A user following a computer tutorial or reading instructions, it would be nice to be able to put the browser window side by side with the window in which she will perform the described activities.
• Modern browsers often allow for a sidebar to display bookmarks or history, they also allow for extra toolbars to be added

And what if a visitor has a really high resolution

As designers we are always struggling with the lack of space, but there is the opposite situation, say a site works well on all sorts of standard resolutions and then comes someone with a maximized browser on a really high resolution display, what kind of response will your site have. Will it become just a little vertical strip with very tiny characters in the middle of the browser?

I think we could do better than that!

Thoughts towards an answer

I think that the ultimate answer to screen resolutions is that we will have to face diversity. Diversity of screen sizes, diversity of bandwidth, diversity of processing capacities, diversity of configurations.

Facing this diversity is the great challenge for web designers in the years to come. Allow your layout to use as much as possible of the user screen, but allow it to fit on small resolutions as well. Don’t try to decide everything to a pixel precision standard.

As resolutions increase, pixels shrink and so do characters.

By the way, why pixel precision? Why not turning to em-precision? Why not turning to elastic layouts to allow for text increase? As resolutions increase, the pixel size shrinks and in a pixel-precision site that means smaller characters. Why not let the em element rule your layout and allow the user to increase the font size and hence the character resolution, allowing for a more comfortable reading.

And why not use Javacript in our favor to allow for settings detection and switch layout accordigly.

The correct place for a   is, for instance, in “Mr. Smith”. The   will avoid a line break between Mr. and Smith, while leaving a space between them.

The non-breaking space earned its fame because in the dark days of the table layouts people needed to put content on certain elements without visual rendering.

As the normal space is discarded by the browser in most situations an entity like the non-braking space, which is always considered and yet has no shape was very welcome to leave a gutter.

Yet, the   should not be used to leave gutters. While it is quick and easy to put them, is really a nightmare to upgrade, because markup and presentation are all mixed. The role of the non-breaking space is actually to bind things together and not so separate them.

Put the flour on the table, open a hole, pour water, add yeast, oops… spilled on the floor. No problem, let’s put it away and make some more.

…for this dish, let’s put this on a big pan, while we cook that on the small one. Chop this, chop that, use your hands, wonderful!

Have you ever thought how much things have to be cleaned after a show with the naked chef? Certainly enough to make even the bravest chefs think twice before starting. But, if you really want to cook great food, you must dirt some pans and dishes.

I think the web is still very young and browser support is still somewhat lousy. There is particularly one, the major one, you-know-who, that one used by the vast majority of people, that is even worse.

Although you-know-who is believed to be the great villain in this milieu, the truth is that there are incompatibilities and lack of support in other browsers, but designing for any one of them is like starting to cook thinking on cleaning the dishes.

I think Web design must start on standards and then gracefully degrade to whatever capabilities today’s browsers have. If you don’t, maybe you can cook the macaroni and cheese, but you will never reach gourmet cuisine.

I have just finished reading Transcending CSS by Andy Clarke, one of the best readings I had so far on Web-related matters.

The book does assume you know a good amount of CSS, not a single paragraph is spent explaining how selectors and rules work, so it is not suitable for beginners keen to wet their feet on the waters of CSS. Yet, as the most part of the book is not quite technical, it also doesn’t requires you to be a CSS wizard.

Transcending CSS, as the title properly says, is not about CSS, it is about going beyond, it is about Web Design, a term that is in everybody’s mouth, but not necessarily in a meaningful way. It is about getting to the end of the road and start paving where Web Design will follow in the future.

The Web is not much older than a decade and yet its impact on the world as we see it has been so profound that the complexity it acquired requires all talents that can be gathered.

Programmers, designers, marketeers, writers, editors, photographers, visual artists, businessmen. All of them have niches on the web world, or the web industry, as you prefer regard it.

In many ways, Web Design is like Industrial Design. Both aggregate a lot of expertise areas, both have a design aspect, a technical aspect and a commercial aspect, but more deeply, neither one fit well in any of the areas that compose them.

You can’t just have a generic designer to handle the complexity of Industrial Design. Producing pieces to be produced and sold in great scales is a task that transcends design itself. You can’t have just a businessman or an engineer either.

Cars, chairs, refrigerators, sanitary pieces, kitchen cabinets, pens, computer monitors, cigarette boxes. All those things may seem very different, but they have something in common.

Despite the different designs, uses and technologies involved, all of them share the same strategic concerns: the optimization of the process, a broad market as a target, two perfectly separated parts of the process that are the design, and the production.

Even being Industrial Design a gather of different areas of knowledge for a specific purpose (eg. Producing objects in series and great amounts) it has emerged to become a discipline on its own right.

An Industrial Designer, being trained in so many different areas related to the same process, creates a synergy you won’t have by just joining an expert from each area.

The synergy of being able to make links between several different areas in a single mind is what creates this kind of Transcendency and eventually a new area is created to allow it to become mainstream.

This is how Quantum Computing was created (that is, if we can say it actually exists). You don’t create Quantum Computing by joining a Physicist and a Computer Scientist, you need to combine both on a single mind and this was also true for Industrial Design and, well, Web Design.

As well as Industrial Design, Web Design spans over many knowledge areas, but putting together a programmer, a designer and a businessman won’t just create the web, nor will make it walk huge steps.

Tim Berners-Lee, father of the World Wide Web and originally a Physicist, had this kind of synergy in order to transcend like this, but it was necessary to have a lot more people to take the web where it is today. While he is the inventor of the World Wide Web concept, the web as we know it is the effort and vision of many men and women.

Unhappily, many people (I’d dare to say most) who develop for the web are falling behind. They feel and act like the goal is to know what is around and to develop towards the standards already set. Some even feel their niche lays on an intermediate quality of the wide range living today in the web.

Anyone who thinks like this is already obsolete! It is possible to have a career on the web for some time, but soon will be just lost. It will be like trying to be a typewriter repairman today: nothing shameful, but very hard to make a living out of it.

I don’t know exactly where the web is going, nobody knows for sure, but one thing is certain: in just a couple of years, it will be nothing like it is today and nobody will be able to stand proud and well with just what is known right now.

Good Web Designers today are people who come from different areas of knowledge and, out of passion, have spanned over others to work on this thing we call Web Design, but there is still a long path ahead.

If you go to your favorite bookstore, does it have a Web Section? Frequently there isn’t anything more specific than Computers & Internet Category.

I wonder why not having a “Design and Internet” category, a “Business and Internet” category or even an “Arts and Internet” category.

Almost every skill around Web is borrowed from a different area, but still, there are contexts in which its best classification is Web related.

Web Design has to (and will) establish itself as a discipline on its own right, it will be taught in universities and will have an area on bookstores, just like Industrial Design has.

Relating Web Design to computers is becoming as silly as relating any other area. Many business today live only in an electronic form and still, would sound silly to see marketing books on the computer section side by side with C and Java books. Just because the web only exists inside computers it doesn’t mean that Web Design books properly share a shelf with them.

The Web is a broader concept now, and it will become even broader in the future, it must not be confused with the technologies it relies upon.

Transcending CSS, by Andy Clarke is one of these books that just don’t properly fit in any of these bookshelves of today. It is a book about understanding the web in a broader, not necessarily technical, way and push you to think about the future Web Designers are creating for this new discipline as we speak, and to contribute to build it.

Andy Clarke’s work is a textbook for this Web Design discipline that, despite the importance that it already has in the world as we see it, it is still in its early days. It may seem Madness, but is actually One Step Beyond.

Get it from Amazon

• Paperback: 384 pages
• Publisher: New Riders Press; 1 edition (November 15, 2006)
• Language: English
• ISBN-10: 0321410971
• ISBN-13: 978-0321410979
]]> http://www.z-oc.com/blog/2007/07/transcending-css-the-fine-art-of-web-design/feed/ 3 http://www.z-oc.com/blog/2007/06/internet-explorer-deserves-graceful-degradation-but-nothing-more/ http://www.z-oc.com/blog/2007/06/internet-explorer-deserves-graceful-degradation-but-nothing-more/#comments Sun, 10 Jun 2007 14:26:36 +0000 guioconnor http://www.z-oc.com/blog/2007/06/internet-explorer-deserves-graceful-degradation-but-nothing-more/ I think most good web developers know how a bad browser Internet Explorer is.

Web development has an inherent difficulty because code you write is only an outline of what you want done, an intention. Is really up to the browser what is actually going to happen.

Some browsers don’t support some features and web developers should treat this with graceful degradation. Explorer is no exception.

One of the beauties of the web is that the user is in control. Browser choice and options are there to ensure that and sites should support that.

As a web publisher one want primarily to deliver information to public, not layout. The layout is support, meant to enhance the usability of the page. Not only for eye pleasure and reinforce brand indentity.


The user should be in control

As different needs arise, the user may chose to display things in different ways and a good browser should allow them to do it.

So should the web site, this is only possible if content and presentation are well separated.

A good presentational style must, besides allowing the user to change settings on the browser, allow a page to display correctly in different browsers of different versions.

This doesn’t mean a page has to actually look and behave the same in all possible configurations, unless you really want it.

As new versions of browsers appear, improved CSS features are implemented and developers can put their hands on more tools to make better sites and a better web. In order to do that, older browsers grow obsolete.

Because a page strongly relies on the browser, it is not a good idea to build pages that only work on the state-of-the-art browsers and brake elsewhere, but because people are free to chose the browser they want, one should consider this people as public as well.

We have to move forward and use handful and beautiful resources on the web, but we can’t afford to let the site break on less capable browsers. Instead, graceful degradation should be considered, so a page can work on less capable browsers with reduced features, but without breaking.

Should the page look identical on all browser on earth?

Coke and Pepsi come in several sizes and shapes without breaking identity, why should all sites look identical in every possible browser and version.

A page will only look and behave identically in all kinds and versions of browsers if is very simple one. We really need to consider on each case if this is really necessary.

There must be a hundred lousy browsers out there that we never even hear about, and mostly, wed developers don’t care about them, because it is their responsibility to implement the right features and provide gracefull degradation for the ones they don’t.

Treating such browsers as a first class citizens and limiting work by them will only limit the growth of nice work on the web.

Furthermore, will any state-of-the-art browser development team care to implement more advanced features of CSS 2.1 and CSS 3.0 if they think nobody is going to use them? I guess they’ll turn their attention to something else.

The widespread unuse of advanced features prevents the web from advance further, even on the best browsers around.

Gracefully degrade in all cases, no exceptions

Among theses hundreds of lousy browsers there is one that is known for everyone and his brother: Internet Explorer.

Internet Explorer is not only very limited in CSS features, but also, has bugs galore on the ones that are implemented.

But the real problem is that IE is used by an obscene amount of people, that are unaware of the massive amount of problems this browser causes.

If you tell unaware IE users about it, it is very likely that they say: “well, it works just fine for me!”. And it does! Because any conscious web developer knows these users can’t be ignored.

In the last years, however, microsoft has lost some strength.

Microsoft is still a massive power driving our geeky world, but Google and Apple have taken a good slice of its domain and several not-so-big projects gained notoriety among people on certain niches.

I don’t think Microsoft is going to ever get out of business, not in my lifetime anyway, but I think is time to consider IE as, just another piece of lousy software, and start to move forward faster and don’t wait microsoft blessing to use advanced CSS features.

It is still necessary to care for IE users and workarounds should be enforced.

But keeping brilliant people on the web development industry spending time to fully support IE6 (and bugs remaining in IE7, for that matter) is just a waste of precious possibilities of improovement on the web.

Treat unsupported and broken stuff with graceful degradation, instead of hacks and tricks.

It doesn’t seem that there is anything that can be done to make Microsoft work on behalf of community and stop trying to take over the world and impose their sub-optimal standards.

But I think is time to gradually move to treat IE bugs as cases for graceful degradation, and let them fall behind and live into obsolescency, just like happened with IE for MacOS, that failed miserably because very few Mac users would stick to this idea.

Perhaps the next time you tell a friend how much IE sucks, she will tell you:

You may be right, my favourite page looks gorgeous on other browsers”.

]]> http://www.z-oc.com/blog/2007/06/internet-explorer-deserves-graceful-degradation-but-nothing-more/feed/ 0 http://www.z-oc.com/blog/2007/03/paulo-gazela-site-design-by-guilherme/ http://www.z-oc.com/blog/2007/03/paulo-gazela-site-design-by-guilherme/#comments Mon, 19 Mar 2007 13:38:08 +0000 guioconnor http://www.z-oc.com/blog/2007/03/paulo-gazela-site-design-by-guilherme/ Paulo Gazela is a talented musician living in Campinas, Brazil. He sings, plays the harmonica and composes for several musical projects he runs, mostly on Blues.

He has a very rich experience playing with leading musicians like Brazil-wide famous Flavio Guimarães, harmonica player of Blues Etílicos and American harmonica player R.J. Mischo.


Also, Paulo Gazela happens to be an old friend if mine, and I was seriously honored when he chose me to rebuild his whole site from the scratch.

Building Paulo Gazela’s website was one of my greatest experiences on web design because, side by side with being a very demanding and important client, he is a very conscient one and because he has picked me in confidence, he left me do my job with plenty freedom.

I had the chance to do a site in a way that most clients wouldn’t allow me. I started by gathering all the data we needed for the project and I build an HTML only page, with no presentation at all. I explained him that “content is king” and “presentation is support” and we should start on content instead of presentation.

So, we worked all the way up from the content to the presentation and the he told me.

I was very confused at first, how is possible to build a site without thinking on the layout first, but as we went through the process, now I just can’t imagine how is possible to do it otherwise.

My point is, desing is support,. no matter how much a designer like his stuff. Doing layout before content is like spicing food before having the main ingredients.

On the presentation side, the graphic stuff, what he told me:

I am a bluesman, a great number of my influences come from black people who lived a century ago and worked on the cotton fields in the southern USA. I like them and respect them very much, but I am not a black man who ever worked on a cotton field.

My music is filled with those elements, but is also modern and current, I live and work on the 21st century, and my site should reflect this. It has to be a modern page that incorporates a some elements of the past.

So, the layout is very modern, and the pictures I took are of his real instruments, is what he uses to play. I think it ended up like a nice encounter of old and new, just like his music is.

And don’t forget to download the mp3′s on the sidebar and listen to then!

]]> http://www.z-oc.com/blog/2007/03/paulo-gazela-site-design-by-guilherme/feed/ 5 http://www.z-oc.com/blog/2007/02/multilayered-web-layouts/ http://www.z-oc.com/blog/2007/02/multilayered-web-layouts/#comments Sun, 25 Feb 2007 03:13:47 +0000 guioconnor http://www.z-oc.com/blog/?p=34 A few weeks ago I came up with the idea of having a web page with images composed of multiple layers and the layers could move differently when the object is resized.

And here it is.

Of course we all see web 2.0 pages with a lot of resizable and draggable menus, images and all imaginable things, but I decided to do it very clean and very easy to understand, after all is just a proof of concept.

So, I made 3 gifs with transparency and layered one on top of the other with some CSS and made it so that when you resize your browser window, the image resizes and shows a multilayered move effect.

The use of a technique that allows cool effects while the page is being resized is certainly of limited use (while, not completely useless) .

However, the real power of this technique lies on the fact that the technique could be applied to any HTML element that resizes, and beyond, with simple adaptations you could move the layers when mouse eventa occur. If you have seen script.aculo.us or any other library of the kind you know what I mean.

To accomplish this, I only needed this HTML

<div id="out">

  <div id="in">

    <h1><span>Sky</span></h1>

  </div>

</div>

and this css

#out {
  height: 40%;
  background: #9cf url(out.gif) top left;
}
#in {
  height: 100%;
  background: transparent url(in.gif) center;
}

h1 {
  height: 100%;
  background: transparent url(h1.gif) bottom right;
}

h1 span {
  display: none;
}

]]> http://www.z-oc.com/blog/2007/02/multilayered-web-layouts/feed/ 3