Jump to content



Photo
- - - - -

Moving forward, MS2 and beyond towards a responsive webshop


  • Please log in to reply
42 replies to this topic

#1   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 02 May 2012 - 00:07

Hello all,

Our new version for the webshop is almost finished.

The webshop is an upgraded MS2 installation with contributions and custom code.

This last revision has focused on making the website more responsive, in particular getting a megamenu that fits within the allotted space (major issue on current live shopsite).
Furthermore trying to get a reasonable browsing experience on different (tablet) devices.

Mobile phones can use the site I think, but it is not optimized (yet) for mobile use (all data is still transferred, no responsive images or sliders, no lazy loading ...)

The BETA webshop is at http://www.keukenlust.be/beta/

this is the real database, just another customer frontend ! Please dont order unless you want it delivered /wink.png' class='bbc_emoticon' alt=';)' />

I would very much appreciate it if you could have a look with small and big screens and let me know what works and even better what doesn't work properly.
I have windows machines, but no mac, samsung galaxy or ipad / iphone here.

If you want more information or pieces of code. Feel free to ask, I'll do my best to share what I can or point you to where things have developed from ...

Thanks
Carine
www.keukenlust.be/beta/
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#2   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 8,208 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 02 May 2012 - 01:34

It's an interesting design. It adjusts reasonably well to every desktop size I tried, up to 3840 x 1080.

Some of the text is being cut off, likely due to a fixed height in pixels and a font picked from my installed list (Firefox on Linux). Screenshot here. That happens in the Browse other products in this category box on the product pages as well. I suggest you set the box heights in points instead.

Your free shipping banner is showing &eur; as text, but the prices show the correct symbol. Possibly a charset issue?

Is the Brands menu really more important than any other way of finding products? It does overwhelm the page. It took me a bit to find the main menu in the top bar.

The products I looked at were all lacking a description. Is that something that you haven't done yet? It's pretty much an essential.

I really like the Browse other products box on the products page. I would add the capability to select products from other categories as well, which allows you to do some cross-selling.

I like the look of it. It makes me want to go shopping, so it does seem to be effective. Good work.

Regards
Jim

My Addons

Banners Box Download Support
Categories Accordion Box Download Support
Closest Shipper 2.2x Support
Document Manager 2.2x Support
Generic Box Download Support
Get 1 Free 2.2x Support
Price in Cart Only/MAPP Download Support
Modular Front Page Download Support
Modular SEO Header Tags Download Support
MVS 2.2x Support
PDF Datasheet Download Support
Price Updater 2.2x
Products Specifications 2.3.x Development Version Support Bugs/Suggestions
Request a Review Download Support

Shopping List Download Support New!
Specials Image Overlay Download Support
Superfish Categories Box Download Support
Theme Switcher 2.3+ Support  Updated


#3   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,720 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 02 May 2012 - 08:24

.js off - not good. Add a message - I like the style that Magento use, I shamelessly ripped theirs.

Other than that, I'm interested to see where this goes. Nice work.
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Responsive osCommerce, join in:
http://forums.oscomm...rom-the-get-go/

--
Making your shop better, one osCommerce module at a time - get in touch, or get my newsletter every 1st of the month.
 
Big Bang Templates for 2.3.4

#4   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 02 May 2012 - 19:07

It's an interesting design. It adjusts reasonably well to every desktop size I tried, up to 3840 x 1080.

I've put a maxium width in the design for screens over 1600px, setting it back to 1280 as I felt that to be a good widescreen view.
With a 3840 screen, does it annoy you that it doesn't use the full width, or do you typically have 2 (or more?) windows side by side ?

Some of the text is being cut off, likely due to a fixed height in pixels and a font picked from my installed list (Firefox on Linux). Screenshot here. That happens in the Browse other products in this category box on the product pages as well. I suggest you set the box heights in points instead.

