Code example of Responsive web design using CSS3 Media Queries

inShare

With the introduction of CSS3 media queries, web developers can create CSS which enables a web page to adapt and respond to whatever device renders it.  Creating a responsive design, one where elements on the web page are fluid, has never been simpler.  If you have a basic understanding of CSS, then you possess all the skills required to get started with your own responsive design. 


The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to support various device display properties.  As the name suggests, this design technique allows a web page to respond in real time to both a users behavior (browser window size), and device platform (including orientation).

 

 

 

Code example of a responsive web page

 

As you will see... my example is bias to the dimensions of Apple's iPad and iPhone, but you can certainly adapt my sample CSS to any device width or height that is meaningful to your target audience.  For this learning example I created a simple design that consists of a banner, with a main text area that is bordered by 3 widgets on the right.   The example will make use of three media queries.

 

Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)

Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)

Portrait smart phone
@media (max-width: 320px)

 

 

Start by creating the standard CSS classes and setting default properties.  I marked-up my CSS defaults to support both desktop and landscape tablets by limiting the major elements to a width of 1000px.

<style  type="text/css">
#banner {
   margin-left:auto;
   margin-right:auto;
   width:1000px;
}
.
.
.
.widget-text {
   padding:10px;
   background-color:#FCFCFC; 
}
</style>

The media queries

 

Next create the media queries for each screen dimension your interested in supporting (responding to).   Media queries are exactly like any other CSS element,  you are simply providing an alternative set of CSS properties for the existing elements on your web page.  The browser will respond by calling the proper @media each time the web page is loaded or a user re-sizes the browser window.  Here are the three media queries I added support for:

<style  type="text/css">
@media (min-width: 481px) and (max-width: 768px) {
   #banner { width:740px; }
   #banner img { max-width:740px; max-height:222px; }
   #main { width:740px; }          
   #main-content { width:450px; float:left; }
   #widget-container { width:200px; float:right; }
   .widget-content { width:160px; }
}

@media (min-width: 321px) and (max-width: 480px) {
   #banner { width:450px; }
   #banner img { max-width:450px; max-height:135px; }
   #main { width:450px; }          
   #main-content { width:400px;}
   #widget-container { width:400px; }
   .widget-content { width:120px; margin:5px; float:left;}
   .widget-text { display:none; }
}

@media (max-width: 320px) {
   #banner { width:275px; }
   #banner img { max-width:275px; max-height:83px; }
   #main { width:250px; }          
   #main-content { width:250px;padding:0px;}
   #widget-container { width:250px; padding:0px; }
   .widget-content { width:250px; margin:5px;}
   .widget-text { display:none; }
}
</style>

Media queries enable my example to support landscape and portrait mode cleanly

 

                   

 

 

 

Hints and Tips

 

Important!  Set the following META keyword to force the device viewport to maintain the correct scale.  Failure to include this META will result in your UI being pinched: 

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

 

You can optionally configure webpages saved to the iphone's home screen to launch using WebKit directly.  This will remove the Safari web browsers address bar & bookmarks bar giving your web page a native appearance:
<meta name="apple-mobile-web-app-capable" content="yes" />

 

Optionally provide a thumbnail image to represent bookmarked pages in iPhone: 

<link rel="apple-touch-icon" href="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/dw-phone.gif" />

 

 

 

 

Next steps

 

You can run this example by clicking here.  As you resize your browser window to different widths you will see the media queries adapt and flow the web page.  You can download the complete HTML and CSS of this example by clicking here.  

Media queries are not a total answer to mobile views, as they don't address page weight issues, which is another major consideration for mobile design.  Hiding a div or resizing an image has no impact on their contribution to overall page weight, as elements set to display:none are still part of the DOM, and simply hidden from displaying visually.

However, by starting with a sound minimal design, leveraging media queries can result in a workable mobile solution for your website.  The key is careful thought to page elements, image sizes, and overall copy content.    

For the entire definition and specifications on media queries,  please visit the W3C Media Queries module.

 

Source: IBM.com

HTML5 Hybrid Apps

Mobile Apps built with HTML5 are great... when the mobile device you're targeting can support all of the features you need for delivering a top flight user experience. To help the rubber meet the road, you sometimes need libraries to access native OS capabilities like the camera and you could use an accelerated canvas to deliver powerful and responsive mobile apps!  Learn how the polyfill libraries and Intel’s accelerated canvas can do exactly what is needed!

