Tips When Designing Infographics for Mobile

Infographics are gaining popularity as being the best way to provide value information quickly to visitors. Online tools have made it very easy to create infographics within minutes and the value cannot be underestimated. However, infographics still are very large files often best displayed on desktop PCs. However, we no longer can avoid mobile users as close to 60% of visitors globally use smart-phones to visit blogs regularly. When viewing infographics on mobile phones, you’ve probably noticed that you’re required to zoom in, pinch, and take additional time for it to load. With that said,

We should try and avoid this from happening going forward, especially if you utilize infographics within your content marketing strategies. If we want to obtain the maximum engagement through infographics, we have to start tweaking them for mobile phones. I went online trying to find tips to help optimize infographics to be mobile-friendly and came up with the following list.

Let’s look at a few tips you can use the next time you’re going to be designing an infographic for both desktop PCs and mobile phones.


The Format/Design

When designing infographics compatible for mobile phones, it’s important to keep a few important things in mind. First, mobile users don’t have the same luxury as PC users when it comes to display. Next, they have many distractions, usually in the form of notifications like email, text, calls, etc. You want to ensure you get the content in front of them quickly and that’s it right to the point. Before getting into the content creation aspect, it’s important you have the right format ready.

First, if they arrive on your website, then add a link on the content page directing them to the mobile friendly infographic. Next, if you are sending the link to your email subscribers, you should links to both the mobile version and desktop. This way, the compatible version can be accessed by the visitor through their email message.

The point is, in the next section, you’ll be creating different infographics – “1” for PC users and “1” for those accessing through mobile. It’s important that the right visitor can access the content that’s compatible with their device.

The Content

As mentioned, mobile users have way too many distractions so it’s important to get your infographic in front of them without them having to pinch, zoom, etc. You should display only the most important information to avoid the clutter. I recommend doing the following…

If you have 10 main points>sub-headings>content on your main infographic, I recommending chopping it down to only include the top points. This way, they see what’s most important and can actually see the entire infographic without it having to clutter up and force them to leave because of distractions.


Create smaller infographics outlining each point so that each one is displayed without any formatting issues. For example, if you have “5” important points with their own sub-headings, then create smaller infographics outlining each point. When displaying this, you can start with a simple infographic that links out to the relevant infographic for each point. Its fine if the user needs to view five graphics because, in the end, it’s their option what graphic they want to view.

The Typical Size

On PCs, infographics come in around 850px and this is the limit because anything over will NOT display well on desktops. However, with mobile phones, you have to ensure that the width is even smaller, bringing it in under 600px. There is no sure way to determine what size will display the infographic clearly so it’s important to spit test different formats. The point I’m trying to make is that mobile phones will need a different width for infographics compared to those being displayed on PCs. You have to keep this in mind when designing mobile-friendly graphics. However,

From my experience, if the width is around 600px, then you shouldn’t have trouble displaying graphics on all smart phones. Adjust the size to fit your content, layout, and chart requirements. You have to split test until you get it right and each infographic will need to be tested separately as it doesn’t follow the one-size fits all.

The Call to Action

When designing your infographic for optimal mobile use, you have to keep your objective in mind. If you’re trying to build brand awareness, then having a simple infographic outlining your main points is good enough. However, many companies are using infographics to sell products. In other words, they’re trying to create a conversion through infographic use, which completely changes the way you design your graphics for mobile users. Here are “2” strategies to help you utilize infographics for conversions.

First, you can either link visitors back to the main website, where they will have a clear call to action. Obviously, this page will be optimized to pre-sell your offer but using this method is complicated. Users on their mobile don’t want to leave the initial page and will often bookmark the page to display later or when they have time. This doesn’t mean that they won’t return later, but you’ve lost the initial opportunity.

Here’s what I recommend,

Create an infographic to outline the important parts and add a simple call to action on your mobile-friendly graphic. Buttons like “buy now”, “click here”, and “share now” all seem to work well at making the initial conversion.

Click Here To Download John Chow’s New eBook, The Ultimate Online Profit Model!