I suck at web design (lots of good resources)

[WannaBrie]

As some of you may know, I'm primarily a print designer. Well, times being what they are, I know I MUST delve back into the web world. I took several classes in college; Flash, Actionscript, Dreamweaver, advanced DW, etc...but I sucked at them all. Now however, I NEED to get a few sites up as well as my portfolio online. I'm probably gonna have tons of questions for you webbies in the future, but here's a couple basic ones: I've designed my index page at 800x600, but when I preview it in the browser, I have to scroll over to see it all. I thought that size was normal screen size, what have I done wrong? Also, I'm doing my portfolio in kind of a hand drawn style using DW. I have my background all designed as a .jpg, do I have to create editable areas on top of that background in order to have text? Also, what (and I know this is asked a lot) BASIC resources would you all recommend? Ya know, like web design for dummies? :o

[INDY GS]

No offense, but you took classes in web design and you still have these basic questions.

Go to the library or book store and get a Basic DW book and start over. If you don't have this knowledge, should you be selling these services?

To directly answer your questions, I don't know why your 800x600 appears larger than the screen.

As far as the background goes, use a combo of CSS and html if you go this route you could overlay the site on top of the background you have created.

Your other option would be to slice up the image in Photoshop or Illi and optimize for web, then use tables (not recommended) but would work.

Good luck.

[MikeTheVike]

What is your screen resolution set to? If its 1024x768 or greater, a site designed for 800x600 should work without a horizontal scroll...

[WannaBrie]

No offense, but you took classes in web design and you still have these basic questions.

Go to the library or book store and get a Basic DW book and start over. If you don't have this knowledge, should you be selling these services?



I'm not selling these services (I know full well my limitations), the sites are for myself (I'm also a fine artist) and for my GD portfolio. Also, I'd like to get back up to speed with web design. And yes, I know its lame to have taken the classes and still have these basice questions, but in my defense, it was quite a few years ago and I am a print designer. I think you have something in the start over idea, though. I guess I should go get the new DW books and do just that, thanks.


Mike, I think I have my resolution set lower than that, but I'm at work, so I'll have to check it later at home.

Thanks for your responses, guys.

[Typically]

brie i'm in the same boat. i took a few web classes in school 5 years ago and things have changed so much since then. i can still do a basic table website for myself but that's about it. i was refered to this site for some help and there is a ton of info on there. http://www.w3.org/ check it out you might find some help there

[WannaBrie]

Thanks, Typ, I'd seen the W3 schools before, just not checked them out. I guess I got some studying to do! :)

[Drazan]

hey Brie!

If you did 800x 600 in the 300dpi in your print setup - the conversion to 72dpi in browsers makes the resolution go up and makes you scroll like crazy wondering what you did.

I've just started training someone else in at work on layout webpages. What I told him, is to pretend that he's making the most fabulous page ever - at the size of a business card. - it worked and he now can relate that scale to what he's doing.

There's no real big secret when it comes to simple website design. 90% of what I do involves the same simple html that I used 10 years ago.

If you look back in my posts - I've given several examples of simple page designs.

Also - look up css zen garden. it does have downloadable html and css templates. All the looks on that site are controled with the css.

If I get a moment, I'll get you some real links Brie.

Jade

[WannaBrie]

