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.

blogs
Blogs are an online method of sharing content. They are often used by businesses as a marketing tool. Blogs generally consist of short articles posted on a regular basis.

browser
A browser is a software program used to view websites. Common browsers include Safari, Chrome, Firefox, and Internet Explorer (IE).

browser compatibility
Browser compatibility means when a website runs correctly on different web browsers. It also is used when a website looks good (or acceptable downgrade) is all or the most common web browsers through testing, adjustments, and expertise.

content management system (CMS)
A CMS is a web-based software application that allows your staff to maintain your website content in-house without advanced technical expertise or knowledge of HTML. Changes and additions can be made at any time, immediately, and without desktop software. It serves as an affordable alternative for organizations that require significant, time-sensitive, and/or routine maintenance. TBH Creative has developed its own flexible and robust CMS.

cascading style sheets (CSS)
CSS is a style sheet language used to describe the presentation(the look and formatting) of a document written in a markup language. It is applied web page data or content written in HTML and XHTML. CSS separates the design and style from the page information resulting in great benefits such as quicker load time, easier edits, and simplified redesign process. Font changes, background colors, and more can be changed in one CSS file in a matter of minutes.

domain name
Also known as an URL, a domain name is a www address. Simply put, it's what you type in your browser's address bar. For marketing purposes, a domain name is your web address. A domain name should be relevant to your company, organization or product, short, catchy, and easy to remember. Technically, a domain is the sequence of words, phrases, abbreviations, or characters that serves as the Internet address of a computer or network.For example, TBH Creative's our domain name is tbhcreative.com.

Facebook
Facebook is a social network service where users create personal profiles and connect to other users as friends.

graphics interchange format (GIF)
GIF is a popular file format for web graphics. GIF is the ideal choice for displaying graphics with large areas of solid color, such as logos, without any loss in quality. GIFs only support 256 colors, but they allow for transparency. GIFs can also be animated.

Google Analytics
Google Analytics is a free service provided by Google that generates demographic statistics about the visitors of a website, such as how they visited and how long they were on the page.

hypertext markup language (HTML)
HTML is the structural language of web pages.

javascript
Javascript is an object-oriented scripting language used to enhance web pages.

joint photographic experts group (JPG)
JPG is a popular file format web graphics. JPG is the ideal choice for displaying photographs, but JPG file will have a lossy compression.

operating systems (os)
Operating systems are software that run on computers. An OS manages computer hardware. Some examples include Microsoft’s Windows, Mac's OSX, GNU/Linux.

pagerank
PageRank is what Google uses to determine the importance of a web page. It's one of many factors used to determine which pages appear in search results.

portable network graphics (PNG)
A PNG is a file format used for displaying graphics that is similar, but better than a GIF. PNGs combine some of the best features of both GIF and JPG formats. PNGs' compression level is great, without any loss of quality. PNGs are often used for transparent graphics or logos.

really simple syndication (RSS) 
RSS is an XML-based format used for content distribution and syndication. Subscribing to RSS feeds allows you to receive custom, up-to-date information from your favorite online content sources without having to regularly check the site for updates.

search engine optimization (SEO)
SEO is the name given to the activity of optimizing web pages or websites in order to make them more search engine-friendly to ultimately achieve higher positions in search results. No one can guarantee a #1 ranking on Google. Be careful if a company is secretive or won't clearly explain what they intend to do.

social networking
Social networking is the name given to networking online for fun and business purposes. Think of the six degrees of separation concept. Social networking produces interconnected Internet communities that help members make contacts through others that they would be unlikely to have met otherwise or realize common connections.

Twitter
Twitter is a social network/microblogging service allowing its users to send and read other users' messages, also known as "tweets." Tweets are restricted to 140 characters.

web hosting 
Web hosting is the term used to describe where your website files live on the Internet.

Receive articles in your inbox