You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Apr 29

Teach the web right

2009 at 01.12 pm posted by Veerle Pieters

You could say that I’ve been around in this industry, but after all this years it still amazes me that certain aspects still are used like way back in the 90’s. I’m pointing my finger towards Flash now. For example, this week I received a request to link to a site that sells Flash templates.

First some background

The two events that trigged this post are that Flash template shop and a site that promotes a cool initiative in Kortrijk (Belgian city) where they we will use small spaces of land in the city that have been neglected and turn them into a nicely designed garden by well-known landscape architects. If one of those spaces disappears due to a project, the garden moves to somewhere else in the city. A very cool way to make a city and its hidden and neglected places more attractive. When I saw an article about it, my interest was big enough to check out the website for more info. The project is called 'Secret Gardens' (In Dutch sorry). My enthusiasm was quickly cooled down when I saw that this site was completely built in Flash, and for what? This site serves as a perfect example of wrong usage of technology. Most content is just text and it completely breaks the user experience by hijacking the browser's scrollbar so that my scroll wheel doesn't work anymore and I have to use that green Flash scrollbar instead. IMHO there is nothing in this site that warrants the usage of Flash. I thought we would have been evolved past this point by now.

Education

Big part of the problem I believe lies in the education that students receive. I am pretty sure that some teachers still preach that it is ok to design a site in Flash. Don't get me wrong, it is, but only when the project warrants it and it adds to user experience. I've talked about this before. Recently I also saw two examples of the poor state of web design education here in Belgium. Both are examples of people that teach in higher education. It saddens me to see things like: double 'id's', using left and right in 'id' naming, a link around a heading instead of inside, leaving the title element empty, no doctype, rather unstructured than structured, using double breaks instead of paragraphs, etc. I spotted a lot of inline styling which is a sign of sloppiness (when there is a external stylesheet), but if you start using wrong inline styling, it's even worse. I mean, what the hell is this? <div id="navtext" style="height:12px;" height="12"/>. These people are experts according to their colleagues and students, sigh. I'm not trying to be an elitist here, but those people shape the future generation, so I believe it is needed to be extra picky on them.

Teach it right by using the available resources

There was a time that there weren't any centralised resources around. Those days are gone and with a little effort you can use these in class without any additional cost. I'm hoping that this post will contribute and spread the news that there ARE resources out there to help teachers use best practices.

Opera Web Standards Curriculum

The Opera guys did a super job by creating the Opera Web Standards Curriculum. This tutorial course takes students from complete beginner to having a solid grounding in standards-based Web design, including HTML, CSS, and JavaScript development. The course is supported by top companies and organizations such as the Web Standards Project (WaSP) and Yahoo!.

Split into more than 50 focused articles, students can follow the curriculum from start to finish or simply read articles that interest them the most. Each article contains essential theory, practical examples, and exercise questions. The first 41 articles are now published, and roughly ten ones covering JavaScript basics will follow ASAP, to complete the course.

WaSP InterAct Curriculum

The next resource was launched not so long ago during SXSWi. The WaSP InterAct Curriculum is an initiative that aims to unite industry, educators, and practitioners with one common goal: to improve the quality of education that the next generation of web professionals have available to them. It is a framework that tries to bring Web standards and best practices to educators and students worldwide. They set this up because they know how difficult it is — as a full-time educator — to remain current in this rapidly changing field. It has a set of courses divided into 6 disciplines:

  1. Foundations
  2. Front-end Development
  3. Design
  4. User Science
  5. Server-side Development
  6. Professional Practice

If you are an educator you should use these resources as a reference point from which to develop and maintain your courses and programs. Both of these (Opera Web Standards Curriculum and the WaSP InterAct Curriculum) should be required material imho. Of course these are not enough, since the learning process actually never stops. We work in a fast evolving sector so there is a high dosis of passion needed to keep the self education going as well.


35served

gravatar

1

permalink this comment Michael Short Wed Apr 29, 2009 at 01.42 pm

