Table of Contents:

What is a Responsive Theme?

Examples

Adding the Responsive Theme

Configuring the Responsive Theme

Free Responsive Skins

Staging Sites

Tips for Working with a Responsive Theme

The Google Test

Frequently Asked Questions

Breakpoints

 

What is a Responsive Theme?

A responsive theme is a smarter layout that automatically adjusts your content to better accommodate mobile devices of various shapes and sizes. NCR Retail Online includes the built-in Celebrity theme, which is also available as a responsive theme.

video button YouTube Resources: To better understand how responsive design works, check out these 1-minute videos on YouTube: Introducing Responsive Design or What is Responsive Design? [In 60 Seconds].

 

Examples

The following NRO sites are using the responsive version of the Celebrity theme (TIP: just make your web browser window smaller and smaller to watch the layout changes at each breakpoint):

 

Adding the Responsive Theme

Depending on your NRO registration date, you may already have the responsive theme installed on your site. If not, please contact the support team to request that your site be upgraded to a responsive theme. There is no charge for upgrading your site to the responsive theme.

The responsive theme itself will be provided at no charge, but there are other costs to consider:

  • Site Design: If you need assistance with responsive site design, we offer hourly design services ($150/hour). Average time for custom site design can vary depending on your needs, but a rough rule of thumb is to allot ~10-20 hours for responsive site design.
  • Customizations: As part of the design process, we’ll review any customizations and 3rd-party add-ons that you’re currently using, to identify whether additional hourly design services ($150/hour) will be required in order for those customizations to function responsively.
  • Staging Site: If your NRO store is already live to the public, you’ll likely need a Staging Site where design changes can be made without affecting your live store. The Staging Site plan carries a one-time setup fee of $500 plus $50/month. (Note that your staging site is a one-time snapshot of your store data at the time the snapshot is made – it won’t update from your live site, nor can it be used with the Integration Agent.)

More About Staging Sites

The purpose of a staging site is to test changes before making the changes on a live site. A staging site is a one-time snapshot of your store data at the time the snapshot is made – it won’t update from your live site, nor can it be used with the Integration Agent.

Your staging site is yours to keep as long as you wish. Should you wish to cancel your staging site, you would simply need to notify our support team, support.retailapps@ncr.com, with your request to close your staging site. Be sure to indicate that you want to close your staging site, not your live site.

 

Configuring the Responsive Theme

The new responsive files will be delivered to your site. You now have a choice to enable or disable the responsive theme under System / Configuration / Theme Settings:

responsive setup

 

IMPORTANT: You must select System / Cache Management and click the Clear Magento Cache button to clear your cache after you enable or disable the responsive theme.

Once the responsive theme has been enabled, you will need to convert your existing CSS and all content areas into a responsive design. The responsive theme provides the overall framework to make your site mobile-friendly. But your specific site details—like header, footer, and home page content—will need to be re-configured to work with the responsive theme. You can jumpstart your site design by downloading the Free Responsive CSS File. Next, begin testing and styling your site at each breakpoint. TIP: Just make your browser window smaller and smaller to see the layout changes at each breakpoint.

It's important to understand that responsive themes are more complex than traditional site design, and each area must be styled accordingly so the content looks good on phones, tablets, computer screens, etc. For this reason, we offer hourly design services to help you convert your existing site design into a responsive design.

 

Free Template Skins

Out-of the box, the responsive Celebrity theme has a few minor layout issues, including issues with the height of zip code fields in certain browsers. For this reason, we recommend that you download and install one of the free responsive template skins found in Downloading the Responsive CSS File on this blog. 

If you previously used one of the free, non-responsive Celebrity skins found here, you will first need to remove the old CSS file, e.g., cel-mainstream.css, and the line of code from the Miscellaneous Scripts field:

  1. Select System / Configuration / General / Design / HTML Head > Miscellaneous Scripts
  2. Delete the reference to the CSS file, for example:
  3. Select CMS / Images & Other Files and delete the file with the same name from the css directory. For example, delete cel-mainstream.css. (This step is optional, as removing the reference to the CSS file is enough.)
  4. After deleting the reference to the CSS file and removing the file itself, you can proceed with adding a responsive CSS file - see above.

 

 

