17 replies to this topic

[Harald Ponce de Leon]

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

[burt]

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

[bruyndoncx]

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

[bruyndoncx]

you mean a look-a-like contest - magento/prestashop running on oscommerce LOL

[foxp2]

burt, 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)

[Harald Ponce de Leon]

Hi Gary..

burt, 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]

Hi Carine..

bruyndoncx, 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 Again, interesting concept.

Kind regards,

[toyicebear]

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 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.

[Juto]

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

[Juto]

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

[Harald Ponce de Leon]

Hi Nick..

toyicebear, 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]

Hi Sara..

Juto, 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,

[strub]

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.

[bruyndoncx]

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.

[strub]

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/

[Juto]

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

[bruyndoncx]

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

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.

[Juto]

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