Writing content for visually-impaired users and ADA compliance

So you just learned about the importance of using the American’s with Disabilities Act (ADA) compliance guidelines on your website.  You learned that ADA compliant sites help visually-impaired users surf your site and that Google ranks ADA sites higher than non-compliant sites. Now, you are wondering (1) Is my website ADA compliant and (2) how do I ensure that blind or sight-impaired users can “see” my site?

Continue reading

The Importance of Analyitics

Why are your website’s analytics so important?

The goal of any website is to attract visitors and then show them the information they are looking for and that you want them to see. They want access as quickly and easily as possible.

In order to to do this, programmers and designers follow basic rules and guidelines to remove roadblocks and shepherd users through content in the best possible way. Continue reading

Building Dynamic Single Page Websites

A Dynamic Single Page Website Works for Some, but Not All

When working with clients on designing and developing their website and their web presence, we have to keep in mind what is and what is not appropriate for their audience and industry. This is exactly as it should be, but it also means that we can’t let our programming/design id loose to see what happens. In other words, every website “style” is not appropriate for all website design. We have to pick and choose what works best for our clients regardless of what tricks our developers might have up their sleeve.  However, when it came to the Design Spike website redesign, well, we’ve had a bit more leeway. When we started planning our website redesign, we wanted to do something completely new that used the latest techniques available to us as programmers. Most of what we did was not possible a few years ago.

Classic isn’t always simple

We decided to develop a, mostly, single page website. Single page designs have been around for awhile now, but we wanted a site that contained most of its content on one page while maintaining the functionality of a mutli-page design. We needed each section on the main page of the website to have its own URL and its own navigational link. We accomplished this with:

Navigation

For the navigation we used anchor tags to act as the links to the subsections of the page. This allows the site to function if javascript is disabled. If javascript is enabled, the website overwrites those basic anchor tag actions and smoothly scrolls to the desired content when a navigational item is clicked, instead of instantly jumping to it. That is simple enough and works, but it did not give us the new URLs we want.

History.js

The history.js library allows us to change the url and page title without leaving the page. To make those navigational items change the URL, we have to insert a function call:

History.pushState(page_name, new_pagetitle, new_url)

into the new anchor tag script we referenced above.

Javascript Waypoints

With the history.js script in place the navigation was working as we desired, but the navigation was not the only way to access page content. All of the content is on a single  page. So what happens if you just scrolled to a section? We wanted the URL/page title to accurately reflect the currently visible section, so we incorporated javascript waypoints that trigger whenever you scroll to a new section.

Responsive Design

After all of this, the new Design Spike website was working as we wanted. The next big hurdle was to make the site responsive. We were against the idea of a  completely different site for mobile devices, so we needed a solution that simply reorganized the layout and design when the page width is below a certain point. We decided to replace the anchor link scrolling action with the showing/hiding of content sections if the browser was thin enough. One benefit of our approach to the responsive design was that going from section to section was lightening quick. Instead of having to load a new page when a link is clicked, the website displays content that has already been loaded to the device.

desktop version of responsive website

Responsive Web Design example

Always room for Improvement

There is still work to be done on the new Design Spike website, but what we have now is a wonderful showcase of what is possible in today’s web. And it was a lot of fun. There is no denying that.