Very good article veerle.  I agree with most of it. although I will say that in ‘some’ places (and please forgive me if I misunderstood here) I feel that using left and right as an id can be helpful, something like <div id=“right-sidebar”> I use things like that frequently mainly because I find it helpful to have descriptions like that.  Other than that I thought you were spot on :-)


gravatar

2

permalink this comment Emanuel Wed Apr 29, 2009 at 01.44 pm

Speaking of things making some sort of comeback: frames.  That is, social media bars like the DiggBar, that bar that Facebook includes when you follow a link from it’s site, etc, which create a frame for the bar, and then use the remainder of the available space for a frame which pulls content from wherever.

Frames weren’t great the first time around, and time has not sweetened their appeal.


gravatar

3

permalink this comment Andy Wed Apr 29, 2009 at 02.14 pm

Your appraisal of flash sites is spot on.

For info, my scroll wheel DOES work in Secret Gardens, I’m using FF3 on Windows XP.

[Veerle: Mine didn’t work in Safari, Opera and FireFox on Mac]


gravatar

4

permalink this comment Tim Kadlec Wed Apr 29, 2009 at 02.45 pm

You are spot on with this. I’ve posted my thoughts on the InterAct Web Curriculum before, and think that adopting it, in addition to Opera’s Curriculum would be a great first step for all educators.

Our industry moves forward so quickly that if educators are serious about providing a solid base for students to grow from, there needs to be a commitment to constant reviewal of their curriculum versus current industry standards. Hopefully the continually evolving InterAct curriculum will provide an ever changing bar by which these educators can measure their curriculum to determine in which areas improvement is needed most.


gravatar

5

permalink this comment Christopher Scott Wed Apr 29, 2009 at 03.03 pm

Veerle, you’re absolutely right. Part of me thinks that a big reason a lot of this is still perpetuated, is because many people (designers, educators, web workers) still consider web design as something separate from the underlying html and css. I think one of the biggest differences between a good web designer, and a great web designer is that they recognize the underlying code - and things like web standards - are just as important (some might say more so) as the layout, typography, and other traditional design elements.


gravatar

6

permalink this comment Andy Wed Apr 29, 2009 at 03.11 pm

I understand your frustration with Flash and the general incompetence in the business, Veerle.

My main irk with flash is that it breaks the browser behaviours. For instance, I can no longer open external links in tabs.

And it’s a darn shame that people don’t seem to know or care about standards and semantics, happily hacking away as it was 1999. 

Rather than calling you an elitist I’d say you are one of the few sensible people around.

(And like the other Andy stated, the mouse wheel works.)


gravatar

7

permalink this comment Eddie Wilson Wed Apr 29, 2009 at 03.11 pm

I am an adjunct professor for Virginia Commonwealth University here in Richmond VA. I teach Web Design 101 in the Mass Communication (Advertising) department and I teach my students what I call “Standards-based web publishing.” I don’t teach IBA banners design, or Jquery animations, or Flash, or any of that. I teach how to “publish” content to the web.

It’s taken me a few years to get a handle on how students consume the course but I find that when I approach it from the “publishing” angle then they view html, flash, graphics, etc as the “tools” not “choices” therefore choosing the best “tool” for a given task.

I have heard from my students that the Design department’s web course teaches mostly flash and I assume this is because Flash gives you the illusion of design control. I do hope that over time I can migrate myself to this department and educate/influence the curriculum.


gravatar

8

permalink this comment Hugh Wed Apr 29, 2009 at 03.22 pm

Good article, having recently finished a degree in Multimedia i would have to agree on the education front. Nearly all the lecturers teaching anything web related were stuck in the early 90’s. Most HTML teaching involved using table-based layout, not really any mention of CSS style sheets, and many of my fellow students relied heavily on creating whole sites in Flash - it’s not their fault really, because they have never had the negative aspects explained to them. In fact, they were more or less encouraged. Only for the fact I had already been working in web design before i started my degree, i would have also been creating website’s solely in flash, and centering them on the page using a table based layout… I propose that lecturers should have a legal requirement to do industry research alongside their teaching, otherwise the teaching becomes pointless…


