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
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”/>|
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>
To test Speed use the website: Woorank and/or http://tools.pingdom.com
- 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
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).