Introduction to Polyfills

On a beautiful day in the near future, every browser will be able to access the latest and most powerful technologies the second they are dreamed up at the W3C. Using only W3C standard HTML and JavaScript, you’ll be able to access every native piece of hardware. All the enterprising developer will need is HTML and JavaScript skills to code any app they can imagine.

Unfortunately, this isn’t the world we live in right now. If you want to create a modern installed HTML5 app, you’re going to need some polyfills to make a hybrid app.

A polyfill is a piece of code that bridges what the browser is capable of out-of-the-box and what you need it to do. There are two main kinds of polyfill libraries. There are compatibility polyfills that add support for new W3C technologies to browsers that don’t understand them by default, and there are polyfills that add APIs to JavaScript to access native operating system resources.

Using Compatibility Polyfills

Most mobile browsers are capable of more modern capabilities than the current low-watermark for compatibility on the internet, Internet Explorer 8. Many features of HTML5 and CSS3 are functional and have been working since Android 2.2 with a few exceptions like SVG (Scalable Vector Graphics) and DataList support.

Using a Polyfill for SVG Compatibility

SVG is extremely helpful in rendering complex charts and beautiful multi-colored icons that look great on high resolution screens. Android devices prior to 2.3 don’t support SVG. If you need to render SVG graphics on an older Android device, canvg.js can help you out. All you need to do is declare a canvas in your HTML and make a one line JavaScript call to canvg to load and render your SVG.

<canvas id="YourIcon" width="32px" height="32px"></canvas>

<script language="text/javascript">

canvg('YourIcon', 'IconFile.svg');

</script>

Using a Pollyfill for Tag Support.

The DataList tag is very useful in providing suggestion list driven text boxes. Neither Android nor iOS web browsers support this tag. The jquery.datalist plugin comes to the rescue. This particular plugin even allows you to structure your HTML as you would a normal HTML5 datalist and just add a single JavaScript call to your web page to progressively add in support:

$('input[list]').datalist();

The above jQuery call will find all of the HTML5 DataLists on the page, then apply the data list effect via progressive JavaScript enhancement.

Accessing Native Capabilities Using Polyfills

Many HTML5 apps installed on mobile devices need to access native hardware capabilities of the device that are not typically exposed to the browser. The Cordova and AppMobi APIs provided by the Intel XDK New enables the creation of a hybrid app that can bridge the gap between what is typically exposed to the browser and the native hardware on the device.

The Intel XDK New is a recent entrant into the area of multi-platform HTML apps. Intel brought together a portfolio of leading products category leading technology like AppMobi, Impact.js, Cordova and more to deliver an end-to-end experience of native capabilities exposed to more cross-platform friendly HTML and JavaScript.

One of the key goals of the Intel XDK New is to provide that native compatibility polyfill capability between your HTML5 app and the kinds of native resources necessary to deliver a full featured application. The polyfills in the Intel XDK New allow you to take pictures, scan barcodes, access contacts on the device, sign on to OAuth apps like Facebook, play media and access the device’s accelerometer. In this article, we’ll take a look at accessing the device’s camera and accelerometer as well as how to turbocharge your graphics with the accelerated canvas.

Camera and File Upload

One of the most common pieces of native hardware access necessary for a mobile app is access to the device’s camera. For example, if you wanted to add the ability for your app to take a picture of the user to use for their avatar, you would need a way of accessing the device’s camera.