I'm not sure it that is going to fix it, it happens when the manufacturers name and products name is all rather long, or has long words in it making the products name wrap and it all taking up more lines than fit in the box. The size of the products box (the green on hover) is fixed to mimic products in a row, when it is not fixed, float left can have strange results. Possibly some tuning is possible to that for a given row, the height is set to the maximum needed for that particular row. The issue is mostly with the % off text, which I plan to superimpose on the image, like the bottom right corner. If that is done, the cutting off, becomes a minor issue. Yes, the issue is consistent throughout, it uses the same function call (wonder why hpdl never considered that), the product listings on products_new, specials and index, category, products_filter are also all the same module used. (I'm not sure, perhaps this is now also done in 2.3.1, wasn't in MS2 at least)

Your free shipping banner is showing &eur; as text, but the prices show the correct symbol. Possibly a charset issue?

typo of my late night update, should have read ampersand euro, forgot the o

Is the Brands menu really more important than any other way of finding products? It does overwhelm the page. It took me a bit to find the main menu in the top bar.

We sell practically all major branded products, so for our shop it is important, but your point about the top menu is also valid, somehow it doesn't stand out, while on the old site it is more clear.
I think if the top has more of a tabbed interface look, and the category labels in caps, it would probably be better.
I'm looking to integrate a kind of show/hide manufacturers menu so it's easily accessible, but not in your face all the time.
I also want it for google and stuff.
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#5   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 02 May 2012 - 20:02

The products I looked at were all lacking a description. Is that something that you haven't done yet? It's pretty much an essential.

you are correct, our store is a physical one with a webshop since it is in a rural area with not that many inhabitants.
stats wise, we only have descriptions for about 10% of the active products, order wise, Over 80% of products ordered are without description. As we mostly sell branded products often the people know the products already, and reorder or complete their collection. We tend to use the brand and their reference model/type for the product to reassure the customer it is the same product.
We do have specifications for pots&pans, which is our core business, so that kinda compensates a little, also important ranges are setup with product families, where I added a language depended description in order not to copy the same stuff for each product. (manufacturers, and categories also have room for descriptions).
Evidently we have lots of room for improvement by populating all the available descriptions and specifications (and not to forget images ...)

I really like the Browse other products box on the products page. I would add the capability to select products from other categories as well, which allows you to do some cross-selling.

Not sure I understand completely, not sure if you can just pick any other category to show.
For product families, all products in the same family are listed in that area too, so that is possibly cross category, eg like for some alessi designers?

I like the look of it. It makes me want to go shopping, so it does seem to be effective. Good work.

thank you
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#6   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 02 May 2012 - 20:08

.js off - not good. Add a message - I like the style that Magento use, I shamelessly ripped theirs.

Ah yes, need to doublecheck, added to the list. So I'll just rip yours ?

Other than that, I'm interested to see where this goes. Nice work.

I was thinking of starting to use github and upload then you could literally see where it goes /biggrin.png' class='bbc_emoticon' alt=':D' />
I understand the free version is fully public, but for a small price it is possible to setup a private repo which can be shared.
Do you have experience with it ?
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#7   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 8,208 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 02 May 2012 - 20:48

Answering in order (more or less)

1. I normally keep the browser window around 1400 x 1080. This leaves room for the editor window and whatever else I might need at the moment. Other applications that don't relate to what I'm working on right now are kept on other desktops. I only opened your site at full size to see what it would do. It copes well, which is often a problem with floating width sites.

2. Fixed height boxes are a pain. I was thinking that the problem was that my font is larger, but if it's doing the same thing on your screen that's not going to help. Some sort of dynamic resizing may be needed. I don't have any good solutions for this.

3. I would look at putting the manufacturer in the top bar, so the customer could show it or not. The dull color of the top bar makes it fade into the background, especially with the same color in the Manufacturer list to the left. Perhaps moving the manufacturer into the top bar will fix this. I'm not the person to be giving color advice, so...

