Site Design Web

Making your web site multilingual can help increase traffic dramatically.  The following are some of the points you should consider for making your web pages appeal to a variety of users.

Pages for International and Multilingual Arena

1. Multi-lingual documents or documents in multiple languages are to be made available as parallel hierarchies for different languages.
2. The default language can be offered to the readers through Hypertext Transfer Protocol content-negotiation.
3. Each of the documents in one of the languages should be linked to the documents in other languages.
4. Developers can use Style Sheets while trying to ensure appearance of documents.
5. Style sheets remain invisible in the browsers not supporting them.
6. Style sheets are not detrimental to browsers that do not support this feature.

W3C’s Web Content Accessibility Guidelines suggests for making layouts using Style Sheets. Some browsers have difficulties in displaying layouts with Style Sheets.

Manipulating Style Sheets

Use of frames often slows down the pages. Yet, some developers choose to use them.

Frames in Pages

1. Use of frames requires report for validation as they are not validated as standard HTML.
2. Use of more framesets than one can be avoided.
3. Often JavaScript is used as scripting language for client-side scripting. But such scripting should not deter accessibility to browsers.
4. Inspection of script pages in browsers that does not support the scripting language ensures satisfactory appearance.
5. Script pages SHALL require HTML validation.

An essential part of developing websites is client-side Scripting.

Client-Side Scripting

Validation for every dynamic page generated by CGI, SSI or other server interface, does not seem realistic. However, forms of output are limited and also prescribed.

About Dynamic Pages

1. Dynamic pages follow the same standards described for static documents. Sample outputs of the program stand for dynamic pages. All of the major paths through the program are shown by different sample output pages, and are tested thoroughly.
2. Dynamic pages include inputs from users. Those inputs are beyond control of the developer.
3. Developers should be cautious enough not to hinder user input that jeopardize system security or access to other information on the system.

Developers seldom have control over the display of web sites. Therefore, to avoid distortion of layout, certain norms should be followed. Such norms assure presentation perfect production of web sites. Some of those standards are discussed herewith.

Validation of HTML Document

1. W3C provides online HTML validators. All HTML documents should be checked with that.
2. There are different levels of validation. Some of them are HTML level 2.0 and 3.2 (Wilbur). All specifications are available with W3C. All documents are recommended for validating with respect to the W3C norms.
3. Proper declaration of document type (DOCTYPE) is essential. If DTD is not standard or widely known then DTD needs to refer itself in form of comment within the document.
4. The result of validation should be error free.
5. If errors come out of validation attempt, developer needs to take note of them. The note can be delivered to the HTML document separately. Prior to this action, these notes need to be referenced at the source by a comment. Such comment should justify the invalid construct. The comment should also include how the erroneous code tends to affect text-mode browsers in particular. A reference to an already existing analysis holds sufficient for an established construct which is invalid.

Headers

1. Giving appropriate title to all HTML documents is essential.
2. Other possible header elements in HTML documents can be Style-sheets, Client-side scripts, relational links and META elements.
3. For documents being “front page” or any major entry point for a system the standard recommendations are the following:
   • For web indexers’ assistance keywords and description should be put within Meta elements.
   • “REV=MADE” link demonstrating the developer or maintainer of a document is required to be included.

Use of Tags

1. Use of <blink> is not recommended.
2. <FONT> should not substitute HTML headers <H1> – <H6>.
3. Use of emphasis tags, viz, <FONT>, <B> or <STRONG> is also not recommended for use further in extended passages. These are correct to words and phrases.
4. In an HTML code <H1>…</H1> can be used only once.

Proprietary Markup

General standards: particular cases are dealt with separately below.

1. In an HTML document with respect the existing validation standards; developers can use proprietary tags.
2. Avoiding use of undefined entities is not recommended at all.

It is surprising that many professional web designers who use Dreamweaver don’t know of this simple trick.

Sometimes, a web design customer asks that we make all images bright or dull on the site. To edit every single picture in Photoshop can be a time consuming task. Thankfully, this can be done in a few seconds with Dreamweaver.

We are using Adobe Dreamweaver CS4.

Select “Split” or “Design”  mode at the top left hand:

Click on the image that you would like to edit. Then, click on Properties (Ctrl + F3).  At the bottom right hand corner, you will see the “Brightness and Contrast” Button. Once you click on it, you can change the image.

Please note that this directly changes the images although you can undo your immediate changes by pressing Ctrl+z.

