Get A Free Quote

Front-End Development Standards

We employ the best practices for the front-end development that ensure to create professional-quality websites with ease of maintenance.

  • Coding Standards
  • W3C Valid HTML/CSS Markup

  • High performance
  • High-Quality & SEO Friendly Markup

HEAD

We strengthen the website by leveraging the latest standards related to ‘HEAD’ to leave users with a great experience of a website.

HTMLPanda will

  • use HTML5 Doctype as it is supported in all modern browsers and throws IE6 and IE7 into standards mode.

  • ensure that the charset declared (UTF-8) and viewport are declared correctly.

  • ensure that the title is being used on all the pages.

  • always put the meta tag as early in the tag as early as possible. However, server-settings are ideal.

  • assure that each favicon has been created and is being displayed correctly.

  • ensure that Apple meta-tags are present while the front-end development process.

  • use rel="canonical" to avoid duplicity in the content.

  • make sure that the language tag of the website is specified and related to the language of the current page.

  • assure conditional comments are present for IE if needed.

  • make sure all CSS files are loaded before any JavaScript files in the HEAD.

HTML

We make the website flawless and error-free by employing the well-structured semantic HTML, validated as per the W3C standards.

HTMLPanda will

  • make sure HTML5 semantic elements are used appropriately such as header, section, footer, main, etc.

  • check that link should have a rel="noopener" attribute to prevent tab nabbing in case external links are getting used with target="_blank".

  • ensure that all the unnecessary codes are removed before sending the page to the production.

  • use headings h1 to h5 to form a document outline and give a table of contents for easy navigation.

  • assure all pages need are tested with the W3C validator to identify possible issues in the HTML code.

  • include script files at the end of HTML document just before the tag.

  • make sure that there are no broken links on the page. Besides, we also verify that the website doesn't have any 404 errors.

  • make sure all tags must be properly closed under self-closing elements.

HTMLPanda will not

  • introduce new title attributes to convey information.

  • apply IDs or classes to them, since older browsers do not understand these elements by default.

  • hard-code style information into the HTML markup directly, either with the style attribute that accepts CSS or with deprecated attributes such as align, border, or width.

WebFont

We render widely used WebFont that is supported by all modern browsers to give a remarkable user experience of a website.

HTMLPanda will

  • use WOFF, WOFF2, and TTF supported by all modern browsers.

  • make sure that Web Font sizes don't exceed 2 MB in all variants included.

  • control the loading behavior with a Webfont loader.

CSS

We follow the well-structured CSS coding to make the website fully-functional, responsive and more business-centric.

HTMLPanda will

  • ensure that the website is using responsive web design.

  • check that the print stylesheet is provided and is correctly used on each page.

  • check whether IDs are used or not and also ensure they are unique to a page.

  • make sure that a CSS reset (reset, normalize or reboot) is used and is up to date.

  • assure that CSS vendor prefixes are used and are generated accordingly with the browser support compatibility.

  • assure that all the pages are tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, Edge, etc).

  • make sure that all the pages are tested on all current mobile browsers (Native browser, Chrome, Safari).

  • ensure that all the pages are tested on all current OS (Windows, Android, iOS, Mac).

  • assure that all the pages are tested for LTR and RTL languages if they need to be supported.

  • structure a stylesheet by using tabs to indent each property, add two blank lines between sections and one blank line between blocks in a section.

  • make sure that each selector should be on its own line, ending in either a comma or an opening curly brace.

  • create selectors that find the right balance between contributing to overall style and layout by using lowercase and separating words with hyphens when naming selectors.

  • always follow properties by a colon and space, make sure that all the properties and values are in lowercase except for font names and vendor-specific properties.

  • use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values as much as possible.

  • use a baseline for ordering such as display, positioning, box model, colors and typography and others.

  • follow the guidelines to retain a high degree of consistency such as spacing before the value and after the colon, use double quotes rather than single quotes.

  • make sure that the line height is also unit-less unless necessary to be defined as a specific pixel value.

  • write smart code from the outset to retain the overview while remaining flexible throughout the change.

HTMLPanda will not

  • use spaces to indent each property to have a clear understanding of the flow of the document.

  • repeat styling or introducing fixed dimensions.

  • add parentheses with spaces while inputting values for properties.

  • restate default property & value combinations (for instance display: block; on block-level elements).

JavaScript

With the use of this advanced programming language, HTMLPanda makes the implementation of complex things easier on websites.

