webnomads logo

Eight Principles of Mobile Friendliness

The Connected Government Act, which was signed into law in January 2018, requires new, and redesigned, agency websites to be mobile-friendly. The Connected Government Act also codifies the OMB M-17-06, Policies for Federal Agency Public Websites and Digital Services (PDF, 1.2 MB, 18 pages, November 2016) which required agencies to create mobile-friendly websites, back in 2016.

In order to help you comply, we decided it’s time to start reviewing good mobile web development practices. Over the next couple of months, we will share eight principles of mobile-friendliness (one each week)—and how adhering to these principles can greatly improve your site.

We also need your critical thoughts, and comments, about these principles. Join the MobileGov Community of Practice and let us know what you’re doing to work toward mobile-friendliness at your agency.

The Principles

In 2017, the MobileGov Community of Practice tested the top federal websites most visited on mobile devices (smartphones and tablets). The results of the automated tests, A Guide to To Creating Mobile-Friendly Web Sites, showed us that a few common practices greatly affect the usability of a site on a mobile device.

Building on last year’s results, we are back at it again—but this time we examined the automated testing tools themselves. During this review, we found there are eight principles of mobile-friendliness. And if you follow them, they will make your site more usable and user-friendly.

Let’s get started!

JavaScript Is Really Cool, When Used With Care

JavaScript seems to have it all. It is readily available and widely used by mainstream programmers with great documentation and support. JavaScript is complemented by many other technologies and libraries such as JSON, and especially useful for graphical user interfaces (GUI). JavaScript benefits from being part of HTML5. Finally, JavaScript will probably be with us for a long time as there is much JavaScript-related innovation being worked on, the JavaScript web platform is maturing rapidly, and, most importantly, JavaScript is supported by a broad coalition of companies.

With all these benefits to using JavaScript, like any great functionality—if not used correctly—it can make your site unfriendly and detract from its benefits. The following are three preventable issues caused by the incorrect implementation of JavaScript that may lead to mobile unfriendliness.

  1. JavaScript Minify
  2. JavaScript Placement
  3. Inline JavaScript

 

All three of these may negatively impact your site’s performance and can be detected using Google’s Mobile-Friendly Test tool, DigitalDashboard.gov, or the Information Technology & Innovation Foundation (ITIF) Benchmarking Report.

JavaScript Minify

Issue: JavaScript, as written, included dead space that slows download and execution time

JavaScript files should always be minimized to reduce transit time and help speed up page load.

Solution: Use tools to minify all JavaScript!

Minification removes unnecessary or redundant data without affecting how the resource is processed by the browser. The Integrated Developer Environment (IDE) tool used to develop the site may include features that will minify the JavaScript during the build process.

You can also do this with Google Closure tools, including the Closure Compiler, an optimizer that rewrites your code and minimizes the dead space to make it download faster. It is typical to minify only in the production environment, as troubleshooting and debugging in the development environments will be easier with non-minified JavaScript.

References

JavaScript Placement

Issue: Where you place your JavaScript affects the site’s performance

Grouping JavaScript at the end of the page markup is optimal for page load. When the HTTP specification puts JavaScript elsewhere on the page (e.g. at the top), this may result in loading blocking while the JavaScript files are downloaded. Additionally, before the browser can render a page it has to build the DOM tree by parsing the HTML markup. Whenever the parser encounters a script, it stops and executes the script before it continues parsing. This slows the performance of the page load.

Solution: Place JavaScripts so they don’t block browser loading

Put scripts in the <head> tag and use the async or defer attributes, which allows the scripts to be downloaded ASAP without blocking your browser.

Scripts with the async attribute are executed asynchronously. This means the script is executed as soon as it is downloaded —without blocking the browser in the meantime—and that script 2 can be downloaded and executed before script 1.

Scripts with the defer attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser. Unlike async scripts, defer scripts are only executed after the entire document has been loaded.

References

Inline JavaScript

Issue: Inline JavaScript prevents browser from processing, thus slowing page rendering

Inline JavaScript code should not be used because it requires that the browser pass JavaScript code markup that slows processing.

Solution: Separate JavaScript code from the HTML

Move all JavaScript code to a single minified file, which provides a clean separation of markup, style and code. This can also be accomplished by enabling the “Inline JavaScript” filter in Apache and Nginx web servers.

Share:

More Posts

Everett Business Matters

Your digital presence in Everett is more important than ever, and as a US military veteran-owned company, our honor, and your trust in us is

Bremerton Business Matters

Your digital presence in Bremerton is more important than ever, and as a US military veteran-owned company, our honor, and your trust in us is our

Orchard Business Matters

Your digital presence in Orchard is more important than ever, and as a US military veteran-owned company, our honor, and your trust in us is

Tacoma Business Matters

Your digital presence in Tacoma is more important than ever, and as a US military veteran-owned company, our honor, and your trust in us is

Web Nomads Supportscreen tag

Web Nomads is a brand-first creative agency. Rooted in strategy, driven by design, and built for digital, our work unlocks the cultural and creative value of the world’s most beloved brands.

Categories

Contacts