|
|
|
Creating Your First Web Site, Part 2
Creating Your First Web Site, Part 2 By Lisa Maliga © 2005 In Part 1 you learned some tips about the basics of starting your site and finding a home for it, now comes the time to properly name it and get it optimized for the search engines so that...
Simplify Your Web Site for Clarity and Ease of Use
There are plenty of web sites out there in which basic elements of design are ignored. The viewer may experience overkill and frustration, instead of gently receiving the message or information. Here are some simple ways to help clarify your web...
Web Accessibility: The Basics
What is web accessibility & why is it important? Web accessibility is about making your website accessible to all Internet users (both disabled and non-disabled), regardless of what browsing technology they're using. In addition to complying with...
Website Development: Become Your Own Expert
Starting and maintaining a business is challenging enough without the additional financial burden of hiring a web site expert to put your vision on paper. If you are starting your business on a “shoe string budget,” hiring someone to take your...
Why Resources Added to a Web site Increase Revenue!
There are literally billions of Web sites online now offering all types of products and services. Some succeed brilliantly, while others fail miserably. There can be many reasons for the failure of some Web sites: poor marketing, poor planning, a...
|
|
| |
|
|
|
|
|
|
Web-site designing Pillars (part2)
WEB-SITE DESIGNING PILLIARS (part 2)
------------------------------------------------------------
copyright (c) Pavel Lenshin
------------------------------------------------------------
USABILITY
Usability is what makes your WS pleasant to deal with.
While everyone defines personally for her(him)self how to
make design nice to look at, memorable (in respect to
branding) and serve customer/business needs in the best way
possible, the technical side of usability can and should be
corrected using the standard requirements.
SOURCE CODE OPTIMIZATION
Firstly about the four problems that come to my mind with
"dirty" HTML source code:
1. Potential cross-browser conflicts as some particular
useless Tags (a piece of HTML source code) may be neglected
by one browser but create some visual errors, when viewed in
other browser.
2. The more useless HTML Tags web-page has, the more drive
space it occupies.
3. As the derivative of the previous problem, the more size
of that web-page, the longer it takes to visitor to load and
view it.
4. Search engines like plain and clear textual information
for easy search and scan. By having a lot of useless pieces
of HTML code, you prevent SE spiders to proper index your
web-pages. The result is the obvious decreasing of your
Search Engine rankings. That is why Meta Tags correcting is
not the only thing you should pay attention to.
Statistic shows that more then 85% of all WSs online demands
graphics or HTML code optimization. That is actually a
common problem, the core of which lies in the use of highly
popular "home" web editors like FrontPage or other.
The "winner" among the worst is well-known Netscape
Composer, due to the extremely "dirty" HTML code it
generates while editing old or creating new web-pages. If
you have ever used Composer and no one have "cleaned" those
web-pages afterwards, they definitely contain a lot of HTML
"garbage".
Based on my own experience every 50Kb Netscape Composer's
web-page can be easily optimized to the 40Kb file size or
less, as a simple result of the deleting junk HTML tags. If
you implement Cascade Style Sheet and HTML compressor you
will get the same, but "clean & shiny" web-page totaling
25-30Kb (40-50% space savings) with the enhanced visual
effects.
The example above shows saving on a single web-page, but if
we speak in terms of 50-60 pages WS, that occupy (without
graphics) 3-5Mb of hard drive space, the potential savings
as a result of HTML optimization may reach 1-3Mb.
So if you are experiencing the lack of hard drive space with
your hosting provider, the solution to that problem lies in
simple WS optimization. It doesn't only save a lot of space,
but, as we know, eliminates potential cross-browser
mistakes, helps SE spiders to properly index your web-pages
and make your visitors' surfing more quick and smooth and
therefore pleasant.
GRAPHICS OPTIMIZATION
When we speak about poorly optimized graphics we get two
problems: more occupied space and worse load time. Given
that the first obstacle may be overcome by acquiring
personal server with several Gigabytes of hard drive space,
the letter problem will continue to exist as the majority of
web visitors have low speed dial-up connection.
To make your graphics optimized on the basic level, you
should save it in the proper graphic format. Many popular
pictures of eBook covers can be easily optimized simply by
re-saving .JPG format into .GIF or vice versa depending on
particular file. That tactic alone can bring 15Kb file to
occupy 7-10Kb in the matter of 2 min.
The basic math shows that 10 optimized pictures (without
HTML optimization) on a web-page are capable to decrease the
overall size of it from 120Kb to 70Kb with no visual loss in
the quality of picture. Are you aware of statistics how many
visitors leave your site just because they are tired to wait
until all pictures load? It doesn't mean that you have to
simply delete these pictures completely as some people
suggest, what it does mean is that they are better to be
optimized because in case with eBook covers, they proved to
triple selling potential and their absence will be hardly
compensated by new visitors.
To choose the right format, follow one simple rule:
"If the target picture is more likely to be a photo, with
many colors, unshaped objects and different lights, this
file should be saved in .JPG format. If, on the contrary, a
picture is more likely to consists of a number of vector
objects like circles, triangles, squares, doesn't have too
many colors or similar to some drown comics,
then .GIF
format is the best to use."
If it is hard to determine, then save it in both formats and
compare quality/size ratio. Not much work, big effect.
Having semi- or fully professional graphic editors will
allow you to get even better results by selecting
compression rate, smoothness, sharpness of edges – if we
speak about .JPG format; or palette, colors, rate of
transparency, animation features etc. – if we deal with .GIF
format.
Today's technological opportunities are vast, so it is you
to decide how deeply you want to "dive in".
CROSS-BROWSER &
SCREEN RESOLUTION OPTIMIZATION
The numbers are the following:
- 2% have outdated 14'' with 640*480 pixels in width and
height respectively.
- 49% of web-surfers use 15" monitors with preferable
"standard" screen resolution of 800*600 pixels;
- 45% surf the web with 17" monitors with reasonable
1024*768 resolution;
- 4% of users enjoy 18-19" monitors with 1152*864-1280*1024
screen settings.
What should these numbers tell you? The very simple thing –
if you created the WS on your 15" monitor, don't assume that
it will look as good on other monitors as on yours.
Let me draw several notes here about the tendency that
monitor market will follow in the nearest future.
First is that all 14" monitors are gradually going to their
deserved eternal rest. Even the share of notebooks with 15"
TFT screens growing exponentially. There are even several
new versions with 16" active matrixes. Don't also forget
that notebooks' 14" TFT screen have almost the same diagonal
inches as usual 15" CRT (Cathode-ray tube) monitors.
Secondly, the number of 15" monitors is also decreasing, due
to growing number of 17" monitor owners that is the third
point.
One sentence conclusion of the above statistics is that your
WS should look fine, at least, under 800*600 and 1024*768
resolutions. This is a market demand to your WS and, as we
know, you better not joke with The Market.
Without going deep into theory, there are two ways:
- more simple;
- more complex.
Both correct, both satisfy the demand above but the letter
way, given it is more complex, usually perfectly fits any
screen resolution, whether it is 14" or 21" and more
favorable to WS space usage.
The easier way would be to make the borders of your web-page
(tables of your web-page) to be fixed with certain number of
pixels.
The most popular settings are something between 650 to 750
pixels just to fit that 800 pixels width screen under the
most popular 15" monitor 800*600 resolution. If you go that
way your web-page will have the same look under different
sets of resolutions.
If we try to see it at 14" monitor with 640 pixels in width,
the unpleasant horizontal scroller would appear because our
fixed setting in 700 pixels is wider then 640 and it just
won't fit in it. If, on the other hand, we look at our
imaginable site under 1152*864 or 1280*1024, it will look
too narrow, as it will occupy only 60% of the screen width
(our 700 in comparison to 1200 screen pixels width).
Why does this designing way simpler? You just won't have any
problems building it: no need for resolution or
cross-browser optimization, as fixed pixels are read
correctly under almost every browser.
The more complex way is to have width of one or several HTML
tables columns on your site to be set in percents like 75%
or 100% and, therefore, poses the ability to automatically
broaden or narrow according to the specified percents,
depending on what screen resolution the site is being viewed
under.
If you have 600*800 screen settings (the screen width is 600
pixels) and one of the table width of your site is set to
100%, then this particular table along with all included
text and graphic will narrow to 600 pixels, if we set the
monitor to 1200*1024 resolution, i.e. having 1200 pixels
wide, our site's table will stretch to the specified 100%,
in that case, 1200 pixels.
That's why it looks more attractive under different
resolutions but demands additional optimization, including
cross-browser optimization, as Netscape Navigator browser
has some problems with proper interpreting of percent
settings in multi column tables. Which way to choose depends
on the tasks and your preference.
I wish you endless creativity and no more then 70Kb per page
;0)
About the Author
Pavel Lenshin is a publisher of "NET Business Magazine",
author of a free "Info Business Online: the easy way" ebook,
web-developer and founder of the http://ASBONE.com/ -
informational portal and provider of discounted Internet
services for small business.
|
|
|
|
|
| Web Development |
| This web summarizes the complete life cycle methodology for web development: planning, analysis, design, implementation, promotion, and innovation. |
| www.december.com |
|
| Web Development |
| Professional Web site design, graphic design, and Internet development services. |
| webdevelopment.com |
|
| Web Developer's Virtual Library: Web Development Tutorials and ... |
| News, tutorials, and reference material focusing on technical web development topics. |
| www.wdvl.com |
|
| Open Source Web Development Tutorials - Dev Shed |
| Open Source web development tutorials, forums, and tools. Topics covered include PHP, Apache, mySQL, Zope, Roxen, Jserv, Zend, XML, DHTML, and Javascript. |
| www.devshed.com |
|
| WebDeveloper.com |
| Hello all, I am new to web development. I have an understanding of website development, but no scripting experience. I have heard of JavaScript, PHP, ... |
| www.webdeveloper.com |
|
| LevelTen Web Design | Professional Website, Flash & Graphic ... |
| Offers logos, web sites, multimedia presentations, and custom media. Quote form. Based in Dallas, Texas. [Requires Flash] |
| www.leveltendesign.com |
|
| Web development - Wikipedia, the free encyclopedia |
| For larger businesses and organizations, Web development teams can consist of ... Since the mid-1990's, Web development has been one of the fastest growing ... |
| en.wikipedia.org |
|
| Web Design - HTML XML - Web Development - Web Site Design |
| Web Design and HTML are all about creating a great Web site. Use Web development and Web site design to build Web sites that customers return to over and ... |
| webdesign.about.com |
|
| Agile Web Development with Rails—Second Edition |
| Dave Thomas, Mike Clark, David Heinemeier Hansson, Leon Breedt, Thomas Fuchs, Andrea Schwarz; Pragmatic Bookshelf, 2006, ISBN 0977616630. |
| www.pragmaticprogrammer.com |
|
| CYGAD's WebDevelopment - Welcome to CYGAD’s WebDevelopment! - The ... |
| CYGAD's WebDevelopment - The finest Resources for WEB-Design, WEB-Master and WEB-Developer! |
| www.webdev.cygad.net |
|
| Web Development Bookmarklets |
| Includes tools for viewing and testing CSS styles, viewing scripts and variables, and showing the structure of a document. |
| www.squarefree.com |
|
| SGI - Freeware - Web Development |
| Links to freeware web development tools, browsers, software, etc. |
| www.sgi.com |
|
| Webmonkey: The Web Developer's Resource |
| Resources for web site developers including how-to guides, code libararies, server technologies and authoring resources. |
| www.webmonkey.com |
|
| Web Development Tools - Web Developer's Journal |
| Tips on Web page design and development, HTML, graphics, scripting, favicon, development tools, Java, sql basics, building web sites, and much more for ... |
| www.webdevelopersjournal.com |
|
| Web Developer's Handbook | CSS, Web Development, Color Tools, SEO ... |
| Web Developer's Handbook is a list of essential web-sites, which make the life of web developers easier. Compiled and updated by Vitaly Friedman. |
| www.alvit.de |
|
| Ceonex Web Development & Web Design - Full Service Digital ... |
| Web design, web development, online branding, application development and other full service business solutions focused on prospect conversion and customer ... |
| www.ceonex.com |
|
| Cayenne Web Development - web design agency, Oxfordshire, UK |
| Specialist web design agency based nr Banbury, Oxfordshire, offering a complete website design and development service. |
| www.cayenne.co.uk |
|
| Web development mistakes | 456 Berea Street |
| When I visit a website, especially if it’s the site of a competitor or a prospective client, I like viewing… |
| www.456bereastreet.com |
|
| Web development mistakes | 456 Berea Street |
| Articles and news on web standards, accessibility, usability, and other things related to web development and web design. |
| www.456bereastreet.com |
|
| Anil Dash: Web Development Trends for 2006 |
| Here, then, is a random assortment of new web development trends to be ready ... Web Development trends 2006: Überblogger Anil Dash maakte (een paar weken ... |
| www.dashes.com |
|
|