I’ll start this thread off.

Goals

1. Improve and clarify the web calculator.
   1. Live updating of scales based on input.
   2. Provide better visualization of the resulting scale.
      1. Modular scale rulers
      2. Type specimen.
2. Explain what modular scales are, how to make them, and how to use them.
   1. Do this through text
   2. Do this through UX
   3. Do this through examples
3. Introduce code based calculation and showcase tools.
   1. Take care that users may be new to preprocessors and other languages.
4. Collect and showcase modular scale articles.

Constraints

1. Advertising
   1. sponsored logo and blurb on home page
   2. sponsored logo and blurb on results page
2. Support existing users and functionality.

• design and create error modal.
• have errors pop up closable modal.
• Identify and create error triggers in code.

On Monday morning:

• Make repo public (Scott)
• Move repo to modularscale org (Scott)
• Transfer DNS (Tim)
• Promote the hell out of this thing (4:00)

Links and things

Steps to replicate

• tap on input
• Start typing into input

Devices effected: iOS, Android, and Windows Phone

• Visually highlight the base value
• Keep the base value in view as values change

Current working URL: http://lab.pgdn.us/

Technologies used (Grunt, Sass, JS) and notable plugins.

I assume we are going to be doing client side (JS) calculation of modular scales for this. I am a fan of Middleman as a static site generator but we may want to use grunt or similar.

Modes:

From what I can see there are are 3 basic modes.

• Web calculator
• Education/resources
• Language based calculators

Web calculator should be our primary mode with fluid paths to the other two modes. A basic overview of what modular scales are can act as a live scaling example. A column in the reference table can link to the tools we use.

Web Calculator 20%

• Settings tray
  • Base size
    • option to add more
    • multiple unit options
  • Ratio
    • option to add more
    • Customizable values with drop-down of common ratios
  • Function reference
    • Sass/JavaScript/Stylus + links
  • Advertisement
• Intro copy
  • Basic description of what a modular scale is and why you might want to use them
  • link to education/resources
• Results table
  • Column with the units specified
  • Column for ems
  • Ems @ 16 (DO WE NEED THIS?)
  • % of 13 (DO WE NEED THIS?)
  • Function reference (falls back to scale #)
  • Toggle text preview
  • Advertisement

Education/resources

• Detailed description of modular scales including history.
• Detailed how to use modular scales. Illustrate use with different units and applications.
• Promote recent articles that talk about modular scales.

Language based calculators

• Promote calculators written in various languages
• Basic documentation
• These are official or semi-official, not just a list. This should be comprehensive and authoritative.

Currently on initial load sizes are calculated via JS. Once we settle on defaults these should be hard-coded into the page to make the site feel faster.

At small sizes the current ruler visualization is inaccurate because it is coupled to the font-size visualization (because of my browser’s/OS’s font-size minimum, I guess). We should decouple it from the font size visualization.

We should denote scale strands with shapes (square, triangle, circle, star?) or letters (A, B, C, D) in addition to colors, case folks with color blindness have trouble distinguishing the color differences. These symbols should appear everywhere the strand-specific colors do.

Hey Scott, I had a few minutes this morning and pulled the latest version of this repo. It seems like you've made some good progress. Where are your latest plans for visuals? Maybe I could offer feedback on that.

Also, how do you like to preview the site locally? I've used MAMP before, and for Typekit Practice we set up a build command that invokes grunt-contrib-connect for a local server....

• denote what values come from what scale by color or something
• design and build a ruler that illustrates different scales.

This is now a static site! This means we don’t need to do any server-side computing and can host on cheap and fast hosting like s3 if we want to. Anyway, we don’t have to worry much about getting hit hard because the server won’t be doing much.

• Set up the server (bitballoon)
• Set up a deploy process (drag and drop into their interface)
• Make sure the site is getting pushed up to a CDN (yup)
• make sure gzip is working (yup, 10kb down)
• make sure cache is working (yup)
• point DNS to the right place

Let people swipe between panels.

https://twitter.com/itsluke/status/567387327992197120

Legacy links without www return incorrect results

http://modularscale.com/scale/?px1=17&px2=280&ra1=1.333&ra2=0 is incorrect
http://www.modularscale.com/scale/?px1=17&px2=280&ra1=1.333&ra2=0 is correct

base values like .5 don’t work while 0.5 works. Make both work.

Maybe we can move this to the about panel and link to the external page from there? http://nicewebtype.com/notes/2012/07/19/leave-default-font-size-alone-and-embrace-the-em/

If we plan to use a BSD license ... the work is still copyrighted, right?

iOS, Android and maybe Windows universal apps.

Create simple web views for

• iOS
• Android
• Windows (universal)
• Firefox OS

Do we want to change for the app?

• yes
• no

• select between web, Sass, and JS support
• dynamically build settings as input changes
• build documentation and provide links to basic install paths.

I started a branch to explore subtle adjustments to wording, typography, and color, to see if we can introduce this design's new concepts while staying true to the familiar branding at modularscale.com: https://github.com/scottkellum/modularscale/tree/tb-branding

Scope is currently limited to the form and about panes (though I haven't paid attention to about pane typography yet).

• Masthead uses title case Freight Text instead of uppercase Freight Sans, which is a nice evolution from the current Athelas.
• Masthead in white so color in form fields draws more attention.
• All sans-serif text now uses Bernino, which is more legible than Freight Sans at small sizes and – similar to the masthead type shift – a small step away from modularscale.com's current use of JAF Facit. Bernino looks great with Freight Text, too.
• Type size and vertical spacing adjustments.
• A bit more horizontal padding in the ad area.
• Made the credit/copyright sentences into one paragraph, added some words, and put Scott's name first.

Next step is to explore subtle color changes to see if they yield anything desirable. In a quick test that I discarded, desaturating the form background nicely emphasized the type scale in the output pane.

Steps to replicate:

• Visit the site on windows phone
• go to output or about
• Try to go back to calculator panel (you can’t)

Need a header with some sort of branding or indication of what the site is.

need one

Use the arrow keys + other input to change base values.

This would be an output panel mode that illustrates scales and ratios with boxes instead of type.

Remove text for a simple table of MS values.

… for now

I like sponsorships but maybe we can talk with The Deck about possibly working with them: http://decknetwork.net/

Maybe we can have a premium offer we can sell and use The Deck when we haven’t sold a sponsorship.

Help cookie isn’t always working. Target help setting in the cookie string better.

• Dynamic add/remove form elements.
• Make unit field a dropdown. (I merged the input field into the base)
• Properly send multi-base and multi-ratio information to the calculator.

• Overview
• How to use
• Bases
• Ratios
• Plugins
• Links and resources

I’m up for open sourcing this code base. BSD licence seems like the way to go as it protects us as creators from malicious knockoffs but allows re-use. It’s what we use at Vox Media for our open source products.

• Give pages the peek effect.
• Apply pager for small screens.
• Paging on medium screens
• Apply swipe effect for small screens. Going to leave this for later

• Add markup for tooltips on different inputs to help guide people through.
• Create cookie to allow users to disable this feature.