What are some inherent constraints of CSS for designers? #12

sebdeckers · 2015-09-03T16:28:14Z

While CSS offers immense flexibility, it is valuable for designers to understand CSS' natural strengths and weaknesses as a medium.

Following non-rectangular shapes. Unlike SVG, there is no support for arbitrary paths in CSS, let alone running text along them. At best there are the upcoming CSS Shapes and CSS Exclusions specifications, though they are seldom used. Read more: http://alistapart.com/article/css-shapes-101
Blending modes like Photoshop layers. There is mostly basic opacity stacking. Fortunately the Compositing and Blending specification has increasingly broad browser support.
The key to a good frontend design is consistency. Think about the many types of design elements across all pages of the app. Reduce them to a reusable set of rules that can be composed together. Avoid many one-off design variations. Less complexity = less problems = better design.
Performance budget: Carefully consider the performance envelope of low-end clients like last gen mobile devices or older computers/browsers. Or even users who are running multiple apps/tabs. Keep track of the framerates of animations and transitions and make sure they don't drop below 60 fps in the Performance section of DevTools. Be frugal with computationally expensive effects like box-shadow, border-image, or background-position: fixed. Watch the GPU memory consumption when using hardware accelerated animations and transitions with the transform or opacity properties.

The text was updated successfully, but these errors were encountered:

Provide feedback