How to make jQuery UI Spinner-Map Example Responsive

What is responsive web design?

A responsive web design, built with HTML5 and CSS3, allows a website to 'just work' across multiple devices and screens.

Wikipedia definition
"Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)"

Elements of responsive web design

• Media queries
• Fluid grid concept
• Flexible images/video

Why responsive web design?

Mobile internet is predicted to overtake desktop internet usage by 2014 and a responsive web site can provide great user-experience across many devices and screen sizes.

How to make jQuery UI Spinner-Map example responsive ?

This article extends the jQuery UI Spinner-Map example, which is about Google Maps integration, using spinners to change latitude and longitude.

Example reference link : http://jqueryui.com/spinner/#latlong. This example is a very simple one which uses Google Maps JavaScript API, jQuery UI Spinner  widgets to change latitude and longitude to get the Google Map corresponding to these co-ordinates.

Replace the existing CSS code between style tags with the following styles:

    #map {
      width:1200px;
      height:800px;
    }

    @media handheld, only screen and max-width:1100px {
      /*Small Desktop / Large Tablet View */
      #map {
        width:900px;
        height:900px;
      }
      label {
        font-size:12px;
      }
    }

    @media handheld, only screen and (min-width:651px ) and (max-width:979px) {
      /*Small Desktop / Large Tablet View */
      #map {
        width:640px;
        height:800px;
      }
      label {
        font-size:12px;
      }
    }

    @media handheld, only screen and (min-width:481px ) and (max-width:960px) {
      /* Small Tablet View */
      #map {
        width:480px;
        height:600px;
      }
      label {
        font-size:10px;
      }
    }

    @media handheld, only screen and (max-width:480px) {
      /* Smartphone view*/
      #map {
        width:320px;
        height:400px;
      }
      label {
        font-size:9px;
      }
    }

    body {
      font-size: 62.5%;
      font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
    }

Check on browser

Resize the browser and test your code. 
 

Conclusion

It is very easy to make a simple page responsive by using media queries for various mobile devices. Remember that the real implementation need to be methodological considering content, using ideal width for various devices, prototype and test etc.

Two different styles need to  be created to support portrait and landscape modes of devices.

References

• http://jqueryui.com/spinner/
• http://tympanus.net/codrops/2013/01/21/ui-design-guidelines-for-responsive-design/