Painted my self into a technical corner with theory paint. Help.

July 23, 2009 4:54 AM

I'm here to enrol in web kindergarten. How do I get started on a likely-to-become-extremely-complex website build when I... ahem... haven't designed anything for the web before?

I'm a Graphic Designer researching Design at PhD level, and my project has arrived at a point where I have proposed that I create a website as an interactive part of my practise-based research.

Please consider me a complete and utter noob, and by extension wonder why the hell I would propose doing something that I don't know how to do. Imagine I just fell to earth and decided to create a website. Assume also that I'm a quick learner.

The reason I've elected to do something I have no expertise in, is that it is the best way to investigate certain theories in my proposal, so really, I just have to make it happen.

There are two factors to consider before I ask my extremely daft question:

1. I will be very sure about how I want things to look and behave from a design and function perspective. I'm scared to death of this project because my only web experience is dicking around with a small WYSIWYG application at work, and going out of my mind in very short order because I couldn't control the visual elements and functionality to my liking.

2.The site will need to be up and running pretty soon, even at a basic clunky level, but will need to have room to accomodate lots of slick, well executed complexity in the future as my skills grow; complexity of the user participation/upload of content/chat/message board kind, all encapsulated in aesthetic theatrics appropriate to the content and the design-loving audience.

Basically, I have a pretty good idea of what would be cool, a grasp of what the site needs to be able to do funtionally, and absolutely no idea where to start.

An IT Guy friend said to me "Just get hosting and go from there" but I'm afraid he lost me, and I need someone to just give me the first boost up - please tell me what I need to do to get started. The basic step-by-step start, always keeping in mind that I must be able to accomodate greater complexity later.

I have read this thread and noted the various things people have said to learn, but still don't know where to start. What do I do - am I using software here? What do I need to learn in extremely short order?

If it helps at all, I learned a bit of Flash at Animation School, and "got it". I know not to build a Flash site, for fear of making people cry, but I would like to incorporate some of the trickery. My skills are animation, graphic design, fine art techniques and illustration. I know that a template-type thing is not going to work for me, unless I can fuss with it, and bend it to my will.

And hey... if you think I just need to go back to Uni to learn a whole new trade, be sure and tell me that too. I can handle the truth and would rather know if there's just no way to do what I have in mind without a computer science degree. I won't be able to do that, but at least I will know that pro assistance is in order.

Happy to answer any questions about the likely content if it will help in the answering.

I should also mention that I really do want to learn this, so I'm willing to work hard to get it done.

posted by lottie to technology (14 comments total)

Seriously, if you can swallow the tween girl design ethos, go start with Lissa Explains it All. Go to W3Schools after that. Download 1stPage2006 and play with the various modes (wysiwyg, basic, normal, advanced, hardcore) as your skills grow. Build your site. Play with it, test it, break it repeatedly and THEN worry about hosting.
posted by Emperor SnooKloze at 5:13 AM on July 23 [3 favorites]

I also come from a fine art/graphics background, and have been learning web design from scratch this year. The process is still pretty fresh in my mind, so here goes:

1. Learn XHTML and CSS.

Get Adobe Dreamweaver and the most recent editions of several how-to books from the library, pick whichever seems friendliest, and start following along step by step. You do not need to worry about hosting at this point, because you can test your site live as you go along from your own computer. Be very, very, anal and organized about absolutely everything, but also be prepared to redo the whole thing in a few months - web stuff has such a steep learning curve that you'll be shocked at how quickly your first attempts seem amateurish. The video tutorials on Lynda.com are very helpful as well, and I also relied heavily on the Dreamweaver boards at Adobe.com for troubleshooting. Get as used to hand-coding as you possibly can (type things out yourself instead of letting Dreamweaver do it for you), and avoid absolutely positioned divs.

2. Whenever you want to do something and don't know how, Google it.

Every question or problem I've had, someone else had first and already asked on some message board somewhere. I also started finding premade JavaScript codes to do things I couldn't with plain HTML, which was a great help.

3. When you're ready, you need to purchase a domain name and web hosting. I did both through A Small Orange and there are several old threads here with more suggestions. Any Dreamweaver book will walk you through the steps for this as well.

4. Once you're comfortable with the basics, you might find that you need more complex programming languages to accomplish certain tasks. (I'm learning PHP/MySQL, and there are several other possibilities.)

