Recommended design/development approach : Responsive HTML

When designing your templates and writing HTML, it is recommended that you consider how they will work on a variety of devices. HTML is responsive by default, it is only when styles are applied that you run in to difficultly with layouts. Therefore, if you were to apply no styles to your mark up it will respond nicely whichever device you were to view it on. Obviously that is not realistic, but it is worth bearing in mind when you approach your project, and to continually try to use as few styles as possible. 

Mobile First

Whether or not your project is rolling out to multiple devices from day one, it is strongly advised that you design and write your mark-up 'Mobile First'.

This means defining the most basic, linear version of your template, and then building up the design and complexity as you gain more screen real-estate on bigger devices. This means your content will be as semantic as possible, and should mean that your styles are only additive - you are not overriding existing styles to create more simple layouts.

Simple layouts

Creating templates that allow content to flow down the page means that the layout will not break, whatever the amount of content, or the width of the device. These types of template are therefore more stable and, from a development point of view, more simple to create.

Complex layouts

By adding different sub-elements to simple scrolling templates, you can create quite complex layouts, and allow more variety within the templates. This allows you to handle a wider variety of content in your app.

Other complex layouts can include columns. Using CSS3 columns (which are not particularly advanced in their capability) is currently the only really viable method. There are features in the pipeline that will make these layouts easier, eg Regions, but they're a while away from being usable.