Responsive design assistance

From The Smartest Wiki
Jump to: navigation, search

As of revision 667, Smartest allows you to tailor your pages depending on which type of software and hardware requests a page.

In addition to a standard version of a page, three further versions can be independently rendered and cached:

  • A version for mobile devices
  • A version for larger mobile devices, such as tablets, in which case the above mobile version, if activated, is used only for handheld devices such as smartphones and iPod Touches.
  • A version for desktop browsers that do not reliably support enough modern HTML5 standards.

Each of these versions can be catered to separately. This provides enormous flexibility for designers, as some will only want to provide for only some of these platforms.

Responsive mode will be enabled automatically for new sites created with revision 667 or later. For existing sites, you need to enable it in Site Settings:

Differentiation of handheld mobiles, tablets and older PC browsers can occur independently

Adapting templates

In templates, the category of end-user device can be accessed via the $this.user_agent boolean variables:

  • $this.user_agent.is_mobile: A boolean. Is the client using a mobile device? This includes tablets.
  • $this.user_agent.is_small_mobile or $this.user_agent.is_phoneA boolean. Is the client using a smaller handheld mobile device? This includes phones and iPod touches, but excludes tablets.
  • $this.user_agent.is_large_mobile or $this.user_agent.is_tabletA boolean. True if the client is using a tablet.
  • $this.user_agent.is_desktop or $this.user_agent.is_pcA boolean. True if the client is using a laptop or desktop PC. Does not distinguish between supported and unsupported browsers.
  • $this.user_agent.is_supported_browserA boolean. True if the client is using a laptop or desktop PC that has a supported browser. See below for specifics.
  • $this.user_agent.is_unsupported_browserA boolean. True if the client is using a laptop or desktop PC that has an unsupported browser. See below for specifics.

Note that all of these offsets are always available, even if responsive mode is not enabled, and the using them when responsive mode is not enabled may mean that incorrect page versions are cached.