Category Archives: Web Development

Real Time Responsive Design Test

Responsive Design – it’s not just a buzzword. We’ve written quite a few blog posts on the subject here at TKG. We’ve stressed the importance of providing a powerful, functional web experience whether the user is sitting in front of their PC or in the back of a taxi cab miles away from home.

Chances are if you are already working with an online marketing firm, you know whether or not your website is, in fact, responsive. But for the small business owner who doesn’t have a bevy of web experts at their disposal, this can be a tricky question.

Enter the Mobile Web Transmogrification Portal! The what? Transmog is a simple tool that generates a real-time working preview of your website as it would appear on various mobile devices. Preview options include the iPhone 4S, iPhone 5, iPad 2 and Samsung Galaxy S3.  Simply plug your URL into the tool and choose the display choice. You can toggle through the different display types and click through to any page on your website. The display updates real time so you can see whether your entire site is responsive or if your homepage is the only piece that is user-friendly.

TransMogScreenCap

We’ve captured a few examples of what a nice, responsive website looks like on the iPad and Galaxy using this tool. Give it a try! If you aren’t pleased with what you see on the display, you know where to find us!

TransMog Responsive Test - iPad TransMog Responsive Test - Galaxy

Do What Works but Don’t Stop Wanting More

As an account manager of several web marketing clients, my goal is for them (and us) to be successful in growing their businesses. And we do that by aligning our strategy with their company goals, becoming partners who work together in this mutual aim.

Most of my customers want to sell more widgets or get more sales leads, and so we get them more website traffic so they can do just that. Who doesn’t like more customers, right?

If your company website leads or sales are growing, especially by having a content and search engine optimization (SEO) strategy, then continue to work your plan. That’s good business sense.

But let’s not stop at just continuing to do what works. There’s always more. It’s time to try new things.

stock-footage-new-ideas-hand-drawn-lettering-with-a-simple-stylized-bulb-symbol-whiteboard-animation-on-whiteWhen it comes to making money, one of my favorite things to do is to try new ideas. It’s fun to test them out and see if you can get a return on investment. Online marketing is no different: Find something that works and expand it. Then, find something else that works and expand it, too. Repeat the process.

Let’s assume you have an SEO and content strategy working for your business. Have you tested some paid digital advertising, yet? What about social media marketing; is that right for your business? And by social media marketing, I mean true strategy that drives results – not just playing on Facebook. How about email marketing to current customers – might you get them to spend more with your company with repeat orders?

There are so many avenues to explore when it comes to growing your business. If you haven’t gone down very far down those roads, there are likely goldmines to uncover.

Above (and Below) the Fold

For years I would preach about keeping all relevant content “above the fold” on the home page. If you are unfamiliar with the phrase, it simply refers to the area presented to visitors when a web page loads in the browser window. Wikipedia might explain it a little better. Anything included below the fold was most certainly lost forever. Never to be seen again. Yikes!

Why did I hammer this concept home for several years? Because it was truly believed that people didn’t like to scroll down a page to find what they were looking for. And maybe that was true way back when.

I think that concept is one dimensional and isn’t very true anymore.

While you still want to keep your biggest message on top, you can include many details on a page and people WILL scroll if they are motivated to find out more. Another reason to disregard my old advice is because search engines look at the entire page and index content no matter where it’s at. If it’s relevant, then it deserves a place at the table.

I think a large player in this arena is the adoption of smart phones and the necessity to scroll on those devices. People have become accustomed to viewing websites on smaller screens with the need to scroll. Have you ever spent 5 (or 60) minutes scrolling through Facebook? Yep, you’ll just keep going without any worry.

Scroll On

If you’ve lived in fear of the fold maybe it’s time to reconsider things. You may be missing an opportunity to get great, relevant content on your home page that will ultimately help convert potential customers. Not sure where to start? Call us and we can look at your website together.

 

Responsive Design

Over the years, the ways in which we view the internet have changed dramatically. I still remember the days when my family dialed up the internet on our old Compaq, and now users have the option to access the internet virtually on their TVs, PCs, tablets, smartphones, netbooks or even their refrigerators. The point is, users are accessing your site on a range of different devices, and you want to be seen everywhere you can.

If your company is willing to invest the time, money and resources it takes to create a digital playground where customers can go to discover your products and services, it’s worth adapting that investment to display correctly on all relevant devices.

According to a recent study by the research firm IDC, there were over 1 billion smartphones sold worldwide in 2013, and according to Gartner, over 195 million tablets were sold the same year. With that many mobile internet users in world, it is important that your website is equipped to adapt to those users’ mobile screens.

So what’s the takeaway? To stay current and relevant in the digital space, it is important to consider responsively designed websites. Responsive sites are quickly becoming the industry’s standard because of their ability to adapt to changing technologies, and bonus: they have all sorts of residual business benefits.

Have additional thoughts about responsive design? We’d love to hear them!

Viewing-platforms

 

Image Credit

Getting More Leads and Sales from Your Company Website

As I have shared previously, having a business website that caters to desktop, tablet and smartphone users (responsive design) is crucial as Google is giving more weight to sites that offer a great experience to all of its visitors. So, let’s say you’ve invested in your company website to do just that – what’s the next step?

More Traffic

Obviously, you want people to find your website and pay it a visit. You do this by having a good SEO/content strategy in place; and you can also bring more traffic to the website through paid advertising, social media posting and email marketing.

So let’s say you have good traffic coming to your site. What are you doing with it? Is your website generating leads? Is it creating sales for your company? If not, then you need to look at what’s called “conversion optimization.” ‘Conversions,’ for the purpose of this article, is a fancy word meaning leads and sales – how someone makes contact with your business. If you have traffic, but you are not receiving leads or sales, then there is a disconnect somewhere – and you need to find it.

