Perspective, tips, and insight

Articles to help you improve your digital marketing

Draw your audience in with good home page content

When writing or updating a website one of the biggest challenges is the home page. It can be very difficult to determine what content should be given the prominence of the home page. If you're not careful, your home page ends up a dumping ground that will confuse your audience and drive them away instead of pulling them in.

Key Home Page Considerations 

1. Your goals for the site and your home page. 

Think through goals clearly before you start drafting content or design. What information do you want to make sure your audience leaves with when they visit your site? That should be the guiding factor in the design and content development process. If you don't communicate clearly - again with both design and content - your audience will never get past the home page.

2. Clear communication and call to action.

We're talking "elevator pitch" clear. You have a very short time to grab the attention of your audience - less than a minute according to most studies. You need to clearly, concisely and directly tell people what you do and why they want to learn more. And you need to give them an obvious next step and a reason to take that next step.


3. Home page design

This is one page above all others where design and content must work hand in hand to accomplish your goals. Navigation off the home page is critical. Some users will never even read that carefully crafted content mentioned above and will instantly start scanning your menu. You should consider both types of readers as you design your content flow and navigation. The goal is to get people where they want to go within one click. Again, simple and clear (are you sensing a theme here?).


4. Audience experience

Finally, keep your audience in mind. You may love home pages that have lots of columns or very short bits of content but does your target audience? You should know enough about your market to know their comfort of Internet use and technology. You should know what your audience wants to get from you and how they want to get it. Let that help guide you as you craft home page design and content that effectively reaches out to them.

Keep the audience at the forefront. Develop clear channels of communication. Make sure efforts match your goals. All important tips for creating effective, powerful home page content.

When you design your home page DO NOT

Before we leave, let's run through a list of what NOT to do.
  1. Create a text-heavy home page.
  2. Let design overwhelm the content.
  3. Provide a "cute" but dysfunctional navigation.
  4. Give too many options. Yes, calls to action are important but if you have too many - where is the user going to click? (Answer: away from your website.)
  5. Assume once is enough. There's a common marketing mantra that you should touch your prospects three times if you want them to remember you. You may not need three repetitions on the home page but if something is important, your audience should be able to get to it in more than one way.
Think you're ready to start planning out your home page? Here's a fun set of exercises to help you get started.


Choosing a CSS grid system for your web design

A CSS grid system consists of pre-written CSS styles that are used to help create the structure of a website. They are usually made up of some combination of rows and columns to aid in layout creation. Using a grid system for your website is important. It helps to improve the overall design by providing consistency and balance amongst elements. Using a pre-defined grid structure can speed up the production process as well.

Zurb.com uses a grid-based design to achieve a balanced, well-structured appearance.

With so many grid systems available, it can be hard to choose between them all. The first step in making that decision is to know what aspects of the grid you need to take into consideration. Not all grid systems are created equal, and you want to make sure you are choosing one that is best suited to the needs of your website.

Here are some of the most important factors in deciding what type of grid system to use:

Fixed vs. fluid/responsive

Probably the most important question you need to ask before deciding on a grid system is whether or not your site is going to be responsive. If so, you’ll need to rule out any grid systems that have a fixed base width. For example, the 960 Grid System is based on a fixed width of 960 pixels with no fluid column options, and thus wouldn’t make a good choice for a responsive design. Some grid systems allow for both instances, as is this case with Bootstrap’s grid. The CSS classes you use determine whether or not the columns will be responsive.

Bootstrap’s grid system adjusts it’s column and gutter widths for different devices

Columns and gutters

Once you’ve determined what type of grid system you want, the next thing to consider is structure. As mentioned earlier, each grid has a base width. If you want your site to be a specific width, you’ll need to choose an appropriate grid to accommodate that design choice. Gutters are also an important structural feature that should be given attention. Gutters are the space between columns, and each grid system treats gutters differently. The size of gutters can vary, and some grids don’t include gutters at all. They could be measured in pixels, ems, or percentages. There’s no particular standard for gutters, so make sure to think about your site’s design to determine what would work best.

Browser compatibility

