In mathlib.js, MathJax is not loaded for browsers that support MathML. This assumes that math will be coded only in MathML.

However, when MathJax is loaded for browsers that are not do not support MathML, MathJax is configured using TeX-AMS-MML_HTMLorMML. This allows math to be coded in TeX, LaTeX or MathML, but only for browsers that do not support MathML. The level of support differs between browsers that do and browsers that do not support MathML.

I suggest that either:
a) the MML_HTMLorMML configuration is used and only math coded in MathML be officially supported, or
b) MathJax, with the TeX-AMS-MML_HTMLorMML configuration, is used regardless of the browser's MathML support.

In IE8 the .find function below works sporadically. Reloading the page many times in quick succession will cause the menus to work about 1 in 12 to 20 cycles. On our lab machine with IE8 a better success rate is obtained--about 1 in 10.

/* [Main] parse mega menu and establish all ARIA and Navigation classes */
$scope.find('ul.mb-menu > li').find('a:eq(0)').each(function (index, value) {

Using the code below above the Mega Menu loader will give expected alerts in Firefox but not IE8. IE will enter the code block sporadically as described above. ul.mb-menu is part of the static page so it is not an ajax loading issue. I have confirmed that the Ajax does load the include files for the menu. No errors are thrown. Looks like an alternative to .find will have to be found. I tried .filter() with some success, but it only entered the code block sporadicaly. Where is _exec : function (elm) being called, and what element is being passed to it? I have experienced similar problems in IE8 with the WYSYWIG editor (TinyMCE) in our CMS.

$scope.find('ul.mb-menu > li').each(function(){
alert("foo");
});

/* [Main] parse mega menu and establish all ARIA and Navigation classes */
$scope.find('ul.mb-menu > li').find('a:eq(0)').each(function (index, value) {
......

On these pages, down in the Form legend section where there are the check boxes, should the text be displayed before the check box? I know this is not a form page and this template is used on on pages, just wondering if it will confuse people.

There is a comma at the end of the line that causes an issue for IE7's parser
https://github.com/wet-boew/wet-boew/blob/master/src/js/settings.js#L10

When JavaScript is disabled, the contents of the tabs does not show.

When I load the tabbed interface using IE8 or IE7, the contents of the tabs do not load.
Note: this problem does not occur if you are using IE9 and switch to IE8 or IE7 using the developer tools.

Because of the order, your build script has to compile project that should not compiled on their own (the base css since its only included in thr theme). Since SASS is an extension to CSS, you could adapt the build script to merge the SCSS first then compile it. This would make that only a couple of files are com

I'm new to the WET 3.0 framework, and I'm trying to understand how JQuery plugin integration works in this new version. I'm trying to get the deselectableRadioButtons plugin to work on WET 3.0. I have noticed that the javascript is loaded at the bottom of the page (with a new settings.js file) and the progressive enhancement section is gone from the header. Is the settings.js file where we specify our plugin class name? And where should the plugin be located in the folder structure? (before it was just in a plugin foler under the js folder). Sorry, I'm just trying to wrap my mind around the structure as a new user.

On Firefox/3.6.17 the "Archived Content" notice coloured background does not appear nor does the (fade in) notice at the top of the window.

Hey,

I know the Web Usability Theme supports 3 columns in the front page view but was curious about how to go about this for other pages.

Front Page View (3 columns)

body class = wb-body
gcwu-content (main two columns)
gcwu-aside (1 column right)

Other Pages View (3 columns)

body class = wb-body-sec
wb-main (main 1 column)
wb-sec (1 column left)
???

How would I go about doing this in the other pages view?

It seems like using the period instead of the dash for minified file names is more standard. Some applications will do runtime checks and substitute "filename.js" with "filename.min.js".

There is one thing I don't understand in the GC Usability Theme. It's about the margins with forms. Why do elements have left and right margins of 10 pixels in the document, but have no margins when in a form, especially for the headings (h1-h6) and "p" elements ? I don't understand why the form element has margins. Shouldn't it be considered as a normal div (normal container) ?

This causes a bigger issue with dotNet. The whole dotNet web page is a form. The first thing in the body is a form element and ends with the form closing tag.

Use this page as an example : http://wet-boew.github.com/wet-boew/demos/theme-gcwu-fegc/2col-megamenu-theme-gcwu-fegc-eng.html
Try the put the whole page in a form and see what happens, this what happens in a dotNet web page. You can do it by editing the HTML with Firebug, may be simpler to try.

The result is that you have white stripes to the left and right of the window (form margins) and headings and paragraphs in content don't have margins.

In case anyone wanted a quick example of seeing SASS in action. (This example being zen grids from http://zengrids.com)

Go to src/base/sass/ directory and create a new scss file called grid-example.scss

Paste the following in the file:

@import "zen";// Import Zen Grids with this statement.

$zen-column-count: 7; // Set the total number of columns in the grid.
$zen-gutter-width: 10px; // Set the gutter size. A half-gutter is used on each side of each column.

.container {
 @include zen-grid-container; // Apply this mixin to the container.
}

.aside1 {
 @include zen-grid-item(2, 1); // Apply this mixin for each grid item in the container.
}
.content {
 @include zen-grid-item(4, 3); // Make this grid item span 4 columns. // Position this grid item in the 3rd column.
}
.aside2 {
 @include zen-grid-item(1, 7);
}
.footer1 {
 @include zen-clear(); // Apply this mixin to start a new row.
 @include zen-grid-item(3, 5);
}
.footer2 {
 @include zen-grid-item(4, 1);
}

Now in command line go to project/src/base and type either ant compile.sass (compile) or watch.sass (polling + compile)

The css directory will be created for this folder and the new grids-example.css will have the following inside it (will validate in all browsers ie6+ pretty neat eh!)

.container:before, .container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}

.aside1 {
  float: left;
  width: 28.571%;
  margin-left: 0%;
  margin-right: -28.571%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

.content {
  float: left;
  width: 57.143%;
  margin-left: 28.571%;
  margin-right: -85.714%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

.aside2 {
  float: left;
  width: 14.286%;
  margin-left: 85.714%;
  margin-right: -100%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

.footer1 {
  clear: left;
  float: left;
  width: 42.857%;
  margin-left: 57.143%;
  margin-right: -100%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

.footer2 {
  float: left;
  width: 57.143%;
  margin-left: 0%;
  margin-right: -57.143%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

We can of course using any helpers from Sass + Compass + Zen Grids just like this.

English example, IE7, error message "'JSON' is undefined" using debugger following is highlighted: "window.name=JSON.stringify((new Date).getTime())}"

Cannot reproduce the error

Good Afternoon @berubs,

Here's the updated wording for the archive template:

Archived content
Information identified as archived is provided for reference, research or recordkeeping purposes. It is not subject to the Government of Canada Web Standards and has not been altered or updated since it was archived. Please contact us to request a format other than those available.

Contenu archivé
L’information dont il est indiqué qu’elle est archivée est fournie à des fins de référence, de recherche ou de tenue de documents. Elle n’est pas assujettie aux normes Web du gouvernement du Canada et elle n’a pas été modifiée ou mise à jour depuis son archivage. Pour obtenir cette information dans un autre format, veuillez communiquer avec nous.

We're still waiting for the short pre-notification box text to go to translation, I will log a separate ticket for this.

mb

The build script points to a jruby.jar URL that seems to be on a cloud instance that isn't online anymore.

@pjackson28 and I cloned the repo from a fresh location and the build fails because of this.

@sylus can you try finding a more reliable source?

I'm thinking of making a fork/tweak to the mega-menu JS to move hoverintent from the individual menu items to the menu as a whole. Why? Because the delay as I mouse between menu items is noticeable and awkward, particularly compared to how smooth the site is when using a keyboard and tabbing.

My thinking is: (1) Something like $('ul.mb-menu').hoverIntent(...) to add a class to that top-level UL whose only job would be to show or hide the drop-down in combination with existing code re-written to use :hover instead?

-- What follows is a sidetrack down a discussion of how the menu could be refactored to support JavaScript-impaired browsing. ;-)

Actually, thinking about the non-JavaScript :hover use case, you'd want a toplevel class to signify that you're performing the hoverIntent check, which should override default non-JS :hover, then have that class removed with JS to show the :hover. So it'd be something like UL.mb-menu.mb-hover-prevent which overrides the :hover, preventing it from loading until the hoverIntent call determines the :hover was intentional, removing the class and allowing the :hover to proceed as normal.

This way it also works with JS disabled, where it falls back to non-megamenu currently. And ... now that I think about it for longer than 10 seconds, I realise that the reason it fails with JavaScript disabled is because it loads the mega-menu using JavaScript. (Duh. Sorry.) While it's true that the BostonGlobe.com does use this technique to great effect, they do put giant images in the mega-nav. If the intent here is to stick to text, as is currently in the template, then I'd much rather keep the text inline, and likely will in my implementation. Without JavaScript, navigating quickly throughout a site using a menu becomes much more important as most of the widgets on pages that flash and show you nice things to click on will stop working in one way or another, ideally gracefully falling back as it does when the screen is resized to mobile. (Though a nicer presentation would be desired.)

Viewing the share widget on a Samsung, the English example, after the page has loaded and is viewable, the screen then disappears and I get phone symbol icon and the page does not load.

Hey so I added a very basic .travis.yml build but require one last step to get it working from an administrator of the repo. (You can see how it works on my sylus fork @ http://travis-ci.org/#!/sylus/wet-boew)

The last step(s) to get this working for wet-boew is to:

a) Login to http://travis-ci.org with github and go to profile page (take note of username + token) since we are an organization we have to do the longer install of hook. Normally you can just flick the switch when logged in.
b) Go to https://github.com/wet-boew/wet-boew/admin/hooks
c) Click on the travis service hook near the bottom
d) Paste the username (admin of repo only) + token + click on active on the new fields that appear
e) Click update settings
f) Run test hook

Wait a few minutes and go to: http://travis-ci.org/#!/wet-boew/wet-boew or go the readme.md file in github and click on the build status link

The status of this built will also be shown at the top of the readme.md and the built out occurs after every commit. We can do alot more stuff in the .travis.yml file such as notifications and various GUI and Headless Browser testing using xvfb down the line.

1. Currently, the mobile view activates based on width and as such, becomes active while browsing on a desktop. Is that intentional or could mobile browser detection be added?
2. Any plans to include a link back to the desktop version of the site for those that would like to opt out of the mobile view?

Hey guys, I hate to reopen this debate but would be nice to add further visibility to our architecture choices.

I have worked quite a bit now with both SCSS and LESS and I have to say I really think we should be going SCSS.

Pro's

1. Compass (We were too quick to dismiss this framework it is quite simply amazing and would reduces css bloat)
2. Maturity (Far more mature then LESS from what I have seen especially with support for Netbeans and various IDE's)
3. ZenGrids @ http://zengrids.com/ uses SASS and is what I am using to replace the grid system we are currently using and hoping would be adopted once I do a demo (please take a look at this framework though as I think would be impressed)
4. Good comparison here: http://wrangl.com/sass-v-less

Basically preference for SCSS boils down to the comphrensiveness of technical features, robustness of the language and COMPASS. SCSS is a more mature programming language in that it provides conditional statements and operators and various features like selector inheritance. Working within the the Compass environment, SCSS developers can either reuse existing frameworks like 960gs or create their own custom CSS framework.

Good Discussion Here at: http://drupal.org/node/1550808

The rest of the header links use # anchor reference, but the Section 2 header link points to different files. I came across this trying to figure out #55 and wonder if this is a bug or by design?

Selenium is a UI testing framework that allows tests to be written in various languages to test web applications http://seleniumhq.org/
It allows authoring of tests using the IDE in Firefox, but can also test against multiple browsers. This should ensure issues like #55 and #53 are caught quickly.
It can work with Travis https://github.com/jarib/selenium-travis

AJAX HTML includes will increase page-views in web analytic software. For those departments using Webtrends this will substantially impact their allotted page-views thereby forcing them to buy more. Changing the file extension to something that is not counted should remedy the problem. Using .inc or perhaps no extensions. We are dealing with this problem on our intranet, but have not yet decided on an extension.

Hey I know everything is still in alpha so obviously lots of things are still broken. But thought I would start to keep a log of problems I have noticed.

One of them being that the JS + MegaMenu is completely broken in IE8, possibly other versions of IE.

I have confirmed with the demo examples.

The Mega Menus are now not displaying in Firefox and IE 8 or IE9. It would appear the html brought in by the Ajax call is not getting updated.

<!-- DataAjaxFragmentStart -->

<li><section><h3><a href="#">Section 1</a></h3><div class="mb-sm">
<div class="span-2">
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
<li><a href="#">Item 1.5</a></li>

...

I would appear that the code below is not executing. Likely because it cannot find the Ajax imported mb-sm class above. I think this broke just after the last IE8 fix last week. Any thoughts?

/* [Main] parse mega menu and establish all ARIA and Navigation classes */
        $scope.find('ul.mb-menu > li').find('a:eq(0)').each(function (index, value) {
            var $childmenu, $elm;
            $elm = $(value);
            $elm.addClass("knav-" + index + "-0-0");
            $childmenu = $elm.closest("li").find(".mb-sm");
            if ($childmenu.size() > 0) {
                $elm.attr("aria-haspopup", "true").addClass("mb-has-sm").wrapInner("<span class=\"expandicon\"><span class=\"sublink\"></span></span>");
                $childmenu.attr("role", "menu").attr("aria-expanded", "false").attr("aria-hidden", "true").find(":has(:header) ul").attr("role", "menu");
                $elm.append("<span class=\"wb-invisible\">" + (pe.dic.get('%sub-menu-help')) + "</span>");

I posted related issues here:
https://github.com/Web-Experience-Toolkit/Drupal7-WET-Distro/issues/101#issuecomment-5777684
http://drupal.org/node/1580486

I think the megamenus in http://www.mass.gov/portal/ work more consistently with the rest of the navigation. Right now it's a new navigation pattern that isn't commonly found on other sites.

I like the idea of also giving people access to the arrow keys, but I'm sure that most folks are (at least at first) going to assume that the menu simply isn't keyboard accessible.

I'd suggest having tab based navigation within the megamenu (as well as the arrow keys), or at least some descriptive text that pops up on focus (like provided by mass.gov) to explain to people how to navigate it.

For people who use GoC sites regularly this is going to be something they learn, but I'd like it to be more discoverable for people who don't use government sites all that often.

Just wanted to confirm that the markup has changed for v3?

For instance alot of the classes have been rewritten using gcwu-* and wb-*.

I have performed the changes on the Drupal end and everything still works but noticed the intranet css has yet to be updated to reflect this change.

In Drupal I have a small problem with the way we have to add id attributes to some of the js and css scripts in order to determine paths. The problem has to do with drupal _ add _ (css|js) in that it does not allow me to add id attributes. While I can physically place the correct markup in the template I prefer to use the above function so Drupal is aware of these files and can cache them.

Currently my work around is that I pull down this repo and apply a patch to it (https://gist.github.com/2766372). This is obviously not ideal as the pe-ap.js file changes continuously.

Would it be possible to set some sort of conditionals so pe-ap.js checks in settings.js to see if the values are set there before it tries to use getelementbyid (or some other workaround)?

This has been kicking my behind for a while now! :p

Hey, was curious how you guys are testing your builds / deployments.

I am keen on starting the github-flow for when I move the Drupal repository over. Will also be starting fresh with this proper workflow so that is also exciting.

My only problem is that github-flow expects that the deployment should be tested whenever a push to master happens. At this point it then seems like I should setup Jenkins. While I do have a server I can use for this, was wondering what you guys are using for CI.

If I move to the share page button and arrow beyond the button Jaws will speak all of the content even though the content has not been displayed on screen. This behaviour is different than that of NVDA 2012.2. If you arrow beyond the button, the content will be displayed on screen and arrowing through the content works as it should. This is perhaps because only some actions will trigger auto forms mode in Jaws. reading through a document sequentially with the arrow keys does not seem to activate forms mode like the tab key does.

I notice that arrowing beyond the last link causes the focus to move back to the start again. Is this intentional? should arrowing beyond the content take you out and cause the menu to go away?

Until you mentioned it in your post, I was not aware that pressing escape would exit the share widgit content. I was tabbing back to the button to close the widgit. I see that pressing tab will also serve this purpose.

I am suggesting that this content should be availible to screenreaders only after the share page button is activated. In the Jaws virtual cursor mode the right and left arrow keys will move only one character at a time This makes it necessary for the application mode to be active in order to experience the intended functionality of this widgit. The first letter navigation functionality will not be availible to Jaws users unless the share button is activated. .

Is the navigation bar supposed to disappear on the French and English Application without a search templates when you switch to a mobile view?

We're currently using our own grid system. I'd like to use the WET gs but I see some problems when testing. In our application we have section and content found under a section is indented by one column at the moment. I tried doing that with your gs but I only have 6 columns to play with when I have a left menu which makes the indent pretty large. I guess the left menu takes 2 columns and the content takes 6 for a total of 8?

Is it possible to have a 12 col in the content column? A fluid grid would be great.

On the following page: http://wet-boew.github.com/wet-boew/demos/index-eng.html under the heading Content pages - Web application template, the example with no search still contains the search field.

background-waves.jpg is only used for mobile (background-withglow-andleaf.jpg is used for desktop view).

The mobile view cannot be wider than 767 pixels, yet the image is 1137px wide. The area with the image is also 47 pixels high by default. Perhaps there should be a bit of extra height for when a mobile sets a larger font size.

This optimization would make the banner go from 27 kb to 3kb

The following issues occur in the mobile view for the Form validation component:

1. Doesn't submit all the time. Frequently the submit button does nothing, even after refreshing. Possibly a race condition or something similar.
2. Error messages don't update when typing and focus is lost after typing three characters.

Hey I get the below error and was curious if you could put point me in the right direction. I believe I have tracked the error down to $scope.top(). Where $scope is not defined. Any ideas what I could be missing? My megamenu markup looks to be an exact match to the markup in the demo. Think it has something to do with: $scope = $(elm);

Uncaught TypeError: Cannot read property 'top' of null menubar.js:93
_pe.fn.menubar._exec.correctheight menubar.js:93
_pe.fn.menubar._exec menubar.js:365
_pe._execute pe-ap.js:500
_pe.add.js.pe.depends.on.(anonymous function) pe-ap.js:897
_pe.depends.on pe-ap.js:299
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
_pe.add._load.scriptElem.onload.scriptElem.onreadystatechange

I am proposing to move all the demo files to the test folder and point those files to their source instead of the compiled source. This would help debug issue by allowing to use breakpoints etc...when doing so in minified code is nearly impossible.

The build script could be modified to generate the final demos by copying the test files and applying search and replace to remap the paths.

What do everyone think?

@LaurentGoderre The AJAXing in of the mega menus works great on a Web server but doesn't work locally in most cases. Here is what happens:

Web server:

• Relative URL: menu-eng.html, Result: Success
• Relative URL: includes/menu-eng.html, Result: Success
• Relative URL: ../includes/menu-eng.html, Result: Success

Local:

• Relative URL: menu-eng.html, Result: Success
• Relative URL: includes/menu-eng.html, Result: Success
• Relative URL: ../includes/menu-eng.html, Result: Silent error

So the AJAXing works for demos/index-eng.html locally but not for demos/tabs/tabs-eng.html. It works for both on a Web server.

Is there some way to make this work through relative URLs so it can be tested both locally and on the Web server without changing the URLs? If not, is there some reasonable workaround for making it work locally as well?

Currently points to http://wet-boew.github.com/demos/index-eng.html which 404s.
Should be http://wet-boew.github.com/wet-boew/demos/index-eng.html as from the ReadMe

Many other JS/CSS frameworks offer builder apps that let you choose which components you need and build single minified files. See the following for examples:
http://modernizr.com/download/
http://twitter.github.com/bootstrap/download.html
http://jqueryui.com/download

Hey I will be switching my workflow to follow this standard. Was thinking you would likely find the workflow useful as well.

http://nvie.com/posts/a-successful-git-branching-model/

When using the responsive template of the GC Web Usability theme, and using the tabs-style-4 and tabs-style-5 theme from the Tabbed Interface widget: if you start from a high resolution window and resize the window to a smaller size, when the responsive template scales down, a margin appears between images and the Play/Pause button. That problem does not occur when you scale up the size of the window.

The problem seems to come from the widget javascript which gives a minimum height to the image parent div container. When using a large window, that minimum height persists in lower resolution, creating the margin.

The pe.url has the path and the relative properties. Both are very similar from the comments. The path one seems to work better (the relative doesn't not support other protocols than http(s)). The only difference I see is that the relative one keeps the hash and querystring.

Do we need those two property or can we drop one of them? If we need both then the relative one needs to be updated to work with other protocols.

Hi all,

Very excited to find this project while Googling for accessible mega-menus. Glad to see my tax dollars at work on such a personally-useful project. Keep it up, we'll beat the UK yet!

Anyway, my bug report of the day is on .equalize as seen in http://wet-boew.github.com/wet-boew/demos/grids/grid-utilities-eng.html -- it doesn't work. Not in Chrome 20 (beta), nor in Safari 6 (beta). I'm thinking somebody forgot to load and/or update the relevant JavaScript.

But then that got me thinking — why are we relying on JavaScript for equalizing column height? Why not use display: table-cell and display: table-row with a fallback for IE lte 7 as advocated in http://www.sitepoint.com/books/csswrong1/ ?

There's also CSS grids, as advocated by IE of all people, used to great effect in Windows 8: http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx

Finally, the grids really reminded me of Twitter Bootstrap. I was suddenly struck by the idea of porting/combining TB with this project ... though the markup is just different enough that it'd be more mix-and-match. Still, TB has such pretty fields ...

Regardless, I think I'll try using this as a base for my next project. It's much easier to add style to accessible markup than add accessibility to pre-styled markup, as I like to think of it.

Keep up the good work, and if you'd like pull requests, I'd be glad to pitch in somewhere as I go through a re-theming.

This would allow to build certain components with one command instead of the whole thing or using multiple commands.

Hi,

Not sure if this is a problem with my set-up but does not appear to be. I include the following in my code:

drupal_add_js($library_path . '/build/theme-gcwu-fegc/js/theme-min.js', array('scope' => 'footer', 'weight' => 5));
drupal_add_js($library_path . '/build/js/settings.js', array('scope' => 'footer', 'weight' => 5));
drupal_add_js($library_path . '/build/js/pe-ap-min.js', array('scope' => 'footer', 'weight' => 5));

The error I then get is the following:

GET http://github_wet_distro_official:8082/profiles/webexp/libraries/wet-boew/build/js/i18n/en.js 404 (Not Found) pe-ap-min.js:5

b.add._load.staged.(anonymous function)

Where the file in the specified location is actually /build/js/en-min.js

Update

It seems everything is being called without the -min.js extension from pe-ap-min.js

We're currently using v2 of this framework and looking at updating to v3. I don't see features like the calendar datepicker and such. How would I go about adding a feature like that to v3?

We use the intranet theme as well and I don't see any v3 for this theme. Does one exist?

Semantic Versioning is a standardized way of incrementing version numbers in a way that people can easily tell the impact of the changes strictly from the version number.
See http://semver.org/ for details.

Viewing the share widget on a Samsung, the English example, after the page has loaded and is viewable, the screen then disappears and I get phone symbol icon and the page does not load.