Making sites "mobile compatible" now seems vital

torvista:

I've always thought that to be the wrong approach...I consider the standard template as only a demonstration of the various stock options of how data may be packaged, and certainly not as an example of design.
A template should be designed in a graphics program as a coherent whole, not by making minor changes to an outdated style.

I assume the upcoming template changes in 1.6 are only to encourage new users to not run away at first sight, as they make the mistake of thinking the underlying code is as retro as the template.

Having too good a stock template can lead to many sites looking the same, its easy to spot the Prestashop template these days!
But, it does allow people to start selling quicker, which can only be a good thing.
Bravo!! Well put!!

I wonder if anyone has seen the 'Adobe® 2012 Mobile Consumer Survey Results' report - might be of interest to this thread

I have a copy but at 1.14MB (pdf) is too large to attach. Google it.

SPH:

But on phone with my sister as I type this, she thinks our sites look fine as is in her phone.

EDIT: That is, our sites on current standard templates look fine as is in phone. I see how the responsive bootstrap template works on reduced screen; it basically puts everything into one column and can even reduce photos. But current standard templates are working, so do not yet see overwhelming need for responsive template.

SPH:

EDIT: That is, our sites on current standard templates look fine as is in phone. I see how the responsive bootstrap template works on reduced screen; it basically puts everything into one column and can even reduce photos. But current standard templates are working, so do not yet see overwhelming need for responsive template.
I think that you are over simplifying how responsive templates work and assuming that because your site "looks good" on a mobile device that it works well on a mobile device or is a good user experience on the mobile device.. I would submit that it's likely that neither is true.. You cannot judge your customer's user experience based on your own opinion or even what the site looks like.. If you REALLY want to know what the user experience is like on a mobile device, then you would need to do a usability study to get neutral feedback from the user perspective.

Schoolboy summed up responsive vs standard templates pretty well..

schoolboy:

here is a point at which the template "recognises" a very small screen, and then it does some interesting stuff - auto-reshaping the whole UX, changing menu systems, and getting rid of all extraneous material. So far we are encouraged by this... As I said, the acid test will be how well the template behaves in the real marketplace.

schoolboy:

"Standard" templates simply get smaller - and one uses a "magnify" feature on the device's browser (as you know), but this is a navigational headache for users, and if it's taking 4 clicks to get to something on your site, and one or two clicks to get to the same thing on a competitor's site, guess who's going to get the business... ?

So... templates for phones MUST be intuitive and render a completely different display.

Well, the options seem too limited now to do much about it. Except perhaps play with the free responsive template. Or wait for ZC 1.6.0. As Schoolboy also suggested, we may have a year before it becomes critical.

SPH:

Well, the options seem too limited now to do much about it. Except perhaps play with the free responsive template. Or wait for ZC 1.6.0. As Schoolboy also suggested, we may have a year before it becomes critical.If you are looking for something "ready made" in the responsive template realm then I suppose yes the options are limited.. But for someone willing to roll their sleeve up there are indeed available options..

There are other options for mobile including mobile modules which auto detect the connecting device and offer up a mobile view if a mobile device is detected.. These modules require no coding knowledge beyond knowing how to install a module.. Like schoolboy I am advising my clients to act now, not wait a year and then scramble to get something working (therefore being behind the curve)..

The only "roll up the sleeve" option I'm aware of is the free bootstrap responsive template I linked to above. I admittedly haven't gotten in to it too much, but as I recall it isn't easy even to change a column width. The best thing about bootstrap is it looks pretty serviceable out of the box, and if I had to go mobile/responsive right now that is what I'd go with.

I've never purchased a template thus far, primarily because I tend to not stick with templates long.

SPH:

The only "roll up the sleeve" option I'm aware of is the free bootstrap responsive template I linked to above. I admittedly haven't gotten in to it too much, but as I recall it isn't easy even to change a column width. The best thing about bootstrap is it looks pretty serviceable out of the box, and if I had to go mobile/responsive right now that is what I'd go with.

I've never purchased a template thus far, primarily because I tend to not stick with templates long.and here's where a willingness to roll up one's sleeves is what I mean.. if one is willing to put in a little time to learn, then there are indeed options for responsive templates available..

That said as schoolboy said this means that many mom-and pop DIYers will not be able to jump on this new technology easily..

schoolboy:

Small "mom-'n-pop" eComm sites may not have the resources to invest in getting their sites "mobile compatible", and in time may suffer (commercially).

