| 11:28 am on Mar 27, 2014 (gmt 0)|
the reason you won't find any "good"/"free" tools for this is that the infrastructure doesn't come cheap.
your best bet for "free" is a screen resizer.
you can't fake "good" in an emulator.
| 12:14 pm on Mar 27, 2014 (gmt 0)|
Opera has their mini emulator. Android and iPhone have theirs. I don't know about Windows but no one uses that anyway so it doesn't matter.
I have a feeling you are looking for an online one. In that case, there isn't one.
| 10:17 pm on Mar 28, 2014 (gmt 0)|
Thank you for the replies. Whilst working on responsive designs for my existing sites I have been using the screen resizer on FF but hoped to test further.
| 12:20 pm on Mar 31, 2014 (gmt 0)|
Chrome web developer tools. Click on the "show console" icon top right of the WDT window and in the drawer window that pops up, click on the Emulation tab. I'm pretty sure IE WDT also has something similar.
| 1:05 am on Apr 1, 2014 (gmt 0)|
@caffinated He said he wanted a good one. There is no such thing other than the native ones.
| 7:39 pm on Apr 19, 2014 (gmt 0)|
I'm bumping this because I have used one or two online emulators together with just reducing the window size in various browsers and been reasonably happy with the results.
However, I have only just come accross the Page Speed Insights which can be found on a link from Google WMT. This gives a figure for mobile user experience and an image of how they think your site appears on a mobile.
For both of my sites which are now responsive, the image simply shows a reduced size version of my full site, then they complain that text size is too small - quoting 4px as the size in one case. Infact, on one of the sites, I incease link text size and spacing for the smaller screen sizes.
I have one site that is not yet responsive and they give it a better figure for mobile user experience than they do for my responsive sites.
Have I got something wrong, or is it Google. I would have expected Google to come up trumps on this one!
| 8:45 pm on Apr 19, 2014 (gmt 0)|
I have followed some of their links for more information and tried it out on a few pages. Some of their suggestions are over the top without extensive css rewriting (which I am doing as time permits in an experimental environment). One is the idea of dropping your font sizes and relying on browser defaults.
Apparently browser defaults are 14 px. (or more) so in the body tag I set font-size at 74% - 76%, and let the browser adjust it up and down. I don't specify font-sizes anywhere, but since not all fonts at the default font-size are equal, it can take experimenting to find the optimal fonts. A few places I may add font-size: x-small where I would have used ems before and they come out as expected. I just avoid setting any specific font-size and it seems to work.
I have not deployed any of this widely because it means thousands of other changes, but new or replacement pages and departments are getting this treatment and working OK. No sudden rise to the top, but it has not been more than a few weeks since first efforts went up.
| 12:56 am on Apr 20, 2014 (gmt 0)|
The easiest solution would probably be to install the device emulators on your system, then use them for testing purposes. The Android SDK comes with the emulator, as does Apple and Blackberry.
The Apple SDK is unfortunately not free.
| 9:02 pm on Apr 20, 2014 (gmt 0)|
Thank you both. I have now solved the problem highlighted by Page Speed Insights.
I find it strange, but having what seemed to be a large amount of info about implementing responsive design, I didn't realise that you needed to put the following in the head of the page:
<meta name=viewport content="width=device-width, initial-scale=1">
Google is now giving me a user experience on mobile of 88% instead of 57.
| 12:47 am on Apr 21, 2014 (gmt 0)|
Presumably you know the explanation as to why, that mobile devices will set the page to a certain width which would be more desktop appropriate if you don't insert that meta element.