1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Making existing php and mysql driven site mobile friendly.

Discussion in 'HTML & Website Design' started by shivampaw, Nov 23, 2013.

  1. #1
    I have made a site which is here : www.btlclan.x10.mx

    I would like to make it mobile friendly either through using the current files in a new directory with mobile design or with responsive designs or media queries. I originally downloaded a template monster template.

    I am not sure how to go about doing this.

    Any help would be much appreciated.
     
    shivampaw, Nov 23, 2013 IP
  2. pix582

    pix582 Active Member

    Messages:
    313
    Likes Received:
    14
    Best Answers:
    1
    Trophy Points:
    70
    #2
    Hi shivampaw,
    Just had a look at your site, looks really good.

    as for mobile friendly do you only want the site to look good on a mobile or do you want it to look good on mobile, tablet and different size monitors e.g. (15in laptop, widesceen monitor, and retina display)?

    i would personally use
    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
    Code (markup):
    then i would have
    <link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" href="example.css">
    Code (markup):
    so it only loads the stylesheet needed for that size, you can then roll out different tailored css files to fit the viewers device.
     
    pix582, Nov 24, 2013 IP
  3. shivampaw

    shivampaw Greenhorn

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Thank You for your reply and compliment.

    I would like it to look good on all devices. What does the
    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
    Code (markup):
    do and how do I use it properly.

    And then would I make different style-sheets with max-width of 480,720,1024?

    And how would I go about creating them? How can I make it look good. The main problem on my android phone was the navigation bar and the sidebar as well as other links and text.

    Thanks
     
    shivampaw, Nov 24, 2013 IP
  4. HostUS - Alexander

    HostUS - Alexander Greenhorn

    Messages:
    53
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    23
    #4
    Hi shivampaw,

    You could try using more of a bootstrap design which i guess would help you alot.

    - Alexander
     
    HostUS - Alexander, Nov 24, 2013 IP
  5. shivampaw

    shivampaw Greenhorn

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    Wouldn't this mean I have to re design the whole site?

    Isn't there an easy way to implement this into my current site?
     
    shivampaw, Nov 24, 2013 IP
  6. pix582

    pix582 Active Member

    Messages:
    313
    Likes Received:
    14
    Best Answers:
    1
    Trophy Points:
    70
    #6
    you would have a <link> for each 480,720,1024
    so the page would load the css file for that size.

    the
    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
    Code (markup):
    is to stop the user braking the page by zooming in.

    so to make the pages fit for the device you would copy the file you have at the moment and edit it to fit the dimensions.

    if you need any more in depth help give me a PM
     
    pix582, Nov 24, 2013 IP
  7. HostUS - Alexander

    HostUS - Alexander Greenhorn

    Messages:
    53
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    23
    #7
    Not fully, you can edit the design to make it more of a bootstrap, but could be a bit of work.
     
    HostUS - Alexander, Nov 24, 2013 IP
  8. shivampaw

    shivampaw Greenhorn

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #8
    Gotcha thanks :) I will try it next weekend and get back to you :D
     
    shivampaw, Nov 24, 2013 IP
  9. shivampaw

    shivampaw Greenhorn

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #9
    I would rather go with pix582's suggestion but will look at this at a later time
     
    shivampaw, Nov 24, 2013 IP