1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Testing website on responsive screen generators

Discussion in 'Off Topic' started by BassMan, Mar 24, 2014.

  1. BassMan

    BassMan Well-Known Member

    I would like to test my XF in one of the resposnive screen generator (like http://ami.responsivedesign.is/), but my forum won't show. Even official XF website won't show.

    Also tried some other resposnive generators, but no luck.

    Can some tell me how to test my XF site in one of those generators?

    Thanks in advance.
  2. Slavik

    Slavik XenForo Moderator Staff Member

    Just resize your browser window?
  3. BassMan

    BassMan Well-Known Member

    I know I can do that to see responsive design. But I would like to add screenshots of my XF into those devices (on http://ami.responsivedesign.is/).

    Or any other device...
  4. Brogan

    Brogan XenForo Moderator Staff Member

    That site uses iframes.

    See the clickjacking option here: http://xenforo.com/help/config-php-options/

    BassMan likes this.
  5. BassMan

    BassMan Well-Known Member

    I've added to my library/config.php:

    $config['enableClickjackingProtection'] = false;

    ... and it works.

    Thank you, Paul!
  6. BassMan

    BassMan Well-Known Member

    Anyway, I guess you do not recommend to have this in config.php permanent, don't you?

    Second thing, do I only have a feeling now or my site works faster with this code in file?
  7. Brogan

    Brogan XenForo Moderator Staff Member

    The explanation text highlights the pros and cons.

    Setting it to false will have no effect on the speed of your site.
    BassMan likes this.
  8. BassMan

    BassMan Well-Known Member

  9. cclaerhout

    cclaerhout Well-Known Member

    Not a website, but does the job: Chrome (emulation mode available in the console).
    BassMan likes this.
  10. BassMan

    BassMan Well-Known Member

    Thanks, but I was thinking of something to show your website in different devices to take a screenshot after that.
  11. Mr Lucky

    Mr Lucky Well-Known Member

    There's also Firefox > Web Developer > Responsive Design View. It doesn't show devices, but gives you a live readout of width and height in pixels.
    BassMan likes this.
  12. rainmotorsports

    rainmotorsports Well-Known Member

    Most of these image generators just want an image, not to actually load the website. Generate the screen shot at the equivalent PPI/DPI and insert.

    For a couple android devices you can use this from google - http://developer.android.com/distribute/tools/promote/device-art.html

    Not sure about apple but one thread linked this which is interesting but not free i dont think - https://placeit.net/

    I can't find the promo images we did for the conversion but here is an example of something out of the device art generator:

    For the actual screen shot I used the phone that matches the actual device pictured (Nexus 5) and did a screenshot. For other devices, resolutions, aspect ratios I photoshopped the notification bar and stuff in.
    BassMan likes this.
  13. BassMan

    BassMan Well-Known Member

    Thank you for this. I'll browse further from your link.

    I just thought of that when I saw some users upload screens with their published styles for forum and there are shown in different devices.
  14. rainmotorsports

    rainmotorsports Well-Known Member

    Ive seen one of the themer's have a preview on their site using 3 device images (laptop, phone and tablet) I kinda want to say it was pixelexit but maybe not. But its under the same concept except they have separated the device images and their preview screenshots.

    It's definitely not fun not having the desired devices or similar to generate the shots so easily with. For my Nexus 10 shot I changed the phones DPI to match which made the phone almost impossible to use during because the buttons where tiny.
  15. BassMan

    BassMan Well-Known Member

    Well, for my needs the link I've posted in first post is great, but you only have Apple devices.

Share This Page