Thanks, Jade, no I designed it at 72dpi, that's what's wierding me out about it. I think too, that I am making things harder than they have to be (I'm good at that). I understand CSS and some simple html, it seems that some of the basic concepts are just driving me nuts. (like how to get text to be where I want when the background is a static image). I have done quite a bit with tables in DW, but not much else. Thanks again, I'll look up css zen garden.

[Two-Toe Tom]

(like how to get text to be where I want when the background is a static image).

have you tried using padding? or you could change the margin or padding on the p tag. anyhoo, you should get firebug if you don't have it already, makes things a lot easier.

[WannaBrie]

have you tried using padding? or you could change the margin or padding on the p tag. anyhoo, you should get firebug if you don't have it already, makes things a lot easier.

*warning*the following comments will highlight the OP's ignorance!

How do I use padding? (I cannot code my way out of a wet paper bag) What's firebug? :o

[Two-Toe Tom]

firebug is a plugin for firefox, it lets you play around with the css of different element and preview it in your browser (you can also use it on existing sites and see what properties they have on their elements). it's very useful. you can download it for free here: http://getfirebug.com/

here's a page all about padding and how to apply it: http://www.w3schools.com/css/pr_padding.asp

if you've got further questions, lemme know!

[WannaBrie]

Will do, thanks, Tom!

[tZ]

http://www.sitepoint.com/article/beginners-html-1
http://www.sitepoint.com/article/css-1-getting-lay-land
http://www.sitepoint.com/article/get-specific-css-styles
www.smashingmagazine.com
www.alistapart.com

[WannaBrie]

Great links, TZ, thanks! I love alistapart, informative, easy to navigate and beautifully designed and smashingmagazine rocks! :D

[hewligan]

If you're really having trouble, I suggest going through a bunch of the articles on the W3Schools (http://www.w3schools.com/) site that Tom linked to. While you may already know some of it, if it's really been a while it's good to go over the basics again.

The tutorials are in the left navigation column, and while there's a lot of them, you only really need to look at the first 3 - HTML, XHTML and CSS (probably in that order). The rest are really more advanced stuff that you're probably not going to care about. If you're feeling adventurous, the Javascript ones may be worthwhile.

In the right column are a bunch of references for HTML/CSS and other stuff. I use those a lot.

A List Apart is very useful for learning about things like best practices and techniques to achieve particular effects, but it's really not worth even looking at until you've got a solid grasp of the basics.

Also, keep Position is Everything (http://www.positioniseverything.net/) handy. It's the site I go to for all those "This is working in everything but Internet bloody Explorer" moments.

[tZ]

Hewligan is right in saying that alistapart is the last place you should visit. Really the links I listed are in order you should read them. Starting with a basic introduction to html placing the mark-up generators aside.

[urstwile]

Brie, I'm kind of in your spot as well, so I'll be monitoring this thread for my own knowledge, as well.

About the only possible advantage I have is that when I first started as a typesetter, all layouts were done with code, in a non-WYSIWYG environment, so the stuff doesn't scare me, it's just a matter of discipline, practical application and practice, I'm finding.

Good luck! :)

[Benjamin]

Maybe take a look at this: http://www.opera.com/wsc/

Could be a rival to the ubiquitous W3C schools.

[WannaBrie]

You guys are great! thanks for all the help so far. Looks like I have a lot of reading ahead of me. I will try to post up some examples of what I'm trying to do as soon as I can.:)

[DesignVHL]

brie - A lot has changed over the years...moves VERY quickly! I found that lynda.com really helped me understand css and html and how to make them work together. I would highly suggest running through some web design tutes through them....and check out all the css related links in the web design stickies..really u just have to read and experiement. Are you using Dreamweaver?

Make sure you use DIVS and NOT tables for layout...for starting out, its best to keep it simple. I learned a TON simply by looking at CSS website galleries and viewing them and taking them apart and looking at the code. FIREBUG and the Firefox dev. toolbar are not only great for this, but also for helping to, well work out bugs, and see whats going on!

And btw listmatic is wonderful for learning how to create some neat little navigations.

[Drazan]

OKey dokey, tooks some time this morning to go through and round up some good links and a path forward.

References and Learning HTML / CSS
http://w3schools.com/
http://www.htmlgoodies.com/primers/html/


CSS vs Tables
There’s a long time argument over which to use. The standards push says to use CSS/DIVs while using Tables for tabular data such as statistics and database results. I use both depending on the site and situation. I would recommend learning both methods to make the best choice in the future as to which technology to apply where it’s needed.

http://www.ironspider.ca/adv/basic_css/whyusecss.htm
http://www.ironspider.ca/webdesign102/tables4layout.htm
There’s other articles on IronSpider which are pretty straight forward on design and coding.

http://www.csszengarden.com/
This site is an experimentation in design. You can download the HTML and CSS of every template shown (look around there’s a list of designs to click on).
Along with the sites I linked for learning HTML & CSS you’ll be able to see how the different attributes assigned to the CSS code can drastically change how the site looks with just one (or two) style sheet files.

PHP is based around regular expressions. This next site introduces the basics of PHP, PHP functions, and other inter dependant scripts.
http://www.developertutorials.com/blog/php/learn-regular-expressions-in-php-152/

http://www.developertutorials.com/tutorials/php/

Source Code Snippets. 90% of what I put together will introduce one or more forms of a prebuilt code. Whether this comes from Dreamweaver or a thirdparty site, knowing what is out there, how it works, and where to find it will save tons of time when building a website. What you want to avoid is looking like a cookie cutter developer where everything looks and acts the same.


Javascript & AJAX
http://javascript.internet.com/
http://mootools.net/
http://script.aculo.us/

General Snippet downloads.
http://www.dynamicdrive.com/


Prebuilt Website Applications or Plugins
http://www.phatfusion.net/lightbox/ unique popup window for larger images.
http://oscommerce.org/ Ecommerce
http://www.joomla.org/ Content Management System
http://virtuemart.com/ Ecommerce plugin for Joomla
http://www.dagondesign.com/articles/secure-php-form-mailer-script/ secure online form
http://expressionengine.com/ used on http://inside.nikesoccer.com/
http://www.cubecart.com/ ecommerce
http://www.zen-cart.com/ ecommerce originally based on oscommerce, but a little easier to work with and change the way it looks.


Software repositories (web apps)
http://freshmeat.net/ (http://freshmeat.net/projects/phpcoder/)
http://sourceforge.net/
http://www.hotscripts.com/

Where to find other tutorials or help.
http://www.daniweb.com/
http://www.phpbuilder.com/
http://www.phpfreaks.com/

Tips and industry insider comments
http://www.oreillynet.com/pub/a/oreilly/xml/news/dontlearn_0701.html


Core
http://www.php.net/

Advanced dev site
http://www.devshed.com/c/b/PHP/


So take it as far as you want to. ;)

Jade

[urstwile]

