How to implement responsive web design and its best practices
I have a website which uses pixel to render the pages. But when i view the website in different devices having different screen resolution the whole page will not fit into screen and if i use percentage, the page content will get squeezed.
Is the responsive web design is the right choice to design the web page. If so, I have got few concerns.
- What is the risk involved in converting existing web site to incorporate responsive design.
- Is there any framework available to do this and which is the best one
- How it is supported across devices and browsers
Answer
Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.
Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.
As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.
As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.
Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.
For browser support info on responsive design, check this link.