HTMLPanda will

  • make sure not to have any JavaScript code inline (mixed with HTML code).

  • ensure that all the JavaScript files are concatenated.

  • assure that the JavaScript files are minified (can add the .min suffix).

  • use the tag in the HTML body if a script type on the page is unsupported or if scripting is currently turned off in the browser. This will be helpful in client-side rendering heavy apps such as React.js.

  • make sure that all JavaScript files are loaded asynchronously using async or deferred using defer attribute.

  • ensure that no errors are flagged by ESLint (based on configuration or standards rules).

  • use single quotation marks for string declarations.

  • make use of case statements indent within switch blocks.

  • function contents consistently indent, including full-file closure wrappers.

  • encourage jQuery’s 100-character hard-line limit, do indentation with tabs.

  • ensure that a new line is included at the end of each file.

  • assure spaces may align code within documentation blocks or within a line, but only tabs should be used at the start of a line.

  • JavaScript code should be placed in external files whenever possible.

HTMLPanda will not

  • strictly enforce the jQuery’s hard-lined limit.

  • add preceding spaces with a comma (,), colon (:) and semicolon (;).

  • include space around to maintain consistency.

  • make naming conventions excessively descriptive.

  • include a string that would not be a valid identifier.

Images

Our agile development standards make sure to provide well-optimized retina-ready images for the website to function efficiently.

HTMLPanda will

  • use a responsive image pattern that starts by serving a mobile optimized (and thus smaller file size) image first.

  • make sure that all images are optimized to be rendered in the browser. WebP format could be used.

  • for critical pages (like Homepage).

  • use picture/srcset to provide the most appropriate image for the current viewport of the user.

  • ensure that the tag requires alt text to both validate and meet the accessibility guidelines.

  • provide layout images 2x or 3x, support retina display.

  • use small images that are in a sprite file (in the case of icons, they can be in an SVG image).

  • set width and height attributes on if the final rendered image size is known (can be omitted for CSS sizing).

  • prepare images in HTML for lazy loading by renaming the src attribute to data-src and adding the class lazy.

  • assure that all have an alternative text which describes the image visually.

  • always provide NoScript fallback so as to improve the time to first render we are using lazy loading for images.

Accessibility

We enhance the overall functionality of the website with the advanced accessibility to give users a completely flawless experience.

HTMLPanda will

  • ensure that major functionality like main navigation and search are work without JavaScript enabled.

  • assure that color contrast at least pass WCAG AA (AAA for mobile).

  • make sure that all pages have an H1 which is not the title of the website.

  • ensure that headings are being used properly and in the right order (H1 to H6).

  • assure that specific HTML5 input types are used. This is especially important for mobile devices that show customized keypads and widgets for different types.

  • make sure that a label is associated with each input form element. In case a label can't be displayed, we use aria-label instead.

  • use the WAVE tool to test if the page respects the accessibility standards.

  • test the website using the keyboard in a pre-visible order. All interactive elements are reachable and usable.

  • assure that all pages are tested in two or more screen readers (such as JAWS, VoiceOver, and NVDA).

  • replace focus style by the visible state in CSS if the focus is disabled.

Performance

By rendering the optimal front-end development standards, HTMLPanda ensures that the website performs strongly on all the platforms.

HTMLPanda will

  • ensure that the weight of each page is between 0 and 500 KB.

  • make images, scripts and CSS to be lazy-loaded to improve the response time of the current page.

  • use the tag to include all the style sheets in the of the document for optimal page performance.

  • use the tag to include the JavaScript files at the bottom of HTML document just before the closing tag for optimal page performance.

  • minimize HTTP requests by combining all scripts and stylesheets & use image sprites to reduce the number of round trips to the server.

  • minimize the number of iframes as they block the page's load event.

  • assure that the resources that will be needed soon (e.g. lazy-loaded images) are requested in advance during the idle time using prefetch.

  • avail the resources needed in the current page (ex - scripts placed at the end of ) in advance using pre-load.

  • check that all the pages are tested and have a score of at least 90/100.

SEO

We optimize the website by adopting the best SEO semantic coding to provide a well-responsive and fully-functional website.

HTMLPanda will

  • make sure that Google Analytics is installed and correctly configured while front-end development.

  • use heading logic which is a heading text that helps to understand the content on the current page.

  • ensure that a sitemap.xml exists and was submitted to Google Search Console.

  • assure that the robots.txt is not blocking webpages.

  • make sure that pages using structured data are tested and are without errors as the structured data helps crawlers understand the content on the current page.

  • assure that an HTML sitemap is provided and is accessible via a link in the footer of the website.

Testing/Debugging

HTMLPanda ensures that the website goes through meticulous testing to make the website error-free and fully-responsive.

HTMLPanda will

  • test in all browsers (Chrome, Firefox, Safari) to ensure it looks fine and functions as it should.

  • enable source maps to assist with debugging and testing.

  • add alt attributes, accessible forms & tables.

HTMLPanda will not

  • use the set timeout method because it makes the reason for waiting for testing unclear and if it gets passed a larger than zero, it slows down the test suite.