Download this Case Study now!

Complete the form and your download will start automatically.

  • Please enter your real name
  • Please enter a valid email
Download Now

Magento Development Standards

We render the advanced Magento development standards to ensure improved organic traffic on the website.

  • Coding Standards
  • Magento Security

  • Software Testing
  • High Performance

Basics

We improve SEO efficiency and strengthen the performance, and speed of a website by adopting the latest standards for Magento development.

HTMLPanda will

  • match the requirements from PMS.

  • add an appropriate Favicon.

  • always fix all the broken links.

  • ensure to remove the personal API key.

  • always ensure to capitalize on the theme name.

  • add custom image sizes.

  • always turn off Debug mode.

  • ensure that the proper conditions have been added.

  • insert properly formatted code.

  • use the appropriate Installable extensions.

  • check all the spellings before sending it further.

  • make sure that the theme doesn’t raise any PHP errors, notices or warnings.

  • update the Magento webshop to not only bring the newest features, but also security fixes, which is highly important for Magento store’s safety.

  • ensure to have a recent and clean backup while updating the Magento.

  • check the versions release notes to see what changes have been made.

  • choose a quiet moment to update Magento when there's hardly any traffic on the site.

  • test an update on a staging environment to make sure all the aspects of the shop are compatible with the newest version.

  • update Magento 1.5, 1.6, 1.7, 1.8 and 1.9 to Magento 1.9.x.

  • update Magento via SSH to make it completely error-free.

  • check user-interface on MAC browsers (Chrome, Safari, Firefox), on iPhone as well as on Android.

  • make sure that the theme has a presentable screenshot.

  • check if the custom 404 modules are configured correctly.

Coding Standards

We leverage the well-structured semantic coding format for Magento development to make the website more responsive and business-centric.

HTMLPanda will

  • ensure that comments are used properly to define the code.

  • make sure all the codes are well-validated as per the standards set by W3C.

  • make the translation-ready code for Magento.

  • change the DB prefix.

  • follow the Magento custom coding standard.

  • enable the use of the Magento extension quality program standard.

  • check all the submissions to ensure that the code meets Magento standards.

  • follow the Magento code demarcation standard.

  • use meaningful unabbreviated lowercase words comprised of Latin characters concatenated with a hyphen (-) for attribute names and values.

  • ensure that semantic representation has relied on the ID attribute.

  • follow the separation of presentation and content methodology to make a distinction between the actual meaning of a document, and how this meaning is presented to its readers.

  • use semantic HTML markup only, and must not use presentation markup.

  • make sure that visual representation relies only on HTML class attributes, CSS pseudo-classes, and pseudo-elements, HTML tags, and form element’s type attribute and form elements state attributes (example: disabled, checked).

  • ensure that the business logic relies on only the form, form element name attributes, or data attributes.

  • assign HTML helper classes in JavaScript to modify the presentation layer.

  • use jQuery templates to insert recurring markup into DOM structure.

  • consistently use PHP_CodeSniffer to enhance the readability of the code and ensure that it meets the Magento Coding Standard.

  • use the ::class keyword instead of a string literal for every class name reference outside of that class.

  • use Magento’s ESLint Rules to make sure the code adheres to Magento’s coding standards.

  • use ESLint and JSCS to ensure the quality of JavaScript code.

  • ensure that the last line in a file is ending with a single line feed (LF) character (i.e. an empty line).

  • ensure that indentation in the Magento code uses four spaces and tables are not allowed as indentation.

  • ensure that the maximum line length is 80 characters and source code lines is not exceeding 120 characters.

  • ensure that the line is ending with a single line feed (LF) character represented as ordinal 10 or hexadecimal (0x0A).

  • use string concatenation for multi-line string literals.

  • use parenthesis sparingly and in general where required by the syntax and semantics.

  • use braces with all multi-line blocks.

  • always put semicolons as statement terminators.

  • use single quotes instead of double quotes for consistency which is helpful when creating strings that include HTML.

  • ensure that variables or methods have names that accurately describe their purpose or behavior.

  • always put the operator on the preceding line to avoid implicit semicolon insertion issues.

  • use custom tostring method to succeed without side effects.

  • use a variable initialized with a function expression to define a function within a block.

  • use standard features whenever possible for maximum portability and compatibility.