gravatar

9

permalink this comment Sven Wed Apr 29, 2009 at 03.26 pm

It’s not just the newly taught, it’s people who’ve been in the business for years and years that do these silly things all the time. If you can’t make a splash page under 1 kilobyte without making a bunch of errors, are you really a web developer?

And you can’t really send them back to school, can you? They might learn that what they’re doing is perfectly alright. I have colleagues that have come right out of technical college with degrees in hand, being the most clueless of all about web development.

Only goes to show that education is irrelevant when compared to experience and results.


gravatar

10

permalink this comment James Wed Apr 29, 2009 at 04.01 pm

I have one client (designer) that almost always insists that the site should be done in Flash… I always find it a nice challenge to prove it wrong by doing it using a nice combo of CSS/XHTML and JS for the pretty bits. Just the splash pages the insist on using that drive me crazy… you can only try to educate them so much when they keep your food on the table!


gravatar

11

permalink this comment Jan Vantomme Wed Apr 29, 2009 at 04.09 pm

I teach the basics of web design in higher education here in Belgium and I have to agree that there are problems in design education. One of the biggest problems with our curriculum is that the use of software or technology is not integrated in the design classes. Students are mostly trained as conceptual designers and can get good grades for their design class even when they make something that is technically incorrect.

And this is not only the problem with web design, print design suffers as well. Most students just don’t use the skills they learned in the computer lab for their design classes. The problem also lies with some of the older teachers. Some of them worked in big advertising agencies as art directors for years and they lack computer skills because other people did the design work. These people feel that students don’t need to be able to work with computers because when graduated, they will be famous art directors, win awards, and have other people do the dirty work for them. Life is pretty in utopia…

Passion for the job is definitely something you need as a (web)designer. And computer skills are part of the job, wether you like it or not. The battle for a better design education has only begun and we’ll keep on fighting it…


gravatar

12

permalink this comment Erwin Heiser Wed Apr 29, 2009 at 04.38 pm

Sites like Secret Garden are the worst Flash offenders, namely, sites that look like a bog standard web page but that are rendered completely in Flash, with all the accessiblity and usability problems that entails such an approach.

I have nothing against Flash but I do object to it being used like this. Completely agree with you Veerle :)


gravatar

13

permalink this comment Paul McLaren Wed Apr 29, 2009 at 04.53 pm

Great article Veerle!!

Sites like Secret Garden always put me off, especially if I have to wait more then 10 or 15 secs to view a crappy website!

Also thanks for the great educational links.  We defiantly work in a fast evolving sector and it is sometimes discouraging at how quickly things can change.


gravatar

14

permalink this comment Kelly Wed Apr 29, 2009 at 07.41 pm

THANK YOU. It’s nice to see that I’m not the only person out there that feels, for lack of a better word - inconvenienced - by Flash web sites.

I enjoy Flash and it has it’s place, but I just really do not enjoy entire sites developed in Flash. The usability of the site is probably the worst aspect of all. There are certain places where its use is appropriate, but I honestly feel 98% of the sites out there do NOT need to be entirely built in Flash.


gravatar

15

permalink this comment Amy Wed Apr 29, 2009 at 07.49 pm

I have never heard of the Opera Web Standards Curriculum. That is really cool!

I took Multimedia Production and Design at Selkirk College and I feel that everything that was taught was quite up to snuff with current standards… It was a lot of information to swallow though, so I had to do a lot of my own learning too!


gravatar

16

permalink this comment Marcus Neto Wed Apr 29, 2009 at 09.22 pm

Veerle, your comments are spot on. I do a lot of photography on top of the many other hats that I wear and for some awful reason the photographers website market is rife with flash sites that play music, have small text, and resize my window to max(horrible at 1920x1200). It totally goes against their needs too since most business want to be found and Flash makes their site non-existent to Search Engines… Anyway, I am with you on this one sister…


