How AddThis Builds Mobile-Friendly Widgets

When you design a mobile version of your website or create a responsive design that adjusts to different screen sizes, chances are that not all your widgets will work well with your new design. And then you have to go through and restyle them for every screen size in your theme. Unless you have AddThis’ mobile-friendly widgets.

Website design has become more complex than ever with users browsing on iPhones, iPads, Androids, and countless other devices. With as much as 25% of all traffic across our network coming from a mobile device, it’s a trend that’s not going away.

That’s why the team at AddThis has been designing and building mobile-friendly widgets that will help you bridge the gap from desktop to all these mobile devices. Here’s our approach in hopes of seeing more mobile-friendly widgets on the Web.

Adjust to the Screen Size

With limited screen size, it’s really important to consider what content is most important to show mobile and tablet users. Sometimes that means hiding elements that don’t work as well for mobile users.

For example, the floating button to the right of this post lets you slide out a drawer of recommended content. However, it’s not really ideal for viewing on a mobile device. Our solution is to automatically hide the content drawer if the screen gets smaller. You can even resize your browser window here to see how it works.

Consider the Container

In addition to different screen sizes, the columns of responsive layouts tend to change width. Our tools do that by changing to fit the size of the container that they’re in.

Sometimes that means stretching or hiding individual elements to adjust to the page. You can see it in action in the content recommendation tool below.

Build Mobile-optimized Tools

Hiding tools that aren’t optimized for mobile doesn’t necessarily mean sacrificing functionality. You can add social widgets that are optimized for the small screen size and large touch targets needed by mobile users.

For example, the sharing tool to the left doesn’t work well on smaller devices, so we build one that did. If you change the size of your browser window on your desktop, you’ll see it disappear, and a touch-optimized version appears at the bottom instead.

We also built responsive buttons that shrink when your screen does. Check out how these buttons change when you resize your browser:

The buttons above allow you to give mobile users the best mobile sharing experience without removing them altogether.

Try out responsive sharing buttons and our other mobile-friendly tools for your site with AddThis.