Thursday, August 29, 2013

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.

Thursday, August 22, 2013

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. 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:

Thursday, August 15, 2013

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.

Thursday, August 8, 2013

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.

85% of consumers use the Internet to find a local business.
According to a 2012 Search Engine Land Study

If you don't have a presence online, your potential customers may not find you. Whether they are new in town or have lived here all their lives, more and more people are using the Internet to research their purchase decisions. Both individual consumers and business-to-business clients turn to the Internet to learn about your company and service before they ever consider making a phone call. 

Graph by Myles Anderson, from the Local Consumer Review Survey, June 2013

What will those prospects find when they look online for your service? 

One: Your website

Do you have a website that clearly defines your services? Does that website differentiate you from your competition? Does it direct people to a specific call to action so you can establish contacts? Can your prospects easily find your website when searching for it on Google, Bing or other search engines? Just having a website isn't good enough - in fact, a poorly done website can hurt more than help.

Tip: Develop a comprehensive web strategy that benefits your business and delivers results.

Read more about the importance of a great website.

Two: Social Media

Twitter, Facebook, YouTube, LinkedIn and blogs all have a purpose for your business. In many ways, they have a stronger influence on local business than on a national level. Online reviews and service recommendations are the new "word-of-mouth" standard and it's important that you have some control over how your business is portrayed. 

Tip: Create a Google Places page with accurate information. A Google Map result will often appear above other search results for your prospects. And the map makes it even easier for people to find you.

Check out our blog series on Social Media & Your Business.

Three: A bridge between your online and offline locations

Once you have an active online presence it's time to make sure you tie it all together. Do your business cards refer to your website? Does your Facebook page include your business location? Are you consistently listing your business hours in all places? Your physical office and your online resources should not exist separately from each other. They should help people gather accurate information and build connections.

Tip: Audit all communication pieces. Gather all printed pieces (brochures, business cards, letterhead, etc.) and pull up each of your online presences on the browser. Make sure all key business information is accurate and consistent across all your communication vehicles.

Thursday, August 1, 2013

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.


In order to get the achieved borders or rounded corners in the pre-CSS3 era, designers had to turn to Photoshop and use images to create this style. By using CSS3, designers are now able to render rounded corners, styled borders, and multiple borders faster than ever. Each corner can be styled independently using the individual border-radius property (border-bottom-left-radius, border-top-left-radius, etc.) or by creating a unified border style and using just the border-radius property. Below are a few simple examples to achieve different border styles. Keep note, for the best possible browser support, you should always include the vendor prefix (-webkit- and -moz-:).


Example A: Bottom right corner radius. Example B: Two-value border radius.


Example C: Ellipse shape using value of 50% and defined width.
Example D: Circle shape using only the value of 50%.


This feature allows us to apply multiple color declarations to one element without the use of images. Using gradients can add depth to backgrounds and complement navigation and buttons, while being flexible, scalable, and fast to implement. There are two primary methods: radial and linear. This effect is achieved by using the background-image property. The example below shows both the linear and  radial methods.


Box shadows

The box-shadow property allows you to easily add a shadow to any element. This can help create priority within your content or call out specific areas on your website. As with many of these techniques, this was a challenge prior to CSS3 and required the use of images to achieve.



Example A: Offset shadow Example B: Inner Shadow Example C: One-sided shadow

Additional resources

Complete List of CSS3 Generators
Tools to help speed up your development process when it comes to gradients.

Border Radius Generator
Tools for testing various border radii.

CSS3 Tricks - Gradients
Overview of how to use gradients.

The Ultimate Gradient Editor
Gradient generator with vendor prefixes, sass output and much more.

Create Different CSS3 Box Shadow Effects
Creative examples of how to implement box-shadows into your website.


Subscribe to this blog