PetaSoft Knowledge Base

1. General

1.1. Use mechanism of overlaying the layout (in png) on the markup to test pixel perfect (if it required) or to set correct distances and sizes of elements. Set layout (in png) as background of HTML and set opacity .5 for body – you should have crisp image.

1.2. Do not set static width if it does not needed.

2. Forms

2.1. Hover, active and focus states should have different styles for elements of forms (buttons, fields, radiobuttons, etc).

2.2. Do not forget to change font-family of inputs and textareas.

2.3. Placeholders (of inputs and textareas) should have the same styles as text in these elements exluding color.

2.4. Do not use button tag for buttons – use input or div.

2.5. Group of radio buttons should have default value.

3. Animation

3.1. Hover event should have animation.

3.2. Set animation for hover in and hover out.

3.3. You can set 0.3s for animation duration in most of cases.

3.4. Use ease-in animation for hover in and ease-out for hover out.

4. Customization

4.1. If form elements (radiobuttons, checkboxes, numberboxes, buttons) have custom styles on layout, markup them and develop their logic on JS.

5.1. Links for social networks should have target="_blank"

5.2. Do not use absolute protocol for links. Good: "//". Bad: "" or ""

5.3. Do not use absolute paths for pages of sites. Good: "/blog/some-article". Bad: "//"

5.4. Logo (in footer and in header) should have link on home page. Exception: most of one-page sites (in these cases click logo scrolls to the top of the site).

6. Icons

6.1. Social networks icons should have hover effect.

6.2. Icons should be encoded in base64.

6.3. Use svg format of file if it possible and png in other case for icons.

7. Accuracy

7.1. The same elements (for instance, buttons) should have the same sizes (in most of cases).

7.2. Form elements in one line (for instance, 3 inputs and button) should have the same height.

n. Other

n.1. Phone number should be link with href="tel:+10000000000", where +10000000000 – phone number.

n.2. Skype contact should be link with href="skype:skypename".

n.3. Email should be link with href="", where – email.

n.4. Never leave empty "href" attributes in links. Use "#" if you don't know what links will be in some place.

n.4. Do not use "a" tag for pseudo links.

n.4. Always add meta description.

n.4. Always add tag title.

n.4. Always add X-UA-Compatible.

n.4. Always set charset UTF-8.

n.4. Load JS at the end of document.

n.4. Do not use @import in CSS.

n.4. Always optimize images which you use at the site (for instance via

n.4. Group your css files in one.

n.4. Group your js files in one.

n.4. Compress your js and css file before deploy.

n.4. Set "-webkit-font-smoothing: antialiased;" for body and html.

n.4. Links should not have value of display property block. If you need few links in their own rows, add parent division.