Designing an engaging and complex responsive layout is challenging, especially without using modern CSS properties and techniques to implement these designs.
Problem: Bloated CSS will significantly degrade the performance and overall quality of your website
Back then, we needed to rely on external libraries, Javascript or heavy frameworks to implement complex layouts, which impacted performance because of 'bloated' CSS files and unapropriate CSS properties to style components and pages.
Solution: Build layouts with modern CSS
CSS has grown up, and over the last few years, new CSS properties have emerged, allowing us to implement complex, flexible and cutting-edge layouts with less CSS.
The idea is to combine existing CSS with CSS layouts rules (e.g. flexbox, CSS Grids, Container-Queries, and multi-columns...) to save time in implementing engaging and performant layouts.
If you have a website that still uses old-CSS properties to build your layouts, consider using modern CSS to simplify your stylesheet and gain performance.
Checklist
Tips for optimising and writing CSS
- Did we use CSS Custom Properties to control foundation styles? Spacing, color,
- Did we setup a Variable font?
- Did we use a typographic scale?
- Did we use Flexbox, CSS Grids and Multi-columns to build our layouts?
- Did we organise properly our CSS files and rules?
- Did you we minimise the number of overrides ?
- Did we use modern selectors to style HTML elements?
- Did we optimise the ratio of our images?
- Did we enhance styles for keyboard navigation?
- Did we refactor and minimize CSS before going live?
- Did we create a specific CSS for print?
Takeaways
- Use variables to control colors, spacing and typography
- Use variable font to use specific weight and styles
- Do we have a good rythm and visual hierarchy on our pages?
- Use Utopia to generate a type and spacing scale
- Apply the correct aspect-ratio on your images/media
- Use the CSS Layout to build your pages
- Creare a specific CSS file if you need to optimize your CSS for print
Ressource
Links for further reading:
- Fluid Typography
- Learn CSS
- Implementing Variable Fonts
- Modern new CSS selectors
- Modern layouts with CSS
- Browser’s Mentor, Not Micromanager
- Create a responsive grid layout
- CSS Grid
- CSS Multi-Column Layout
- Layout love: 3+4 Compound Grids
- Container queries
- SmolCSS: Modern CSS layouts and components
- A Guide To The State Of Print Stylesheets In 2018
Don't Start With Visuals
By Jerome Kalumbu
A creative approach with UX design tips to help you design effective and engaging websites.