Web Design FAQ

[Sebastian]

Just thought I'd answer some of tha basics here. Feel free to add other questions and answers here to build up a collection of typical Q&As.

What do I need to make a website?

First, you need the web content files. Web sites are just files loaded to your computer from another computer, they are stored in the HTML format. You only need one file to have a page, index.html. THis is the default first page that gets loaded into browsers, and is necessary to have anything come up when the user enters your domain name.

To make these files all you need is a test editor like Notepad, since HTML files are just text files with an HTML file extension. Learning HTML is out of the scope of this document, I suggest you pick up a good HTML book if you are not familiar with it. It is NOT programing, so don't be put off if you think you can't do it.

THEN, you need a host. This is the computer that will be hooked up to the web 24 hours a day. You can either rent space from a company, use space rpovided by your internet provider if they offer it, or you can build a computer yourself and have a company store it and provide the connection to the net for you.

Lastly, you need a domain name. This is the address that's typed into the browser that takes you to the web site. Names are rented, not bought. You pa a fee for a certain amount of years and the name is your for that time frame. You can renew, but if ti expires it's fair game, and it's very expensive to get it back. The easiest way to go is to get the name and hosting from one company at the same time. That way the hosting and domain name are immediately matched. If you get them from seperate companies, you will need to get DNS info from the host, and set your domain name up with that info. DNS changes take several days to propagate through the internet, so take that into account when making changes or designing a site.

What tools can I use to make my web site?

For HTML creation, a simple text editor will do. There are programs out there that provide you with a visual interface for designing the pages. These are powerful programs, but they do not eliminate the need for HTML knowledge, you still need to know the basics. The following programs are typically recommended, although other options exist that are also very good.

Macromedia Dreamweaver
Adobe GoLive
Microsoft FrontPage

If you want to include images, you will need a graphics program to resize and compress the images for web use. Today's digital cameras create files much too large for screen display that take forever to download. To be usable on web sites the images first need to be resized and compressed as JPG files. The same thing is true of "traditional" pictures if scanned. Any of the following programs can do those things:

Adobe Photoshop Elements
Adobe Photoshop
Paint Shop Pro
GIMP (Gnu Image Manipulation Program)

What do I need to do to prep my images for the web?

The images have to be resized. An image file is amde up of pixels, and typically a high-resolution digital camera can creat a file that's several thousand pixels across by several thousand pixels tall. Typical screen display pixel sizes run from 800x600 to 1280x960. The unmodified files would be too large to display on the screen, and the file size would make downloads prohibitive, and would eat up your monthly bandwidth. To make the files usable, the pixel size needs to be resized, AND the final file has to be saved as a JPG or PNG to compress the results to take up even less space.

Use your programs Image Size or similar feature to resize the file to smaller dimensions, 600 pixels wide for example. Then, use the program's Save As or Export feature to save the file as a JPG. Remember that JPG uses lossy compression, meaning that it throws out data to make the files smaller. The lower the quality, the more data is thrown away, and the image degrades. Decide on what quality/size combination you need. Thumbnails don't need to be high quality for example, while the main image might be, in exchange for larger file sizes. And don't forget that people still use dial-up, make the files as small as possible while still retining visually acceptable results. DO NOT resave a JPG as a JPG, every time you do this more data is thrown out degrading the image further. Always work from the original for highest quality and only save as JPG for web use.

IGNORE anything regarding DPI, it is only used for printing and has no bearing on anything being displayed on the screen. Paying attention to this can just cause more confusion, just pretedn it's not there when doing any sort of web work.

How do I get my files onto the server?

Some hosts provide you with automated front-ends that let you select the files you want uploaded and do it for you. If your host does not provide you with this feature, you will need an FTP program. FTP stand for File Transfer Protocol. It is a very efficient system of transferring files between computers over the internet. To be able to use it you will need a program called an FTP Client, I recommend FileZilla since it's free and so far very stable. You will need to find out how to log into your site via FTP from your host. Typically you enter an address, login and password and you are then allowed to upload and download files from your host.

Once the files are up, and the domain name has propagated through the web, you should be able to enter your domain name in the address field of a browser and have your web page show up.

[Photo-John]

I like Homesite, a pretty pure code editor. Since Macromedia bought Allaire, you now get Homesite when you buy Dreamweaver. And I haven't used Dreamweaver, but the html editing interface looks a lot like Homesite. I prefer looking at the pure code for most of the building and editing I do. I do think I could probably benefit from learning to use a program like Dreamweaver, though.

[Peter_AUS]