HTMLPanda will not

  • hard-code CSS styles in JavaScript files.

  • use inline CSS styles inside HTML tags.

  • select DOM elements based on HTML structure.

  • hard-code inline CSS styles in PHP classes.

  • hard-code inline JavaScript in PHP classes.

  • hard-code HTML markup (used in the tag) in PHP classes.

  • use carriage the Mac OS convention of carriage returns (CR or 0x0D) or the carriage return-linefeed combination (CRLF or 0x0D and 0x0A) standard for Windows OS.

  • use parentheses for unary operators (e.g. delete, type of, and void), after keywords such as return, throw and for the case, in, or new, and others such keywords.

  • use underscores and numbers in names.

  • use short variable names such as i or n except in small loop contexts.

Magento Theming Standards

We provide fully customizable, fast and responsive themes for Magento development that makes websites business-centric.

HTMLPanda will

  • ensure that our development standards are matching the requirement from PMS.

  • check all the layered files provided and hidden layers as well.

  • thoroughly validate Font Family and Weight.

  • Make sure to add an appropriate Favicon.

  • add Meta Title.

  • only use global, style, responsive used, CSS framework.

  • ensure that naming conversion of code & assets (lower case & -).

  • make sure that properly formatted code is being used in the development.

  • ensure that the proper linking of pages are made.

  • ensure that Windows Chrome web pages are 100% pixel perfect.

  • check that on the rest of the OS and browsers, web pages must be very much identical to Windows Chrome.

  • ensure that retina ready images are being used in the development process.

  • make use of print-friendly CSS.

  • check that the theme has a presentable screenshot.

  • make sure that the font-sizing is in REM.

  • ensure to include CSS files in Head of the page

  • assure to include JS files at the bottom of the page

  • make sure that comments are used properly to define the code

  • use a child theme if we use a Paid theme.

  • ensure that all the icons, logos and small images have Sprite Image.

  • check the Grade PageSpeed rating on GTMetrix.

  • check that the loading time for all the webpages must be 5 seconds or below.

  • ensure that the Google Page Speed has the score of 70+.

  • optimize images to make your theme more appealing.

  • extend the default styles instead of overriding them while inheriting from a Magento theme.

  • customize or create new .xml layouts files instead of customizing and overriding .phtml templates.

  • change the position of a block or container using .

  • add or remove a block or container by setting the remove or display attribute to true or false within the /.

  • change the HTML tag or CSS class for the existing container using the element.

  • add fonts, images, and JavaScript files in the /web/ directory.

  • reuse the markup and design patterns from the default Magento files by referencing the existing HTML templates (templates hints can help) or copy-pasting HTML markup to the custom templates.

  • use /etc/view.xml to change image types or sizes. See Configure images properties for details. Use this file to also customize the product gallery widget.

  • use the CSS critical path to render the page much faster.

Security

We understand the importance of data security, thus we follow the unique and the most preferred security method to keep websites well-secured.

HTMLPanda will

  • accord The Open Web Application Security Project (OWASP) to protect Magento based websites.

  • consider launching the entire site over HTTPs as Google now uses HTTPs as a ranking factor.

  • make sure that the server operating system is secure with ensuring that there is no unnecessary software running on the server.

  • use only secure communications protocol (SSH/SFTP/HTTPS) to manage files, and disable FTP.

  • include .htaccess files to protect system files when using the Apache web server.

  • keep the system up to date, and install patches when new security issues are discovered.

  • closely monitor any issues that are reported for software components including the operating system, MySQL database, PHP, Redis (if used), Apache or Nginx, Memcached, Solr, and any other components in a specific configuration.

  • limit access to cron.php file to only required users. For example, restrict access by IP address. If possible, block access completely and execute the command using the system cron scheduler.

  • automate the deployment process, if possible, and use private keys for data transfer.

  • use two-factor authorization for Admin logins.

  • review server for “development leftovers.”

  • make sure there are no accessible log files, publicly visible .git directories, tunnels to execute SQL, database dumps, phpinfo files, or any other unprotected files that are not required, and that might be used in an attack.

  • use IP whitelisting and .htaccess password protection.

