13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

How Do You Make Sure Your Site Works on Smart Phones?

by Michele Miller
11 replies
  • WEB DESIGN
    • |
I have some sites designed in regular html, Front Page plus a bunch of WP blogs. I would like them to also now be optimized for smart phones. How can I do that using the existing sites I have? Is it possible without the PC/laptop view/version having to be changed completely?

I don't quite understand how some sites are converting an original site for mobile and charging a monthly fee. I just would like to be able to do this myself without encountering the monthly fee. Is there extra code I could add that will automatically make sure it works on either the smart phone or regular computers?

Thanks for any help you can offer!
#make #phones #site #smart #works
  • Profile picture of the author jamesg3
    You will build a separate version just for Iphones, smart phones and ipads. You may wish to use a .mobi url as it is designed to handle this, The phone will redirect it for you if there is a .mobi url in the mix. A lot of sites actually render on smart phones, just not too well. So we build separate sites that have base info and not much in the way of graphics and plugins. This would be your main content in text form. You can do an extensive site for phones but the cost would definitely make it not appealing to do that.
    Signature
    Serious Wordpress sites, html/css sites and flash sites Cheap. I provide killer SEO, easy to use e-commerce solutions and payment gateways. Check me out at Serious Website Design.
    Need Hosting with serious speed and power? 3.99 a month. Take a look here. Serious Website Hosting.
    {{ DiscussionBoard.errors[3742881].message }}
    • Profile picture of the author Alexander Sebastian
      have a look at a wordpress plugin called wp touch..

      i have only briefly looked at this plugin but it may be just what you need?
      Signature
      Alexander Sebastian Just launched his new blog offering High end Training for FREE..
      {{ DiscussionBoard.errors[3742903].message }}
    • Profile picture of the author Michele Miller
      Thank you for helping. Just to clarify then, I would purchase www.mysite.mobi and build a quick web/info page without too much other stuff. How though, when someone clicks on the regular .com URL can it be integrated to forward to the .mobi if they are using an iphone, or is that even possible? Do I have to start over again for ranking for .mobi. I know I'm going to kick myself when I get the answer to this, because it sounds like a stupid question...
      {{ DiscussionBoard.errors[3743088].message }}
      • Profile picture of the author WillR
        Originally Posted by Michele Miller View Post

        Thank you for helping. Just to clarify then, I would purchase www.mysite.mobi and build a quick web/info page without too much other stuff. How though, when someone clicks on the regular .com URL can it be integrated to forward to the .mobi if they are using an iphone, or is that even possible? Do I have to start over again for ranking for .mobi. I know I'm going to kick myself when I get the answer to this, because it sounds like a stupid question...
        Yes, usually a mobile site is designed separately from the main site. There are certain things you need to consider when designing a mobile site such as use of images, size of images, use of things like scripts, iframes, etc. Designing a mobile site is very different to designing a regular site. For a list of all the mobile web standards you can visit this page:

        http://www.w3.org/TR/mobile-bp/

        You can also check how well your site validates for mobile phones by using the official W3C mobile web validator:

        http://validator.w3.org/mobile/

        Once your mobile site has been designed the best thing to do is to create a subdomain such as m.website.com and put your mobile version of your website there. You will then go to your normal website and add some redirect code to all your pages.

        Here is a simple one to use. This detects the screen width of the device looking at your website and if the screen width is less than the value specified, the user will automatically be redirected to the url you specify.

        You can change the 599 value to any screen width you like and don't forget to change the url to the correct url for your mobile website.

        HTML Code:
        <script type="text/javascript">
<!--
if (screen.width <= 599) {
document.location = "http://m.website.com";
}
//-->
</script>
        For those interested I will be releasing a mobile website template in the next week or so with full instructions on how to customize it for you or your clients.
        Signature

        .


        .

        {{ DiscussionBoard.errors[3763660].message }}
        • Profile picture of the author Buford Mobley
          There are several different ways, free and paid, to make all types of sites mobile compatible. See my sig.
          {{ DiscussionBoard.errors[3764499].message }}
  • Profile picture of the author Jay Moreno
    depending how you developed your site ie html, php, wordpress, joomla etc there are various solutions from scripts to plugins, to paid services that you can add to your site or code that detects what type of browser/device is accessing your site, - based on the type (user agent or size of screen) you can typically configure the script to redirect the viewer to the mobile version of the site or simply change its appearance ie switching stylesheets

    i personally don't like auto-redirects but prefer to prompt and ask a user if they want to go to the mobile site

    hth

    jay
    Signature
    Sorry, I am too busy helping people to think of a cool signature!
    {{ DiscussionBoard.errors[3743343].message }}
  • Profile picture of the author dassad
    There are many online tools that show you how your website looks on certain mobile pages but the best is if you download the Opera emulator for opera mobile 10 on your PC or Mac and test it. You can find it at Opera Mobile emulator for desktop - Dev.Opera or if you don't want to download than use this online version: Opera Mini simulator

    Regards,
    daSSad
    Signature

    {{ DiscussionBoard.errors[3746310].message }}
    • Profile picture of the author Jay Moreno
      Originally Posted by dassad View Post

      There are many online tools that show you how your website looks on certain mobile pages but the best is if you download the Opera emulator for opera mobile 10 on your PC or Mac and test it. You can find it at Opera Mobile emulator for desktop - Dev.Opera or if you don't want to download than use this online version: Opera Mini simulator

      Regards,
      daSSad
      Have you looked at keynote MIT? You may change your mind about opera being best

      Actually opera emulator is a lot simpler to use than mit - guess it depends what your looking to do...
      Signature
      Sorry, I am too busy helping people to think of a cool signature!
      {{ DiscussionBoard.errors[3748076].message }}
  • Profile picture of the author Istvan Horvath
    Originally Posted by Michele Miller View Post

    I have some sites designed in regular html, Front Page plus a bunch of WP blogs. I would like them to also now be optimized for smart phones.
    Look for a fellow warrior Quentin:
    View Profile: Quentin
    Signature

    {{ DiscussionBoard.errors[3748998].message }}
  • Profile picture of the author Alex Peltonen
    You will need to create another mobile website to get best results. A mobile handset browser will never perform magic with your desktop site. It cannot figure out what to place on that tiny screen with priority.

    To create a mobile website it will take some rethinking of your mobile audience and what they need. The message and design should to follow the form… therefore consider what it will take to make your website mobile.
    Signature
    {{ DiscussionBoard.errors[3777423].message }}
  • Profile picture of the author mobopt
    There's a lot of work involved in detecting and rendering pages on mobile devices.
    {{ DiscussionBoard.errors[3791071].message }}

Trending Topics