The Result:

Most web professionals could tell you tales of clients who were very difficult to please. I remember a corporate customer for whom we created a unique design that was based on their mock-up version. But, the customer rejected it and asked for more. We ended up showing over 40 different versions! Did it help? No not really, because they decided to choose the first design!

Don’t show too many designs!

Don’t show more than three at once even if you are using ready-made templates. We find that if we show too many at once, often it confuses the person and all designs end up being rejected without any constructive criticism. On the other-hand, if you show 2-3 mockups at a time, then the client can compare each mockup and  give feedback on specific good and bad points. This will allow you to come up with something that matches the client’s requirements.

Do the analysis.

Before you start work, be sure to clarify all the requirements. This includes the type of color scheme (dull,light,bright,sky blue, reddish…), and theme of web site (educational, trendy, company, web 2.0). Ask about any specific live web sites that the client likes. This will allow you to compare your work.

Personalize.

Ask the client about the menu headings, page names, and business name and include those in the design. That way the customer can better understand the general layout and make appropriate suggestions. Also, this adds a personal touch which most people appreciate.

Explain

When you show a mockup, tell the client about some of the benefits and possibilities. Give a basic explanation on what you were trying to achieve. This will create a constructive dialogue between both parties and you will better understand the requirements of your customer.

There are thousands of web companies. Since, it is a largely unregulated industry, there are many unethical companies that attempt to extort money from customers through devious terms and conditions. To avoid this happening to you, we recommend that you consider the following questions:

1) Does the provider offer unlimited mock-ups and unlimited edits?

2) How many pages are included and how much does it cost for extra pages?

3) Will you have access to the source code particularly if it is coded in a dynamic language such as PHP.

4) What happens if there are problems after development?

5) How much is the maintenance contract?

6) How much does it cost to make edits after project is completed?

7) Is the design unique including the pictures?

8 ) Who owns all the files, pictures and text?

9) Will the site design web company use your design for other projects?

10) Is it Search Engine friendly?

World Wide Web (WWW) came into being as Tim Berners-Lee combined Internet with hypertext. In those days hypertext was capable of carrying user inputs like emails, news posting in public forums while browsing information used to be kept in a single computer.

In those days Hypertext Markup Language (HTML) was capable of doing rudimentary activities of giving heading, paragraph and hyperlinks. Its primary objective was to share scientific documents and research papers online. With expansion of Internet from academic and research arena to mainstream and business world, it evolved to enable people to display graphic inputs. In fact, most professionals started using tables and spacers for creating and maintaining page layout.

Numerous problems stimulated out of this type of coding. Often the code of pages used to contain not only tables but also nested tables. Such codes increased the size of HTML documents. Larger documents occupy greater bandwidth than smaller documents. Thus larger documents were reducing the speed of data transfer via Internet. Besides, linearization of tabulated content by screen readers for visually impaired persons or so by search engines results in jumbled content.

The advent of WYSIWYG editors helped professionals and novices to avoid detail know-how of coding with HTML. This editor encouraged indirectly use of nested tables for positioning contents. Due to such practice code happened to be redundant sometimes. Redundancy of code increased manifold because of inefficient designs.

This problem further invigorated by use of slicing tools in graphic editors. This practice often produced poor codes with tables containing many rows of 1 pixel dimension. The resultant codes used to be bigger in size than the actual contents.

In the millennium, the trend of this messy coding practice started to get harder criticism. Simultaneously the urgency for codes without table gained attention of coders.

Cascading Style Sheet (CSS) though existed even before advent of WWW but as a tool of designing remained subdued for quite a long time. To overcome the problems of complex and larger HTML documents, style sheet languages of nine different types were proposed in the www-style mailing list of W3C. In October, 1994, two of the nine languages, viz, Cascading HTML Style Sheet and Stream-based Style Sheet Proposal were proposed by Hakon Wium Lie. Among them, the second can be considered as today’s CSS which can be applied to many markup languages other than HTML.

From the viewpoint of W3C’s Web Access Initiative recommended Web Content Accessibility Guidelines, the tables and nested tables of HTML are not user friendly for physically and intellectually disabled persons. It has also vied for CSS.

CSS helps separating design and content. Tables are passé only with respect to positioning HTML elements on the page. Yet HTML tables are still in vogue for displaying tabulated data of content.

