Cory Rylan

My name is . Google Developer Expert, speaker, and Software Developer at VMware Clarity Design System.

Follow @coryrylan

Thoughts On Large Mobile First Responsive Project

Cory Rylan

- 1 minute

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.
  • 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.

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts


Converting CSS Pixels to Rems

Learn how to convert CSS pixel values to rem to provide scalable typography features and improve accessibility with page zoom.

Read Article
Web Components

Simple CSS Custom Property APIs with Web Components

Learn how CSS Shorthand Properties and CSS Custom Properties can simplify Web Component theming APIs.

Read Article

CSS Tips Vertical Line Rule

Learn how to use CSS and Flexbox to make vertical line rules.

Read Article