Tips for Working with a Responsive Theme

  • See It In Action: Test your website on various devices (phones, tablets, and monitors of various shapes and sizes), or you can simply make your browser window smaller and smaller to see the layout change to match the current viewport size.
  • Website Content: It's important to avoid using any kind of HTML code that declares heights and widths for images, DIVs, tables, etc. When you’re working with a responsive theme, you want the theme to control the dimensions so the content can expand and contract accordingly.
  • Tables: In many cases, HTML tables aren't well suited for responsive design. Here are some tips for creating responsive data tables.
  • Slideshow Images: When adding new images to your slideshow, don't use the details button. (Under CMS / Home Page Slideshow, set Show Details Button to No on all slides). When you enable the button, then only the button portion will link to the landing page, as opposed to the entire image. Most prefer to let the entire image serve as the link, plus it's better for touchscreen devices like phones and tablets.
  • Custom blocks: Some custom blocks (like the celebrity_menu_link block under CMS / Static Blocks) are suppressed by default on small devices. Since handheld devices have less screen real estate to work with, optional custom blocks are suppressed to make room for more important areas. With CSS, the block styling can be changed if necessary so content will display on smaller devices.
  • YouTube Videos: Make sure that all embedded content, including videos, is fluid. Here are some tips for making your YouTube videos responsive.

 

Recommended Dimensions for Home Page Images

Due to the way responsive design works, the banner images on the right actually get larger, not smaller, when the screen real estate shrinks. For this reason, image size recommendations are:

  • Slideshow Images: 694px x 460px (same dimensions as non-responsive theme)
  • Banner Images on Right: 290px x 174px (larger dimensions than non-responsive theme)

Responsive Image Dimensions

FAQs

General

How does a responsive design impact my SEO rankings?

In April, Google made a significant change to their search algorithm on mobile devices. The change gives greater weight to sites that are friendly to mobile devices. The new algorithm applies to searches performed from smartphones (note that tablet and desktop search rankings aren't impacted currently by Google's change). See if your website passes Google's Mobile-Friendly Test.

Can I just install an add-on or third-party app that makes my website mobile?

No. While there are a number of outside services (e.g., ShopPad) that offer app-based/external mobile sites, they aren't designed to work with Counterpoint and NRO. Typically, external apps aren’t easily customizable, they don’t offer a seamless shopping experience with your main ecommerce site, and can also have a detrimental effect on search engine marketing efforts. For these reasons, we recommend a responsive version of NRO rather than a 3rd-party app. Note that responsive design is also Google’s recommended approach to mobile web.

Design Services

Why do I need hourly design services in addition to the responsive theme?

The theme itself is responsive, but that doesn’t mean that anything you add to the site will be responsive. Responsive design is an ongoing endeavor, for all content that you add to the site. It’s an approach to design and content, not a magic button you can push that just works.

The mobile-friendly theme provides the overall framework and is provided at no additional charge. But your specific site details—like header, footer, and home page content—will also need to be re-configured to work with the responsive theme. Responsive themes are more complex than traditional site design, and each area must be styled accordingly so the content looks good on phones, tablets, computer screens, etc.

Most merchants will need hourly design services ($150/hour) to convert an existing NRO store’s look and feel to meet the needs of the responsive theme. Time to convert a non-responsive site design to a responsive site design can vary depending on your specific design needs, but a rough rule of thumb is to allot ~10-20 hours for this process.

Will my existing customizations or add-ons work responsively?

It depends. Add-ons or customizations affecting only back-end functionality typically won't need any adjustments. Most front-end add-ons and customizations will need to be evaluated and/or adjusted to work responsively. As part of the design process, we’ll review any customizations and 3rd-party add-ons that you’re currently using, to identify whether additional work/cost will be required in order for those customizations to function responsively.

