Here are 5 key techniques that every professional designer uses in the development of a client site. Let’s look at how you, the budding freelancer, can implement them quickly and easily for your own clients.
1. Combatting Internet Spam Spiders
Often, a bony, lanky black spider will crawl around a Website, wiggle its little feet in excitement, gather up all the email addresses on the site, and store them near its pinchers. Then, when it returns to its master, it will religiously add all the data it gathered to a huge nest of email addresses, which it can use as bait to reel in its clients — direct marketing firms.
Those little black spiders are software utilities that slither underneath your page’s surface to look closely at underlying HTML code, specifically searching for standard format email addresses (name@domain.com). This can be a most effective method for gathering email addresses — and it needs to be thwarted! There are a number of techniques we Web designers can implement to protect our clients against these creepy crawly annoyances. Here are three that can work well.
1. Use HTML symbols
To prevent spiders grabbing email addresses, make a few formatting modifications to fool the software. All email addresses use the at symbol (@), and spiders are taught to look for them. HTML symbols are symbols that, though written directly into the HTML code, are interpreted by the browser into their actual meaning. The HTML symbol for the @ sign is @ So, how do we implement something like this? Simple:
<a href="mailto:name@domain.com"> All we do is replace the @ sign with the HTML symbol that represents it. However, it’s not a surefire solution: though most spiders are not sophisticated enough to interpret HTML symbols, some are. How do we surpass this hurdle? Let’s try some Javascript.
2. Use Javascript
In this method, we simply break up the email address into four different sections:
- name
- the @ sign
- domain
- extension
Here’s a simple implementation of Javascript to perform this action.
<script type="text/javascript">
name ="you";
domain ="domain";
extension =".net";
document.write('<a href="mailto:' + name + '@' + domain
+ extension +' " ' +' >e-mail link here ');
</script> The above code is fairly self-explanatory. We define three variables: name, domain and extension, and simply concatenate those variables within a document.write statement to the browser. Notice we use HTML’s anchor tags within the write statement, to ensure that the user’s browser interprets the email link correctly.
There’s another problem with using this method… can you figure it out? Javascript is a client-side technology, which means although spiders might not be able to interpret your email address, browsers with Javascript capabilities turned off won’t either. In this case, your email address will not be displayed to the user.
How do we fix this problem? Can we get away with refusing to display any email address? Yes, we can, but we must still provide a way for the user to contact the site owner. The solution is a rather simple email form.
3. Use Forms
The third might be the only fool-proof method of protecting the site owners against spam spiders, and that is simply to refuse to display any email addresses. Instead, if your server supports server-side processing such as Perl, ASP, Cold Fusion or PHP, simply design a feedback form, and call a server-side script to process the data behind the scenes. Spiders can’t dig quite that deep!
I’m a huge advocate of PHP, but choose whatever language your host supports. Please note that if your server does not support any server-side programming language, you’re out of luck in this regard — you’ll have to choose between the two aforementioned methods.
2. Take the Typography Test
A Website is nothing without content, and most content is comprised of simple text. Many Web designers neglect to pay attention to their typography, and it shows. Proper typography varies based on where the text is located on the page, and what purpose it serves. Although there are no rules etched in stone, there are a few general — and in some cases, elementary — techniques that should be followed, but are often ignored.
Headings
Clearly, headings should be larger than your body text by 1 or 2 font sizes. You may consider bold, but be cognizant of the letter width. Arial Black, for example, may create letters that are too fat for your taste, or that of your clients. When you use colored fonts, be sure the colors contrast well with the background color of the site. Black and dark gray don’t contrast well, while black and white (or light gray) can work quite well. Sometimes, even a simple color change can create useful headings.
Also, be sure to cascade your headings. A main heading, for example, would be larger than subheadings. This effect creates a sense of emphasis and flow within the information.
Do not italicize your headings. Italics are meant to underscore particular content, but as the text is a heading and of larger size anyway, italics are redundant and often make the text difficult to read.
Fonts
The default is Times New Roman, which works fine, but many find boring. I’ve experimented with Arial, Georgia and Verdana, and have found Verdana the most readable of these. This is a personal preference, but fonts should be restricted to the above four to ensure compatibility between all the site’s users. If your visitor’s browser doesn’t support your font choice, their browser will revert to its default.
As browsers have increased support for CSS, whenever possible, use Style Sheets to define your fonts, rather than HTML’s <font> tag. Also, be sure to keep your font sizes large enough to be read by visitors of all ages and visual abilities.
Stress Styles
Avoid using all capital letters within text, as this makes it difficult to read and implies that you’re shouting at the reader.
To stress words within body text, decide on a single format and stick with it. Some use bold, while others choose italics or like to underline. My personal favorite is italics, but any of these can work well. Be careful when using underline, however, as this format can be mistaken for a link. And make sure you don’t overuse these stress styles.
Your entire body text should not be bold. Bold, like italics, should be used to emphasise words, and usually an entire section of copy should speak for itself in regularly styled text. I like to use CSS to space my body text out a little to increase readability — give it a try.
3. Metatags Make your Site Search Engine Friendly
Metatag content is still used by many search engines to create for each site a listing that will be displayed when users search the engine on particular keywords. Usually, professional designers include at least three metatags in their sites: title, description and keywords.
<META NAME="Title" CONTENT="Title here">
<META NAME="Description" CONTENT="Description here">
<META NAME="Keywords" CONTENT="Keywords here"> The great thing about metatags is that they’re so easy to implement: simply type the relevant content between the appropriate tags. Though there’s innumerable ways to increase a site’s ranking for particular keywords within a search engine’s listings, metatags are absolutely essential in the search engine optimization process.
4. Provide a Method of Contact
Always, always provide some method of communication by which users can get in touch with the site’s owners. Many Web developers include on their sites email links and feedback forms. This approach serves two purposes:
- it tells users that the people who run the site care about their opinions
- it encourages visitors to share their thoughts and ask questions, which in turn gives the site owner a chance to build a rapport with their audience
Be sure, then, to encourage your clients to check their email often. There is nothing more frustrating for a user than to have to wait a week or more for the site’s owner to respond to their email.
If the server supports a server-side language, like Perl, ASP, Cold Fusion or PHP, you can design a feedback form, or download one from a script repository such as:
5. Design with the Little Guy in Mind
In this day and age, all we think about are the bells and whistles, especially when it comes to slick new designs. Not only are these new technologies often misused, but they can slow the speed of your site dramatically, especially if you use large animated .gifs and complex Flash movies.
Although it’s true that there are now more broadband users than ever, don’t make the mistake of designing specifically for this small audience. There are still 28.8k modem users out there, and if it takes those using low-end connections — the probable majority of a site’s visitors — more than 10 seconds to access a page, they’ll quickly head off to a competitor.
As Web designers, we need to keep our sites simple. Far too many, especially newer designers, have fixed their eyes upon the gold when they have not yet mastered the silver. Only use graphics where you need them. Never use .gif animations unless they’re absolutely, unavoidably necessary. And don’t use large, intricate backgrounds on your pages: they’ll only hinder the readability of text, and increase load time.
The moral of the story is: design with the end user in mind. Assume your users are connected through a 28.8 modem with a 15″ monitor at 800×600 resolution using Netscape. Trust me, your visitors will love (and support) the site for it.
Wrapping it up
We’ve looked at 5 tips every designer needs to keep in mind as we do the work we love. Although communication is essential, steps can be taken to decrease the amount of spam the site’s owner receives.
As designers, we must also make sure our typography is easily readable and logically designed. Moreover, search engine friendly sites are often popular sites, and those who design for the little guy greatly improve compatibility for all potential users — which will only make your clients happy!
Using these tips will lift your sites to another level, and ensure that every visitor gets the content they’re looking for, and every one of your clients is happy with the job.
Source Link: http://www.sitepoint.com/rules-professional-design/