Thursday, July 25, 2013

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.

The website Rockaway Relief is a one-page site using a fixed header to allow users
to easily jump from one section to the next.

Fixed headers are very easy to implement. They can be accomplished with just CSS, making them a simple addition to a site. However, many sites take it a step further and add more advanced features. For example, take a look at Daniel Filler's portfolio site. As you scroll down, a condensed version of the site's header fades in at the top of the page. Simple effects such as this can be added to make a fixed header function more smoothly or to add more interactivity to a site.

A fixed header can also be used to help draw attention to branding. On many sites with fixed headers, not only is the navigation included, but the logo is as well. As a user is browsing your site, they will be consistently associating the content with your brand. The website Grain & Mortar takes this approach, with a fixed header that always includes their logo.

Grain & Mortar displays their company's branding prominently in the fixed header.

Fixed header design issues

One of the biggest complications that you may run into when implementing a fixed header is screen space. It's important to take the overall design of your site into consideration, and determine if there is adequate space for a fixed header. It's important not to sacrifice design for a "cool" feature. If you know you want to implement a fixed header, first make sure your site will actually benefit from one, and then design your site in a way that will maximize the benefits of having a fixed header.

On some sites, fixed headers can be an intrusive feature, getting in the way of the content. You don't want the header to distract from the overall purpose of your site. Think about what your users' purpose may be, and what content they will be looking for on your site. Make sure your fixed header is helping them get to where they need to be instead of interfering.

Mobile devices need special attention as well for sites with a fixed header. There is a lot less screen space on mobile, so every pixel counts. If you know users will be accessing your site from a mobile device, take that into consideration. One solution may be to only have a fixed header on the desktop version of your site.

The mobile version of the Happy Cog site (left) drops the fixed header
from desktop version (right) entirely.

If you're going to do it, do it well

If you're planning on using a fixed header on your site, start by taking a look at some of these great examples:

Thursday, July 18, 2013

CSS3 Series, Part 2: Infinite Scrolling

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.

Why use infinite scrolling

Infinite scrolling is essentially a pagination alternative. However, instead of users clicking through to other pages of content, the content loads on its own once the user reaches the end of what is currently loaded. For example, take a look at the TBH Creative Twitter page. The tweets continuously load in as you scroll further down the page, requiring little effort from the user.

Infinite scrolling can be a great asset to sites with content as the primary focus. Social media is a great example of this because of the vast amount of content generated by users. If you have a website that is made up of extensive posts, photos, or other similar content types, you may want to consider infinite scrolling as a possible solution to how that content will be displayed.

Pinterest is a popular social media website that features infinite scrolling.

Infinite scrolling can also help with user engagement. Since content is loaded in automatically, users may be more likely to browse your site than if they had to click through to pages on their own. However, be mindful of your users when making such assumptions, as that's not always the case. For example, when the Etsy website attempted to implement infinite scrolling, they found that it actually decreased user engagement. User testing is crucial when implementing a major site feature such as infinite scrolling in order to ensure that it is indeed improving user experience, instead of the other way around. Read more about Etsy's experiences with infinite scrolling.

Another situation when infinite scrolling is beneficial is when users are looking through content on a mobile device. Instead of clicking on links, users can just quickly swipe through content. They don't have to worry about loading a new page when they want to view more, which can be a major time saver.

The main thing to keep in mind is that infinite scrolling isn't necessary on all content-heavy sites. It's important to do your research first in order to determine whether or not your users will benefit from this approach.

Best practices

If you do decide to move forward with infinite scrolling, that's great! But here are some things to keep in mind:
  • Make sure your users know when content is loading. Incorporate some type of loading message or icon to let users know there is more content than what they are currently seeing once they reach the end. If users with slower internet connections are unaware that new content is on its way, they might leave your site before seeing it.
  • Tumblr displays a "loading posts" message to let its users know more content is loading.
  • Let your users know when they have reached the end of the content. If the content just stops loading in, this can lead users to believe that the site is just working slowly, or not working at all. One way to do this is to display a message to let users know when they've reached the end.
  • For some sites, it is nearly impossible to reach an end. If this is the case, a "back to top" button is a must, especially if there is no way for the users to navigate elsewhere on the site without going back to the top of the site. For example, Pinterest has a "scroll to top" button that is always shown in the bottom corner of the site for easy access.
