Web typography

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the <font> tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or mono space font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities.

The CSS2 specification was released in 1998 and attempted to improve the font selection process by adding font matching, synthesis and download. These techniques did not gain much use, and were removed in the CSS2.1 specification. However, Internet Explorer added support for the font downloading feature in version 4.0, released in 1997. Font downloading was later included in the CSS3 fonts module, and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in Web typography, as well as the usage of font downloading.

The core purpose of all web design is communication. Whether we’re talking about an online retail store, a web presence for a Fortune 500 company, or a profile for a social networking site, typography is a vital component. For most people, typography is simply about arranging a familiar set of shapes to make words, sentences, and paragraphs. Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium.

There are numerous obstacles to the effective customization of typography for the Web—and I’ll address these in the coming pages—but the power of type should be motivation enough to push the proverbial envelope. Unconvinced? Pick up a magazine, turn on a television, or take a walk through a grocery store. You will undoubtedly see hundreds of creative and effective uses of type. It is the substance of branding, the key to unspoken communication, and an essential piece of the web design pie.

In order to unlock the potential of type, we must first understand it. Admittedly, this is no easy task. The minute details of letter forms and the spaces around them have been carefully calculated over centuries of investigation and practice. In the early days of print, every letter of every typeface had to be carved into wood or cast from lead, inked, and then pressed into paper. This was a handcrafted profession requiring exacting attention to detail. Even though the practicality of this practice has long been surpassed by modern printing methods, many colleges and universities offer classes in letterpress, so that future graphic designers can both appreciate the benefits of working with type on a computer, and see the potential for typographic exploration.

The history and implementation of type is a topic that could fill hundreds of books—and indeed, it has. In this chapter, though, I’ll merely provide a brief introduction to the world of typography.

Colors and graphics- computer color basics

Color Temperature

One attribute that exists across the entire spectrum is the notion of color temperature. Which color faucet gives you hot water? What color do you associate with ice? Why? The answers are obvious, and are enforced by both culture and nature.

Chromatic Value

The measure of the lightness or darkness of a color is known as its chromatic value. Adding white to a color creates a tint of that color. Likewise, a shade is produced by adding black to a given color.

Color Theory 101

To take our foundational knowledge of color any further, we’ll need to gain a grounding in some of the more technical concepts associated with the subject, such as how colors are formed and how they can be categorized.

The colors displayed on your computer screen (that is, the colors we’ll be using in our website designs) are based on an additive color model. In an additive color model, colors are displayed in percentages of red, green, and blue (RGB) light. If we turn all three of these colors on full blast, we’ll have white light. If we turn red and green all the way up, but switch off blue, we have yellow.

Red, Yellow, and Blue, or CMYK

I’m constantly amazed by the lack of respect that exists for the red, yellow, and blue primary color wheel. I’ve heard people call it invalid, archaic, and a kindergarten tool. It’s true that the red, yellow, and blue color wheel is not a scientifically accurate model of the perception of light. Many people want to eliminate the red, yellow, and blue color wheel from art curricula, and establish the CMYK color wheel, shown below, as the universal color model. Note that the secondary colors in the CMYK color wheel are red, green, and blue, meaning that we could use the CMYK to illustrate both additive (using light) and subtractive (on paper) color.

The Scheme of Things

Currently, we know enough about colors to talk about their values, intensities, psychological associations, temperatures, and locations on the traditional color wheel. That’s all well and good, but how do we find multiple colors that work together? This is where color schemes come in handy. Color schemes are the basic formulae for creating harmonious and effective color combinations. Six classic color schemes exist:

• monochromatic
• analogous
• complementary
• split complementary
• triadic
• tetradic (also called double complementary)

Creating a Palette

“A palette?” you might ask. “Isn’t that the same as a color scheme?” Well, yes and no. A color scheme will only give you two, three, or four colors to work with. Although a limited palette can be beautiful, you’re probably going to need a few more colors to design your website. It’s better to nail down this process while you’re thinking in the language of color, rather than pick ancillary colors at random as you need them for your layout. The number of colors you’ll need will depend on the complexity of your design. I like to start off with at least five or six solid color choices before I even think about applying them to my layout.

