How Do I

Setup for Mobile

Overview

This guide is really about Small Devices, not just Mobile phones. This can include phones, tablets, resized desktop browsers and any other device.

  • BigFish uses a “responsive” approach to effectively and elegantly render your eCommerce site to any small device
  • The examples used in this guide will reference the Fashion House Demo implementation:
    • http://bigfish.solveda.com:8082/online/shop/main
    • Resize your browser to less than 450 pixels and observe the website adapt to the smaller screen size
    • Try from a smart phone and view the “responsive” approach work in it’s intended environment

How It Works: The Basics

  • The solution lies in the management of the Cascading Style Sheets (CSS) in a “responsive” way
  • The primary CSS, typically used in a desktop environment, is called bigFishClientSkin.css
  • A special piece of content activates the bigFishSmallDevice.css when the visible area becomes less than 450 pixels
  • The Small Device specific CSS then overrides styles from the primary CSS and hides or shows specific content classes that are appropriate for a small device

How It Works: The Details

  • Activating the bigFishSmallDevice.css:
    • A special piece of content called SI_HEAD_TAG_CONTENT is used to optionally include the new CSS:
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<link rel="stylesheet" media="screen and (max-width: 450px)"
	href="/osafe_theme/css/bigFishSmallDevice.css" type="text/css"/>

he tag is necessary to reset small devices so that the supplemental bigFishSmallDevice.css will be accessed

    • This content is included within the <HEAD> tag of every page generated from BigFish
  • Managing Content
    • A central concept is that all relevant user managed content is referenced with a “class” name that identifies the content:
Class Name Description
defaultDevice Content with this class is exposed in the Default environment and hidden in the Small Device environment
smallDevice Content with this class name is exposed in the Small Device environment and hidden in the Default environment
    • For example, in the Fashion House demo, the site footer content SI_FOOTER_CONTENT is defined below:
<div class="defaultDevice">
     <div class="footerColumn">
          <span class="footerCaption">OUR PRODUCTS</span>
          <ul id="footerLinks">
               <li>Lots of links</li>
          </ul>
     </div>
</div>

<div class="smallDevice">
     <div class="footerColumn">
          <ul id="footerLinks">
               <li>A few links<li>
         </ul>
     </div>
</div>
    • The primary CSS is coded to show all defaultDevice content and hide all smallDevice content.
      • “Lots of links” are displayed given that the desktop environment has lots of real-estate to accommodate the content.
    • The small device CSS is coded to show all smallDevice content and hide all defaultDevice content.
      • “A few links” are displayed given that the Small Device has limited real estate

This technique is duplicated in many different content areas, including Home Page Spots, Header Content, etc.

  • Desktop vs Small Device Rendering
Function Desktop Small Device
General The display WIDTH attribute is the primary driver to control Home page display, how many products are displayed in a list, etc. The same WIDTH attribute controls the display, and effectively forces products to be displayed in a list, etc.
Navigation Horizontal right-to-left drop-down Product Catalog focused Vertical display of categories. Instead of drop-down customers navigation to the next level.
SOLR Facets Displayed Hidden
PLP Quicklook As per design Disabled
Breadcrumb Subtle trail displayed Prominent trail displayed, acts as a significant navigation component

How To Build a Small Device Interface

  • Small Device CSS
    • Download the bigFishSmallDevice.css from the Fashion House Demo
    • Upload the bigFishSmallDevice.css into your implementation Admin Tools Manage CSS Files
  • Content
    • Review the Site-Info and Home-Page content on the Fashion House implementation, specifically SI_HEADER_CONTENT, SI_FOOTER_CONTENT, SI_LOGO, SI_SHOPPING_CART.
    • Apply similar techniques to your content.
  • Tweak, design, play and enjoy!
Back to Top

Built by Solveda