Listen to this talk! https://www.youtube.com/watch?v=JIRXVGVPzn8
Tips and tricks for creating Electron apps that look beautiful and work the way users expect.
5. Window Frame
Remove the standard frame by passing BrowserWindow the
{frame: false} option.
Add custom window controls to the document body.
<div name="ToolbarWindowControls" class="toolbar-window-controls">
<button class="close" onClick="require('remote').getCurrentWindow().close()"></button>
<button class="minimize" onClick="require('remote').getCurrentWindow().minimize()"></button>
<button class="maximize" onClick="require('remote').getCurrentWindow().maximize()"></button>
</div>
6. Draggable Toolbars
-webkit-app-region allows you to specify that all or
part of the DOM is the window drag handle.
Caveats:
• The visibility and z-index of drag
regions does not matter.
• Your app does not receive any click
events inside drag regions.
.toolbar {
-webkit-app-region: drag;
.toolbar-window-controls {
-webkit-app-region: no-drag;
}
}
8. Add a platform class to the document body, and use it to
change the appearance of toolbars and buttons.
Really intense: Read Mac OS X defaults to detect appropriate
gumdrop colors and styles.
Platform-specific Style
document.body.classList.add(“platform" + process.platform)
defaults read -g AppleAquaColorVariant
defaults read -g AppleInterfaceStyle
10. Focus
Attach an additional blurred CSS class to <body> when
the window is blurred, adjust styling of:
• Window frame
• Selected items
• Buttons
Caveats:
• Listen to BrowserWindow blur/
focus, not window blur/focus, which
triggers when you focus iFrames.
11. Focus
Main Process
Renderer Process
@browserWindow.on ’focus’, =>
@browserWindow.webContents.send(‘browser-window-focus’)
@browserWindow.on ’blur’, =>
@browserWindow.webContents.send(‘browser-window-blur’)
ipc.on ’browser-window-focus’, =>
document.body.classList.remove(‘blurred’)
ipc.on ’browser-window-blur’, =>
document.body.classList.add(‘blurred’)
12. First Mouse
• Use accept-first-mouse: true
• On Windows, you can click window contents from the
background.
• On Mac OS X, you can click toolbar items and window controls
from the background. (Use pointer-events:none to disable
background interaction with everything else.)
13. Cursor Considerations for Mac OS X
• Stick to standard cursors. Use the hand
cursor sparingly. On the Mac, it is typically
only seen in web views.
• Hover states are only used to reveal
additional hidden options (like an X on a
tab). Buttons, tabs, links, etc. have no hover
states.
14. Images
• Apply -webkit-user-drag: none to all images and
-webkit-user-drag: text to everything else.
• Support Retina displays! Choose images based on
window.devicePixelRatio
• Scale images by manually declaring their width and height,
or specifying CSS zoom:0.5 when on a retina display.
15. Sound
• Use with care! Unlike mobile apps, desktop software rarely makes
noise. There are no audible clicks, pops, bounces.
• Sound should accompany actions when impact may not be obvious.
playSound: (filename) ->
a = new Audio()
a.src = path.join(resourcePath, ‘static’, ‘sounds’, filename)
a.autoplay = true
a.play()
16. Retina Borders
• Chrome CSS borders must be 1pt - on Retina displays, they
render as two pixels. But you /can/ make half-point box
shadows.
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px
0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15),
-0.5px 0 0 rgba(0,0,0,0.15), 0 1px 1px rgba(0,
0, 0, 0.15);
20. Change Expectations
• Avoids the uncanny valley by using
interface elements that communicate
platform standards do not apply.
• Users don’t expect Spotify to behave
like Windows or Mac OS X