Perspective, tips, and insight

Articles to help you improve your digital marketing

Five Internet marketing trends to watch

'Tis the season for annual predictions. As always, we’re keeping an eye on Internet marketing trends. We’ve come across a few that we think will definitely have an impact. Let us know what you think… have any to add?

1. The shift to mobile will speed up

According to Forbes, “87% of connected devices sales by 2017 will be tablets and smartphones.” That forecast shows that your customers will be (if they aren't already) accessing your site with a mobile device. Responsive design is more than just condensing the screen. It involves putting your customer first and making sure your website works well in their hands.

Questions to ask:
  • Can your audience easily navigate and get to your content? 
  • Have you considered displaying different types of information up front to people who are accessing you from a smartphone vs laptop?
Read our previous article: Five Reasons Your Business Needs a Mobile Website

2. Content marketing

Photography by garryknight, CC BY NC 2.0
What makes content juicy? Eliminate the fluff - focus on what matters.
Creating relevant, valuable content is becoming more and more important. When people take the time to pull up your site or search for your services, they want information. Engage your audience with solid content and they’ll spread the word and keep coming back. Once again, content marketing is more about the customer experience. Sharing information that you know your customers want in a format that they prefer is key.

Don’t forget the marketing in the phrase “content marketing.” Yes, your website should be founded on strong, engaging and relevant content but if you don’t tell people it exists it doesn’t matter. Staying on trend, content marketing isn't just about advertising – it’s about making the most of social media and email marketing to spread the news.

Questions to ask:
  • Are you currently blogging about your industry or service?
  • How often are you updating your content to make sure it is both current and relevant? Is it time for a content management tool?
Read more about content marketing.
Don’t miss this strong article about content marketing trends by Forbes.

3. The importance of images

Photography by familymwr, CC BY NC 2.0
Images can make you stop scanning and pay more attention. They can reinforce a message or be one of their own.
It is worth noting that some of the most popular websites right now have images as their focus: think Buzzfeed, Pinterest or Instagram. Images help you communicate your message in a powerful fashion. Infographics and other ways of incorporating large visuals in your written content will be a big trend to watch in the next year or so. You’re going to see more and more websites that incorporate one long page with a balanced mix of images and content to communicate quickly and easily.

Questions to ask:
  • Where can images (photos or illustrations) make an impact on your site?
  • Would video help you share your story in a more powerful fashion?

4. It’s all about the sharing

Photography by Jason A. Howie, CC BY NC 2.0
Internet marketing doesn't end at your website. Integrating social media is key.
You knew social media would have to appear on this list. As social media continues to integrate its way into our everyday lives, its impact on websites continues to grow. In fact, some experts think that search engines will soon start factoring in how often pages are shared or liked or followed into their search algorithms. That means that if your content is strong enough (see points two and three above) to be shared on social media, your website will rank higher in search results.

Questions to ask:
  • What social media channels are you using to stay on top of industry trends? Do you also have a presence on those channels?
  • Who is responsible for your social media strategy and content?
Here's a great article on integrating social media into your search engine optimization strategy.

5. It’s all about the customer

If there’s one thing these trends have in common it’s customer engagement. People are becoming savvier about websites and Internet marketing all the time. Gone are the days where a simple search advertisement will make a notable increase in traffic. You need to integrate your efforts, reach out to your audience in meaningful ways and make sure that what your readers find on your site is strong enough to hold their attention.

Your website is literally at people’s fingertips and they expect solid, relevant content to follow. Tools such as analytics help you measure your effectiveness. The key is to make sure you’re not just looking at those reports, rather that you are taking action with them. Know your customer and continue to develop what they want today and tomorrow.

Creating your next UI pattern library

Ensuring a consistent user experience throughout the life of a website is a challenge for all web professionals. As time goes by,  stakeholders change, new initiatives are developed, and the website that was initially launched turns into something completely new. Building a pattern library is an effective technique to use to maintain a long-lasting website.

Why build a pattern library?

A pattern libraries allow team members to quickly reference a set of standard elements and reusable components, and this set-up allows for greater productive while also saving both money and time.

Consistent user experience
As web design teams grows and change, keeping a pattern library helps to ensure a consistent user experience. As microsites and other digital properties are built and launched, a pattern library is essential in keeping a seamless experience between all related websites.

Efficiency
Pattern libraries not only create consistency, but they also quickly allow designers and developers to produce mockups, wireframes, and prototypes without spending hours on design and development.

Reusability
Having elements that are reusable goes hand in hand with efficiency. Pattern libraries allow developers and designers to avoid reproducing and redesigning elements.

Evolution
The evolution of the website benefits from a pattern library because it allows all team members to refer to the same code and design. New employees can quickly learn the corporate web standards and hit the ground running when team's have a pattern library for their website.

Typical elements of a pattern library might include:
  • Visual layouts
  • Typography
  • Color palettes
  • Grids (mobile, desktop, tablet)
  • Editorial best practices
  • Call to actions blurbs, buttons, links
  • Rules, guidelines, and toolkits
  • Code
  • Slideshow
  • Navigation
  • Social media features
  • Carousels
  • Iconography
  • Interactive elements

Here are several examples of successful pattern and design libraries:

BBC Gel - Web Style Guide

Mailchimp Pattern Library

Starbucks Interactive Style Guide


Additional resources

Creating a UX Design Library PDF

Yahoo Pattern Library

Google Visual Guidelines

Boxes and Arrows - So You Wanna Build a Library, eh?

Smashing Magazine - Designing Style Guidelines for Websites

Smashing Magazine - Creating a Pattern Library with Evernote


Indianapolis web design link library

A library of websites we visit often, full of great information and inspiration.

Blogs

  • 24 Ways
    A group of designers get together every year in December and write inspiring and useful blogs for each day before Christmas. The blog topics could be on design or code, depends on the author.
  • 456 Berea Street
    Articles, tutorials, and comments on subjects that are interesting and useful to web professionals mostly related to web standards, accessibility, or usability.
  • 9 Rules
    Provides blog content from the web for users to view, which are separated by topics.
  • Abduzeedo
    Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials.
  • A List Apart
    Explores design, development, and meaning of web content, with a special focus on web standards and best practices.
  • Blog.SpoonGraphics
    Provides design tutorials including many techniques and effects using Adobe products and blogs with interesting topics about design to sharpen the skill set of a designer.
  • CreativeRoots
    Create blogs for an art and design collection from countries all over the world including historical or cultural expression. These blogs are geared to give ideas and inspiration.
  • CSS Beauty
    A database of well-designed CSS based websites from around the world with the purpose of showcasing designers' work and to act as a small portal to the CSS design community.
  • CSS Tricks
  • DesignM.agCommunity based website for designers and developers providing popular blogs, news, galleries, and a design job board.
  • Design Reviver
    Provides useful tutorials, free downloads, sources of inspiration, and articles that discuss the web.
  • Dev Lounge
    Online magazine for web designers, web publishers, and web workers overall–designing, coding, online planning, working freelance, and web applications and services to help the web developer.
  • FadtasticReviews and posts blogs that they’ve found as well as posting blogs on content they feel is important. It is separated in categories to the left of their page.
  • Just Creative DesignA blog mainly about graphic design providing tips, articles and resources on all types of graphic design.
  • Line25
    Line25 splits their design blogs into 3 different categories: Articles, Inspiration, and Tutorials. Though all of the blogs are inspiring, they are all geared to help create creativity!
  • Meyer Web
    Eric Meyer, author of 'Eric Meyer on CSS' writes about web standards and design.
  • My Ink Blog
    MyInkBlog is the creation of Andrew Houle and is designed to be a resource for designers.
  • Net.Tuts
    Offers web developers and designers tutorials and articles on technologies, skills, and techniques to help them improve.
  • Noupe
    Deliver news for designers and web-developers on all subjects from CSS, AJAX, typography, advertising, and even interview tips!
  • Six Revisions
    Publishes useful articles that provide noteworthy tips, tutorials, and resources for web designers and developers.
  • Skyje
    A blog for web developers and designers featuring Social Networking news and everything that’s Web 2.0. They are becoming more focused on WordPress.
  • Smashing Magazine
    Useful information, latest trends and techniques, useful ideas focused on design and web development.
  • Warpspire
    Web, Design and Code Geekery.
  • Web Designer Wall
    A web designers blog to share their ideas, tutorials, and talk about design trends.

Design Inspiration

  • Adobe
    Adobe revolutionizes how the world engages with ideas and information. We help our customers create and deliver compelling content and applications as well as fully realize their business potential.
  • CSS Zen Garden
    Contains many demonstrations of what can be accomplished visually through CSS-based design.
  • Most Inspired
    Design inspiration, articles and resources for web designers.
  • Style Inspiration
    Blogs about design, style and inspiration.

Color

  • Color Theory
    There are a lot of resources available about color theory. This page presents the concept in a more understandable fashion. Color affects the way we feel, how we behave, and the way in which we react to certain circumstances.
  • Color Schemer
    Build dazzling color schemes with software from ColorSchemer.
  • The Color Wheel and Color Relationships
    The color wheel helps with understanding color relationships and how to choose the best colors for your design or brand.

Stock Photos, Illustrations, Video and Fonts

  • Free Pixels
    Offers free high resolution stock photos for use in both personal and commercial design projects.
  • Font Play
    Features freeware fontmakers, and show people that nice things can be done with free fonts.
  • Free Range
    A team of passionate, wildly creative people who spend our days strategizing, branding and designing so the most important social messages get through loud and clear.
  • Fotolia
    Fotolia is the first worldwide social marketplace for royalty free stock images, allowing individuals and professionals to legally buy and share stock images and illustrations.
  • FotoSearch
    Stock photography and stock footage: The World's Stock Photography - One Website.
  • ImageBase
    Image Base is a full service business communications company specializing in video, new media and meeting production.
  • iStockPhoto
    The web's original source for user-generated, royalty-free stock photos, illustrations, video, audio and Flash.
  • Jupiter Images
    One of the leading suppliers of stock photography in the world. We offer a comprehensive range of premium, royalty-free images and stock illustration. So, whenever you need an image, whatever you need it for, you're sure to find it.
  • Public Domain Photos
    All photos on this web site are public domain. You may use these images for any purpose, including commercial.
  • PunchStock
    More than two million royalty-free photos and illustrations from Jupiterimages, TGetty Images and over 85 other collections – all in one convenient search.
  • Raster Vector
    A free service to convert fonts.
  • Shutter Stock
    Shutterstock is the largest subscription-based stock photo agency in the world. Every day we add thousands of photographs, illustrations, and vectors to our outstanding collection of premium, royalty-free images.
  • StockVault
    Stockvault.net is a stock photo sharing website where photographers, designers and students can share their photographs, graphics and image files with each other for free.
  • Stock.xchng
    Browse our huge image gallery or share your own photos with others.

Development

  • 4 Guys from Rolla
    An online resource site for ASP and ASP.NET information.
  • DevGuru
    Award-winning web developers' resource: over 3000 pages of quick reference guides, tutorials, knowledge base articles, useful products.
  • Dynamic Drive
    The #1 place on the net to obtain free, original DHTML & Javascripts to enhance your web site!
  • jQuery
    jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • Cascading Style Sheets for WebsitesA website full of details around CSS styling of HTML markup from syntax and classes/IDS to padding/margins and backgrounds.

Tools

  • ASCII characters
    An ASCII character table and this includes descriptions of the first 32 non-printing characters.
  • DNS Stuff
    Helps you configure, monitor and fix problems with your domain and email. Our tools and alerts provide insight into your domain from the outside looking in.
  • Google Analytics
    The enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way.
  • Lorem Ipsum Generator
    Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.
  • Webmaster Tools
    Webmaster tools for Webmasters, includes Border Tool and Backgrounds for your web page.

Search Engine Optimization

  • Google Adwords
    Advertise with Google AdWords ads in the Sponsored Links section next to search results to boost website traffic and sales.
  • SEOmoz
    Provides companies and individuals around the world with online tools and tutorials to help with their Internet marketing and search engine optimization needs.
  • SEMrush
    SEMRush.com functions for detecting and analyzing your competitors in Google organic search.

Recommendations for W3C markup specifications for HTML, XHTML, and CSS


Do you know of other resources to add to our list?
Please tell us and we'll share

Question: How often should you update your website?

Answer: All the time!

A website should never be a static document. In fact a website works better for you (and your customers and search engines) if you keep it fresh and updated. Think of it as evolutionary growth – your website should always be growing and changing.

There are three types of updates you should be considering on a regular basis:
  • content updates
  • site enhancements
  • complete site redesigns

1. Content updates

Keep your content fresh and you give your site visitors a reason to keep coming back. Consider having a section of your home page for announcements that you can update at least weekly.



We also recommend reviewing key sections of your site at least once a quarter to make sure the information is accurate and up-to-date. Our content development services can help you stay on top of your site’s content.

2. Site enhancements

If your current website design is fairly new and working well, it might be time to take it to the next level. A few examples of things you should consider to extend your website's promotion or effectiveness:
  • Analytic Reporting: Analytics and site statistics show you how well your site is performing so you can make educated decisions for change or additions. 
  • Email Marketing: Email marketing campaigns are a good way to stay in touch with your clients and nicely complement an overall website strategy. 
  • Social Media Set up and Strategy: Social media – blogging, Twitter, Facebook, etc. - give your business an influential new tool to build relationships, learn about your customers and expand your website’s marketing power. 
  • Search Engine Optimization: Making sure you appear when you should on search engines and also tweaking that result so that it best markets your services are key elements to a successful website.
  • Video Production: When you have a complicated service/product or a great testimonial or a story to tell, sometimes words aren't enough. Bringing those examples to life through video can be extremely compelling to your audience. 
Not sure where to start? Our Site Success ManagerTM services can help you identify areas of improvement.

3. Site redesign

Has it been three years or more since you launched your site? It’s probably time to sit down and talk about a site redesign. Technology and tools change quickly on the Internet. Investing time and money in your site regularly helps you ensure you’re getting the most from this valuable resource. It also helps you take advantage of the latest in Internet development. Now is a particularly good time to consider how to make your site more mobile friendly.

Following what we preach: The new tbhcreative.com website just launched.

It’s been nearly three years since we launched a new website to represent TBH Creative. Over the past three years we've kept the content current and regular new content through blogging. We've added a few features such as responsive breakpoints to make it more mobile friendly. Even with these ongoing changes, it was time to launch an all new website to take advantage of new technology and design trends.



CSS Flexbox

Laying out elements on a website has always come with its challenges due to the limitations of CSS. With the growth of responsive design, this issue has become increasingly apparent. To address this issue, the CSS Flexible Box Layout Module was developed.

Even though Flexbox is currently in the W3C candidate recommendation stage (meaning it is yet to be finalized and has limited browser support), it's still important to understand what all it can do. This article provides an introduction to Flexbox, including its main features and how it can be used.

Flexbox overview

Flexbox takes CSS layout to the next level, providing more advanced control over the elements in a website layout. As its name implies, the key feature of Flexbox is indeed flexibility. It provides an easier way for elements to adapt to their containing element, allowing the alignment, wrapping, and order of elements to be quickly adjusted.

Flexbox eliminates the need to use floats and other display properties in order to arrange elements on a page. It introduces a new set of CSS properties that can be used to control layout. These new properties can be enabled simply by adding display: flex to an element.

Let's take a look at some examples of the most useful Flexbox properties.

Alignment: Flexbox can be used to quickly align elements with it's justify-content property. The example below shows how the same navigation links can be aligned in multiple ways. Perfectly centering content can sometimes be challenging using CSS, but Flexbox makes it as simple as changing a property value.

Various alignment options using the "justify-content" property.

Direction: The flex-direction property provides advanced control over the direction of elements. It can be used to arrange elements into rows or columns, or to reverse the order of elements within a container.

Sections can easily be reversed or changed to rows or columns using the "flex-direction" property.

Order: Flexbox allows the elements on a website to be re-ordered without altering the website's HTML, which is one of its most attractive features. This can be done using the order property. The higher the number of the order property, the lower on the page an element appears. In the example below, the navigation starts off at the top of the page. By changing the order property of the navigation, it moves below the content. This is especially useful for responsive websites, so elements can be easily shifted in order of importance.

The sections on this page have been re-ordered using the Flexbox "order" property.

This is just a brief overview of what you can accomplish with Flexbox. To dive deeper into Flexbox properties, check out the Complete Guide to Flexbox.

Browser support

Browser support for Flexbox is growing, but not all browsers support it just yet. Furthermore, some browsers support Flexbox, but use an older version of its syntax. Check out the Flexbox browser support chart at CanIUse.com to find out more.

The future of Flexbox

Flexbox brings some much needed improvements to CSS layout. With browser support increasing, it can soon be widely utilized, so it's important to understand how powerful it can be. Creating flexible, responsive websites will be easier than ever with the advanced control that Flexbox provides.

Three simple ways to make your website more successful

You have a great website. The calls to action are clear and people are going where you want them to go. Your content is good and people can clearly tell what you have to offer. Your navigation is simple and easy to use. Good for you! You've covered the basics. Now - what can you do to make your website MORE successful?

1. Keep it current.

You might have the most beautifully designed website with the clearest navigation but if the words on the page are outdated, you've lost your audience. Regularly updated, fresh content is key to getting people to respect the validity of your website and gain repeat visitors. Consider having a section on the home page that you update at least weekly. Look for opportunities to update interior pages with your latest programs, events and other news. If you make a change to your offerings - don't let a week go by without updating your website. Not sure how to make these changes? You have two basic choices: have an ongoing maintenance agreement with your web developer or look at a Content Management System (CMS) so that you can make updates yourself. Either option is a good investment of your money and time. Don't let your fabulous website grow cobwebs.



Learn more about Proactive Site Maintenance and Content Management.

2. Make it responsive.

How does your website look on a smart phone or tablet? If you don't know, take a minute and look. Is it easy to read? Easy to use? Does the content fit the screen? If not, it's time to look at some design modifications. You could opt for a mobile design where the site will appear slightly different to users who visit with a phone or tablet. A more long term solution, however, is responsive design. This option takes your current site design and makes it smart enough to scale to fit any size screen. According to Pew Internet Research, as of May 2013 56% of American adults have a smart phone and 34% of adults own a tablet computer. Those numbers are consistently on the rise, which means your mobile-viewing audience is also. Make sure your site isn't turning away visitors with smart phones and tablets.

Site at full screen resolution - as seen on laptops or desktops.

Site at smaller resolution - as seen on a smart phone.

Learn more about the Importance of Responsive Design.

3. Tie it to social media.

By social media we mean Facebook, Twitter, Google+, blogs, Pinterest and a host of sites and services that people are using to connect and share information. If you don't have a presence on those services, it's time to investigate and see what's the best fit for your organization and audience. If you do have a presence on those services, it's time to make sure they are part of a larger Internet strategic plan. Social media is an excellent way to drive traffic to your website - and ultimately your business. You should be promoting your social media on your website while promoting your website on your social media.



Learn more about Social Media & Your Business.

There you have it! Making your website more successful is as easy as 1 - 2 - 3!

Bonus Tip: don't be afraid to change things up. Monitor your site with analytics - watch where people are clicking and how long they are staying on key pages. You might need to consider a change in navigation. You might need to look at different types of content to drive interest and traffic - videos or email newsletters for example. The important thing to remember is that a website launch is just the beginning of any well-developed Internet Strategic Plan.

Hack the future: A recap of the Future of Web Design conference


New York City's Time Square is usually bustling with tourists talking about seeing Broadway shows and visiting Central Park, but in early October an unusually high number of web developers and designers took over AMC Theatre on 42nd Street to talk about the Internet during the Future of Web Design (FOWD)'s "Future Insights" conference.

A couple of us from TBH Creative were among the nerds geeking out about how to make the web better, and this is our first recap of the some of the best tidbits were learned during those jam-packed three days of networking, creative inspiration, and tech talk.

Be mobile-minded

If there was one universal touch-point for each presentation, it was mobile-mobile-mobile! Everyone from former New York Times design director Khoi Vinh to Couch to 5K creator Josh Clark to user experience guru Sophie Kleber talked about the importance of designing experiences for the instant era where the "web is a beautiful, big, messy place."

Noteworthy numbers—

  • 91%: The percentage of Americans own a cell phone (versus 76%, the percentage who own a computer)
  • 5 feet: The furthest distance most smart phone users are ever from their device
  • 58 minutes: The average amount of time smart phone users spend on their device everyday 
  • 17%: The percentage of all traffic worldwide from mobile devices
  • 40%: The percentage of time spend on the web using mobile devices

Sound advice—

  • "Device is context."
  • "Pushing mobile frontier means designing for sensors and a network of social devices."
  • "Websites should be responsive. Don't bump them off to an app unless there's a value to the app. Some apps may still be appropriate but when it comes to mobile, most of the time they're still basically like an extra pinky toe."
  • "If people get to your site by search on their mobile device, make sure it will work when they get there."
  • "Phones are personal items. Tablets are hearth fires."
  • "Performance is the most important thing when it comes to responsive design."
  • "Responsive design isn't a fad. It's just design and design is fundamentally commercial."
  • "The best apps are kings of pain. The more specifically you define your user, customer, or use case, the better your design will be. Sometime that's for everyone is for no one. Going narrow makes your job easier: easier to find customers, easier to know what features to include, and easier to understand the competition."
  • "The best touch interface is sometimes no touch at all." 
  • "Design for different barriors to action, no matter if the platform is a phone, tablet, or desktop. Just because a user can doesn't mean they will."
  • "Responsive is not a line item. It is design."

The business of making stuff

Successful web developers and designers are also successful business people. They get proactive problem solving and understand small wins matter. A lot of the FOWD speakers shared tidbits for maximizing successes on the job that ring true no matter what you do for a living.

Sound advice—

  • "When problem framing, ask why! Keep asking why until you get to the root cause of why a stakeholder or client is stuck on a position. Once you get there, then ask: 'What's stopping you?'"
  • "Doing stuff and doing stuff the 'long hard stupid way' is the only way of doing things that are good. But when it doesn't matter, get a move on!"
  • "Mistakes and errors are just part of the learning process. It's not about the programming. It's about the mindset, taking risks and helping each other."
  • "If you build it, they won't necessarily come right away. There's no such thing as an overnight success. The things you set out to build at the beginning are rarely what you have in the end. It often takes many failures to get results. The secret? Persistence."
  • "'I'm trying' is a damn better answer than 'Because I didn't have to.'"
  • "Establish business goals upfront then ask the clients if the design helps achieve the goals, not if the clients 'like' the design." 
  • "Freedom is overrated. Deadlines and guidelines help."
  • "If you're not embarrassed by the first version of your product, you launched too late. Change is okay. Tools evolve. You have to prioritize. Change requires more than a five minute investment to try and adapt. Just because a tool doesn't solve your every need doesn't mean it can't help."

Design responsibly

From web accessibility issues to psychology for designers, FOWD speakers had a lot of recommendations for how designers and developers can reduce everyday frustrations for users and create better websites.

Sound advice—

  • "Every user is a non-javascript user while the page is loading."
  • "Consider performance an element of design. Keep in mind that most users will leave a website if it takes longer than five seconds to load."
  • "Be future friendly and prepare for the unknown by being backwards compatible and enhancing upwards. When evaluating new technologies, always filter through the lens of the long web."
  • "With the way that users behave nowadays, we can no longer make users jump through hoops. Don't make users click unnecessarily. A click becomes a commitment, whereas scrolling requires very little commitment. Design should not stand in the way an app or website works."
  • "A designer who doesn't understand psychology is going to be no more successful than an architect who doesn't understand physics."
  • "Design a sign-up form like a conversation."
  • "It's not what we don't know that will kill us. It's what we fully ignore. Don't seek the truth. Just drop your opinions. For a web design to be successful, it must communicate."
  • "No safe universal colors exist, but effective use of contrast helps increase legibility with contrast between light and dark colors being the most important. Complimentary color pairs work better than adjacent colors. The easiest trick for checking contrast is to work in grayscale."
  • "The first rule of ux is that you cannot NOT communicate. You have to care. Think about your product as a series of interactions that cause stress or pleasure."
  • "Bundle content by units of meaning. Cluster topics within tags to tell stories. To make archives more relevant is to be increasingly relevant on the platforms where people already are. Our stories are data with a soul."
If you follow the #fowd hashtag, you can see more from this event and their upcoming conference in London. Next up: A summary of some of the best apps and websites recommended by FOWD speakers.

Testing website data, design and content: A guide to your first A/B test

A/B testing is an easy way to test data, design, and content on your website. The process allows you to learn more about your site visitors and tailor the experience to their specific needs.

What is A/B testing?

A/B testing compares two versions of a webpage against one another, then declares a winner based on the most successful conversion rate. When a visitor lands on a webpage, they are served up either the A test, or the variation, called the B test. It is very common to test call-to-action copy, website copy, specific interactions, or design elements.

A/B Testing is a crucial means of measuring that allows you to see into your users behavior. It gives you the opportunity to learn more about your audiences preferences and test various design solutions without an entire revamp of your website. Additionally, it gives your team the freedom and power to constantly innovate, allowing your website to become an organic and ever-evolving product. By learning more about your visitors, you are able to optimize your website, creating a voice between the website and your audience.

What can you test?

You can test a variety of content options, from copy to design. Here is a list of A/B testing possibilities to get you thinking:
  • Headlines
  • Sub headlines
  • Paragraph text
  • Testimonials
  • Call to action text
  • Call to action Button
  • Links
  • Images
  • Content near the fold
  • Forms

How to get started

  1. Get to know your data
    The first step to beginning any A/B testing experiment is to begin with metrics. Analyzing your website data, bounce rates, conversion rates, and page views will help you establish a baseline.
  2. Identify testing goals
    After combing through the data, the next step is to specify what to test. Whether it’s a specific call-to-action, button, or other type of content, you need to identify what to test and set a goal.
  3. Execute the test
    Once you decide what you are testing, create your opposing test. For example, if you are testing content, you should create a second version of the content to test against. Then you're ready to run the test.
  4. Compare results and take action
    We typically recommend allowing two weeks for a test to run before making any assumptions based on the results. Results can significantly change depending on the amount of visitors to your site. Visual Website Optimizer has a great tool that calculates this for you. Once a winner is declared, you can immediately implement the successful test and see improved website performance.
That's it! By following these steps you have the opportunity to fine-tune your website according to your user's needs. Keep in mind, you may not always get a declared winner and additional testing may be necessary.

More resources

Smashing Magazine's ultimate guide to A/B testing
Usability Geek's intro to A/B testing
Mashable's tools and resources for AB testing

Popular tools for A/B testing

Optimizely
Visual Website Optimizer
Unbounce

Need help planning or executing your next A/B test? TBH Creative can help. Contact us today to get started.

Practical uses of animated GIFs in web design

What comes to mind when you hear "animated GIF"? Do you think back to the days when animated clip art ruled on websites hosted on Geocities and MySpace? Do you associate the term with Tumblr or Buzzfeed, where animated GIFs pop up on a daily basis? (If all you're thinking is "what's a GIF?" then check out this short Animated GIF documentary.)

Regardless of your familiarity, what you may not realize is that animated GIFs can be valuable tools for anything from design mock-ups to email marketing pitches.

Here are some helpful examples of how to effectively put animated GIFs to use:

Interactive mock-ups

Presenting mock-ups for a website, mobile app, and other web-based products can be a challenging process. Many designers provide static images to clients in order to show overall design, but portraying interactivity using static images is nearly impossible. Some designers use animated GIFs to solve this mock-up problem. These examples show how comps with animation improve comprehensive:

  

By providing an animated GIF instead of a static image, designers can portray how websites and apps will function once complete and how users can use them. Using animated GIFs can be a great deal more effective, especially for people who need to see how something works in order to understand it.

Alternative to CSS3 animations or videos

While CSS3 can be used to provide animation on websites, if you need to support older browsers, it might not be your best option. Animated GIFs are a useful alternative because even older browsers support them. In some cases animated GIFs can be used in place of video as well, especially when a more lightweight option is needed. For example, take a look at the Giant Ant site. When you hover over the icons on the home page, they turn into short animations. The creators of this site opted to use animated GIFs instead of using a video to achieve this effect.

The Giant Ant homepage uses animated GIFs for icons.

Animated GIFs also make a great alternative to video and coding solutions because of how easy they are to create. If you have Adobe Photoshop, you can create one without any extra software required. They don't require any coding experience and can be used as easily as any other image file type.

User engagement

Animated GIFs can help make a website more engaging for users. They can be used to make certain areas of your website stand out, and showcase your content in new and exciting ways. Even just adding a touch of life to photos can get a user's attention better than a static image. Using animation adds a sense of interactivity to your content and can have a bigger impact on users.

Email marketing

Email marketing is another area in which animated GIFs are used in creative ways. It's hard to capture the attention of email recipients with all of the clutter in inboxes these days, but incorporating animation in your messaging is a great way for businesses to stand out. Developing creative content for HTML emails can be challenging when working with such a limiting medium, but animated GIFs open up new opportunities for showcasing products and services. Take a look at some examples of animated GIFs in emails to see how companies are utilizing this technique.

Want more? Check out some creative uses of animated GIFs on the web in our animated GIFs and SVGs showcase.

Three areas to consider when selecting a web design agency

Are we a good match for your web project?

There are some key things you should consider when you start looking for a web design and development firm. Those criteria will help you make sure you get the best fit for your needs and budget. We’ve compiled a list of suggested items to analyze when you are in the process of selecting a web design and development firm:

1. Design Needs:

  • Are you looking for a unique, creative, and compelling design that represents your brand?
  • How big is your site/how many pages?
  • Do you want a design that can grow with your company with the ability to add features over time?

2. Functionality Needs:

  • Do you need custom functionality as part of your website?
  • Do you want the ability to maintain pages and content yourself?
  • Do you need complementary services such as email marketing, search engine optimization or social networking assistance?

3. Intangible Needs:

  • Do you have challenges that require expert guidance, recommendations and options?
  • Have you earmarked budget money to create and manage a high-end website project?
If you answered yes to most of above questions, TBH Creative would be a great match. The team at TBH Creative understands that a website project—whether a redesign or brand new website—is more than just a website. We thrive on projects that take your website to the next level. We offer design, application development, customized functionality, content management systems, online marketing services and more. When you need the whole picture, you need TBH Creative.

If you are at the phase where your website design and development needs aren’t quite that big, there are some great resources available to you. Try using a template site, freeware, or contact your local college to hire a student. And when your business grows to the point where you’re ready for a professional online marketing strategy—we’re ready to talk.

Still not sure if we’re the right match? Give us a call. We might be able to help. Sometimes it is hard to determine upfront and we are happy to talk through some options with you.

How important is a good website?

A professional, strategic website can move you ahead of the competition.

We’ve all been there. You click on a website and find it an eyesore. You can’t find the information you need. The home page keeps crashing. You leave frustrated. A bad or outdated website can cost you clients.

It's not enough to just have a website. These days everyone has a website.

Don’t settle for good when it comes to your corporate website—be great. Visible 24/7 to people all over the globe, your website is your most powerful marketing strategy. No printed brochure or magazine advertisement reaches more potential clients or offers the flexibility to easily update content as your business grows.
Business owners, consider this:
How much money did you spend on your office lobby? The fancy leather couch, the cherry wood floor, the custom lighting, the artwork? Now, how many people come through your lobby each week? 10, 20, 30?

Compare that to the thousands of visitors who might show up at your website on any given day... No lobby even comes close to reaching such a broad audience.

A strategic online presence is your most powerful investment

Don’t take shortcuts with your public face. No other marketing tool offers a better opportunity to grow your business and see real results. Your website can deliver substantial return on investment, and TBH Creative can help get you there.

Creating and maintaining a great website is a huge responsibility. It must be updated often, be usable and informative, and also visually appealing, fast loading, and functional. This can be an overwhelming job for a business owner or marketing manager. Let TBH Creative lend a hand with our expert website strategy services.

If your website doesn’t make your company, group, or organization shine, it’s time to take advantage of the opportunities a well-designed, easy-to-use, and informative website can offer. TBH Creative is excited to help you get started.

Ask yourself
  • Where does your company website stack up in the mix of bad to great business websites?
  • Is your company professional, knowledgeable, reliable, error-free, and better than the competition? Yes? Then make sure your website communicates your greatness.

Five reasons your business needs a mobile website

With continuous advancements in mobile technology, it is becoming increasingly beneficial to have a mobile website for your business. A standard website may work on different devices but websites not developed to be mobile-friendly may steer customers away. Poor usability on website not formatted for mobile use might display text that's hard to read or integrate a navigation system that's a hassle.

CIRTA.us is an example of a user-friendly mobile website we recently re-coded responsively for better mobile presentation.
On the left is their previous desktop site squeezed into a mobile screen--it looked fine but was difficult to read, click, or find information.
On the right is their revised responsive mobile website which offer big buttons and clear options.

Five reasons why now is the time to think mobile:

1. Reach viewers with multiple screen sizes

Most customers don’t want to have to pinch, zoom, and slide around to view the content of a website. With tablets and phones of all sizes, businesses can improve the usability of their site by creating a mobile version. If viewers find your website easy to use, they are more likely to come back and view it again.

2. Mobility provides quick access

When customers are viewing your website on mobile devices, they are most likely looking for a quick answer to something they are trying to figure out. They may want a simple piece of information such as an email address, phone number, or location, and they likely want to find this information in a quick way. A mobile version of your company's website can help your customers get the information they need without having to search through the whole website.

3. Influence the traffic of mobile internet users

Help your business get out there before every business has a mobile friendly website. A mobile website will get more customer traffic on your website because customers will want to stay on your website longer.

4. Keep up with competitors

If your competitors have a mobile site, you should get one too. What happens when a customer gets tired of navigating through your website and decides it’s not worth the effort to find what they want? They may choose the next business which could have a convenient mobile version that they can navigate with ease. Protect your business from losing customers by giving them the ability to have easy access to your business benefits.

5. Your customers expect it

Many people are attached to their phone to the extent that they can’t go a day without it. It is a good idea for your customers to feel like they can have access to your business anytime they want. By providing them with a mobile version of your business website, they can have confidence that your company is there when you need them, even if they're reaching out on a mobile device.
Interested in learning more? Here are some resources to help your business get started:

Indianapolis Web Design Firm: Answers your Common Website Questions

Frequently Asked Questions Website Design Questions

1. How do I choose a website vendor?

Choosing a website company can be difficult because there are so many options. First consider if you need a professional website company or a design or marketing agency. If you are planning to do some of the work yourself, you likely don’t need either.

If you have decided to use a web design firm, we recommend that you select a few based on referrals and/or samples of their web design work. Have a conversation with your top choices. These selected companies should be based on referrals and/or samples of their web design work. A trustworthy company will be happy to show samples, provide references, and give examples of similar projects to yours.
Tip: Be aware of the service you receive when starting the bidding process. How quickly do they return your calls or initial email of interest? Are they friendly and help explain options? Are they willing to listen to your needs and goals?
Contact TBH Creative if you're looking for a high-end website solution for your business. We welcome the chance to impress you right from the beginning.

2. I’m no design expert. What do I look for when I’m reviewing design work?

Simply put, you should look for something you like. It doesn’t have to be in the same industry, but it should have a professional style and quality that you want for your website. Do not choose a company whose samples of work you don’t like because you will likely receive something very similar in quality and style.

Contact TBH Creative and ask to see our work—or take a look right now. We welcome the chance to impress you right from the beginning.

3. How much does a website cost?

A freelancer versus a full service web company will offer significantly different prices – and also very different results. The first thing to do is figure out what you really need and define your online plan. We understand that everyone wants to know numbers and pricing is a realistic question to ask. Remember that all projects and clients are different, but our guidelines will give you a fairly accurate idea.

Read more about How much will a new website cost?

4. When will my website be done? How long will the project take?

For TBH Creative, this question will vary based on your project size, our current project pipeline, and a few things on your end as well. Sometimes the biggest hold-up in a project is on the client’s end as they draft content or linger over approvals. As a general idea, a small website (10-15 pages) can be completed in 2 months. A medium website in 2-4 months. A large website can be anywhere from 3-9 months.

Remember, we recommend a phased approach and continual web services throughout the year for maximum effectiveness. Overall, we are pretty flexible to meet your deadlines if they are realistic and you have your 'stuff' ready to go.

Contact TBH Creative to get your timeline started.

5. My website is not found in search engines. How can I change this? What is Search Engine Optimization?

Clients often say, "I want to show up higher on the list in Google." Our response: “For which phrase or keywords?” A question often answered with: “I have no idea.”

If you want to rank in search engines, the starting point is to determine for what terms you want to be found. Our search experts can help determine if those are smart targeted keywords, worth your dollars for ROI, and often give suggestions for better targets.

Search engine optimization (SEO) is a process to increase visitors to a website by ensuring that the site appears high on the list of results returned by a search engine. SEO should be done separately from the initial website design project – although a quality firm will do internal optimization during web development and keep SEO always in mind. SEO requires an ongoing effort to beat the competition and stay on top of the search engine changes. Remember, you aren't the only one who wants to be on top!

Learn more about our search engine optimization services.

6. Do I need a blog? What about Twitter, Facebook, LinkedIn or Google+?

Social media can be a powerful online marketing tool. Used correctly, social media can:
  • Increase your search engine recognition and ranking.
  • Build authority and raise awareness of your expertise
  • Impact your public image and attract new customers, supporters, or sales.
  • Serve as a platform to inform about your services, products or cause.
  • Drive new business, promote events, and answer industry questions.
  • Grow company connections and morale through competitions or staff spotlight segments.
  • Distribute audio, video, forms, survey, and other interactive ideas.
Blogging and social media may or may not be the right solution for your company, but it should definitely be considered as part of your online plan.

Learn more about our social media services.

7. How can I make updates to my web pages? What is CMS?

There are essentially two primary ways to make changes, additions, and updates to your web pages.

If your website is fairly "static" (doesn't change often and not connected to a database), you will contact your website developer to make changes. If you are the technical and/or DIY type, you will need to purchase and learn how to use basic web editing software such as Dreamweaver or Frontpage to make changes and load to a web server using FTP.

If your website changes often and has been set up with dynamic capabilities, you will use CMS software to update your website. A Content Management System (known as "CMS") is online software that allows your staff to maintain your website pages in-house without technical expertise or knowledge of HTML. You log in, choose a page, make changes in a WYSIWYG (What You See IsWhat You Get) editor, and save. Changes and additions can be made at any time, immediately, and without desktop software.

Learn more about our flexible and powerful content management system.

8. How will I know that my site is successful?

Building a website is really just the first step. Evaluation, testing and planning are an ongoing effort. It is important to understand that web strategy is integral in your online success.
It is no longer the days where if you build it, they will come. That's okay though, there is so much more available now and we thrive on giving our clients the advantage. Our Site Success Manager is a good place to start.

Learn more about our results driven online strategy services.

9. Can someone help with writing content for my web pages?

Absolutely. In fact, we strongly recommend you receive professional help writing or editing your web page content. Why?
  1. Writing web page content is a HUGE job. Many of our projects are put 'on hold' while a company tries to write the information themselves. Oftentimes, ending with our expert editors stepping in afterwards.
  2. Online Communication is not like writing in any other medium – because people read quicker and scan online. It is a learned skill to write effective messages for the web.
  3. There are a lot of technical things to consider that a professional writer can offer, such as inserting keywords, defining title, inserting appropriate on-page links, and using search-worthy headlines.
  4. Many companies have different people from the company write different pages. This leads to poor flow and unprofessional messages. Your pages should all have the same style and tone.
  5. Trained writers are clever and witty. Not that you aren't, but these guys do it for a living.
  6. An experienced writer will always keep your goals and audience in mind and can craft inviting Call To Action areas that will help your conversion/success.
Professionally written website messages enhance the user experience, improve your SEO and help effectively tell your story or answer your visitor's questions. We encourage you to start putting draft information together as a starting point. That will help the writer or editor get started and ask appropriate questions to support the information already provided.

Learn more about our web page writing and editing services.

10. Do I need a mobile site?

The percentage of people accessing the Internet via smart phone or tablet increases every month. Pull up your website on your phone. How does it look? Is it easy to read? Is it fully functional? There are a few different ways to tackle a mobile solution and TBH Creative is ready whether you want a mobile design or a full responsive design.

Learn more about our mobile solutions.

11. Can you help me make sense of web statistics and analytics?

You don’t have to be a numbers geek to understand the importance of measuring traffic and audience behavior. We have access to a variety of tools to help you stay on top of your website and take advantage of its inherent flexibility. We’ll sort through the data for you and give you sound recommendations.

Learn more about our analytic reporting services.

12. I don’t just want a website. I need an online application, can you do that?

Yes! TBH Creative is a full service web design and development firm. We can handle all aspects of a website project from strategy to design, from application development to content writing, from online marketing to mobile solutions and more. We’d love to hear your needs and plans and determine the smartest way to accomplish your goals.

Contact TBH Creative to get the discussion started.

Quality vs Quantity in Website Content

Website planning sketches (Photo by Garrett Coakley, CC BY-NC-SA 2.0)
We've all heard the saying "less is more." That is never truer than when we consider web content. It can seem exciting to have unlimited page length to write as much content as you desire—after all there are no print margins or word counts to consider on a web page—but if you pack a page too full of content, you're likely chasing away your audience.

Many websites have three levels:

  1. Home page
  2. All pages linked off the main menu
  3. Pages that are linked off main menu items
On the first two levels it is important that you keep content short and direct with clear calls to action. Check out our post about the importance of calls to action. The main purpose of these pages is to introduce yourself and draw people deeper into the site. Once someone clicks through to the third level (or deeper on large sites) you can introduce more content. At this stage the reader has proven an interest in what you have to say and if you force them to click much deeper for information they will be frustrated. 

At all levels, you should carefully consider what and how you want to say it. Set goals for each page—goals in the main points to communicate and goals in what you want your audience to do after reading the page. Make this part of your planning and your website will be more successful. 

How does responsive design affect web content?

Responsive design—a design that scales and works on any device whether a laptop, tablet or phone—is most likely driven by a desire for your site to work well and present itself cleanly on any size screen. Of course the design and layout are important in that process but so is content!

As a design scales the content on the page is likely to shift—say move from three columns wide to two or even one column. Sidebars often drop to the bottom of the page. And sometimes, content drops off the page entirely in an effort to make the page more manageable on a small screen. Now, you can't write separate content for a responsive design since it's using the same content by its nature. However, you can keep this scale-able movement in mind when writing content.

Perhaps the most important thing you can do with content is create content categories and work with your design team to decide what happens to each category as the page shifts in size. Then, instead of an important call to action in the sidebar always dropping to the bottom of a page—you can have it display further up the page as the design narrows causing the sidebar to drop.

A few great articles about responsive design and content:
The take-away from this article? Give your content the same planning and forethought that you give to the rest of your site and you'll have a website that reaches your audience no matter how they are accessing your site.


How much will a good website cost?

Defining how much a website should cost is one of the most common questions in the web design world. There is no one-size-fits-all formula for calculating the cost of a website project at TBH Creative because we don’t create one-size-fits-all solutions. Our solutions are custom built around your specific needs and goals.

When considering the cost of a website project, remember that your website is a 24/7 marketing tool. It can make huge impact on business success, gaining new clients, and winning project bids. Learn more about the importance of a great website.

Comparing web design services is not apples to apples.

If you have not worked on a web project before, expect to see a large range of costs from different vendors. When you compare web design portfolios and proposal offerings you will see the difference in the solutions offered.

Let’s talk dollars.

Research shows that your website offers the best and most measurable ROI. So let’s get down to business and determine a realistic budget.

We recommend that you spend at least 50% of your marketing budget each year on your online marketing strategy. For the sake of quick math, let’s say your monthly marketing budget is $8,000—that would be $4,000/month for website work. Maybe you spend a large chunk the first year to get a new website in place. Then, the following year use the dollars for analytic reporting, social media strategy, complementary email marketing with landing pages, search engine optimization, or other Site Success Manager™ projects.

The best things about your website is that you can easily test out new things, check statistics, adjust, tweak, and do it all over again to find what works best. By keeping money in your budget for online strategy year round, you will be ready for new ideas or technology to maintain a competitive advantage.

3 Reasons Wireframing is useful in Web Design

What is Wireframing?

Wireframing is a process many web designers use to architect the structure of their web site. It is a visual tool for a designer to propose a layout for any given page. It proposes a design for the overall way the content is to be shown on the web site. Wireframes can be done by sketching with pencil or paper, creating mockups in Photoshop, and in many other programs.

Mockflow is one software option we use for wireframing.

Wireframing is usually focusing on the functionality or the priority of content. It is not usually a focus for design elements like typography and color. Many designers want to skip the wireframing step and go directly into working on the design. Although it is alluring to skip over wireframing, it will save the designer time in the overall process because the idea is to layout your ideas before beginning a high fidelity design.

Here are 3 ways that wireframing is useful and matters in any web design process:

1. Wireframes work as a communication tool
    • Wireframes can help communication between team members on the structure of what needs to be created. Designers and developers can provide perspective on functionality using a wireframe has their visual tool. Ideas are presenting more clearly and expectations can be set. 
    2. Wireframes can help your client
      • By providing the client with a wireframe, the client can provide feedback that can be easily changed. A wireframe can help the client understand what content they will want to provide on their web site or web page. A client could reject the design. A visual representation can help the client realize things they are missing or don’t need. 
      3. Wireframes can save you time and money
      • Wireframes are quick and easy to produce. They can easily be discarded or revised for changes.  When the client has been involved in the wireframing process, they are more likely to approve the final design. Wireframing sets a clear plan before development and design begin, which is cost-effective. Spending more time in the beginning will help the website be stronger in the end.
        Which software? It does not matter which software you use for wireframing. The idea is that you get the ideas down in a sketch-like format for review and confirm before high fidelity design composition begins (or before you get too far down the design process where changes can be costly). We have used MockFlow and Balsamiq and even Word or a hand-drawn sketch.

        The things you want to include in a wireframe are:
        • Header
        • Navigation
        • Footer
        • Sidebar
        • Main Content Area
        • Graphics
        Wireframe examples and tools:

        Receive articles in your inbox