One HOPES that some "philanthropic" template developer will create a suite of FREE, mobile-compatible templates that can be applied in a "plug-'n-play" manner.

I thought that most of us were small, "mom & pop", DIYers...the bread & butter of Zencart. If we're something else - large commercial enterprises - we might be on other carts, some already mobile ready.

But if really necessary, many of us probably could afford a new responsive/mobile template. If this is going to go the way Schoolboy predicts, I imagine that the zencart template designers will soon go responsive/mobile.

If I may,

Expecting for someone to build a suite of free mobile compatible templates is not something I would wait for. If you spend a little bit of time doing some research you'll find a variety of either mobile templates, mobile apps and or responsive web design themes available. As opposed to a desktop theme which can be easily built by modifying the stylesheet, a mobile and/or responsive theme done right requires a large amount of modification to a large amount of files.

I'm very familiar with Zen Cart, not from the functional perspective like several good zenners that know how to write php code like "That Software Guy" but rather from the template design perspective. I guess you can say I know how to paint the vehicle, but leave the engine problems to the mechanics.

A mobile design in my opinion requires learning how to use any of many frameworks available such as bootstrap, zurb, skeleton, jgMobi, jQuery Mobile, Sencha, jQtouch etc... and it is really time consuming.

I could build a desktop template in a couple of hours using the stylesheet and adding several jQuery plugins to make the home page or the product page fancier than an ecommerce site should be however, when it comes to building a mobile theme, hours can turn into months.

The few mobile themes I've seen costs quite a bit however, I would prefer a theme rather than a service such as a couple I have seen. There is also an app in the Apple's app store available. The problem of having an app as opposed to a mobile website is the fact that not only each app has to be written for each mobile device, but also every time the device has an update, chances are the app may have to be updated as well or it will crash.

A mobile site has a lot more flexibility since the owner is in control of updating the files and one site will display "hopefully" properly on all mobile devices.

I prefer building themes with jQuery Mobile. It is the most popular and it is easy to learn. The only issue is that jQuery Mobile loads pages using Ajax and sometimes if not careful some of the scripts designed for Zen Cart to function will not work therefore nreaking your store. This is due to some of the scripts being loaded on a page by page basis instead of using the template override. For example, lets say that a user visits the advanced search page. Under includes > modules > pages > advanced search there is a jscript_main.php file that will load some javascript that will may or may not conflict with jQuery and jQuery Mobile depending on the order in which the files are loaded.

In addition to that, updating a theme already built to a newer version of jQuery Mobile requires some scrutiny to make sure all the files/pages work properly. I'm currently updating my mobile theme and the first problem I found was that jQuery Mobile dropped support for <input type="image" /> therefore destroyin all my buttons.

If you want to create a responsive theme, I would suggest using Bootstrap. It is really easy to learn and to be honest, the most important factor that anyone should take care of when making a mobile version of their site lies in the tpl_main_page.php inside the common folder. As you know, Zen Cart is designed using a table of three columns. Make that table responsive along with the sideboxes collapsible and you are half way there.

I built a Bootstrap theme couple of months ago and it took me some time to actually getting it to validate (W3C) it error free only to learn from Dr. Byte that I can not offer the theme along with the Bootstrap files due to a difference in licenses (See Post: jQuery Mobile for ZC review?).

I did it again. Was only going to say few words and kept on going... I may add this to my blog.:cool:

ultimate_zc:

If I may,

Expecting for someone to build a suite of free mobile compatible templates is not something I would wait for. If you spend a little bit of time doing some research you'll find a variety of either mobile templates, mobile apps and or responsive web design themes available. As opposed to a desktop theme which can be easily built by modifying the stylesheet, a mobile and/or responsive theme done right requires a large amount of modification to a large amount of files.

I'm very familiar with Zen Cart, not from the functional perspective like several good zenners that know how to write php code like "That Software Guy" but rather from the template design perspective. I guess you can say I know how to paint the vehicle, but leave the engine problems to the mechanics.

A mobile design in my opinion requires learning how to use any of many frameworks available such as bootstrap, zurb, skeleton, jgMobi, jQuery Mobile, Sencha, jQtouch etc... and it is really time consuming.

I could build a desktop template in a couple of hours using the stylesheet and adding several jQuery plugins to make the home page or the product page fancier than an ecommerce site should be however, when it comes to building a mobile theme, hours can turn into months.

