Web Development Documentation

Is my article responsive (mobile friendly)?

Web browsers include "developer tools" to assist with creating and troubleshooting web content.  These tools are free but are not visible by default.

To enable developer tools from a browser's menu options follow instructions below.

  • Firefox: Menu  Web Developer ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
  • Chrome: More tools ➤ Developer tools
  • Safari: Develop ➤ Show Web Inspector. If you can't see the Develop menu, go to Safari ➤ Preferences ➤ Advanced, and check the Show Develop menu in menu bar checkbox. 
  • Opera: Developer ➤ Developer tools

When the developer tools appear (under a menu bar at the bottom of the web page), click the “Toggle device toolbar” icon to the left of Chrome’s Developer Tools Menu:

toggle

or “Responsive Design Mode” to the right of Firefox’s Web Developer Tools menu:

responsive

A responsive site will be readable without the need to swipe left and right:

readable

A non-responsive site will have very small text, and/or will require you to swipe left and right as well as up and down to view content:

nonresponsive

Joomla-Workshops-Button-Hugo