The W3C standard APIs for web RTC (Real-Time Communications) that would provide native camera access are still evolving and even once fully evolved might still prove impractical on a mobile device’s interface compared to launching the device’s native camera app. The AppMobi “TakePicture” API launches a device’s native camera app and allows the user to take a picture. Once the picture has been taken, your app will come back into the foreground and can return a URL (file://path/on/device.jpg format) for accessing the image file.

Once your app has a reference to the file on the local disk, you can pass it to an IMG tag to display it or you can use another polyfill to upload the file to a web server. Although there are standard JavaScript APIs to do file uploads across the internet, it might not work if you use one of the APIs that provides progress reporting. The AppMobi “uploadToServer” API takes care of the compatibility layer to upload the file and report progress back to your application.

function CapturePhoto() {

document.addEventListener("appMobi.camera.picture.add",PicDone);  

AppMobi.camera.takePicture(70,//Quality between 0 and 100

false,//Save to device’s library

"jpg");//jpg or png

}

function PicDone (e) {

if (e.success)

{

var urlToPic = AppMobi.camera.getPictureURL(evt.filename);

            AppMobi.file.uploadToServer(urlToPic,

"http://www.yourserver.com/uploadImage.php", //url

"", //folder

"image/jpeg",//mime type

"ProgressUpdated");//callback

}

}

function ProgressUpdated(bytesSent,totalBytes)

{

      var progress = 0;

if(totalBytes>0)

{ progress =(bytesSent/totalBytes)*100; }

$('#ProgressDisplay').html(progress +"%");

}

Working with the Accelerometer

The accelerometer on mobile devices measures how the device is moved in 3D space. This can be used to add an additional layer of interaction for your users beyond just pressing on the screen. You can use the accelerometer to allow the user to scroll by tilting the device or clear the screen like an etch-a-sketch by shaking it. Many games use the accelerometer to turn the whole device into steering wheel to fly through imaginative worlds.

To take the hybrid app approach to access the accelerometer using the polyfill in the Intel XDK New, register an event handler with AppMobi.accelerometer.watchAcceleration. Your function will be passed an object containing the device’s X, Y, and Z position. When you register your event, you will also need to define how frequently you want your function called to measure the accelerometer. If you set it too infrequently it will feel unresponsive, if you set it too frequently it will take up too much CPU time.

The code example below registers a handler for the accelerometer to report the device’s position 24 times per second. Feature films run at 24 frames per-second and most casual games work well at this frame-rate.

AppMobi.accelerometer.watchAcceleration(function(acl) {

$('#ACLStatus').html('x: '+ acl.x

+'y: '+ acl.y

+'z: '+ acl.z);
}, { frequency: 24 });//Report 24x per second

Note: To test out your app before loading it on a real device, the Intel XDK New includes the built-in capability to simulate device movement by either entering numeric values for tilt or dragging a 3D version of the phone around.

Accelerated Canvas

The HTML5 canvas element provides a drawing surface for you to be able to draw anything you want on-screen. For most purposes, the normal canvas tag provides the capabilities you need with adequate performance but if you are developing games you need a higher performance solution. This is where the accelerated canvas comes in.

The normal canvas element runs inside of the browser where every pixel must be evaluated to see if there is something above it, below it, if someone is clicking it, etc. All of this capability comes with overhead. With the accelerated canvas, you lose this functionality in exchange for up to ten times faster drawing performance. The net effect is you can create rich graphics games, cross platform, with near native performance.

To use the accelerated canvas in the Intel XDK New, you don’t create an HTML page with a canvas tag on it. Create your app with a single html page with no content in the BODY tag. Then call “AppMobi.canvas.load('YourCanvasScript.js')”. This will initialize the accelerated canvas in full screen mode. The script file you pass the load function to will run inside of the accelerated canvas.

This designation of “inside of accelerated canvas” and “outside of accelerated canvas” code is important because the code that is running inside of the accelerated canvas can’t communicate with the regular HTML page directly. To call a function on your canvas from your HTML page, execute “AppMobi.canvas.execute('YourCanvasFunction()')”. To call a function on your HTML page from the canvas side, execute, “AppMobi.webview.execute('YourPageFunction()')”. The canvas itself doesn’t have the ability to have elements on it that can receive events so the communications between the HTML and accelerated canvas layers is critical.

From an API standpoint, the only other major differences between the API used for a normal canvas and the accelerated canvas is how you get the context and the necessity to call “present()” when you are done drawing the frame. On a typical HTML5 canvas element, as you call each drawLine and fillRect, the canvas is updated when you make the API call. The accelerated canvas gains efficiency by drawing off-screen then painting the entire frame to the user interface when you call “present()”.

The example below creates a context reference to the accelerated canvas, draws a red rectangle then calls present to paint the canvas to the screen.

var context = AppMobi.canvas.getContext("2d");

context.fillStyle = "red";

context.fillRect(0,0,100,100);

context.present();

For more information on how to get started with the accelerated canvas, check out the Game Interface Implementation guide on Intel’s web site.

Conclusion

Cross-device HTML5 development allows you to write your code once and run it everywhere from the internet to the latest and greatest mobile devices. Careful use of polyfills like the ones in the Intel XDK New allow you to make a hybrid app and access everything your app needs to be able to do in between what HTML can do out-of-the-box and native capabilities.

This article was reprinted from htmlgoodies.