[web] Help understanding good web design?
Author
Okay so I'm not too great at web dev, I mean I can knock together HTML pages, I can use PHP and Perl with MySQL but I'm not up on a lot of new technologies. I'm an applications programmer not a web designer however I want that to change. I've often heard how bad a thing frames are in web design and have always thought the arguments for that were fair enough tables can be used to get round that, but now I've noticed people saying tables are a bad thing (i.e. the sticky in this forum for one), I'm struggling to understand why and what tools/technologies/methods can be used to decently organise site content without using tables? As I only understand basic HTML, it's been years since I played with it I don't understand what else is available to position content on the page other than tables and frames, for example if you want a side bar. I've got a fairly good understanding of XML now from my applications side of things, but I don't really understanding of CSS, XHTML and such. Does anyone have any good resources explaining good web design? I've had a search on Google but the info I've found either seems useless or too complicated such that I'm lacking an understanding of some of the technologies they talk about. Ideally I could use a site or book that gives an explanation from the ground up. I love the design of this site http://www.uwplatt.edu/web/webstandards/slashdot.html for example, how hard is it to develop a site with this kind of layout using good web design practices?
Secondly and slightly unrelated, what tools do people use for web dev now? Still things like Dreamweaver and such? Personally I used to just stick to notepad but I'm not convinced with all these new technologies and features available now that notepad really cuts it anymore ;) So any listings of the full tools you use, from graphics, to code to design would be great.
Thanks in advance ;)
Quote:Original post by Xest
Okay so I'm not too great at web dev, I mean I can knock together HTML pages, I can use PHP and Perl with MySQL but I'm not up on a lot of new technologies. I'm an applications programmer not a web designer however I want that to change. I've often heard how bad a thing frames are in web design and have always thought the arguments for that were fair enough tables can be used to get round that, but now I've noticed people saying tables are a bad thing (i.e. the sticky in this forum for one), I'm struggling to understand why and what tools/technologies/methods can be used to decently organise site content without using tables?
XHTML with embedded CSS style information:
<div style="width: 100%"> <div style="position: absolute; left: 0%; width: 50%"> <div style="height:30px"> FOO. </div> <div style="height:30px"> BAR. </div> </div> <div style="position: absolute; left: 50%; width: 50%"> <div style="height:30px"> FOO. </div> <div style="height:30px"> BAR. </div> </div> </div> Quote:
As I only understand basic HTML, it's been years since I played with it I don't understand what else is available to position content on the page other than tables and frames, for example if you want a side bar. I've got a fairly good understanding of XML now from my applications side of things, but I don't really understanding of CSS, XHTML and such. Does anyone have any good resources explaining good web design?
W3Schools is an excellent resource.
Quote:
I've had a search on Google but the info I've found either seems useless or too complicated such that I'm lacking an understanding of some of the technologies they talk about. Ideally I could use a site or book that gives an explanation from the ground up. I love the design of this site http://www.uwplatt.edu/web/webstandards/slashdot.html for example, how hard is it to develop a site with this kind of layout using good web design practices?
Breathtakingly easy: create the document structure using basic xhtml tags (in particular div and span), link it to a css file (using the style tag in the header) and fiddle with the css until it looks like you want it to look like.
Quote:
Secondly and slightly unrelated, what tools do people use for web dev now? Still things like Dreamweaver and such? Personally I used to just stick to notepad but I'm not convinced with all these new technologies and features available now that notepad really cuts it anymore ;) So any listings of the full tools you use, from graphics, to code to design would be great.
Accessing the server I work on: open-ssh
Editing the actual text: emacs
Building the pages: gnu make, zsh, sed
Uploading the pages: any command-line ftp application (such as the default "ftp" one that comes with gnu tools distributions), gnu make, zsh, sed
Testing the pages from my terminal computer: Internet Explorer 6
I recommend looking through some of the sites on the sticky about resources, there's a lot of really good information there!
One particular site that helped me figure out css table like layout was http://alistapart.com/
Great site for some pretty neat tricks using the current state of implementable css (by that I mean there are different levels of the css standard that have yet to be implemented properly)! www.w3schools.com is also an excellent site, as ToohrVyk mentioned. It's not the best in terms of advanced usage, but it's really good as reference material and a place to go to learn the basics of a lot of web stuffs.
As for using Dreamweaver, or front page, or some other editor of their ilk, I do not use them at all, nor do I recommend them. IMO, all they provide are an easy path to create mediocre designs, and sub-par markup. That being said, if you work at it, they can provide some really handy time saving features, but to me, it always feels like you have to work to get those features working properly, just the way you want.
Again, though, that is just my personal opinion.
I typically use some sort of text editor (I've tried a lot!) like jEdit, EditPlus, vim, EMACS, etc, etc...
One particular site that helped me figure out css table like layout was http://alistapart.com/
Great site for some pretty neat tricks using the current state of implementable css (by that I mean there are different levels of the css standard that have yet to be implemented properly)! www.w3schools.com is also an excellent site, as ToohrVyk mentioned. It's not the best in terms of advanced usage, but it's really good as reference material and a place to go to learn the basics of a lot of web stuffs.
As for using Dreamweaver, or front page, or some other editor of their ilk, I do not use them at all, nor do I recommend them. IMO, all they provide are an easy path to create mediocre designs, and sub-par markup. That being said, if you work at it, they can provide some really handy time saving features, but to me, it always feels like you have to work to get those features working properly, just the way you want.
Again, though, that is just my personal opinion.
I typically use some sort of text editor (I've tried a lot!) like jEdit, EditPlus, vim, EMACS, etc, etc...
I second the vote for www.alistapart.com. Also have a look at http://www.css-discuss.org/, especially the wiki that goes along with the mailing list.
Here are a couple tips:
Know the intended use of all (x)html tags. table, i, b, u, etc. are generally frowned upon because of improper use, not because they are faulty tags to begin with.
Know the box-model like the back of your hand. Understanding the difference between padding, margins, borders, width, and height will help you out immensely.
Quote:Original post by ToohrVykQuote:Original post by Xest
Okay so I'm not too great at web dev, I mean I can knock together HTML pages, I can use PHP and Perl with MySQL but I'm not up on a lot of new technologies. I'm an applications programmer not a web designer however I want that to change. I've often heard how bad a thing frames are in web design and have always thought the arguments for that were fair enough tables can be used to get round that, but now I've noticed people saying tables are a bad thing (i.e. the sticky in this forum for one), I'm struggling to understand why and what tools/technologies/methods can be used to decently organise site content without using tables?
XHTML with embedded CSS style information:<div style="width: 100%"> <div style="position: absolute; left: 0%; width: 50%"> <div style="height:30px"> FOO. </div> <div style="height:30px"> BAR. </div> </div> <div style="position: absolute; left: 50%; width: 50%"> <div style="height:30px"> FOO. </div> <div style="height:30px"> BAR. </div> </div> </div>
If you do that, you might as well just stick with tables and font tags. It's no better -- at all. In fact, if you do it, your soul is in dire peril.
Just use common sense. Is something an address? Use the address tag. Is something a paragraph? use the p tag. A list of things? Use a list (DL, UL, or OL, as appropriate). Are you dealing with a piece of information that doesn't really fit any of the existing html elements? Either write your own doctype (fairly easy to do) to define the elements, or use something simple like a div with an appropriate class assigned to it (e.g. <div class="someclass">).
It's all about semantics. Your (x)html output should simply describe what a piece of data is -- not how it should look or how it should behave.
Edit:
Tools I use
EditPlus (vi/vim/pico/nano/emacs if I'm really forced to) for a text editor for php, javascript, css, and html templates (and, yes, your (x)html should probably be used as a template. keep the output seperate from the application logic to save yourself many headaches in the future).
FileZilla (FTP client)
PuTTY (SSH client)
I use Firefox (with several useful extensions) for debugging and testing, as it's the only browser (or any tool, for that matter) that actually has a debugger and such for web stuff.
And that's basically it. Unfortunately, few good tools exit for web code as exist for things like C++ (I use visual studio exclusively for those sorts of things). This is a direct result of the legacy of unix tools like vi and emacs, which I kind of view as the antichrist. Of course, I'll gladly watch other people use those sorts of things, meanwhile I'm much more productive with my graphical editors and debuggers and get my projects done in a fraction of the time of the emacs guys.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
