Mobile template CSS

Good philosophical (and technical) information on "responsive design" which is relevant to deciding how to address mobile devices:
http://www.alistapart.com/articles/responsive-web-design/
Also a recent Sitepoint article:
http://blogs.sitepoint.com/2011/01/11/responsive-web-design-with-html5-and-the-less-framework-3/

Quick question for Vittorio.

thanks for the mod, works perfectly for me.

If using the overides, can you provide a solution that allows the customer to view the "usual" version of the site if they choose too?

I was thinking about adding a link in the footer where the mobile user can click to view the full version of the site, thinking of using session variables in order to do this, but running out of skill level rapidly!

This is a useful tool to test functionality of the Opera Mobile browser on a pc/mac, to make code changes that display in real time using this emulator in conjunction with Opera Dragonfly:
http://www.opera.com/developer/tools/

To answer my own question, if using the browscap method as Vittorio posted and you want iphone customers to see the full site, then this is how i did it.

1. Create a new file called redirect.php and place it in the public_html folder

2. put the following code in it -changing the domain name to you own

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<?php
$value = 'full';
setcookie("TestCookie", $value);
setcookie("TestCookie", $value, time()+1800); /* expire in 1/2 hour */ 
?>
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/">
</head>
</html>

3. On your site, put a link to the redirect.php file for users to click on to see the full site

4. Alter the code slightly that vittorio posted to look like this

* 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 = strtolower($browser['browser']);

/**
* Check if user wants full version or not use it
*/

 $is_mobile = "true";

if(isset($_COOKIE['TestCookie'])){
 $is_mobile = "false";
}


/**
* Check if there is a specific template for this mobile platform and use it
*/
if ($mobile == 1){
if ($is_mobile == "true"){
  $exists_mobile = file_exists(DIR_WS_TEMPLATES . $template_dir . '_mobile');
  $exists_platform = file_exists(DIR_WS_TEMPLATES . $template_dir . '_mobile_' . $platform);
  if ($exists_platform) {
    $template_dir .= '_mobile_' . $platform;
  } else {
    if ($exists_mobile) {
      $template_dir .= '_mobile';
    }
  }
}
}

/**
* EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT

Hope this helps someone out with creating mobile based zen cart templates for iphones etc

I noticed when looking through my site's awstats that there are blackberry and android users. My husband has an android and my site shows with just a little corner snippet. I am very interested in this process.

From the postings I am gathering that you...

1st. create a new stylesheet post #6
2nd override init_templates.php with coding given in post #19 from includes/init_includes/overrides, restart Apache, load browscap.ini, not sure what to do after that.....

This should allow customers with handheld internet devices to view my site and login and purchase.

Has anyone completed the steps with it working? and have orders come through?

Thanks, Kim

Good information, thanks everyone.

I'm presently in the planning stages for a default mobile template for Zen Cart and I see the checkout as a bottleneck. I tried Numinix's Ajax checkout but I couldn't even login to checkout on my iPhone.

I'm thinking a jQuery checkout would be better.

Any thoughts on this.

You can check the general look by viewing in Opera.
open the a site in the opera browser click view and then "small screen"
Latest Opera no longer has this option...instead use following method:-
Opera 11 for Windows: View -> Developer Tools -> Page Information -> View button -> Small Screen.
:smile:

clydejones:

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";
  }

OK, so I took post #6 and named it handheld_mobile.css
THEN followed the directions in this post.

No change in the size or format on my Verizon Android Vortex smart phone.

I'm sure I missed something.... any clues?
http://www.thedumbdog.com (freeyellow.com is the host)
TIA
Keith

View source shows

gjh42:

View source shows

<link rel="stylesheet" type="text/css" media="handheld" href="includes/templates/dd/css/handheld_stylesheet.css" /> which indicates that there is a file named handheld_stylesheet.css. Does it exist? Does it have any content? Does handheld_mobile.css exist on your server?

I have it in the dir includes/templates/CUSTOM_TEMPLATE/css

My bad. I do not have a handheld_mobile.css file I can find that where? Sorry, I'm not up to speed on css technology.

xcergy:

I have it in the dir includes/templates/CUSTOM_TEMPLATE/css

My bad. I do not have a handheld_mobile.css file I can find that where? Sorry, I'm not up to speed on css technology.
Sorry ... bad post. The file I named from post number 6 is handheld_stylesheet.css , not handheld_mobile.css I hate it when the brain is not connected to typing fingers :censored:

I see the handheld_stylesheet.css on your server, and there doesn't seem to be anything wrong with it.

Check post 16 for a suggestion that may be relevant to you.

gjh42:

I see the handheld_stylesheet.css on your server, and there doesn't seem to be anything wrong with it.

Check post 16 for a suggestion that may be relevant to you.

Hmmm... revisions made. It did nothing.

The good news is it didn't crash the site! LOL
That is my greatest fear.

I'm trying to set up my site to work on a mobile and I can't get the top bit of my site to show correctly...

LINK TO SITE

I presume I need to add in a link to point to the stylesheet within another file or two??
(other than in the html header file)

Can anyone help?

Thank you!

If the handheld stylesheet is being correctly loaded in html_header.php, that is the only location you need.

Thanks...how come it doesn't show very well??

Someone who has a handheld device to view it will have to answer that.

I am viewing it in Opera (mini screen) and it isn't showing right...I presume this is an accurate test?

You have in your handheld_stylesheet.css

@media handheld {

which should only apply to media that recognize that @rule. Maybe it would help if you used the alternate rule in post 16.

Thanks again but this didn't work, just made it narrower. Its the top jquery slider thats not working as well as the header login strip...both are not scaling down (in width)?

Any more ideas?

Thanks