Cool Website Design Tips The newsletters are extremely useful in promoting both web pages as established businesses. This involves the use of email as a means of advertising and marketing.
At present, electronic newsletters have become more sophisticated in their design -
Izrada sajtova, largely due to the continued expansion of bandwidth private connections, allowing users to have the possibility to download some additional elements in their emails electronic.
The bulletin should be designed bearing in mind that email users spend a few seconds to view the content thereof. This makes the visual design, the first impression the reader is of utmost importance.
There must be a balance between the images that the user receives and text. The texts are a power user of arrival of very important, but also slower. The image always arrives first to the user, like the overall design. It is for this reason that the design of electronic bulletin boards, become much more important principles of web design.
Designing a newsletter
To give you a better picture of the item, we will show a very simple design of an electronic newsletter and how to design, you can see here in operation. This should download the following files:
Download here
In the archive you will find the newsletter finished, with a CSS file and images necessary. The characteristics of this newsletter are:
It has a low weight because the files occupy a total of about 27kb, which for this type of media is preferred. An e-heavy, it takes several seconds to finish downloading all the components, can cause the user to view the unfinished end.
It is designed to have a width of 498px. This is because many times the configuration of emails ago to open a smaller window, so that if the newsletter is larger, the user must use the horizontal scroll bar, which is not desirable. 498px can be divided by three, which is essential for the central body, as we shall see.
It also has a small vertical extension, so in most cases, the user will have the entire message to the view without scrolling.
The small size of the message causes the size of the images (which are quite small) is sufficient to make the design appear balanced.
Document Type
Even when subjects have little relevance positioning, maintaining standards is a good practice, as in the case of the example, we have decided to do it in XHTML 1.1.
Given that the extension of the CSS file is very small, you can also opt to include the stylesheet in the HTML, which has no bearing on the outcome.
The meta tags to be included in these documents are very few, since many of them are related to the positioning and search engine robots and here are things that must be taken into account.
General features
As you can see the files, the page of the bulletin is divided into four distinct sections: The header, which includes an image, the title, the central body, where the description and the footer that contains location information and contact.
In the CSS file in the first instance consider those rules that are valid for the entire document, except for the sections where indicated otherwise. Thus, we have a label has been affixed to body and img. In the first case, reset the margins and padding to zero to match the visibility of the document in all browsers from appearing default margins and fillings.
Also in the body tag sets the background color of the entire document and the source of the same color to be used.
In the img tag only states that have no edges, thus avoiding that when the image is a link that appears with the characteristic blue color border indicates that the image is bound.
Header
The header of the bulletin is very important as part of the first impression the user has the entire message. The design itself must be studied in detail so that the recipient provide an overview of the content, as well as forming part of the corporate image.
As mentioned above, the design consists of a container, which is 498px wide. The lateral margin is "auto", causing the entire contents of the label appears centered on the page, regardless of the width of the browser window.
Within the same logo appears, which is 498px wide, so it is not necessary to adjust your position. Institutional logos usually do not have these measures, so that the designer has two options: the first is to place a logo to the left of the header and make the width with the title, or design a picture that has all the extension and to include the logo.
Title
The title has been placed just using the h1 tag, which has been given the characteristics of the source needed to be integrated into the design. We have chosen the Times New Roman (Times as an alternative for Mac) in italic style to give an elegant look. The color used is consistent with the image that precedes it, so as to maintain continuity in the design.
Has been given a top and bottom margin of 15px, so as to separate and generate the necessary blanks not to saturate the design and that the title, despite having a color that distinguishes it from the header, is highlighted.
And message body
The main body of the page consists of a general container with automatic centering 498px. In this way, is perfectly aligned with the header and title. The body also is divided into three containers defined with the class "message" which serves to divide into three columns to the main body.
These containers have a width of 160px with a margin of 3px. The total width would be:
(160px x 3) + (6px x 3) = 498px (this is the reason why we have chosen the width of 498px)
Each of the divs "message" contains a picture and a paragraph, which are positioned along the document flow. These containers have set the float: left, making that are placed one on either side of the other.
The paragraph has the features that have been identified in the body, so it was not necessary to set fonts and colors.
Footer
The footer is also set in a div with 498px wide. He has put a font color more tenuous, since the function of this content is to provide the necessary information but without causing an excessive highlighting.
It has been clearly marked link to the website of the institution to which differs from the rest of the paragraph. In the end, have placed the links to the W3C validator, so they can verify that the documents are valid XHTML 2.1 and CSS 1.1.