PJ, you can design purly in code using Dreamweaver, or design in code and see the result at the same time in split windows. Dreamweaver is certainly my first choice when it comes to website design, purly for the fact it is very transperant if you want it to be. I also use NoteTab Pro (from fookes.com) for some code tips as well, as Dreamweaver and others can have those little tid bits hidden away and it is just easier for me when I need to. Haven't used Homesite myself, but might look into it. I have seen and used Hotdog, but found it wasn't as user friendly to novices, you still needed to know a bit about website design to use it effectively.

[Asylum Steve]

I know any GoLive - Dreamweaver comparisons would soon take on a "Canon - Nikon" flavor to them, as software brand loyalty is not unlike any other area of photography. Still, I've always favored GoLive because of its obvious compatibility with Adobe's other main imaging programs, Photoshop, Image Ready, and Illustrator.

This is something to consider if you already have Adobe image editing programs and are on the fence about Web Design software.

BTW, GL makes it very easy to find a comfortable mix of WYSIWYG and pure code editing. I tend to work in a mixed fashion, pulling major page elements from the palettes in the layout window, then cleaning and tweaking everything in code. And, of course, cutting and pasting in the code window.

The bottom line is both GL and DW are considered excellent web design programs. In a perfect world I'd have and use both, but as it is I simply can't devote the resources to learn what is likely a redundant program...

PJ, you can design purly in code using Dreamweaver, or design in code and see the result at the same time in split windows. Dreamweaver is certainly my first choice when it comes to website design, purly for the fact it is very transperant if you want it to be. I also use NoteTab Pro (from fookes.com) for some code tips as well, as Dreamweaver and others can have those little tid bits hidden away and it is just easier for me when I need to. Haven't used Homesite myself, but might look into it. I have seen and used Hotdog, but found it wasn't as user friendly to novices, you still needed to know a bit about website design to use it effectively.

[Peter_AUS]

I thought I would throw this one up to try and start a list of books people own and use to help them with Website Design. These can be either HTML, Program Specific like Dreamweaver, Frontpage, Golive, Homesite, PHP, CGI, MySQL, Cold Fusion, CSS etc.

Personally I have found the SAMS Teach yourself in 21 days book to be a good place to start, as they usually have a project for development within the book. So instead of trying to second guess youself on what and how to design, you can follow along with the project, building it and seeing the codeing as it starts to fall in place.

The current trend that seems to be on the move is making website using CSS coding to cover the styles and positioning of elements within the website. The allows you to change one piece of coding and that is reflected within the whole of the website, this has the style sheets attached to them.

Frames and Tables were used for a long time on websites but this seems to be starting to be overtaken by CSS coding as it is seems easier to place elements and not cause as many headaches with elements shifting incorrectly. But thing one should always remember is, build your website to the audience you are addressing, ensuring that browser compatibility is maintained, otherwise people will turn away from your site.

A good size website is 800 x 600 these days, as the majority of people would be using a 15" monitor and more likely 17". Certainly businesses would be using 17" and maybe even 19" monitors as this allows workers to see more and do more on their desktops, using multiple applications.

Don't forget that not everyone is going to have fonts that you use on your website so you need to address that as well, either by using common fonts or allowing them to be installed by the user (most won't like doing this). Fancy fonts are nice, but this should be kept in mind.

Also testing your website before going live is considered a must do, and should be done not just by the developer but also across all known platforms if possible (hard to do unless you own it all), but some developing software like Dreamweaver enable you to check the website against selected elements like, different browsers.

Anyway I hope others will post up their thoughts and ideas as well here and add to the discussion and knowledge of all of us.

[roashru]

it wouldnt be a good idea to use microsoft brand html editors they do not follow w3c (world wide web consortium) standards people looking for a free wysiwyg html 4.01 compiant html editor should try mozilla 4.1 or netscape 7.1 or higher they have one built in its called composer.

[Peter_AUS]

it wouldnt be a good idea to use microsoft brand html editors they do not follow w3c (world wide web consortium) standards people looking for a free wysiwyg html 4.01 compiant html editor should try mozilla 4.1 or netscape 7.1 or higher they have one built in its called compose.

You are mentioning web browsers here and really I don't think that is the pupose of the FAQ's sticky posting. You should repost this as either it's own thread for comment.

Whether people want to use a Microsoft brand HTML editor is totally up to that person and it does follow w3c standards. The reason people don't like Microsoft brand HTML editors is because of the additonal overheads it places on website designs unnecessarily.

This is a new forum to Photography Review and is currently in its infancy and will grow hopefully in time to provide helpful and usefull information.

Mozilla and Netscape web browsers are fine for those that want to use them, but the purpose of this forum is to help guide people who need assistance with their own websites, nurture them into good viewing websites and to help promote themselves as individuals and is more than likely going to relate to photography websites mainly.

I know people that still use older versions of Mozilla and Netscape and aren't able to view some website correctly because of coding issues but don't want to upgrade to later versions either, so your comment about w3c standards is a little mute in their case.