4. You can use one of the cross-sell (xsell) addons to allow you to select the additional products to show on each product page. This is most useful if you have products that have commonly used accessories or supplies. I put this on a site that sold very few accessories for their products, and their accessory sales (with a product) jumped to over 50%.

Regards
Jim

My Addons

Banners Box Download Support
Categories Accordion Box Download Support
Closest Shipper 2.2x Support
Document Manager 2.2x Support
Generic Box Download Support
Get 1 Free 2.2x Support
Price in Cart Only/MAPP Download Support
Modular Front Page Download Support
Modular SEO Header Tags Download Support
MVS 2.2x Support
PDF Datasheet Download Support
Price Updater 2.2x
Products Specifications 2.3.x Development Version Support Bugs/Suggestions
Request a Review Download Support

Shopping List Download Support New!
Specials Image Overlay Download Support
Superfish Categories Box Download Support
Theme Switcher 2.3+ Support  Updated


#8   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,720 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 02 May 2012 - 21:26

Ah yes, need to doublecheck, added to the list. So I'll just rip yours ?


Sure thing! I'll do a blog tomorrow on it. Simples.

I was thinking of starting to use github and upload then you could literally see where it goes /biggrin.png' class='bbc_emoticon' alt=':D' />
I understand the free version is fully public, but for a small price it is possible to setup a private repo which can be shared.
Do you have experience with it ?


Unfortunately I don't. I could really do with buying a git book if there is one.
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Responsive osCommerce, join in:
http://forums.oscomm...rom-the-get-go/

--
Making your shop better, one osCommerce module at a time - get in touch, or get my newsletter every 1st of the month.
 
Big Bang Templates for 2.3.4

#9   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 8,208 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 02 May 2012 - 21:30

Git has very poor documentation. If you find a resource that does a good job of explaining it, please share.

Regards
Jim

My Addons

Banners Box Download Support
Categories Accordion Box Download Support
Closest Shipper 2.2x Support
Document Manager 2.2x Support
Generic Box Download Support
Get 1 Free 2.2x Support
Price in Cart Only/MAPP Download Support
Modular Front Page Download Support
Modular SEO Header Tags Download Support
MVS 2.2x Support
PDF Datasheet Download Support
Price Updater 2.2x
Products Specifications 2.3.x Development Version Support Bugs/Suggestions
Request a Review Download Support

Shopping List Download Support New!
Specials Image Overlay Download Support
Superfish Categories Box Download Support
Theme Switcher 2.3+ Support  Updated


#10   Harald Ponce de Leon

Harald Ponce de Leon

    Healthy Giraffe

  • Core Team
  • 4,820 posts
  • Real Name:Harald Ponce de Leon
  • Gender:Male
  • Location:Solingen, Germany

Posted 02 May 2012 - 21:57

Git has very poor documentation. If you find a resource that does a good job of explaining it, please share.


http://help.github.com/
Harald Ponce de Leon

#11   foxp2

foxp2

    strong as a Twig

  • Banned
  • 310 posts
  • Real Name:Laurent
  • Gender:Male
  • Location:France

Posted 03 May 2012 - 03:55

but for a small price it is possible to setup a private repo which can be shared.

private repositeries are available for free with gitorious.
http://blog.gitoriou...ally-available/
-------------------

#12   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 03 May 2012 - 10:24

http://help.github.com/

this is a pretty comprehensive set of pages, I went to through the beginnner, intermediate and advanced section but I guess I'll need to play with it a little to really understand it.
I'm trying to get my head around how to then best setup my repository with is an MS2 fork with most but not all 2.3.1 changes applied.
There is also some discussion on submodules, but I think that applies more to e.g. the ext directory with jquery files.
Ultimately I'd like to keep up with the osCommerce2 developments , but I'm not sure how it works if I decide not to implement certain changes in 2.3.1.
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#13   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,720 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 03 May 2012 - 11:23

I'm at just about the same stage as Carine, with Github.