Wow Jade, that's amazing! Great job! :)

I'm going to make this a sticky. :)

[a_muse]

Okay, I know the webbies are going to hate me for this, :p

I have really, really tried to learn html/css I have a mental block for some reason, I can't absorb it.
I found something called "sitegrinder" it's a plug in for photoshop it has made me so ecstatically happy! Basically if you know photoshop you can create a website, you want a text word to be a button you add "-button" to the layer name and it makes it a button!!
Apparently the code it creates is "clean".

So, if you get really frustrated, here is another option.
:)
*ducks*

[Two-Toe Tom]

*thows shoe at a_muse in her ducking position :p

[a_muse]

oohh I love shoes! Now if I could only find the one that matches.....

I did have a bit of guilt after seeing all those links Jade posted (holy link queen Batman!).
I promise I will try again, but right now I just want to get my website up!

[Drazan]

a_muse, I've been making webpages for 14 years now. I think most start out with some kind of helper. My first "helper app" was WebMania. It no longer exists online, but here's a link as to what it did.
http://www.w3.org/Tools/WebMania.html

Used it for about 2 or 3 months before I found an actual html primer and from there, I've been coding in text based editors ever since. I do find it extremely more flexible knowing what all the code does vs. sticking with a wysiwyg editor.

Jade

[urstwile]

Well put, Jade. :)

[Rexibit]

When I first started there was this little downloadable program that took you through a tutorial of basic HTML tags and structure. It forced you to type it all correctly etc. (In All caps I might add).

While the program wasn't the best, it was a lot better for me than having to read a book. I wish I still had it to give to people.

I agree with Drazan that text editors offer the most stability and satisfaction.

[Benjamin]

Apparently the code it creates is "clean".

Hmm...

[a_muse]

Hmm...

I actually read that the code was "clean" in an online review, I don't really know what that means though :o

I know, I know, you guys are probably ripping your hair out reading this aren't you? I promise I will learn this stuff, I just don't have the time now, and so far my site is working and looking perfect in ie and firefox, and I'm not planning on selling services designing sites using this program, that would be a bit silly.

[tZ]

sitegrinder has a bad case of divitis.

The development process must have went something like this:
Well… we don't actually know the users intention so lets just throw EVERYTHING in a div. At least it will validate…

[Two-Toe Tom]

here's an online interactive javascript tutorial some of you may find helpful:

http://eloquentjavascript.net/index.html

[WannaBrie]

Wow! this is great you guys! All the resources I could hope for! Thanks for making it a sticky, Urst! you all Rock!~:D

[bismal]

in hard times a bit of calculated plagarism can go a long way.. I'm not talking about copyrite infringement but just referencing someone elses code and building your own based up that. Everyone seems to have their own style, so it's a good way of grasping different approaches to layout.

[NTLemon]

I do that everywhere I go... uh not steal... but whenever I see a cool or unique site I like to take a look at their code and layout just to see how they decided to go about doing it.

[clere]

I agree!

[oncepure]

I do that everywhere I go... uh not steal... but whenever I see a cool or unique site I like to take a look at their code and layout just to see how they decided to go about doing it.



I'm constantly checking out code. It's the best way to learn something; by seeing an example of a site in action.

[olearycorp]

when You design for 800 by 600 you need to a lot space for the vertical scroll bar on the right I (think it's 20px wide). Also different browsers measure 800 x 600 Some measure the whole window others only the content on the page I don't remember which does which. But to be safe make the width 750px.

[tZ]

If your designing for 800 x 600 you need a time machine because your stuck in the past.

Presently the average screen size is 1200 x 1024. So generally the content area should be about 950 – 975px for fixed width designs.

[Malice]

WWWWOOOOWWWW! What a great thread I have a lot to go over. I can not wait to jump in thanks everyone for all the great links!

[andrele]

ditto Malice! (sidenote: funny, your avatar says Andre designs..which happens to be my name as well!)

Good luck on your web quest. Looks like we're in the same boat!

[digizan]

I have a couple of things I've shared with others that some of you might find useful:

Web Design Reading List (http://www.nopersonal.info/aboutkateers/lists/web_design_reading_list.php) - I've added to this over the past year or so, but I haven't checked to see if new editions have come out lately.

Web Site QA Checklist (http://www.nopersonal.info/aboutkateers/lists/web_site_qa_checklist.php) - It's exactly what it sounds like. If anyone thinks of something I missed, I'm all ears.

Web Design Questionnaires (http://www.nopersonal.info/aboutkateers/_downloads/web_design_questionnaires.zip) - A .zip file containing generic versions of the the questionnaires I've developed over the course of many years. One is specifically for interface design & functionality, and the other is for the technical stuff (domain registration & hosting info). FYI, they are geared towards designing a new web site. Taking on the redesign and/or migration of an existing site can present a whole different set of "gotchas" (esp. if any sort of back-end stuff is involved). I'm still working on compiling a list of things to look out for in such cases. *sigh*

I have some other stuff, but it needs to be reorganized & updated before I inflict it on anyone else.

Digi

[urstwile]

Sounds like some good stuff, Digi. :)