Web Design Forums

modern-designer · 12-09-2008, 05:27

Good post. It's good to see people promoting CSS & Semantic webdesign. It's also worth pointing out that usability is a big consideration - see how other successful websites function and learn from it. Also take into account accessability, make sure your pages work in all browsers and on all platforms and that the navigation is useable even with just a text browser.

Learn a bit about SEO too, a large portion of good SEO relates entirely to your page, it's content and the way it's laid out. This should be built in from the start.

Ed

INXS · 22-09-2008, 01:43

Good stuff pgo. Id just like to add a few more resources for newbies to html/css designs.

----------------------
Browsershots
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

/* Position Is Everything */
Describes and demonstrates some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers.

Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design
A personal online journal source for topics ranging from XHTML/CSS to graphic design tips.

COLOURlovers :: Color Trends + Palettes
COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

CSS Standards & Positioning
In this guide we'll learn about how to position elements using CSS, and clear away a lot of the fog that surrounds the idea of a layer.

CSS Zen Garden: The Beauty in CSS Design
CSS demonstrations of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

CSS Max Designs: CSS resources and tutorials for web designers and web developers
Step by step tutorials on using CSS to create background image lists, rollover lists, nested lists and horizontal lists.

Web Developer's Handbook | CSS, Web Development, Color Tools, SEO, Usability etc.

The 960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Set My Browser Size
A nifty online tool for setting your browser size while doing Web design

Lorem Ipsum Generator
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Nifty Corners
Tutorials on creating rounded corners without images.

------------------------

Dreamweaver, isnt hard at all to use. Ive been using Dreamweaver MX2004 since its debut and its productive enough to help you view sites in all types of browsers. CSS is just as easy once you've been able to understand positioning and so forth. I hope the sites help out those whom could use it.

penguin104 · 24-09-2008, 07:28

great thread...thanks!

INXS- i wish i knew about testing in different browsers before i finished my last website- just a simple one but i ended up having to re design 2 pages after realising that it looked completely different in each browser!

INXS · 24-09-2008, 19:45

Its very helpfull. The only downside is, you wont be sure what it will look like on a small screen, say 15 inch, but most browsers today are on 17+ inch screens and with resolution settings maxed out.

modfather · 25-09-2008, 21:41

Christ, I'm completely new to this..
I'm a CD and I want to get up to speed on mastering Dreamweaver. Some say tables, some say divs. Are there any good visual tutorials that help get you up to speed? Is ask Lynda top?

Shiro · 25-09-2008, 22:05

First, skip dreamweaver, or at the very least, skip the design view on dreamweaver. It will give you tables and other crappy code. Much better to learn to code yourself.
Second, skip tables!
Third - the first CSS I learned was from a course on lynda.com, and it was a great way to step into CSS. I understood how it all fit together at that point, after that it was just a matter of learning how to make it work for me. Which wasn't easy to say the least, but better than starting with no knowledge at all.

nikecp03 · 07-10-2008, 22:18

i thought i was ok at coding HTML but from what i read in your guys posts whatever my high school teacher taught me was everything i shouldnt do.... like using dreamweaver and tables and blah blah etc etc..... so my question to you guys is.... i actually have a growing passion for the web and web designing.... so what would be my next step to pretty much start over and learn the hard basics of web design????

ibelieveinfairi · 07-10-2008, 22:25

I'm just wondering...

I come from the design end of websites and am trying to learn how to develop them. From this side of it I find the design view in Dreamweaver to be extremely helpful since I cant look at code and picture what it will look like.

I also only use tables so far to develop a website and everyone keeps saying not to use them but no one has really said why... they are easy and work for me and the website turns out exactly how I want it.

Is there something I'm missing like tables make a website take too long for users to download or something? Or they don't come up on the same on different browsers?

INXS · 02-01-2009, 12:27

I have many sites that I have collected through web design and graphic design that many of you may find useful. I'll be adding more and more, and feel free to share!

