These are just some of my thoughts after working on a large mobile first responsive design project. These are some key points or highlights that I feel were most important in the project construction.
- Ensure a designer or dev with design experience designs features not devs or clients to prevent poor typography and missing design fundamentals
- Include front end engineers with the design aspects to be an advocate for performance but able to contribute to the design
- Wire frame the html and css mobile first then upwards defining your breakpoints
- Build all html and css then pass on to backend dev team to hook up to sever, allows clean markup and eliminated repetitive styles
- Have style guide created with html and css before project begins.
- Do not allow client to make last minute design changes, causes rendering bugs to be introduced unexpectedly
- Use SASS, helps keep your code DRY
- Only 1 to 2 people on Styles ( CSS, SASS, LESS) ( issues will duplicate styles and poor render performance ) or Module out your application between designers
- Design mobile first and performance first
- Have a Performance Advocate
- Set performance rules and guidelines and follow thoroughly
- Set support guidelines such as minimum browser requirements for your application
- Be very cautious of browser sniffing as it add code complexity and can bite you later ( Bad sniff ). Feature detection is always better.
- Ensure that your server side framework compliments your front end code and does not work against it. If so then change it.
- Use progressive enhancement to build site resilience to failure such as lack of features or graceful degradation.