Keep the HTML code clean and simple while avoiding any visual antics with CSS3 or Javascript. Use a semantic core layout with HTML5 doctype and reset stylesheet.
2. Make Your Layout Flexible
Use flexible grids to arrange different element of your website. Flexible layout is the best way to create a website that is ready for all screen sizes and different screen orientations.
3. Focus on the Essentials
Think in a mobile context when designing responsive website and you will come up with website sections that you can remove. Remove these sections or at least hide them behind cascading menus.
4. Arrange Full Website in Single Column
Organize all the elements of your website in one vertical column in your low-resolution style sheet. With few tweaks to the code, you can make it fit for large screen mobile devices.
5. Use the Full Screen Real Estate
Take full advantage of the available screen space by setting view-port meta-tag to device width. This will tell the web browser to use the full screen real estate when rendering websites.
6. Take the Relative Route
Use relative terms when designing a responsive website. You can easily do that by defining a master container and describe all the dimensions in percentage (%). The dimensions in master container can be used to compute other sizes.
7. Define the Boundaries
Most common screen resolutions are categorized into six breakpoints. Focus on these breakpoints. Identify which breakpoint a device belongs to and display the website version accordingly.
8. Maximum and Minimum Size
Use Max and Min to prevent your website behave awkwardly when viewed on very small or very large display. Prevent the website layout to either grow or shrink by setting limits.
9. Adaptive Size for Images
Control how images load on different devices with adaptive sizing. Apply the same break-point concept on images if bandwidth is not an issue.
10. Use Media Queries
Media queries are a powerful tool that let you load style sheet and set of specific style based on user’s width.
See Full Info-graphic here: https://goo.gl/cUuBYJ