Can I handle my own CSS/design changes?

Yes. You'll need strong CSS skills and a basic understanding of breakpoints and responsive design.

If you’d like to handle the CSS design changes on your own, please note that our support team will not be able to answer your design questions. Our support team is trained to answer technical questions involving NCR Counterpoint integration and NCR Retail Online, but they are not trained to support CSS or responsive design.

I want to handle my own responsive design, but I'm not sure where to start. Can you help?

It's important to understand that responsive design is more complex than traditional site design, and each area must be styled accordingly so the content looks good on phones, tablets, computer screens, etc. For this reason, we offer hourly design services ($150/hour).

To get started, add the breakpoints shown at the end of this article to your existing CSS file, or start by downloading the FREE-celebrity-resp.css file. Next, begin testing and styling your site at each breakpoint. TIP: Just make your browser window smaller and smaller to see the layout changes at each breakpoint.

In general, the simpler your content is, the more likely it will react responsively. Your content may need to be adjusted at various breakpoints so it works on all size devices. You have to think a little harder when laying out your content. You have to test more scenarios (various browsers plus various devices and different shapes and sizes). You have to understand what a breakpoint is and what happens to the content each time the device gets smaller. You can't use hard-coded widths for images, or tables in your HTML, or anything else that doesn't allow the content to expand and contract naturally. Plain text will adjust accordingly. But if you want a specific layout, then you need to ensure that these kinds of areas are responsive.

I want to change something in the CSS. Is this something I can change myself or does NCR have to do it for me?

If you have to ask, than you probably need design services ($150/hour) from NCR. 

Here's how NRO works: There is an underlying CSS file (the core CSS file) that cannot be changed. Instead of modifying the core CSS, you will upload a custom style sheet that's used to override the core CSS styles to change them in the desired way. By overriding the core CSS with your own custom style sheet, you can drastically alter the appearance of your site. But knowing how and where and what to change is the key! Editing CSS is an advanced skill and requires a certain level of expertise. For this reason, we offer site design services.

What about support for older browsers, like IE8?

Older browsers, such as Internet Explorer 8, don't support responsive website design. The term 'responsive web design' wasn't even coined until a year after IE8 shipped. If your website is responsive, it may not display correctly in older browsers.

If you wish to invest in support for older browsers, it's possible to create a separate, non-responsive, style sheet for IE8. Additional hourly rates would apply.

Staging Site

Is a staging site required?

If your site is not live, then a staging site is not required.

If your site is live, then a staging site is strongly recommended. Most of your content areas – home page contents, shipping rate tables, header and footer areas, etc. – will likely need adjustments to work responsively. Plus, if you have any custom CSS or a template skin in place, it will likely need responsive adjustments as well.

By using a staging site for configuring the responsive changes, you can avoid displaying these undesirable results to your shoppers during the process.

Does the staging site have its own NRO Admin Panel, separate from the live site?

Yes, the staging site has its own admin panel, just like your live site (but separate login and separate settings); it’s an exact copy of your live site at the time it was created, but the staging site does not update with your IA (so the products and categories remain static).

All login credentials (users and passwords) will be the same on the live and staging sites, with the exception of the original admin user created for the live site (see below).

Are the logins and passwords for the NRO Admin Panel the same on the staging site and the live site?

Yes (with one exception). All users and passwords will be the same on the live and staging sites, with the exception of the original admin user created for the live site. The original admin user's login will have 'staging' appended to the end of the user ID. For example, the original admin user ‘demoadmin’ will now log in as ‘demoadminstaging’ with the same password as for ‘demoadmin’. All other users remained unchanged.

Can I test orders on the staging site?

Yes, it's safe to test the order flow on your staging site. You can optionally turn on COD on your staging site (System / Configuration / Sales / Payment Methods > Cash On Delivery Payment), just to save you the trouble of typing credit card numbers. Orders on your staging site won't get imported into Counterpoint, nor will it hit the NCR Secure Pay processor for credit cards.

