Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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!

share|improve this question
add comment

2 Answers

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.

share|improve this answer
    
Thanks @joesk. I think I'll get both the books, they seem very good. –  Phil Feb 13 '13 at 16:39
add comment

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.

share|improve this answer
    
Thank you very much @DonDay! Excellent suggestions. –  Phil Feb 13 '13 at 16:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.