14 {{ upvoteCount | shortNum }}
14 {{ upvoteCount | shortNum }}

Designing three different sites for three different devices.

by NateJasper
12 replies
  • WEB DESIGN
    • |
Is there a way to design 3 different HTML home pages for a single URL that vary depending on the device used? Like one for phones, one for tablets, and one for desktops. I know how to do media queries that link to three different CSS files. The problem is that I can't quite get the site I'm working on to look good on a mobile device no matter how I style it. I need a whole different design. Is there a way for me to do this?
#designing #devices #sites
  • Profile picture of the author Farish
    And this reason is why I use twitter bootstrap.
    {{ DiscussionBoard.errors[9032424].message }}
    • Profile picture of the author shahriyar
      Yes, you can detect the User-Agent of the user's device and deliver the appropriate content of your choice.
      Signature
      Super WSO => No hype, No Catch, 25+ SEO Tools


      **Keep Hackers Away** 176+ Rock Solid Security for Wordpress
      {{ DiscussionBoard.errors[9032508].message }}
      • Profile picture of the author NateJasper
        Originally Posted by shahriyar View Post

        Yes, you can detect the User-Agent of the user's device and deliver the appropriate content of your choice.
        How do you do that?
        {{ DiscussionBoard.errors[9032869].message }}
      • Profile picture of the author taylerhughes
        Originally Posted by NateJasper View Post

        Is there a way to design 3 different HTML home pages for a single URL that vary depending on the device used? Like one for phones, one for tablets, and one for desktops. I know how to do media queries that link to three different CSS files. The problem is that I can't quite get the site I'm working on to look good on a mobile device no matter how I style it. I need a whole different design. Is there a way for me to do this?
        I think your asking to render different HTML depending on the device. To do this you are going to need to use PHP to identify the device and choose which HTML to display.

        My PHP is not that advanced so you will have to get advice from someone how knows about it more than me. This link will get you started though.

        How do I determine whether it's a mobile device with PHP? - Stack Overflow
        {{ DiscussionBoard.errors[9032879].message }}
        • Profile picture of the author NateJasper
          Originally Posted by taylerhughes View Post

          I think your asking to render different HTML depending on the device. To do this you are going to need to use PHP to identify the device and choose which HTML to display.

          My PHP is not that advanced so you will have to get advice from someone how knows about it more than me. This link will get you started though.

          How do I determine whether it's a mobile device with PHP? - Stack Overflow
          Is there a way to do this with Wordpress or another CMS?
          {{ DiscussionBoard.errors[9032979].message }}
          • Profile picture of the author taylerhughes
            Originally Posted by NateJasper View Post

            Is there a way to do this with Wordpress or another CMS?
            You are really going to struggle.

            Your best bet would probably be to get 3 different installations of the website on 3 different subdomains then set up some kind of routing on the main domain to redirect to each one depending on the device.

            That is in no way shape or form good practice though and it will seriously upset your SEO as each subdomain will be considered a separate website.

            Maybe someone else will have a better idea?
            {{ DiscussionBoard.errors[9033020].message }}
            • Profile picture of the author Istvan Horvath
              Originally Posted by NateJasper View Post

              Is there a way to do this with Wordpress or another CMS?
              Yes.

              Originally Posted by taylerhughes View Post

              You are really going to struggle.
              [...]
              Maybe someone else will have a better idea?
              Ignorant people may struggle...

              The rest of the world would just use a theme that is "responsive" = meaning it changes the display according to the device it's viewed on.

              Just a clarification for the OP: for the 3 devices you listed you don't really need a "different design" - as in a completely differently looking website, since every normal webmaster should try to get some consistency across platforms. What you really need is a user-friendly version that is taylored for the display screen of the device in use.

              There are many free WP themes that are responsive and work well on phones, tablets and desktop computers. Even the default 2014 can do it :rolleyes:
              People just should try thing out before asking questions! - You have a WP install? Is the TwentyFourteen theme there? Did you switch to it? Did you check your site with a phone/tablet?
              Signature

              {{ DiscussionBoard.errors[9033448].message }}
              • Profile picture of the author taylerhughes
                Originally Posted by Istvan Horvath View Post

                Ignorant people may struggle...
                Are you having a laugh?

                NateJasper is obviously not an idiot and therefor has considered a responsive theme.

                If you had of read his question like an intelligent person you would have realised his requirements are beyond that of a responsive website.

                I will point out that you quoted my comment about struggling then proposed an alternative to the thing I was saying he would struggle with.

                No one likes a smart ass, especially when they are wrong mate.
                {{ DiscussionBoard.errors[9033485].message }}
                • Profile picture of the author SteveJohnson
                  Originally Posted by taylerhughes View Post

                  Are you having a laugh?

                  NateJasper is obviously not an idiot and therefor has considered a responsive theme.

                  If you had of read his question like an intelligent person you would have realised his requirements are beyond that of a responsive website.

                  I will point out that you quoted my comment about struggling then proposed an alternative to the thing I was saying he would struggle with.

                  No one likes a smart ass, especially when they are wrong mate.
                  He's not wrong - and you DID ask if anyone had a better idea.

                  The OP's requirements are NOT beyond that of a 'responsive' website design. They're just beyond his capability at the moment.

                  Sniffing user agents with PHP is problematic in that it depends on the user agent (the browser) to report itself correctly, and in a way that properly differentiates itself from other UAs. Do some research on the subject. Browser and OS sniffing is rarely the best approach to take unless it is absolutely necessary.

                  Put your ego away and don't get your panties in a wad - a lot of bad advice is given by people who think they know the answers (or are just guessing at the answers to raise their post count). Some of us here try to protect the unknowing from the unknowing.
                  Signature

                  The 2nd Amendment, 1789 - The Original Homeland Security.

                  Gun control means never having to say, "I missed you."

                  {{ DiscussionBoard.errors[9034550].message }}
                  • Profile picture of the author taylerhughes
                    Originally Posted by SteveJohnson View Post

                    He's not wrong - and you DID ask if anyone had a better idea.
                    I did but he was very rude for absolutely no read when giving his idea.

                    There is no need to call me ignorant because his assessment of the issue is different to mine.

                    Originally Posted by SteveJohnson View Post

                    Sniffing user agents with PHP is problematic
                    Originally Posted by taylerhughes View Post

                    That is in no way shape or form good practice
                    Originally Posted by SteveJohnson View Post

                    Put your ego away and don't get your panties in a wad
                    I don't have an ego, I just take issue with people being rude for no reason...

                    Originally Posted by SteveJohnson View Post

                    a lot of bad advice is given by people who think they know the answers (or are just guessing at the answers to raise their post count). Some of us here try to protect the unknowing from the unknowing.
                    Your implications are quite out of order. The OP can decide to take my advice or leave it but I wouldn't have given it based on a guess. I have only posted on the Web Design forum because I have a professional career within that field and I'm good at it.
                    {{ DiscussionBoard.errors[9035420].message }}
                    • Profile picture of the author SteveJohnson
                      Originally Posted by taylerhughes View Post

                      Your implications are quite out of order. The OP can decide to take my advice or leave it but I wouldn't have given it based on a guess. I have only posted on the Web Design forum because I have a professional career within that field and I'm good at it.
                      I applaud you for jumping on the forum to try to help.

                      However, you gave (IMHO, of course) bad advice:

                      You are really going to struggle.

                      Your best bet would probably be to get 3 different installations of the website on 3 different subdomains then set up some kind of routing on the main domain to redirect to each one depending on the device.
                      for what the OP requested - a different home page design for desktop, tablets, and phones. "You are really going to struggle," is simply not true.

                      Then you backed up your advice by saying

                      you would have realised his requirements are beyond that of a responsive website.
                      Which is also not true. What the OP wanted is easily doable with media queries.

                      That's not even mentioning that you went on to say that the advice you gave "...is in no way shape or form good practice."

                      If it isn't good practice, why tell someone to do it?
                      Signature

                      The 2nd Amendment, 1789 - The Original Homeland Security.

                      Gun control means never having to say, "I missed you."

                      {{ DiscussionBoard.errors[9037810].message }}
  • Profile picture of the author WPcrew
    @taylerhughes

    Your point stands, but if you look at Nate's previous posts you'll see he's new to all this. So, he might not yet have seen how and what should be done, and he didn't explicitly stated that he wants 3 different pages, and NOT responsive design.

    @NateJasper

    Maybe your initial design is not good enough, and your approach needs to change.
    Let's put things this way - we're assuming elements you have on your site - you'll want to keep, right? Those you don't want, you can just display: none.

    By using media queries - you can style everything totally different from the original, desktop look. I hope you understand that.
    {{ DiscussionBoard.errors[9036316].message }}

Trending Topics