Responsive Templates

What makes a template responsive?

Responsiveness - the ability to display properly on not just a desktop computer, but also mobile devices like phones and tablets - is a critical feature of modern templates.

How do you know if a template is responsive?

The easiest way would be to look at it on your smartphone.

If you don’t have a smartphone handy, or just want a quick test from your desktop web browser, you can use the mobile simulator that modern browsers generally come with.

Here’s how to do it in Google Chrome:

  1. Right click and select Inspect.

Inspect

  1. Click the “Toggle device toolbar” icon

Inspect

  1. Now your page will display as if it were being rendered on a mobile device. You can change the device using the dropdown at the top of the page.

Inspect

Another way is just to use your mouse and grab the corner of your browser window and drag it narrower, and watch what it looks like on smaller/larger screens.

Developers and designers might appreciate the https://responsively.app tool for looking at a site by simulating various common mobile devices.

TIP: Don’t design your site for “every possible mobile device.” It will never be “pixel-perfect.” Make it work well for the majority of devices that your site’s visitors are using: don’t worry about devices of people who aren’t your target customer.

How do you achieve responsiveness?

In order to determine how to lay out a page, the template must first determine the length and width of the visitor’s screen.

  • The Responsive Classic template uses browser user-agent-detection
  • The Bootstrap template uses media queries

A deeper discussion of these topics is presented in the Mobile or Desktop state? article.




Still have questions? Use the Search box in the upper right, or try the full list of FAQs. If you can't find it there, head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified March 27, 2021 by Scott C Wilson (6e6cafe).