Responsive Design Testing: best method?

Responsive Design Testing: best method?
0.0 0

#1

Committed to responsive design, you use chrome’s built in device mode throughout building your page. It looks great so you go ahead and publish your new work, only to find that when viewed on an actual device bugs appear!

This is what happened to me with my portfolio page. I’ve now tried nearly 10 different sites which provide similar tools to chrome, but none display the same as on an actual device.

Potential solutions:

  • mobile1st.com is the only solution I’ve used so far that actually catches the problem on my portfolio page. They claim to be using actual mobile devices for testing, and they have a comparison (sales-pitch!) of chrome devtools simulator and their service here: https:mobile1st.com/why-chrome-devtools-is-inaccurate-for-mobile-testing/. There is a free-trial but it only allows you to test 5 urls.

  • Xcode apparently includes a facility for testing pages on iOS devices from your laptop. If this works it would only be a solution for iOS devices and for those who program on a mac; I haven’t verified if it catches my bug yet. EDIT: I just tried Xcode and it caught my bug! It allows you to choose from multiple different apple devices on which to test your site. More here Getting Started in Simulator.. This should be useful if you program on a mac and want to check your site on iOS devices.

Does anyone know of a better (free!) solution? What do you do to ensure that your responsive design works as expected on real mobile devices?


#2

i generally only use chrome … and then i check it out on my iphone 4s and my Htc mobile and only have a problem on iphone if i forget to do vendor prefixing for things like flexbox… which i have to do for last 3 versions or else errors show up on iphone … other than that i find im fine


#3

Unfortunately, I’ve found that the best free way to test responsive websites is by actually using your site/app on actual devices. I’m that person who will send out links to friends asking them to let me know if anything at all looks weird (with screenshots provided if they’re willing). Most of my friends/family have gotten used to this by now.

I came across this before: http://responsivetest.net/ but I’ve yet to actually compare it to actual devices.


#4

Yeah, I’m getting the feeling that short of paying for a service that tests on real devices the only reliable option is to test it on real devices as you do. The frustrating thing is this makes it less convenient to catch problems as soon as you write the code.


#5

The problem I had was using a background-image with background-attachment: fixed to achieve a parallax effect. It turns out that this doesn’t work on iOS; there is a lot of talk about this and related problems on stackoverflow and elsewhere. Vendor prefixes don’t seem to solve it, so after trying various workarounds I opted just to change background-attachment to scroll for all devices in iOS size range using a media query.

Thanks for the tip about vendor prefixes though, I’ll bear it in mind next time.


#6

If you are on Mac or Linux, you can use built in python http server, by navigating to the folder where your code is located and running in terminal:

python -m SimpleHTTPServer

(on windows I think you should install something :wink: )

Now you can navigate to localhost:8000 and you’ll see you page live.

Now if your computer is on a wifi network, every device on that same wifi network can access this page, by going to computers local IP, port 8000:

http://192.168.X.X:8000 (replace X with your IP).

Of course you still need a real device, but at least you can check your page as you go.

Comic relief:

http://www.commitstrip.com/en/2016/06/01/a-single-platform/


#7

IIS - Internet Information Services - is the native web server on windows.


#8

@jenovs Thanks! That will definitely make testing it on my phone easier. :slight_smile:


#9

Hi @Surogo,

Have you tried CrossBrowserTesting.com ?

Cheers and happy coding :slight_smile:


#10

@erretres Nice find! I had come across crossbrowsertesting.com but didn’t know it was possible to use it for free when accessed through codepen. I signed up for codepen just in order to try it out and it caught my bug! Once you’re in it is also possible to use a non codepen url. EDIT: On second looks it seems that the site intends the free version only for testing pens; although it is possible to test other urls it may be best to stick to only testing pens unless you get a free trial/paid account. They have a wide variety of devices on which we can test.:grinning:


#11

I usually use this:

http://responsiv.eu/


#12

That is great :smile:.

yeah, only codepen projects ( Without counting the free week/account).

Cheers and happy coding :slight_smile:


#13

I use Browser-sync, a command line tool for local server debugging/testing it’s on npm.
https://www.browsersync.io
It refreshes and injects code into all browsers and you can connect mobile devices through your net.