Skip navigation
Currently Being Moderated

Going mobile with an existing website

Aug 7, 2012 5:29 AM

I created a website about two years ago for a client that they now want to be able to access it on an iPhone and an iPad.  They claim they cannot see the website on either of those two devices.  Since I have neither device, I have no idea what they are or are not seeing.  (Site URL:  www.fulcrumcwi.com)

 

My question is how do I make the existing website usable on those two devices.  I've never done this before so I'm taking this as an opportunity to learn how to do this. Could someone recommend some resources to learn how to do this?

 

Thanks so much!

graphicedge

 
Replies
  • Currently Being Moderated
    Aug 7, 2012 5:48 AM   in reply to graphicedge

    It displays completely fine here on iPhone 4. Your clients may have a connection issue.

     

    There really isn't a trick to make them work on iPhone. Unless your site uses a lot of Flash, it should come up exactly as it looks on a desktop. Some designers feel the need to make a site "iPhone friendly" by watering down the design and shrinking it to fit in the small screen devices, I personally hate that. These devices were designed to allow you to navigate entire sites, as they exist online without the need of a separate "iPhone only" design. I guess some designers are just looking to make their jobs harder by creating two layouts for each site they build.

     

    Don't get me wrong, some of the designs people are coming up with that are "iphone only" are nice (in some cases, better than the desktop version of the site), they're just totally unnecessary.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 5:55 AM   in reply to graphicedge

    I've taken a quick look at that website in an iPad. The main page loads and displays correctly, as does the newsletter.

     

    The problems are with other links in the right sidebar. You're using target="_blank", which tells the browser to launch another page, which doesn't work on mobile devices.

     

    They might also be complaining about the main menu. Drop-down menus don't work well on mobile devices. However, I see that your top link in each menu item loads the relevant page, and there's a submenu in the left sidebar, so it's not too bad.

     

    However, the links on a mobile screen are too small to hit accurately with a finger.

     

    Quite honestly, you need to invest in a mobile device of some sort, even if not an expensive iPhone or iPad, to test on mobile. There's a lot more to developing for mobile than I've gone into here.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 6:00 AM   in reply to Jon Fritz II

    Jon Fritz II wrote:

     

     

    Don't get me wrong, some of the designs people are coming up with that are "iphone only" are nice (in some cases, better than the desktop version of the site), they're just totally unnecessary.

     

    Humm....interesting view. So dedicated mobile sites using css media queries are really not required then? What's all this fuss about lately in connection with adaptive mobile techniques and Adobe introducing the fluid grid in CS6. Surely has to run deeper than 'not necessary' given that a lot of time and effort has been deployed developing these techniques?

     

    Just digging for information really as supporting mobile devices is fairly new (not a critic on your reply to the OPs question).

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 6:05 AM   in reply to David_Powers

    David_Powers wrote:


    You're using target="_blank", which tells the browser to launch another page, which doesn't work on mobile devices.

     

     

    Now I'm curious, which mobile browser does target="_blank" not work on?

     

    I ask because with iPhone 4 using Atomic and Safari it works as expected.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 6:16 AM   in reply to osgood_

    Humm....interesting view. So dedicated mobile sites using css media queries are really not required then? What's all this fuss about lately in connection with adaptive mobile techniques and Adobe introducing the fluid grid in CS6. Surely has to run deeper than 'not necessary' given that a lot of time and effort has been deployed developing these techniques?

     

    Just digging for information really as supporting mobile devices is fairly new (not a critic on your reply to the OPs question).

     

    With the functionality of mobile browsers, no it's not technically necessary. In some cases (try www.foxnews.com for example) it's actually quite restrictive.

     

    I'm not saying it can't, or shouldn't be done in some instances. What I am saying is, given a well thought out design from the get-go, "mobile only" sites are technically unnecessary.

     

    Now, if your client wants you to design a site specifically set to the view port size of an iphone that uses all the gestures built into the iPhone touchscreen, obviously my argument is moot.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 6:22 AM   in reply to Jon Fritz II

    Jon Fritz II wrote:

     

     

    I'm not saying it can't, or shouldn't be done in some instances. What I am saying is, given a well thought out design from the get-go, "mobile only" sites are technically unnecessary.

     

     

    That's quite encouraging. The majority of my clients are small to medium and most likely would not see the necessity for their site to be specifically designed for a particular device.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 7:11 AM   in reply to Jon Fritz II

    Jon Fritz II wrote:

     

     

    Now I'm curious, which mobile browser does target="_blank" not work on?

    Weird. I've just tested it again in iPad 3, iPod touch, Android 2.2, and Android 3. It works in all of them.

     

    When I tested in iPad 3 before, I tapped the second two links in the right sidebar several times, and nothing happened. That's why I looked at the source code to see why the links wouldn't work.

     

    Obviously, I was wrong on that point. Nevertheless, I don't think using target="_blank" is a good idea on mobile devices. The iPod touch (which is basically an iPhone without the phone) makes the transition very clear, but it wasn't at all clear on my HTC Desire (Android 2.2). Fortunately, I was able to go back using the phone's back button.

     

    Going back to the question of whether special treatment is needed for mobile devices, I would say that the site is OK on a tablet, but it's very difficult to use on a mobile phone. The user needs to rescale each page as it's loaded, and on some mobile devices, it's necessary to swipe constantly to the left and right to read everything. If I were the client, I would expect the layout to be optimized for small screens using the viewport <meta> tag and media queries.

     

    My advice to the original poster would be to ask the client to say specifically what doesn't appear to be working correctly. Also take a look at my two-part tutorial on media queries: http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html. Just changing the layout for mobile phones would work wonders.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 7:15 AM   in reply to osgood_

    osgood_ wrote:

     

    The majority of my clients are small to medium and most likely would not see the necessity for their site to be specifically designed for a particular device.

    You shouldn't design for a particular device, but it's important to design for the device's capabilities. If you've got a good HTML structure, it should not be difficult for someone with your level of CSS skills to optimize a site for display on a screen of, say, less than 400px wide using media queries.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 7:28 AM   in reply to David_Powers

    David_Powers wrote:

     

    You shouldn't design for a particular device, but it's important to design for the device's capabilities. If you've got a good HTML structure, it should not be difficult for someone with your level of CSS skills to optimize a site for display on a screen of, say, less than 400px wide using media queries.

     

    Hi David,

     

    Sure I could do that. BUT it does require extra planning at the outset and extra time writing the css. I'm not sure my category of clients would want to pay for that (although I don't really know). None have actually said so far that their sites don't function on their smartphone or tablet. May not function or be presented as well as they should or could be but have no complaints yet.

     

    Some sites I work on have a couple of hundred pages and half a dozen or so different grid layouts which will of course add to the time consumption to make adaptive.

     

    If in future if I have clients with say 10 pages or less and most of those pages use a generic grid then I would certainly entertain the idea from the start.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 7:34 AM   in reply to osgood_

    osgood_ wrote:

     

    If in future if I have clients with say 10 pages or less and most of those pages use a generic grid then I would certainly entertain the idea from the start.

    Planning it from the start is definitely the best way. Retrofitting one of your 100+ page sites would be a different matter.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 10:41 AM   in reply to graphicedge
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points