Styles of Style

How can a code editor be useful for new learners and seasoned students of the craft? How can an editor adapt to optimize for both mobile screens and desktops? Do the answers to the first question overlap with the second?

New learners <-- --> Seasoned Students
Mobile Makers <-- --> Creators on Laptops

I’m working on the design of an editor with the team at Webmaker. It will be a web-based editor for making pages and apps for the web. This tool must be useful for people learning to make web things for the first time to fit Webmaker’s mission. Ideally, it will remain useful for people with more experience as well.

style-editor-switchYesterday, I was thinking about CSS and how different people might like to apply style to their creations. I drafted a few mockups to illustrate some ideas on how to cut across the use cases.

Style Themes <-- --> Handcrafted CSS

On one end of the spectrum, CSS themes are quick and easy. On the other end, freely written CSS is very powerful. Does this align with beginners and experts? Not exactly.

Wizard

style-editor-wizard A beginner focused on learning html might want to utilize themes to apply style to their page. An advanced student of Javascript might also prefer to set an attractive theme rather than wrestle with style. Mobile makers of all types could also benefit from the simplicity of themes when they have no keyboard. An editor with style themes would be useful to many users.

Coder

style-editor-coder An editor that helps people write their own CSS would also be essential, and not just to people interested in learning CSS. Unique, artistic creations often require custom styles. CSS often helps to build elegant Javascript interactions. Lastly, as themes go stale over time, a good CSS editor can help craft new ones.

Builder

style-editor-builder Thinking about the different use cases above led me to a third approach in between the other two. It could be very useful for mobile makers at all skill levels.

This tool would surface all the elements, classes, and ids used on page. A user would tap one of them and then tap an attribute on the right to modify. The form below would give them quick access to set the values. Typing is minimized, but flexibility is not.

An editor that can adapt to the skill, screen, and preferences of the user could be a very interesting tool for makers.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.