At Site Design Web, we have found that around 40% of all our clients explicitly demand that we don’t use any tables for general layout. It seems that people are becoming more aware of the fact that CSS is a much better and easier alternative to using tables for creating and editing later on.

Generally authors or editors of contents, especially of textual contents, in a web site are from literary background. The technical aspects of Content Management Systems are often beyond reach of them. Yet professionally they cannot avoid manipulating those systems.

Addition of CSS into the functionalities of those systems has enhanced their degree of flexibility. Consequently, submission of contents in specific form does not require knowledge or expertise of editing code written with CSS or HTML. Instead, scope of selecting parameters, viz, number of columns, presence of an image et cetera by contributor enables this system to get into desired layout. It occurs as the input of contributor passes into Content Management System and subsequently it is analyzed by program logic.  The result of such analysis determines the process of applying classes and IDs to the HTML code. Finally, depending on the given number of combinations with respect to a chosen layout type, the result of analysis gives in styling and positioning contents in accordance with a pre-existing CSS. This feature seems very much advantageous with respect to maintenance and feasibility of projects for complex sites with multiple contributors.

Advantageous Features of CSS

1. It separates contents from layout. - Depending on different nominal parameters, it helps in publishing content in different layout. This feature results in varied presentation of a single content in varying formats on different nominal parameters. Some of the nominal parameters are the followings:

• web browsers;
• the display of device which can be monitor of a computer or that of a handheld mobile device
• location of a user,

And more.

1. It offers consistency. – This feature is feasible due to use of global style sheet. When changes on all pages is inevitable, it can be adjusted just by simple editing in few requisite rules in global style sheet.
2. It occupies less portion of bandwidth. – In comparison to HTML documents with nested tables governing layout, CSS results in smaller files. The style sheets are usually stored in browser cache. Thus it is applicable in multiple pages and needs no reloading. Hence it occupies smaller portion of bandwidth with respect to its reduced data transfer over the internet.
3. It is easy for editing formats. – The same page can use different style sheet just by simple change of single line in coding. This feature helps tailoring a page in different display devices. The target devices have no need at all to follow the styling to display the content.

Often, HTML constructs appear incompatible with browsers due to their defects already known. Such defects deter a document to be read in those browsers. Regardless of validity of the HTML constructs, the document can appears illegible in those browsers.

To overcome the difficulties grown due to defects in browsers, some tricks can work for the web developers. They are as follow.

1. Often using < or > inside a tag, in a construct as in the case of <IMG SRC=”imply that.gif” ALT=”=>”> put risks of collapsing parsers. So during coding such uses need to be consciously avoided.
2. Opening and closing comments should respectively be with <!– and  –>. Avoiding “–” or “>” within these delimiters is a preferable practice.
3. Images essential to the document are compulsorily associated with alternative texts. For such images height and width attributes are strict no-no. Height and width attributes in other images are also optional. The images of navigation icons should not use those attributes in particular. Otherwise separate text alternatives to navigation icons can be put on the same page as that of icons.
4. Numeric RGB notation is recommended for defining color of the document in a BODY tag.
5. if situation permits, then, for using a floating image or table, “br clear” should be used before any more images or tables.
6. Some browsers do not support HTML tables. Therefore, the code must have provisions to make the content of the tables legible in those browsers.
7. Closing of HTML containers, viz, such as paragraphs or table cells should be explicit.

The most user friendly web site should never have issues on its legibility. To avoid such issues some common yet serious author errors need to be avoided. To make a design legible in any browser, the don’ts are as follows:

1. The pages with respect to font size, colors, and tables should not depend on particular browsers.
2. Assumptions about browser settings pf target display device are not recommended.

This is an attempt to attain a level of user satisfaction. Absolute user satisfaction is a perpetual source of inspiration of enhancement.

It gives us great pleasure in launching Site Design Web, dedicated to providing information on all things related to design and development.

We have been in this business for over 7 years. In that time, we have worked on over 400 projects with an extremely diverse portfolio. Subjects include company, E-commerce,  personal, artistic, medical, legal, social networking, blogs, hotels, and construction. During this period, we have gained a lot of experience and many skills that we will be sharing with you on this blog.

We will present information on not only creation but also on maintenance, marketing, latest technology, hosting companies, reviews, and other interesting topics.

Our information will be applicable to sites of all sizes including  personal, company, e-commerce or social networking related. We will share with you some of the secrets of making a successful website that will help you achieve your objectives.