Ramping up on WET 3.x and HTML5 standards can be overwhelming but it is so worth it as there is a lot of new functionality that comes built-in. Here is some information that you might find helpful.

The following topics are covered in this article:

  • Share Your Ideas!
  • Images Magically Resizing
  • WET 3.1 Browser Widths
  • Useful Online Resources and Tools
  • How to Install a Bookmarklet
  • Bookmarklet: WAVE Current Page
  • Bookmarklet: W3C Validate Current Page
  • Bookmarklet: Link and URL Extractor
  • Bookmarklet: Resize this page
  • Bookmarklet: WET 3.1 Working Examples Search Engine
  • Making Columns and Same Height Columns in WET
  • Wrapping DIVs around Floats
  • Audio and Video for WET Websites

Did you know? There are over 400 classes of styles in WET 3.1. Don't worry, most of the time you'll only need to know the ones listed under the Grid System pages.

Share Your Ideas!

Have you come across an interesting and useful tip or tool that has helped you in your work? Share with us by adding a comment below.

Images Magically Resizing?

In WET, images will automatically resize to the width of the size defined by the current span-x class and then they will resize depending on the browser width. Cool! However sometimes this may not be desirable. The fix is to apply the to the image. Note that you should only do this in situations where it doesn't make sense for the images to resize depending on the page width. You can learn more about this on the Wet Working Examples site.

WET 3.1 Browser Widths

There are 4 browser widths in WET 3.1. It is important to know this so that you can check each of your pages to ensure it appears correctly in these sizes:

Browser Widths:

  • 0px to 767px -- Mobile View
  • 768px to 959px -- Tablet View (previous to WET 3.1, this is was a small desktop view)
  • 960px to 1199px -- Medium View
  • 1200px and up -- Large Desktop View

Notes:

  • Internet Explorer 7 and 8 only display pages in the Medium size view. See Media queries below.
  • You can test various browser widths by simply resizing your desktop browser.
  • Final testing should always be done with various devices and browsers including Desktop (IE7, IE8, IE9, IE10, Chrome, Firefox and Safari), Tablets/Smartphones (iOS, Android and Blackberry OS)

Useful Online Resources and Tools

Bookmarklets

Bookmarklets are short pieces of JavaScript code that can add useful functionality to your browser without installing any additional software on your computer.   The easiest way to install a bookmarklet is to create a bookmark to any web page, saving it on your browsers links bar. Then edit it, copying the JavaScript listed below and pasting it in the URL of the bookmark, replacing its content. Be sure to allow it to save your changes if you get a warning message. Don't forget to rename your bookmark.   To use a bookmarklet, go to the page where you want to perform the action and click the bookmarklet in your browsers links bar.   Bookmarklets work best in Chrome and Firefox.

Tip: Some bookmarklets won't work if you are on a blank page. Keep this in mind before deciding that they don't work.

Bookmarklet: WAVE Current Page

 This bookmarklet will open the current page on the WAVE validation site.

javascript:void(document.location.href='http://wave.webaim.org/report?url='+escape(document.location.href))

Bookmarklet: W3C Validate Current Page

This bookmarklet will open the current page on the W3C Validation site.

