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:
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.
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.
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.