Category: Browsers

Mosaic rules!

Safari Responsive Design Mode Polish

Here's the UI as seen in Safari Technical Preview 41, released October 4, 2017.

Safari Technical Preview 41 Responsive Design Mode

Revised Responsive Design Mode

Revised Safari Responsive Design Mode
Safari Responsive Design Mode - device icon hover showing rotate icon
  • Add a bandwidth throttling menu:
    1. Default Network
    2. High-Speed Cellular
    3. Low-Speed Cellular
    4. Offline
  • Improve the contrast of the selected viewport setting in a style consistent with the Web Inspector
  • Show a rotate icon when hovering on a device icon
  • Align label baselines
  • Add a screen mode menu for iPads that would allow selection from:
    1. Full Screen
    2. Primary
    3. Secondary
    4. Split View

    This provides an explicit UI for using the iPad multi-tasking modes and would allow users to switch between portrait and landscape orientations of different iPad models while staying in a multi-tasking view. In STP 41, you can skip cycling through the iPad multi-tasking modes by Option-clicking the iPad icon.

The SMC

As James Risen and Nick Wingfield reported yesterday in the New York Times, the interests of tech companies and the NSA have been converging over the past decade in two ways. The first way is fairly prosaic: Lots of Silicon Valley companies are in the business of selling stuff to the NSA: storage hardware, sophisticated communications equipment, data analytics software, and more. But while this may have increased recently, it’s not fundamentally new. It’s just the latest high-tech twist on the good old military-industrial complex.

— Kevin Drum: The Surveillance-Marketing Complex, Coming Soon to a Computer Near You

Before you visit that or any other site, you might want to install Ghostery to block all the tracking beacons.

Emprovement

If you are responsible for text marked up in HTML, please learn about character entities. Of late, I’ve noticed prominent companies sloppily using two hyphens where they should be using an em dash, which is —. This is particularly irritating when the text comes from a company that purports to know about design.

A Google page about the Nexus 7:

Double hyphens on Google's Nexus 7 product info page

A Fast Company story:

A Fast Company story using double hyphens

An Atlantic post discussing future mobile technology. The Atlantic is not a design publication, but surely they have people on staff who care about typography:

An Atlantic blog post using double hyphens

If you really want to get fancy, the double hyphens can be replaced with an em dash with thin spaces ( ) on either side. The difference between a standard space and thin space is subtle, but it is noticeable in Safari, Firefox, and Opera.

Like many things in typography, there is variation in the use of dashes, but no respectable typographer thinks two hyphens are the way to go. I should figure out how to insert thin spaces around em dashes in my existing posts…

Another common web typography problem is quotation marks. Setting up a regex to enclose quotes properly using “ and ” might be trickier, but it should also be done.

Apple gets these details right. See the press releases for the latest announcements.

NDP Software’s &what; is a nice search-based entity reference lookup.

0p3n_s3sam3

I use the Password Assistant in Keychain Access (/Applications/Utilities) to generate passwords for new accounts. The Assistant is pretty handy, but currently not integrated with any browsers, meaning I have to open Keychain Access, create a new Password Item (File > New Password Item), then click on the key to open the Assistant. I might then have to bounce back and forth between my browser and Keychain Access to find a password that complies with the (frequently unexpressed) password rules of the site.

Password Assistant integrated in browser

The Assistant would only appear when two password input fields are detected. What to do when a site doesn’t require confirmation? Maybe check the Keychain for existing accounts at the domain and show the key icon only if none is found?

SearchKilt

The inline searching seen in the 10.5 Help menu could be used in other menus.

History menu searching in OmniWeb

History menu search results in OmniWeb

Providing searching in the Bookmarks menu in browsers and the menu immediately right of the Application (File/Document/Thingamajig) would also make sense. The default search scope would be filetypes the application can open or import.

This type of inline searching would provide the sort of application-specific search focus that I mocked up earlier, but it doesn’t provide an easy way to move a query between applications.

Yes, jazz bagpipes. That cat could burn!

Microformats in Flock

Evolutions of the Konqueror microformats plug-in in the context of the Flock browser.

Contacts (hCards)

  1. The browser indicates the presence of hCard markup on a page using an icon in the status bar. The icon provides access to the pop-up menu:

    Selecting an action from the Contacts pop-up menu

  2. To allow multiple selection without having to repeatedly open the menu, a dialog allows the user to check individual names:

    Selecting contacts from among those available

Contacts Service Preferences

Flock Contacts web service preferences

Online Contacts Services

Calendar (hCalendars)

The event pop-up menu

A dialog similar to Add Contacts would facilitate multiple event selections.

Calendar Service Preferences

Flock Calendar service preferences

Obviously, the Default Calendar setting would only work with services that allow multiple calendars.

Online Calendar Services

The Konqueror plug-in currently works with Kontact, the KDE PIM. Along those lines, it would also be nice if browsers could pass hCards and hCalendars to external applications like Address Book/iCal on OS X, Outlook on Windows, and Evolution in GNOME.