Responsive Design

[platzhersh]

Most important for me: make the whole thing responsive and user friendly for mobile users :)

[ginsterbusch]

let's just say: that's not the job of the plugin. thats YOUR job ^_^

Nah, actually it's using the regular WooCommerce-style templating system, so it should work in most cases. And because it's a virtual multistep, aka Javascript-based, it should fall back nicely to single page checkout. Even more nicely, if you care for stuff like HeadJS, Modernizr + Co. ;)

[ginsterbusch]

@ginsterbusch Note to self: Best Practices / Patterns for mobile / responsive checkout process:

• http://uxdesign.smashingmagazine.com/2013/03/14/designing-a-better-mobile-checkout-process/
• https://econsultancy.com/blog/5922-mobile-checkouts-ten-best-practice-tips
• https://econsultancy.com/blog/64117-how-to-deliver-a-seamless-mobile-checkout-experience
• http://usability.com/2012/01/best-practices-for-mobile-site-checkout-2/

List of examples:

• http://www.cxpartners.co.uk/cxblog/responsive-e-commerce-design/
• https://econsultancy.com/blog/62859-mobile-checkouts-which-of-the-top-20-retailers-have-upgraded-in-the-past-year

Also note, that outside of Europe, people are mostly talking about a "mobile checkout process", * NOT a "responsive checkout process" (ie. better search results to this topic).

[ghost]

Hello all!

@ginsterbusch I'm extremely excited about this plugin, looking forward to see it in action. In my honest opinion, I think it is more than enough to make compatible with Canvas theme... just suggesting.

THANK YOU for this!

[ginsterbusch]

@platzhersh After digging a bit through the code bases of the themes that most of the prototype is based on, and doing some quick tests: Well, its responsive (based on Bootstrap), but on small mobile screens the progress bar / current step is looking rather ugly.

So I guess what's going into the alpha version will be:

• option to permanently switch the mobile / less-than-x-pixel checkout to the more traditional one page checkout
• better / easier customizable fallback options (for my line of work, I'm excessively relying on HeadJS, but some folks might want to work with something else, eg. Enquire.js or classic Modernizr)

[platzhersh]

@ginsterbusch true, it is actually the responsibility of the final "implementer" of the plugin to make it responsive, but if it was supported out of the box, it would be a huge Pro I guess ;) I will do some research how other big shops solved that problem, and also take a look on the links you posted. I'm sure there is a nice way to do this other than just not having the multistep checkout on mobile.

@dianatramell I have never used Canvas theme, but I think making a plugin targetted at only one theme is the wrong approach. A plugin should basically work with every wordpress theme out there. Just my 2 cents.

PS: @ginsterbusch funny thing: I just read this smashing mag article yesterday, I actually like the example they show in "5. Show Progress". Although I can imagine it becoming very messy with more than 3 steps. Find attached a screenshot of the simple solution I came up with, this time on mobile. As you can see, it isn't a problem to display 3 steps, but more would definitely be messy.

[ginsterbusch]

I think the step navigation works only well on screens wider than 480 pixels. The actual multistep should do just fine. Well, "think" is the wrong word. More fitting would be "experienced", because I recently tested my portfolio site with several mobile devices, and found out, that my one-page tabbing works pretty nice, but even simple contact forms fill up the whole screen.

BTW: The above "checkout" process actually does not show the actual checkout process as steps, and might be even invalid in Europe, legally seen. Normally, "kasse" would BE the checkout process.

[platzhersh]

you might be right about your "btw", it's hard to tell, but I don't know who to ask about it, I would definitely prefer a more clean solution without including the basket.

[norbertpapp]

Nice ideas, but guys, do you have any code written? This plugin would be very useful.