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?
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.
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.
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;}
}
Are you sure about that?
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 )
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 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 .
Bookmarks