If people are seeking more advice and greater detail for website design, then I think this might not be the place for them to come and need to seek out that information so where else, like http://www.hwg.org/ as a start.

Don't take me wrong, it might become a major resource of website design info, but not in the FAQ's are I don't think.

[Asylum Steve]

Firsy of all, thanks Peter, for some of the useful info you've been providing so far. I'm going to need some CGI scripts soon, and that resource site you posted looks good.

As to roashru's post, the way I read it, he wasn't touting web browsers per se, but rather the HTML editors associated with those browsers. In that sense, I think it pertains to this thread, as that is a FAQ that a lot of newbies have.

In any event, PJ can move (or combine) posts for you if you really feel it shouldn't be here...

You are mentioning web browsers here and really I don't think that is the pupose of the FAQ's sticky posting. You should repost this as either it's own thread for comment.

Whether people want to use a Microsoft brand HTML editor is totally up to that person and it does follow w3c standards. The reason people don't like Microsoft brand HTML editors is because of the additonal overheads it places on website designs unnecessarily.

This is a new forum to Photography Review and is currently in its infancy and will grow hopefully in time to provide helpful and usefull information.

Mozilla and Netscape web browsers are fine for those that want to use them, but the purpose of this forum is to help guide people who need assistance with their own websites, nurture them into good viewing websites and to help promote themselves as individuals and is more than likely going to relate to photography websites mainly.

I know people that still use older versions of Mozilla and Netscape and aren't able to view some website correctly because of coding issues but don't want to upgrade to later versions either, so your comment about w3c standards is a little mute in their case.

If people are seeking more advice and greater detail for website design, then I think this might not be the place for them to come and need to seek out that information so where else, like http://www.hwg.org/ as a start.

Don't take me wrong, it might become a major resource of website design info, but not in the FAQ's are I don't think.

[Peter_AUS]

These are some of the resources I have found that might be helpful to others looking to design/construct/reconstruct/redesign there websites. As I find more I will add them and I hope others post those that they find helpfull as well.

http://www.sitepoint.com/

http://www.sitepronews.com/

http://www.techtarget.com this site is for tech heads

http://php.resourceindex.com

http://www.hwg.org/

http://www.w3.org/

http://cgi.resourceindex.com

http://www.321clipart.com/

http://builder.com.com/

http://www.experts-exchange.com/ again this site is for the tech heads more than general users.

http://www.edevcafe.com/

http://www.fookes.net just a link to some software that might interest some people, not endorsing these at all, although I do own a couple of the software.

http://www.informit.com/ again this is for the tech heads, but might interest others too.

http://www.macromedia.com for Dreamweaver, Flash, Fireworks, Coldfusion related stuff.

http://www.htmlclinic.com/ a great source for HTML coding.


I know a few people will find this list helpful, but please feel free to add your own and I will incorporate them into this one list, to keep the thread shorter and easier to access, than a whole lot of smaller postings.

[walterick]

Okay, I'm surprised this hasn't been asked up here yet.

Who do you guys prefer now for web hosting AND domain registration (looking for one stop shop at your recomendations)

Thanks!
Rick

[Peter_AUS]

I use Godaddy for registration of Domain name and I have my own hosting business to host web accounts. If you let me know what you want I can tell you want I can offer. Once I setup the hosting account for you, you have your own Cpanel to adminster your website yourself, I can help where you need the help.

Let me know if I can help you out.

[walterick]

Peter, thanks! That's more than I expected.

I have to preface this by saying I am not hip to the terminology yet, so bear with me as I aske for clarifications on a few things.

I would love to take you up on your offer! Please explain to me exactly what it is you offer as most of what you said went over my head

Here's my goal: a personal website designed by me (I am planning on hand-coding so it will be a simple design) to be usedfor selling pictures, ie lots of images, also advertising my counesling services, woodworking and a place for personal thoughts and.. "blog" I think is the correct term. I hope that is a sufficient description of what I want. Let me know if there's any more information you need. I appreciate it!

Rick

[Peter_AUS]

First you need to decided on your domain name and see if it is available. Godaddy.com is a good registrant at a good price $8.95 per year.

Then you need to decide on how much webspace you need and how much traffic you think might visit your website. Think 20-50 meg space and 500 - 1000 meg of traffic (this is not hits to your website).

To look after the website there are programs that have been developed and used by hosting companies around the world, one of them is cPanel which is probably the most popular and is relatively easy to use. You can setup email accounts etc through it. You can upload and delete files as well, but personally I use an FTP program for that, like WS-FTP which I have used for years.

You can see how much traffic is hitting your site, and a lot of it is robots of search engines, and decided what people are looking at on your website (roughly), not an exact science, but nothing is.

