BACK TO ARTICLE SEARCH | OUR PRODUCTS | JOIN | BLOG

Web Design Tips, Tricks and Tutorials

by Sessions.edu

CSS

Many people make simple forms on their Web site that could be much more attractive with a CSS basis. There is a simple tutorial on making forms based on CSS at www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml. Several other excellent CSS tutorials are on this site.

Two form buttons

Sometimes a form needs two submit buttons, one to submit the whole form, and another to submit just one field.

The following will do this:
<input type="button" name="emailOnly" value="Send my email"
onClick="window.open('email_only.asp?username=' + this.form.UserID.value)">
Breaking it into the component pieces:
Window.open—opens a new window
'email_only.asp' the page that opens the email address of the username (you use single quotes so that you don't cause javascript errors by ending your script early)
?username= url parameter that is sent to the page
+ this.form.UserID.value the value of the userID field

Meta data

When adding keywords to metadata on a Web page it's important to know how useful or successful the words will be. Your SEO strategy should be built around optimizing your pages for particular search terms, and if you target the wrong words, then your efforts will be a waste of time. To discover the popularity of terms, check out Overture's keyword selectory tool.

Double space

Insert &nbsp after a single space to get a double space. This usually translates to Ctrl+Spacebar or Option+Spacebar in most software.

Missing JPEGs

Sometimes when you open your Web site from a copy on your hard drive, you'll notice that the JPEG images are not loading, even though they will load when you view your site online. Try clearing your browser's cache (Safari: Empty Cache, Internet Explorer: Tools>Internet Option>General>Temporary Internet Files>Delete Files). Be sure to also check/delete all offline content (Firefox: Tools>Options>Privacy>Download Manager History). Then close all browser windows, and open your site in a new window. All the images should be there. If you have not cleared this cache recently, the process may take a few minutes. This will clear up a lot of hard drive space, so it is good to do this housekeeping on a regular basis.

Email alternatives

Many people use a simple mailto in their form's action attribute such as:
<form action="mailto:myname@mydomain.com" method="post" enctype="text/plain">

This works most of the time, but what if the user uses an online e-mail service, is in a school, library or computer rental café, or has strict security settings, all these can be, and usually are, problems with mailto. The alternatives include using a pre-installed script on your hosts' server, using a version of FormMail.

Better bullets

To give items in your bulleted list some differentiation, try some of these:

<body>
<ul>
<li>Regular placement
<li style="position: relative; left: -10px;">
ten pixels to the left</li>
<li style="position: relative; left: 10px;">
ten pixels indented to the right
<li>Regular text
<li style="text-decoration: underline;">
The line is underlined
<li style="color: red; background: #3399FF; font-weight: bold;"> This is bold and red on a colored background
<li>And so on </li>
</ul>

Some of these may look strange, but keep them in mind. Someday you will find a use for them.

Sharpen first

Sharpen JPEG files before you reduce their size. If you have a photo you are going to make smaller for your web site, sharpen it then resize it. You'll end up with a sharper but less grainy looking photo by using sharpen before resizing. Occasionally it is good to do it again, with a very small setting, after resizing.

Finding Reader

Sites with PDF files often include a link to the Adobe site, where site visitors can download the Acrobat Reader. The best place to link to is http://www.adobe.com/products/acrobat/readstep2.html. Here they can find full instructions, options for different languages and a download button

When a banner is not a banner

If you have a banner on a Web site, call it something other than a banner. Calling it a banner can cause some pop-up and ad blockers to not display it. Try using something like "masthead" or "header"; these shouldn't be blocked and you can still easily identify them. Also, don't use the word "button" in a button name, as this may also get blocked.

Flush your cache

With Mozilla you can clear an individual page's cache by pressing the Shift key and clicking the Refresh button.

To include or require

When using PHP an include() statement includes and evaluates any specified file. Essentially an include() performs that same function as require() except in the case of a file failure. In that case the include() produces a warning and a require() results in a Fatal Error. So use require() if you want a missing file message to halt processing of the page, while a failure with the include() will cause the script to continue running.

Site info

To obtain a DNS report for your domain check out DNSstuff. A very large percentage of domains have DNS problems; this site will help you find those problems and fix them. Also, the "Mail Test" tool will help find mail delivery problems for your domain.

For the DNS Report, all you need to do is enter the domain name you wish to have the report made for. They have many different look ups available. If you work with Web servers or need to check out other Web services, this site is worth bookmarking.

www.dnsstuff.com

Vertical lines
If you want to use CSS to add a vertical line to a page use:

SSL not always secure

Many people now know to look for the small padlock icon in the lower right corner of their browser window and the HTTPS in the url name that signify a secure page. But remember, this too is susceptible to hacking. Recently, in a phishing attack, the bad guy used a third-party SSL-hosting server to display the lock icon. So the page was indeed secure, but not safe. If you see a message saying "This page contains both secure and nonsecure items", it is the equivalent of saying that what you think is secure content may not be. In other words, don't trust any of it to be secure.

Save time with CSS

If you use CSS to define your content you have probably used border="0" with lots of images. To save you having to do this every time add the following to the base CSS file:

You can do the same with margins using: {margin: npx}

Keyword density

There are some search engine submissions that will ask you for a keyword density calculation. The way that search engine submission tools figures out the "keyword density" is by counting the total words in your body text, then counting the occurrence of your keyword phrase, and dividing those by the word count total. Example, you have 100 words on your page, with four occurrences of your keyword phrase, for example, "graphics". The total percentage would then be 4%. Aim for a keyword density of between 3% to 7%. Make sure that you have quality content, not just keywords repeated over and over. A general guideline is that you should try to have at least 200-450 words per page and computation of keywords includes those in the title and description. Some tricky people lace keywords in type that is the same color as the background, to get them in, even if the text does not specifically support the keywords. Search engine submissions know all of these tricks and are likely to not list your site at all if you try such tricks.

DOCTYPE to validate

Some people use validators to check their HTML pages before posting them. To use a validator, the document should start with a DOC-TYPE declaration. According to HTML standards, this declaration should specify which version of HTML the document uses. Browsers ignore DOCTYPE declarations, so if you're not validating pages, including such code is unnecessary. But if you do include DOC-TYPE declarations, make sure they're correct. The W3C has a page of them at www.w3.org/QA/2002/04/valid-dtd-list.html.

Links and bots

Robot or bot meta tags are used to inform search engines bots about what to do when they arrive to spider your page. It directs them to either index a page or follow the links and index links within any page.

For example:
meta name="robots" content="index,follow"
means the bot is to both index the page and follow the links contained in the page.
meta name="robots" content="noindex,follow"
instructs the robot to not index the page, but to follow the links contained in the page.
If you use "none" like this:
meta name="robots" content="none"
it means neither index nor follow, which is the same as:
meta name="robots" content="noindex,nofollow".

Banner names

Be sure that your filenames do not use the words banner, ad, advert, skyscraper, or anything else that might be confused with an ad. Many ad blockers will stop these from being displayed. Also avoid ad-shaped images; some blockers stop these by size.

Buttons not boxes

A common mistake made by some Web designers is to use check boxes, which allows for multiple choices, instead of radio buttons, which are for one choice only, and when answers are mutually exclusive.

Percentage wrap

If you need to get different line spacing for that particular word wrap or to emphasize something, you can always set line spacing as a percentage, either larger or smaller than 100%:
p (line-height: 200%;)

IE floating bug fix

A useful conditional comment circumvents an Internet Explorer bug, which has the tendency to double margins on floating elements. The following conditional comment in the top frame should fix the problem, in this case assuming the desired margin is 30 pixels:

The div.image can be any floating element. We hear that this will be fixed in Internet Explorer 7.

Convert your earnings

If you do business in other countries, you want your customers to have a currency converter on your site. You can find one at www.xe.net/ucc/. Alternatively, they have a service that will email you currency conversion rates that you can post on your site.

Get them up-to-date

When designing pages that use Flash, it's usually assumed users already have Flash. Macromedia tells us that 98% of all users have the Flash Player installed. But they may not have the latest version. So you should offer your visitors the opportunity to get the latest version installed into whatever browser they are using to visit your site. Internet Explorer 4 and later and Netscape 4 and later will at least have a player installed by default. To ease the detection and installation for users, see the tutorial and script below to do all the detection and installation. www.echoecho.com/flashbrowserdetection.htm

Learn from the Source

One of the best ways to learn how a web page was created is to examine the page's source file. There are a couple of things that may cause you trouble while viewing the source code from Internet Explorer (View>Source). First make sure that your temporary Internet files are not full (Tools>Internet Options>General>Temporary Internet files>Delete Files). If this is not the cause, you probably have a notepad document or a shortcut to one on your desktop. Place these in a file and all will work as it should.

Convert your earnings

Non-caching pages

On occasion, you may want a page not to cache on a viewer's hard drive. This is helpful for pages that update constantly or have other time-sensitive material. The way to do it is to use the meta tags between the <head> and the </head> block at the top of your page.

The code is:

Sessions Online School of Design

Sessions Online School of Design, established 1997, offers dozens of individual courses in Graphic Design, Web Design, Multimedia, Digital Art, and Business Marketing Design. In addition, we offer certificate programs in Graphic Design, Web Design, Multimedia, Digital Arts, and Business Marketing Design with concentrations available in advanced portfolio, corporate identity, digital photography, digital illustration, digital imaging, e-commerce, editorial design, typography, web design, flash, information design/usability, web coding, visual identity, and web business.

Sessions welcomes both novice and experienced designers, giving them the professional skills and techniques they need for successful careers in digital arts and design.

Visit Sessions.edu