gravatar

17

permalink this comment Soyek Wed Apr 29, 2009 at 10.00 pm

Hi Veerle :)

I have to agree with You, that the way the Flash has been used on Secret Garden’s site is absolutely pointless. No visual experience, so Flash here is just waste of time.

At least the site is properly embedded, using SWFObject and SWFAddress.
Well… almost, because of this scrollbar You’ve mentioned. Don’t listen to those guys admiting it works - they are “PC”. I can asume You use Mac and here is the problem. Adobe has not yet made an effort to get Flash’s mouseWheel commands to work on Apple’s OS (I’m a Flash designer/dev myself, so I know it well, as every one should). I’ll leave it without comment.
The workaround to use is Pixel Breaker’s SWFMacMouseWheel script and classes. And this is what lacks in site’s embedding and breaks experience even more.

Just wanted to make it clear :)

I’m IT student too and have to say, that my teachers should also read all these resources. State of web design education’s same as in Your country here.

Greetings
P.S. Since it’s my first comment here, let me say Your blog rocks :P


gravatar

18

permalink this comment Pat Wed Apr 29, 2009 at 10.12 pm

I feel exactly the same way about flash. I’ve learned all my coding skills the hard way by being thrown into it and figuring it out for myself.

The design program at my school teaches Flash and Dreamweaver. They do not teach HTML or CSS. The computer science department actually makes you code website with tables and wont let you use javascript libraries in the javascript course. There is no discussion of web standards.

The web isn’t going to get any better because people are teaching it wrong. Great post Veerle.


gravatar

19

permalink this comment Jan Thu Apr 30, 2009 at 10.33 am

Very well said, Veerle!


gravatar

20

permalink this comment Viki Nygaard Thu Apr 30, 2009 at 07.48 pm

Well said, Verlee.  I have found that the vast majority of web designers ignore the most important aspect of design, and that is the customer. 

I agree that many institutions are doing a poor job of teaching design.  I found this out firsthand when I went to school to receive a certificate in web design back in 2000.  I graduated knowing how to use all the popular software, but I learned nothing about usability or marketing. 

Usability *needs* to be first and foremost in every web designer’s mind.  A web design does need to look nice, but something that is simple and easy to use is really what people appreciate most. 

Marketing needs to be taught alongside web design, IMO, because a business web site is a sales tool. What the web site says is just as, if not more, important then what the web site looks like.

There’s so much more to design than turning out something that is visually appealing.  You hit the nail on the head with this post, Verlee.  Good job!


gravatar

21

permalink this comment Ayo Adigun Thu Apr 30, 2009 at 08.20 pm

This is an amazing post! The web needs to learn, and fast Veerle. I think you should have a read of this:

http://blog.ayoadigun.com/2009/04/30/flash-is-crap/

i’m loving the site btw.

Ayo


gravatar

22

permalink this comment Jeroen Haijen Fri May 1, 2009 at 02.52 am

Thanks for the great resources!

To follow up on ticket 11 (Jan Vantomme) which was my teacher two years ago, I totally agree to what he says but with the addition of a side note.

As for technical incompetent teachers, yes there are a few. They grade you on what’s in front of them, so if you can print it out on your Epson… you should never mind cmyk conversion (yes really), never mind bleeds, or real-life press issues. We (of the Graphic Design - Advertising department) never even visited a press company. Unfortunately the technical aspect really gets pushed to the back of the line.

As a student I got to learn a lot of programs and programming languages at school in just 3 years time at a rate of 2 half-a-days a week. The non-technical students (95%) just relied on flash for their web-design or video/animation because of it’s wysiwyg (photoshop-/indesign-like) nature, plus you could rely on it to look the same on all browsers (in the controlled (school) environment). Those basic lessons of html and css never had the chance to give a lot of bricks to build our great designs, ideas and concepts on. Because of the ease-of-use and the reliability most of the students designed in Flash. This creates a (wrong) habit of course! So the design teacher looked at it and graded it on the looks on that machine, that OS in that browser.