Universal Tutorials (tutorials from graphic to web design)
Good-Tutorials.com
Tutorialized
Pixel 2 Life
Smashing Magazine
Computer Arts Magazine Tutorials
Advanced Photoshop Magazine Tutorials
Layers Magazine Tutorials

Web Design (HTML/CSS/FLASH/OTHER)
Web Design Tutorials
NetTuts
Web Designers Magazine Tutorials
FireTuts (fireworks tutorials)
Web Design Library
Flash Perfection
Flash Kit
Nifty Corners
Verlee's Blog
Web Developers Handbook
YUI Grids & CSS
Max CSS Design
Understanding CSS Positioning
Go to and Learn
Set my Browser Size
CSS Super Scrub
CSS3 Tutorials
A List Apart
CSS Positioning is Everything!
Slide Show Pro (Flash)
HTML For Beginners
CSS For beginners
W3 Schools
Streamline Your Process: RSS Feeds, Bookmarks, Frameworks, Design Resources
960 Grid System
CSS Tricks - Backgrounds

Scripting Languages (PHP/MYSQL/ASP-ASP.NET/JS/JQUERY)
PEAR PHP Packages
PHP.net
MySQL
Apache
JQuery
Learning JQuery
PHP Tutorials
More PHP Tutorials - php.net
Killer PHP Tutorials
Good PHP Tutorials
Sitepoint.com - PHP/MySQL Tutorials
Intro to JavaScript
ASP Tutorials - W3 Schools
Tutorialized - ASP Tutorials
ASP for Beginners
ASP - CodeFixer

Other Resources
Colour Lovers
Browser Shots
Kuler Colors
Lorem Ipsum Generator
DripBook

Website Inspiration/Best Sites/Etc
CSS Zen Garden
CSS Beauty
CSS Vault
CSS Elite

souljahsstory · 25-01-2009, 13:26

Are there any books for absolute beginners? as I really don't know where to start from? do i look at html first before moving onto CSS?

How much would a graphic designer need to know? As alot of jobs i've seen advertised are asking for dreamweaver knowledge etc.

teapoted · 25-01-2009, 13:33

Quote:

Originally Posted by souljahsstory

Are there any books for absolute beginners? as I really don't know where to start from? do i look at html first before moving onto CSS?

How much would a graphic designer need to know? As alot of jobs i've seen advertised are asking for dreamweaver knowledge etc.

Yes there are books for absolute beginners, but I would suggest learning the basics online, as you never know what you will think after a couple of weeks of practice.

The more you know about html/css the less dreamweaver "knowledge" you need.

A graphic designer doesn't need any web design knowledge, unless you want to do web work.

I would suggest you go to W3Schools Online Web Tutorials, they have really easy tutorials. Go through the basic web knowledge one, the html one, then css, then the xhtml one.

kwills · 03-02-2009, 06:59

This Should clear a few things up....

Web Design+ — Tips and advice on web standards development

Hoss · 07-02-2009, 16:02

I think this is a great tip for beginners:

Always build your websites so that they work in a standards-compliant browser like Firefox first. Then add "hacks" for Microsoft Internet Explorer (your worst enemy as a web designer) using conditional comments. Try to avoid hacks, but if you want to support IE6 and 7 (which, you would be a fool not to) you'll probably need one or two.

It is important to design for standards-compliant first. Reference W3C.org alot as well!

Jason Hostuttler

HisforHelvetica · 13-03-2009, 20:00

Definable a good post to have out there, there is surprisingly a lot of people out there who still use tables for everything, until a couple years ago I was among them and since turning to divs, I have found my sites not only more practical, but easier to manage.

One big factor that a lot of (new) designers can take for granted is screen resolution. Particularly with WYSIWYG editors, you have to remember that just because it looks good on your screen doesn't mean it will look like that on everyone else's. From my own Google analytics I have visitors with anything from 320x396 to 1920x1200 and your site is going to look different on each an every one.

Lastly, before you put your site live, while it's up in beta, try out an awesome resource browsershots.org, it shows you a screenshot of any chosen page in a list of almost 100 browsers si it's great for working out kinks and browser issues. Hope it helps!