Hexadecimal Notation

Since this is the stage in which we become specific about each color we’re choosing, we’re going to need a standard way to refer to the colors in our palette. You probably already know about hexadecimal RGB color values, but if you don’t, here’s the quick drive-through version of the theory.

Diagram the site – planning the site navigation

The thing that makes navigation difficult to work with in Web design is that it can be so versatile. Navigation can be simple or complex: a few main pages or a multilevel architecture; one set of content for logged-in users and another for logged-out users; and so on. Because navigation can vary so much between websites, there are no set guidelines or how-to’s for organizing navigation.

Designing navigation is an art in itself, and designers become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.”

Organizing Navigation Structure

Perhaps the most difficult part about navigation on the Web is organizing and designing it. After all, coding it can be relatively easy. In this first section, we’ll go over some methods and best practices for organizing navigation, which can lead to a more intuitive user experience and higher conversion rates.

Primary vs. Secondary

Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of anyone menu. All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.

Primary navigation stands for the content that most users are interested in. But importance is relative; the type of content linked from the primary navigation on one website may be the same kind linked from the secondary navigation on another (for example, general information about the company or person).

Secondary navigation is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. For many blogs, this would include links for “About us,” “Contribute,” “Advertise” and so on. For other websites, the links might be for the client area, FAQ or help page.

The first job in organizing navigation is to organize the content. Only after the content has been organized can you determine what is primary and what is secondary, and then you can determine the location and navigational structure of any remaining content. Content that fits neither the primary nor secondary navigation can go in other menus, whether a sub-menu, footer menu, sidebar widget or somewhere else. Not to suggest that primary navigation cannot go in these areas of the page; there are many instances where primary navigation is best suited to the sidebar or in drop-downs.

Also ask whether navigation is even needed beyond the primary menu? If a secondary menu is needed, then why and what’s the best way to implement it? No matter how organized the content is, if there’s a lot of it and thus a need for a more complex navigational structure, then distinguishing between primary and secondary content can be daunting. Fortunately, there’s a great method that designers can try: card sorting.

Grouped Content: Classification Schemes

When a lot of content is grouped in one category, another issue arises: what order to put it all in? Card sorting and similar methods may help to create groups and a hierarchy and to differentiate between top-level and sub-levels of navigation, but how should content within those groups be ordered? Alphabetically? By most used or most popular? Most recent to oldest?

Below is a list of the most common content classification methods, along with suggestions for what each is best for:

• Most recent to oldest

Suitable for time-sensitive content.

• Alphabetical

Great for when the user needs to find something fast. This includes definitions, indexes and other content that users know about before they find it.

• Most popular or most used

Great for interest-based browsing, rather than content that users need.

• Geographical

Is certain content irrelevant to certain regions or subregions?

• In the order of the process

If the content in some way represents a process (for example, “How to file your taxes”), then it could be organized according to the order of actions the user has to take. FeverBee has a great example of this: “How to Build an Online Community: The Ultimate List of Resources.” While the website is a blog, the content isn’t necessarily time-sensitive, so the author has created a great navigational structure that puts much of the content into a step-by-step process.

Navigation And User Levels

For websites where navigation changes based on whether a user is logged in or out, other organizational challenges arise. Some websites may have a simple client area, while others have full-fledged communities. When this kind of interaction is involved, user roles and available content may vary, and owners may want to highlight some content or design it differently.

Below are a few tips for organizing navigation across membership levels:

• What user levels are there?

Many website owners plan this out ahead of time, and it depends greatly on their business model. As the designer or developer, make sure you know what navigation levels are needed, and keep the content in them straight.

• Design and plan for each level separately.

Don’t wait until the membership area is set up before considering the navigation structure of the levels. How should content be organized for logged-out users? How should it be structured for logged-in users? Administrators vs. basic members? Free accounts vs. paid accounts?

• What content should each type of user be able to access?

A logged-out visitor will want to know more about the community or service. A logged-in member will already be convinced, and so the primary navigation for them should reflect what is available with their membership. Is there special content for paid members, and should it be highlighted to be more visible? Should special links or content be shown to logged-out administrators, or will that all be taken care of once they log in?