The few mobile themes I've seen costs quite a bit however, I would prefer a theme rather than a service such as a couple I have seen. There is also an app in the Apple's app store available. The problem of having an app as opposed to a mobile website is the fact that not only each app has to be written for each mobile device, but also every time the device has an update, chances are the app may have to be updated as well or it will crash.

A mobile site has a lot more flexibility since the owner is in control of updating the files and one site will display "hopefully" properly on all mobile devices.

I prefer building themes with jQuery Mobile. It is the most popular and it is easy to learn. The only issue is that jQuery Mobile loads pages using Ajax and sometimes if not careful some of the scripts designed for Zen Cart to function will not work therefore nreaking your store. This is due to some of the scripts being loaded on a page by page basis instead of using the template override. For example, lets say that a user visits the advanced search page. Under includes > modules > pages > advanced search there is a jscript_main.php file that will load some javascript that will may or may not conflict with jQuery and jQuery Mobile depending on the order in which the files are loaded.

In addition to that, updating a theme already built to a newer version of jQuery Mobile requires some scrutiny to make sure all the files/pages work properly. I'm currently updating my mobile theme and the first problem I found was that jQuery Mobile dropped support for <input type="image" /> therefore destroyin all my buttons.

If you want to create a responsive theme, I would suggest using Bootstrap. It is really easy to learn and to be honest, the most important factor that anyone should take care of when making a mobile version of their site lies in the tpl_main_page.php inside the common folder. As you know, Zen Cart is designed using a table of three columns. Make that table responsive along with the sideboxes collapsible and you are half way there.

I built a Bootstrap theme couple of months ago and it took me some time to actually getting it to validate (W3C) it error free only to learn from Dr. Byte that I can not offer the theme along with the Bootstrap files due to a difference in licenses (See Post: jQuery Mobile for ZC review?).

I did it again. Was only going to say few words and kept on going... I may add this to my blog.:cool:

Well stated.. and yes responsive templates are NO JOKE!! :shocking: Will be following your blog like I follow Melanie Prough's..:smile:

Wanted to add that your post somewhat touches on a point I frequently make. It's UNREALISTIC for businesses to expect that they will be able to build a business ENTIRELY on freebies. Zen Cart being a free tool I think gives MANY non-technical shopowners a false sense that they will NEVER have to spend a dime on their websites beyond domain registration, hosting, SSL certs, and payment processor fees.

Any shopowner who is SERIOUS about being in business at SOME POINT is going to have to get out of the "something for nothing" mentality. If a shopowner REALLY wants to keep up with technology, and chooses to use a tool like Zen Cart versus a hosted cart where the provider keeps up with the technology for the subscribers, they will either have to learn to "roll up your sleeves" and get to know how to become an effective DIYer or accept the reality that they will need to INVEST in their websites. Siteowners who understand this will do well. Those who continue to expect that it will ALL be free and wait for someone to serve up a freebie will continue to struggle to keep up. I find it ironic that a tool that makes MONEY is expected to be completely FREE in EVERY respect.. SMH This is not a realistic long term business plan..

My opinion is this..

1. Are all the products we sell available on our shop with the best content possible?
   Well no they are not, so I'll be ignoring this thread and getting on with that first before I worry about mobile-optimisation (and seo ranking...).

2. User experience is very much device and operating system-dependent and it seems the more modern the mobile device, the better job it does of rendering a non-mobile-optimised site. When I looked at my site a year ago with a not-very-smart phone I could see it needed a lot of tweaks. Now, with a more modern samsung, it looks fine and is easier to navigate thanks to improvements in the device and browser.

3. Soon ZC 1.6 will be out with a built-in template designed to address these device-specific issues.
   Whatever method the dev team choose I think its a safe bet to expect it to be done well, no?
   Why bother implementing your own solution when it will be done for you? It may not be exactly what you want but its going to be easier and more efficient (code-maintenance-wise) to tweak than reinvent the wheel I think.

going mobile is pretty easy by setting a mobile template is the device is a mobile. especially on zencart by disabling the left and right columns on all pages gives you a great start to having a mobile platform.

However, I now disagree that mobile templates are the way forward. I used to think it was paramount to have mobile compatible sites, however if you think about it, this was when most mobiles were not capable of browsing full site efficiently?

Mobile sites have far less functionality and generally less info too.

