Category Archives: Web Development

Parallax Web Design: What I Think

parralax scrollingThe other day I was chatting with one of my buddies and he asked me, “hey Andrew – as a web guy, what do you think of the moving scrolly stuff that sites are doing now?”  He was speaking of the emerging design technique called Parallax scrolling as seen on some new highly visible websites such as Spotify, Sony, and dare I say, Google?  So I gave him my 2 cents and thought, “I should write that down.”  So here I am, writing it down!

Generally speaking, I like Parallax Scrolling.  I believe it’s taking web design to the next level and raising the bar, forcing agencies to rethink their “best-practices” and to continue innovating with the web.  However, I also believe there are right and wrong situations to use Parallax Scrolling.

First, let me speak to the technical side of this new technique.  It uses HTML5 and javascript to achieve a vertical, scrolling, storytelling experience.  Usually, content is presented to the visitor in a linear fashion displaying one topic at a time and in the order that’s the most intuitive depending on the subject matter.  HTML5 is key here in maintaining search engine credibility as it allows content to be separated into <section> tags, each section allowing their own <h1>’s to head each topic.  This allows search engines to take into account each section as a relevant topic of content that this web page covers.  It’s almost as if HTML5 were built for this kind of content presentation!  What this also does is keep a very consistent experience on any device.  Mobile devices work best when scrolling top to bottom, so this allows desktops to adopt the same usability and presentation via the “mobile first” design trend.

So from a technical standpoint, there aren’t any hangups in my book.  This brings us to the question, “when should Parallax Scrolling be used?”  I find it to be most effective under several circumstances:

  1. When content is more important than functionality
  2. When controlling the order by which content presented is of particular importance
  3. When there’s a definitive conversion required at the end of the presentation

Put simply, Parallax Scrolling is best used when the page is dedicated to telling a story of some kind.  If we look to our examples above, we see just that.  Sony is telling the story of their new “Be Moved” campaign.  A visitor may not know anything about it at the start, so Sony can safely present the information one topic at a time to fully explain the story bit by bit, without confusion.  Similarly, the Google Nexus 5 page tells the story of their new Nexus 5 smartphone and what makes it stand out from the crowd.  Google highlights each point of the new phone starting with the basics, then getting into each aspect of the phone that consumers are looking for, ordered by importance. Lastly, Spotify – if a visitor doesn’t know what Spotify is or how it works (for shame!) they can simply scroll down to learn all of the bullets that make it great without being overwhelmed with blocks of text and competing elements.

So when should we NOT use Parallax Scrolling?

  1. When functionality is essential.  I suspect that you won’t be seeing any workable Parallax user interfaces for some time.
  2. When several different topics need to be presented at once.  I don’t believe you’ll see any popular news website benefit from this technique.
  3. When ads need to have a home.  Parallax is so clean, ads just muck up the whole idea.

I’m certain that there are more reasons pro and against using Parallax in certain situations, but these should cover the biggest areas for concern.

So, back to my conversation with my buddy.  As I relayed this information to him, he was unimpressed and is thoroughly set on hating Parallax scrolling in any incarnation.  Ah well, not everyone can be convinced!  Let me know what you think about Parallax scrolling in the comments below.

Image Source

Spotlight On The City of Green, Ohio

City of Green Responsive Website

