Latest News: (loading..)
Sign in to follow this  
Followers 0
Harald Ponce de Leon

Default Shop Design

18 posts in this topic

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Hi Gary..

 

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,

Share this post


Link to post
Share on other sites

Hi Carine..

 

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi Nick..

 

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,

Share this post


Link to post
Share on other sites

Hi Sara..

 

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,

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0