Good luck! This stuff is crazy fun when you get into it.
posted by Fifi Firefox at 5:20 AM on July 23 [1 favorite]

A List Apart has a definite bias to it, so bear that in mind, but I always found it to be a stellar resource when I was learning to design for the web. There are large mental shifts you have to make to go from graphic to web design, (e.g. relinquishing pixel-perfect control) and there are many things that seem to be more complex than they need to be (e.g. vertical alignments). My advice is to make yourself aware of the pitfalls and limitations, and digest as many of these articles as you can.

There are innumerable directions a web project can take, so you will need to define the goal of the site in order to determine the technologies required, and then seek direction from there. E.G. you might want a pure Flash site that is going to be little more than a series of movies, or you might want something completely different that needs a big database running in the background (which might lead you in the direction of working within a high-level framework e.g.).

Also:
•Test for cross-browser compatibility with something like Browser Cam
• Find someone that is happy to put up with your 15,000 'stupid questions' that will come up :)
• Technologies like XHTML, CSS, PHP, JavaScript, etc are all very logical systems, and can be learnt at a gradual pace, but they are technical, not to mention unforgiving.
• You can't go past Firefox's DOM Inspector and the WebDev toolbar add-on for debugging - it allows you to do things like editing code while viewing the effects in real time ("What happens if I try  width:50%; margin:2em...") on any website
• Try to formulate some degree of 'web design philosophy' before investing your time into any one technique or the other - look at the job holistically and then break it down into tasks.

Good luck!
posted by mhjb at 5:21 AM on July 23 [5 favorites]

I can think of a couple of pieces of information that might help people answer this question usefully:

- Have you any programming experience at all?
- What kind of time range are we talking?
- Can you give some rough examples of the slick visual/animation effects you will be trying to achieve?


My initial thoughts are:

At a minimum you will need to get a handle on some html & css. Depending on how your brain works this could be typing code straight into a plain text editor at one end of the scale, to a full blown WYSIWYG type editor like Dreamweaver at the other.

If your animation and visual effects look like they can be achieved using javascript, a javascript framework such as jquery will help. It allows you to achieve a lot of visual effects (and other JS goodness) with very simple (and well documented) syntax.

For the actual background functionality of your website (handling storing of user generated content and so on), there are many routes you could take.

You could start with something like Drupal which gives you some core functionality, to which you can bolt on modules to deal with extra functions, like file uploads for example. These modules can be ones you have coded yourself, or you can reuse modules other people have made.

Alternatively, if you want to get your hands dirtier, and wish to build most of the site from scratch, I would definitely recommend using a framework. There are lots of these to choose from depending on your programming language of choice: Ruby on Rails and Django are popular frameworks for Ruby and Python respectively; and there are a number for php, like: Kohona , CakePHP and Yii.

