rsponsive vs mobile template

Interesting thread but for me the whole concept is badly flawed.
Dumbing down my website so it fits the screen on a phone is an extreme case of the tail wagging the dog. Of course it is possible to have different mobile content but then I have double the work; maybe more than double while additionally checking everything is synchronised.

I do not want to think about how many hours I have spent trying and implementing different responsive solutions and I have no idea if I get any benefits from these changes.

Myself I thought my site looked much better on a phone before I changed anything but Google classed it as mobile unfriendly. Now it is classed as friendly :huh:

Well marton_1 that's just the world we live in.
I also will almost always choose the desktop version if given the option while surfing on a mobile device. My legacy template looks just fine to me on a mobile device, but the reality that google is ranking my page down from mobile search is tangible. If you have google analytics set up go look at the percentage of your traffic that is mobile. For me mobile devices make up 37% of my total traffic even with my lower ranking on mobile searches. In google webmaster tools there are alerts for heaps of errors for mobile devices (font size and spacing mostly) so I am rushing to get Responsive Scheffield Blue deployed as fast as possible. I am having some struggles with getting the spacing sorted out but I can recall having to go through that back in the day setting up my legacy template as well.

angst:

Well marton_1 that's just the world we live in.
I also will almost always choose the desktop version if given the option while surfing on a mobile device. My legacy template looks just fine to me on a mobile device, but the reality that google is ranking my page down from mobile search is tangible. If you have google analytics set up go look at the percentage of your traffic that is mobile. For me mobile devices make up 37% of my total traffic even with my lower ranking on mobile searches. In google webmaster tools there are alerts for heaps of errors for mobile devices (font size and spacing mostly) so I am rushing to get Responsive Scheffield Blue deployed as fast as possible. I am having some struggles with getting the spacing sorted out but I can recall having to go through that back in the day setting up my legacy template as well.

Sad but true.
For the last 30 days I have 25% mobile with 40% bounce, tablets 20% with 44% bounce and the desktop has 36% bounce.
Keep trucking :smile:

both Jose and I have a separate mobile template with the same base of mobile jQuery. The point is to make it as streamlined as possible and getting rid of unnecessary bells and whistles. You just set it up to automatically divert the customer to it if their screen size is is mobile sized. Passes google mobile friendly test perfectly.

I do totally disagree with Google's requirement of that auto redirect though. As an iPhone user I hate when I get thrown into a mobile version. But Google is doing this for their benefit and not the customers - it makes it easier for them to vet a site.

I'm not knocking mobile templates, personally they are annoying to me, I hate all the additional clicks required just to see the product info, I hate that products feel hidden throughout the process of getting to the product info.

jQuery Mobile great but IMO it is extremely bloated and makes every site look the same (with or without changing the colors).

I do like the simplicity of your mobile templates @delia

well, thanks, rbarbour! Though bloated, zen cart with mobile jquery is way way faster than the full cart since I've cut out so many extra things. When the day comes that a fancy looking mobile site is a necessity, well, at this point it's all about satisfying google if you need to. I'm a firm believer in function first - a mobile website doesn't have to be fancy to sell. If it's easy to buy on it, that's the most important thing.

Of course, Jose is trying to sell his mobile template just like I am. I personally hate responsive templates for many reasons but chiefly because responsive is mobile first. It leaves sites looking stupid on the desktop. So either a responsive template written specifically for one's site (yo, expensive!!) or else an adaptive type of template like the mobile jQuery solutions. It took me over a month to convert zen cart to mobile jQuery - nearly every template file has changes. No small thing. And all done with conscious thought of what the best end product should be.

@delia
You SERIOUSLY think that responsive designs make desktop versions of sites look stupid!? Even though that is your personal opinion, good luck in convincing anyone to agree with you because that's simply a false statement on your part and is the oppsite of the purpose of responsive design when utilized properly. You know the phrase, "Time is money"? Well that holds true to Responsive design as well, store owners don't need to spend extra time to muck around with a sperate template when a proper Responsive template does everything on the fly, all while keeping the familiarity customers have been accustom to on the desktop version.

Most of the major brand retailers do not use a seperate "Mobile Template" these days either, the majority are definately utilizing the Responsive way of providing mobile content to their customer bases. The whole seperate "mobile template" way of doing things has been around for over a decade now and is a dying horse method to provide mobile users a decent customer experience.

not going to argue with anyone about this.

delia:

not going to argue with anyone about this.

No argument intended, but the truth is the truth.

