My responsive design experiences
Responsive design is the answer for static website or content to work across devices and browsers with consistent look and feel. Below are what i learnt from developing a web application with responsive design. Hopefully it will be helpful for someone just begin sail into responsive design web application.
- Categories devices and browsers for functions support. Responsive design is about how it look but not how it work. Don’t aspect your application work consistently across device. e.g. https://medium.com/@Medium/supported-browsers-9a8deb994c0
- If you going to use some of the latest HTML5 features, you should consider lib like Modernizr. Always detect the features supported before use.
- User agent could be helpful, detect the devices and browsers and possibly to have an identifier for that e.g to have a CSS class name .desktop-chrome or .android-chrome added to body.
- CSS animation and transition is nice, however you must use it sparingly in tablet and mobile, especially android. At this stage, if possible don’t use for android platform.
- Pagination or infinite scroll? I would suggest to go for passive on demand loading of records in stead of infinite scroll. Because infinite scroll going to create a lot of trouble for you in tablet and mobile. e.g. http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
- Remember fixed header is not well supported in mobile devices.
- If you using overflow:scroll for content scrolling, check for IOS issue. e.g. http://stackoverflow.com/questions/24889100/ios-8-removed-minimal-ui-viewport-property-are-there-other-soft-fullscreen
- http://caniuse.com/ is a pretty awesome website for you to check cross browsers supports.
- Icon speak louder than words sometimes, but at least it can save you space in small screen. Image sprite for icons was so yesterday, try to use svg or web fonts if possible.
- BrowserStack or device mode in Chrome is good, but not good enough, always test your site in ACTUAL device.
Android stock browser is terrible. IE is getting better and as always Chrome is the best at this stage.
