Perspective, tips, and insight

Articles to help you improve your digital marketing

CSS3 Series, Part 3: Fixed headers

CSS3 Series, Part 3: Fixed headers
Fixed headers are a hot topic in the web design world, and they can be found on all types of websites. As you scroll down the page, you'll notice the header area "sticks" to the top, staying in place as you scroll down. The fixed header is a popular feature for good reason; it can provide a better user experience and improve the overall navigation of a site.

Fixed header benefits

The main benefit of fixed headers becomes obvious when browsing a site that has one: navigation. Especially with lengthy pages, a fixed header makes it easier to navigate to a different page without scrolling back up to the top of the site. This is especially important on one-page sites, so users can jump from section to section more quickly and efficiently.

CSS3 Series, Part 2: Infinite Scrolling

Young
We've all been here: you're making your way through your latest posts and just reaching the end, when suddenly even more content shows up, and you start all over again.

If you frequent social media sites, such as Twitter, Tumblr, and Pinterest, you're probably familiar with the concept of infinite scrolling. This never-ending content approach is often used to enhance a user's experience on sites that produce massive amounts of content such as the aforementioned social media sites. However, does infinite scrolling really provide a better experience or just frustration? Let's take a closer look at infinite scrolling and find out.

Website Redesign & Strategy: Logansport Memorial Hospital

We launched an updated website for Logansport Memorial Hospital today.

TBH Creative has been working with Logansport Memorial Hospital since 2011. In 2012, we upgraded their technology as a primary focus. We gave them a quick facelift at that time, but planned for a more thorough redesign and focus on content in 2013.

The new website design is fresh. It incorporates their new brand with circle elements, strong photography, and inviting bold colors.

Our main goals were to highlight physicians and show that Logansport Memorial Hospital is the best hospital for their local community and offer many services. We highlighted physicians through an improved physician directory and a widget featuring physicians right on the home page. We restructured and organized the site architecture for a better presentation of their depth of services. You will also notice a large mega menu for Services with easy 1-click to all of their services.

We invite you to visit their new website at www.logansportmemorial.org and view some of the new screens below.

Web Design and Development

The home page focuses on the main services at the top and highlights physicians, news, and health 'tips'.

The physician directory is an important function of the new website and allows quick searching of the physicians.
The physician bio page highlights a large photo of each physician and relevant biography information.
For interior services pages, we designed the page for long content if necessary as well as pertinent information highlighted in the right column.
The photos on interior pages were still a primary design element adding interest and appeal in the new design.

Email Marketing

In addition to the website design, TBH Creative was hired to help Logansport Memorial Hospital begin an email marketing program. As part of the first steps, we created an email newsletter template that was designed and coded for flexibility. It was important that the newsletter match the new website design and brand while also being easy to manage.

The flexible email newsletter template will be used to build relationships with the community and share health tips and hospital news.

Social Media Marketing

Logansport Memorial Hospital understands the importance of social media. As part of their social media marketing, we helped them develop and evaluate a strategy for Facebook. We helped them merge their confusing multiple Facebook pages, develop a plan of action with samples of posts and techniques, add custom tabs to important pages within their website, and also brand the page to match their new marketing and overall brand.

This page shows events, the newsletter, information and how to send a card.

A Look Back...

In 2012 (Phase 1,) we upgraded their website with a simple facelift and focused on upgrading their technology through our content management system.

In 2012, as Phase 1, we upgraded their website with a simple facelift and focused on upgrading their technology.

Stay tuned in the coming months for our next improvements of a responsive views.

What the Client Says about TBH

"I have appreciated TBH Creative's expertise and guidance as we have navigated through a website redesign at Logansport Memorial Hospital. They are knowledgeable, detail-oriented, and very creative. I trust their work and opinion on any website endeavor that we pursue, and I look forward to partnering with them for many years to come."

Carmen Danhauser, Marketing Coordinator

About the Client

Logansport Memorial Hospital is a not-for-profit, county-owned, regional medical center located in Logansport, Indianathe largest and most comprehensive health care provider in Cass County.



CSS3 Series, Part 1: Transitions

In this series, I will be focusing on CSS3 tips and techniques to enhance certain elements on your website and give users a smooth user experience. Look for future posts about other CSS3 techniques in the upcoming weeks.

Understanding transition effects
Transitions allow for more graceful and elegant transitions between elements over a specified period of time. Rather than an abrupt transition of background colors or content, transitions give website visitors an elegant and smooth experience.

The W3C offers the following clear and simple definition of transitions:
"CSS transitions allow property changes in css values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute)."
Transitions are supported in Firefox, Safari, Chrome and IE10. If they are not supported in a given browser, the properties will gracefully degrade allowing the transition to occur instantly. Learn more about browser support of CSS3. Many different properties can be transitioned, such as height, opacity, border-radius, font-size, padding, and many more. Here is a complete list of all possible properties.

