Speak UpA Former Division of UnderConsideration
The Archives, August 2002 – April 2009
advertise @ underconsideration
---Click here for full archive list or browse below
  
Programming

Don’t laugh but I think I’m the only graphic designer on the planet that doesn’t know how to program for the internet. Sure I can slice up a Photoshop file in ImageReady and have it spit out the HTML, and although I’ve achieved respectable results, I feel like it’s cheating. I know some basics but it’s not enough.

When I see a site such as Lars M�ller Publishers or Das Magazin, I wish I knew how to program. Oh the ideas in my head! I’d like to incorporate Flash and HTML, run Moveable Type, use Lasso and FileMaker for web accessible databases, and learn what is so great about XML.

I will read books, maybe take a class, and check out online tutorials. But with all the experience that people participating on Speak Up seem to have with web programming, I thought I would first consult the professionals about their experiences.

Perhaps I’ll find out that my brain might not be not wired for thinking like a programmer, but where should one start?

Maintained through our ADV @ UnderConsideration Program
ENTRY DETAILS
ARCHIVE ID 1378 FILED UNDER Web Trends
PUBLISHED ON Feb.25.2003 BY Kiran Max Weber
WITH COMMENTS
Comments
Darrel’s comment is:

Writing HTML isn't programming. It's marking up. HTML is a markup language, which means you are simply marking up text. Because of that, HTML is pretty easy to learn...and is something you SHOULD learn even if you just make the pretty graphics for a web site.

Then there are scripting languages like Javascript and PHP. These are closer to being programming languages and use many of the same concepts and syntax as a full blown programming language.

Programming is design. You can be as creative as you want with programming. That said, there is a good amount of logic involved to. Lot's of puzzles to solve.

If this is something you want to pursue, start playing with HTML on your own...that's fairly easy, and then maybe enroll in an intro to computer programming class. It only takes one or two classes to get the basic concepts of computer programming down. If you get the hang of that, then it's fairly easy to continue on your own.

On Feb.25.2003 at 04:48 PM
arlo’s comment is:

Filemaker for web databases?

On Feb.25.2003 at 05:00 PM
Kiran Max Weber’s comment is:

The Macintosh Products Guide is a FileMaker driven database. Lasso Professional and Lasso Studio from Blueworld make it happen. You need to

host the FileMaker databases with an ISP that offers FileMaker hosting too.

On Feb.25.2003 at 05:25 PM
Armin’s comment is:

The best way is to just do it�. Seriously, that worked for me very well. I also use Dreamweaver a lot, because it bridges the "visual" gap that HTML lacks. It's very hard to figure what a bunch of tr and td tags are going to look like. Using DW lets me look at the code and the actual layout at the same time, so I can see how changes in the code affect the layout and viceversa. It's pretty much how I learnt english, by watching movies in english with subtitles in spanish.

Do a personal portfolio with certain HTML goals, I was always doing images for text because I was afraid of doing live HTML text, so that could be a goal. Do a form, do a drop down menu. Even if it's not a great piece of art. Go through the Help files. Do tutorials.

One thing I learned at m1, and I say with all respect to my fellow marchFIRSTers, is that HTML programmers would rarely be able to design, but designers can always learn the basics and do HTML. I can feel the evil eyes peering at me right about now.

It's easy to sit here and say it's simple to learn HTML, but with tools like DW and all the tutorials available online it's easier than ever. I highly recommend DW, but... don't let DW drive you, you must drive it. How philosophical.

On Feb.25.2003 at 05:47 PM
pk’s comment is:

