Responsive Design Emulation Tools For Front-End Developers

Someone in the Minneapolis St. Paul WordPress User Group recently asked for input on the best mobile emulation software for responsive web design work. There are several tools Due North Studios uses when working on a responsive project: When it comes to developing or debugging responsive website designs, nothing beats being able to use an actual device… Read More →

Someone in the Minneapolis St. Paul WordPress User Group recently asked for input on the best mobile emulation software for responsive web design work. There are several tools Due North Studios uses when working on a responsive project:

The Real Deal: Using An Actual Mobile Device

When it comes to developing or debugging responsive website designs, nothing beats being able to use an actual device. This is the process I use:

  • Plug iPhone into my Mac
  • Open up Safari (make sure “show development menu” is check under preferences->advanced)
  • Open Safari on my iPhone and navigate to the page I’d like to inspect
  • In Safari’s menu on the Mac, go to Develop -> (iPhone) -> (Page)
This allows you to use the developer tools you’re used to (shown on the Mac’s screen) while viewing the webpage in its native form (on the iPhone). Highlighting sections of code in the code inspector highlights the corresponding element in Safari on the iPhone. It’s pretty cool and useful!

Chrome Canary Developer Tools Emulation

Also Chrome Canary has an awesome new built-in emulation feature. This lets you work directly in the browser (basically shrinking the browser viewing area to the size of the selected device screen). Here’s how to use it:
  • Open up developer tools
  • Open up the console by pressing the escape key
  • Click the emulation tab
  • Select the mobile device you’d like to emulate and off you go!
You can learn more about Chrome’s mobile emulation tool here: https://developer.chrome.com/devtools/docs/mobile-emulation

Others

  • Saucelabs.com – offers a cloud-based Android emulation tool. However, the device only emulates one screen size.
  • Browserstack.com – allows for debug/development across multiple mobile devices, all in the cloud. The subscription cost may be a bit expensive if you aren’t working with mobile development everyday.

Whichever tool you decide to use, let Due North Studios know if you need some help. We’ve worked on a number of responsive web development projects and would be happy to lend a hand.

 

WooCommerce: Free Shipping For Continental U.S. Only

Based on code from Patrick Rauland, this bit of code will remove the WooCommerce free shipping option for users outside the continental United States. Simply place this code in a plugin or your functions.php file… Read More →

Based on code from Patrick Rauland, this bit of code will remove the WooCommerce free shipping option for users outside the continental United States. Simply place this code in a plugin or your functions.php file.

/**
* Only offer free shipping to the continental US
*
* @param array $available_methods
*/
function only_free_ship_to_continental_us( $available_methods ) {
   global $woocommerce;
   $excluded_states = array( 'AK','HI','GU','PR' );

   if( in_array( $woocommerce->customer->get_shipping_state(), $excluded_states ) ) {

      if (array_key_exists ( 'free_shipping' , $available_methods )) {
         unset($available_methods['free_shipping']);
      }

   }

   return $available_methods;
}

add_filter( 'woocommerce_available_shipping_methods', 'only_free_ship_to_continental_us', 10 );

How do you use WordPress’s built in waiting/loading spinner?

WordPress uses a waiting spinner to indicate when its doing something: loading, uploading, doing something AJAX-y, etc. Developers can use the native WordPress spinner in their plugins using the following code: Source for the loading GIF image is /wp-admin/images/wpspin_light-2x.gif (high-resolution version) or /wp-admin/images/wpspin_light.gif. To insert the loading spinner image, you can use an empty HTML… Read More →

WordPress loading spinner

WordPress uses a waiting spinner to indicate when its doing something: loading, uploading, doing something AJAX-y, etc. Developers can use the native WordPress spinner in their plugins using the following code:

Source for the loading GIF image is /wp-admin/images/wpspin_light-2x.gif (high-resolution version) or /wp-admin/images/wpspin_light.gif.

To insert the loading spinner image, you can use an empty HTML div with a class of “spinner”.

<div class="spinner"></div>

The spinner class should set the background to wpspin_light.gif image and display to none.

.spinner {
background: url('/wp-admin/images/wpspin_light.gif') no-repeat;
background-size: 16px 16px;
display: none;
float: right;
opacity: .7;
filter: alpha(opacity=70);
width: 16px;
height: 16px;
margin: 5px 5px 0;
}

Now, a plugin can trigger the display of the spinner div using jQuery. Here is an example of triggering the spinner on the click of a button:

$("#showspin").on("click", function(){
$("somediv .spinner").show();
});

Update:

Here are the locations of some other native WordPress loading images (thanks to Tumble Design):

WordPress Loading Animation Image
01
/wp-includes/js/tinymce/themes/advanced/skins/default/img/progress.gif
WordPress Loading Animation Image
01
/wp-admin/images/loading-publish.gif
WordPress Loading Animation Image
01
/wp-admin/images/wpspin_light.gif
WordPress Loading Animation Image
01
/wp-admin/images/wpspin_dark.gif
WordPress Loading Animation Image
01
/wp-includes/js/thickbox/loadingAnimation.gif