Mandy Moo · 17-03-2009, 10:45

If I was to buy one beginners book to start with, should i buy...

HTML for the World Wide Web: with XHTML and CSS by Elizabeth Castro
or
HTML Dog:The Best-Practice Guide to XHTML and CSS by Patrick Griffiths

Is the HTML Dog basically what's on the website? Or is there more to it? I want a book because I'm sick of flicking in between windows.

usacompany · 21-04-2009, 02:01

as of now majority of people are becoming inclined towards <div> element.
can u tell us the advantages of using <div> element.

raredesign · 24-04-2009, 13:33

Quote:

Originally Posted by usacompany

as of now majority of people are becoming inclined towards <div> element.
can u tell us the advantages of using <div> element.

If done correctly, it will keep things light and modular, in which case, the intent is to separate presentation from markup, so that there is less garbage for the crawlers and browser to sift through before hitting the content.
Of course you can apply a class from a stylesheet to a table, but you still have nesting occuring which degrades the crawler collection.
Ultimately, there is more control with divs, as well as it being more direct to the purpose...displaying the content without all the nestings.

scrooble · 30-06-2009, 07:06

Do I need a footer if my content doesn't fall below the fold?

vbui · 01-07-2009, 10:10

Footers are not just for menu navigation anymore because your site falls below a certain line before you have to scroll. Nowadays, footers are used for not only mapping your site and directing visitors around but also to include things like quick contact information, recent blog posts, latest tweets, newsletter sign up and many more things like that. Footers give you an extra chance to be creative too so just take a stab at it.

DKuntz2 · 04-07-2009, 21:20

I know why I said was vague, but it really is dependent on what you want. If you're just doing the footer for nav, than it might not be needed, if you're using it for a copyright notice, or other notice, than it should be.