The whole Zentric Ideals [What's best for Zen Cart] crap from the overall Zen Cart community is what is not only holding back Zen Cart from modernizing but also one of the reasons for driving store owners away to more "with the times" carts, be it open source, paid for or custom. It seriously feels sometimes like the whole Zen Cart community is stuck in the past, because the reality of it is that todays Web 2.0 ecommerce world is a helluva lot different than is was even just 2-3 years ago.

The seperate mobile templates you and Jose are selling is just showing Zen Cart's age even more because as I said the whole seperate site for mobile thing is an ideal that is over a decade old now and is indeed a dying horse. Period.

I'm not new to Zen Cart by any stretch of the imagination, i've been using Zen Cart since 2004 and it's still my favorite shopping cart solution but it just saddens me how far behind it's gotten especially in the "out of the box" experience feel and how far behind the times most of the Zen Cart community logic is as well.

function before form - as an ecommerce specialist (not just zen cart), zen cart fills the bill. Done right it sells!

In my opinion, a mobile theme when built properly outperforms an RWD theme in terms of performance because it reduces the amount of unnecessary content presented to mobile users. The point of building a jQuery Mobile theme like Delia and I do is to put emphasis on performance first rather than like most of the popular RWD themes that add a lot of unnecessary files to accomplish unneeded functions. I’m referring to popular themes like those sold in themeforest.net. I have not downloaded any of the themes in the ZenCart plugins section therefore I’m not making an opinion based on those.

Whether a theme is built with either an RWD framework or jQuery Mobile, performance can always be improved by using some type of mobile detection in order to remove content that is either too large or not needed in mobile devices and/or desktops. The problem with most RWD themes is that the frameworks being utilized are designed to hide/display portions of the content based on the device being used. You can very easy overcome that by again, using mobile detection but why go through all of that. jQuery mobile is not designed to hide content but rather to enhance performance.

Invizix:

Most of the major brand retailers do not use a seperate "Mobile Template" these days either, the majority are definately utilizing the Responsive way of providing mobile content to their customer bases.

As you mentioned, most of this thread is a matter of opinion and yours is just that, another opinion. Let’s just see how valid your opinion may or may not be. According to an article titled “Top 5 Largest Online Retailers – Who Are These Companies And How Did They Make It To The Top?” the major retailing sites are:

1. Amazon.com Inc.
   Online Sales: $48,080,000,000
   2011 Growth: 40.60%

2. Staples Inc.
   Online Sales: $10,600,000,000
   2011 Growth: 3.90%

3. Apple Inc.
   Online Sales: $6,660,000,000
   2011 Growth: 27.40%

4. Walmart.com
   Online sales: $4,900,000,000
   2011 Growth: + 19.70%

5. Dell Inc.
   Online sales: $4,609,728,000
   2011 Growth: – 4%

Another major contender although not mentioned in this article is 1800flowers.com.

You mention that the majority of the major brand retailers are using responsive themes to load mobile content.

amazon.com Not responsive. Totally different theme on smartphones.

staples.com Not responsive. Totally different theme on smartphones. Not to mention a separate domain on smartphones. m.staples.com

apple.com Not responsive. Totally different theme on smartphones.

walmart.com Not responsive. Totally different theme on smartphones.

dell.com Responsive theme on desktops and smartphones.

1800flowers.com Not responsive. Totally different theme on smartphones.

Invizix:

The whole seperate "mobile template" way of doing things has been around for over a decade now and is a dying horse method to provide mobile users a decent customer experience.

This is not true. I think what you may be referring to is the separate domain issue. Websites with domains such as https://www.domain.com and https://www.m.domain.com as in the case of Staples mentioned above. Not necessarily a dead horse as you call it with that kind of revenue, wouldn't you agree?

Regardless, that is not the case for the mobile themes I offer on my website. I do not know how Delia’s themes work. I believe they “used to” install in a separate domain. I just looked at her site and it makes no reference to separate domains.

The mobile themes Delia and I offer do not interfere with the current desktop theme. If you visit my demo here Mobile Zen Cart on a desktop, you can see that the default theme is being used yet when visiting on a mobile device, the site defaults to a jQuery mobile theme.

Invizix:

You know the phrase, "Time is money"? Well that holds true to Responsive design as well, store owners don't need to spend extra time to muck around with a sperate template when a proper Responsive template does everything on the fly, all while keeping the familiarity customers have been accustom to on the desktop version.

In my opinion, building a very good responsive theme takes more time than a mobile theme. I have built themes with two of the most popular responsive frameworks, Bootstrap and Foundation. In fact, my ZenCart store is built with Bootstrap and I’m currently working on another theme using Foundation. Either one requires more time to build than a jQuery Mobile theme. The reason why is pretty obvious, a responsive theme is like building three themes into one. Once you study the documentation is easy to build but you still need to pay attention to all of the different grid classes in order to display the content properly.

jQuery Mobile is a pretty safe choice for reaching the most people with the smallest effort. jQuery Mobile has the broadest range of device support. This has always been part of their mission through their exceptional adherence to Progressive Enhancement (PE)*

jQM was designed from the ground up with mobile in mind, but with some judicious use of Responsive Web Design (RWD), a single jQM project can service mobile, tablet, and even desktop*

What we sell with our jQuery Mobile themes is performance. What is the use of loading all of the additional CSS and Javascript required for functions that will not even work or have any use in mobile devices. Take for example the ########## ZenCart Template. Very good looking and designed front end theme from a developer point of view. I’m making reference to this theme as an example because it is the best selling theme in themeforest.net. Shown below is the list of files that need to load as per the theme’s source code.

flexslider.css
mj-general.css
mj-layout.css
mj-template.css
mj-tab.css
mj-mobile.css
mj-ie.css
bootstrap.css
template.css
bootstrap-responsive.css
http://fonts.googleapis.com/css?family=PT+Sans
http://fonts.googleapis.com/css?family=Oswald'
ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
bootstrap.js
jscript_jquery.cycle.all.min.js
css_browser_selector.js
jquery.flexslider.js
##########-script.js
jscript_jquery_1-4-4.js
cloud-zoom.1.0.3.js
stylesheet.css
jscript_1.7.1_jquery.js
jscript_jquery-1.4.2.min.js
jscript_jquery.cycle.all.min.js
jscript_jquery_1-4-4.js

That is a lot of files if you ask me. Each a separate http request not to mention the size of the file if not minified or optimized. Totally unnecessary to load several versions of jQuery and jQuery Cycle which by the way are large files to begin with. The reason all of these files are loaded is to add additional bells and whistles that due to the fact that they are not all updated, some need different versions of jQuery in addition to the jQuery no conflict script in order to perform the require function.

Look at the Best retailing websites I mentioned above. How often do you see extra animations for the sake of making a website look pretty? eCommerce websites are built with one purpose in mind and that is to get the user to what they want to purchase and through the checkout process. They should not be built for entertainment. The less the interruptions, the better. Why load scripts and CSS to animate the site when hovering over content for example if you can not hover over the content on mobile devices.

Now look at the files needed with my jQuery Mobile theme…

normalize.css
main.css
vendor/jquery.mobile-1.4.5.min.css
ionicons.min.css
lightGallery.css
swiper.3.0.4.min.css
mobizencart.css
theme.css
jquery-1.11.1.min.js
helper.js
main.js
plugins.js
swiper.3.0.4.min.js

In addition to being about half the amount of files, when using the minified option from the admin, it gets reduced to the code shown below. Incidentally, my new theme update has only four files.

<link rel="stylesheet" type="text/css" href="min/?f=/osprey/includes/templates/mobizencart/css/normalize.css,/osprey/includes/templates/mobizencart/css/main.css,/osprey/includes/templates/mobizencart/css/vendor/jquery.mobile-1.4.5.min.css,/osprey/includes/templates/mobizencart/css/ionicons.min.css,/osprey/includes/templates/mobizencart/css/lightGallery.css,/osprey/includes/templates/mobizencart/css/swiper.3.0.4.min.css,/osprey/includes/templates/mobizencart/css/mobizencart.css,/osprey/includes/templates/mobizencart/css/theme.css&1438207511" /> <script src="min/?f=/osprey/includes/templates/mobizencart/jscript/vendor/jquery-1.11.1.min.js,/osprey/includes/templates/mobizencart/jscript/helper.js,/osprey/includes/templates/mobizencart/jscript/main.js,/osprey/includes/templates/mobizencart/jscript/plugins.js,/osprey/includes/templates/mobizencart/jscript/swiper.3.0.4.min.js&1438207511”</script>

2 http requests

I don’t know how many files Delia’s theme has but I imagine is about as many as mine or less. A sign of performance-first built themes.

In addition to that. A very important portion of fast loading websites has to do with the images. Once again let’s look at the ########## Zen Cart template. Take a look at all of those images on the home page. Each being displayed at 100 x 70 pixels using CSS when the actual dimensions are sometimes in excess of 1000 x 698 pixels. See this image for example: http://mobilewebs.net/mojoomla/demo/zencart/##########/images/shutterstock_53353050.png

Why make the mobile user load such large images when he/she will only see a small image anyway. I designed my theme using mobile detection which allows to serve different content on different devices. The images you see on my themes whether they are seen on smartphones, tablets or desktops, although it may seem to be the same image they are however copies of the original images with different dimensions and more importantly different size that get created on the fly when a user sees the page. Small devices see small images etc…

And since I’m in the subject of mobile detection, I would like to also set the record straight.

rbarbour:

But the responsive templates offered here (not sure about the numinix template) include mobiledetect which allows you to load "device specific" modules, templates, define pages, banners, images, ect. so hiding elements when a user of a desktop shrinks it's browser, yes but if visited by a mobile device can prevent the loading on together.

When I mentioned in my article that Responsive frameworks hide content as opposed to not loading it at all, I said frameworks, not themes. Neither Bootstrap nor Foundation use “php mobile detection”.

To further explain, mobile frameworks load all of the content into whatever device the RWD site is being displayed regardless whether the content is going to be seen or not. Both of the most popular frameworks do so by using the following classes.

For Bootstrap, some of these classes are
.hidden-xs
.visible-sm-*
.visible-md-*
.visible-lg-* (with * being the number of grids across the page based on the 12 column grid)

Foundation goes even further…
show-for-small-only
show-for-medium-up
show-for-medium-only
show-for-large-up
show-for-large-only
show-for-xlarge-up
show-for-xlarge-only
show-for-xxlarge-up
hide-for-small-only
hide-for-medium-up
hide-for-medium-only
hide-for-large-up
hide-for-large-only
hide-for-xlarge-up
hide-for-xlarge-only
hide-for-xxlarge-up

Foundation does have some mobile detection however, this detection is in the form of Javascript. The only downside to this is the fact that the javascript has to load in order to serve the proper content. It is better to use php based mobile detection. The content intended for large screens will not load on small screens regardless of javascript being loaded or not.

So, if you ask me, jQuery Mobile outperforms RWD themes but like almost everything, this is just a matter of opinion.

*Matthews, Andy; Gliser, Shane (2015-02-27). Creating Mobile Apps with jQuery Mobile - Second Edition

No matter where you go on the internet it will always be separate mobile template or responsive and one will always be better in that writers opinion.

FACTS

Zen Cart 1.6.0 WILL contain markup specific to "a" RESPONSIVE framework, both the grid system and its jscript tools for validation and effects.

As a contributing community member that offers up my CODE free, A FULL TIME website consultant, programmer, designer and analyst, MOBILE TEMPLATES in my opinion are simply a waste of time. It's been made clear to me by Zen Carts team that RESPONSIVE is the direction Zen Cart is going in.

rbarbour:

As a contributing community member that offers up my CODE free, A FULL TIME website consultant, programmer, designer and analyst, MOBILE TEMPLATES in my opinion are simply a waste of time. It's been made clear to me by Zen Carts team that RESPONSIVE is the direction Zen Cart is going in.

I agree with you 100%, that is just your opinion.

Neither your generosity or your titles make you an expert. I also offer code for free and so do countless contributors. I also build websites full time. I build sites using Foundation (the framework that Zen Cart will be using for v 1.6.0 as you mentioned), I build sites using Bootstrap, ionic, Framework7 and now building iPhone apps. None of which makes me an expert either. But just like you I can offer my opinion without trying to belittle the work of others.

I can imagine that Delia has worked just as hard as I have to provide a product that is useful for ZenCart store owners. And just like you we are offering our opinion. Since I have designed sites with both of the most popular RWD frameworks and have done the same with mobile frameworks. I based my opinion on my experience. Along with that, as you can see in my original post, I was stating FACTS as well. Four of the top grossing ecommerce sites do not use RWD. There must be a good reason for that.

Not trying to belittle anyone or insinuate that anyone's opinion is correct or incorrect.

Just trying to state my opinion, as for as the top grossing e-commerce sites using Mobile Templates go, they were the first "almost a decade ago" when RWD was not even a thought never mind a reality.

Zen Cart doesn't exactly attract those doing "billions" in world wide sales either, those companies have departments of hundreds maintaining their websites. Reality

ultimate_zc:

I agree with you 100%, that is just your opinion.

Neither your generosity or your titles make you an expert. I also offer code for free and so do countless contributors. I also build websites full time. I build sites using Foundation (the framework that Zen Cart will be using for v 1.6.0 as you mentioned), I build sites using Bootstrap, ionic, Framework7 and now building iPhone apps. None of which makes me an expert either. But just like you I can offer my opinion without trying to belittle the work of others.

I can imagine that Delia has worked just as hard as I have to provide a product that is useful for ZenCart store owners. And just like you we are offering our opinion. Since I have designed sites with both of the most popular RWD frameworks and have done the same with mobile frameworks. I based my opinion on my experience. Along with that, as you can see in my original post, I was stating FACTS as well. Four of the top grossing ecommerce sites do not use RWD. There must be a good reason for that.

marton_1:

Interesting thread but for me the whole concept is badly flawed.
Dumbing down my website so it fits the screen on a phone is an extreme case of the tail wagging the dog.

I think you should take a look at this: https://www.youtube.com/watch?v=9CrVzhwCf-4

Reality check...

Are your customers on mobile?

That's the most important part of this discussion.

Some of my clients say yes - one specifically in Barbados. Countries other than the US are more prone to have mobile customers.

I checked my own website - less than 10% of my visitors are mobile. Business to business will see less mobile traffic.

So who are you going to please? Google and only your mobile customers? Or are you going to ignore your desktop customers?

That's one of my problems with responsive templates.

delia:

Reality check...

Are your customers on mobile?

That's the most important part of this discussion.

Some of my clients say yes - one specifically in Barbados. Countries other than the US are more prone to have mobile customers.

I checked my own website - less than 10% of my visitors are mobile. Business to business will see less mobile traffic.

So who are you going to please? Google and only your mobile customers? Or are you going to ignore your desktop customers?

That's one of my problems with responsive templates.

The video link I posted above looks at the pace of change, and this is what is important to track. We look at device-usage stats on a weekly basis, for both our B2B and B2C options (though some sites satisfy both sectors. But Delia is right... you build your site for your customers (and intended customers), and you "tweak" and "re-structure" it depending on how your customers are behaving.

Also, knowing your market (and I mean knowing it really well), and how it wants to shop MUST be the leading criteria of how your webshop(s) function.

We constantly polish and tweak - particularly to attract more-of-the-same types of people. We measure how well we are doing by looking at THREE CORE METRICS:

1. Bounce Rate.
   On our flagship site, this is now down to UNDER ONE PERCENT. (for July 2015, 0.72%). So people who land on our pages are people who want to be there.
2. Conversion Rate.
   So we know that more than 99% of our visitors stay on the site and view more than one page - but do they convert to paying customers? Again, this fluctuates, but we have had days where we have achieved a 70% conversion rate. Our average for the last three months is 61%.
3. ROI
   The most important metric... Do the numbers stack up? Are we profitable?

We look at ROI on customers using mobile vs customers using conventional devices and over the last three years, Mobile is now starting to overtake conventional - even with the B2B areas. Mobile now accounts for about 58% of our revenue, compared to 17% three years ago. We envisage mobile being about 75% of usage by year-end.

So... our strategy is being led by how our customers are behaving - not by technology or how Google works.

Thanks but the point I was making (probably failed to make it clear) was that I have to dumb down my web site to make it "google mobile friendly" whereas I preferred how my web site looked on my smartphone when it was "google mobile unfriendly"!

delia:

<<snip>>

So who are you going to please? Google and only your mobile customers? Or are you going to ignore your desktop customers?

That's one of my problems with responsive templates.

Having a responsive template absolutely does NOT abandon anyone whatsoever. I still don't know how or why you think that way, other than to show faith for your own product [which makes sense from a business perspective]. Responsive templates however [at least for shopping carts other than Zen Cart anyway] allow a site to have a beautiful and professional design [can compete with the big branded stores] for both desktop and mobile all with one template and are Google mobile friendly as well.

Their are allot of beautiful and professional designed responsive templates being offered FREE to the Zen Cart community. Not only are they beautiful and professional but functional on every device across the board.

Also are Google Mobile Friendly.

Just wanted to point that out.

The developer put allot of her time into these templates and offers more FREE Google Mobile Friendly Responsive templates than any other contributor.

Invizix:

Responsive templates however [at least for shopping carts other than Zen Cart anyway] allow a site to have a beautiful and professional design [can compete with the big branded stores] for both desktop and mobile all with one template and are Google mobile friendly as well.