As for html/css we only got the basics (too little scheduled time for the computer lab teachers) and what non-technical student really browses to w3c (or even knows what the hell the teacher is talking about)? Let alone checking for compatibility! I even ‘helped’ a lot of other students with their obligated html/css work. (I’m sorry Jan)

I just started working at a firm at the new media/web design department and even I get headaches over ie6 compatibility (or rather acceptability :-)). And it took me some coding in php before I became an authentic purist at heart.

As you say, there isn’t a proper education but the (web-)designers with passion and purity (of lines) will get there eventually. So what really helps finding the yellow brick road for them purists? Blogs, good resources and wake-up calls like yours!

I’m really excited with this css related post as I almost gave up on expecting css articles!

Thanks a lot!


gravatar

23

permalink this comment Gene Fri May 1, 2009 at 11.47 pm

Hi Veerle!  I was wondering if you (or your readers) know of a tutorial / site where one can learn how to take a mockup (Photoshop, for example) and turn it into valid HTML / CSS page.
Thanks for your blog!


gravatar

24

permalink this comment Tony Sat May 2, 2009 at 12.19 am

nicely said. The thing that confuses me most is IE6. I’m about 3/4 of the way through a web development course at my university and when I went on to design a simple bingo app using javascript/html/css, it took me forever to get everything to look correct across firefox, safari, opera and that’s because I gave up trying to conform to ie6 and instead tailored it to ie7 and +.
questions: are there standard (non-messy) hacks to make things look right in ie6 - or by nature are hacks non-standard and messy?
I recently ran across a javascript that pops up a message if the user is trying to access a site using ie6 or lower - and informs them, via popup, that there are newer browsers available. I don’t consider myself an expert on design (by any means), but is this considered bad practice?
I apologize in advance if these questions are elementary.


gravatar

25

permalink this comment Rachel Lehman Sat May 2, 2009 at 12.43 am

You make some excellent points. I think it’s also important for students attending courses in web design, as well as the professors who teach them, to understand that their formal education in web design is just the “basics” and only laying the groundwork of their future career.

Yes, we should avoid teaching them bad habits, but so much of what a student needs to know for web design can’t even fit into a 4-year program (which is probably only 1-2 years of focused study). If they come away from college with the basic ideas, they can begin to learn all the nuances and standards from real experience and industry mentors. This is an industry that changes often and fast, and requires us to be lifelong learners to excel in it.

Lastly, I would add that one benefit of building to a standard that’s often overlooked is that it makes strange quirks, unusual errors and difficult-to-diagnose problems a lot less likely to happen, and the process of coding a page more predictable. So even if you are frustrated with browser compatibility and tired of trying to build standards-compliant pages for non-standards-compliant browsers, there IS still a benefit to following best practices.


gravatar

26

permalink this comment Veerle Pieters Sat May 2, 2009 at 12.21 pm

Tony said:

Are there standard (non-messy) hacks to make things look right in ie6 - or by nature are hacks non-standard and messy?

I wouldn’t use CSS hacks, they should really be avoided if possible. I would suggest using separate CSS stylesheets for IE6, 7 and 8 to address the flaws. Then use conditional comments in your HTML for each one of them.

Gene said:

I was wondering if you (or your readers) know of a tutorial / site where one can learn how to take a mockup (Photoshop, for example) and turn it into valid HTML / CSS page.

I honestly don’t know any tutorials that explain everything from mockup into valid HTML/CSS. I’ve written something in that direction here on my blog, but this was a few years ago. It’s definitely not very up-to-date anymore so definitely not the perfect resource. I did have plans on doing a new one for a while but gave up on that idea, because I simply can’t find the time to do it. I can direct you to Style Master CSS Tutorial to learn the basics of CSS. However, if you are looking for a tutorial that covers all the basics, I think it’s better to resort to books, because it’s just a lot that you need to cover.


