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.

Design

  • 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

Styles

  • 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

Implementation

  • 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.
  • Have no Javascript fall-backs for at least key features. Not just for no js users but for network resilience such as js failed to load because of weak mobile network.

Web Component Essentials

Build reusable UI components with my new Course & E-Book!

Start now!