移动优先响应式网页设计和响应式图像问题

Question

I have created this sort of ecommerce website, with the aim to be visualized on a mobile phone web browser (possibly with an acceptable user experience on tablets/pcs/tvs also).

Yes, an awkward tempt of responsive web design:

http://rosposhop.herokuapp.com

As you can see, I used http://getbootstrap.com/ v. 3.x and I apologize in advance for my enormous ignorance on CSS.

Mhh... I developed initially the site with a mobile handset in mind, and mainly the site do pretty wath I want in portrait mode, see mokup here:

My idea is that every page is basically composed as a list of boxes = square" divs of let say 320x320 or 440x440 pixels (to be defined..):

• header (square box)

• list of N products (again: each product is a square box made by a square image and some textaul info and buttons).

• footer

I would like that in case of mobile phone in landscape mode, under certain conditions of a minimum pixel width, I could visualize 2 boxes as showed in image here below:

And I would like that in case of tablet/pc visualization, the boxes (let say images with a resolution of 320x320 or 440x440) could be arranged in some porportional way, filling the viewport, as sketced here:

I presume that some CSS media queries could help. Any idea ?

BTW, minor question about UX of my website naif approach: A part of my HTML/CSS superficial/erroneous approach... please overlook...

What do you think about user experience and navigation of the site above?

In my idea mobile phones apps (web or native) especially in ecommerce contexts, are generally too complexes, hitting off / adpating the "big" websites maybe originally made for PC. My approach have been different: every product must be defined in a single box, with few buttons to manage the cart.

Any suggestion welcome thanks! giorgio twitter.com/solyarisoftware

Answer 1

UPDATE (A draft solution using CSS media queries)

    /* product box (containing image) */
    .pb {
    position:relative;
    display:inline-block;
    text-align:left;
   }

    /* Smartphones (portrait) ----------- */
    @media only screen and (max-device-width : 480px) and (orientation: portrait) {
    .pb {width:100.0%;}
    }

    /* Smartphones (landscape) ----------- */
   @media only screen and (max-device-width : 480px) and (orientation: landscape) {
   .pb {width:49.718572%;}
   }