With over three years of publishing Voice On The Web I started realizing there were some infrastructure issues I had to deal with. I needed to be sure the site itself was more robust and reliable, that Google Searches ended up only with “voiceontheweb.biz” URL’s and that in the rapidly evolving mobile and tablet world, the website layout had to become more visitor friendly on any display.
The first two objectives were accomplished by recently moving the hosting to WebFaction, based on a recommendation of my website developer. He has been using it for customer sites for a couple of years with great success. No more “database cannot be accessed” messages. No more “mail.dicx.com” as the primary URL on Google search results.
At a recent Word Camp Toronto, there were several sessions about WordPress and its support for visitor-friendly displays and navigation on smartphones and tablets. Native WordPress applications, “mobile” themes, plugins and various other options were the focus of one session. There are many choices available. But then my website developer pointed out that WooThemes had recently released Canvas 5.0 with support for Responsive Design which basically allows the publisher the flexibility to set the screen width at which the layout changes such that the sidebar does not get lost and navigation menus become unusable. Now you can more readily view posts and navigate this website on any device: PC’s, tablets (Playbook, iPad and Android) as well as the smaller smartphone displays (iPhone, BlackBerry, Android).
To see how this works from a PC web browser simply narrow your browser window and watch what changes. As shown above, notice that the top menu is replaced by a Navigation menu button and the sidebar content is moved to below the primary content. Still accessible and reformatted to be easily read and navigated on even the narrowest of devices.
Clicking on the Navigation button brings up the top menu in a separate “tab” such that one can quickly access any category or sub-category. Scrolling down on the “narrow” web page will bring you to the sidebar content.
If you have a larger width display, such as a tablet display (especially in landscape mode) the original top menu layout remains with a slight modification. Tap/click on a top level menu item, such as “Skype World” and the drop down menu will appear; tap/click on “Skype World” a second time and the Skype World archive will appear. Obviously tap/click on any other item in the menu and its archive will appear.
One other note: recall the recent post about Skype URI’s. If you go down the sidebar to the Skype “Chat with me” button, clicking on it will open Skype for iPhone/iPad (on iOS devices) and Skype for Android when using Firefox for Android; this does not work for the native Android web browser.
Finally you can have a Voice On The Web button appear on a smartphone’s or tablet’s Home Screen. Simply find the “sharing” icon on, say, Safari for iOS and select “Add to Home Screen”.
Bottom line: hopefully this provides a much better user experience, especially on smartphones and tablets.
Originally I had been contemplating whether I should actually be setting up an iPhone and/or Android application associated with the blog. There’s been a lot of movement in that direction by some blogs; however, the actual user visits to these apps turns out to have been minimal. (I still access GigaOm and Mashable via Safari rather than their respective iOS apps, largely because I am usually following a Twitter link.) Combining Responsive Design with a button to the blog on the device’s Home Screen achieves the same effect at much lower cost and overhead.
The bottom line in this “website vs app” debate is the visitor experience; in this case, invoking the “Responsive Design” feature of the Canvas 5.0 theme appears to have achieved the goal of making it easily possible to follow Voice On The Web on any PC or device.
But how does it work for you? Give feedback in the comments. And have a good Voice On The Web website experience on the device or your choice.