Planning for different user levels can be done with the same methods outlined for primary and secondary navigation. Card sorting can be helpful for each level. Think about what the primary navigation should be, what the secondary navigation should be, where everything should go (i.e. hierarchy), and how menu items should be labelled.

Planning the site - File naming and URL’s – Directory structure

Web designs are growing increasingly complex, and keeping a visitor’s attention is getting harder and harder. Thinking about it from the perspective of a Web surfer, there are a few key things to consider these questions:

When you visit a site, how long do you wait for a page to load before you become impatient and close down the window? How much are you willing to read on a page before it becomes too “wordy”? How many times can you watch the same spiffy graphic on a page before it becomes boring? What color combinations quickly become irritating or hard to read?

Plan and Design Your Site

When you begin to build a data-driven site, it becomes more important than ever that you take the time to plan and design your site. Too many people jump right into building pages without properly considering the details of what they plan to do. Not only will a lack of planning impact the quality of your final product, it may get you into a sticky situation with a client whose ideas about the site were different than yours. Building a Web page is easy, but building a Web application, possibly with a database backend, is no trivial task, and proper planning is a necessity. From the server type to the database type to the language you are going to use—these are all considerations when planning out your Web site. You might have a background in Visual Basic but decide that the features of a ColdFusion site make it more cost-effective to do the site in ColdFusion. Or maybe you have access to JSP and MySQL but only know ASP. Dreamweaver MX 2004 works with five server technologies, so the environment is friendly to whichever server you choose.

Once you’ve decided on a course of action, however, you can’t easily change midstream. Dreamweaver doesn’t have any built-in functionality for changing from one server technology to another or from one language to another if you are building an ASP site. It pays to plan your site in detail before building the pages. Although the techniques for building the pages are the same, the code that’s used in creating the functionality in the five server models is completely different.

File naming & URL=’s

The following should be guaranteed:

• Unique and meaningful names for all files, displaying some basic information about its content.

Example: NUMDAM [[13] ] uses a file naming scheme like

for journal volumes: journal-acronym_year_series_volume_issue         for articles: volume-id_first-page_order

(different fields separated by '_'). This scheme allows to assign to any possible NUMDAM file (at logical units level: serial, volume, issue, article) a unique ID, making it robust and general.

• Conventions for file name length have to be obeyed.

• File name conventions should be made public for each DML server.

Explanation: Since there will be numerous single DML projects, and since it seems too optimistic to expect that there will be a unique naming scheme for all projects/servers, a prefixing method identifying the project/server is recommended.

• Stable URLs for all documents.
• Stable and possibly uniform appearance of web pages for all servers (possibly organized in a Math-Net like manner) (ordering scheme governed by MSC 2000 [[1] ]),
• Uniform access techniques for all documents,

Directory structure

In computing, a directory structure is the way an operating system's file system and its files are displayed to the user. Files are typically displayed in a Hierarchical tree structure.

Filenames and extensions

A filename is a special kind of string used to uniquely identify a file stored on the file system of a computer. Before the advent of 32-bit operating systems, file names were typically limited to short names (6 to 14 characters in size). Modern operating systems now typically allow much longer filenames (more than 250 characters per path name element).

Website design principles - File formats

No matter which photo-editing program you use, to prepare images for the Web, you’ll need to know a few basics about the standard image file formats and when each should be used. Currently, three image formats are widely supported by web browsers: JPEG, GIF, and PNG. Choosing the format that’s right for your image is a matter of determining which will provide the smallest file size for the highest quality image.

JPEG

JPEG (.jpg) is an image compression format that was developed by the Joint Photographic Experts Group specifically to store photographic images. Unlike GIF and PNG images, JPEGs can provide fairly small file sizes at 24-bit color. This makes them great for any type of photography, or graphics with heavy textures or long gradients. Although there’s no limit to the number of colors the JPEG format can display, it’s a lossy format that can create visual artifacts depending on how much you compress the file. When saving a .jpg file, you’ll have to carefully consider the amount of compression you apply.

GIF File

GIF

GIF (Graphics Interchange Format) is an 8-bit format that compresses files on the basis of the number of colors in the image. Although the compression ratio of the GIF format is good, it supports a maximum of only 256 colors, and is therefore useless for photographic pages.

