1. Responsiveness

Responsive, what is it?

Briefly, this is the application of specific CSS to a web page, depending on the width of the screen. “Desktop” (> 1024px wide), tablet (1000px to 600px wide) and mobile (<600px wide).

It’s a reference to develop sites that look nice at any size; desktop, laptop, tablet, or phone.
In the past, this was often accomplished by building separate sites ; that is, a mobile site and a desktop site. But a number of problems with this approach have led to a new methodology for developing Web sites.

2. Cross Browser

Website must be compatible with various browsers:

• IE 11
• IE 10
• IE 9
• Chrome
• Firefox
• Opera
• Safari

3. SEO

What is SEO?

Search engine optimization (SEO) is the practice of increasing the quantity and quality of traffic to your website through organic search engine results. Every website must have:

• Page Titles

Pages titles: <title>: the most important element of a quality Web page. Search engines such as Google, Yahoo, and Bing use the title tag as the search results’ title for that page. (Near to the favicon when I mouse hover ,I get the title of the page mentioned )

• Friendly Urls

When it comes to choosing a good URL it’s all about usability; if it’s good for users, it’s good for search engines and indexing in google. That’s why you should use keywords instead of random words and numbers. If you want to split words, always use hyphens in your URL instead of underscores or plus-signs.

• Meta Tags and Alt tags

Metadata helps search engines find, index, and rate the information people are looking for. Meta tags:

• Each page of your website should have a unique meta description describing the content found on that page.
• Keep your meta description below 160 characters. If you make it longer, search engines may not display it in full.
• If you are targeting specific keywords, make sure to include them at the beginning of the tag.
• A meta description tag should be well composed, compelling and informative.

Format: <meta name=”description” content=”155 characters of message matching text with a call to action goes here”>

• Alt tags:

The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object. This is a complete HTML image tag:

<img src=”image.jpg” alt=”image description” title=”image tooltip”/>

• Headings

For users of the web who must use a screen reader, it is easier to navigate sections of content by referring to properly structured headings on a page. The h1 heading tag (main heading) of a page gives users a quick overview of the content that is to follow on the page. By reading the different heading tags, users can scan a page and read only the section they are interested in.
Use ‘ul’ and ‘li’

• Anchor Text

Anchor text is the clickable text in a hyperlink, the anchor text specifies the relevance of the site ex:
<a href=”www.companyB.com” title=”Service Provided”>Company B</a>

4. Speed

To test Speed use the website: Woorank and/or http://tools.pingdom.com

• Minify HTML, CSS and JavaScript
• Make CSS and JavaScript External
• Eliminate Duplicate Scripts in a Web Page
• Avoid CSS Expressions, Add Expires Headers (While Expires headers are most commonly associated with images, they can also be used for scripts).

5. Use of GZIP

It´s possible to reduce file sizes by 70% without losing image quality or video size.
Reduce image sizes using either GIF, PNG-8. Or JPEG as the file formats
We can test that for example:

• If you’re using Chrome or Firefox, you can open the developer tools and see it.

In Chrome, this is done from the wrench menu: Tools > Developer tools, or alternatively by pressing (Ctrl+Shift+I).

• In Firefox, click the menu button: Developer > Inspector, or alternatively by pressing (Ctrl+Shift+C).

Once you have the developer tools open, you can click on the Network tab, and do a refresh on the page. If you then click on the top entry in the list and select Headers on the right side, it’ll list all the response headers for the page. If you find Content-Encoding: gzip in the list, then the page is gzip-compressed.

How compressed files work on the web?

• Compression is enabled via webserver configuration
• Different web servers have different instructions

Here are the most common ways to enable compression including .htaccess, Apache, Nginx, and Litespeed webservers.

6. Use browser caching

Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images. Browser caching can help by storing some of these files locally in the user’s browser. Browser caching works by marking certain pages, or parts of pages, as being needed to be updated at different intervals.

7. Page size(max80KB)

Reduce image sizes using either GIF, PNG Or JPEG as the file formats. Make sure the size matches your usage and set the size for each page with the height and width. Do not make use of scaling, especially from larger to smaller images.

Count and Performance of SQL Queries: by Sql Profiler

• Check Indexes: There should be indexes on all fields used in the WHERE and JOIN portions of the SQL statement.
• Limit Size of Your Working Data Set: Examine the tables used in the SELECT statement to see if you can apply filters in the WHERE clause of your statement.
• Only Select Fields You Need
• Remove Unnecessary Tables
• Remove OUTER JOINS
• Remove Calculated Fields in JOIN and WHERE Clauses.

8. W3 Compliant

Definition:W3C are the primary standards body for the web, and have defined a precise specification for how the HTML (or XHTML) of a website should be written to ensure compatibility, accessibility and follow best practice. W3C compliance is therefore a widely adopted test with many benefits.
As a general rule, sites which are W3C complaint will:

• work more consistently across web browsers
• be more accessible and usable
• work on non-standard devices, such as mobile phones and televisions
• Generally rank better in search engines.

W3C compliance is considered one of the best assurances that the website has been built with accessibility in mind (which is a legal requirement in many countries).