Today, many javascript plugins exist to solve this problem. One of the most famous ones is the Lazy Load jquery plugin by Mika Tuupola.

However, while lazy loading is a very nice feature, responsiveness is at least of the same criticality. To solve lazy loading and responsiveness at the same time, I switched to the jquery plugin Unveil (GitHub) provided by Luis Almeida.

This work has been improved by John Dunning. He provides a fireworks extension with a command to export a select set of elements or even a single one.
The extension is available at http://johndunning.com/fireworks/about/ExportSelection and available for free as it is.

Just download the ZIP archive with the mxp file from the website noted above. Then double click the mxp file and the Adobe extension manager will start and guide you through the installation process.
When finished, restart fireworks and you can find the new command the main menu at Commands > Export > Export Selection.

You can search for simple strings or regular expressions and you can preview the replace operation before applying it (replace & save button).

Compared to raw regular expressions as used for example in the online regular expression tester Regexpal, you must enclose your expression with @ characerts (can be changed in the configuration).

my(.*)regular([^"])expression

In case, you need to move your blog and replace all internal links, the plugin can be very handy as well!

Plugin Website: https://wordpress.org/plugins/search-regex/

Two things could significantly ease up your live in this area:
1. Extended Search Interfaces of the popular image search engines
2. Best practices for valid references to an image’s source

Searching Images

All popular search engines such as goole image search, flickr, and instagram provided extended search interfaces allowing you to filter the search results e.g. for commercially usable images only.
Thomas Mauch provides a good summary of how to use goole image search, flickr, instagram as well as the Creative Commons Search: Corporate Blogs: Kostenlose Bilder unter Creative Commons-Lizenz finden

We got together recently with the Web Wizards, Web Wizards are Perth’s web design leading firm and they shared a few great tips with us that we’ll share here today. When searching for images for my talks or other publications, I like to search for one of the “friendly” Creative Commons licensens. In particular, I start with flickr at the beginning as their extended search is very easy to use and they provide good information and resources for the returned image. For example, it is quite easy to find out which specific CC license is granted by an image’s author.

Flickr explicitly supports the Creative Commons license with an option in their extended search and uses specific icons to indicate the several features an author can choose from for his image:

Referencing Image Source

A second aspect I like of using Creative Commons licensed images are the best practices for referencing their sources provided by the Creative Commons organization itself.
This “Best practices for attribution” perfectly describes and provides examples of how to reference the sources in a legal and accepted manner. They also fairly present their “optimal” way of referncing but also a valid more compact and practical applicable alternative (e.g. Photo by tvol / CC BY).

Again, which specific CC license you must reference here (“CC BY”, “CC BY-SA”, “CC BY-SA 2.0”) is easy to find out with flick. When you are on the images details page — where you can choose which scaling you want to downlowd — just click on the link for specific right granted by the author (at the top of the page):

The page linked here is the creative commons license you must refer to including a shorting of the license name (See image below)

Note: The information provided by this blog post is not legally verified and only collected from other online resources that are target of continous change themself. So handle image usage and reference seriously, to it on your own risk, and use the information provided here only as initial pointer and make your own valid decisions about image usage and referencing.

To give your user interface an individual style, you might want to change the color to something more specific such as green, black or a specific rgb color.
Using CSS to change the font color of your button or link containing the icon will not work, as the jQuery Mobile svg icons are realized as background images.

The solution to change the icons color, is to modify the svg image realizing the icon itself.
To do so, open jquery mobiles stylesheet (e.g. “jquery.mobile.inline-svg-1.4.1.min.css”) and find the definition of the icon you would like to change (e.g. .ui-icon-delete:after)
The styles are always defined as “.ui-icon-:after”. The icon style definitions contain background images with the SVG images encoded in a data url.

To change the color, you do not need to understand the full encoded svg data url. You just need to know that shapes in an SVG are defined by polygones. In the example below, search for the string “polygon%20fill%3D%22%23FFF”:

.ui-icon-delete:after{
background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

“polygon%20fill%3D%22%23FFF“ stands for a polygon filled with the color white (FFF).

So to define your custom icon with a different color, copy the style definition into your own css stylesheet file and replace “FFF” with your prefered hex color definition.
Note: You should not modify the original jquery mobile file. Otherwise your modifications could be overridden with the next update.

  <a id="mybutton"  data-role="button">MyButton</a>

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
        });

However, this will keep your button in an active state which does feel very responsive.

Simply returning true at the end of your handler function or trying to trigger the event again will not work. JQuery internally removes all flags of the event.

The solution to bring your button back into it’s not active status at the end of your handler, you need to manually remove jquery mobiles active button class.
This is supported by a global variable $.mobile.activeBtnClass.

So just change your handler code above and add the assignment of this class at the end:

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
            this.$('a').removeClass($.mobile.activeBtnClass);
        });