The City of Green, Ohio (CoG) identified a need to refresh and redesign their old website (http://www.cityofgreen.org) that was originally designed and hosted by TKG.

Green has changed pretty dramatically since the former site was created. It is now a bustling suburban community with more than 25,000 residents. Some small farms still dot the landscape, amid 530-acres of city-owned parkland, homes and subdivisions, office parks, businesses and recreation facilities.

Their website served the community well, but a lack of updating meant that it couldn’t be viewed on some devices, specifically mobile. More than 80% of traffic to their website were returning visitors on a weekly or monthly basis, so it was important that they have a site that could be viewed on the go.

At the same time, and most importantly, the website needed a review and restructuring of the existing content to improve relevance and improve findability (it’s a word, look it up!).

Valerie Wolford - City of Green

For the pivotal task of reviewing and restructuring existing content, we were introduced to Valerie Wolford, Communications Coordinator, as the lead of the project. We have worked with only a few project leads that can compare to Valerie. Her attention to detail and realistic outlook on seeing a project of this magnitude through to the end were invaluable and a joy to see in action. We know it will probably be awhile until we get the opportunity to work with Valerie again, but until then we will be looking forward to it.

Valerie lifted the heavy weight in the beginning of the project by rounding up a staggering amount of factual data from the current website. She polled and interviewed actual visitors and employees alike in an attempt to uncover the true areas to be improved. Out of this research, we determined three core objectives of this project:

  1. Create a responsive design to quickly engage visitors by focusing content to their demographic and interest(s)
  2. Provide CoG with a higher level of stability and content flexibility using APOXE 7, TKG’s latest content management platform
  3. Assist CoG to improve site structure and usability

In order to facilitate the objectives, TKG employed these administrative sections behind the update of the website’s aesthetic design of 17 unique layouts:

 

  • Page Content
  • Community Events (with community submissions)
  • News Articles
  • Real Estate Listings
  • Citizen Alerts
  • Contact Forms
  • Image & Document Directories

This project has come to completion and, for all parties involved, it was a huge success. The City of Green, Ohio will continue to be a progressive, technology-friendly city by improving its web presence by utilizing tools such as search engine optimization, content reorganization and other continued strategies to focus the navigation, tone and user experience on the website.

TKG would like to again extend a thank you to The City of Green, Ohio for the opportunity to work on the project. Congrats on a great site!

 

3 SEO Benefits of Responsive Design

With more and more users accessing the internet on their smartphones and tablets, it has become increasingly important to create websites that work across a variety of devices. Because of its flexible and adaptive qualities, responsive design has quickly become the industry standard for website development.

Responsive design is not only a tool for device adaptability though; there are significant SEO benefits that result from a switch to responsive design. Here are three of the big ones:

responsive

Google likes responsive sites
Google typically favors mobile-optimized sites, especially when those mobile users are searching for local goods and services. Because Google is the world’s largest search engine, and other search engines typically follow Google’s lead, it is a good idea to pay attention to what Google likes.

One website with one URL
From an SEO perspective, responsive sites consistently outperform separate desktop and mobile sites. With a single URL, responsive sites help reduce content duplication issues and improve SEO performance.

Reduces bounce rates
A mobile website can suffer from high bounce rates if users are unable to easily read and interact with the content. Users often get frustrated when sites are not mobile-optimized, so they leave. Responsive designs allow users to enjoy their online experience on any device, which helps reduce bounce rates.

If you would like more information about responsive design, contact the development experts at TKG . And make sure you sign up for our Breakfast Bootcamp on Oct. 16, where we’ll discuss even more SEO benefits of responsive design.

Important Responsive Design Tips

PrintEvery responsive site is a fluid and dynamic creation, so it can be difficult to get a handle on even the basics of responsive design. Luckily, there are a few general tips and techniques that serve as the foundation for nearly every responsive project.

Follow these important responsive design tips and you will be on your way to developing mobile and tablet-friendly websites:

Mobile First
A mobile-first approach to responsive design allows you to prioritize content for mobile devices and work your way up to larger desktop displays. This mobile-first approach ensures that your audience sees the most important content first, no matter what device they’re using.

Content Strategy
The goal of responsive design is to offer the best user experience possible, on all devices. A website redesign is the perfect time to rework your content and make it more readable, valuable and accessible. This emphasis on content strategy shifts the focus of your website development back to the needs of the user and their unique online behaviors.

Initial Design
Once you have a content strategy in place, begin crafting a rough website design on a responsive sketch sheet. The various screen sizes, resolutions and device capabilities available today mean more layouts to plan for. By using a tool designed specifically for responsive design, you can refine your ideas and lay your site’s framework before you begin the actual site development.

Framework
While choosing a CSS framework is mainly a matter of individual preference, incorporating one into your responsive design process offers a number of benefits. A framework can help speed up the development process, reduce browser compatibility issues and streamline your responsive design.

Breakpoints
Once you’ve selected a framework for your site, you must set breakpoints to signal the transition between devices. Some developers set breakpoints based on common screen sizes, but that practice does not totally embrace the flexible and adaptable potential of responsive design. Explore your design to find natural breaks in your content. That’s where you should set your website’s breakpoints.

Scalable images
Images present serious challenges for responsive designs because they need to be fluid enough to adapt to a website’s viewports and text sizes. Resources like adaptive images, CSS sprites and jQuery plugins are available to scale images and interactive media, so you don’t have to worry about warped or disproportionate assets.

If you would like more information about responsive design strategies, contact the development experts at TKG. And don’t miss out on our Breakfast Bootcamp on Oct. 16, where we’ll discuss even more tips and techniques for responsive design.

Have You Considered Colocation?

Colocation ServerFirst, is it colocation, collocation, co-location?

Just spelling the word often poses a challenge! But, what is it?

Colocation is a server hosting option that might be a good fit for smaller businesses that don’t have their own IT infrastructure or want the headache of implementing and maintaining a server.

It allows you to essentially rent space in more robust environment that typically contains large amounts of bandwidth, redundant power, dedicated cooling, etc.

At TKG, we are fortunate enough to have our own data center within our walls. That’s pretty unique for a business our size in our industry. With our colocation services, you can provide your own server or we can even spec one out for you to meet your needs. Either way, you own your equipment.

You then rent the amount of rack space needed in our data center to fit your server(s). We provide the power and the required bandwidth for your needs.

An added benefit of TKG colocation services is that we also have a dedicated IT staff to facilitate set up and maintenance for you, if needed. Often customers looking for colocation not only don’t have the physical resources to support their server, they typically do not have the staffing resources either. This makes TKG a great fit to partner with these businesses to help out in that area.

Some uses of colocation are:

  • To support high-use/high-demand websites and related applications
  • Offsite backup of data to ensure protection
  • Hosting of software applications remotely

Do you think colocation might be a fit for you? If you are currently hosting your website on a PC under someone’s desk or back up all of your critical client and business files to a jump drive, a colocation solution might be a good fit for your business.

Let us know if we can answer any questions for you or if you want more information about colocation.

PCI Compliance – What you need to know

If you have a website that takes payment online, somewhere along the line you likely pay an annual fee for PCI Compliance.

PCI actually stands for Payment Card Industry, but for many it feels like it could also stand for “Pretty Confusing.”

So let’s avoid all of that confusion and get you the facts. Here’s what you need to know about PCI.

If you have a bank account tied to a payment processor for the purpose of accepting funds on your site, your payment processor likely provides the PCI compliance/scanning services.

Here at TKG, we work with a large company called First Data. They are pros at getting a client set up and serviced – and make it easy for the customer and site provider to stay current on compliance. They work with multiple banks so you are not tied down in having to keep your account in one place.

As a vendor, it’s a necessary evil. To be successful online, you almost have to still accept cards as payment. To that end, PCI compliance has become quite an industry over the past several years.

There are now companies that will cold call you as a business and implement scare tactics along the lines of “we completed a scan of your site and noticed that you are not currently protected, please contact us right away” or something similar. This approach always reminds me of the long distance companies “slamming” people years ago and all of a sudden people would start getting bills from another provider.

This is something to be aware of and watch out for. If you receive an “alarming” email or phone call regarding the security of your site – or specifically, PCI compliance – start with your payment provider. This would be the company that actually processes the “swiped” cards online, takes a fee and then deposits funds in your existing bank account. Most of these payment gateway services provide this type of PCI compliance (already in fees you pay them) as part of an annual service.

Most importantly, just know that these panic messages you might receive are not going to impede your business, so don’t feel the need to respond to their offer or request at that very moment. Confirm what services you might already have from your provider so you can likely avoid additional fees and annual hassle from an additional vendor.

5 Business Advantages of Responsive Design

responsive design

In online marketing, there has been a serious behavior shift toward mobile and tablet browsing. With readers increasingly accessing websites on their smartphones, tablets and computers, responsive design has become an important part of the online user’s digital experience.

Check out our list of the 5 major business advantages you can achieve by switching to a responsive website design:

Builds tablet and mobile audiences

Traditionally, when mobile audiences would access a website, they would be re-directed to a device-specific site. But with responsive design, one site can be developed and implemented across all devices. As tablet and mobile sales continue to grow, responsive design will become increasingly important for reaching these growing audiences.

Enhances user experiences

Responsive design allows site owners to deliver quality content to audiences across multiple devices. On responsive sites, pictures are proportional, text is readable and buttons are large enough to click – no matter what device your visitor is using.

Improves SEO

When you switch to a responsive site, all of your efforts can be focused on a single set of hypertext links and a single SEO strategy. Consolidating your efforts will save you time, money and make your site more popular among major search engines.

Increases sales and conversion rates 

As your audience becomes familiar with your site’s navigation, the improved user experience could positively impact your conversion rates. Responsive design removes some of the functionality and performance issues that multiple sites can create, so users are more likely to see their conversions all the way through.

Streamlines development and site management

Developing a single responsive site takes a lot less time and effort than creating a traditional site and a standalone mobile site. But responsive design is not only a time saver in the development phase; it also makes sites easier and more cost effective for clients to manage on the back-end.

Interested in responsive design, but don’t have the tools to develop a responsive site yourself? Don’t worry. Contact the development experts at TKG, and see how we can help you achieve your business goals.

And don’t miss our Breakfast Bootcamp on Oct. 16, where we will talk in depth about the benefits of responsive design.

Meet Josh Moyers, our new Front End Developer at TKG

Josh Moyers Bio ImageJosh specializes in HTML5, CSS3, jQuery, SASS and responsive design. He studied web development at Stark State College and gained experience as a web developer and IT administrator while working in Akron for six years.

Josh took a break from web development and was in the Army as an Infantryman. He was stationed at Ft. Campbell, KY with the 101st Airborne division for three years. Nine months of those three years were spent deployed in Afghanistan on the Pakistan border

“We do our best to produce the best sites on the web, and in order to do that we need quality front end developers. I believe we found one with the recent hiring of Josh Moyers. He is homegrown, has travelled the world serving our country, and has quite a few years of online development experience under his belt,” said David Brown, director of Client Services. “And when he wears a suit, which we normally don’t do around here, he looks like a young James Bond!”

Welcome to the team, Josh!

Google Update: Executing and Rendering Javascript

In terms of annoyance, JavaScript may have ranked right up there with animated gifs, or <blink> dancing hamsters back in the mid-90s to early 2000’s.

A developer’s stance on pure JavaScript centered on the differences between engines and browsers, or possibly security concerns since the code is executed by the client instead of the server and it could expose their machine for malicious purposes. End users wanting to accomplish something on a webpage might have been greeted with butterflies floating across the screen, endless popup boxes or pages that simply didn’t work in their browser.

Overall, JavaScript had a horrible reputation and (in my opinion) needed a few saviors to keep it from the technology graveyard. Enter frameworks, AJAX and standards.

Over the last few years, JQuery, Mootools, Dojo, Node and a host of other frameworks have distanced developers from the pain of IE vs. Chrome vs. FireFox by adding a consistent layer of methods and properties that deal with the browser differences under the hood. Taking browser differences away allows developers to focus on maturing the use of JavaScript – and gone are the butterflies and Rick-Roll popups. Form field validation, handling responsive design for different devices and parsing AJAX now compliment the end user experience instead of hindering it.

Standards have also been added into these browsers so there are less and less differences in the interpretation of JavaScript. It has now turned into a speed contest between browsers to tout how fast their rendering engine is. All of this is pure benefit to the end user. It creates consistency and allows users to choose what browser they like the best instead of the webpage forcing them to use a particular one.

The modern web could not exist without AJAX. This crucial technology allows small requests and responses to happen within a web page without a complete page reload. Maps, chat feeds and news services all rely on this technology to create a fluid user experience. The workhorse for this, however, is JavaScript. The events of the user trigger JavaScript functions to initiate the AJAX request, and it’s up to JavaScript to then change the webpage to do something useful with the response.

So why does any of this matter for your business and marketing strategy? Perhaps the final piece of the puzzle to solidify JavaScript as a key component in websites is that Google announced that they are now executing and rendering JavaScript as they crawl websites. Until recently, Google would look at only the HTML of a page, relying on solid markup and content in that HTML to rank it. Google has recognized that times have changed and now the importance of a site isn’t necessarily limited to that static content. JavaScript and AJAX may be creating a different page for the end user that Google would not see without executing the JavaScript also.

Take a look at the following picture. On the left is what a normal user sees when they visit this certain webpage. On the right shows what that same page looks like when JavaScript isn’t executed. It is quite a difference – and it creates a huge difference in experience and content.

javascript

Google’s execution of JavaScript is a welcome announcement – and I, for one, am thrilled that JavaScript is being recognized by a major search engine as a component of web development that is important enough to include in their crawling and ranking process.

“I need a new brandsite!”

brand strategyA what?

Working with as many clients as we have – and over as many years as TKG has been doing it – we’ve learned some things. Hence, we have this blog.

Often, something like this unfolds: We start working with the client on their new website. They say they are after a fresh look that better represents their product or organization.

No problem, we’ve got that covered. Responsive design, too? Check!

So we’ll move through the kickoff portion of our new project process and ask the client to send us their brand guidelines, including logo, colors, etc. At some point in this process the client will often mention, “oh, by the way, we hate those also and what we have does not target our market.”

Ahh. I see.

So if you are out there reading this, and you are a business in this predicament, let’s take a step back. Let’s start with the brand first.

Why?

Well, if the brand you have currently is really outdated or targets a market that is not your focus anymore, you’re going to need to re-do this before your website anyway. It not only affects your web and online marketing efforts, but also your business cards, letterhead, print items, wearables, signage … and on and on. All of these things need to be current and on target for your new online presence to take hold and be effective.

What now?

Get it done. TKG can help you determine what your brand is missing and develop new collateral that represents the business or organization you want to be today. Work with our team to create your new face so that you can put your best foot forward in the digital space and beyond. Brand, check!

Then what?

Bring that new brand online and proudly show it off to the masses, while your business reaps the benefits of your hard work.