My opinion is that with mobile data networks being able to load pages faster by the day and browser built on phones being fully capable of viewing and zooming to elements on normal web pages I think mobile templates will soon get left behind and be a thing of the past.

Phil

torvista:

2. User experience is very much device and operating system-dependent and it seems the more modern the mobile device, the better job it does of rendering a non-mobile-optimised site. When I looked at my site a year ago with a not-very-smart phone I could see it needed a lot of tweaks. Now, with a more modern samsung, it looks fine and is easier to navigate thanks to improvements in the device and browser.
   Perhaps.. Sites do render better on the newer devices, but they still do not BEHAVE the same.. For example, forms are still very different user experience on a mobile devices than they are on a regular computer. And some of these differences aren't just about "learning how to do it on the mobile device". Some of these usability issues can potentially stop someone from completing a transaction on a mobile device.. I too have a much smarter phone than I did say two years ago. Things I couldn't do on my smart phone from 2, 3, 4 years ago I can now do on my latest smart phone. There are still some things/sites that still don't work well on my smarter phone, so I still see this is an issue.. Sure I agree that content is important, but I think that making sure that one is casting the widest net is important too.. I don't think this is a non-issue, I think this is something that one would want to plan for at least. (which is what my client's and I are looking into)

torvista:

Why bother implementing your own solution when it will be done for you? It may not be exactly what you want but its going to be easier and more efficient (code-maintenance-wise) to tweak than reinvent the wheel I think.We assume it will be "done".. haven't seen the responsive template to know this yet.. So I don't see anything wrong with being proactive in this regard..

philip937:

However, I now disagree that mobile templates are the way forward. I used to think it was paramount to have mobile compatible sites, however if you think about it, this was when most mobiles were not capable of browsing full site efficiently?lThey are better, but there is still a ways to go..

philip937:

Mobile sites have far less functionality and generally less info too.lI agree.. and I think responsive design closes the gap..

I keep an eye on Amazon always . By the way , have you seen their actual template ?

Concentrate on business and functionality . I think Responsive design is a very important question but still not crucial .
I have just installed the new version ( 1.5.1 ) on my laptop and the basic demo template is really , really horrible. Imagine having from start some initial 2-3 serious templates ( responsive or not , bootstrap or Zurb .. don't know ) , supported by zencart team from version to version . Would be awesome and more credible .

Great discussion so far - and some really useful advice and comment.

One has to bear in mind the USER EXPERIENCE, and while most of us (on this forum) are "technicians" who evaluate ideas mostly on their technical capacity, the success on an eCommerce site is critically influenced by the BEHAVIOUR of people visiting it, and what their expectations are.

It might be so that a site on a "conventional" template is visible on a mobile device - and that all one needs to do is "zoom in and out"...

... BUT... zooming is an EXTRA ACTION, and quite a hassle. It bugs many people - and while they all CAN zoom, and know how to, it can be DETRIMENTAL to the user experience.

A site that removes every additional (unnecessary) action will do better (commercially) than a site that doesn't.

Here's an interesting result on a split-test UX we conducted recently...

In October last year, a client agreed to try a test where we installed FEC, and then disabled all side columns on the shopping cart page, through to checkout success.

So when the visitor was in shopping cart, or on any checkout step (only one page with FEC), there would be no distractions on the sidebars, and clear instructions to checkout.

We then compared total sales and orders to October thru December for the previous year (2011).

Like-for-like October: 22.5% increase
Like-for-like November: 17.1% increase
Like-for-like December: 19.3% increase

Overall, about 20% increase for like periods year on year.

This simple change to the UX seems to have improved checkout by a tidy amount.

When we indicated to the client that we had concluded our test and asked if he wanted to revert to the previous structure... "no way..." he said.

While the technology is important, it's how USERS react to it that really matters.

schoolboy:

Great discussion so far - and some really useful advice and comment.

One has to bear in mind the USER EXPERIENCE, and while most of us (on this forum) are "technicians" who evaluate ideas mostly on their technical capacity, the success on an eCommerce site is critically influenced by the BEHAVIOUR of people visiting it, and what their expectations are.

**It might be so that a site on a "conventional" template is visible on a mobile device - and that all one needs to do is "zoom in and out"...

... BUT... zooming is an EXTRA ACTION, and quite a hassle. It bugs many people - and while they all CAN zoom, and know how to, it can be DETRIMENTAL to the user experience.**

A site that removes every additional (unnecessary) action will do better (commercially) than a site that doesn't.

Here's an interesting result on a split-test UX we conducted recently...

In October last year, a client agreed to try a test where we installed FEC, and then disabled all side columns on the shopping cart page, through to checkout success.

So when the visitor was in shopping cart, or on any checkout step (only one page with FEC), there would be no distractions on the sidebars, and clear instructions to checkout.

We then compared total sales and orders to October thru December for the previous year (2011).

Like-for-like October: 22.5% increase
Like-for-like November: 17.1% increase
Like-for-like December: 19.3% increase

Overall, about 20% increase for like periods year on year.

This simple change to the UX seems to have improved checkout by a tidy amount.

When we indicated to the client that we had concluded our test and asked if he wanted to revert to the previous structure... "no way..." he said.

While the technology is important, it's how USERS react to it that really matters.The sections in red totally resonated with me..

Working on development teams as a Systems Business Analyst I CANNOT ignore user experience on any project.. Without keeping this first and foremost in our development, we lose USER ADOPTION of anything we develop no matter how cool/nice/well written we might THINK it is. Frankly if users find the experience of using an application cumbersome they will be loathe to use it.. In the e-commerce world USER ADOPTION = completed sales. If shoppers find the process of shopping at a site too cumbersome they will simply seek another place that is less cumbersome for them to use.. Abandoned carts and lost sales as a result should be of concern to serious shop owners.

Based on the comments I've seen some folks seem to think that mobile compatibility is a MINOR issue, and one not to be concerned with today. Some are going to wait until there a free options available before acting.. Fair enough, we all have different priorities.. While I don't necessarily believe that mobile devices will overtake desktop computers, I do believe that they present a significant enough of an opportunity that should not be ignored. I also believe that the mobile phones are a bigger concern in this arena because of the screen size of these devices.. They are getting bigger, but I don't think there will be a significant increase in screen sizes much larger than the Note II (a device which pushes the envelope IMHO as far as screen sizes on a mobile phone) Even on a device as large as the Note II, there are usability issues IMHO.. Zooming is not an adequate work around for usability on on mobile phone.

So personally for these reasons I will be speaking with my clients so that they are aware of these potential concerns. For those who take it seriously, we will be looking for solutions as to the best way to make sure the the user experience on their sites is not a poor user experience because the customer is shopping on a mobile device. This requires more than simply making sure customers can SEE the site on a mobile device, it means that ensuring that customers will be able to USE the site on a mobile device with the same relative ease that they do on a desktop computer. Can't count on customers waiting until they are at a regular computer. That only serves to give them an opportunity to shop somewhere else where they CAN complete their purchase on their mobile device..

solo_400:

I keep an eye on Amazon always .
Good example!!! I shop on Amazon from my smartphone all the time.. Amazon does have a mobile enabled template on their site (where one can view the full site if they wish). It appears to auto detect the connecting device and serves up the mobile template.. The mobile template is MILES easier to use on my smartphone than looking at their full site. They also have an Android app as well. (I assume this means they also have an app for the iPhone too)

schoolboy:

We then compared total sales and orders to October thru December for the previous year (2011).

Like-for-like October: 22.5% increase
Like-for-like November: 17.1% increase
Like-for-like December: 19.3% increase

Overall, about 20% increase for like periods year on year.

I think we'd also have to see the total traffic for the two years. Is it possible more people were shopping and buying in the second year? Or was the traffic about the same?

Undoubtedly, a quick, non-distractive checkout process seems to help. We've never tried the FEC, though. And yes, I'd prefer that built-in to Zencart, as I really do not like too many mods as they can complicate zencart upgrades.

But I don't know that small, DIYers should have to get involved in re-inventing the world wide web so large companies like Samsung can say that they have web capable phones. I feel that it is up to the phone makers to make their products capable of seeing the web in all of its glory. Not some minimalist, ugly, lowest-common denominator of what the web once was, or can yet be.

Now I have noticed a few issues with our standard templates. Like Image Handler zoom on small images. That and things like Lightbox or even the basic Larger Photo can block things. Also our Size Chart links, which open in another window. But I'd have to turn on my bootstrap template to see if it's any better in that regard.

But if customers are changing and do not really demand or even prefer nicer-looking, richer content sites, then we might as well just put up a html page with a column of products with perhaps paypal buttons.