Need a quick review of our first few Responsive pages

[Greg Baka]

We are re-building our old e-commerce site with Twitter Bootstrap to be a responsive design. Below I have linked the first few pages we have completed.

I did a few things that I haven't seen on many other Responsive sites. Primarily the TABBED areas.

Below are my first few completed pages. Please take a look and tell me your impressions. Is the new layout logical? Does it flow well? Is it user-friendly?

http://easydigging.com/Garden_Tool/Grape1.html

http://easydigging.com/Garden_Tool/GrubHoe1.html

http://easydigging.com/Garden_Tool/broadfork.html

I would be great to hear how it appears on your small devices (please let me know what device) and how it appears on an old IE7 or 8 PC if anybody still has one

Thank you!

*The rest of the site is still old school. Please only review the 3 pages.

[justinguru]

all of them looks good, Man! keep it up!

[wongerlt]

here page not found? Because i see everywhere identical page?

[pricecharmer]

Looks good. 2nd link led to an unfound page.

[Pullo]

Hi Greg,

As the others said, two of the links lead to 404 pages.

On broadfork.html, viewed in Chrome on Windows 7:

In full screen, I get quite an ugly horizontal scroll bar. When I resize the browser, this periodically vanishes and reappears.
Also with a smaller viewport, the left padding / margin is not always correct (for example on the heading "How to choose your Broadfork").

Apart from that, your site is looking smart.
Well done!

[Greg Baka]

Some of the sample pages I originally linked to way back in October were deleted. It would be best to just start from the homepage at http://easydigging.com/

Pullo wrote:

On broadfork.html, viewed in Chrome on Windows 7:
In full screen, I get quite an ugly horizontal scroll bar. When I resize the browser, this periodically vanishes and reappears.

I can't see this effect on Chrome using Vista. Could you attach a screenshot? Thanks!

[Pullo]

Sorry! I didn't realize that this was an old thread, I just saw it pop up on "What's New" and assumed that it was, well, new.

Anyway, I can reproduce the horizontal scrollbar on your main page, so I took a screenshot of that:

EasyDigging.jpg

Also, the "Stop Scrolling" button doesn't work properly. If I click it, then scrolling stops, but as soon as I move my mouse over the pictures, scrolling starts again. This would annoy me as a user, as if I turn it off, I want it to stay off.

Hope that helps.

[dumitrumidon]

Look nice. Has not tried the slide scrolling on a mobile device...it is working?

[Greg Baka]

Pullo: I'm confused I must have eaten too many Christmas cookies Can you explain in more detail?

Your first post mentioned...

quite an ugly horizontal scroll bar. When I resize the browser, this periodically vanishes and reappears.

...and I thought you were talking about the broadfork.html page - but it does not have a scrollbar. Did you mean the home page???

The home page DOES have a scroll bar of images (the one you showed in the screenshot from your second post). The only problem I see there is that rounded corners on the border are not displaying properly (must be a Chrome + Windows7 thing since the corners are fine on other combinations)

Did you just mean that having a scrollbar of images is ugly? Perhaps it is, and definitely a little old-fashioned. But it solved the problem of how to show a wide array of products on a RESPONSIVE page.
- On a static big monitor page I could have shown all the pictures at once, but not on a handheld without making them really tiny.
- Or I could have used a slideshow sized for a tablet sized device, but then the slideshow looks tiny on a big monitor.
- The old-fashioned scrolling images works across the full range of device sizes. It's the compromise I settled on.

The "STOP SCROLL" button is there for people on handheld devices that do not have a mouse-over function. The 'stop/start on mouseover' is there for people on laptops and PCs. I was not able to figure out how to enable/disable the different pausing methods for different device types, so they are all functional at once.

This whole responsive thing is really a puzzle at times if you concern yourself with readability and image sizes (most of my customers are older and like big text and pictures) and with user controls that may not exist on smaller devices (like mouse-over). But I think it is worth the effort

[Pullo]

Hi Greg,

Sorry for spreading the confusion.

I thought you were talking about the broadfork.html page - but it does not have a scrollbar. Did you mean the home page???

Both pages have a horizontal scrollbar. I have attached an additional screen shot of the broadfork page.

Did you just mean that having a scrollbar of images is ugly?

No. Sorry if that is what came across. I meant the horizontal scroll bar at the bottom of the viewport.
In the original screenshot this is just above the text "Show all downloads"

---

We are now talking about the scrolling images. Not the scrollbar:

The old-fashioned scrolling images works across the full range of device sizes. It's the compromise I settled on.

I actually don't mind the scrolling images. I appreciate that displaying images is one of the trickier problems to solve on a mobile device and I think this solution works well.

The "STOP SCROLL" button is there for people on handheld devices that do not have a mouse-over function. The 'stop/start on mouseover' is there for people on laptops and PCs. I was not able to figure out how to enable/disable the different pausing methods for different device types, so they are all functional at once.

Would you like a hand to sort this out?

This whole responsive thing is really a puzzle at times if you concern yourself with readability and image sizes (most of my customers are older and like big text and pictures) and with user controls that may not exist on smaller devices (like mouse-over). But I think it is worth the effort

I agree wholeheartedly. Mobile is the future.

[Greg Baka]

Wow! I never even noticed that horizontal scrollbar at the bottom It is there on IE, Firefox, and Chrome!

It's not there on the website for Twitter Bootstrap (which was built with Bootstrap) so I assume I did something wrong when I built my pages. Any clues on where to look to discover why my pages are slightly bigger than the display screen? My only guess is a margin somewhere...

Pullo wrote:

The "STOP SCROLL" button is there for people on handheld devices that do not have a mouse-over function. The 'stop/start on mouseover' is there for people on laptops and PCs. I was not able to figure out how to enable/disable the different pausing methods for different device types, so they are all functional at once.

Would you like a hand to sort this out?

Somebody here on the forum (vwphillips) helped me figure out the scrolling images with the stop/start button. We used this thread: http://www.sitepoint.com/forums/show...reated-Marquee

Would it be best to tackle this problem in that original thread?

Thanks!

[Pullo]

No problem.
At least me digging up this old thread has had a positive effect.

I'm not sure what is causing the horizontal scroll bar.
It's probably best to start a new thread in the CSS forum.

I'm currently away from my office for a few days, so debugging options are limited, but I'll have a look at the stop start issue soon and jump in on the thread you posted.

[exoLink.blogspot]

nice one.... i like page color and by the way, good luck with your tools

[Noppy]

hi,

i'm not getting horizontal bars on IE9 and FF11 on win7 64. Although obviously needs sorting if you are still getting it on yours. also i'm afraid it breaks quite badly if you switch on compatability view in IE. don't know whether that is worth worrying about though.

hth