Responsive test site not displaying the true "look" for the Ipad/Iphone

Community Forums Forums Design Tips and Tricks Responsive test site not displaying the true "look" for the Ipad/Iphone

This topic is: not resolved

Tagged: 

This topic contains 9 replies, has 2 voices, and was last updated by  Susan Nelson 1 year, 4 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #37766

    computerkitten
    Participant
    Post count: 101

    Seems like websites are not accurately depicted on these test responsive websites like at at http://www.studiopress.com/responsive/.

    However on the actual device it may look fine.

    Example…. when testing a client site at http://tinyurl.com/blgu2rc

    This site looks fine on the test responsive website for the Ipad but is messed up according to the client.

    Is there any better way of testing these on these other devices without the “real” thing… or any other tools more accurately display the website?

    Thanks!

    CK

    #37807

    Susan Nelson
    Participant
    Post count: 207

    I use this responsive design bookmarklet and it seems pretty accurate: http://responsive.victorcoulon.fr/. I have it in my bookmark bar in Chrome so it’s always available to me.

    I do see issues with your layout on all devices. Everything seems pushed off to the right.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #37825

    computerkitten
    Participant
    Post count: 101

    Thanks Susan for writing and I will try out that tool.   You had mentioned things were pushed off to the right.  Was this on a real device and maybe it was on the tool.  I’m seeing it fine on my iPhone.   And laptop and Desktop.   Browser was Chrome?   I was using Firefox on larger displays.   Chrome the best?   For accuracy and true look?   Thx!!!

    CK

    #37826

    Susan Nelson
    Participant
    Post count: 207

    It’s fine on my laptop and regular computer (Chrome), but on my android phone (galaxy s3), I get a scrollbar at the bottom which makes it seem pushed off to the right. The same thing happens when I test using that bookmarklet on both the iPad and iPhone views.

    Actually, I take that back about Chrome… I just viewed it in Firefox and I see that you have the content areas sitting side by side on the home page. In Chrome, they are displaying as one column.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #37828

    computerkitten
    Participant
    Post count: 101

    Strange okay I’m not sure how anyone gets the displays right without owning the devices!   It looks fine on my iPhone.  Going to look at this tool.  What would you do????

    CK

    #37833

    Susan Nelson
    Participant
    Post count: 207

    On these responsive themes, I try to be super careful not to mess with any of the widths if at all possible. Did you happen to change any widths or add padding to the right/left sides of anything?

    You might want to look at adding some of the divs to the box-sizing section of the CSS. Brian Gardner shared this link with me and it really helped me understand what was going on when I tried to add padding/space to various divs: http://css-tricks.com/box-sizing/


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #37945

    computerkitten
    Participant
    Post count: 101

    Hi Susan!  It is indeed possible that I may have changed some widths on some things…. but no memory of exactly what.  Ha!  Let me look at Brian Gardner’s article…thank you for sharing that!

    CK

    #37957

    computerkitten
    Participant
    Post count: 101

    Hello Susan,

    Just Bookmarked that website and then tested the site….now I see what is going on… how it has a skinny little column of the widgets that are shoved to the left on this test site.  However… on my Iphone it looks correct.  Well I will see then what the client is talking about to see if it matches what I’m seeing on that site you gave me.  That is interesting.  Maybe if I fix it in this test environment it will just stay how it is on the Iphone.

    Thank you!

    CK

    #38229

    computerkitten
    Participant
    Post count: 101

    Hello Susan!

    Wanted to get back to you because its all fixed up…well 99%.  Just need to add a little padding for 2 devices.  I had transposed some characters… like the /* and */ and used the wrong bracket at one point.  So happy its fixed and it took a while to realize that part of the code was being ignored.

    Thank you from the bottom of my heart!!!

    CK

     

    #38230

    Susan Nelson
    Participant
    Post count: 207

    Glad you got it working!


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.