build cross-device website using wordpress, non-responsive approach

I need to find a solution for my wordpress template, I’ve already coded landing page for desktop resolutions, link.
My goal is to make a cross-device website. Before i always used media queries to make it responsive, but in this case i need to move it to a new level and make a website that is capable to detect the device that’s been used (targeting 3 classes: desktop, tablet and phone) and load a right version of the website, this way it allows not only change layout, but customize each version of the website as you need.
So far i tried device.js that is presented on GITHUB. It detects used device on a client side and makes redirect to a right url to open a right version of the website. So it looks like this :

<html>
  <head>
    <!-- Every version of your webapp should include a list of all
         versions. -->
    <link rel="alternate" href="desktop.html" id="desktop"
        media="only screen and (touch-enabled: 0)">
    <link rel="alternate" href="phone.html" id="phone"
        media="only screen and (max-device-width: 640px)">
    <link rel="alternate" href="tablet.html" id="tablet"
        media="only screen and (min-device-width: 641px)">

    <!-- Viewport is very important, since it affects results of media
         query matching. -->
    <meta name="viewport" content="width=device-width">
    http://../build/device.js
  </head>

The problem is though that if i create those files ( phone.php, tablet.php, desktop.php), index.php will make redirect, but still, same header and footer will be loaded, so there is not much sense to do that, because this way it’s not possible to customize anything except layout in style file.

I also tried to create in my template folder 3 separate folders: phone, tablet and desktop so each of them would contain unique index file, header.php and footer.php as well, so this way all 3 parts of website can be customized differently, but it didn’t work. Index.php files in any of these folders wouldn’t load header and footer by some reason. So I’m stuck.

If someone have any hint or possibly right solution for this case, i would appreciate it very very much!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s