Web Development Blog

10 Do’s and Don’ts for responsive website development

1. Do build with ‘mobile first’ mantra. Add features and components as required for bigger screens, instead of trying to remove features and components for mobile screens.

2. Do use modernizer.

3. Do test on real devices instead of emulators.

4. Do check website performance during development – not after. Google PageSpeed and YSlow are your friends.

5. Do involve technical members and developers during all stages of the project – planning, design, QA and post-launch review.

6. Don't use Javascript for reordering layout. Redrawing and reordering DOM elements is expensive.

7. Don't use a framework unless absolutely necessary. Frameworks have added complexites and code which make it hard to work around and maintain.

8. Don't try make an existing website responsive by adding extra CSS and Javascript. Remove all existing CSS and Javascript and start from a clean slate.

9. Don't overuse CSS animations as they are slow on older Android devices.

10. Don't combine features for 'small screen' and 'touch'. They are not mutually inclusive. Always provide non-touch UI fallbacks for touch elements. For example, some Windows 8 desktop/laptop computers are touch-enabled but they are not small screens.