Browser compatibility is a crucial factor in choosing a grid system. If your website needs to support older browsers, such as Internet Explorer 7, make sure the CSS code being used is compatible. Some grid systems use properties like “last-child” or use fixes for clearing floats that may not function properly in older browsers, thus breaking the layout. If you need to support a specific browser, take a look at the documentation for your desired grid system to ensure that it fits any special criteria.

SASS/LESS compatibility

If you are using a CSS preprocessor like SASS or LESS, consider choosing a grid system that comes with code specifically tailored towards that. There’s no need to re-invent the wheel and try to fit a grid system into your desired format when it may already exist. For example, the Golden Grid System offers both SCSS and LESS versions of their grid code, providing greater flexibility and ease of use.

So which one should I choose?

Using a grid system is the important part; which grid system you choose essentially boils down to personal preference and project requirements. You may even decide to build your own, or modify one that already exists. For example, the website Gridpak allows you to create your own grid and then download the files you’ll need.

Gridpak lets you easily create your own grid system.

To help get you started in choosing a grid system, here is a list of some of the most popular options:

What to look for when choosing a CSS framework

CSS frameworks can be a great addition to your web development process. They provide pre-built code to help create the foundation of a website, providing features like grid systems, typography, forms, icons, widgets, and more, all ready to be implemented into your project. By using a framework, you don't have to start from scratch every time you start a project. With these rapid prototyping capabilities, you can have a website up and running in no time.

Choosing a framework

When it comes to selecting a CSS framework, there are many to choose from, with each one slightly different from the next. It can be a tricky process to determine which one is best for your project, so this article aims to help you narrow down your selection. Here are some of the most popular CSS frameworks out there:
There are a variety of CSS frameworks to choose from
While there are certainly more frameworks out there, this list is a great starting place. If you want a more extensive list, check out this article on CSS Frameworks.

Key features of CSS frameworks

While browsing your framework options, there are key features to take into consideration. Here are some guidelines that will help you when making your selection:
  • Ease of use: Check the documentation for the CSS framework you want to use. Generally, the more documentation and support a framework offers, the easier it is to implement.
  • Plugins/widgets: Each framework offers its own set of add-ons, such as tabs, sliders, galleries, tooltips, and so on. If you are planning to use such features on your project, choose a framework with them built in to save time.
  • Layout: Possibly the most important part of a framework is the way it approaches layout, and each framework handles this differently. Depending on the design of your site, you might have specific needs such as a certain page width or amount of columns. Make sure the framework you choose will accommodate those needs.
  • Icons: A popular feature of CSS frameworks is to include icon fonts. Frameworks with this built in makes it simple to add and customize icons on your site. If you plan to heavily use icons, consider a framework with this feature.
  • Styles: Each framework comes with its own look and feel. For example, the image below shows the different button styles across a variety of frameworks. If you plan to use the default styles of a framework, make sure to check out its overall design.
  • LESS/SASS: If you are using a CSS preprocessor on your project, you will most likely want to choose a framework that already offers those capabilities. For example, the Foundation framework provides a SASS compatible version to download.
  • Mobile: If you are working on a responsive site, then make sure the framework you choose provides tools for that. Many frameworks include styles specifically for mobile devices, including classes for hiding and displaying content. For a detailed comparison of responsive frameworks, take a look at this Responsive CSS Framework Comparison.
Overall, the needs of your project should be the drive behind which CSS framework you choose. Select the framework with features that will best serve your purposes and fit easily into your development process.

Three tips for marketing your local business online

If you have a business that operates in Indianapolis (or Carmel or Greenwood or Fishers), you might think you do not need a presence on the Internet. After all, you're trying to reach prospects right here in your geographic area. Why would you need a presence on the world wide web to reach people locally? Simply put, your Indianapolis business needs a website because today's customers are using the Internet the way yesterday's customers used the yellow pages.

CSS3 Series, Part 4: Borders, Shadows, and Gradients


In this third installment of our CSS3 Series, we are diving right into several elements that are sure to make any website stand out from the crowd: Borders, shadows, and gradients. If you have been following along with our series, you’ve learned about transitions and infinite scrolling, both techniques that can give your website visitors a smooth and engaging user experience.

Receive articles in your inbox