If you have an Internet Service Provider and you are using Broadband (ADSL or Cable) then you could see if they offer you free web hosting space and traffic. It might be limited but you could see from that what space you need and what traffic you are getting. Start small and think positive, but be realistic as well.

My prices start from $10/month payable by paypal. Websites are up 99.9% of the time, as are most of the rest of the world.

Takes about 10 minutes to setup a site, and depending on how long it takes to get the domain name showing on DNS servers around the world is usually up and running in realtime within 1 to 24 hours.

Yes terminology is the hard side of understanding.

[Muddy Beast]

Well heres a question to add...

What would be the best way for a photographer to set-up a website with a little HTML knowledge, and Dreamweaver on their computer? In other words, what website provider would be good and affordable to have tons of pictures on and get an email with so payment transactions can seem more legit at first glance *and oviously...be legit*.

I'm looking at starting a website and making some money off it as well as it paying for its self. What can you all offer me for help? My background includes helping design, manage, and edit websites in the past threw dreamweaver. And of course during that time I learned some HTML *basics*.

Thanks.

[ccsraj]

hi...i am newbie to this forum, thanks for welcoming me to here.

[ccsraj]

hi..peter!
Thanks for providing valuable website building resources, please keep post such informative messages, it will be helpful to the members like me, thanks.

[meshhome]

Wow... Great! What a knowledge you have. Really unbeliveable. http://myacetemplates.net/ site, I was surprised. It's should be helpfull one.

[Flight]

Text editors like Word insert unviewable formatting stuff like indents and paragraphs that confuse Browsers. Notepad works well, TextPad works well, I use dreamweaver to code but I write textual conent in Word or notepad. It helps to write unformateed text and do your formatting in programs like dreamweaver or whateve. I've never used Front page or anything other than TextPad, Notepad, Word, and Dreamweaver.

Anyway let me take some time to comment on some of the things I've read in here so far.

Jpg are lossy, They are best used for photos because they have a large colorspace. When making pics for a site set the resolution in your photo to 72 (which is a good resolution to use but if you know your audience is using higher end monitors then you can jump it up to 92 ppi but it's a 72 ppi world). JPG don't support transparency and are good for images with lots of colors and gradients of color.

GIF format supports transparency but has a smaller colorspace. Gifs are good for animation and images that fewer colors and no gradients. Great for buttons!

GIF and JPG are raster images.

PNG. is the best of both worlds, PNG images support transparency, have a wide colorspace.

Vector images differ from raster in that raster images use pixels and to save a rater image a computer uses the rgb value of each pixel in the image. Vector images use math to "connect the dots." For example if you have a pic of a triangle in raster and in vector then for the computer to retrive the image it would have to get the rgb value for every pixel in the image. Vectors use math and calculate where the points in the triangle ar and connect them. When you enlarge a raster image, it pixelates because all the pixels are there. When you enlarge a vector it stays smooth because all the computer needs to do is change the numbers.

In designing a page, load time is very important. You should resist putting all your pics on on page. Put them into catagories or galleries, put a few on other pages, or make a thumbnails into image links to another page (or pop-up) so users can view the image if they want to (it saves time and lets your user decide what to look at).

Nothing is more imortant than the user. Users are impatient. Use the img formats to your advantage to spped up your site's load times.

I suggest a book called "Don't make me think" which is about usability (not images). Planning should take up more time than anything. A good user experience will help any website succeed.

FYI: HTML is the past. CSS is the future (so is XML but that's a bit advanced). DHTML (dynamic HTML) is the same as HTML but it involves the use of scripts and CSS to help make a site more interactive.

[Flight]

Peter, thanks! That's more than I expected.

I have to preface this by saying I am not hip to the terminology yet, so bear with me as I aske for clarifications on a few things.

I would love to take you up on your offer! Please explain to me exactly what it is you offer as most of what you said went over my head

Here's my goal: a personal website designed by me (I am planning on hand-coding so it will be a simple design) to be usedfor selling pictures, ie lots of images, also advertising my counesling services, woodworking and a place for personal thoughts and.. "blog" I think is the correct term. I hope that is a sufficient description of what I want. Let me know if there's any more information you need. I appreciate it!

Rick

You might consider more than one site. On for pics, one for couseling, one for woodworking. and a personal site for blogs. I would think somone interested in your pics or your counseling might night be looking to much in the way of woodworking. I thing the pic and the personal (blog) sites could be one, or the counseling and blog site could go together. The things between your ideas for sites don't go well together. You should make the subjects relate to any other subject on your site, but optimally you should go with one subject per site.

To help make money on the sites you need to increase your site's traffic and then you have a better chance at lucrative ad space salls or trades. Look for a host that doesn't include their banner ads or ads for their company or partners.