Recommendations for styling fronts efficiently

Owned by Antonio Elena (Unlicensed)
Last updated: Oct 13, 2021 by Fabian Frei
2 min read

 

Recommendations on how to approach the process of setting up the visual style of a Front. Follow these to streamline styling a front for a client or your own store.

 

  1. Insist on a written briefing from the client on what typography settings, colours et.c they want to use. No written briefing usually increases the number of feedback rounds.

  2. Prepare a page with a collection of all modules the client is going to use. This will let them review all of them at once and provide you a consistent feedback.

  3. This feedback will be even more relevant if they actually use the CSS to set up some pages themselves in the Editor and see how the style works with the content they have in mind.

  4. Don't hardcode settings that can be changed with the Editor UI. This would otherwise make users frustrated, as changing settings won't influence module appearance.

  5. Use font formats and colour names when setting up modules. If you use font-size in px or em or enter colours directly as hex numbers, it will cost you more work to update them in several places later. A client might want to completely redesign their website in the future or a “small change” site-wide.

  6. Some modules might be rarely used, so you can always set their custom CSS later.

  7. If a client needs several variants of a module and cannot achieve a look their need with the Editor UI, you will need to create module presets for them. This effort only makes sense if presets will be reused.

  8. Remember that each module type can be drag & dropped everywhere and displayed 1-3 per row. Therefore, the CSS styling should be as universal as possible, as they will appear in many situations.

  9. Whole pages with multiple modules arranged in a specific order can be used as page templates. Editor users can create copies of such pages and update content (text, images, products) on each instance. This will reduce work needed for drag&dropping several modules on a page and then updating their settings.

  10. If you want to test something and are afraid of breaking your layout, create a copy of a module/page and modify CSS in Editor JSON directly, which will only influence this page/module. You can send such copies for client's approval - they can be published but not linked to from anywhere, hence won’t be indexed by search engines.