Sunday 14 February 2016

How to Make Website Responsive for mobile devices?

How to Make Website Responsive for mobile devices?

Question: Why Responsive Web Design is the compulsary for websites?
  1. Recommended By Google: Google have higher Preference for Responsive design as compare to Non-Responsive.
  2. One Website, Many Devices: Single website can be viewable in desktop, laptop, ipad, different sizes of mobile.
  3. Good for SEO
  4. Responsive Website have more page views as compare to non-responsive.
  5. It looks always better in different resolution.

Question: How to check website is responsive OR Not?

Question: How can i make a existing website responsive?
You can make any website responsive. Just follow the simple steps.

  1. Add Following code in head tag.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. Create a responsive.css file and include in all the pages.
  3. Add Following code in responsive.css
    /* Smaller Resolution Desktops and Laptops */
    @media (max-width: 800px) {
    /* Smaller devices like Ipad*/
    @media (max-width: 650px) {
    /* Even Smaller devices like Mobile*/
    @media (max-width: 450px) {
    /* Smallest Mobile devices */
    @media only screen and (min-device-width: 300px) and (max-device-width: 480px) {
  4. Now structure is ready, you just need to add css according to devices.
  5. Note: In Responsive design you need to hide extra information of websit