April 25, 2013 at 8:42 pm #37766
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?
CKApril 26, 2013 at 4:15 am #37807
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.
April 26, 2013 at 7:22 am #37825
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!!!
CKApril 26, 2013 at 7:31 am #37826
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.
April 26, 2013 at 7:35 am #37828
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????
CKApril 26, 2013 at 7:48 am #37833
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/
April 26, 2013 at 3:10 pm #37945
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!
CKApril 26, 2013 at 3:32 pm #37957
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.
CKApril 28, 2013 at 10:12 am #38229
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!!!
CKApril 28, 2013 at 10:26 am #38230
You must be logged in to reply to this topic.