Jump to content



- - - - -

Default Shop Design


  • Please log in to reply
17 replies to this topic

#1   Harald Ponce de Leon

Harald Ponce de Leon

    Healthy Giraffe

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

Posted 23 February 2012 - 07:59 PM

Hi All..

Would a design similar to the Google Chrome Webstore make for a good default shop design for new installations?

https://chrome.google.com/webstore/

What do you like and dislike about it?

Here are my thoughts:
  • Good for PC/Tablets
  • Instantly scroll through multiple product images
  • Specials are highlighted at the top of the page (eg, the Games category)
  • Product information is shown in a modal window (good or bad?)
  • Automatic page scrolling / no page sets although this could be brought in when javascript is disabled

Harald Ponce de Leon

#2   burt

burt

    Vanquisher of Demons

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

Posted 23 February 2012 - 09:42 PM

Why not hold a competition for people to design a look?
Tutorials & eBooks
Templates
All instantly downloadable.

Bootstrap Templates now available!  Get in touch.

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

#3   bruyndoncx

bruyndoncx

    Problem Thinker

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

Posted 23 February 2012 - 09:46 PM

using a mini-pc
  • I don't like the scroll bar in the categories box
  • I don't like the scrollbar on the product info page for the description
I would love to see the layout more reponsive and the blocks fit the allowed space, and not assume a minimum screen/browser width
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscommerce.com/topic/396152-bootstrap-3-in-2334-responsive-from-the-get-go/page__view__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 .

#4   bruyndoncx

bruyndoncx

    Problem Thinker

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

Posted 23 February 2012 - 09:47 PM

you mean a look-a-like contest - magento/prestashop running on oscommerce LOL
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscommerce.com/topic/396152-bootstrap-3-in-2334-responsive-from-the-get-go/page__view__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   foxp2

foxp2

    strong as a Twig

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

Posted 23 February 2012 - 09:50 PM

View Postburt, on 23 February 2012 - 09:42 PM, said:

Why not hold a competition for people to design a look?
great !
I was always completely void in everything that requires designs ! :'(
thanks to provide consolation prizes. :-
(lol)
-------------------

#6   Harald Ponce de Leon

Harald Ponce de Leon

    Healthy Giraffe

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

Posted 23 February 2012 - 10:54 PM

Hi Gary..

View Postburt, on 23 February 2012 - 09:42 PM, said:

Why not hold a competition for people to design a look?

We'll definitely look into that once the user end features are ready (for v3.1). It would kickstart templates being made available as Add-Ons which can participate in a competition at the same time.

For now we're just looking at what is feasible for the default design until additional designs can be included in the download packages (competition winners).

Kind regards,
Harald Ponce de Leon

#7   Harald Ponce de Leon

Harald Ponce de Leon

    Healthy Giraffe

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

Posted 23 February 2012 - 11:00 PM

Hi Carine..

View Postbruyndoncx, on 23 February 2012 - 09:46 PM, said:

  • I don't like the scroll bar in the categories box
  • I don't like the scrollbar on the product info page for the description

I didn't realize it was set to a fix width. I, too, think it should be based on a responsive design.

Would you prefer the categories to scroll with the page?

It's interesting to have the product information shown in a modal window instead of a normal page. It allows to quickly return to the list of the products previously seen without hitting the back button and having the page load again. Hardcore shoppers can close the modal window with the ESC key :D Again, interesting concept.

Kind regards,
Harald Ponce de Leon

#8 ONLINE   toyicebear

toyicebear
  • Members
  • 6,323 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 24 February 2012 - 01:32 AM

Quote

It's interesting to have the product information shown in a modal window instead of a normal page. It allows to quickly return to the list of the products previously seen without hitting the back button and having the page load again. Hardcore shoppers can close the modal window with the ESC key :D Again, interesting concept.

Such a feature would be better as a user optional choice, ie. by having a quick info button/icon they could click, while clicking the image or title would bring them to the product page.

#9   Juto

Juto
  • Members
  • 369 posts
  • Real Name:Sara
  • Gender:Female

Posted 24 February 2012 - 07:57 AM

Hi, the modal window should have an "add to cart" button. I think there's a contribution for v2.2 with a popup window with that feature.
Sara

#10   Juto

Juto
  • Members
  • 369 posts
  • Real Name:Sara
  • Gender:Female

Posted 24 February 2012 - 08:30 PM

Also, be aware that IE needs some (very) special coding for modal windows.

#11   Harald Ponce de Leon

Harald Ponce de Leon

    Healthy Giraffe

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

Posted 25 February 2012 - 12:43 PM

Hi Nick..

View Posttoyicebear, on 24 February 2012 - 01:32 AM, said:

