Question from a newbie: website design fundamentals?

What are the basic technologies of professional website design? At the moment I can think of HTML/XML/JavaScript, Photoshop (or similar).

Anything else?

I’m thinking in terms of the fundamentals, the foundation that need to be mastered 100% before somebody moves onto to something more ambitious, such as commercial sites.

Thanks in advance for all replies.

CSS - it goes hand-in-hand with HTML

Hi Boofus. Welcome to SitePoint. :slight_smile:

Well, you can build a completely professional and useful website with HTML and a bit of CSS alone, so as long as you have a reasonable grasp of those, you are good to go. It’s also handy to know a bit about JavaScript so that you can add a few fancy features to your pages, but more often than not this can do more damage to a site than anything (at least from a usabiliity and accessibility perspective).

Understanding a server-side language is very handy and gives you great power to create much more dynamic sites. The most common one is PHP. There are many other web tools/languages that are worth knowing at least a bit about, such as SQL (database language), Apache (the most common server software), and knowing a bit about Photoshop and other graphics programs is handy too.

But all these are nice extras. HTML itself is the basis of a website, and you can do a very nice and usable site with that alone.

Thank you gents. And how does Flash fit into the picture? Is Flash something I don’t worry about until much later?

Yes, much later … such as when you’ve been cast out of heaven to the nether world. :lol: Flash is a nice technology per se, but doesn’t really belong on the web. Flash-based websites are dying out, not only because some devices don’t support Flash, but because Flash is much less accessible than an HTML website—not only for certain people but to search engines as well. Even though that has changed a bit over time, in my view, learning Flash is a waste of time now. It became particularly useful for serving up video, but now even that is changing as browsers begin to support the new <video> element and other video formats become mainstream.

Ha! I’m really behind the latest developments and I need catching up! Flash has fallen out of grace! Back in 1998 or 1999 we saw the first examples of amazing websites designed 100% in Flash and we thought it was going to rule the world. Apparently it won’t. I guess every technology has its heyday that passes, like the steam engine for example.
:slight_smile:

I wouldn’t say Flash has completely fallen out of grace. Flash-based websites definitely have, but there are still many valid uses for Flash (though that territory is being encroached upon by HTML5/CSS3). However, if I was just starting out, it would be pretty low priority for me too.

A server-side scripting language is a must for most websites nowadays as well (completely static pages are generally boring and often hard to maintain). I personally recommend PHP, but ASP.NET and the like work too.

I don’t think anyone can fully master any of these (I’ve been doing this for over a decade and I still learn little bits here and there all the time). You should work on getting a handle on the basics, then work on some projects. When you come up against something you don’t know or are unsure about, that’s your opportunity to learn something new. Repeat a million times and you’re well on your way to becoming a pro. :wink:

It is very difficult to learn any programming or markup languages purely by reading books… you need to practice, practice, practice. I’ve seen many programmers with bachelor’s in Computer Science who can barely do anything, because all of their knowledge is purely academic. They’ve barely done any real projects.

I think the order of importance for web-related skills are:
HTML

  • HTML 4.01 stuff first (which is the core) then learn the new HTML 5 stuff.
    CSS
  • CSS 2.1 stuff first (which is the core) then learn the new CSS 3 stuff.
    Javascript
    PHP (or other server-side)
    Flash/Actionscript 3 or Silverlight, etc.

Oh, I also forgot: Photoshop and Fireworks. Many people just use Photoshop, but I think Fireworks is essential (Fireworks for the basic layout and Photoshop for “photoshopping”).

However, being able to use those isn’t essential if you are only doing back-end (though knowing at least a little of both can still be quite useful).

Depending if you want to be a back-end (how it works) or a front-end (what it looks like) developer, I would put Photoshop and Fireworks as either after PHP (back-end) or after CSS (front-end).

Excellent answers Samanime.
I would definitely leave Flash out of the picture until you absolutely need it or have a specific use of it. You will know if u need it or not.

Here’s my 2 cents of the order in which to learn:

HTML 4.01
CSS 2.1
Photoshop and/or Fireworks
<– I would even suggest learning a CMS like Wordpress here should you plan to use a content management system for your sites, which gives you a way to easily generate sites while this gives you experience in working with a) HTML in themes b) css in themes c) how HTML and CSS can tie together with php in the themes & plugins and more.
Javascript
PHP
HTML5
CSS3

