Blog

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 Pro.

  • I am quite impressed with the responsive buttons. I love them, and they work nicely on our website.

    However, I’ve never been too impressed with the way the content recommendation widget works. I would rather it broke into two rows rather than hiding content when there is not enough width. Or at least, I would like to have the ability to decide how it collapses.

    Great work, as always, AddThis!

  • This is the kind of feedback we want to hear, Christian. We’ll take your suggestions to the team. Thanks!

  • Interesting. We’ll take a look. Thanks for the suggestion.

  • Please email help [at] addthis [dot] com and our support team can assist. Thanks!

  • nice widget, but makes my blog very slow

  • nice widget, but makes my blog very slow

  • Please send us an email at help@addthis.com with a link to your site and we can take a look to see what can be done to improve this for you.

  • For requests that require technical support, it’s best if you reach out directly to our support team at help@addthis.com. Please email us at help@addthis.com with the link to your site and we can certainly help you out. Thanks!