Such a feature would be better as a user optional choice, ie. by having a quick info button/icon they could click, while clicking the image or title would bring them to the product page.

The iTunes Store does just that with their info icon.

Kind regards,
Harald Ponce de Leon

#12   Harald Ponce de Leon

Harald Ponce de Leon

    Healthy Giraffe

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

Posted 25 February 2012 - 12:44 PM

Hi Sara..

View PostJuto, on 24 February 2012 - 07:57 AM, said:

Hi, the modal window should have an "add to cart" button. I think there's a contribution for v2.2 with a popup window with that feature.

Definitely! :)

Kind regards,
Harald Ponce de Leon

#13   strub

strub
  • Members
  • 187 posts
  • Real Name:Strub

Posted 12 April 2012 - 10:27 AM

What about redo the stylesheet? What about Object Oriented CSS? This that make sense?

Furthermore, get rid of the grid system and the many unneccesary tables instead use <li></li> tags.

Edited by strub, 12 April 2012 - 10:28 AM.


#14   bruyndoncx

bruyndoncx

    Problem Thinker

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

Posted 12 April 2012 - 03:17 PM

I'm currently stripping out as much classes as I can and redoing the grid based on semantic.gs and a responsive.less template.
I'm using more css ids iso classes where appropriate and properly learning about selectors to avoid too many class declarations.

the whole lesscss.org has been an eye opener for me and saving time trying out different designs.
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscommerce.com/topic/396152-bootstrap-3-in-2334-responsive-from-the-get-go/page__view__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   strub

strub
  • Members
  • 187 posts
  • Real Name:Strub

Posted 12 April 2012 - 03:26 PM

I would more like to see OOCSS.

Here's a nice article about that topic:
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

#16   Juto

Juto
  • Members
  • 369 posts
  • Real Name:Sara
  • Gender:Female

Posted 15 April 2012 - 11:42 PM

Before removing id-selectors, consider this:
http://mattwilcox.net/archive/entry/id/1054/

wrt:
Don't use IDs in selectors
Citation:
Absolutely the most wrong advice I have ever heard in my life with regard to how to author CSS.
This rule comes from the author’s absolute raging hard-on for “Object Oriented CSS” (hard-on is a bad term given Nicole is a woman,
and “Object Oriented CSS” is a bad term given the likely confusion with actual OO coding).
OO-CSS, used the right way, is great. But to suggest that you never use ID’s is simply throwing the baby out along with the dirty
bath water. ID’s are extremely useful and you absolutely should use them. They are the fastest way a browser can select a given element.
end citation

Wrt reusable code, one little nifty to do is:

body {
  margin:0;
  margin-top:1em;
  padding:0;
  border:0;
	background:#f0f0ff url(/media/letitsnow.gif);
   font-size:75%; /* default 100% equals 1em = 16px, 62.5% equals 10px */
	font-family:"Lucida Grande", Helvetica, "Arial Unicode MS", "Arial Unicode", Arial, sans-serif;
	color:#333;
}

That is, defining a some default styling. Then where other font properties is rquired, just style it localy.

Regards
Sara

#17   bruyndoncx

bruyndoncx

    Problem Thinker

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

Posted 16 April 2012 - 05:18 PM

i prefer being lazy over being tired, that is why I prefer solutions where making a change requires the least amount of changes :D

thus, no grid_xx in my php code, page layout is done in css
using ids and a less stylesheet to position the different sections ( for a couple of resolutions 'breakpoints' as people like to call it )
ofcourse I use classes for common styling throughout the UI (which is still mostly jquery ui)

the way I read the oocss above, is basically, reuse classes as much as possible, which I think is good, as in general reuse is good.
the lesscss.org goes even a bit further in this, as it allows you to reuse declarations in other sections, so you can even better avoid duplication of sections of css code. You for instance can declare a variable for a certain color, and refer the variable throughout the less stylesheet, changing color is then only chaging the variable declaration in exactly one single place.
During development, with javascript the less is translated into standard css. When your less design is final, you can still generate a regular css stylesheet and include that so that your customers don't need javascript, and won't have any performance impact because of it.
Don't just sit there - contribute to the responsive bootstrap community effort !
http://forums.oscommerce.com/topic/396152-bootstrap-3-in-2334-responsive-from-the-get-go/page__view__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 .

#18   Juto

Juto
  • Members
  • 369 posts
  • Real Name:Sara
  • Gender:Female

Posted 16 April 2012 - 08:41 PM

Hi Carine, I agree about reusable code, and it's quite easy to implement:

<div id="header_center" class="common">

and so on.

Presently I am working on three different layouts, that is variations of scalability methods wrt the viewport. It's interesting :)

The base layout I'm using for now is the one on my dev. site.

Regards

ps Dev. the Web! ds

Sara