HTMLPanda will not

  • install extensions directly on a production server.

  • allow running other software on the same server as Magento, especially if it is accessible from the Internet.

  • save FTP passwords in FTP programs, because they are often harvested by malware and used to infect servers.

  • give access to any development, staging, or testing systems.

Performance

We employ the optimal Magento development standards to ensure the website performs flawlessly on all the platforms.

HTMLPanda will

  • ensure that all the console logs are cleaned.

  • make sure to clean unused code, images, and files to improve the performance.

  • ensure that Magento development has an A Grade PageSpeed rating on GTMetrix.

  • check the loading time for all the webpages must be 5 seconds or below.

  • ensure the Google Page Speed has a score of 70+.

  • optimize images, enable cache, and disable the unused extensions.

  • enable flat categories and products to speed up the performance of Magento based website.

  • implement the \Magento\Framework\Validator\ValidatorInterface instead of creating custom validators from scratch.

  • consider using Magento framework conventions instead of low-level or PHP functionality.

  • merge and minify CSS and JS files that means making the web page as light as possible for the fast loading.

  • use the Content Delivery Network (CDN) rightly to connect all cache servers.

  • enable the compression.

  • keep time to first byte (TTFB) around 200ms to enhance the server response time.

  • utilize the power of HTTP/2 as it has many performance improvements that allow a browser to load a webpage faster.

  • enable HTTP/2 for Apache and Nginx.

HTMLPanda will not

  • use incoherently-written (redundant or duplicate) Magento code.

  • include Render-Blocking CSS and Javascript.

  • use JS Bundling (Magento 2 specific).

  • create helper classes.

  • include cyclical event loops.

SEO

We leverage the best SEO practices for Magento development to deliver a responsive and SEO-friendly website.

HTMLPanda will

  • use user-friendly URLs.

  • enable the XML sitemap by logging in to admin and Navigate to Stores >> Settings >> Configuration >> Catalog >> XML Sitemap.

  • give images informative filenames.

  • always use a proper description and never try to stuff keywords in alt-tag.

  • enable search-friendly URLs in Magento.

  • use quality links to the store via different platforms.

  • implement some of the extensions which can solve the HTML sitemap issue.

  • enable all caching features (System >> Cache Management) and Flush Magento cache.

  • enable flat categories and products (Stores >> Catalog >> Catalog >> Scroll down to Use Flat Catalog Category and Use Flat Catalog Product >> Set Yes >> Save Config).

  • merge JavaScript and CSS files to reduce the load time and increase the page speed.

  • modify robots.txt in by going to the Stores >> General >> Design >> Edit custom instruction of robots.txt File - if needed so as to search engine finds robots.txt file.

  • edit default Title and Meta Description to optimize for SEO.

HTMLPanda will not

  • include default store code from URL.

  • include duplicate content and disable it by going to the Stores >> Configuration >> Catalog >> Catalog >> on the right side scroll down to Search Engine Optimization and set Canonical LINK Meta Tags for Categories and Products to Yes.

  • support the auto-creation of HTML Sitemap by default.

Testing

HTMLPanda assures that its optimal testing process is meeting the latest development standards to make the website completely flawless.

HTMLPanda will

  • check websites on all browsers (Chrome, Safari, Firefox, etc) as well as on devices (iOS, Android, etc).

  • test the storefront and admin panel UI.

  • test the REST, SOAP, and GraphQL areas.

  • tracks changes in CPU, Memory and other metrics.

  • execute rightly for developing branches.

  • measure total page load times in all browsers.

  • ensure that a seamless upgrade is possible from previously released product versions to the new one.

  • test JS modules and other JS portions of the UI. These tests are similar to integration tests used for server-side testing.

  • ensure the system is extensible as designed.

  • use static code analysis checks that PHP code follows the Magento 2 coding standards and best practices.