The IRP platform comes mobile-ready — it provides you with a world-class, intuitive and appealing integrated mobile site. Whatever internet-enabled device consumers are using, they will easily reach your business.
If a consumer is using a mobile device to search for a term and finds a link for the main desktop version of your site in their search results, they will be redirected automatically to your mobile site when they click the link. The IRP immediately identifies that the visitor is using a mobile device to view your website and expertly serves the correct mobile versions of every page.
There are many aspects to the IRP mobile offering. Much of it happens automatically and seamlessly, based on the standard (desktop) version of your site, but there are also areas where you have control over how items are displayed, how menus operate and so forth. This help topic provides examples of some of these areas.
IRP Mobile Device Detection
The IRP identifies mobile devices by examining the user-agent strings associated with each category of mobile device (phone or tablet).
IRP Admin includes a Mobile Detection Strings feature in the Server Management section where you can view and configure the user-agent strings — however this information is primarily of use to development and support staff as many of the details are quite technical. The data can be useful to other suitably-skilled staff examining, for example, customer orders.
For full details, see the Mobile Detection Strings help topic.
IRP Mobile Application Settings
There are several Application Settings on the IRP back end that you can set for the mobile version of your site. You can find these settings under Application Settings > Mobile Settings in the IRP Admin left navigation menu:
You use the Mobile Settings section to define the following aspects of your mobile site:
|Enable Mobile Site
||This is the master switch for making the mobile version of your website available to all visitors and potential customers. Make sure that you check this box to automatically redirect users who are viewing the site on mobile devices to your mobile site.|
|Enable Expandable Mobile Basket Link
||Check this box to enable the mobile basket link to cause the screen to slide sideways (or ‘fly out’) to reveal the basket contents, instead of redirecting immediately to the basket page. See IRP Mobile Basket Page for details.|
|Enable Mobile Menu
||Check this box to enable navigation on the mobile site as an expandable left-side menu appearing in the top-left corner of the mobile site. When you check this box, the ‘Show Menu Offers Link’ setting and the ‘Menu Starting Category Level’ setting automatically become available to you (see below for details). If you disable this setting, you can make sure that the brand and category drop-down lists are displayed (in order to provide your visitors with an alternative means of navigation) by enabling the ‘Show Brand Dropdown’ and ‘Show Category Dropdown’ settings. See IRP Default Mobile Home Page for more details.|
|Enable Show Mobile Site Links
||Check this box to enable a link for the mobile site to be displayed at the bottom of all standard site front end pages (when those pages are viewed on a mobile device). When a site visitor clicks the link they will go directly to the equivalent mobile page.|
|Menu Starting Category Level
||If you select ‘Department’, a link will be displayed on the mobile menu which, when you click it, will link through to a list of categories. If you select ‘Sub-Department’, the sub-categories will be displayed in the mobile menu immediately alongside the link for brands and (optionally) promotional offers when it is first opened.|
|Show Menu Offers Link
||Check this box to display a link to the Offers page in the mobile menu.|
|Show Brand Dropdown
||Check this box to display the brand drop-down list on all mobile pages.|
|Show Category Dropdown
||Check this box to display the category drop-down list on all mobile pages.|
|Show Mobile Homepage Brand Category Selection
||Check this box to display a structured menu on the mobile home page that contains links to all active brands and categories.|
|Show Top Settings Link
||Check this box to display a link for a visitor to change their country, currency and language settings in the mobile top navigation. The link takes the form of a flag associated with the visitor’s current settings. When a visitor clicks the flag icon, they can select their country, currency and language from drop-down lists. Note: even if you don’t check this box, a link for changing these settings is always displayed in the mobile bottom navigation. See the IRP Mobile Site Settings Page section for details.|
|Show Mobile Filter Menu
||When enabled, an Ajax filter menu will display on the mobile site. This functions in the same way as the desktop site left nav attributes menu but is designed for mobile browsing.|
If you make any changes in this section, make sure that you click the Update Mobile Settings button for your changes to take effect.
Note also that there is an Application Setting called Enable Fixed Top Navigation Mobile (Mobile Site grouping). When enabled, the top navigation on the mobile site will remain fixed to the top of the screen when scrolling.
IRP Mobile Site Stylesheet
You define the whole look and feel of the mobile version of your site using the Interface & Design > Mobile CSS Stylesheet section in the IRP Admin left navigation menu. You should be very confident about handling CSS to make edits to the styles.
Any changes that you make in that section will be reflected immediately on the mobile site. You can see how the website will appear on a mobile device by clicking the Preview Mobile Site button. See the Mobile CSS Stylesheet help topic for details.
IRP Mobile Site Favourites Icon
The IRP has support for a mobile favourites icon. This is a very useful feature which you are encouraged to use as it allows customers to add your website to the home screen of their smartphone where it will be displayed as an app-like icon showing the image you have created. Customers can then access your site directly by clicking the icon.
When you create a suitable icon you can add it under Interface/Icons/FavoritesIconMobile.png in the Interface & Design section of IRP Admin. The image should be a PNG image with a width and height of 192 pixels. See the Interface Folder help topic for more details.
IRP Default Mobile Home Page
The mobile home page (MobileDefault.aspx) can involve several elements as shown in the following mock example:
The possible elements are as follows (remember that much of the mobile site setup is based automatically on how you have configured your desktop site):
- A Sign-In link in the top-right corner of the page. When a customer clicks this link they go directly to the MyAccount/MobileLogin.aspx page. See the IRP Mobile Login Page section for details.
- A Menu link in the top-left corner of the page. You need to enable the Application Setting ‘Enable Mobile Menu’ to display this. When a customer clicks this link, the menu expands to the right and shows several items in drop-down lists depending on how you have configured the other Mobile Application Settings. In addition, if the customer has signed in, they use this menu to log out again. Note that the customer’s name will always appear in the top-right corner of the screen (‘Hello Jane’) even if they have signed out.
- A Site Logo at the top-centre of the page, ideally translated for each of the countries in your system. When a customer clicks this link on any page, they go back to the home page. You define this logo under Interface & Design > Site Logos in the IRP Admin left navigation menu. To create a new logo, select Add New Logo > New Mobile Logo. See the Site Logos help topic for details.
- A Basket link in the top-right corner of the page. When a customer clicks this link they either go directly to the MobileBasket.aspx page or, if you have enabled the ‘Enable Expandable Mobile Basket Link’ Application Setting the MobileDefault.aspx page remains but the screen slides sideways (or ‘flies out’) to expose the contents of the customer’s basket. See the IRP Mobile Basket Page section for details.
- A search bar at the top of the page with a ‘magnifying glass’ search icon at the right side of the bar. When a customer types in a search term and clicks the icon, the MobileSearchResults.aspx page is displayed. See the IRP Mobile Search Results Page section for details.
- A Mobile Heading banner below the Search bar. You define this logo under Interface & Design > Banners in the IRP Admin left navigation menu. To create a new banner, select ‘Add New Banner’ and for the ‘Banner Location’ setting, select ‘Mobile Heading’. See the Banners help topic for details.
- Brand and Category drop-down lists for navigation. You need to enable the Application Setting ‘Show Mobile Homepage Brand Category Selection’ to show these.
- A Mobile Home Page banner in the middle, below the Brands and Categories. This should be country-specific for each country in your system. You define this banner under Interface & Design > Banners in the IRP Admin left navigation menu. To create a new banner, select ‘Add New Banner’ and for the ‘Banner Location’ setting, select ‘Mobile Home Page’. See the Banners help topic for details.
- Bottom navigation at the bottom of the page. This area might include Mobile Custom Content Pages. You define this area under Interface & Design > Navigation in the IRP Admin left navigation menu, then click the ‘Bottom’ button and select ‘Mobile Site’. See the Navigation – Bottom Mobile Site help topic for details.
- Social Media & Payment Processor links and ideally third-party validation (for example, Trustpilot).
- A View Full Site link in the bottom-left corner of the page. When a customer clicks this link they go directly to the main desktop version of your site.
- A Settings link (shown as a flag icon) in the bottom-right corner of the page (this may also appear in the top-right corner if you have enabled the ‘Show Top Settings Link’ Application Setting). When a customer clicks this link they go directly to the MobileSettings.aspx page. See the IRP Mobile Site Settings Page section for details.
IRP Mobile Login Page
The /Mobile/MyAccount/MobileLogin.aspx page is the main login page for new customers to create an account and for returning customers to sign in again. Here is an example:
New Customers need to click the Create A New Account button. This takes them directly to the MyAccount/MobileSetup.aspx page. From here they fill in all or some of the following details:
- Email Address and Password
- Billing Address Details (Name and Address)
- Other Contact Information (Daytime & Mobile phone number, Gender and optionally Date of Birth*)
- Security Questions (Secret Question and Answer)
- Email Subscriptions (Subscribe checkbox)
* Note that a customer can enter their Date of Birth only if you have enabled the Application Setting ‘Enable Customer Date Of Birth Entry’.
When the customer clicks the Create New Account button they are taken to the MyAccount/MobileMyAccount.aspx page. See the IRP Mobile ‘My Account’ page section for details.
Returning Customers must enter their email address and password to log in. If they have forgotten their password they can use the ‘Forgotten Your Password?’ feature.
IRP Mobile ‘My Account’ Page
The /Mobile/MyAccount/MobileMyAccount.aspx page is the first page that a visitor sees when they click the ‘My Account’ link:
From here, the following options are available:
- Track and Manage your orders
- View your orders: This takes the customer to the MyAccount/MobileOrderList.aspx page. This is where users can see a list of all their new and completed orders. If they view a specific order, the MyAccount/MobileOrderDetails.aspx page is displayed.
- Change delivery address on your order: This takes the customer to the MyAccount/MobileOrderList.aspx page. This is where users can see the details of an individual order, including the Order ID, Date, Status, Billing and Payment details. Note that order delivery addresses can only be edited if the ‘Enable Live Charging’ Application Setting (‘Payments - Live Charging’ group) is disabled and the order status is still ‘new’.
- Loyalty Scheme: This takes the customer to the MyAccount/MobileLoyaltyScheme.aspx page. This is where users can see details of any loyalty scheme that they are members of. The content of this page depends on what Loyalty Schemes you have configured on your IRP. Here is a mock example:
- Personal Information
- Change your name, billing address or phone numbers: This takes the customer to the MyAccount/MobileEditAccountDetails.aspx page. This is where users can make changes to their contact details (other than their email address, which is managed on a separate page). They can also state whether they are male or female.
- Change your E-mail address or Password: This takes the customer to the MyAccount/MobileEditPasswordDetails.aspx page. This is where users can update their email address and password. Optionally, they can also enter their date of birth (if you have enabled the Application Setting ‘Enable Customer Date Of Birth Entry’). This can assist your digital marketing endeavours, especially in being able to target your users more specifically. Here is an example:
- Forgotten your Password? Click Here: This takes the customer to the MyAccount/MobilePassword.aspx page. This is the ‘Password Helper’ page where users can reset their password. Here is an example:
- E-mail Notifications
- Review your E-mail subscriptions and E-mail formats: This takes the customer to the MyAccount/MobileEmailSubscriptions.aspx page. This is where users can update their subscription details and email preferences for any email campaigns that you have available. They can also unsubscribe from any mailing lists. Here is an example:
- View your requested E-mails for Out Of Stock items: This takes the customer to the MyAccount/MobileStockNotifications.aspx page. This is where users can review emails that they have requested regarding out-of-stock items that they are interested in. If there are no notifications they will see the following message:
- Join Mailing List: This takes the customer to the MyAccount/MobileEmailSubscriptions.aspx page, as described previously.
IRP Mobile Search Results Page
When the customer enters a term in the search bar at the top of the page and clicks the Search button, the results are displayed on the MobileSearchResults.aspx page. If several results are returned, the screen includes a ‘Sort By’ drop-down list. Here is an example:
You can see that it is possible to sort the results using the following filters:
- Best Selling
- Price — Low To High
- Price — High To Low
- Discount — Low To High
- Discount — High To Low
- Product — A To Z
- Product — Z To A
- Category — A To Z
- Category — Z To A
- Customer Reviews
IRP Mobile Model & Category Pages
When a customer selects any brand from one of the drop-down lists, the /Mobile/MobileBrands.aspx page is displayed, showing a list of products associated with the brand that the user has selected.
When a customer selects any category from one of the drop-down lists, the /Mobile/MobileCategories.aspx page is displayed, showing a list of products associated with the category that the user has selected.
When a customer selects a particular product to view from either the brands or categories pages, the MobileModels.aspx is displayed showing that product. The customer can expand and collapse the model description and model reviews content on this page. They can also click (or swipe) through other product images using arrow icons and select another product to view. Here is an example:
You can also see that if the Price Match feature is enabled in the IRP, a ‘Price Match Request’ link is displayed on the MobileModels.aspx page. This links through to the MobilePriceMatchRequest.aspx page. On this page the customer can use a form to request a price match on an item they have seen on another website at a cheaper price. See the Price Match help topic for details.
IRP Mobile Attribute Filter Menu
You can show customers an filter menu for the product attributes that you have configured in the system. This menu functions in a similar way to the left hand Attributes menu on the desktop site but is designed for use on mobile devices. To display the filter, enable the Application Settting called Show Mobile Filter Menu. The filter will then appear as follows:
When selected, the filter expands as follows:
Customers can select filters from the menu which, once selected, appear in a list of all selected filters at the top of the filter popup and also at the top of the product listing. Clicking a filter in the list of all selected filters will remove the filter. Clicking the 'Done' link will activate the chosen filter(s) whereas clicking the 'Clear All' link will remove all selected filters. You can use the following Small Translations for the filter:
- 2534 — ‘Done’
- 1640 — ‘Clear All’
- 2540 — ‘Filter’
Once enabled, the filter will be shown on the following pages on the mobile site:
IRP Mobile Offers Page
If you have enabled the ‘Show Menu Offers Link’ Application Setting — and if you have created Promotions in IRP Admin — a link for the offers is shown in the Mobile Menu drop-down list. This links through to the /Mobile/MobileOffers.aspx page which shows a list of all offers that you have available to customers.
Customers can sort the offers using the following filters:
- Best Selling
- Price — Low To High
- Price — High To Low
- Discount — Low To High
- Discount — High To Low
- Product — A To Z
- Product — Z To A
- Category — A To Z
- Category — Z To A
- Customer Reviews
IRP Mobile Basket Page
When a customer clicks the basket icon at the top-right corner of the page, they go either directly to the MobileBasket.aspx page or, if you have enabled the ‘Enable Expandable Mobile Basket Link’ Application Setting, the MobileDefault.aspx page remains but the screen slides sideways (‘flies out’) to expose the contents of the customer’s basket.
The mobile basket ‘fly-out’ page appears as in the following example — you can see how the MobileDefault.aspx page has moved to the left to show the basket contents:
Note: The ‘Checkout’ button will not be displayed on this screen if you have enabled the Click & Collect feature in the IRP.
There are options for the customer to:
- View Basket: This links directly to the /Mobile/MobileBasket.aspx page.
- Checkout: This links directly to the /Mobile/Secure/MobileLogin.aspx page if the customer has not already logged in. If they are already signed in, the customer will go to the second step of the checkout process, the /Mobile/Secure/MobileDeliveryAddress.aspx page.
- Check out with PayPal: This links directly to the /Secure/PayPalInitialize.aspx page.
- Email Basket: This allows the customer to enter their email address in order to retrieve their basket on any computer on which they open the email link. They also have the opportunity to subscribe to the email list, as shown in the following example:
The main mobile basket page (/Mobile/MobileBasket.aspx) appears as in the following example:
The page includes similar options to those described previously, including the ‘Checkout’, ‘PayPal’ and ‘Email Basket’ options. Customers also have the opportunity to enter a promotional voucher code if they have one and can enter any additional notes about the order if they wish to do so before they place their order (you can change the default text for this box using Small Tranlsation ID 2525). Note that for the ‘eVoucher Code’ field to be displayed, you must have enabled the Applicating Setting ‘Enable Voucher Codes’ (in the ‘Promotions And Vouchers’ grouping). You can also alter the default text using Small Translation ID 2516.
IRP Mobile Checkout Page
When a customer is making a purchase, there are several screens that they will see as they move through the checkout process. After they have signed in (if they have not already done so) they will use the screens described below. You can define the bottom navigation in this area under Interface & Design > Navigation in the IRP Admin left navigation menu, then click the ‘Bottom’ button and select ‘Mobile Site – Checkout’. See the Navigation – Bottom Mobile Site Checkout help topic for details.
- /Mobile/Secure/MobileDeliveryAddress.aspx: On this page the customer has the option to use their current billing address, edit their address or to add a new address. For example:
- /Mobile/Secure/MobilePostage.aspx: Here the customer can select their postage method. Here is an example with only one postage method:
Note that if Click & Collect is enabled (and available for the basket contents) the customer will have the option of switching between delivery and collection.
- Mobile/Secure/MobilePaymentDetails.aspx: A numeric keypad pops open on this page in order for the customer to enter their Card Number, Card Issue Number and Card Security Digits.
- MobileOrderSummary.aspx: The customer can see a summary of their order on this page.
IRP Mobile Site Settings Page
A customer can change the mobile site settings by clicking the flag icon in the bottom-right corner of the page or, if you have enabled the ‘Show Top Settings Link’ Application Setting, the top-right corner of the page.
The MobileSettings.aspx page is then displayed, for example:
The following options are available using drop-down menus on this page:
- My Country: This allows the customer to select from all of the countries in the IRP.
- My Currency: This allows the customer to select from all of the currencies in the IRP.
- My Language: This allows the customer to select from all of the languages in the IRP.
After making the selections, the customer needs to click the Change button and their chosen version of the website is then displayed.
IRP Mobile Custom Content Pages
If you have linked desktop versions of Custom Content Pages to mobile versions, customers can view the mobile versions when they are browsing your site on their mobile devices. The URLs of the pages contain different ID numbers. For example, if the desktop version of your ‘About Us’ page is your-IRP/en/About-Us/cc-1.aspx, the mobile equivalent of the same page might be your-IRP/en/About-Us/cc-6.aspx.
For information about how to create and manage Custom Content Pages, see the Custom Content Pages help topic.
As previously explained, you can define the navigation in this area as described in the Navigation – Bottom Mobile Site help topic.