PDA

View Full Version : FAQs: Resources: Stuff You Should Know


Corrosive
09-03-2008, 04:25 PM
This sticky thread is designed as a reference of those questions that get asked here ten times a week and some of the best answers. It will also have helpful sites and the best advice we can give anyone who is starting out in web design.

Please search this thread as it may well answer your question without you having to post.

If you have anything you would like to contribute then feel free to PM me and I'll take a look.

FAQs:

Can anyone tell me or provide a link to show me the best way to design rounded corner boxes for my webpages?

Answer by Ricky:

You have three options really.

1. Use CSS to achieve the corners, this is the easiest method but it won't work in older browsers like IE6, as its new to CSS using CSS3. Having said this I regard rounded edges as just a visual effect so its not going to hurt IE6 uses if they don't see the rounded edge. Not everyone will share my opinion on this though.

To use CSS, see this site for more info
http://www.css3.info/preview/rounded-border/

2. Use javascript to apply the corners see these sites (there are others)
http://www.curvycorners.net/
http://www.html.it/articoli/nifty/index.html

3. Use the old images technique, this will degrade and work in all browsers.
See http://modxcms.com/about/blog/rthras...css-boxes.html

All have pros and cons, these days most modern web designers would probably say use the first option as long as the design still works when the corners are not there.

I have designed my website in Photoshop and used the 'Save as HTML Option'. Why does my website look wrong?

This is not the way a website should be built. It will never work and don't ask us to try and fix it for you. This method produces a 'table' based layout and superfluous code and images. You will have major trouble updating it (or adding anything really) and getting it to display the same across different web browsers. You also won't have the benefit of CSS and site-wide updates. If you are going to learn web design then you must accept that it takes a while to learn to do it properly. Don't use 'Save as HTML' in Photoshop as a quick fix...and especially not if you decide to sell your services to unwitting businesses and individuals.

