XAMPP, localhost and testing for responsive design...

6sigma · 2014-03-08 17:37:28

Once you have a design for Textpattern set up in a XAMPP installation, how do you view it on a phone or tablet to test for responsiveness?

Thanks.

etc · 2014-03-08 20:26:18

Firefox Web Developer/Responsive Design View gives you a rough idea.

Edit: or you could somehow put your xampp server online.

Last edited by etc (2014-03-08 20:28:30)

jakob · 2014-03-08 21:37:59

This viewport resized bookmarklet allows you to do similar things to the firefox responsive design view but also works in other browsers.

If you’re running your test site using XAMPP on localhost (i.e. not in a virtualhost with a made-up url) and your mobile devices are on the same network, you should be able to simply determine the IP of your computer in your local network (often 192.168.xxx.xxx) and plug that into your mobile device. See this tutorial for an example. That may be all you need.

Another option would be me to use dyndns which you can activate temporarily. It gives you an internet address that is in effect a gateway to your localhost on your computer. You can then plug that dyndns address in your mobile devices. You don’t have to put your site online or install it anywhere. There are lots of tutorials on the internet: google for xampp and dyndns. MAMP Pro (similar to xampp) provides in-built dyndns setup options but not sure if XAMPP does.

There are a few other programs that provide multi-device testing with live-refresh such as ghostlab, Adobe Edge Inspect, browsersync, prepos or mixture.io. There are also further options as discussed in this article on synchronised cross-device testing. Of those I’ve only ever used mixture.io, which also has a whole host of other useful webdev stuff. You can also use it entirely without textpattern for prototyping a layout but it also has a so-called simple mode that provides you with live refresh using your own mamp/wamp/xampp setup. It’s not free (likewise most of the other ones mentioned) but there’s a fully working 14 day trial.

GugUser · 2014-03-08 22:19:52

In Safari I use the ResponsiveResize extension.

6sigma · 2014-03-09 01:26:43

Thanks for all the replies. These suggestions expose another gaping hole in my knowledge before moving my sites from TextDrive to a new host. Again, many thanks.

6sigma · 2014-03-09 02:24:38

By the way, for a XAMPP installation of Textpattern on a Windows PC, should the Site URL in Textpattern’s preferences be: localhost/mysite OR /localhost/mysite/ OR just mysite?

Again, thanks.

gaekwad · 2014-03-10 10:18:53

GugUser wrote #279596:

In Safari I use the ResponsiveResize extension.

+1.

Gocom · 2014-03-10 12:04:52

6sigma wrote #279604:

By the way, for a XAMPP installation of Textpattern on a Windows PC, should the Site URL in Textpattern’s preferences be: localhost/mysite OR /localhost/mysite/ OR just mysite?

localhost is a domain; a loopback back to your local interface (127.0.0.1).

it doesn’t start with a slash
it can’t be just mysite unless its a loopback you have created that resolves back to your local machine

The site URL always consists of:

domain | ipv4 | ipv6 [:[port]] [/path/to/site]

mandatory fully qualifiable IP address or domain name
follow by an optional port number, if its something else than 80 (HTTP) or 443 (HTTPS)
followed by an optional path to the install location from the web server’s document root

colak · 2014-03-26 10:34:57

I know that a couple of weeks have passed since the last comment here but I just came across xip.io/ which might be of help

Textpattern CMS

Textpattern CMS support forum

#1 2014-03-08 17:37:28