AddToAny Blog

The best icons and larger buttons come to your share menus

January 27th, 2015

Last August we announced a modern new design for AddToAny share menus, and this year begins with an exciting update to that design.

Vector icons

AddToAny has been bullish on highly optimized scalable vector icons, and we have extended the vector treatment to all AddToAny services, including the universal share menu and the universal subscribe menu. (Note: The following are zoomed-in screenshots, so try your nearest AddToAny button to see the real vector menus.) The universal share menu with SVG iconsSixteen square pixels of raster blurriness: be gone! AddToAny SVG icons look great at any scale on any screen, and they are spectacularly crisp on high-PPI devices such as Retina and Retina HD displays. Zoom all the way in if you’d like. Almost magically, AddToAny vector icons are super-lightweight, even faster loading, and gracefully switch to raster equivalents for older browsers (such as Internet Explorer 6-8 and Android < 4.4).

The new icons compliment a new modern font face and an increased font size. AddToAny now uses the best-available and fastest-loading system font starting with Helvetica Neue Light. So with larger icons and larger fonts, that leads us to…

Larger tap areas

Poking around a mobile touch interface can be difficult at times, so we made tappable targets even larger for menu buttons. A larger tap area is a relief on mobile touchscreens, yet still appropriate for desktop pointing devices like mice, trackpads, and the rare pointing stick.

Simpler menus

Multiple share buttons presented an opportunity to actually reduce the number of default options to a helpful degree. Larger icons, larger fonts, and less options improve glanceability, and we fully expect that to result in increased sharing activity.

Universal modal share menu with SVG share icons

With AddToAny, you’re always welcome to customize the share menu for your needs. Let us know if you have feedback on this universal menu update.

Flipboard button update

November 6th, 2014

This week we updated Flipboard across the AddToAny platform. Flipboard updated their sharing endpoint, AddToAny detected it, and the new endpoint was instantly rolled out to all AddToAny users. In classic AddToAny form, you don’t have to update your AddToAny plugins or code, but perhaps you’ll want to make Flipboard sharing more prominent on your site.

What is Flipboard?

Flipboard

Flipboard is a platform for readers to discover, collect and share new content. Millions of people use the Flipboard app for a beautiful reading experience, and the latest generation of Flipboard offers stories from over 34,000 topics to follow.

AddToAny always looks to provide the best possible integrations for major & nascent platforms. As with Twitter sharing templates, the official Pin It interface, and WhatsApp sharing on mobile, we’re keeping an eye on Flipboard for new opportunities for publishers and developers.

Below you can try out sharing to Flipboard’s web app, and you can add Flipboard to your site as a standalone button.


The new universal sharing menu design

August 14th, 2014

Next week, AddToAny is rolling out a brand new design for the universal sharing menu. As a matter of fact, one menu leads to another in the new design:

Menu 1 — The new “mini” menu of services in a classic drop-down

Service links are larger, legibly labeled, and closer in proximity to the universal share button. Email is a default service instead of a tab. The More button is more pronounced and serves to launch a brand new modal menu featuring all services.

New sharing menu drop-down design

Menu 2 — The new “full” menu of services in a modal dialog

This menu makes better use of space and is fully responsive for displays small & large across mobile, desktops, tablets and hybrid devices. Email services from the former design’s email tab are here, too, and finding multiple services is faster and friendlier on mobile & tablets.

New sharing menu modal design

The new AddToAny design modernizes the end-user experience by increasing usability and removing complexity. We bid farewell to tabs, thick borders, and superfluous text in favor of subtle refinements that include large touch targets, intuitive cues, native smooth scrolling, instant button responses, and a whole lot more that just works.

All web browsers are supported in this update, even Internet Explorer 6, which is decades old but surprisingly not difficult to accommodate. This continues AddToAny’s long tradition of efficiently supporting the widest array of browsers, devices, and configurations.

Backwards compatibility is another key feature of the new design. Configurations applied to previous AddToAny menus are aptly applied to menus of the new design. Typical customizations do not require publisher-side changes; custom menu colors and most CSS overrides port over perfectly.

The new design rolls out to sites starting next week, and we’re excited about the follow-on releases that build upon and enhance the new design.

While we’re working on the next release, please get in touch if you have any feedback at all. Enjoy!


Developers & Designers

Developers and designers should take note of a few changes that may affect deeper modifications to previous AddToAny menu versions:

  • Service links no longer have an HTML ID. Instead of hiding services using CSS, you can now exclude specific services with a single line of JavaScript.
  • Menu and service link widths have changed, and dimensional overrides (height & width) should be avoided generally. Such overrides to the old design may impact how the new menus display.
  • Custom margins are generally not recommended due to box-sizing calculations, so we recommend applying padding, if necessary, instead of margins.
  • Custom border sizes are generally not recommended due to box-sizing calculations. We recommend applying box-shadow to increase the visual size of a border, and we recommend matching the background color to hide a border altogether.

Taking the above notes and AddToAny guides into consideration, feel free to inspect and target A2A class names and IDs to override all sorts of other styling declarations. As always, let us know if you have any feedback.

Update: It’s live!