Making existing php and mysql driven site mobile friendly.

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.

 

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.

 

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

 

Hi shivampaw,

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

- Alexander

 

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?

 

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

 

Not fully, you can edit the design to make it more of a bootstrap, but could be a bit of work.

 

Gotcha thanks I will try it next weekend and get back to you

 

I would rather go with pix582's suggestion but will look at this at a later time