slscart logo

Templates and Mobility

Tips on creating mobile-ready slscart templates.

Mobile notes for slscart templates

1. change doctype to html5 (<!DOCTYPE html>) - necessary for mobile
2. put the inline css, including the slideshow's css, before javascript
3. upgraded the slideshow's javascript to a more efficient version
http://dev.jonraasch.com/simple-jquery-slideshow/faq#performance
4. took out type="text/css" from <style> as it is not necessary for html5
5. <script> needs no additions, like language="javascript" for html5, as long as the script is javascript
6. moved <body> attributes to inline css
7. added width, height, alt for <img> components
8. removed duplicate addthis.com stuff at bottom of page
9. cleaned up the code so it would verify
10. reduced size of background image from 1.42MB to 195K (bkgd1.jpg -> thecotta_bkgd2.jpg)
11. moved %META_TAGS% above <title> tag so the charset meta tag is first. This is so the title tag, description, etc will be aware of which character set to use.
12. added meta viewport for mobile rendering
13. created mobile background (thecotta_mobile_bkgd.jpg) (800x910) instead of 1400x1600
I'm not sure the best cutoff width for mobile vs desktop. I use to use 640px but now I've seen 800 or so (perhaps to accommodate when the device is turned sideways). An iPhone 6 Plus is 414x736 for example. optioncart changed to 800px.
14. For mobile only, I kept out the Boutique image and paypal image on the side nav column because I put the side nav column at 20% width when mobile and these images were too wide.
15. For desktop, I set the main width to 1050px while mobile I set main width to 100%
16. For desktop, I set left nav column width to 300px and mobile to 20%
17. I commented out the pinterest button since it is included on the addthis.com set of share icons
18. I made several changes to simplify the template structure
19. I took out the bottom horz navigation as it was duplicated in mobile
20. The shabby signature at the bottom only shows up in desktop mode. I haven't figured out how to put just a link in mobile only, though a smaller image would work.
21. I put the email text box on a separate line (to conserve width)
22. You can see by looking at the template code how I only have the big images show up in desktop mode only.
23. The horz menu in mobile needs its color adjusted.
24. I used padding (as seen on #middlebkgd) to keep text and images inside the lines on the middle image

25. Put full paths to images in the template. If not, they will break when using custom pages. I use %SITEG_URL% to prefix image paths

<head>

viewport

Menu

For a vertical menu to slide from left use %MOBILE% which creates a horz mobile menu and %PAGES_VERTICAL% which shows the created pages

Catalog Images

Under storeadmin > Web Site > Images > Catalog Images > Update

Use %SITE_LOGO%, the Logo shows up on a desktop pc whereas the Mobile Logo shows up when the device width < max width (800px?)

Templates

3 Column Mobile Example

Blue_Mobile template snippet. Horizontal menu

<!DOCTYPE html>
<html>
<head>
%META_TAGS%
<title>%TITLE_TAG%</title>
%STYLE_SHEET%
<style type="text/css">
header { background-color: #6482DB; }
.sb_hpages { background-color: #97B5FF; }
.mainwrap { background-color: #FFFFFF; }
body {
background: radial-gradient(#b2c1ed 15%, transparent 16%), radial-gradient(#cbdaff 15%, transparent 16%), #e5f4ff;
background: -webkit-radial-gradient(#b2c1ed 15%, transparent 16%), -webkit-radial-gradient(#cbdaff 15%, transparent 16%), #e5f4ff;
background: -moz-radial-gradient(#b2c1ed 15%, transparent 16%), -moz-radial-gradient(#cbdaff 15%, transparent 16%), #e5f4ff;
background-position: -10px -10px, 15px 15px;
background-size: 50px 50px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
}
#overwrap {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #CAE8FF), color-stop(20%, #CAE8FF), color-stop(20%, #FFFFFF), color-stop(87%, #FFFFFF), color-stop(87%, #CAE8FF), color-stop(100%, #CAE8FF));
background-image: -webkit-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: -moz-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: -o-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: -ms-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
}
/* mobile */
@media screen and (max-width: 800px) {
#overwrap { background: #FFFFFF; }
.sidebar_left { background-color: #CAE8FF; }
.sidebar_right { background-color: #CAE8FF; }
}
</style>
</head>
<body>
<div id="sb_overbox">
  <header>
    <div class="sb_content">
      <div class="viewcartbox">%VIEW_CART%</div>
      <div class="sitelogo">%SITE_LOGO%</div>
      <div class="searchform">%SEARCH_SITE%</div>
    </div>
  </header>
  <div id="overwrap">
    <div class="sb_hpages">
      %MOBILE%
      %PAGES_HORIZONTAL%
    </div>
    <div class="sb_content clearfix">
      <div class="sb_grid">
        <section class="sidebar_left sb_unit">%CATEGORY_VERTICAL%</section>
        <section class="sb_unit mainwrap">
	  <h1>%PAGE_TITLE%</h1>
	  %CATEGORY_NAVIGATION%
	  %SITE_MESSAGE%
	  %CATEGORY_DESCRIPTION%
	  %CONTENT%
        </section>
        <section class="sidebar_right sb_unit">%FEATURED_COLUMN%</section>
      </div>
    </div>
    <div class="sb_hpages">
      %PAGES_HORIZONTAL%
    </div>
  </div>
  <footer>
    <div class="sb_content">
      <p>%EMAIL_FRIEND%</p>
      <p>%COPYRIGHT%</p>
    </div>
  </footer>
</div>
</body>

%MOBILE% shows the mobile menu when a mobile device is detected. It also sets the viewport.

sb_overbox - not used. Encompasses entire page.

<header> sets header color and font size, centered, adds margin-top 20px.

viewcartbox - positions view cart image/button upper-right corner of header. Uses abs positioning

searchform - positions search form lower-right corner of header. It will lay on top of site logo. Uses abs positioning

sb_content class will center its contents across the page (100% width). Display: block

sb_hpages class centers images (i.e. blocks) and text. width at 100% max width: 1200px.

sidebar_left - 20% width, max 300px. Notice sidebar_left has a background color in the /* mobile */ section of css. sidebar_left is normally has no background color but in mobile mode the sidebar left slides over the main part when clicked on. If it is transparent, you can see through to the main part so in mobile mode there needs to be a background color.

sitebar_right - centers text, 12% width with 1% padding

sb_unit - inline block

sb_pages - used for link color, link hover color

overwrap background-image creates 3 columns using gradients

20% for left col, 66% for center col, 13% for right col

-webkit-gradient /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */

-webkit-linear-gradient /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */

-moz-linear-gradient /* Firefox 3.6 - 15 */

-o-linear-gradient /* Opera 11.1 - 12 */

-ms-linear-gradient /* Internet Explorer (IE) 6-9, while they don't support the CSS gradient syntax */

linear-gradient /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

id=overwrap - max width 1200px on non-mobile

id=overwrap - on widths <= 800px

section.mainwrap - 66% width

<footer> - centers, text centers, width 100%, max width: 1200px

%COPYRIGHT% uses small font size, default 8 pt (11 px)

2 Column Example

Blue_Left template snippet

<body>
<div id="sb_overbox">
   <header>
    <div class="sb_content">
      <div class="viewcartbox">%VIEW_CART%</div>
      <div class="sitelogo">%SITE_LOGO%</div>
      <div class="searchform">%SEARCH_SITE%</div>
    </div>
   </header>
   <div id="overwrap">
      <div class="sb_hpages">
         %MOBILE%
      </div>
      <div class="sb_content clearfix">
         <div class="sb_grid">
         <section class="sidebar_left sb_unit">
          <h2>Catalog</h2>
          %CATEGORY_VERTICAL%
          <h2>Pages</h2>
          %PAGES_VERTICAL%
        </section>
        <section class="sb_unit mainwrap">
	  <h1>%PAGE_TITLE%</h1>
	  %CATEGORY_NAVIGATION%
	  %SITE_MESSAGE%
	  %CATEGORY_DESCRIPTION%
	  %CONTENT%
         </section>
         </div>
      </div>
   </div>
   <footer>
      <div class="sb_content">
      <p>%EMAIL_FRIEND%</p>
      <p>%COPYRIGHT%</p>
      </div>
   </footer>
</div>
</body>

The left column is about 34% wide, right column 66% wide. Total 1200px max as desktop.

sb_overbox - not used. Wraps entire content.

<header> sets header color and font size, centered, adds margin-top 20px

sb_content class will center its contents across the page (100% width)

sb_hpages class centers contents

sitebar_left - 20% width, max 300px

sb_grid - text align center, max-width: 100%

sb_unit - inline display bock

id=overwrap - max width 1200px on non-mobile

id=overwrap - on widths <= 800px

section.mainwrap - 66% width

Fonts

Some fonts do not reside on a mobile phone, just the desktop. A good mobile phone font is Open Sans or Droid Sans which was designed specifically for mobile phones and readability. Android uses Roboto as its default.

 

 

Create a mobile.css file. An example one is shown below. There are three sections: all, desktop, and mobile. 'all' elements affect desktop and mobile. 'desktop' only affects desktop pcs (ones with a screen width larger than 640px). Mobile affects only mobile devices (screen width 640px or less).

I use a version number in the mobile css file, e.g. mobile_1.0.0.css so sites will get immediate benefit from mobile css changes, rather than waiting for their browser's cache to update. Note, the template's mobile css needs to be updated, too.

1. The biggest change is the size of the banner. Note there are two banners, one for desktop and one for mobile.

2. Another change is large fixed width columns. These can be changed to percentages or specified differently under 'desktop' and 'mobile'.

3. It is best to use <div> instead of <table> to create columns, etc.

4. Viewport needs to be configured. One is created if %META_TAGS% is used. The meta tag viewport controls how mobile devices view a web page. This is added in the website's template. The one shown below should suffice for most cases. More can be found here:

https://developers.google.com/speed/docs/insights/ConfigureViewport

<!DOCTYPE html>
<html lang="en-us">

<head>
<title>%TITLE_TAG%</title>
%META_TAGS%
<meta name="viewport" content="width=device-width, initial-scale=1">

* Template needs to use HTML5 doctype (which is <!DOCTYPE html>) It is case insensitive.

* Note the mobile css file is specified after %STYLESHEET%. This is so mobile css can override any css in the main stylesheet.

mobile.css sample

/*** all ***/
body {
bgcolor: #FFFFFF
}
.width100 {
width: 100%;
}
.centerblk {
display:block;
margin-left:auto;
margin-right:auto
}
.cpfont {
font-family: Georgia, serif;
}
    .bs2 {
    text-indent: 0px;
    margin: 0
    }
    .bs3 {
    text-indent: 0px;
    padding: 0;
    margin: 50px 0px 0px 0px;
    }

/*** desktop ***/
@media screen and (min-width: 641px) {
    /* banner */
    #header {
    background: url("http://www.boho-mama.com/images/Banner1.png") center no-repeat;
    height: 300px;
    }
    .bsss {
    margin-left: 300px;
    margin-right: 275px;
    }
    .bs2 {
    padding: 0px 0px 0px 300px;
    }
}

/*** mobile ***/
@media screen and (max-width: 640px) {
    /* banner */
    #header {
    background:url("//www.slstesting.com/testinst/images/banner1-2.png") no-repeat center;
    height: 183px; /* height of image */
    }
    .bs2 {
    padding: 0;
    }
}

The header would be defined as:

<div id="header></div>

or

<header></header>

and replace #header with header in the mobile.css

Helpful CSS

Min & Max Width

Max-width property allows you to set the max width of the element. The purpose of max-width is to prevent the element from extending the boundary.

Max-Width Container

In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width.

.container {
	width: 800px;
	max-width: 90%;
}

Responsive Image

You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.

img {
	max-width: 100%;
	height: auto;
}

The above responsive image CSS works on IE7 and IE9, but doesn't work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:

@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

Min-Width

Min-width is opposite to max-width. It sets the minimum width of an element. In the example form below, min-width is used on the input text field to prevent the input from getting very small when scaling down.

min width

3. Relative Values

In responsive design, knowing when to use relative value can simplify the CSS and maximize the best layout result. Below are some examples.

Relative Margin

Below is an example of a commentlist where relative left margin is used to space out the threaded comments. Instead of using fixed pixel value, I used percentage value to space out the sub-lists. As shown on the left side of the screenshot, the content box in the sub-lists gets very small on mobile resolution if pixel left margin was used.

relative margin

Relative Font Size

With relative value (eg. em or %), the font size, line-height and margin spacing can be inherited. For example, I can change the font size on all descendant elements by simply changing the font-size on the parent element.

relative font size

Relative Padding

The screenshot below shows it is better to use relative percentage padding as opposed to fixed pixel padding. The box on the left shows an unbalanced padding space if pixel padding was used. The box with percentage padding on the right shows that the content area is maximized.

relative padding

4. Overflow:hidden Trick (demo)

As posted in my previous article, you can clear float with the overflow property. This trick is extremely useful. You can clear the float from the previous element and keep the content running within the container by applying overflow:hidden.

overflow: hidden

5. Word-break

You can force unbreaking text (eg. long URL text) to wrap instead of running in a single line.

.break-word {
    word-wrap: break-word;
}
break-word

***