tag:blogger.com,1999:blog-49014658803961249232024-02-20T00:06:54.786-08:00W3 InfosoftW3 Infosofthttp://www.blogger.com/profile/09532053712827371580noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-4901465880396124923.post-87452110831361539932012-04-20T00:46:00.001-07:002012-04-20T04:24:49.637-07:00Basic Tips for Web Designing<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Graphics</h2>
<div>
<ul style="text-align: left;">
<li><span class="Apple-style-span" style="font-size: 19px;"><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;">Think small</span><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;">,
like 10-12KB per image. Yes, depending on the source, the number of broadband
users is going up. But slow pages are still really annoying, even if
you're on a T1. And huge images are a primary cause of slow pages. It's easy to optimize
your images.</span></span></li>
<li><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 15px;">Always use graphics that fit the content. Just because you have an
adorable photo of your dog doesn't mean you should have it on your Web site
about Web Design (sorry, Shasta...). The main exception I would make to this is
for "design" images. These are photos or graphics that help make up the
design of the page, and are not intended to illustrate the content.</span></li>
<li><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 15px;"><span style="font-family: Arial, sans-serif;">Do not use
images that blink</span><span style="font-family: Arial, sans-serif;"> or move or change or rotate or
flash or do anything on your page. Or use them <i>sparingly</i>. There
have been many studies that show that flashing graphics are distracting and
annoying to people. In fact, in one focus group I watched the browsers actually
physically cover up flashing graphics so that they could read the rest of the
page.</span></span></li>
</ul>
<h3 style="text-align: left;">
Layout</h3>
<h3 style="text-align: left;">
<ul style="text-align: left;">
<li><span class="Apple-style-span" style="font-size: small; font-weight: normal;"><span style="font-family: Arial, sans-serif;">Stick with
standard layouts</span><span style="font-family: Arial, sans-serif;">. I've seen some pages that use 6 or
8 frames on one page. Another site used a layout where you had to scroll to the
right to read everything on the page (but you never had to scroll down). These
layouts are cute, and you might find them fun to build, but they will drive
your readers nuts. The reason that the 3-column layout is so popular
on Web sites and newspapers is because it works. You might think it's boring,
but you'll keep more readers if you stick with something simple that they can
understand.</span></span></li>
<li><span class="Apple-style-span" style="font-size: small; font-weight: normal;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><span style="font-family: Arial, sans-serif;">Whitespace is more than the CSS
property, it is a function of your layout. You should be aware of the
whitespace on your pages and how it affects how the content is viewed. Whitespace is just as important in a Web
layout as it is in a paper layout.</span></span></span></li>
<li><span class="Apple-style-span" style="font-size: small; font-weight: normal;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;">Use your
graphics as elements in your layouts</span><span style="font-family: Arial, sans-serif;">. Graphics can be more than just
graphics when you use them as actual elements in your layouts. An extreme example
is when you wrap text around an image, but any image you have on your site is a
layout element and should be treated as such.</span></span></span></span></li>
</ul>
</h3>
<h3 style="text-align: left;">
Fonts</h3>
<div>
<ul style="text-align: left;">
<li>Serif for headlines and <span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;">and Sans-Serif for text</span><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;">. If you've taken any type of print design, this
might be exactly the opposite of what you were taught. But the Web is not
print. Sans-serif fonts are much easier to read on computer monitors because
the screen resolution is not as high as in print. If you use serif fonts for
normal text, the serifs can blur together on the screen making them hard to
read. <span class="Apple-style-span" style="line-height: normal;"><span style="font-family: Arial, sans-serif;">Your printer friendly page should
use the opposite fonts (serif for headlines and sans-serif for text).</span></span></span></li>
<li><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;"><span class="Apple-style-span" style="line-height: normal;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><span style="font-family: Arial, sans-serif;">Limit the
number of different fonts</span><span style="font-family: Arial, sans-serif;">. One of the best ways to make your
Web site look amateurish is to change the font over and over. Sure, it's
possible to do, but limiting your page and site to 2 or possibly 3 standard
font families is easier to read and looks more professional.</span></span></span></span></li>
<li><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;"><span class="Apple-style-span" style="line-height: normal;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><span style="font-family: Arial, sans-serif;">Use standard
font families</span><span style="font-family: Arial, sans-serif;">. Yes, you can choose to use "Rockwood LT
Standard" as your font on your page, but the chances that one of your
readers will have that font as well is pretty low. Sticking with fonts like
Verdana, Geneva, Arial, and Helvetica may seem boring, but your pages will look
better and the designs look correct on more browsers.</span></span></span></span></span></li>
</ul>
<h3 style="text-align: left;">
Advertising</h3>
<h3 style="text-align: left;">
<ul style="text-align: left;">
<li><span class="Apple-style-span" style="font-size: small; font-weight: normal;"><span style="font-family: Arial, sans-serif;">Don't be
greedy</span><span style="font-family: Arial, sans-serif;">. If you have any control over the number of ads on your
site, be aware that your readers are not coming to read the ads, they are
coming for the content. If the ads overwhelm the page content, many readers
won't stick around long enough to read your purple prose. Yes, it's important
to make money from your Web site, but if your ads drive people away,
you'll ultimately lose money.</span></span></li>
<li><span class="Apple-style-span" style="font-size: small; font-weight: normal;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;">Treat ads
as you would any other image</span><span style="font-family: Arial, sans-serif;">. Keep them small, avoid
blinking/flashing, and keep them relevant. Just because you can have an ad on
your site, doesn't mean that you should. If the content is relevant to your
readers, they're more likely to click on the ad.</span></span></span></li>
</ul>
</h3>
<h3 style="text-align: left;">
Remember your Readers</h3>
<div>
<ul style="text-align: left;">
<li>Test your pages <span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;">in multiple browsers</span><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;">. Writing Web pages that work only on the most modern
browser is both stupid and annoying. Unless you are writing a Web site for a
corporate intranet or a kiosk where the browser version is completely fixed,
you'll have problems with people not being able to view your pages.</span></li>
<li><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;"><span class="Apple-style-span" style="line-height: normal;"><span style="font-family: Arial, sans-serif;">The same
is true for operating systems</span><span style="font-family: Arial, sans-serif;">. You can't assume that just because
your page works in IE5.0 for Windows it will work in IE5.0 for Macintosh.</span></span></span></li>
<li><span style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;"><span class="Apple-style-span" style="line-height: normal;"><span style="font-family: Arial, sans-serif;"><span style="font-family: Arial, sans-serif;">Write
content that they want</span><span style="font-family: Arial, sans-serif;">. Unless you're writing a site
purely for yourself (and if you are, why is it posted to the Web?), make sure
that your content covers topics that your readers want to read.</span></span></span></span></li>
</ul>
<h3 style="text-align: left;">
Search Engine Optimization</h3>
<div>
<ul style="text-align: left;">
<li><b><div style="display: inline !important; text-align: left;">
<span class="Apple-style-span" style="font-weight: normal;">Always enter title, meta keywords, meta description in your web pages for better search engine optimization.</span></div>
</b></li>
</ul>
</div>
</div>
</div>
<div>
<span class="Apple-style-span"><b></b></span></div>
</div>
</div>W3 Infosofthttp://www.blogger.com/profile/09532053712827371580noreply@blogger.com0