Mobile template CSS

[Website Rob]

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.
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.

[brushwoodnursery]

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.

[jabbawest]

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.

[discretedan]

Site to 'test' your mobile templates

ready.mobi/launch.jsp?locale=en_EN

Dan

[giancalr]

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

[simon1066]

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

[webskipper]

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

[simon1066]

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 .

[vittorio]

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 ;-)

[Calljj]

nice post, many thanks, works well!