PNG

The PNG (Portable Networks Graphics) format was developed by the W3C as an alternative to GIF. The lossless compression style of the PNG algorithm works similarly to that of GIF, in that files with fewer colors end up having the smallest file sizes. PNG images can be saved in either 8-bit or 24-bit format. Both of these flavors of PNG support transparency, but transparency in 24-bit PNG images is implemented by means of an alpha channel that sits alongside the red, green, and blue channels; this means that each pixel in a PNG image can have up to 256 different levels of opacity.

Uploading and Downloading Web Pages

CuteFTP Screenshot

In computer networks, to download means to receive data to a local system from a remote system, or to initiate such a data transfer. Examples of a remote system from which a download might be performed include a web server, FTP server, email server, or other similar systems.

A download can mean either any file that is offered for downloading or that has been downloaded, or the process of receiving such a file.

It has become more common to mistake and confuse the meaning of downloading and installing or simply combine them incorrectly together.

The inverse operation, uploading, can refer to the sending of data from a local system to a remote system such as a server or another client with the intent that the remote system should store a copy of the data being transferred, or the initiation of such a process. The words first came into popular usage among computer users with the increased popularity of bulletin board systems (BBS), facilitated by the widespread distribution and implementation of dial-up internet access in the 1970s.

Definition

The use of the terms uploading and downloading often imply that the data sent or received is to be stored permanently, or at least stored more than temporarily. In contrast, the term downloading is distinguished from the related concept of streaming, which indicates the receiving of data that is used near immediately as it is received, while the transmission is still in progress and which may not be stored long-term, whereas in a process described using the term downloading, this would imply that the data is only usable when it has been received in its entirety. Increasingly, websites that offer streaming media or media displayed in-browser, such as YouTube, and which place restrictions on the ability of users to save these materials to their computers after they have been received, say that downloading is not permitted. In this context, download implies specifically "receive and save" instead of simply "receive". However, it is also important to note that downloading is not the same as "transferring" (i.e., sending/receiving data between two storage devices would be a transferral of data, but receiving data from the Internet would be considered a download.

Domain Registration and Hosting Website

What is Domain Registration?

Domain registration is the process by which a company or individual can secure a website domain, such as www.yoursite.com. Once you have completed domain registration the domain becomes yours for the period of the contract, usually one year. Before registration expires it must be renewed, or the domain reverts back to being available to the general public.

The Internet Corporation for Assigned Names and Numbers (ICANN) manages the international Domain Name Server (DNS) database. ICANN insures that all registered names are unique and map properly to a unique Internet Protocol (IP) address. The IP address is the numerical address of the website that tells other computers on the Internet where to find the server host and domain.

Domain registration is available to the public via a registrar. Fees and services vary from company to company, but the process is generally inexpensive. Before a domain registration can be approved, the new name must be checked against existing names in the DNS database. The online registrar provides a field into which you can enter your desired name and hierarchy —- that is, the letters that come after the "dot." Familiar hierarchies are .com, .net, .org, .name, .info and .biz. If the name is not already taken, it is available for domain registration.

During the domain registration process, you will be required to give contact information that will be publicly available through the WHOIS database. Anyone can go to a WHOIS search engine and enter a domain name to see who has registered it. Registrars require that this information be accurate and true. If you feel uncomfortable providing personal information, there are some registrars that will act as your proxy, supplying their information in place of your own as the contact for the domain. There may be a small fee for this service and potential drawbacks to balance against the ability to maintain your privacy, so read the Terms and Conditions carefully before deciding to opt for a domain by proxy.

Also important, be sure you will own the domain name, as some registrars maintain control over the domains they register. And be sure you retain the option to transfer the domain to another registrar, if you wish. There might be an initial period after which this becomes possible. Look for any fees that might be incurred as a result of transferring the domain. This could become important down the road if you wish to take advantage of another registrar's products or services.

Upon completing the domain registration process, it will take a period of hours to a few days to be able to see the domain online. The domain can be "parked" with an "in construction" page that acts as a kind of placeholder. Parking a domain is very inexpensive and most registrars offer this service for a small fee to give you time to come up with content. Once a registrant is ready to supply content, a web server must host the domain. The registrar might also provide hosting services, or you may wish to transfer your domain to another web hosting company.

What is Web Hosting?

Since its inception in 1991, internet is flourishing tremendously and cheap web hosting providers are responsible for all this development. Immense development has been achieved over the course of last 11 years. Its relation with World Wide Web is also very important. We can say that with the e-commerce, entertainment and plenty of opportunities, web hosting is one of the greatest technical innovations of our time. World Wide Web revolutionized the internet world within short span of time.

In the early days, internet was confined to the computer experts, universities and government agencies. But with technological development and affordability of acquiring personal computer, internet usage becomes more common. The concept of web hosting also came on the cyber scene during this evolutionary period. Web hosting made it much easier for the consumers to obtain the domain names and web pages. The web hosting supported the static pages and dynamic pages at the same time. Web hosting companies provide the space for the web sites on their server. They also provide internet connectivity.  Free email address search website.

Web hosting used to be very simple yet expensive at the early stages of its inception. Responding to the diverse needs of customers, web hosting too becomes more technical and a bit complex. Now its quite an easy thing to build and administer a web site. Web hosting has also become competitive. There was a time when web hosting was only considered to be corporate sector or institutional solution. Today, everyone can make his own website and for personal as well as for business purpose.

Web hosting was quite simple in the beginning but it has now become more diverse. It has so many different solutions and packages that one need to master it to make good use of it. The advent of audio-visual applications has added great freedom of entertainment to web hosting world. Web hosting is catering to whole world.

Web hosts provide many facilities in web sites. You can have the data center space and internet connectivity with the web hosting. There are various types of web hosting like dedicated web hosting, shared hosting and colocation hosting etc. All these web hosting are good and the selection of the web ghosts depend on the needs and requirements of your business and web sites. Web hosting has brought a new concept to online world and has taken-away all the worries, hassles and complexity of managing website.

Web Production Process

This process is intended to guide the production process from start to finish. Each step indicates, briefly, who/what/how responsibilities are delegated and how we structure development. Depending on the project, adjustments to the process will be determined during the “kick-off” meeting.

Step 1: Request for Service

Site Owners/Client:

1. Make a request for changes, additional pages, etc...

2. Include a summary of your objectives – develop “big picture” goals and consider who your audience will be.

Step 2: Kick-off Meeting – Project Scope, Goals, and Action Items

Site Owners/Client:

1. Present project request and include objectives

2. Share any content revisions, samples, and/or thoughts that will help illustrate your request

Web Team:

1. Question/Answer session – Make sure the request is fully defined

2. Discuss initial ideas on technology implementation, presentation, and organization

3. Review the production process

Action Items:

1. Finalize objectives

2. Create a rough draft of the project schedule, including content deliverables

3. Create project specification documentation, including definition of roles and responsibilities

Step 3: Production - Content

Site Owners/Client:

1. Collect, author, and proof content – some information will need to be directed to the Publications Office

when applicable

2. Submit content to the web team – digital documents required, due at specified deadline

Step 4: Production – Structure and Technology Strategy

Web Team:

1. User Experience – Review content and organization, build web structure

a. Editorial pass – check for terminology, duplication, and presentation

b. Build new web-based outline

2. Technology Strategy – determine methods, standards, and implementation goals

3. Update project specification document, post

4. Meet/Review if necessary to explain structure and technology strategy

Step 5: Production – Design and Implementation

Site Owners/Client:

1. Help coordinate any photo or video sessions

2. Generate any additional content – student testimonials, faculty quotes, etc...

Web Team:

1. Design and develop pages and media

2. Publish

3. Test

Step 6: Review

Web Team:

1. Request meeting

2. Review goals and implementation decisions

Site Owners/Client:

1. Review – depending on project scope, this can be accomplished during the meeting or reviewed

afterwards at the convenience of the site owners. A date will be set for completing the review and requesting

any edits.

Step 7:

Publish Project – Project is “live”

Step 8:

Updates and Feedback

Collect feedback at anytime to determine future improvements. Updates will be implemented in a timely manner and will depend on scope of changes. Use the webmaster email to request any small improvements.