Do I need a brand new template for mobile web-app?

Question

I've a web-application currently serving only desktop clients. I will be creating a mobile-friendly version of the application.

I am wondering:

• Do I need to create the design from scratch and use something like mobile-boilerplate to design the mobile version from scratch?

Or:

• Can I just insert the additional tag and modify current html5 block level elements using @media screen and (max-device-width: 480px) {}?

I am rather experienced when it comes to HTML5 & CSS3 (+JS) desktop UI-UX design but so far, I've never done anything for mobile browsers and I feel very confused.

Which option is the correct way to go?

Also, if you have any articles and suggestions regarding the subject, I'd be very happy to read them.

Thank you very much!

Answer 1

You do not need to create a new template from scratch but you will need to update your existing template so that it can be made "responsive". Responsive is the keyword you want to look up here. Basically it will allow you to use the one template but have it render differently depending upon the width of the users screen. This can be small modifications such as showing/hiding a sidebar or very extensive modifications to the layout and elements using more advanced Javascript techniques.

Check out Luke Wrobelski's article, tutorials on Lynda or (I highly recommend) the book from A List Apart on the subject amongst others.

Answer 2

For a recent and imminently useful article on CSS-based responsive techniques, see Build a basic responsive site with CSS. This implementation is nice because it does not depend on an underlying grid system for column control, which means that widgets in your existing template might lay out more naturally (as opposed to grouping them in sets for placement into grid columns). For more depth on the techniques and considerations that you can apply to your own designs, see Implementing Responsive Design by Tim Kadlec.