How best to teach web design?

How best to teach web design?

Summary: As a web designer and teacher, I am in a perpetual quandry about how best to teach web design. Do you throw students in the deep end by introducing them to hand-coding graphic mockups with HTML & CSS?


As a web designer and teacher, I am in a perpetual quandry about how best to teach web design.

Do you throw students in the deep end by introducing them to hand-coding graphic mockups with HTML & CSS? Or do you gently lower them into the warm waters of a WordPress installation and tinkering around with themes?

A large amount depends on who your students are. Neil from Beam Twenty3 teaches graphics/web design to 16-18 year olds, and he has taken the Adobe Flash route, as his priority is teaching the visual design process.

I have started web design workshops teaching artists who want a web site they can update easily, so I've chosen to use the WordPress publishing platform.

There is another route, which is a WYSIWYG HTML/CSS editor, in the glorious tradition of Adobe G oLive and Dreamweaver. The idea is that the user can design, build and maintain a static website without any knowledge of coding.

BlueGriffon is the new Free Software player in this market, arising from the ashes of Nvu, authored by the same chap Daniel Glazman.

BlueGriffon screenshot
Screenshot of BlueGriffon

There are some very interesting aspects to BlueGriffon: the fact that it's built on the Firefox web rendering engine Gecko, that it uses commercial add-ons to generate income, and that it's available for Mac, Windows and Linux.

Despite it's polished interface and cross-platform compatibility, I am still unsure as to how useful a WYSIWYG HTML editor really is.

If you want to keep a website up-to-date, then surely a CMS such as WordPress, Drupal or Joomla! would be your best option?

If you want to learn the web design process, then surely you're better of learning a vector illustration package like Inkscape and how to hand-code HTML & CSS (and, to be honest, JavaScript) using a text editor such as Notepad++ or Geany?

Where I can see a place for a WYSIWYG editor is to allow people to create cleanly formatted content for the web. For too many years, Microsoft Word has wasted hours in the struggle to copy and paste content onto a website.

Personally, I use Markdown, a lightweight markup language. But this requires translation into HTML using a converter such as Showdown and still requires a bit of learning.

Maybe if people started creating documents for the web in BlueGriffon rather than Word? Or if BlueGriffon could act as a WYSIWYG interface to common CMSes, along the lines of TinyMCE but on the users own computer? Imagine that, a word processor that processes words without adding buckets of gunk!

Topic: Software Development

Jake Rayson

About Jake Rayson

A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text.

As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.


Log in or register to join the discussion
  • Why not do both? That's what I did to learn web design. Surely your students will benefit by introducing them to both hand-coding graphic mockups with HTML & CSS and getting them to have a tinker with a WordPress installation.
  • I learned designing PSD web design layouts first and then eventually learned how to code them for various platforms and CMS =).
  • @cheapwebdesign: "Why not do both?"
    Time! If only I had the time to teach both. With a one day workshop, it seems to be much more about getting something out of the door.

    @Lex Koff: Same here, I learnt the graphic design first and the coding after. A good idea if you want front-end developers with a knowledge of design too.
    Jake Rayson
  • We created a 12-week curriculum for high school teachers to teach introductory web design to their students. We believed then - as we do now - that the best way to learn web design is to first learn hand-coding XHTML and CSS with a basic text editor, such as Notepad.

    Once the student has a solid understanding of how the underlying code works, they can proceed to explore tools such as Dreamweaver and platforms such as WordPress. But they will always have an appreciation of how a website really works.


    The Team
    Lesson Plans
  • from scratch only

    I know this is an old post, but I had to add my two cents. The only way to go is to teach hand coded design from scratch. That is the only way students will grasp a PROPER knowledge of why and how things are done. WYSIWYG editors write bloat-code, and add other markup that make it hard for the beginner to understand what is happening in the code.

    It is obvious that a CMS is not the way to go either, since the attrition rate for Wordpress users is phenomenal, Making it a poor choice for beginners trying to understand anything.
    Chris Weiss