Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
CSS

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.

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.
Twitter Facebook LinkedIn Email
 

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

Related Posts

CSS

Dynamic Contrast Layers with CSS Style Queries

Learn how to create contrasting layers with CSS style queries ensuring your UI is always the right contrast ratio.

Read Article
Web Components

CSS Container Queries in Web Components

Learn how to use CSS Container Queries in Web Components to create reusable and responsive UI.

Read Article
CSS

CSS Interaction Theming with Accent Color and Color Contrast

Learn how to leverage new and proposed CSS features to make various interaction theming easy and accessible across a variety of UI components.

Read Article