How to make my website mobile and tablet compatible? [closed]

Question

I want to make my existing website automatically adjust itself when viewed either on mobiles, tablets, or even when you adjust your screen on a desktop.

Failing that, if it's too difficult, what suggestions do you have?? I basically want an ipad and iphone (android) version that uses the same url, with an auto direct when mobile browsers are detected.

Many thanks

Answer 1

You are looking for Responsive web design! Start with MediaQueries http://mediaqueri.es/

Also check this out for better understanding

http://www.slideshare.net/zomigi/building-responsive-layouts-15508821

Answer 2

Adding to what others have answered, for mobile sites you have two basic options.

You can have distinct desktop and mobile sites, or a single responsive site which works on all devices.

For the first option you can redirect mobile users to a completely different URL where you host a mobile only version of the site. To do this you can manage the redirection with something like http://detectmobilebrowsers.mobi/ or there are lots of variations for redirection with .htaccess files.

Jquery Mobile is one really good way to develop the mobile only site after that.

This approach has the advantage that it's easier to develop a lightweight mobile only version of your site. One disadvantage is that you will have two websites to maintain -- desktop and mobile.

The other option is the responsive approach that others have suggested. Here you basically have the one site which reconfigures depending on the widow size of the visitor's browser. Bootstrap and Foundation are two excellent options, and there are plenty of others as well.

Responsive sites rely on media queries to find out the window size. This is well supported in modern browsers but there will be issues with older browsers that you may need to work around. Some of the advantages of a responsive site are that you maintaining just the one site, and in theory it works for all screen and window sizes so it won't cause a problem when the next mobile device with a different screen size is released.

Good luck, it's an interesting time to be doing web design.