Can I cancel the staging site anytime I want?

Yes. Please notify the support team, support.retailapps@ncr.com, in writing with your request to close your staging site. Be sure to indicate that you want to close your staging site, not your live site. This will stop further monthly charges for the staging site.

I'm finished with my CSS and responsive changes on my STAGING site. How do I make the changes LIVE?

Once you've completed your CSS changes and testing the responsive design on your STAGING site, you'll want to make the same changes to your LIVE site:

  1. Contact support.retailapps@ncr.com to add the responsive theme to your LIVE site. The Support Team will notify you as soon as the responsive theme has been delivered to your LIVE site.
  2. Enable the responsive theme on your LIVE site (System / Configuration / Theme Settings).
  3. Be sure to clear your cache after enabling or disabling the responsive theme (System / Configuration / Cache Management).
  4. Upload your CSS file and supporting images to your LIVE site. If you changed any other settings or page contents on your STAGING site, you'll need to duplicate those same changes on your LIVE site.
  5. Optionally cancel your staging site, or keep it as long as you want for future testing.

My staging site (or my non-live site) is failing Google's Mobile-Friendly Test. Why?

Staging sites and non-live sites are not crawlable, and therefore will not pass Google's Mobile-Friendly Test. Once the responsive changes are in place on your live site, which is crawlable by search engines, then your site will pass the Google test. If your live site still doesn't pass the Google test, then contact support.retailapps@ncr.com for an updated robots.txt.

I'm finished testing my responsive design changes. What are the pros/cons for keeping the staging site vs. shutting it down?

Pros: A staging site is useful for testing global design and content changes prior to making changes on your live site.

Cons: The products and categories on the staging site are static, so at some point the data won't match what’s on your live site. If you want a new staging site in the future, or you want to refresh the staging site with a fresh copy of all data on your live site, you will be charged $500 for another setup fee.

NOTE: A staging site is good for testing out global changes (like responsive design), but there are other ways to do basic testing on a live site (see Testing Home Page Changes By Making a Copy).

Can I get an updated snapshot for my staging site?

Yes: $300

Over time, your live site and your staging site will no longer be the same. As you add new products and categories to your live site, or you change page contents, or time-sensitive data becomes obsolete, your live site and staging site will become different. For example, if you have items flagged as New in Counterpoint with a New Until Date, eventually those New products will no longer be considered New, so the New Products slider could disappear from your home page if there are no products to display.

The cost of an updated snapshot is $300, per request. Please allow 1 week to process your request. 

I'm using a search add-on, and the searches on my staging site find products on my live site. How can I search and find products on my staging site?

With third-party search services such as Nextopia or SLI, the search widget will always point to search results which link back to the live site. Thus, you can't use many third-party searches to find products listed on the staging site.

The best way around this is to link create a new CMS page on the staging site that has a built-in Magento search form, and instead use that to do searches using the internal Magento search on your staging site. Or, you can link directly to the advanced search results by appending /catalogsearch/advanced/ to your store's URL, for example, http://demo.nrostores.com/catalogsearch/advanced/.


CSS Breakpoints for Responsive Design

/* ********************************************************************** */
/*     RESPONSIVE BREAKPOINTS      */
/* ********************************************************************** */
/* COMPUTER SCREEN */
@media only screen and (min-width: 1051px) {
  /* insert extra CSS for computers here */
}
/* TABLET - Landscape */
@media only screen and (max-width: 1050px) {
  /* insert extra CSS for landscape tablets here */
}
/* TABLET - Portrait */
@media only screen and (max-width: 767px) {
  /* insert extra CSS for portrait tablets here */
}
/* PHONE - Landscape */
@media only screen and (max-width: 479px) {
  /* insert extra CSS for landscape phones here */
}
/* PHONE - Portrait  */
@media only screen and (max-width: 320px) {
  /* insert extra CSS for portrait phones here */
}