gravatar

27

permalink this comment Erwin Heiser Sat May 2, 2009 at 12.46 pm

@Gene: a simple Google search for “PSD to HTML tutorial” turns up several. The one from Nettuts is pretty good.


gravatar

28

permalink this comment Michael Short Sun May 3, 2009 at 12.09 pm

@Gene:  You can go to Css-tricks to find tutorials on this. He does a screen cast that takes you through all the steps.  good luck! :-)


gravatar

29

permalink this comment Julien Mon May 4, 2009 at 11.22 am

Ok, sit down and hold please search some way to tie you down to the chair.

First of all i am not a web pro, that’s not what i am sepcialized in, but i also hate the missuse of Flash every where. And all those fancy bla bla, slowing down my browsering and information search.

But now my sister is a student at Sint Lucas Gent, she studies Multimedia…
They are also learning to script websites…

And now please every one hold your horses!....
This is, step by step, what they learn to do by a so called experd…

Make a design (ok)
- make it in Fireworks
- slice it up
- export it to dreamweaver
- make your links work…
- upload

They also have some strange way of making those links with floating div’s and so on…
When i start talking to her about CSS, there is no sign of life on the other side.
When i start talking to her about PHP, no sign of life…
When i talked about HTML, their a light buld came on, and she said, aah yes we have to change some thing in the title tag :) :p
So this is how they are learning it , to the students, in a 4 year course, full time…
I hope it will change, FAST ... !!!


gravatar

30

permalink this comment Paul McLaren Mon May 4, 2009 at 06.37 pm

When I was in school there was not much talk about web standards.
We were taught how to use Flash, Shockwave, Photoshop and Illustrator.  PHP and MySQL were barely mentioned.  I think the most import thing I learned though was how to program in Action script, Lingo, HTML and Javascript.  Our teachers knew that it was more important that we knew how to hard code a web site using a basic text editor then just using something like Dreamweaver.
Years later that training has helped me to be able to teach myself how to use style sheets, and start programing my websites using Web Standards.  I am also slowly learning PHP and MySQL as well.

When it comes to designing a website in Flash I always ask myself is:  Does this site require Flash?  By using Flash am I adding to the web site or taking away from it?


gravatar

31

permalink this comment sessizsarki Mon May 4, 2009 at 11.29 pm

THANK YOU. It’s nice to see that I’m not the only person out there that feels, for lack of a better word - inconvenienced - by Flash web sites.

I enjoy Flash and it has it’s place, but I just really do not enjoy entire sites developed in Flash. The usability of the site is probably the worst aspect of all. There are certain places where its use is appropriate, but I honestly feel 98% of the sites out there do NOT need to be entirely built in Flash. Thanks.


gravatar

32

permalink this comment Timothy Tue May 5, 2009 at 01.34 pm

I completely agree about the poor use of Flash that is all too common. As well as the poor eduction of web developers.

There is a real problem since, unlike standalone applications, browsers are generous. They will take any code / markup you throw at them and attempt to make sense of it all. Meaning that a lot of people write incorrect code / markup and think that it is correct since the browser displays it as expected.


gravatar

33

permalink this comment An Wed May 6, 2009 at 03.36 am

Amen!

My ultimate test is that if I can’t view the website from my iPhone or if I have to click through multiple splash pages, wait for the flash to load, I will never go to that site again. If I can’t right click and copy text, I will never go to that website again.

Those little things, although so simple, is forgotten. TEXT IS CONTENT! If Netzero is still around, what makes these designers think that they can put up websites that are 100% flash?


gravatar

34

permalink this comment Dawood Wed May 6, 2009 at 08.44 am

That’s strange that they used Flash for a site which could have been easily the Traditional one.

To cut it short as you say Neither did they took the advantage of using Flash , Nor did they thought to utilize simple design in this SEO freak World.

Still Thinking Why… May be flash addiction..



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist