Development Process

The primary focus is to maintain a set of best practice methodologies, and by adhering to a consistent development process, it ensures optimized page loading and performance, as well as, scalable and maintainable code.

The separation of content (HTML), presentation (CSS), and behavior (JavaScript) allows for easier maintenance, enables the browser to apply the technologies it supports, and problems are more easily isolated, identified and debugged.

Front End Development

Mario tests his markup using the W3C HTML5 Validator to ensure that the markup is semantically correct and well formed. Although Mario makes a real concerted effort he does not guarantee code is 100% valid site wide, but instead focuses on a consistent cross-browser user experience. In addition, he uses the Bootstrap for development, but modified for his own project needs.

Mario also tests his CSS using the W3C CSS Validation Service to ensure conformance with W3C open standards. Additionally, Mario uses normalize.css to make rendering more consistent across browsers. This set of CSS rules is used to normalize a browser's “built-in” default styles by reseting the styling of all HTML elements to a consistent baseline.

The Box Model Fix

In addition, to simplify CSS authoring, set the box-sizing attribute to border-box for all page elements, which controls how the width and height values are handled and applied to the overall content, padding and border. Without the box–sizing: border-box; property the padding and border that are added to the outside of the content box will exceed the declared width, however the element with box-sizing: border-box; when applied fits completely within the declared width.

The total width of an element should be calculated like this:
width + left padding + right padding + left border + right border + left margin + right margin

Lastly, good CSS architecture should be predictable, reusable, maintainable, and scalable and Mario takes a more modular approach to accomplish this objective.

Modular Directory Structure

  • Core brand styles
  • Basic typography or default HTML rules
  • Site-wide styles
  • Distinct sections of the site
  • Micro-sites and landing pages
  • Components, plugins, widgets, or re-usable modules

When properly applied JavaScript enhances the overall user and browser-based experience by controlling the overall behavior layer. To ensure maximum page performance Mario houses the code in external files, and when applicable calls each file by including the SCRIPT tag prior to the closing BODY tag. Additionally, Mario takes full advantage of Chrome's DevTools built directly into the browser in an effort to debug layout and JavaScript issues.

Responsive Web Design

Responsive Web Design (RWD) combines media queries, flexible images and fluid layouts (grids) to help us build sites that gracefully adapt to any environment they encounter.

In addition, responsive web design breaks down into 4 fundamental categories:

  • Style: logo, colors, custom fonts and style issues
  • Scale: natural breakpoints, content order and arrangement
    • Let the content and the design dictate the breakpoints.
    • Set the baseline media queries for various types of devices.
    • Add additional media queries as needed based on those natural breakpoints.
  • Access: all content accessbile and functional as broadly as possible
  • Speed: optimized and fast loading pages

Think about using the “Mobile First” approach, which is a common technique that considers the lowest common denominator first because in general smaller screen designs are usually less complex. Now, as the screen or viewport increases in size the complexity tends to get enhanced as well, which is very much in line with a mobile first pattern that lends itself to an additive approach to styling and presentation.

Note: This site is an example of responsive web design built using a flexible, percentage-based grid that dynamically resizes and adapts to different browser and device viewports.

Accessibility, Performance and SEO

Mario uses the Web Accessbility Evaluation Tool, which provides visual feedback about the accessibility of a site's content by injecting icons and indicators into your page. As an integral part of this effort he embraces file concatenation and minification to help improve response time.

In addition, Mario uses Gzip to compress the site's web files before sending them over to the browser. Compression drastically reduces transfer time since the files are much smaller. Also, Google is including a new signal in their search ranking algorithms — site speed, which reflects how quickly a website responds to web requests. Hence, Mario focuses on the site's overall page weight and speed that includes decreasing page load and HTTP server requests.

Lastly, Mario leverages the Screaming Frog SEO Spider program, which spiders a website's links, images, CSS, scripts and apps from an SEO perspective. It fetches key onsite elements for SEO, and allows you to audit, view, analyse and filter the crawl data for common SEO issues as it's gathered in the program's user interface. Also, the program allows you to export key onsite SEO elements (url, page title, meta description, headings etc.) to Excel so it can easily be used as a base to make SEO recommendations.