How to Make a Website Responsive

We create websites that work anywhere, anytime, and on any device.
Responsive websites use new technologies to create a “responsive” viewing experience. A responsive website looks and works just as well on any mobile devices (iPhone, Android phones, etc.) as it does on a desktop computer, laptop or tablet.

Responsive is undoubtedly the future of web. Here’s a short tutorial on how to make a responsive website:

HTML – Set browser viewport

To create a responsive website the first thing we suggest is make sure the viewport of the site is set to the device width. This ensure’s the site is at 100% and there’s no zooming or cropping. In our HTML head we’d add:

<!-- HTML -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">

CSS – Have CSS3 Queries to detect mobile devices

The common method to do proper responsive design is using CSS3 Queries. In our main .css file (if our desktop site was designed for 960px width) here’s the query for detecting a tablet/netbook, then smart phone:

/* CSS */
/* Basic responsive */
@media screen and (max-width: 960px) {  
   /* ..custom CSS for viewports less than 960 here */
    header { /*...*/ }
    section { /*...*/ }
    footer { /*...*/ }
    /* etc.. */
}

/* iPads (portrait) and similar tablets */
@media only screen
and (min-device-width : 768px) {
    header { /*...*/ }
    section { /*...*/ }
    footer { /*...*/ }
    /* etc.. */
}

/* Smartphones */ 
@media only screen and (max-device-width : 480px) { 
    header { /*...*/ } 
    section { /*...*/ } 
    footer { /*...*/ } 
    /* etc.. */ 
}

Any element with a width value over 320px, in these queries we’d make fluid, setting width:100%, float: none, and other edits, allow the site to resize freely. Re-defining main elements takes a bit of time and is different for every site, but it’s well worth the effort and there are plenty of frameworks if you’re not wanting to write your own.

Javascript – Resize dynamic elements

If you are using some Javascript that needed to be responsive to the viewport use the following:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        /* Javascript */
        widthofscreen = jQuery(window).width();
        if (widthofscreen < 960) { /*…*/ }
    });
</script>

or furthering about, if you have something third party embedded, something with a dynamic height but set with, or a element with a perfectly sized background image that you’d like to resize the width but keep the dynamic height, you can use something like below to dynamically change the height of elements based on the screen width:

widthofscreen = jQuery(window).width();
if (widthofscreen < 960) {
    //dynamic height based on screen width
    start_w = 915 //original image width
    start_h = 325 //original image height
    end_w = widthofscreen
    end_h = ((start_h*end_w)/start_w)
    jQuery('#banner').css('height',end_h+'px');
}

Testing Responsive Websites:
Not everyone has access to the dozen most popular devices, so we’ve setup this page to test responsive design, simply enter your websites URL and view how responsive your site is on various devices.

Extras:

Call Now Button

Developers who take the time to optimize for specific devices often add features like “Call now” buttons for smart-phones. The easiest way we found to do this is define .mobile-only in your .css file as display: none, then in your max-device-width : 480px query, overwrite .mobile-only to be display:block;. On the HTML side, creating a image/graphic for a large Call Now button: <a href='tel:555-555-5555' id='callnow' class='mobile-only'>Call Now: 555-555-5555</a>

Adding some styles and images to that #callnow button and fix it to the bottom of your page, and you now have a large call button, with a preset phone number centimeters away from your potential customers thumb.

Apple Touch Icon

iOS users have the option to save a web-page to their springboard. iOS will take a screenshot of the website as use that, but in addition to a favicon you can add: <link rel="apple-touch-icon" href="apple-touch-icon.png" /> to have your custom logo/icon appear on users springboards.

Apple Device Compatible

This extra meta tag tells iOS devices this website was optimized for iOS devices, and will remove the address bar after load, giving your website some extra prime screen space to display your information. <meta name="apple-mobile-web-app-capable" content="yes" />