Perspective, tips, and insight

Articles to help you improve your digital marketing

Four Examples of Great Interactive Annual Reports

Check out a newer version of this post! For more recent examples, head over to our latest online annual report showcase.

Business man pointing to an annual report
As more companies begin to go beyond print-only and compliment their annual reporting by presenting this information online, one of the first questions that may come up is "How do you make an interactive annual report?"

Many companies—from Facebook to Proctor & Gamble—host their annual reports online in straight-forward, archival pdf format. This direct strategy makes annual reports easy-to-download and simple to search; however, going with the pdf format limits what can be added with ease in the future and many times it doesn't taking advantage of the Web's interactive capabilities.

Content Tips: Know your website audience

Content Tips: Know your website audience
Our website content writing advice: Define your website audience. 

When writing content for your website, it can be easy to get bogged down in search engine optimization (SEO), keyword phrases, long tail content, calls to action, internal linking, headers... yes, all of those things are important. And yes, there’s a lot to think about when writing content for your website. But there’s one thing that even Google says should take precedence when writing content for your website: your audience.

Quick tips: Optimizing images for mobile use

Do you have a mobile optimized website? Are you serving the same images to your desktop users as your mobile users? If so, image optimization should be an essential step in your workflow.

Optimizing images served to mobile users is necessary to avoid both poor website performance on mobile devices, and requiring users to download more data than is needed. Consider the following tips for optimizing your mobile images.

Saving files

Use the appropriate file type.

Using the correct file type for your images is one of the basic steps towards optimizing an image. Here are some guidelines:
  • JPG is typically the best format for photographs
  • PNG is ideal for graphical elements, or if you need transparency in an image
  • GIF is generally used for animated images, or simple graphics such as icons

Photoshop's "Save for Web" feature

The "Save for Web" feature is an extremely useful tool when preparing images for use online. By saving your images this way, you can significantly lower the file size of an image by adjusting quality. The "Save for Web" feature's dialog box lets you preview the difference in your image—and its file size—as you adjust the quality.


Consider alternatives.

In some cases, there may be a better alternative to using an image that could save your users loading time. Consider some of the following:
  • Consider typesetting with a font for icons instead of using images (For more information, check out our popular post about using icon fonts.)
  • Use the SVG (Scalable Vector Graphic) file type instead of PNG or JPG for logos and other vector-based images. SVGs are generally much smaller in file size. For extensive information on how to use SVGs, take a look at the Using SVG article on CSS-Tricks.com.
  • Integrate CSS to achieve effects like drop shadows or rounded corners instead of using images.

Sizing images

Resize photos to their proper size.

Don't save out your photos at a larger size than they will ever be used. Consider how they are going to be used on your site, and determine the maximum dimension needed. The larger the image, the larger the file size, so saving your images at an optimized size can make a major difference in loading time for your users.



Compressing images

There are various tools and programs out there to help you compress your images down to smaller file sizes. Here are some online image compression tools to help get you started:

Indianapolis Web Design Glossary

(Illustration by Tsahi Levent-Levi, CC BY 2.0)
Web design has a lot of techno mumbo jumbo.

We created this web design glossary to help make web lingo make sense to non-developers.

AJAX
Ajax (Asynchronous JavaScript and XML) is a way of programming web pages with data, content, and design merged together resulting in interactive web applications. For example: AJAX allows one section of page to stay up to date by getting new information regularly at a set frequency without the need for the website visitor to keep refreshing the entire page.

Receive articles in your inbox