The merits of each of these frameworks (and the languages they are based on) could be debated for hours, but each one intends to do a lot of the groundwork for you, allowing you to focus on the specific functionality you wish to build (or reuse from other people's projects). This sounds similar to Drupal, but they will give you more freedom to do what you want to do, with the proviso that you have to write more code.
posted by latentflip at 5:25 AM on July 23 [2 favorites]

Agree with the previous question about your timeframe. Curious to know how advanced you're thinking and how soon.

No matter how smart and motivated you are, there are some speeds that just aren't feasible.

But being self taught is absolutely possible. These comments are all great. Also look at jQuery UI.
posted by jragon at 6:36 AM on July 23

Web design is an area of expertise that takes time, effort and skill to master. I'd look for sites that are set up the way yours will be and emulate their structure. Don't steal their design, but learn from it. About.com has a roundup of free web editing software.
posted by theora55 at 7:12 AM on July 23 [1 favorite]

http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

I always recommend that tutorial to 101 n00bs. It's not particularly amazing, but it just MADE SENSE to me and kind of launched my quest.
posted by GilloD at 7:19 AM on July 23 [1 favorite]

I would recommend against using Dreamweaver. I used Dreamweaver for most of my initial sites and found that learning via Dreamweaver and looking at the source code that clicking buttons generated gave me a lot of misconceptions about how the code actually worked. W3Schools was an excellent resource for me - their HTML and CSS tutorials gave me a pretty good foundation in terms of understanding the capabilities and limitations of HTML.

HTML is the absolute basic you'll need to learn to make a static website, CSS will let you be really anal retentive in playing around with what to place, where, down to the exact pixel (Though be careful with how IE and FF handle CSS differently - test your site in multiple browsers). Once you've made an HTML-based website, you'll need to publish it online. This is what your IT guy friend meant about hosting. You need a certain amount of web hosting on which to put your website, and then you'll need an address so people can access that website.

For example, I'm currently using Nearly Free Speech for my hosting. I upload my files onto their computer using an FTP (file transfer protocol) client called FileZilla. I've also bought a domain name, and using the NFS interface I've linked the domain to the files on their computer. I understand very little about the back-end stuff about servers and webhosting, but I don't need to understand them to have a website.

I apologize if this is too simplistic, I'm not sure what you meant by "the basics".

You'll eventually need to learn PHP and MySQL (and probably javascript if you want to incorporate flash-esque effects), both of which I found to have a decently steep learning curve if you've never programmed before. But it's absolutely possible to learn this stuff from books and by yourself. Google is your best friend, here, and there are a lot of communities out there (like the PHP LJ community) that will gladly help you check your code when you run up against a snag.
posted by Phire at 7:31 AM on July 23 [3 favorites]

lottie: I know that a template-type thing is not going to work for me, unless I can fuss with it, and bend it to my will.

Then use a template. Because the XHTML and CSS everyone else is telling you to learn means you can indeed bend the template to your will.

Having said that, you mention user participation/upload of content/chat/message board. NONE of that is rocket science and there is no need for you to re-invent the wheel. ALL of those things have been done a billion ways since the dawn of internet time.

Therefore my recommendation is:

1/ Register a domain name and get a hosting account somewhere with one-click Joomla install. Dreamhost has this feature and doesn't suck any worse than any of the other cheap, mass-market hosts.

2/ Choose a theme from a reputable seller. You are looking not for aesthetics but for the layout that most closely approximates your ideal. Images and colours will be vastly easier for you to change than the layout will.

3/ Tailor the visuals by editing the CSS. You will need only basic CSS skills here, which ramps down your learning curve.

4/ Browse through, download and install the Joomla extensions you need to pull together the functionality you want. Uploading, forums, social networking, tagging - someone has very very likely already coded what you need.

For the record, I am not a huge fan of Joomla but for the level of what you need, it is the most accessible solution with the lowest learning curve and the most amount of resources for your project. Drupal, Rails, Django, Cake are all great but they are going to require rapid acquisition of a broad base of skills, and to be 100% honest, if you get lost on "hosting" then that's a huge ask. Avoid.
posted by DarlingBri at 7:48 AM on July 23 [1 favorite]

Might I suggest checking out a service like PSD2HTML. They could create HTML/CSS based on your designs, that you could use as a starting point for learning HTML/CSS. This would have the benefit of teaching you how your site is (or could be) put together.
posted by bashos_frog at 9:42 AM on July 23 [1 favorite]

I think this whole thread is a favorite for me because everything said so far is what I'm going to send people who ask me this question IRL in the future. I'd just like to add a few 'old school' items of interest that you might like to explore as leisure reading.

Philip & Alex's Guide to Web Publishing: Old, not directly applicable technology wise anymore, but awesome photographs and a fun writing style. It will get you thinking about the different ideas in web design/applications and how to wrap your head around them.

Jakob Nielsen's books: Most web designers hate Jakob Nielsen, but at least they remember him instead of "Creating Killer Websites" and all those other stupid books from a decade ago. From your background as described you will probably hate him too, but there are important usability factors that you can learn from him.

I have known several people that had similar experience/background as you (although I am unsure if they were doing design at the Phd level), and they had a very difficult time designing well for the web. Some designed extremely brittle, pixel-fussy websites that nobody visited and nobody cared about. One has gone on to learn more of the subtleties of web design and grown to accept the design limitations.

The best piece of advice I could give is to remember the golden rule of web design: No one will ever give a living fuck about your website. They might care about the information or resources they can access ON your website, but there will not be any statistically noticeable group of people that will appreciate your design just for designs sake. Do not worry about this, it is normal.
posted by Skrubly at 10:01 AM on July 23 [2 favorites]

I really can't mark a best answer, because these are all so awesome. Thanks everyone - I really appreciate the thought you put into answering this, and I will read through and get started. I can only imagine how infantile a question it seems in this day and age.

Today I will try to gather examples of what I'm hoping to acheive from a look/function perspective for those who asked.
posted by lottie at 3:25 PM on July 23

Here are a few examples of the sorts of things I would like to achieve.

Some of the content will be like Learning to Love You More, where I will invite submission of work, which could be images, text or.... gulp... video/animation/sound. Although the projects will be more fine arts than these ones.

The site is about inspiring creativity, so the content will be like that, but it's important to me that the look be inspiring too, and that each task/project be visually reflected in the design. In my imagination, this means that every project will have a different section of the site, and will function differently. I can start with one or two, and add more on as time goes by, hopefully building a digital "scuplture" of sorts.

What this means in practical terms is, if I have participants submit, say for example, a stamp design based around a simple, personal brief, then I might want it to upload into a collage type pattern on the site where it builds with the work of others to create a visual cloud, or an incredible montage, like on Exactitudes

I might even want to load these submissions to the site onto the collage according to a colour, or design matrix that I have created, like you can see on the Shop by Colour section of Etsy.

To complicate matters, and just by way of example, I would like a collage like this to be explorable in some way, say, if you roll over with the mouse, you can look at a stamp in the montage more closely, or read comments by the person who submitted it.

And this would be one 'tentacle', of the site, with several others, all with different appearances relating to the task it concerns. I also have to think of a home page starting point from which these all spring, which is easy to navigate, easy to return to, and holds the whole thing together.

In terms of time frame, I would like to get the home page, and maybe one or two of the simpler of these 'tentacles' up and running before the end of the year, but I would like in the coming year to create ever more beautiful 'tentacles' to add on, building up the site as I learn more.
posted by lottie at 3:56 PM on July 23

Well, it sounds like you are trying to jump in the deep end! Which isn't a bad thing actually, you can learn a lot in a short time. What you are proposing does sound fairly advanced in terms of fuctionailty, so if you have a strict time limit you may have to prune some of that fuctionality back. When you have a bit of basic knowledge you will be in a better place to assess this. I would second most of the advice above, in particular DarlingBri's comment.

With the extra info you have just provided, it sounds like you will eventually want some web programming skills. PHP is the best best for a beginner - you can achieve a lot with it quickly. The good news is that as DarlingBri suggests, a lot of the more generic complex fuctionality such as forums etc can be achieved with a content management solution (CMS) such as Joomla. Web hosts like Dreamhost have one-click installers for a lot of the more popular CMS's and the Dreamhost's wiki is pretty good if you get stuck.

I'd tackle the learning in this order:

1) The basics. XHTML and CSS. Run through the tutorials at W3Schools and you're set. If you are using firefox, get the web developer toolbar and firebug to help you debug and understand what css is creating what effect. Dreamweaver's code view is quite nice for search and replace functionality and code hinting, but it's a lot of money and you can get by fine with a notepad replacement like SciTe.

2) Get a basic understanding of how PHP (and server side coding in general) works. I highly recommend a book to help you with this process and for future reference. I like the Visual Quickstart series personally. This should also give you an overview of using web databases like MySQL, which in the long run you probably won't need to know too much about if you are using a CMS, but I think a fundamental understanding of how databases work in the context of a website is very important.

At this point you can either be testing your pages directly on your web hosting (unwieldy - annoying amount of FTPing), or if you want to test locally on your machine you will need a local web server. Xampp makes this easy.

3) Get set up with a CMS like Joomla (some alternatives here if you want to compare functionality of CMS's - drupal and joomla are the 'big two' are should have better documentation / community support). Start hacking templates using your CSS skills.

4) If you want to add visual florishes, jQuery if great, but I'd recommed learning a little about JavaScript and the DOM first.

Good luck! When you have all this under your belt you will be an accomplished web developer and will have a skill set to tackle most anything you can think of. Feel free to memail me if you need more info on anything. Oh, and with regards to design, make sure you are doing sketchs and organisational flow charts etc in the 'real world' before you start implementing your site. Try and think about usability from the persective of the end user.
posted by jzed at 2:47 AM on July 24 [1 favorite]