javascript:if(document.location.href.substr(0,6)=="about:"){document.location.href="http://validator.w3.org#validate_by_input";javascript_abort();} (function(){ function fixFileUrl(u) { var windows,u; windows = (navigator.platform.indexOf("Win") != -1);  /* chop off file:///, unescape each %hh, convert / to \ and | to : */  u = u.substr(windows ? 8 : 7); u = unescape(u); if(windows) { u = u.replace(/\//g,"\\"); u = u.replace(/\|/g,":"); } return u; } /* bookmarklet body */ var loc,fileloc; loc = document.location.href; if (loc.length > 9 && loc.substr(0,8)=="file:///") { fileloc = fixFileUrl(loc); if (prompt("Copy filename to clipboard, press enter, paste into validator form", fileloc) != null) { document.location.href = "http://validator.w3.org/file-upload.html" } } else document.location.href = "http://validator.w3.org/check?uri=" + escape(document.location.href); void(0); })();

Bookmarklet: Link and URL Extractor

Use this bookmarklet to instantly extract and create a list of links from any web page. This is useful to converting a sitemap into an inventory of your website pages or collecting a list of download links on a page. Just click the bookmarklet and copy and paste the information right into Excel.

Note that it won't include pages not listed in your site map such as hidden pages and downloadable files but it sure beats creating the list manually!

javascript:(function(){if(frames.length>1)alert('Sorry, frames detected.');else{wnd=open(",'lnkswnd','width=620,height=500,top=0,left=0,scrollbars,resizable');lnks=document.links;with(wnd.document){writeln('<html><scr'+'ipt>function opnUrl(url){opener.location.href=unescape(url);close();}</scr'+'ipt><table>');for(var i=0;i<lnks.length;i++){writeln('<tr><td><a href="'+lnks[i].href+'" target="_blank">'+lnks[i].innerHTML+'</a></td><td><a href="'+lnks[i].href+'" target="_blank">'+lnks[i].href+'</a></td></tr>');}writeln('</table></html>');close();}}})()

Note: This bookmarklet opens a new browser window. You may be prompted to allow the browser to allow the popup window, especially in IE.

Bookmarklet: Resize This Page

(note: does not work on local files)

This bookmarklet will display the current page in a number of different sizes in the WET responsive emulator. This is useful to test how your responsive page will appear on different size screens.

javascript:void(document.location.href='http://wet-boew.github.com/wet-boew/test/responsive-emulator.html?'+document.location.href)

Warning: Don't do it in IE7. The JavaScript engine in IE7 is very slow compared to modern browsers for rendering mega menus.

Bookmarklet: WET 3.1 Working Examples Search Engine

Have you ever tried to use the search feature of the WET 3.1 Working Examples site? If you have, you know your efforts are rewarded with a big 405 Not Allowed message.

The following bookmarklet will prompt you for your search term and then use Google to only search the WET site.

javascript:(function(){ p=prompt('Search WET Site for:',"); if(p){ document.location.href='http://www.google.com/search?q='+escape(p)+' site:http://wet-boew.github.io/wet-boew/'} })();

Bookmarklet: Firebug Lite

Firebug Lite -- Cross browser compatible bookmarklet, a great alternative to Firefox Firebug for other browsers. There is even a special version for Chrome. Visit the website and copy the Firebug Lite shortcut (not the text) to your clipboard and follow the Bookmarklet instructions above.

Making Same Height Columns in WET 3

Trying to make a page with a series of equal height boxes? It used to be a simple matter of using a table. You can still create equal height columns using the equalize class.

Using the WET 3.x theme, it's now even easier than it was using tables. Just don`t forget to apply the row-start class to your first column <div> and the row-end class to your last column <div>. Then, before you close you wrapping div, use a clear class <div> (see below).

Wrapping DIVS around FLOATS

Are you finding that your DIV isn't wrapping around your content? Chances are, you are using a floating block class like span-3. Adding the following line right before the end of your DIV will cause your DIV it to wrap around your content:

<div class="clear"></div>

Audio and Video for WET Websites

Here are some specifications that can be used as guidelines when creating videos for the website:

Videos Formats

  • Format: MPEG4 (H264 + AAC) AND WebM (VP8)
  • 29.97 fps
  • Automatic key frame placement,
  • Standard Ratio: 640×480 (4:3)
  • Wide Ratio: 640×360 (16:9) -- alt size 720×480 (16:9) for special High Quality requirements
  • Important: Must maintain original video's aspect ratio
  • Standard Quality (for speeches)
    • Video: 300 Kbps
    • Audio: 22 kHz, 64 Kbps mono,
  • High Quality (for action/music)
    • Video: 700 Kbps, 2-pass VBR
    • Audio: 44.1 kHz, 128 Kbps stereo
  • Media Quality -- Highest quality available (1080p) for the Media (only available for download)
  • Video Closed Caption: XML (TTML) OR Text Transcript (HTML5) format

Notes

The closed caption XML file must be located on the same server as the page in which the video is embedded or else it won't work.

Even if you are putting the video in a small span-2 size class, keep in mind that the video will actually be larger when viewed on mobile screen sizes where they can be up to 767px wide.   If you need to put a video in a very small space, consider creating an image linked to the video in an inline lightbox instead.

Audio Formats

  • Format: MP3 AND OGG
  • High Quality (for music): 44.1kHz, 128 Kbps/stereo
  • Standard Quality (for speech): 22 kHz, 64 Kbps/mono

Note that the HTML5 <audio> tag actually checks to see if the source audio file exists. If it doesn't exist, the audio player will appear to be broken even though the HTML5 code is correct.

Related Posts: