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.
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 HTML5 Boilerplate template 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.
SMACSS stands for Scalable and Modular Architecture for CSS. The main goal of the approach is to reduce the amount of code and simplify code support.
- Base rules. These are styles of the main website elements - body, input, button, ul, ol, etc. In this section, we use mainly HTML tags and attribute selectors.
- Layout rules. Here are the styles of global elements, the header, footer, sidebar, etc.
- Modules rules. Blocks that can be used multiple times on a single page.
- State rules. In this section, the various statuses of the modules and the basis of the site are prescribed. This is the only section in which the use of the keyword "! Important" is acceptable.
- Theme rules. Design styles that you might need to replace.
SCRIPT tag prior to the closing
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.
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 using the following tools:
- GTmetrix Performance Report
- PageSpeed Insights Mobile Performance Report
- PageSpeed Insights Desktop Performance Report
- Pingdom Performance Report
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.