AngularJS First Steps

AngularJS in combination with Bootstrap is such an improvement to the standard trio of HTML, CSS and Javascript. Under the covers, the trio is still there of course. But the new AngularJS framework provides a structure which helps organize all the actions in the Javascript, so you can have a more complex web app without a huge increase in development effort. The most noticeable change is the speed of actions, because there is no page reload whenever you click on a control (try the navigation buttons above). Most actions can be handled in the browser, and just occasionally is a page reload needed.

Bootstrap’s big win for me is in responsive layouts. Responsive, meaning that you can visit the site with a small mobile screen or with a large PC screen, and the site will have a similar appearance. There is one package of source code supporting all device sizes. Boostrap provides a grid layout system, which simplifies the code. It is more straightforward than the underlying relative and absolute positioning, and obsoletes the old methods of layout by table or (egad) frames.

The responsive layout on my site is not perfect. On a desktop, I would prefer to have the navigation controls in the left column, but on a mobile I prefer them at the top of the main column as above. There is probably an easy way to do that, check back soon.

But what about SEO. Will Google be unhappy that the content is conditionally visible? Google had problems with sites which had deceptive SEO in the form of hidden or small-font text. This page is not deceptive in that way, but it could trigger the alarms at Google. This issue is TBD.

What about browsers with JavaScript disabled? Then all pages will appear, and that is a good fallback.

What is content is loaded dynamically using AJAX XHR from a WordPress server? In this case, the HTML file does not contain content, but instead has (view the source to verify!):

<div ng-bind-html="pages[0].content.rendered" ></div>

Then SEO might be a challenge, because we would depend on the Google spider bot to execute our Javascript. That might be OK; I hear that it does so. Yes! see Google’s rendering here.

I will check my server logs in the next few days to see when the XHR gets requested. But will Bing and other search engines also execute our Javascript? I will provide updates on this ASAP.

What about Google’s Webmaster Tools Data Highlighter? Unfortunately, it does not work for me at the moment.

What about the Back button? Site navigation using the menu buttons is not saved to the browser history, and our Javascript will need to update the history by making calls to the browser API. This is also TBD.

What about older browsers? Then all pages will appear, and again that is a good fallback. Some browsers showing this problem are MSIE 6, Konqueror 4.8, and Lynx.

Leave a Reply

Your email address will not be published. Required fields are marked *