SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Need a quick review of our first few Responsive pages

    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.

  2. #2
    SitePoint Member
    Join Date
    Nov 2012
    Location
    Minneapolis, MN
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all of them looks good, Man! keep it up!

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here page not found? Because i see everywhere identical page?

  4. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good. 2nd link led to an unfound page.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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!

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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!

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

  8. #8
    SitePoint Member dumitrumidon's Avatar
    Join Date
    Nov 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look nice. Has not tried the slide scrolling on a mobile device...it is working?
    Free Keyword Rank Tracking
    To increase your SERP in Google
    Buy Quality Backlinks from AllSocialServices.com

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Greg,

    Sorry for spreading the confusion.

    Quote Originally Posted by Greg Baka View Post
    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.

    Quote Originally Posted by Greg Baka View Post
    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.
    Attached Images Attached Images

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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!

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

  13. #13
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice one.... i like page color and by the way, good luck with your tools

  14. #14
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Hiding from the world
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    If i am a product of your imagination you should try harder!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •