|
|
|
10 Shocking Secrets Nobody Will Ever Tell You About Having a Successful Business Web Site
There are many web designers who are honest and will tell you exactly what you need to do to have a successful web site. Yet, there are others who want to create some fancy gadgets on your site, charge you a fortune, and completely rip you off......
Empower Web clients, Increase your profits
Static Websites, Static Content In the early days of websites and webdesign, if (when) there was a need to change, add or modify published information on a clients website we'd get a call (or email) from the client with a markup of proposed...
How to Prepare Images for Your Web Site – Part 1
You are staring at the your monitor waiting for the image to download. It finally appears but it has blurry edges. You go to the next page but can't read the text because of the dark image in the background. The next page has animated images, that...
Making The Business Case For Web Standards
Through the explosive growth of the Web, companies have realized the benefit of building a strong online presence. By publishing a website to the Internet, companies are able to build their brand, market their products, support existing...
Your Web Site - Do It Yourself? or Get Serious!
FACT: Your web site appearance can make you thousands of dollars OR it can kill your business - DEAD! Why is it so crucial? Given a choice of restaurant, which one would you enter? The one with the entrance under construction, the bizarre color...
|
|
| |
|
|
|
|
|
|
How to Prepare Images for Your Web Site – Part 1
You are staring at the your monitor waiting for the image to
download. It finally appears but it has blurry edges. You go to
the next page but can't read the text because of the dark image
in the background. The next page has animated images, that don't
seem to stop. The spinning globes keep spinning. The last page
has a large graphic on it, which is a link. You click on it for
more information but it goes nowhere. You leave the site in
frustration.
Images are an essential ingredient for Web Site design.
You want visitors to have an aesthetically pleasing
experience. Properly preparing your images is necessary to
enhance the appearance of your web site. In Part I of this
article I will explain:
When to use images for your web site.
What image file formats should you use on the Web.
When to use images for your web site - Navigation
Graphical buttons can link to other pages or resources.
Image Maps – this is a graphic that contains several links on
it. It has several "hot spots" or invisible buttons, you can
click on. For example you could have a photograph of your family
and put a hot spot on each person's face that links to that
person's web site.
Logos and Trademarks – your business or organization's trademark
are crucial for name recognition and branding.
Thumbnails – this is a small, "thumbnail-sized version of an
image. When you click on it, you jump to another page with a
larger version of the same image. The visitor can see many
different, small images on the first page without having to wait
for larger files of the larger images to load.
What are the different image file formats?
Web graphics can be categorized into two file formats:
bitmap and vector.
Bitmap – these are composed of individual values for each color
displayed. The larger the dimensions of the image, the larger
the associated file size will be for the same graphic. When
viewed with magnification, a bitmap resembles a series of little
squares, each of which has a color value that contributes to the
overall shape. Bitmaps have a very rough appearance when viewed
closely but form images when viewed from a distance.
Bitmaps are best suited for photos, drop-shadow effects and
soft, glowing or blurry edges.
Vector – these store information about the image in mathematical
instructions that are then interpreted and displayed.
Vector graphics are best suited for line art, shapes and
illustrations.
Image File Formats
Graphic file formats used on the Web are GIF, JPEG and PNG
Graphics Interchange Format (GIF)
GIF is a platform-independent file format that is limited to a
display of 256 colors. GIF has been adopted by most developers
because of its small file size.
GIF is considered a "lossless" format. This means that as the
image is compressed, no information is lost.
Types of GIFs
Animated GIF (89A) This 89a version of GIF allows
storage
and playback of a sequence of still images to create the
illusion of animation. Animated GIF files consist of sequential
frames that reload from a browser's cache and replay in an
infinite or predetermined loop to simulate motion.
Transparent GIF
An advantage that a GIF has over a JPEG image is that the
designer can designate a color of the GIF image to be
transparent. For example, you can create a circular logo in a
square image by making the background color transparent. The
image appears circular, when, in fact, it is square with
information to appear transparent.
Interlaced GIF
Graphic interlacing (the progressive rendering of images)
is unique to GIFS and is the preferred method for
display of large graphic files. Many people find the
"fuzzy-to-sharp" animated effect of interlacing visually
appealing, but the most important benefit of interlacing is that
it gives the reader a preview of the full area of the picture,
while the picture downloads into the browser.
When to use a GIF
Buttons, bullets and navigational tools that accent your
Web pages. Interlacing is best for larger GIF images
such as illustrations and photographs.
Joint Photographic Experts Group (JPEG)
Graphics in the JPEG format are capable of much greater color
depth than GIFs, but usually require more time to download.
JPEG can contain up to 24 bits of color information
(16.7 million colors). Remember though, that most users are only
capable of displaying 8-bit color.
When to use a JPEG
JPEG enables you to use brilliant colors and provides support
for complex images and digitized photographs but it is not
designed for use with simple images.
JPEG compression is not as effective as GIF compression and may
distort images with few colors or large areas of the same color.
JPEG compression is therefore not designed for low-resolution
images.
Portable Network Graphics (PNG)
The PNG file format is emerging as the new format for Web graphics.
PNG files are lossless and support transparency like GIFs, yet also
support compression and high bit depth like JPEGs. In addition,
PNG bit depth can be adjusted, unlike GIFs or JPEGs, which must
be 8-bit and 24-bit depth.
When to use a PNG
PNGs behave similarly to GIFs and work best with flat-color,
sharp-edged art. PNGs compress both horizontally and vertically,
so solid blocks of color generally compress best. They also support
better interlacing than interlaced GIFs.
Knowing what types of graphics to use and when to use them for
your web site will help you avoid the many pitfalls of bad web
design.
Part 2 of this article will discuss how to optimize graphics for
your web site and factors that affect optimization.
About the Author
Herman Drost is a Certified Internet Webmaster (CIW) owner and
author of iSiteBuild.com
Low Cost Hosting and Site Design
(http://www.isitebuild.com/sitehosting.htm)
|
|
|
|
|
| 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 |
|
|