Featured Blog: A Beautiful Mess
Typepad 101: Add Rounded Corners To Your Photos

How Typepad Helped NewPath Consulting Launch A Responsive Website With 3 Cool Features!

image from everything.typepad.com

As part of our 10th Birthday celebration, we're highlighting some great Typepad bloggers. Today's post is brought to you by Alex Sirota, Founder and Director of NewPath Consulting. His 20+ year career has endowed him with a keen understanding of the challenges and needs of small businesses, enabling him to establish a strong professional network of industry leaders committed to supporting and strengthening the small businesses that create the backbone of the world’s economy. Learn more here.

"Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works. The design of the Mac wasn’t what it looked like, although that was part of it. Primarily, it was how it worked. To design something really well, you have to get it. You have to really grok [understand] what it’s all about. It takes a passionate commitment to really thoroughly understand something, chew it up, not just quickly swallow it. Most people don’t take the time to do that."

Steve Jobs' words ring true today more than they ever did. We heard these words and acted on them during the NewPath Consulting website and blog redesign that launched last week. NewPath Consulting hired a savvy young designer, Philipp Schöfer, so we could work to create a Typepad site like no other we have seen. The result is what you see: a beautiful (we think), small business site and blog that is easy to maintain, even though the standard design editor is not used anymore. This is a custom site that even your clients can maintain without messing up the advanced templates!

People ask us why we used Typepad over other popular content management systems. We have been customers since August 2004 and are loyal, but we had our doubts about whether Typepad could be used to design a highly flexible website with advanced features. We could always say that Typepad's ease of use and superior customer service kept us going all this time, but now we can proudly say that we can design beautiful, easy to maintain, custom designs affordably with Typepad.

What are some of the features of the site?

  1. We used various sliders and Javascript effects to ensure content is usable and highly accessible on various parts of the site.
  2. The website is implemented using responsive web design.
  3. Most importantly, the website is easy to maintain, even though it is an Advanced Template design.

Read on to find out the secrets of this design...

1. We used various sliders and Javascript effects to ensure content is animated and is actionable on various parts of the site. The home page "sliders" are actually Typepad blog posts. The text within the red box below is a Typepad blog posts that you can edit, unpublish, draft, and schedule. The arrow buttons allow you to go to the next and previous item in the slider. We have 2 items in the slider now which act as 2 separate blog posts. New slider items will appear (and disappear) dynamically just like your blog posts appear when you publish or unpublish them. Have you ever seen a blog post look like this?

NewPath Consulting Home Page Slider

2. The website is implemented using responsive web design. This is most definitely a "big thing" and it is a marvelous approach to design. You can look at the site on various devices (except a Blackberry for now!) and the site will reposition to fit the size of the browser window whether it be on a computer screen, an iPhone, a tablet or a TV set. The elements will shrink or expand depending on the size of the screen. The fonts will change sizes as well. Elements can be repositioned to make sure the most important calls to action are visibly seen. If you have an iPad check out our website and switch from portrait to landscape and see what happens to the layout. It is very subtle (usually) but it is a great way to make sure your relevant content does not get clipped off the screen. You can see the responsive design in action if you visit the iMac site on a tablet. Note how the iMac is always on the screen no matter the tablet orientation. As more different screen sizes and orientations are being used to browse the web, responsive web design will be a critical component of making sure your site is usable by everyone! Here's an example of the NewPath Consulting website in a wide browser and a much narrower web browser.


NewPath on 1920x1080
On a 1920 by 1080 screen, there is plenty of real estate to expand.


Responsive Web Design
On a narrower browser window, the layout has switched from horizontal to vertical after a resize, dynamically!

3. Most importantly, the website is easy to maintain, even though it is an "Advanced Template" design. We looked at the overall information architecture and our Google Analytics to ensure only the best parts of the NewPath Consulting story is published. If you look at the Services page you will see a slider of the products NewPath Consulting supports. Hover over each button and you see a short description appear below.

Click on the button and you get more details. These "apps" buttons are actually blog posts. We can add and remove them without touching the custom template. We publish a new blog post with the "Applications" category and they appear along side the other apps on the Services page.

NewPath Consulting
We use the date of the blog post to enforce the order of the buttons! The text that appears under the button when you hover over it is part of the blog post, and the image in the blog post is used as the image of the thumbnail. If you set one of the blog posts to draft mode, it disappears from the page. New content is all composed as blog posts using a special set of Categories. Only ones like FAQ and News are actually in the blog. The rest are scattered and used throughout the regular pages, which are now dynamically editable. Want to add a new pricing plan under Plans, publish it under the "Pricing" category. Cool huh?


Categories for the new NewPath Consulting Website
The categories in red are for page content, not the blog!

And it doesn't take a rocket scientist to maintain the results. This is key to the NewPath Consulting approach to helping small businesses with all our tools - advanced design in the cloud with a high level of usability; modern websites viewable on modern devices.

We're 10!

comments powered by Disqus