I have used images as links but I get a blue border around the image. Why does this happen and how can I get rid of it?
Adding a blue border to linked images is a default in Internet Explorer (note: other browsers don't do this so make sure you always check your design in IE). As it will happen in IE you will need to tell it not to display the blue border with a simple CSS rule. Add img {border: 0;} to your CSS stylesheet and the blue box(es) will disappear.

Dreamweaver will not connect to my host server, what is wrong?
There are a few things to check. Most decent web hosting providers will provide details of how to configure your site in Dreamweaver. It is one of the most widely used web development tools afterall. Check the FAQs on your host's site. Make sure that all of your passwords and public folder details are correct and please, if your host needs it, make sure that your 'use passive ftp' box is checked.

I've created a form in Dreamweaver, how do I get it to e-mail it to me?
You won't, well not with Dreamweaver alone anyway. the most you will do is to get the 'Send' button to do in DW is to open your users mail programme and attach what they have typed in as a .txt file. To do what you think it should do you need a server side script (PHP or similar) which sits on your server, processes the results and mails it on to you. See the PHP section of this forum for more.

I've seen these small icons next to the address bar in my browser. How is this done?
It's called a 'favicon'. Just save any image as a .ico file called favicon.ico, this file needs to be an RGB 72dpi image measuring 16 pixels square. There are loads of little apps that you can get that will save .ico, or if you use Photoshop you can download this that will enable you to save .ico files from there. (Thanks to Ricky55 for this answer.)

Help, my images don't show up on my site This is a cry for help we get almost daily. The short answer is that either your images are not uploaded correctly to your host server. Try synchronizing your whole site. You can easily tell if your images are not uploaded by typing the URL of the image itself into the address bar. If it returns a 'not found' page then your images are not there. Or, the more likely answer is, your image paths are wrong in your site. They should look something like this..."<img src="assets/images/image1.jpg" this tells the browser to look in the 'assets' folder, then the 'images' folder and then for 'image1.jpg'. A common mistake is to make the image link point towards an image which is stored on your own computer only and, funnily enough, the browser will not be able to find it. Please check that all your document paths are correct.

I want to use a different/unusual font in my website. Will this work? Only if the person who is viewing your website has that particular font loaded on their machine. Otherwise it will revert to whichever second choice font is stipulated in your styles. For example; you will notice that when you select a font in DW it will give three or four alternatives such as Verdana, Arial, Helvetica, sans-serif. This means that if Verdana is not loaded on the viewers machine it will display with Ariel and so on.If you choose an unusual font in the hope that the viewer will have it loaded then make sure your site also looks good with the second and third choice fonts. If you don't have any more choices then it will revert to 'Default' which is usually 'Times New Roman' (yuk). If you want a header in a smart font then use a graphic with the 'alt tags' saying what your header says. Don't be tempted to use images for text throughout your site as Search Engines will not be able to read it and your site will not rank well at all. Try and stick to the common fonts, they are easy on the eye for reading as well :wink:

Resources:

Check that your site is accessible: http://www.tawdis.net/taw3/cms/en (thanks to DavidJ for this one)
All about CSS, from the top: http://www.adobe.com/devnet/dreamweaver/css.html
Getting started with Dreamweaver CS3: http://www.adobe.com/devnet/dreamweaver/?navID=gettingstarted
XML Site Map Generator: http://www.auditmypc.com/free-sitemap-generator.asp
Browser Shots, test your design in multiple browsers: http://www.browsershots.org
Validate your site to W3C compliance standards: http://www.w3.org
Loads of tutorials/downloads/articles: http://www.smashingmagazine.com
Keyword, meta data, tag etc. validation for your site http://www.freewebsubmission.com/web-page-analyzer.html
IE Bugs explained: http://www.positioniseverything.net/


Stuff You Should Know:

Why tables are 'bad'. OK, they are not all that bad if you want to display tabular data (think about a spreadsheet) but they are an old method of actually pulling together a website design. Designers now favour CSS (Cascading Style Sheets) based designs and they are the industry standard. There are a number of reasons why tables are considered to be 'bad'...

Tables can be tricky:One of the most common problems with beginning Web developers is pages that are completely blank in some Web browsers. This is usually caused by tables that are created incorrectly, either with missing tags or not closing tags. And even if you have all the tags, if you don't have them lined up exactly right, complex layouts can become big messes. And once the design is created, they are usually very difficult to edit and maintain.
While you might argue that CSS positioning is difficult to learn, you'd be surprised at how easy it can be to maintain. In many cases, it's just a matter of a <div> element surrounding the different sections of your text, and you're done.

Tables are inflexible:While it is possible to create table layouts with percentage widths, they are often slower to load and can dramatically change how your layout looks. But if you use specified widths for your tables, you end up with a very rigid layout that won't look good on monitors that are sized differently from your own.
Clearly, you can create CSS layouts that only look good in one browser, but it is actually a lot easier to create layouts that are flexible than you would think.

Nested Tables Load More Slowly: The most common way to create fancy layouts with tables is to "nest" tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the Web browser to render the Web page. There's not much to say about CSS layouts. They load faster. If only because there is less code.

Tables Hurt Search Engine Optmization:The most common table created layout has a navigation bar on the left side of the page and the main content on the right. When using tables, this (generally) requires that the first content that displays in the HTML is the left-hand navigation bar. Search engines categorize pages based upon the content, and many engines determine that content displayed at the top of the page is more important than other content. So, a page with left-hand navigation first, will appear to have content that is less important than the navigation.

Tables Aren't as Accessible: Just like search engines, most screen readers read Web pages in the order that they are displayed in the HTML. If a screen reader were to read the same page described above, it is possible that the customer would hit the back button before the reader had even read through all the navigation.
With CSS, you can define a section as belonging on the left side of the page, but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.

Tables Don't Always Print Well: If you've ever tried to print a Web page, you know that tables don't always print well. Sometimes you end up with pages that look okay, but the whole right side is missing. Other pages will print sections on various sheets.

There, you have been told :)

All browsers are NOT the same! and some are 'worse' than others. Often the single biggest problem for designers is getting a good level of consistency across all browser platforms (Firefox, Internet Explorer, Safari, Chrome etc.) Most browsers will at least try and follow the guidelines set out by W3C as to how to display a page of HTML but you will always see subtle differences. Internet Explorer (Microsoft) appear to refuse to follow all of these guidelines and so IE can be the most troublesome browser to get right...shame really as you will still find 80% or so of users still prefer it.

With this in mind you need to make some decisions when building your website. Who is your target audience and what type/version of browser are the likely to be using? For instance, say you are building your website for a predominantly 'Mac' based audience. Well, getting it right in Safari will be a 'must' for you. Or, you may have a target audience who have not updated their browser in a couple of years so getting your site right in earlier versions of browsers (say, IE6) will be important. You should also decide if there are differences you can 'live with'. You might spend hours slaving over a menu being 2px to the left in some browsers...honestly ask yourself 'does this matter?'. If not, move on. You will also want to test in your identified target browsers. You can use browsershots.org or similar but there is no substitute for testing a design to destruction in a 'live' environment.

'Cross-Browser Compatibility' is the major issue for most web designers and particularly if you have come from a 'print' background where, if you put something on a page, it stays there! Make sure you test, use standards wherever possible, always define an appropriate 'doctype' in your page and steer clear of things such as tables for design and you will soon learn the 'quirks' of each browser.