Mattbanks has published an easy to use jQuery plugin to include to your website:
https://github.com/mattbanks/jQuery.equalHeights

To integrate it in your website, simply

1. download the jquery.equalheights.min.js file to your app,
2. integrate it after your jQuery reference (see below)
3. trigger the divs that should be of equal height

Integrate the js files (recommended at the end of your page).

<script language="javascript" src="js/jquery/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/jquery/jquery.equalheights.min.js"></script>

Trigger the equal height plugin

$(document).ready(function() {
  window.setTimeout(function(){
    $('.equalColumns').equalHeights();
  }, 200);
});

Note, the timeout function is used to trigger the equal height asynchronously. You do not have to do this, but it is recommended if you face any trouble with other JS plugins on your website.

Today I hit pixeden and I am really impressed. They offer commercial and free PSD templates in a very good quality. So whenever you need to build a mock up, take a look around. At least for mac devices you should find something useful:

Mock-Up Templates:
http://www.pixeden.com/psd-mock-up-templates

If you look specific for free templates, Pixeden offers a specific category for that (not mock ups only):
http://www.pixeden.com/free-graphics

A good jQuery plugin to do this is jquery.mobile.fastButtons.js available at
http://www.jqueryscript.net/mobile/jQuery-Plugin-For-Removing-The-300ms-Delay-On-Mobile-Device-fastButtons.html

The plugin is easy to install and uses an approach to replace the click events with vclick events which are faster applied. The plugin is also very lightweight. So just a small overhead in loading and only replaces the default click handler.

To enable the plugin, simply download the file, place it in your application and include the script file after the jQuery and jQuery Mobile libraries. For example:

  <script src="js/lib/jquery-1.10.2.min.js"></script>
  <script src="js/lib/mobile/jquery.mobile-1.4.0.min.js"></script>
  <script src="js/lib/jquery.mobile.fastButtons.js"></script>

Other approaches, such as the fastbutton plugin add a layer div or span on top of your application and try to estimate the element visually present under this layer. This is done by pixel calculations with a small deviation. It works fine for static elements not located close to other elements. But for example, if your header contains an icon close to the screens border to open a sliding panel, the click behaviour can be completely messed up du to this deviation.

To programmatically control he loading dialog, jQuery provides a Javascript API. For example, you can show the dialog by calling

$.mobile.loading('show');

or hide the dialog via

$.mobile.loading('hide');

However, what is missing in the documention, this control is not available at anytime during your program execution. As described in this stack overflow thread, the loader can only controlled directly during the showpage event processing.

To solve this issue and control the loader widget at anytime, you must execute it asynchronously. This can be achieved by putting it into a setTimeout() callback.

function showLoader() {
    window.setTimeout(function(){
        $.mobile.loading('show');
    }, 1);
};

function hideLoader() {
    window.setTimeout(function(){
        $.mobile.loading('hide');
    }, 1);
};

Note: Some people, as in the stack overflow discussion mentioned above, use a solution based Javascript’s setInterval() method. It did not work reliably in my experience, and the intend of setInterval() is to execute something periodically. In our case, we want to control the loader widget only once. So setTimout() better fits to out intention.