Leads and Sales

There are three primary ways to generate leads from your website: phone calls, form submissions, and live chat. Phone numbers should be prominently placed and easy to find by site visitors. Forms should be simple and quick to fill out so users can send you contact you. And chat is icing on the cake – a simple way to get instant gratification if you are a website visitor with questions. We have found that people like to reach out to our clients in different ways, meaning each person has their preference. Why not cater to all three?

Let’s say you have an e-commerce website; you don’t want leads, you want sales. Make the experience smart, easy and intuitive. Does your current e-commerce website offer features such as the ability to order from the product listing page? Can I set-up an account and save my past orders? Is the checkout process simple and painless? Can I get free shipping or a discount on larger orders? Are you offering as many products as possible to potentially expand order size? Does your e-commerce website convey the feeling of trust by offering a way to contact your company, a return policy, testimonials, product reviews, etc.? And do you offer live chat to help buyers overcome any ordering challenges or questions?

Conclusion

Challenge yourself to objectively review your website. Determine whether or not you need help with traffic or conversions; then, take the necessary steps to improve its performance. You may be able to make some changes on your own or you may need some help from a web development/web marketing company. Whatever the case, DO something. The internet is not going away, and I can almost guarantee your competitors will be looking at this, too. Why not beat them to the punch?

The Return of Frames

20 years in the web design business has allowed me to see a lot of change.

So, who remembers frames? You know that clunky, multi-document approach to leaving branding and navigation in place while the user scrolled?

I have fond memories of heated debates I had with our team years ago about frames. Believe it or not, I was a fan of the evil technique. I always felt that leaving navigation and branding in place for the user had some real value.

Navigation is essential for guiding users through a site’s content, and an effective and useful navigation must be accessible and intuitive. Frames allowed essential website elements, like branding and navigation, to stay in place while the rest of the website content moved around it. This made it easy for users to find what they were looking for, no matter where they were on a site.

Of course, I was never a designer or developer, so I didn’t have to deal with the nasty details of making a frames site work.  Let alone the mess that they made for the search engines if not done properly.

As it turns out, a little over a decade later, the concept has returned.  Today it’s done by setting a fixed position of elements from within the CSS.  It’s fair to point out that it’s much cleaner this way and doesn’t require the multiple html docs that frames did.

I’d be willing to bet that many who argued vehemently against frames years ago, if they are still web developers today, have either built or will soon build a site with fixed navigation and branding.  They don’t even realize that they are helping to bring back an old technique they once fought so hard against.

Have additional thoughts about the return of frames? We’d love to hear them!

Microsoft’s Move to Cross-Platform Development

Satya NadellaMicrosoft recently shocked and excited developers with a few major announcements. They are open-sourcing the ENTIRE .Net server stack, and creating officially supported versions that will run in Linux and Mac server environments. Everyone was taken aback by this because just a few years ago then-Microsoft CEO Steve Ballmer famously said that “Linux is a cancer.” Ballmer stepped down earlier this year and Satya Nadella is now leading the company. His quick and decisive actions to make Microsoft technology obtainable to many platforms shows this is a new Microsoft and it’s worth revisiting what Microsoft has to offer.

There is no doubt that this move is designed to keep Microsoft relevant in a world that is no longer ruled by PC operating systems. Developers have many choices of languages and environments and by open sourcing .Net, Microsoft hopes to keep their cloud platform (Azure) competitive by increasing the flexibility of its developer technology.

This move worked for them in the past, and I see no reason why it won’t work today. Back in the early DOS days, Microsoft catered to developers because they knew without compelling applications to run, their operating system would become useless and irrelevant to the end user. Their efforts to create tools and technology developers wanted to use resulted in a world at one point saw over a billion people using Windows and countless applications daily.

Putting my Microsoft fan boy status aside for a moment, it seems to me that as a developer I can more effectively create products and solutions that take advantage of a single platform than I could by trying to create the same solutions multiple times depending on what server the finished product will run on. I know this type of thinking is exactly what Microsoft is hoping for, but I’m only one developer. Time will tell if this bet pays off for them in the long run.

We will be trying out .Net and Linux in the coming months. There will be benchmarks, and testing if it really is a “write once, run anywhere” promise finally fulfilled. Stay tuned to learn what we find.

Satya Nadella image courtesy of Microsoft

Get Inspired (and Learn Something New)

When you catch yourself staring at a blank screen, unable to generate ideas, where do you get your inspiration from?

Often times, I take myself out of my digital environment and look to physical products that are built to solve problems or provide solutions for people and study what goes into them.

When planning a website redesign, it’s difficult not to rely on the re-use of features from a previous project. While this inherently has benefits (employing solid, user-tested patterns for features like searching and product list sorting), it can feel like a crutch. Seeking out fresh ideas in the vastness of the inter-webs can even prove trying even for the seasoned developer.

codropsRecently, I happened upon Codrops, a website full of articles, tutorials and demos for web developers and became inspired initially by its fresh perspective on traditional website features.

After looking through several of the demos, I was drawn to continue looking. In addition to the entertaining topics focused on user experience and interaction design, the articles are well written for quick comprehension. The website features do rely on the latest technology available in web browsers, which is increasingly becoming the norm, so it’s good to be looking ahead.

arrowI’m compelled to share this with you so that you can be inspired too. The demos are presented in a simple way that allow you to browse from one to the next (just jump in here and continue navigating with the arrows – which is a great user experience in itself).

Perhaps when it comes to redesigning your website next with TKG, looking for additional ideas here will allow you to contribute in the selections used in making your website an engaging and effective solution for your visitors.

So long, blank screen.

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!