In the two examples following,  I have chosen to focus on the background property on a button and creating a dropdown menu only using CSS3.

Example 1: Button transition

Here we have a seemingly normal button with :hover psuedo class applied:

Sample Button 1a

Below is the markup to achieve the above button:

a.button {
  padding: 6px 10px;
  background: #00aeef;
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
}
a.button:hover {
  background: #0072bc;
}

Next we will add the transition to the button. The markup below identifies which properties will be transitioned (background), the amount of time the transition should take to complete (duration), and the speed curve of the transition effect (ease, linear, or cubic-bezier).

a.button {
  padding: 6px 10px;
  background: #00aeef;
  -webkit-transition-property:  background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
a.button:hover {
  background: #0072bc;
}

Sample Button 1b

Figure 2: The button with a transition effect applied.

As you can see with the button above, adding a simple transition creates a richer experience to any element on a website.

Example 2: Pure CSS3 Menu using transitions and opacity

The dropdown menu below is created by using only CSS3. The nested elements are hidden by setting the opacity to 0. When the parent is hovered, the nested elements become visible and slide down. In order to show the nested ul, we set the opacity to 1 and altered the top offset to display it properly. Additionally, a transition effect was added to make for a smooth interaction between background colors and opacity.
Things to keep in mind when using transitions
Having too many transitions on a website can be overwhelming and distracting, therefor consider a few enhancements that will enriched your user experience, rather than detract from it. Additionally, it is important to consider a transition timing that is appropriate for the user's interaction and the intended outcome.

Remember:
  • Always included vendor prefixes
  • Always include the non-prefix property last
  • Keep it simple
  • Stay up to date with browser updates
  • Don't forgot mobile
Additional tools and tutorials

CSS3 Series, Introduction: Transforms, Infinite Scrolling, Fixed Headers, Borders, and Shadows

Female programmer working at home
During the upcoming weeks, we'll explain how to use a few CSS3 techniques and tips that can make a big difference in your website.

For web designers, keeping up with industry trends not only helps us grow as professionals, but enables our clients to shine by having beautiful and intuitive websites. Becoming familiar with these new features not only adds that extra touch to websites, but helps move the industry forward creating an ever evolving environment.

In this series, we will dive into several techniques that will give your users a smooth experience when interacting with certain elements on your website. Additionally, CSS3 gives web professionals the flexibility (while being fast to implement) to incorporate various styles and features in a website.

Four Useful Strategies for Handling Online Reviews

Social media can be a blessing and a curse. Its blessing is that it can provide inexpensive consumer research because your customer is right there. Plus, it can provide free advertising for a job well done from people "just like us," not some super model with gorgeous hair who says she uses Brand X shampoo (yeah right). However, it can also be a curse. Dissatisfied customers can say things from a distance that they are not brave enough to say in person. This can cause real problems especially, for small businesses.

Let's face it. We all make mistakes. Things happen. The goal is to correct complaints—when possible—before they can do irreparable damage to your reputation.  

Screengrab of recent Yelp! reviews for local Greek restaurants

Four useful strategies for handling online reviews:

  1. Work to fix the misstep. Quickly work to resolve the problem, offline if possible. The most efficient way to do this is to have an action plan to handle missteps. It is best to have one that you can slightly modify for different circumstances. when a misstep occurs. This allows for a consistent quick responses and a way to track any shortfalls in customer service.  A customer may recognize when a problem has been solved and possibly change or remove the negative review.

  2. Solicit positive reviews. In most cases, unless you can prove malicious intent, a bad review can not be removed quickly. To counter, ask customers that are pleased to post results of their experience and post on several review sites such as CitySearch and Angie's List. Typically, new positive comments will push the negative ones down the list of reviews. Keep in mind that all reviews may not be posted depending on the profile review approval process. Reviews that seem to be illegitimate are often hidden from the public in the "Filtered" reviews section at the bottom of each page. Even legitimate reviews may fail to clear, and will not appear.
     
  3. Create your own website presence. We recommend a strong website, participation in popular social media, and Google Maps. Blogging is another option for creating recent and relevant content for search results.  This will put your company name first when a search is done for your company followed by the reviews.  Without a website, just the reviews are listed.
     
  4. Monitor the web for comments. One efficient way to monitor online activity for your business is by setting up a Google Alert with your company name and variations of your company name. Each time your keywords are mentioned online, Google will send you email notification with relevant results based on your queries.

The value of the meta tag to your website

The value of the meta tag to your website
Once upon an Internet, meta tags were very important tools to help make sure a website was found by search engines. Today, the tags don't serve much of a Search Engine Optimization (SEO) purpose but they still have an important place in website strategy. When your site is found in a search engine, the meta tags give the user valuable information about your site.

Receive articles in your inbox