You are here:  » Responsive HTML


Responsive HTML

Submitted by support on Wed, 2014-03-19 12:42 in

Hi everyone,

I can't believe it's been over 7 years since I released the first version of Price Tapestry. Back then, the mobile phone of choice would have been something like the Nokia N70 or a Sony Ericsson and WAP was only just being replaced by the first primitive mobile browsers! A lot has changed since then of course, and the stats in terms of Internet access from mobile devices is swinging more and more in their favour every day, so it's becoming increasingly important (almost vital) that your websites work well across the whole range of mobile and desktop devices.

So I have now created a brand new "responsive" theme, based on the Foundation framework which is included in the latest distribution (14/06A) and available for download as an upgrade to all earlier distributions.

The theme can now be seen running on the official demo site:

WebPriceCheck.co.uk

Please give it a go on your phone, your tablet, your desktop and let me know what you think! If you spot anything unusual or have any page specific feedback, please let me know the full URL to the page and also the device string shown at the bottom left-hand corner of each page e.g. [M / LANDSCAPE].

The pages repond to changes across 3 sizes - S (typically smartphones), M (typically tablets and netbooks) and L for desktop. I have concentrated in particular on optimisations for small devices. On search results for example, filters are displayed by default on medium and large displays, but initially hidden on small displays, revealed by clicking "Filter These Results↓". Note also how the search result info and sort order links collapse and float through 4 different configurations depending on size. On product pages, the detail included in the price comparison table changes appropriately by size.

I look forward to any comments and feedback!

Cheers,
David
--
PriceTapestry.com

Submitted by philstone on Wed, 2014-03-19 13:35

Hi David

This looks great on all devices!!

I love the tidy 'filter these results' on the search pages, on mobile devices, great work!!

one small idea, on my mobile site I had used the 'viewport meta tag' to control layout on mobile browsers, it prevents zooming into the page when you type your keyword into the search form,

looking forward to working with script this when launched!! Thanks again for all you long hours of work and great customer support, it makes pricetapestry the leader in price comparison scripts without question!!

regards

Phil Stone
www.buy24-7.net

Submitted by Mark Hennessy on Wed, 2014-03-19 23:24

Looking very good!

Be interesting to see what appears for the Wordpress plugin, another maintenance release there or are we expecting some changes?

Once again thank your for all your help, you do a great job and support your product something crazy.

Mark

Submitted by Mark Hennessy on Thu, 2014-03-20 06:25

Was just thinking as well..

This will work (I assume) wonderfully with other wordpress themes.

Currently, inserting the pto shortlink and featured products to the front page, does not work well with the themes inbuilt responsive design (if it has it, mine does)

The end result is the entire theme around the PT stuff is responsive on other devices, however the search box and featured products are not.

I believe that this will fix that issue nicely.

Awesome :)

Submitted by support on Thu, 2014-03-20 09:45

Hi Mark,

For a WordPress theme itself based on Foundation, it would be very straight forward to take the new template files from this theme and de-construct them into the Before / Each / After templates for PriceTapestry.org. In fact, as soon as I've published the next distribution and the plugin updates (to include a much easier set-up process, and the importer tool for WordPress) I will create a settings.json for Foundation versions of the default templates.

However, all these frameworks work in pretty much exactly the same way (with .row and .column classes) so it should be straight forward to replicate in, for example, Bootstrap. Does your WordPress theme use a framework or is natively responsive? (in which case you may find that it still uses the .row and .column technique, and would be relatively easy to reproduce...)

Cheers,
David.
--
PriceTapestry.com

Submitted by Mark Hennessy on Thu, 2014-03-20 12:49

I'm not sure exactly what framework my theme is based on, I have a feeling its Genesis.

I was more so thinking that if using the search box pto shortcode on the front page, when viewing on a mobile device it should still be responsive as per your theme (talking specifically about the search box and featured products), and the remaining wordpress theme that I have, also being responsive, so both in tandom should create a better visual page on small devices for the entire site

Time will tell!

Submitted by support on Thu, 2014-03-20 13:41

Hi Mark,

The HTML generated by the PriceTapestry.org plugins is independent of the theme of the associated Price Tapestry installation (the html/ folder). Instead, it is generated from the templates, editable via wp-admin > Settings > PriceTapestry.org, and the style sheet /wp-content/plugins/pto/resources/pto.css.