22-09-2008, 01:43	#62 (permalink)
INXS Soy Chingon! Join Date: Sep 2008 Location: Washington, D.C. Posts: 605	Good stuff pgo. Id just like to add a few more resources for newbies to html/css designs. ---------------------- Browsershots Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here. /* Position Is Everything / Describes and demonstrates some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers. Veerle's blog 2.0 - Webdesign - XHTML CSS \| Graphic Design A personal online journal source for topics ranging from XHTML/CSS to graphic design tips. COLOURlovers :: Color Trends + Palettes COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews. CSS Standards & Positioning In this guide we'll learn about how to position elements using CSS, and clear away a lot of the fog that surrounds the idea of a layer. CSS Zen Garden: The Beauty in CSS Design CSS demonstrations of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page. CSS Max Designs: CSS resources and tutorials for web designers and web developers Step by step tutorials on using CSS to create background image lists, rollover lists, nested lists and horizontal lists. Web Developer's Handbook \| CSS, Web Development, Color Tools, SEO, Usability etc. The 960 Grid System The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Set My Browser Size A nifty online tool for setting your browser size while doing Web design Lorem Ipsum Generator Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Nifty Corners Tutorials on creating rounded corners without images. ------------------------ Dreamweaver, isnt hard at all to use. Ive been using Dreamweaver MX2004 since its debut and its productive enough to help you view sites in all types of browsers. CSS is just as easy once you've been able to understand positioning and so forth. I hope the sites help out those whom could use it. Last edited by INXS : 23-11-2008 at 19:40.*

25-09-2008, 21:41	#65 (permalink)
modfather Registered User Join Date: Sep 2008 Posts: 1	Tables....Divs....Tables Christ, I'm completely new to this.. I'm a CD and I want to get up to speed on mastering Dreamweaver. Some say tables, some say divs. Are there any good visual tutorials that help get you up to speed? Is ask Lynda top?

25-09-2008, 22:05	#66 (permalink)
Shiro Whitey Join Date: Aug 2007 Location: Yokohama, Japan Posts: 7,318	First, skip dreamweaver, or at the very least, skip the design view on dreamweaver. It will give you tables and other crappy code. Much better to learn to code yourself. Second, skip tables! Third - the first CSS I learned was from a course on lynda.com, and it was a great way to step into CSS. I understood how it all fit together at that point, after that it was just a matter of learning how to make it work for me. Which wasn't easy to say the least, but better than starting with no knowledge at all. __________________ This space for rent. After Hours Japan

07-10-2008, 22:18	#67 (permalink)
nikecp03 Registered User Join Date: Oct 2008 Posts: 1	=/ i thought i was ok at coding HTML but from what i read in your guys posts whatever my high school teacher taught me was everything i shouldnt do.... like using dreamweaver and tables and blah blah etc etc..... so my question to you guys is.... i actually have a growing passion for the web and web designing.... so what would be my next step to pretty much start over and learn the hard basics of web design????

02-01-2009, 12:27	#69 (permalink)
INXS Soy Chingon! Join Date: Sep 2008 Location: Washington, D.C. Posts: 605	I have many sites that I have collected through web design and graphic design that many of you may find useful. I'll be adding more and more, and feel free to share! *Universal Tutorials (tutorials from graphic to web design)* Good-Tutorials.com Tutorialized Pixel 2 Life Smashing Magazine Computer Arts Magazine Tutorials Advanced Photoshop Magazine Tutorials Layers Magazine Tutorials Web Design (HTML/CSS/FLASH/OTHER) Web Design Tutorials NetTuts Web Designers Magazine Tutorials FireTuts (fireworks tutorials) Web Design Library Flash Perfection Flash Kit Nifty Corners Verlee's Blog Web Developers Handbook YUI Grids & CSS Max CSS Design Understanding CSS Positioning Go to and Learn Set my Browser Size CSS Super Scrub CSS3 Tutorials A List Apart CSS Positioning is Everything! Slide Show Pro (Flash) HTML For Beginners CSS For beginners W3 Schools Streamline Your Process: RSS Feeds, Bookmarks, Frameworks, Design Resources 960 Grid System CSS Tricks - Backgrounds Scripting Languages (PHP/MYSQL/ASP-ASP.NET/JS/JQUERY) PEAR PHP Packages PHP.net MySQL Apache JQuery Learning JQuery PHP Tutorials More PHP Tutorials - php.net Killer PHP Tutorials Good PHP Tutorials Sitepoint.com - PHP/MySQL Tutorials Intro to JavaScript ASP Tutorials - W3 Schools Tutorialized - ASP Tutorials ASP for Beginners ASP - CodeFixer Other Resources Colour Lovers Browser Shots Kuler Colors Lorem Ipsum Generator DripBook Website Inspiration/Best Sites/Etc CSS Zen Garden CSS Beauty CSS Vault CSS Elite __________________ _________LA__________

12-09-2008, 05:27	#61 (permalink)
modern-designer Webmonkey Join Date: Jun 2008 Location: Spain Posts: 1	Good post. It's good to see people promoting CSS & Semantic webdesign. It's also worth pointing out that usability is a big consideration - see how other successful websites function and learn from it. Also take into account accessability, make sure your pages work in all browsers and on all platforms and that the navigation is useable even with just a text browser. Learn a bit about SEO too, a large portion of good SEO relates entirely to your page, it's content and the way it's laid out. This should be built in from the start. Ed

24-09-2008, 07:28	#63 (permalink)
penguin104 Registered User Join Date: Jul 2008 Location: bristol, uk Posts: 30	great thread...thanks! INXS- i wish i knew about testing in different browsers before i finished my last website- just a simple one but i ended up having to re design 2 pages after realising that it looked completely different in each browser!

24-09-2008, 19:45	#64 (permalink)
INXS Soy Chingon! Join Date: Sep 2008 Location: Washington, D.C. Posts: 605	Its very helpfull. The only downside is, you wont be sure what it will look like on a small screen, say 15 inch, but most browsers today are on 17+ inch screens and with resolution settings maxed out.

07-10-2008, 22:25	#68 (permalink)
ibelieveinfairi Senior Member Join Date: Oct 2008 Location: Brisbane, Australia Posts: 362	I'm just wondering... I come from the design end of websites and am trying to learn how to develop them. From this side of it I find the design view in Dreamweaver to be extremely helpful since I cant look at code and picture what it will look like. I also only use tables so far to develop a website and everyone keeps saying not to use them but no one has really said why... they are easy and work for me and the website turns out exactly how I want it. Is there something I'm missing like tables make a website take too long for users to download or something? Or they don't come up on the same on different browsers?

25-01-2009, 13:26	#70 (permalink)
souljahsstory Registered User Join Date: Dec 2008 Posts: 9	Are there any books for absolute beginners? as I really don't know where to start from? do i look at html first before moving onto CSS? How much would a graphic designer need to know? As alot of jobs i've seen advertised are asking for dreamweaver knowledge etc.

03-02-2009, 06:59	#72 (permalink)
kwills Senior Member Join Date: Aug 2006 Location: Warrington, UK Posts: 811	This Should clear a few things up.... Web Design+ — Tips and advice on web standards development

07-02-2009, 16:02	#73 (permalink)
Hoss Version 3.3 Join Date: Feb 2009 Location: Maryland Posts: 4	I think this is a great tip for beginners: Always build your websites so that they work in a standards-compliant browser like Firefox first. Then add "hacks" for Microsoft Internet Explorer (your worst enemy as a web designer) using conditional comments. Try to avoid hacks, but if you want to support IE6 and 7 (which, you would be a fool not to) you'll probably need one or two. It is important to design for standards-compliant first. Reference W3C.org alot as well! Jason Hostuttler

13-03-2009, 20:00	#74 (permalink)
HisforHelvetica Graphic Design Animal Join Date: Mar 2009 Location: USA Posts: 178	Definable a good post to have out there, there is surprisingly a lot of people out there who still use tables for everything, until a couple years ago I was among them and since turning to divs, I have found my sites not only more practical, but easier to manage. One big factor that a lot of (new) designers can take for granted is screen resolution. Particularly with WYSIWYG editors, you have to remember that just because it looks good on your screen doesn't mean it will look like that on everyone else's. From my own Google analytics I have visitors with anything from 320x396 to 1920x1200 and your site is going to look different on each an every one. Lastly, before you put your site live, while it's up in beta, try out an awesome resource browsershots.org, it shows you a screenshot of any chosen page in a list of almost 100 browsers si it's great for working out kinks and browser issues. Hope it helps!

17-03-2009, 10:45	#75 (permalink)
Mandy Moo Allow me to judge Join Date: Feb 2007 Location: UK Posts: 933	If I was to buy one beginners book to start with, should i buy... HTML for the World Wide Web: with XHTML and CSS by Elizabeth Castro or HTML Dog:The Best-Practice Guide to XHTML and CSS by Patrick Griffiths Is the HTML Dog basically what's on the website? Or is there more to it? I want a book because I'm sick of flicking in between windows.

21-04-2009, 02:01	#76 (permalink)
usacompany web Join Date: Apr 2009 Posts: 9	i think you should also write in details about div as of now majority of people are becoming inclined towards <div> element. can u tell us the advantages of using <div> element.

30-06-2009, 07:06	#78 (permalink)
scrooble Llama Charmer Join Date: Oct 2008 Posts: 3,091	Do I need a footer if my content doesn't fall below the fold?

01-07-2009, 10:10	#79 (permalink)
vbui Pixel Pusher. Join Date: Feb 2009 Location: Calgary, AB Posts: 25	Footers are not just for menu navigation anymore because your site falls below a certain line before you have to scroll. Nowadays, footers are used for not only mapping your site and directing visitors around but also to include things like quick contact information, recent blog posts, latest tweets, newsletter sign up and many more things like that. Footers give you an extra chance to be creative too so just take a stab at it.

04-07-2009, 21:20	#80 (permalink)
DKuntz2 That Kid Join Date: Apr 2009 Posts: 1,369	I know why I said was vague, but it really is dependent on what you want. If you're just doing the footer for nav, than it might not be needed, if you're using it for a copyright notice, or other notice, than it should be.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search