Mobile template CSS

I tried searching but came up with very little. I'd like to offer a mobile version of our website. I was hoping to find a template and return the regular template or this new mobile template based upon the visitors browser. Anybody tackle this yet?

Bump. No one has set up a Zen Cart site to be viewed from a mobile phone or other device?

I agree that this should be addressed. I don't believe that any of my competition has a special mobile presence yet and I'd like to be ahead of the pack. I used to be on top of new tech but am just getting started with mobile. I haven't even seen my site on a mobile device yet. I am willing to help support development.

jeking:

I tried searching but came up with very little. I'd like to offer a mobile version of our website. I was hoping to find a template and return the regular template or this new mobile template based upon the visitors browser. Anybody tackle this yet?

brushwoodnursery:

I agree that this should be addressed. I don't believe that any of my competition has a special mobile presence yet and I'd like to be ahead of the pack. I used to be on top of new tech but am just getting started with mobile. I haven't even seen my site on a mobile device yet. I am willing to help support development.

All it really takes is a "handheld/mobile" CSS stylesheet.

take a look at here for a how to.

If that's the case, would it need to be specific to each template or could a general one be used for most zen installations? I'd prefer to preserve some of the feel of my store but don't want browser/device incompatibility either.

brushwoodnursery:

If that's the case, would it need to be specific to each template or could a general one be used for most zen installations? I'd prefer to preserve some of the feel of my store but don't want browser/device incompatibility either.

This is fairly generic:

/**

• CSS Stylesheet for handheld devices
• @package templateSystem
• @copyright Copyright 2003-2005 Zen Cart Development Team
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
  */

@media handheld {

html, body {font: 12px/15px sans-serif;
background: #fff;
padding: 3px;
color: #000;
margin: 0;}
a:link, li a:link, a:visited, li a:visited {
background:none;
text-decoration: underline;
color: #0000CC;
}
a:hover, li a:hover, a:active, li a:active {
background:none;
text-decoration: underline;
color: #660066;
}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}

#mainWrapper {margin:0;background:none;max-width: 480px;}
#headerWrapper {background-color: #ffffff;border:none;height:200px;}
.customerService{display:none;}
.freeShipping{display:none;}
#credentials{display:none;}
.date{display:none;}
#dropMenuWrapper{display:none;}
#navMainWrapper{border:none;}
#navMain {
float: none;
font-size: 1.1em;
line-height: normal;
}
#navMain ul {
margin:0;
padding:0;
list-style:none;
}
#navMain li {
display:block;
margin:0;
padding:0;
}
#navMain a, #navMain a span, #navMain .current a, #navMain .current a span {display:block;float:none;text-decoration: underline;color: #0000CC;background-image:none;text-align:left;}
#navMain a:hover, #navMain a:hover span {color:#ff0000;background-image:none;}
#navMain .contact, #navMain .account, #navMain .cart {display:none;}
#contentMainWrapper, #contentColumnMain {background-color: #ffffff;width:480px;float:none;}
.centerColumn {margin: 0;padding: 0;}
#footer{border:none;text-align:center;}
#siteinfoLegal {display: none;text-align:left;}
.messageStackWarning, #navMainSearch, #navCatTabsWrapper, #navEZPagesTop,
#navColumnOne, #navColumnTwo, #taglineWrapper, .navMainSearch, #navSuppWrapper, .banners, #navBreadCrumb { display: none;}

}

/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) {
html {-webkit-text-size-adjust: none;}

}

Super. Now how does one set-up a check for the browser or agent to switch the stylesheet for a handheld browser?

jeking:

Super. Now how does one set-up a check for the browser or agent to switch the stylesheet for a handheld browser?

first name the css file "handheld_stylesheet.css and upload it to:

includes/templates/YOUR_TEMPLATE/css

next

open includes/templates/YOUR_TEMPLATE/common/html_header.php

find the following section of code:

/**

• load printer-friendly stylesheets -- named like "print*.css", alphabetically
  */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');
  sort($directory_array);
  while(list ($key, $value) = each($directory_array)) {
  echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
  }

immediately after add the following:

/**

• load handheld-friendly stylesheets -- named like "handheld*.css", alphabetically
  */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^handheld/', '.css');
  sort($directory_array);
  while(list ($key, $value) = each($directory_array)) {
  echo '<link rel="stylesheet" type="text/css" media="handheld" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
  }

clydejones:

All it really takes is a "handheld/mobile" CSS stylesheet.

take a look at here for a how to.
Are you sure about that? :blink:

Other considerations are:

• image resizing
• MIME type

I don't have / use a Cell Phone and so I use online Emulators for testing Mobile site coding. The 'perishablepress' link you provided failed miserably. Anyone actually checked the site with their Cell Phone? Be interested in seeing how it showed. (hint - screenshot would be nice :D)

