4 Replies Latest reply on May 1, 2015 9:41 AM by David_Powers

    Different hyperlink URLs based on device used?

    kellyt90849135

      Hi everyone!

       

      I'm new to the forums so hello, hello!

       

      Hopefully someone can help me with my question as I need this for work Essentially we have a desktop website and a mobile website at a completely different domain (for example, desktop website is www.donkey.com and mobile website is www.newdonkey.com). I am building an eDM in Dreamweaver and need a hyperlink to direct to different URLs based on what device the user has opened the eDM from. So if a user is reading the eDM on desktop and clicks the hyperlink, they will go to www.donkey.com; if they are on mobile, they will go to www.newdonkey.com.

       

      Unfortunately creating a redirect on the web pages is not an option as I have no control of this. Users also will not be able to access the desktop website from mobile as it auto-redirects to the mobile site.

       

      In other words - I will have to manually do it from Dreamweaver.

       

      Am I clutching at straws? Is this possible at all?

       

      Thank you so much for your help.

       

      - Kelly

        • 1. Re: Different hyperlink URLs based on device used?
          David_Powers Adobe Community Professional (Moderator)

          Device detection is not a trivial task. One way to do it is with WURFL (http://wurfl.sourceforge.net/).

           

          I did the W3C Mobile course a year or so ago. The recommendation was to provide a link to the mobile site from the desktop site and vice versa if you have two different versions of the site. But the main recommendation was to create a single responsive website. Then there's no need for redirecting users.

          • 2. Re: Different hyperlink URLs based on device used?
            kellyt90849135 Level 1

            Thank you David. I thought I was grasping at straws a little bit here. I completely agree that responsive is the best way to go - unfortunately I don't deal with that!

             

            Thanks for your help. Much appreciated

            • 3. Re: Different hyperlink URLs based on device used?
              Jon Fritz II Adobe Community Professional & MVP

              You "could" do that based on viewport size using CSS Media Queries to change the display properties of two containers of links, one with all mobile links and one with all desktop links.

               

              When the browser viewport is say 480 pixels or less (typical mobile environment where you wouldn't want desktop links), the container with the mobile links would display and the container with desktop links would disappear. When the viewport is 481 pixels or more, the desktop container would show and the mobile container would disappear. The css would look something like this...

               

               

              #desktop {

                   display:block;

              }

              #mobile {

                   display:none;

              }

              @media only screen and (max-width:480px) {

              #mobile {

                   display:block;

              }

              #desktop {

                   display:none;

              }

              }

               

              And the html would be...

               

              <div id="desktop>

                   all your desktop links

              </div>

              <div id="mobile">

                   all your mobile links

              </div>

              • 4. Re: Different hyperlink URLs based on device used?
                David_Powers Adobe Community Professional (Moderator)

                Jon Fritz wrote:

                 

                You "could" do that based on viewport size using CSS Media Queries to change the display properties of two containers of links, one with all mobile links and one with all desktop links.

                 

                When the browser viewport is say 480 pixels or less (typical mobile environment where you wouldn't want desktop links), the container with the mobile links would display and the container with desktop links would disappear.

                That's not a very user-friendly approach. I recently needed to show someone important medical information on my mobile phone, but it had been hidden using media queries. Fortunately, the site had a link to switch to the desktop version, so I was able to find the information I needed. It involved scrolling around a bit, but having that choice was very important.

                 

                The recommendation of the W3C Mobile course was always to provide links between the mobile and desktop versions, and to use a cookie to remember the user's preference.