Responsive webpage - things you need to do and check. Mobile/Desktop/Wordpress
FEDojo steps which you should check on your RWD website before you go live.
1. Firstly you should prepare your HTML properly:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
2. Hover animation in CSS - its rather getting user nervous, so try to avoid them.
3. Hovers in JS - its creating one more step to get content
4. Elements with fixed position - they are loosing them position when you click on any input.
5. Retina ready - prepare your graphics with bigger size to display them properly on iPads, iPhones, new generations of Mac’s
6. Click elements should have proper size
1. Use modernizer to check some if some functions are possible to use (video, audio, touch etc)
2. Use one size of grid for IE<=8 - remember that there is no media queries possible to use
3. Background-size property in CSS is not possible to use :)
4. Use CanIUse.com to check your possibilities in browsers
5. Console.log is not supported!
1. Use ySlow plugin to optimize your webpage
1. Use mobile detection to minimize number of requests and transfer ( wp_is_mobile() )
2. Use minifying plugins ( WP Minify )
3. Use retina plugins ( https://wordpress.org/plugins/wp-retina-2x/ )
Feel free to update this list in comments!