Learn to write HTML by hand first, then start using dreamweaver (or whatever, but that's my recommendation). That's the way I learned, and it still serves me. I think i'm the one designer on the planet that finds flash useless.

On Feb.25.2003 at 09:16 PM
mGee’s comment is:

"Don't laugh but I think I'm the only graphic designer on the planet that doesn't know how to program for the internet. Sure I can slice up a Photoshop file in ImageReady and have it spit out the HTML, and although I've achieved respectable results, I feel like it's cheating. I know some basics but it's not enough."

Actually, this isn't true. There are far too many designers that don't know how to code. Have a look around at the many many flash boxes and other "dreamweaver" sliced-up sites around. The problem is instructors who think that the coding and the design aspects of the web should remain seperate for seperate people. So they and re-enforce the use of dreamweaver and flash in order to keep the "designer" "designing" and leave the coding to the "tech" people. Most students do just that.

Fortunately I didn't buy that and have spent the time and energy to learn html and then php/mysql ... or whatever else came up along the way.

It's never too late to learn this stuff. AS I always say... it takes longer to learn to use Dreamweaver than it does to actually learn to code HTML.

Armin:

" I also use Dreamweaver a lot, because it bridges the "visual" gap that HTML lacks."

Sure it does for a while. But with enough practice writing html without dreamweaver.... you CAN visualize those TDs and TRs. I am very adament about not using dreamweaver as it adds much bulk to your code. It really isn't very efficient. I've done tests where I made the same layout in dreamweaver and manually coded... the manually coded had half the code and visually looked the same.

PK:

Agreed... if you are going to use dreamweaver...learn html first. No you aren't the only designer who finds flash useless. Although when I first began web design, I did use it and became very proficient using it.... I realized how very useless it all is and only now use it as elements on a page(as an image would be used), if at all.

Peace

mGee

On Feb.25.2003 at 09:53 PM
Darrel’s comment is:

I wouldn't say flash is useless...just that's it's used in a useless manner 90% of the time. ;o)

On Feb.25.2003 at 10:27 PM
pk’s comment is:

Other thoughts: I usually "sketch" in Dreamweaver first and then hand-code everything afterwards in BBEdit, Dreamweaver gets to make the really nasty tables that I just can't be bothered to make.

As for learning to write HTML, it has tons of other benefits: by looking at the underside of your sites, you begin to understand information architecture and user experience design. It really is the first step of design. Also, you begin to see what should be run with a publishing system, what elements can be uniform, what can be unique, what styles can be common across the entire site. It's really helped me to think in terms of "systems," rather than "pages" and has deeply impacted my document design skills (books, brochures) and package design skills (and by packages I mean identity systems, forms, standards manuals).

On Feb.26.2003 at 01:46 AM
pk’s comment is:

...oh, and the sole reason i detest flash is that it manages to balloon almost every project budget because the designer almost invariably gets confused during construction. It's like having to do IA, design, and HTML production all at the same time with a weird dose of motion design as well. Add all those up and you get an administrative nightmare—it's impossible to break out your budget into stages for the client's comfort levels.

On Feb.26.2003 at 01:49 AM
d’s comment is:

Hey - I'm in agreement with PK, mGee and some of Armin's comments.

I can remember my first web project - and my fear of the unknown. I was told that I could master the basics in less than a day and within a couple, know as much as I needed to know for the job.

I looked at the code of other sites, and sure enough, cutting and pasting it into BBEdit, and playing around with it, I soon had the grasp.

Eventually, about two years ago, I adopted the use of Adobe GoLive into my workflow of managing the sites and client extranet I used to keep, but after a while have ditched it to go back to handwriting it in BBEdit again.

I would strongly recommend learning to code by hand - as someone above said, learning to use a WYSIWYDG (D for don't) editor can take almost as long as learning to write the code yourself.

As a testament to some of the work I did back then, one of my clients was still using the web site design until last year, that I had developed nearly ten years ago. The site was for a local venue for where I lived. It had managed to outlast some dot coms I'd worked on, that had been born and gone bust in that time - spending millions on development.

However - nested tables and client-side image mapping wasn't available then.

As Darrel said - programming can be design, look at Maeda's work at the Medialab. And a friend of mine paints in 3D - which essentially requires a full team of programmers to develop what she paints.

Of course, you can just stick with HTML...

On Feb.26.2003 at 02:15 AM
Darrel’s comment is:

Print designers need to understand ink, printing, and paper, just as web designers need to understand html, browsers, and other technologies.

It's simply understanding the medium.

As for programming, I'd recommend that anyone that has the least bit interest to take an introductory course. It goes a long way towards making working on a web development team a much more collaborative effort (by being able to speak with regards to both the front end and back end design).

The best web developers I've ever met were art students who had a computer science degree.

On Feb.26.2003 at 08:21 AM
Seth Werkheiser’s comment is:

I learned to do websites with one of those HTML for Dummies book (which I've since sold on eBay hehe). I did go through a period where I used Microsoft Frontpage but after awhile I went back to what works - notepad. Coding "by hand" is great.

On Feb.26.2003 at 08:38 AM
Tim’s comment is:

I took a summer course to learn HTML. At the end of the course I was able to hand-code pretty well. After using DW for so long, it was very liberating to be able to open up notepad and go to it. It empowered me to go on to other languages as well. It felt like I had the keys to another world! Yes, sappy, but true.

On Feb.26.2003 at 09:08 AM
Gahlord’s comment is:

Kiran,

Good luck to you! I do both. Lots of people do both. The advice to just do it is the best advice.

Hear are some ideas for you:

Get yourself some cheap web space (if you have trouble finding some, write me and I'll help you out.

Then just start playing. If you are on a Mac here are some tools you will need:

1. BBEdit. Handsdown the best damn text editor in the universe. If you use Dreamweaver BBEdit will be familiar to you as the text editor that is included.

2. Flash. You said you want to do flash right? So you should have it.

3. Photoshop because it's great.

4. Fireworks because, for the web, it's greater.

5. An FTP client (Fetch is great and about 20 bucks).

6. A few web browsers. If you get hardcore into it, you'll have a massive collection of browsers dating back into ancient times. However, for starting just get at least two. One IE and one something-else (Netscape, anything really). Just because the cross-browser thing will be a pain in your side.

7. If you're serious, you need The Worstcase Scenario Browser: NS 4.7 on the PC. Anything that can break _will_ break in PC NS 4.7.

8. If you're doing database stuff, to start get your favorite database program (I like Filemaker, but for our purposes you can even use a spreadsheet like appleworks or excel) and a program called WebMerge (fourthworld.com i think). What you'll do isn't a "live" database, but database-driven publishing. This means if you'll update a database and push a button (or two) to update stuff.

Now that you got all that....

Get a couple reference books to have handy:

1. Flash Bible (you could get a lot of different Flash books, especially the friends of ed stuff, but to start, get the Flash Bible... then expand from there).

2. A good reference on CSS (the one by Harkon is good, but there are others too).

3. Maybe the O'Reilly Javascript book. But if you're doing Flash I bet your uses for javascript will slowly fade into nothingness.

4. Some sort of book to go with your database (if you got a fancy database).

Now, get some coffee or beer or water or whatever.

Now start work:

!!!IMPORTANT!!!!

The following is intended as an exercise in figuring out code. You shouldn't do this and call the design your own or anything, you're just playing with code and learning things. Once you have a better handle of things you'll do your own designs.

1. Find a web site you like that is all/mostly HTML.

2. View source.

3. Copy

4. Paste into BBEdit.

5. Read it. It will look like gobbledy good. But read it anyway. If you're lucky the code has some comments and has nice linebreaks so it's clear. If it doesn't it'll be harder but you'll get the idea.

6. Read it again and see if you can figure out how they put it together.

7. Save the file and upload it to your webserver . Name the file index.html first though.

8. Look at your web site. Lots of stuff will probably be broken. Make new images to go where the broken images are (if there are no broken images you may find a line near the top of the page that says something like "base href" change the info in that area to be your website instead of the site you stole the code from. If all the text is screwy and the layout is completely busted, look for a link to something that ends in .css in the index.html document. Go back to the original site and find the .css document and copy that, save it as Style.css, upload it to your site, change the index.html page so it points at Style.css and you'll be in business.

9. Make new images that will fit in the site layout.

10. Change all the text of the page.

11. If you were lucky enough to pull down a site that uses css, open Style.css and start changing a few things (fonts, background colors, anything). Even if you don't know what it does, mess with it a little (only one thing at a time though).

Once you feel you can tear this page apart and know where things are (better yet, each time you identify something and know what it is in your index.html document, comment it) make a list of the things you learned.

Now, design your own page that uses at least half of the things you learned (that's why you have to make that stupid list).

If you do this two or three times you'll learn alot and in a hurry. Each time you do it, it will be faster.

I strongly advise you to focus on something called "compliant code" and better yet "xhtml 1.0 transitional" code. This will free you from figuring out the damn tables unless you actually need tables. It will make your design process much easier. It will increase the accessibility of your website. The suckers on NS 4.7 PC won't see how pretty your site is, but they will get all the content.

Some sites for you to hang out at:

A List Apart

Glish

And when you get serious about your online typography go to Korpela's Unicode 10646 character finder and Textism

Well that'll get you started in HTML anyway. Once you can do that, post another thingie about dealing with actionscript and I'll blab away about it. Getting from learning HTML to using WebMerge to publish a database will make sense to you once you understand HTML (it's so simple it will make you cry).

Best of luck and fight the good fight. Anyone who tells you a designer can't code or a coder can't design is so full of shit you should just walk away. And then go visit Maeda's site or Golan's site or Yugo Nakamura's site.

g

On Feb.26.2003 at 09:16 AM
Redberger’s comment is:

i think the best way is to learn to handcode your html first before you go the DW path. as the saying goes, know the rules first before you go and break them. Dreamweaver is a powerful tool and gets the job done faster. but it cannot do everything for you...there will be times when you would have to go in there and get your hands wet.

On Feb.26.2003 at 11:28 AM
pk’s comment is:

...oh, and ignore anyone who tells you your online pages won't translate to the audience if they're as detailed as print pages. that's bullshit.

i did an informal study with about 20 non-designer friends to see if web pages really need to be simpler. they almost invariably gravitated towards more print-like typographic treatments because they said 1) they felt more like books and were more comfortable to read, and 2) they felt less like marketing.

On Feb.26.2003 at 11:39 AM
kev’s comment is:

I'd say skip HTML and go straight to XHTML/CSS. CSS is way more important now and actually uses words you can visualize.

Basically XHTML is HTML that uses strict XML markup rules and CSS for styling. It can be very simple or very complex, but no matter how complex it gets, its always easier to figure out and change than Netscape/Tables-bases HTML used to be.

XHTML/CSS seriously cuts down on:

a. Learning curve due to easy implementation and all your styles in one place

b. development time - no more figuring out complex table structures!

c. change time - the client wants the text blue? just change the CSS! Wants the images right-aligned? Simply change one attribute of a class and voila. change made.

On Feb.26.2003 at 11:47 AM
kev’s comment is:

Also.... Ignore anyone's advice about getting Netscape 4.7.. I'd hope if you are a mac user you're using OSX and if not, well then damn. OSX is WAY more web-design friendly as it's almost a server-class UNIX underneath the hood, meaning if you want to learn PHP/ColdFusion/ASP you can install ALL THREE on your MAC now.

But the point is don't let anyone tell you Netscape 4 is a viable browser. DO NOT code for it as it is dead. Over 5 years old. Gone. Kaput. I would code something that looked great everywhere that mattered in 3 days and then spend another 6 getting it to work in NS. Not cost-effective or standards-compliant in any way.

On Feb.26.2003 at 11:53 AM
Su’s comment is:

Just as a note, Kev's point C requires significant pre-thought in the design and (X)HTML/CSS coding to really work that easily.

On Feb.26.2003 at 12:19 PM
Sam’s comment is:

This Color Blender is a sweet little helper from Eric Meyer.

Another way to play with pre-written code (other than source code) is using Movable Type's page templates and various style sheets.

I find it more than a little funny that CSS is the Greatest New Thing in web design and production. All us old Quark users are kind of saying, "Style sheets? Yeah, duh." (Although it's about time Quark and InDesign made style sheets you could apply to lay-out elements like boxes and rules instead of just type.)

On Feb.26.2003 at 12:31 PM
Su’s comment is:

Incidentally, the choice whether to code for N4 or not depends on many factors other than that it simply sucks(which it does). Neither should you listen to anybody who casts blanket condemnation. There are ways to code that will give Netscape no particular consideration, and yet leave the pages presentable in it. And if you put just a little more information into your stylesheets than you might optimally, you can usually force Netscape to apply most of the selectors.

Writing HTML isn't programming...It's marking up....Then there are scripting languages like Javascript and PHP. Programming is design. You can be as creative as you want with programming. That said, there is a good amount of logic involved to. Lot's of puzzles to solve.

Most of this is true. There is also some bullshit hidden in there.

HTML isn't technically programming, no, but the distinctions as listed above are largely made by elitist programmers who don't want to admit that markup can be damn hard, too.

HTML is easy, it really is. Making the browser(s) do what you want with it, on the other hand, can be an enormous pain in the ass. With programming, you write a line, and the result follows from that exactly; anything that goes wrong can be pretty safely guessed as your own mistake somewhere down the line. You have no such guarantee with HTML. In fact, you have as many possible outcomes as there are browser versions, not just browsers.

There is a dangerous inference that can be made from Darrel's assertion that you can be as creative as you want with programming, following from markup not being programming, that HTML lacks in creativity. If you believe that, then you're probably not trying to do anything interesting with it. Just as there are multiple, equally correct ways of doing any given thing in a "proper" programming language, with one or two being considered more elegant, the same applies to markup/stylesheets. If you approach HTML from a creative standpoint, you will find it much more enjoyable, and probably get more interesting results. Want drop-down-style menus but don't know JavaScript(or like me, simply don't want to use it?): It can be done with a little reinterpretation. Create a layout, and then ask yourself how you could build it with the absolute minimum number of table cells, and see what it does to the way you think about the whole thing.

A List Apart, and all the links above are nice initial(and then continuing)resources, but once you get your basics down, if you really want to learn something, find a page you like, or one that does something that just makes you wonder, "How'd they do that?" Then view source, figure it out, and steal it, but only after you understand.

On Feb.26.2003 at 12:39 PM
Su’s comment is:

Funny enough, Kev's home page, which isn't coded in XHTML(?), yet has a couple of Netscape4-friendly, unnecessary attributes in it(?) looks perfectly fine in N4. The images are a shifted a bit, but it's all perfectly usable.

On Feb.26.2003 at 12:55 PM
Darrel’s comment is:

...oh, and ignore anyone who tells you your online pages won't translate to the audience if they're as detailed as print pages. that's bullshit.

As long as you are aware that you need to take in all sorts of different considerations when putting content on paper vs. a web page.

Also.... Ignore anyone's advice about getting Netscape 4.7.

Unless, of course, that advice is based on the user base of a particular site you are working on.

On the plus side, with XHTML/CSS you can easily server up plane-jane content to old browsers.

OSX is WAY more web-design friendly as it's almost a server-class UNIX underneath the hood, meaning if you want to learn PHP/ColdFusion/ASP you can install ALL THREE on your MAC now.

Umm...ASP is only for IIS. You could run it via Chilisoft, or you could run it on VPC.

HTML isn't technically programming, no, but the distinctions as listed above are largely made by elitist programmers who don't want to admit that markup can be damn hard, too.

There's nothing elitist about it. It's just important that one understands the differences.

Hypertext Markup Language is a markup language. Like SGML and TEX and XPress's Style Sheets. HTML can't manipulate data, a basic function of a programming language.

markup can be damn hard, too.

Many times creating structurally correct and symantically meaningful markup can be much harder than programming. Then again, once you get the hang of it, basic programming isn't really that hard either.

There is a dangerous inference that can be made from Darrel's assertion that you can be as creative as you want with programming, following from markup not being programming, that HTML lacks in creativity.

I never said that HTML lacks in creativity. Any design (finding a solution to a problem) requires creativity. Perhaps I did not infer that by not mentioning it. If so, then thanks for bringing it up...it is an important note.

On Feb.26.2003 at 02:06 PM
kev’s comment is:

Couple notes:

1. Yes my site was done before discovery of XHTML. Alternate.org is a better example of mine (still doesnt validate due to posts that were written before the switch)

and

2. I was under the assumption that MOD_ASP would work on more than Windows. Guess not. Sorry for the confusion

On Feb.26.2003 at 02:52 PM
Darrel’s comment is:

Kevin, you are right. I wasn't aware of the Mod_ASP product which looks a lot like Chilisoft...allowing you to run, in this case, ASP.NET on top of Apache.

On Feb.26.2003 at 03:15 PM
Su’s comment is:

I never said that HTML lacks in creativity.

No, you didn't. It's just an easy inference that a reader can make which is especially dangerous if the person is a newcomer, since your description of the differences between markup, etc. has, in my experience, often been used not just as a statement of fact, but also as a sort of hierarchy: HTML is for monkeys at typewriters, scripting is for people who can't be bothered to learn a "real" programming language, and then you get into the wars between particular languages at the "top." In the end, it's(the hierarchy) little more than elitism and pissing contests. I have to deal with people right now who are doing backend ASP stuff I don't understand. It would take them days to churn out the HTML I can in a few hours. If you give a C coder and a Perl scripter a giant text file to manipulate, the Perl person will probably finish first. And all of us probably take our car to a garage to be worked on.

Everybody has their place.

On Feb.26.2003 at 03:39 PM
Darrel’s comment is:

I see your point, SU. While there may be a hierarchy in overall complexity of the individual languages, I agree, that they should be seen as distinct disciplines and equally as important.

With technology, like religion, the more agnostic you are, the better off you are to get the 'big picture' ;o)

On Feb.26.2003 at 04:52 PM
Redberger’s comment is:

I think you guys are confusing kiran with too much techie gibberish. he might end up more confused than enlightened. why dont we stick with the original topic and avoid too much discussion on stuff he might havent heard of (atleast not yet). =)

On Feb.27.2003 at 01:35 AM
Gahlord’s comment is:

I hope Kiran is catching all the stuff on CSS. It's really so much better and designer-friendly as well as coder-friendly.

As you can see (and perhaps you've experienced it at work or in class or something as well) there's more than a bit of churlishness that passes between programmer/coder types and designer types. It's important, as you embark on your cross-pollinated new life as designer/coder to understand this phenomenon a little. You'll encounter resistance from both camps (coders will scoff at you, designers will jeer at you). You'll be drinking alone at the bar. You'll go to Flash Forward and not know which class to take: "Hanging out with Josh" or "The intricacies of XML socket-serving chat-enabled Java applications." I'm sorta joking, but I'm sorta not. And whenever anyone gives you shit that you just can't take ("Coders can't be designers, man!" "Designers can't be coders man!") just say "John Maeda."

I just wanted to give one more quick resource that really helped me get into XHTML and CSS: The New York Public Library guide.

And sorry my previous post exploded into a giant mess that got cut off.

g

On Feb.27.2003 at 07:50 AM