Thursday, January 30, 2014

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.

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?"
Business man pointing to an 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.
Some innovative companies incorporate online technologies to create engaging presentations of their annual report content, often creatively using responsive designs and embedding video. This trend is growing. According to Savage Brands, "electronic/online annual report budgets increased 30% over 2010," and "online tracking of [annual] reports has increased 60% between 2008 and 2012; 80% of those that track do so to improve the follow year's budget."

Thursday, January 23, 2014

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.

Defining your website audience

Photography by Dave Worley CC by 2.0
So you want content that attracts the right audience? Well first, define that website audience. When it comes to writing for a website, you need to understand more than just basic marketing demographics. 

Tips to help you define your website audience:

  • Determine their comfort level online. Is your audience very Internet savvy or do they need a bit more guidance? Their familiarity with websites should guide how you write to them.
  • Discover what else they like to do online. If your audience is full of Pinterest lovers, you should consider more visual content on your website. If your audience frequently reads news websites, you should consider formatting your page with easy to read headlines. Learn where your audience spends their time online and then look for styles to mimic on your own website.
  • Learn what they want to do on your website. Remember, your website is not just an electronic brochure. Your website elicits action. And the more you know about what action your audience wants to take, the better you’ll be able to write content that meets their needs. 


As you can see from the tips above, once you understand your website audience you need to write to their needs. Just how do you find out all that great anecdotal information? You don’t need a large (expensive) market research project. You need 5-10 customers and prospects that you can talk to for about 15 minutes. In that interview you’ll be building an audience persona out of the composite characteristics that you discover.

Learn more about building audience persona.

Understanding your website audience will improve your SEO

Let’s go straight to Google on this one. Their content guidelines include:
  • Create a useful, information-rich site, and write pages that clearly and accurately describe your content.
  • Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.

There’s no mention of keyword stuffing. No mention of creating meta keyword tags. Instead, Google's best advice for improving SEO with content is to write useful content. Seems basic doesn’t it? But sometimes the most basic things are the most difficult. Need help writing content and defining your website audience? TBH Creative can help.

Tips to help improve SEO with content:

  • Write unique content. 
  • Develop accurate, clear content that is of value to your audience.
  • Make that content easy to read in a format that is attractive to your audience.
  • Regularly update your content.
  • Include the logical, common-sense terms that your audience uses when they are looking for your information.

Thursday, January 16, 2014

Top Web Design Trends for 2014

It's the New Year and that means we're on the watch for which are the coming trends in web design. These are the ten top trends to pay attention to in 2014:

Mobile design

With continued advances in technology, it's beneficial for businesses to have a mobile-friendly web presence. Keeping multiple device sizes in mind, usability may be difficult if your website it not mobile-friendly. By making a mobile-friendly website, your business may find unimportant information that isn't needed.

Responsive design

Responsive design is another way to make a website work well on multiple devices and screen sizes without making a mobile-specific website. This helps businesses that don't want to maintain two different sites. In responsively design websites, content will effortlessly load in an optimizes manner in different mobile browsers. Last year many web designers discussed responsive web design and in this year responsive web design will become even more popular.

Flat design

The days of drop shadows and making objects on a page look like real things is slowly being replaced with flat design. Skeumorphic and 3D design focuses on using fewer things to help pages load faster. Many businesses are starting to lean toward a flat design such as Windows. Apple has also updated the iPhone software to use a flat design.

Retina displays

Many Apple devices have retina screens. With this development, it is going to be important for companies to have higher resolution graphics on their websites. In the years to come, higher resolution screens may become the standard on other devices. Images that aren't in high resolution may become pixelated by the new retina displays. Designers may like the new change in screen resolution because websites will appear clearer to viewers using devices with retina displays.

Photography by Yukata Tsutano, CC BY NC 2.0

Social media

If your business doesn't already have a social media presence, then make a goal to develop a social media strategy in 2014. Social media is a great way for businesses to expand their audience. With the ability to share posts on websites like Facebook and Twitter, your business may increase reach and support marketing goals. Social media helps allow followers to interact with your business. Follower interactions can help improve your business with comments they may post with questions or concerns.

Parallax scrolling

Parallax scrolling is an animation technique that brings websites to life. A webpage with parallax scrolling will appear to have multiple layers. The background and foreground layers along with the text are animated as you scroll. Parallax scrolling is a way for your website to come to life and be interactive to the viewer.

Infinite scrolling

Infinite scrolling is beginning to get rid of the idea that all information needs to be "above the fold." With many people using mobile devices people are getting used to having to scroll up and down on a webpage. Infinite scrolling allows viewers to see more content on a single page. In 2014, web designers may need to be more thoughtful on how they design a page with infinite scrolling because if the page is cluttered with content, infinite scrolling can be overwhelming to the viewer.

Simplicity

In 2014, there may be more websites using simplistic designs. A simplistic design helps minimize distractions for viewers and keeps the content you want to be seen at the forefront. As a starting point, go through your website content and get rid of any information that isn't needed. Cleaning up your website will make it easier for viewers to find the most important content.

Large images

These days, web designers can incorporate large images into their designs because internet connections are much faster than they used to be. Typically large images are used as a background image to be eye catching for viewers without distractions from the most important content on the page.
  • Logansport Memorial Hospital worked with TBH Creative to find and incorporate large images into their new website design. Visit the LMH website.
 

Single page websites

If your website doesn't have a lot of content, then a single page website format might be the best solution for your business. Instead of forcing users to click through links to bring up multiple pages with minimum content, single page website formats put all of the content on one page. Viewers can easily navigate by scrolling down through the single page of content. Single page websites are often used with parallax scrolling. This technique is a good way for a website to have a simplistic design.

Want to read up on more predictions for the future of web design? Here are some websites discussing the topic.

Thursday, January 9, 2014

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:

Thursday, January 2, 2014

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.

 

Subscribe to this blog