You can check the general look by viewing in Opera.

open the a site in the opera browser click view and then "small screen"

I don't understand what you are trying to point out?

Viewing in Small Screen is still using a Browser?

Anyway, I just ribbing you a bit in my earlier post. :smile:
Creating a Mobile or mobi site has its own problems and quirks and to do it well, it takes time. And the practices of knowing Valid HTML & CSS still apply.

I had a friend surf my store with an iPhone using Safari. It came up exactly as the currently layout (he was doing it in front of a desktop to compare), but it was tiny. It allows zoom so he could access all of the text and images as needed.
That said, I'd still prefer something optimized for mobile.

Wow!
I just happen to stumble upon this thread while searching for how to optimize my site for mobile browsers.
This has to be the simplest tweaking of my Zen Cart that I've done to date!
For those that want to apply this tweak here is just one of the numerous mobile browser emulator available.
This is the Opera Mini 5 emulator. minu.me/378b

Thanks you so much Clyde.

Site to 'test' your mobile templates

ready.mobi/launch.jsp?locale=en_EN

Dan

I tried to install it but does not work, you probably should tell him to read the stylesheet mobile when you connect a mobile device, Thanks

Clyde's tweaks earlier in this thread are great, just what I needed.

I have found that, by using various emulators, '@media handheld' doesn't always get recognised by every mobile manufacturer.

So to play it safe I decided to use '@media all and (max-width: 320px)' instead, whereby the site view automatically switches to Clyde's alternative stylesheet once the viewport gets down to 320px wide.

I've edited this alternative stylesheet to ensure everything relevant fits within the 320px width - not too much of a job once you get into it.

I'm still tweaking and testing and may alter the 320px value. I'm working on the premise that any mobile with a larger resolution would be be able to navigate my normal site. Just started the process of moving on from emulators and onto differing mobiles.

Obviously jscript is not possible on all mobiles and features like csshover don't seem to work, but my site has enough textual links to get around this.

Anyway, just thought I'd share.

Cheers

Simon

I am unable to log into admin with smartphone. Any ideas?
Posted via Mobile Device

login to admin with ipod touch & safari browser works fine for me.

This is using 'normal' website not 'mobilised' css. Haven't tried it on other devices .

Having a specific CSS stylesheet for mobile devices may solve the problem but most of the time having a specific Zen-Cart template would do a better job and allows admin to do some fine tuning for specific platform. The idea is to direct a visitor to a template or another depending on the device. For that, you can just override the init_templates.php.
First make sure you have access to browscap.ini. This is is located in the php.ini file (check your server info). Adjust the value of this php variable and restart Apache. Browscap.ini file can be downloaded from browsers.garykeith.com/downloads.asp
Second, duplicate the file init_templates.php from includes/init_includes to includes/init_includes/overrides and add this lines just before the comment "The actual template directory to use" :
/**

• BOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT
  /
  /*
• Determine if client is a mobile device or not ($mobile = 1 ==> it is | $mobile = 0 ==> it is not)
  /
  $browser = get_browser($_SERVER['HTTP_USER_AGENT'], true);
  $mobile = ($browser['ismobiledevice'] == null ? 0 : $browser['ismobiledevice']);
  $platform = $browser['browser'];
  /*
• Check if there is a specific template for this mobile platform and use it
  /
  if ($mobile == 1)
  {
  $exists_mobile = file_exists(DIR_WS_TEMPLATES . $template_dir . '_mobile');
  if ($exists_mobile)
  {
  $exists_platform = file_exists(DIR_WS_TEMPLATES . $template_dir . 'mobile' . $platform);
  if ($exists_platform)
  {
  $template_dir .= 'mobile' . $platform;
  }
  else
  {
  $template_dir .= '_mobile';
  }
  }
  else
  {
  // use regular template
  }
  }
  /*
• EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT
  */
  If your template name is "mytpl" then the visitor using a mobile device will use a template called "mytpl_mobile" unless there is a specific template for its platform for example "mytpl_mobile_Android" or "mytpl_mobile_iPhone". With this, you can tweak the settings for a specific platform like Android, iPhone, BlackBerry, ... or have a generic template for all mobiles.
  Don't forget to duplicate the directories in languages, modules, ... for all the platforms you want to manage (see above, one directory for each platform) and to define the layout boxes as necessary (table layout_boxes) for each of your templates.
  Now you can define a template for mobiles (mytpl_mobile) and if you want for specific platforms (mytpl_mobile_Android, ...).
  Last : there are new mobile platforms almost every day, don't forget to update your browscap.ini from time to time.
  Hope this help ;-)

nice post, many thanks, works well!