For example, the output generated by the [pto] shortcode (search form and related products) comes from the Main / Search Form and Related Products / Before / Each / After templates.

However those templates should be relatively easy to modify in accordance with the responsive features and grid structure of your theme. As soon as I've created a settings.json for PriceTapestry.org for WordPress based on the Foundation grid (as per this theme) I'll help you take a look at it!

Cheers,
David.
--
PriceTapestry.com

Submitted by RWeb on Fri, 2014-04-18 10:34

Hi David

Excellent work, looking really nice, this I have to say was one of my frustrations with using PT, the non squidgyness of it.

Any idea of time scale for the new version of the WP Plugin?

Just want to know if its worth it cobbling it over myself. Happy to beta test it if you have anything to test?

Cheers

Simon

Submitted by support on Fri, 2014-04-18 11:07

Thanks for your comments, Simon! Definitely very "squidgy" now!

The next plugin upgrade is only planning to be a maintenance release + installation made much easier, but also to include the import option (which I think I'll make a separate download) - it won't currently include any changes to the templates however that is something I want to look at very soon after. I'm not sure whether to try and make template output that is responsive itself regardless of any framework present in the parent WordPress template, or alternatively, since the frameworks all work in a very similar way, to create default files with templates based around each of the popular responsive frameworks...

Cheers,
David.
--
PriceTapestry.com

Submitted by support on Sun, 2014-06-08 14:25

Hi everyone,

Somebody mentioned above but I accidentally deleted the comment regarding the pagination size in small profile. I have now updated the html/navigation.php component of the Responsive HTML template to show a compact version of the pagination controls on the small display profile. To give it a go, try an example search and then scale your browser window sufficient to trigger the small display profile. This version is now in both the standalone and combined with Price Tapestry distribution 13/03A downloads.

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Mon, 2014-09-15 18:40

Hi David,

This responsive theme looks pretty cool. However, I've got such a massively modded theme that I am generally using for my sites that it's going to take a while for me to incorporate this one. As a stop gap, and noticing a lot more mobile traffic these days, what would be the easiest way to use my existing site/template for desktop visitors and switch to your responsive theme for mobile/tablet users? I can create sub-domains so maybe install a fresh PT install in to a sub folder (referenced as a sub-domain) and copy of the existing config files to the root. Then it would just need some code to detect the device type and switch to the relevant site?

Cheers.
Keeop

Submitted by support on Tue, 2014-09-16 12:15

Hi Keeop,

Rather than a separate installation you could install the Responsive HTML template in a new folder

html_mobile/

The only modifications required to the files would be the path's to CSS and .js files - simply replace html/ with html_mobile/ in html_mobile/header.php and html_mobile/footer.php.

The next step would be to set-up a variable to point to the html folder to use. Start by adding a new config variable to config.advanced.php:

  $config_html = "html/";

Next (if your text editor supports a global search and replace in files that would be the easiest way but shouldn't take too long anyway), you would need to change all literal references to html/ over to the variable, for example:

  require("html/header.php");

...would become

  require($config_html."header.php");

Once completed, site should carry on working as normal, and as a quick test, changing the new config variable in config.advanced.php over to:

  $config_html = "html_mobile/";

...should then reveal the mobile version of the site. Finally, change back to the default (desktop) site as follows:

  $config_html = "html/";

Finally, it's just a case of dynamically setting the $config_html variable to be "html_mobile/" for mobile browsers or "html/" otherwise. The easiest way would be to scan the user-agent string for keywords that would indicate a mobile browser, so to do this, REPLACE the above addition to config.advanced.php with the following:

  $config_html = "html/";
  $mobileUAs = array("iphone","android","blackberry","opera mini");
  foreach($mobileUAs as $mobileUA)
  {
    if (stripos($_SERVER["HTTP_USER_AGENT"],$mobileUA)!==FALSE)
    {
      $config_html = "html_mobile/";
      break;
    }
  }

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Tue, 2014-09-16 12:51

Hi David,

Looks like a brilliant solution - I'll give it a go and let you know. Just thinking if there's any way of leveraging the JQuery script to check for device type as I'm assuming it's got a bit more log in it? So, when it detected a 'large' it would use the set the variable to use the normal html folder but when 'S' or 'M' were detected, it would set to html_mobile?

Cheers.
Keeop

Submitted by support on Tue, 2014-09-16 12:57

Hi Keeop,

With the above "quick" method, the decision over which version of html/ to serve is made server side before there is any kind of jQuery in context so the user-agent is really all you have to go on but should be reliable based on only a few keyword matches. The next stage would, I guess, be a development installation slowly migrating your current design into the responsive design making it a truly responsive design as served.

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Tue, 2014-09-16 14:27

Yeah, good point. I need to get my finger out!

Cheers.
Keeop

Submitted by Keeop on Tue, 2014-09-16 19:58

Hmm, this is going to be harder than I thought. There's too much variance between my customised code and the standard PT so when referencing the new html folder, it doesn't really work too well. I think it will have to be plan a.) and I'll need a separate full install to direct to. I'm guessing the same sort of header code can be used to detect the device type but I just need to change the code to redirect to a subdomain/folder or whatever. Then, add the same code to that version to redirect back to the main version. Thinking about it, this is probably better anyway to avoid the same indexed page having different content maybe?

Cheers.
Keeop

Submitted by support on Wed, 2014-09-17 09:01

Hello Keeop,

That's no problem - let's say you created a brand new installation with the Responsive HTML template in a sub-directory /mobile/ - but pointing at the same database.

Then, in config.advanced.php you could use something like:

  $mobileUAs = array("iphone","android","blackberry","opera mini");
  foreach($mobileUAs as $mobileUA)
  {
    if (stripos($_SERVER["HTTP_USER_AGENT"],$mobileUA)!==FALSE)
    {
      header("Location: /mobile".$_SERVER["REQUEST_URI"]);
      exit();
    }
  }

(if you've already modified top level PHP files to use $config_html you can simply leave that setting in place as "html/" to avoid having to revert all the files - it may be useful for testing later on)

It looks like Google is comfortable with the idea of a separate /mobile/ version of a site and should not consider the /mobile/ versions of the same pages as duplicate content - have a look at the following URL and see what you think;

https://developers.google.com/webmasters/smartphone-sites/redirects

Once you've completed the migration of your custom features into the /mobile/ version and are happy to make it your live template for all visitors then .htaccess can be used to issue 301 (Moved Permanently) links back to the top level version which will quickly remove the legacy /mobile/ versions from search engine indexes.

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by Perce2 on Tue, 2014-09-30 11:14

Hi David, thought I'd post here as opposed to contacting you direct, might benefit others too.

I notice that in the "filters" menu (product search results page) if you enter a price value of more than 2 digit's you can't actually see what figure you've entered ! Could the input box be wider or maybe expand to the amount of digits entered ?

Thanks for a great theme and a special thank you for all the help you continually give with your script.

Submitted by support on Tue, 2014-09-30 11:33

Hello Perce,

Thanks for your comments!

I'm going to update this - I think it works better with the min / max price and submit button across 3 columns each instead of 2 and 4 (medium size and above).

To do this, in html/searchfilters.php look for the following class attribute within line 125:

  class='small-12 medium-2 columns'

...and REPLACE with:

  class='small-12 medium-3 columns'

...and similarly at line 150:

  class='small-12 medium-4 columns'

...REPLACE with:

  class='small-12 medium-3 columns'

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Mon, 2014-11-03 16:26

Hi David,

Finally found some time to look at this again! Got a couple of queries. Main one is that I've put a link on the mobile site back to the desktop site as some users with larger screens may want to see this. However, if they then click on a link on the main site, I expext they'll be redirected back to the mobile site. What's the best way to avoid this? I assume it's only really possible with cookies? Or, maybe a session variable, as this avoids dumping a cookie?

Cheers.
Keeop

Submitted by support on Mon, 2014-11-03 16:56

Hi Keeop,

You could do this with cookies or session variables (if enabled on your PHP installation), but bear in mind that PHP session variables still involve a cookie as PHP drops the session ID cookie in order to identify the session.

To use a simple "desktop" session cookie, if you want to link back the equivalent desktop page of the /mobile/ installation page being viewed, first create a re-direction script in the top level called desktop.php containing:

<?php
  $location 
str_replace("/mobile","",$_GET["url"]);
  
setcookie("desktop","1",0,"/");
  
header("Location: ".$location);
  exit();
?>

Your link in the mobile/ installation to "View Desktop Version" can be created as follows:

<a href='/desktop.php?url=".urlencode($_SERVER["REQUEST_URI"])."'>View Desktop Version</a>

Finally, to avoid the redirection back to mobile, modify the above example as follows:

  if (!isset($_COOKIE["desktop"]))
  {
    $mobileUAs = array("iphone","android","blackberry","opera mini");
    foreach($mobileUAs as $mobileUA)
    {
      if (stripos($_SERVER["HTTP_USER_AGENT"],$mobileUA)!==FALSE)
      {
        header("Location: /mobile".$_SERVER["REQUEST_URI"]);
        exit();
      }
    }
  }

To use a session variable instead, in desktop.php in place of:

    setcookie("desktop","1",0,"/");

..use:

    session_start();
    $_SESSION["desktop"] = 1;

...and in the desktop > mobile redirection, in place of:

  if (!isset($_COOKIE["desktop"]))

...it would be:

  if (!isset($_SESSION["desktop"]))

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by henk on Mon, 2014-11-03 19:56

Hi David,

My oldest post is 8 years and i am back :)

New design looks great!

I am running new VPS server and installing everything again.

Regards,
Henk

Submitted by Keeop on Mon, 2014-11-03 20:59

Thanks David.

How would the code be modified to use a subdomain rather than a folder? i.e. I an using m.domain.com as the mobile site as opposed to www.domain.com for the main dekstop site. Is this still possible?

Cheers.
keeop

Submitted by support on Tue, 2014-11-04 09:34

Hello Keeop,

No problem; view desktop version link would be;

<a href='http://www.domain.com/desktop.php?url=".urlencode($_SERVER["REQUEST_URI"])."'>View Desktop Version</a>

desktop.php in www. installation would be just (cookie version)....

<?php
  setcookie
("desktop","1",0,"/");
  
header("Location: ".$_GET["url"]);
  exit();
?>

And desktop > mobile redirection code:

  if (!isset($_COOKIE["desktop"]))
  {
    $mobileUAs = array("iphone","android","blackberry","opera mini");
    foreach($mobileUAs as $mobileUA)
    {
      if (stripos($_SERVER["HTTP_USER_AGENT"],$mobileUA)!==FALSE)
      {
        header("Location: http://m.domain.com".$_SERVER["REQUEST_URI"]);
        exit();
      }
    }
  }

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Tue, 2014-11-04 10:34

Hi David,

Thanks for all that - nearly all up and running! Are you sure about session variables? I was pretty sure they were just created and stored on the web server for the duration - I can see these things being created and dropped quite frequently. However, I can't get this to work using this method. Cookies work fine but I want to avoid any cookies at all on the mobile version. On a slightly different note, the standard text links can be a little fiddly still when using a small screen. Would there be a quick CSS fix to make the text links a little chunkier or maybe even in to psuedo buttons to make the whole experience more 'app' like?

Cheers.
Keeop

Submitted by support on Tue, 2014-11-04 10:47

Hello Keeop,

Ah - I missed the session_start() call out of the redirection section, have a go with:

  session_start();
  if (!isset($_SESSION["desktop"]))
  {
    $mobileUAs = array("iphone","android","blackberry","opera mini");
    foreach($mobileUAs as $mobileUA)
    {
      if (stripos($_SERVER["HTTP_USER_AGENT"],$mobileUA)!==FALSE)
      {
        header("Location: http://m.domain.com".$_SERVER["REQUEST_URI"]);
        exit();
      }
    }
  }

Regarding the text links in small view, do you mean, for example the sort order links on search results. Any chance you could grab a screenshot (Android / iPhone instructions) and email me a copy to see exactly how it is appearing on your device?

Thanks!
David
--
PriceTapestry.com

Submitted by Keeop on Tue, 2014-11-04 15:12

Hi David,

Email on its way!

Cheers.
Keeop

Submitted by Keeop on Tue, 2015-02-03 16:20

Hi David,

I've noticed that the sites I've implemented this on are having a few issues with some existing code. Think it's a problem with the SESSION as the pages with issues use session variables to. Is there any code I can add to separate the sessions or stop them interfering with each other?

Cheers.
Keeop

Submitted by support on Tue, 2015-02-03 17:00

Hello Keeop,

Ah - in order for session cookies to survive across sub-domains, it is necessary to call session_set_cookie_params() prior to session_start(), so in the above modification, immediately before the call to session_start() have a go with:

  session_set_cookie_params(0,"/",".example.com");

Where .example.com is your domain name prefixed with "." which will make the cookie apply to all subdomains...

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Mon, 2015-02-09 11:43

Hi David,

Put that in the config.advanced file but still the same issues. If I comment out all the session stuff in that file, the other bits work OK. Is there a way to 'isolate' the sessions? Basically, I use sessions when checking for a numerical varification field in a pop-up form. That works fine if I don't use the session stuff in config.advanced but breaks when I do. I guess I need to try and keep these separate or something like that?

Cheers.
Keeop

Submitted by support on Mon, 2015-02-09 11:53

Hello Keeop,

Ah - I wonder if it might be down to using session_start() twice perhaps - if you have a session_start() in your form verification code, which I assume occurs after the instance in the above code, could you try just commenting that instance out, and your form verification code should still working using the session started by the above...

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Mon, 2015-02-09 14:09

Yep, bang on as usual. Thanks!!

Keeop

Submitted by Keeop on Thu, 2015-02-12 13:49

Hi David,

Spoke too soon?! Seem to be having some problems when using IE - it's all OK with Firefox and Chrome. I'm thinking that the session is not being closed? Do I need to put a session close or delete or something somewhere? If so, where?

Cheers.
Keeop

Submitted by support on Thu, 2015-02-12 15:17

Hi Keeop,

Does your other code that uses session variables (where you commented out the duplicate session_start() call) maybe have a duplicate session_set_cookie_params() that may be conflicting?

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Thu, 2015-02-12 15:30

Hi David,

Nope, only had session_starts in the other locations.

Cheers.
Keeop

Submitted by support on Fri, 2015-02-13 09:32

hi Keeop,

Could you perhaps post a snipped of the code that uses session variables (I'll remove before publishing your reply) and I'll see if I can spot any reason for a conflict at all.

Does the mobile / desktop switching work fine in Internet Explorer and it's only your CAPTHCA code that isn't working, or vice versa / both?

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Mon, 2015-02-16 20:24

Hi David,

I think it is actually all OK. I think maybe IE was caching some stuff that the other browsers weren't as I have tried it all again on a few of my sites and it all seems to be working as it should.

Thanks.

Keeop

Submitted by Keeop on Wed, 2015-03-18 20:33

Hi David,

Getting lots of 'fix usability for mobile' warnings from Google. Do you know if they're using a specific bot for this? My main 'desktop' site has all the optimised SEO goodness as opposed to the mobile web site that is, of course, heavily cut down. So, I still want them to index the standard pages but see that I am catering for mobile users with my 'm.blahblah' subdomain that handhelds are redirected to when detected.

Cheers.
Keeop.

Submitted by support on Thu, 2015-03-19 08:31

Hi Keeop,

These days you really can't beat a single, responsive design (I still have to update the design for this website - www.pricetapestry.com itself as I keep getting the same warnings!), which is of course why I developed the new template (included since 14/06A) but whilst you have separate URLs for mobile / desktop there is some detailed advice from Google regarding this here...

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by Keeop on Thu, 2015-03-19 09:27

Hi David,

I know! But, it took me around three months solid graft to get PT worked in to the 'template' I am currently using which is full of bells and whistles, so when I next have the luxury of having this much time, I'll get it moved over to a more responsive theme. Yes, I do like the simplicity of your new template and it works really well with handheld devices but I like to have something more feature laden for desktop users so I do need to modify it quite heavily!

Thanks for the link - looks just what I need to do.

Cheers.
Keeop

Submitted by Keeop on Thu, 2015-04-09 14:58

Hi David,

Quick follow up. Do you know what I should do about robots.txt in the mobile subdomain? I had initially set it to 'disallow all' as I thought this would aid the duplication issues. However, this is being flagged in the mobile search results so am assuming this is not the best way. Should I just keep it as per the vanilla sample file do you think?

Cheers.
Keeop

Submitted by support on Thu, 2015-04-09 15:05

Hi Keeop,

I think if you've followed Google's own guidelines for differentiating between the desktop and mobile sites then yes - keep the standard robots.txt as this will allow search engines to properly index and rank your mobile site for mobile queries accordingly.

Cheers,
David.
--
PriceTapestry.com