I don't quite understand the following;

say I make a change in admin/categories.php on my fork.
Then Harald makes a change in his admin/categories.php

How do I grab Haralds change and insert to mine, with destroying my already made changes.
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Responsive osCommerce, join in:
http://forums.oscomm...rom-the-get-go/

--
Making your shop better, one osCommerce module at a time - get in touch, or get my newsletter every 1st of the month.
 
Big Bang Templates for 2.3.4

#14   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 06 May 2012 - 15:49

.js off - not good. Add a message - I like the style that Magento use, I shamelessly ripped theirs.

The site makes use of less to generate css using javascript less.js file, I now included the plain css result inside the noscript tag so that while I finetune things further, at least some reasonable page layout is generated.

Cosmetic no javascript effects:
  • header shortcut jquery buttons on top
  • tabs on customer service pages (not functional, but shows all content on single page - good enough)
Not working without javascript:
  • enlarge/reset/reduce font links
  • the tabs used on the product page (shows non formatted content, looks out of order)
  • social buttons (google and facebook not showing) bottom right.
Maybe I can add an unobstrusive message in the header for the users without javascript, I'll check your site /wink.png' class='bbc_emoticon' alt=';)' />
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#15   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,720 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 07 May 2012 - 09:20

Carine - latest post in the blog.

For those who don't know where the blog is, please see my profile page where you will find a link.
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Responsive osCommerce, join in:
http://forums.oscomm...rom-the-get-go/

--
Making your shop better, one osCommerce module at a time - get in touch, or get my newsletter every 1st of the month.
 
Big Bang Templates for 2.3.4

#16   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 07 May 2012 - 11:00

Carine - latest post in the blog.

For those who don't know where the blog is, please see my profile page where you will find a link.

Thanks gary, I already put something up, not nearly as nice though !
I was wondering, shouldnt we have a noscript fallback on the shoppingcart buttons and image gallery standard in osC 2.3.1 ?
I don't use the gallery, but do have the fancybox zoom which degrades nicely withouth javascript.
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#17   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,720 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 08 May 2012 - 07:39

I was wondering, shouldnt we have a noscript fallback on the shoppingcart buttons and image gallery standard in osC 2.3.1 ?


Yes, we should. I'm not too bothered about the buttons as they are OK as links. The main problem is the gallery as the images are not resized down.
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Responsive osCommerce, join in:
http://forums.oscomm...rom-the-get-go/

--
Making your shop better, one osCommerce module at a time - get in touch, or get my newsletter every 1st of the month.
 
Big Bang Templates for 2.3.4

#18   borisr

borisr
  • Members
  • 11 posts
  • Real Name:Boris

Posted 02 June 2012 - 08:29

I really like the site and it's design, I think you've done a really good job. What imho is horrible is your logo, and to be more precise, the box with the picture of a pot and a glass on it. Good luck!

#19   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 28 September 2012 - 22:59

hello again, I've progressed a little bit since may and have just made the site live.

I know for small screen phones it is not yet optimal, but for tablets, netbooks, laptops big and small I expect things to work properly.

Please let me know if you find funny stuff or things not working. I've only done limited testing on IE and Firefox with this update.
If you have a look and no particular feedback, would you still please post the OS and browser you have used ?

Thanks a lot

www.keukenlust.be - please note this is a live site - no bogus orders please ...
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .

#20   bruyndoncx

bruyndoncx

    osCommerce Teenager

  • Members
  • 3,111 posts
  • Real Name:Carine Bruyndoncx
  • Gender:Female
  • Location:Belgium/ Antwerp/ Turnhout/ Arendonk

Posted 30 September 2012 - 22:50

I just added adaptive-images.com scripts, so the load should be a little lighter for big images
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscomm...iew__getnewpost


Hava a nice day !
Carine Bruyndoncx


Seen anything good relevant on the net about responsive design for ecommerce ?
You might as well post it in my responsive liive shop review thread .