Responsive Design - Mobile

[jsb]

I'm extremely happy with e-junkie but I do want to add my 2 cents to the multiple forum suggestions/questions regarding mobile capabilities. It seems to me by requesting the USER_AGENT you could add responsive design to the cart for mobile devices (minus tablets) for a better user experience. Yes, you can zoom in but why make the user do so? If don't want to request user-agent then just add a couple lines to the css/style file, done. i.e. @media(max-width:600px) { new css }



The reason I bring this up, roughly 48% of my visitors are on a mobile device and this number is growing.

[E-junkie_Guru]

Our cart automatically detects when the buyer is using a mobile device and, in that case, displays the cart in "fallback mode" using a separate window/tab to take full advantage of the available screen size and allow use of the touchscreen's pan/zoom/rotate features.

[newmexico]

This does not seem to be happening for our site: The E-Junkie buttons and screens are not scaling back to fit the smaller screens. Hmmm...?



http://newmexicosoap.com



(Our customers are using mobile devices more and more. We really need E-Junkie to work well with smaller screen sizes, please.)

[jsb]

Half of all of my visitors are mobile and that number is growing. I split mobile 50/50 between tablet and smart phone. The cart looks fine on a tablet but when viewed on a smart phone it's nearly impossible to read unless I pinch the screen and zoom in. I get roughly 6000 visitors a month. Split mobile in half and that leaves 3000 on mobile devices. Now split mobile in half between tablet/phone and roughly 1500 current visitors will have issues viewing the shopping cart. I see a much higher rate of drop-off on the mobile cart side over desktop.



I'm still very happy with e-junkie but the mobile version would definitely benefit all of us with a new and improved responsive design.

[E-junkie_Guru]

We are well aware of the need for responsive design; in fact, we're redesigning our site and Seller Admin with this in mind, and there should already be nothing inherently unresponsive about our current button codes or cart.



Our box.js script, which is normally loaded into your page as part of your standard View Cart code, manages our overlay-style cart display "inside" your page and detects when the buyer is using a mobile device; in that case, your cart buttons would work in "fallback" mode by opening a separate window/tab to display the cart (rather than displaying the overlay inside your page), to take best advantage of the available screen size and support the standard touchscreen pan/zoom/scroll gesture functionality. I did just now spot a couple minor tweaks we could apply to significantly improve the fallback cart's layout responsiveness, so I've sent that request to Development.



If your site is displaying the overlay-style cart inside your page when viewed on mobile devices, please reply with the URL of a page where that is happening and provide any details you can about which device and browser app produces that problem behavior.

[newmexico]

http://newmexicosoap.com



Thanks

[E-junkie_Guru]

In every smartphone browser I've used to test your site, I'm seeing your cart display in a separate tab/window, rather than as an overlay "inside" your own page. If you're seeing the overlay-style cart on your phone, please clarify which type of device (e.g., iPhone, Android, Windows Phone) and which browser app you're using.

[newmexico]

Yes, correct. Thanks for checking so thoroughly.



Separate tab/window: People have to zoom in to see the fine print.



I don't know what more can be said, here. Responsive sites with responsive shopping cart buttons would be soooo cool so that people do not need to zoom in.



If you folks ever develop true responsive cart buttons (and check-out window), then you'd be way ahead of all the other cart services.



Please bear in mind... We absolutely appreciate E-Junkie!

[E-junkie_Guru]

One of the tweaks I recommended to Development was adding a meta-tag:

<meta name="viewport" content="width=device-width,initial-scale=1">

...to the popup/fallback cart that would tell mobile browsers to render it "as-is", rather than zoomed-out on a larger page canvas. This would actually produce better results than zooming-in on the current zoomed-out cart page does.



Our cart button codes in your page inherit CSS from your own page, so you're free to apply whatever responsive treatment you wish to those, which is probably better than imposing a one-size-fits-most responsive approach on everyone that may run afoul of what their site CSS is already doing. Note that the Add to Cart button for items using Variants/Variations is actually an <input type="image"> tag -- CSS selector input[type="image"] -- rather than the linked <img> tag we use for View Cart and normal Add to Cart buttons.



BTW, also note that you really only need one block of View Cart code on each page with any number of cart buttons; you don't need a View Cart next to every single Add to Cart on a given page.

[newmexico]

<QUOTE> - BTW, also note that you really only need one block of View Cart code on each page with any number of cart buttons; you don't need a View Cart next to every single Add to Cart on a given page. </QUOTE>



Yes, we understand the redundancy with all those VIEW CART buttons. But try explaining this to our customers... whoo-boy.



We are working on installing the VIEW CART code to one of our menu buttons.



We will work on adapting YOUR CODE to OUR CSS CODE. Yes, inherit. I get that. Could be a great solution here. Glad you pointed that out.



Got to get through this Christmas week. Then back at it.



P.s. Even if I get this to work for our site, this "Responsive" issue won't go away for you good people at E-Junkie. You'll probably need to "Go Down This Road" for all other E-Junkie customers. Thanks.

[newmexico]

Where does this issue stand for 2014?



Are you guys working on moving ejunkie to the Responsive side?



Can we get an update on this, please?



Thanks.

[E-junkie_Guru]

We are currently on track to have the new Admin live within Q1 2014. We're also working with an outside firm on developing a responsive reskin for our site in general, to go along with the new Admin, which can go live as soon as it's ready regardless of progress on the broader site revamp.

[newmexico]

Great and Thanks!

[newmexico]

Good morning.



Anything happening with the "Responsive" issue?



Thanks

[E-junkie_Guru]

Development is still working on wrapping up the new Admin, with the broader site reskin (incorporating responsive design principles) soon to follow, but they have already implemented the viewport meta-tag I recommended for our popup/fallback cart as used for mobile devices, so the cart display on such devices is now notably improved (to the extent it could be readily improved, short of radically restructuring the cart itself).

[epatio]

update please

[E-junkie_Guru]

I apologize for the delay in replying to your request for an update on the status of this matter. I'd just reminded Development a couple weeks ago about the responsive cart improvements I'd proposed and was waiting on a followup from them, or some face time to discuss it with them, neither of which have occurred yet, so I've remind them about it via email again today.

[bunkbedking]

Any new news

With google making mobile friendly very important we need a functioning mobile friendly cart

[E-junkie_Guru]

Unfortunately, I cannot predict when Development will be able to implement the responsive cart improvements I prepared for them.

[E-junkie_Guru]

We have now rolled out responsive improvements to our cart display on mobile devices:

https://www.e-junkie.com/bb/topic/7004