Mobile template CSS

Did you actually replace
@media handheld {
with
@media all and (max-width: 320px) {

This would not change the display width of your site, it would just make it apply to all small windows.

I'm having the same problem. Interestingly, some elements scale, and others do not. For example, I use an image slider for my header. The images crop (but don't scale) to what appears to be an appropriate size, yet the directional graphical arrows to move to next/previous image, remain in an unmodified state. Other product images remain in large format size. I'm pretty clued in, but I'm not sure where to start with this one . . .

I am desperate to get a solution to this - here is my rant for those that want to listen:

I think a lot of people don't realise how important this issue is. One year ago, mobile traffic to our site amounted to less than 1.5 percent of our visitors. Over the last six months it accounted for 8.5 percent of traffic, but over the last month, this has grown to 12%. Because our site is not optimised for mobile, we have more than twice the bounce rate, AND most importantly, our conversion rate to buying customer is 40% of that for our not mobile visitors.

These lost opportunities, quite conservatively, will "cost" our small business more than $7200 this year, if the visitors from mobiles remains constant - which obviously nobody imagines will be the case.

When mobile visitors account for 20% of our traffic (which again I believe would be a very conservative estimate) at a constant sales volume, I figure it will cost us just over $12000 per year.

I think there are some massive opportunities for someone to monetise a workable mobile ZenCart platform. I urge anyone and everyone to take this seriously. If we come up with a shared freebie solution that is great, but we need to focus much more of our collective resources on this issue.

Rant over . . . ;)

I got questions about what the buyer - phone owner wants to see so I started a new thread to gather opinions. Check it out and tell me what you think

http://www.zen-cart.com/forum/showthread.php?p=1081559

Take a quick peek at my jQuery mobile template now under development. If anyone is interested in contributing resources to this, please contact me!

http://m.zencartdelia.com

I'm using this bit of code to check for mobile browsers using the browscap method, it works perfectly. What I'm having issues with is the redirect, I've done exactly what Calljj had written but when you click 'view full site' in the mobile template, it doesn't affect anything, it goes to the redirect.php file and then straight back to the mobile site. I can however redirect to a different site from the redirect page, but this defeats the point of just using a 'mobile template' and having to maintain two sites. Does anybody have any suggestions as to why this is not working properly and switching templates?

Calljj:

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.

...

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

Responsive css can work of course but when you are dealing with sites that have a lot of images, like ecommerce, sometimes, the best alternative is to display:none to a lot of elements. The biggest problem is that the element - image or what have you- still loads - slowing down page load on a phone with little bandwidth. So I consider that to be a less than optimum solution. I have made a zen cart mobile template using mobile jQuery where I actually removed elements and applied the jQuery css and styles. It works pretty good but does not work on all phones, only the more recent smart phones - and that's the biggest problem. There's no solution that works optimally for all mobile phones. I keep my fingers crossed that those with the old phones probably don't do much buying. It is true that the biggest buyers on mobile devices are iPhones and iPads. But personally, I don't want to look at a mobile version on my iPhone. I want to see the whole thing - that's why I have an iPhone and an iPad.

So the redirects come into play - do you make the redirects automatic - as responsive design can easily do? I dang sure don't want that on my phone.

Indications are that's exactly what the zen cart team is wrestling with now. It's all about decisions and what direction to go in, not technology because the technology is always going to moving faster than we are - and that's being proved over and over again with more new sized devices coming out so fast, no one can keep up with it - unless one makes that a full-time job.

Quick question I have made the .css but my tpl_header.php does not contain

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

So im not sure were to place handheld css code.

It's not tpl_header that handles this, but /includes/templates/your_template/common/html_header.php.

anyone developed a responsive zen cart template?

boomup:

anyone developed a responsive zen cart template?
looks like zencart v1.6.0 release will http://www.zen-cart.com/showthread.php?199322-Roadmap-for-v1-5-and-beyond&p=1161947#post1161947

boomup:

anyone developed a responsive zen cart template?

Recently we have developed mobile version of Zen Cart.

**** EDIT: MODERATOR NOTE: Please don't advertise your work on the Zen Cart forum.
*

discoverytdi:

looks like zencart v1.6.0 release will http://www.zen-cart.com/showthread.php?199322-Roadmap-for-v1-5-and-beyond&p=1161947#post1161947

Oh, I'm glad to hear the news. Look forward to Zen Cart upgrade to 1.6.0.