Pinterest fulfills both of these requirements; there is always a "scroll to top" button
in the right hand corner, and once you reach the end of the content,
the Pinterest icon is displayed.
  • A downfall of many sites with infinite scrolling is that there is no way for a user to go back to where they left off browsing if they click through to a piece of content. This can be dealt with in several ways. One solution is to allows users to view all of the content within the browsing area, so they don't have to go to a separate page to view the rest of a post. If your site includes user accounts, another option is to provide users with a way to save pieces of content to come back to later. This can be done through a "favorite" or "like" option.

Choose wisely

As you can see, infinite scrolling can be a great addition to a site, but it can also be an annoyance if not used appropriately. Frustrating users is never the goal, so stick to these guidelines if you are thinking about implementing infinite scrolling on your site. In the end, your site should provide the best user experience possible, so use it wisely! If you'd like to explore infinite scrolling in even more detail, check out this article from Smashing Magazine: "Infinite Scrolling: Let's Get To The Bottom Of This."

Are you interested in adding infinite scrolling to your site, but not sure where to start? Get in touch, and we would be happy to get you there.


Tuesday, July 16, 2013

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.



Thursday, July 11, 2013

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

Tuesday, July 9, 2013

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

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.

In this series, we'll cover the following CSS3 techniques:

Slide from Dan Cederholm's talk about CSS3
at Seattle's A List Apart event, April 2010.
(Photo by Petra Gregorov√°, CC BY-ND 2.0) 
Transitions and opacity
Transitions allow for more graceful and elegant transitions between elements over a specified period of time. Adding opacity to hover actions can add that added interaction for your user.

Infinite scrolling
Infinite scrolling, essentially a pagination alternative, is a never-ending content approach used to enhance a user's experience on sites that produce massive amounts of content, such as Twitter, Tumblr, or Pinterest.

Fixed headers
Fixed headers, which are easy to implement with CSS3, help draw attention to branding and make it easier to navigate to different pages without scrolling back up to the top of  websites because they stay in place as users scroll down.

Borders
Implementing rounded corners as a design element on websites used to be a challenging and time-consuming affair. Now, with a few lines of CSS3 it becomes light-years easier. We will dive into different things you can do with these techniques and offer examples to illustrate these features.

Shadows and gradients
Everything from text shadows to gradients, these snippets can add depth and make certain sections of a website stand out tremendously.

For further reading, here are some of our favorite CSS3 resources:

Friday, July 5, 2013

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.

Tuesday, July 2, 2013

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.

Meta Title Tags

You see the results of the meta title tag every time you do a search. If there is no tag, the URL will be listed in the search results. If there is a tag, a more descriptive link will be listed - often one that entices you to click on it. The title tag appears in browser tabs and search engine results. You need to keep these short, fewer than 70 characters is ideal, and descriptive.

Meta Description Tags

Description tags are the block of information seen below the link in a search result. If you ignore this, you are ignoring a free chance to market your strengths. We advise keeping these descriptions at less than 170 characters and ideally ending in a call to action to help guide the reader into clicking your link. It's important to remember that each page of your site has different information and the description and title tags should both reflect those differences. If you use the same meta content on multiple pages, search engines will ignore it and you're missing a chance to make an impact.



We think meta tags are important enough to put them on our Ten Must-Haves for Every Business Website.

Now, let's take it a step further...

with Google Authorship
Create a Google+ profile with additional information about you and your company and you can link your web pages to that profile. Then when people pull up your site on Google they will see your picture and make an instant connection with you. Making your content more personal makes it more likely that people will click your links to learn more.


Learn more about Google Authorship.

with Google Places
Google Places let you enter your business location and will tie that to your search results. When people pull up your site on Google, they'll be connected to a map and additional information about your company. It's another way to give people more information up front and establish a stronger connection.



Learn more about Google places.

with Google AdWords
You've probably noticed Google AdWords and not even realized it. When you do a search on Google, the results at the top of the page or along the right column are often paid advertisements. Google AdWords provides a very targeted way to have your site placed higher than others and there are options for all budget levels.
Learn more about Google AdWords.

We're highlighting Google because they are the leading search engine for traffic. However, many of these options are available in some form from every major search engine. The key isn't the brand behind the action - it's in the action itself. Take advantage of meta tags and related search engine tools and you'll build a stronger connection with your audience.

Feel like we're talking Greek? Drop us a note to learn how TBH Creative can help you take advantage of these marketing tools.

 

Subscribe to this blog