Like samanime said, it depends on the kind of developer you’d like to be. Front or Back end…

Thanks for all suggestions, gents. I have an 'HTML 4 Bible" printed in 1998 which looks very impressive from the outside (huge book). I would like to read it front to back, even before I start any coding, but isn’t it outdated if printed so long ago?

Not to plug Sitepoint or anything but I would highly recommend picking up on of the beginner books rather than bible book because it will provide a clear learning path that progresses rather than throwing everything at you at once. Generally the book to start off with is http://www.sitepoint.com/books/html3/.

Yes, good suggestion. Knowing how to use a CMS will give you access to a lot of dynamic functionality without you haveing to learn how it all works, which means you can quickly build fancy sites for people without being a programmer.

That sounds too old. HTML 4.01 came out in 1999, so presumably this book covers an earlier version? XHTML came out a bit later too, I believe, so best to upgrade. As oddz says, the SP books are a good place to start.

I agree, it’s probably a bit old. Even within HTML 4.01, it’s usage has evolved a bit since then.

The book oddz mentioned with a great book. The Ultimate HTML and CSS Reference books that are on Sitepoint are also some of the best books I’ve read on the subject as well (and I’ve read quite a few =p). Another good one is http://www.amazon.com/HTML-CSS-Complete-Reference-Fifth/dp/0071496297/ref=sr_1_2?ie=UTF8&qid=1325692189&sr=8-2 (was my favorite until the Sitepoint ones came out).

However, I would actually strongly recommend AGAINST reading through any reference book front to back before starting anything. That’s getting much too close to a purely academic knowledge, which is actually more difficult to do things with. You should read a chapter, play with some code, read a chapter, play with some code, etc., so you are building a more practical knowledge base. I’d say you should probably spend at least four times the amount of time coding as it takes you to read each chapter. (This rule applies for any programming language).

One of my web design mentors (a guy with serious credentials) says you should read the book front to back, without ever touching the computer. Then read all over again and do all the coding exercises. I guess there are various schools of thought out there, depending on everybody’s studying habits.

Thank you very much for the book recommendation. I will be definitely on the lookout for a used copy at Amazon.

Not so much technologies, but rather useful skills you’ll need to have are typography, information architecture, the principles of grid design, iconography, and visual grammar, to name a few.

I link to a novice/introductory book for each category (I’ve read all of these and can recommend them):

Information Architecture: Practical Guide to IA

Iconography: The Icon Handbook

Grids: Making and Breaking the Grid

Typography: Thinking with Type (and a web source: [URL=“http://webtypography.net/”]The Elements of Web Typography)

Shapes, forms, and balance: [URL=“http://www.amazon.com/Visual-Grammar-Design-Briefs-Christian/dp/1568985819/ref=sr_1_1?s=books&ie=UTF8&qid=1325705146&sr=1-1”]Visual Grammar

kohoutek, that’s exactly what I’m looking for, thanks.

The websites I’ve tried in the past had a navigation bar on top or sometimes a vertical navigation menu on the left margin, but they were the same boring format repeated over and over.

I did take a college course in graphic design a long time ago but that stuff was too primitive, entry level.

What I want to achieve is to break away from the horizontal navbar/vertical navbar convention and throw stuff all over the screen but make it look appealing, attractive and balanced at the same time.

Just be careful not the throw clarity / usability out the window in your quest for something unique. Most sites exist to provide visitors with information of some kind, and I’ll bet those visitors are far less interested in the artful layout than in quickly getting the information they need—which is aided by familiar positioning of key elements like navigation. :slight_smile:

Agree with ralph.m - be careful.

There is a reason you see the same ‘boring format’ over and over. It’s because it works, people are used to it and know how to use it.
Breaking from the mould is exciting and can be fun, but usability is of utmost importance.

True, all aspects will have to be considered, including ease of navigation for web-challenged people like my sister. When my sister is browsing the web, she sort of clicks randomly all over the screen without knowing why, including clicking links that she never intended to click and links that download and install malware on her computer, which happens without her noticing it.

Hmmm…to think of it…every scientist needs a laboratory chimp to test his ideas in practice.

She could make a perfect one.