This Red Goes to #FG0000: Wide-Gamut Color with ≪Picture≫ and Cloudinary

Recently, I had the pleasure of reading Craig Hockenberry’s short, sweet, and informative Making Sense of Color Management. In the book, Craig points out that while new, Hi-DPI screens present us with more resolution than our eyes can actually see, they’re nowhere close to being able to produce all of the colors that we’re capable of perceiving.

Excitingly, that’s beginning to change. Various long-stagnant pieces of our graphics stacks are lurching forward into a more-vibrant future. The next frontier in making things look amazing on screens is wide-gamut color.

Wide-gamut Screens

For the last 20 years, the display industry has settled on a limited, standard range of colors, called the sRGB gamut.

If the lopsided, chopped-off-rainbow-disc below (technical name: the “1931 CIE Chromaticity Diagram”) represents all of the colors that human eyes can see, the sRGB gamut is circumscribed by the little triangle in the middle.

The latest-generation of displays can produce colors outside of sRGB’s limited range. These screens expand the triangle of possibilities out, to what’s called the P3 gamut:

The P3 gamut, compared to sRGB. It’s bigger!

Triangles are one thing and actual photographs are another—for a sense of what this wider range actually looks like in practice, beg, borrow, or steal a wide-gamut display and go check out Craig’s gorgeous example images, or look at this quick example, from yours truly. Basically, if your subject is really saturated (for example: an incandescent sunrise, or bright-green grass) P3 will let your images pop in new and notable ways. But if your image’s palette is more subdued, sRGB already has you covered and you’ll see no visible difference.

So – devices that can display new, more vibrant colors are shipping en masse. How can we take advantage of them, without screwing things up for everybody else?

Wide-gamut Resources

First, we have to produce files that contain these new colors. Generally, you can do this by making sure that: 1) your camera is capturing– 2) your software is editing– and, crucially, 3) that you’re exporting– in a wide gamut (like P3, Adobe RGB, or Adobe ProPhoto). And don’t forget to embed a color profile.

For a detailed tutorial on how to do this with Photoshop, buy Craig’s book!

If you’ve got a shiny new iPhone, though, you don’t have to worry about minding your Ps and Qs in obscure preference panes. The iPhone 7 captures, processes, and saves photos in the P3 gamut out-of-the-box.

Wide-gamut on the Web

Ok, so let’s say you’ve captured a beautiful sunrise and produced a wide-gamut Jpeg with an embedded profile. Great! How are you going to share that image with the world?

Let’s start by marking it up using a single-src <img>:

<img src=”sunrise-p3.jpg” alt=”Oranges and blues” />

In browsers that implement “color management” – browsers that know how to use the image’s embedded profile to map the image’s wide-gamut colors to a device’s particular screen – the sunrise will always look as good as the hardware will allow. It will look good on sRGB-ish screens, and great on wide-gamut displays. But many browsers are not color managed. And in color-unmanaged browsers, the raw color values in our image are painted directly to the screen, without consideration for how the file’s wide profile relates to the display’s limited gamut. This results in a dull image – much worse than if we’d just left well enough alone and exported our image in sRGB:

Comparison between a vibrant, sRGB sunrise and a a dull, wide-gamut sunrise on a color-unmanaged display

In color-dumb browsers, wide-gamut images look worse than their narrow-gamut, sRGB counterparts.

What can we do about this sad state of affairs? Unfortunately, there’s no easy way to feature test whether or not a browser is color-managed. But we can ask the browser if a screen’s profile is more sRGB-like or P3-esque, using the brand-new color-gamut media query. If we use this query within a <picture> element, we can make sure that we only send wide-gamut images to wide-gamut screens – and send sRGB images to everybody else:

<source media="(color-gamut: p3)"  />
<img src="" alt="Oranges and blues" />

That, my friends, is a color-adaptive responsive image. Neat!

Responsive Color with Cloudinary

Make no bones about it, creating responsive image assets is tedious. Whether you’re rendering multiple resolutions, crops, formats, or, now, color gamuts – the task of generating alternate versions of your assets is ripe for automation.

Enter Cloudinary.

Cloudinary’s color-smarts are still evolving, but today, the service has two key features:

  1. If an uploaded image has a color profile, Cloudinary preserves it.
  2. Cloudinary can convert any image to sRGB using the cs_srgb transformation.

So, if we generate a wide-gamut original and upload it to Cloudinary, we can deliver it color-adaptively, like this:

media="(color-gamut: p3)"
alt="Oranges and blues" />

This pattern allows us to generate a single, wide-gamut resource, and deliver it in a way that looks great for some, and good for everybody. ✨☺️🌈😎

Ready for Anything

As screens begin to evolve along this new axis – becoming more colorful – it’s gratifying to see the techniques and toolchains built to cope with the Retina-revolution so ready to tackle a new challenge. On the ever-evolving, always-diversifying web, adapting bitmap images to varied browsing contexts is a general problem, and responsive image markup patterns – paired with a centralized, automated image-processing back-end like Cloudinary – are here to solve it, no matter the particulars.

So – armed with P3, <picture>, and Cloudinary’s cs_srgbvoyage forth bravely into a wider world of color.


[– This is a sponsored post on behalf of Cloudinary –]



How to Quickly Reset WordPress Back to Its Default State

If you’re like most WordPress users, you spend quite a bit of your time trying to keep your site functioning well. In fact, you probably spend your days trying not to reset WordPress. Because if you’re happy with your site, resetting it would be disastrous! This post is not for those times. This post is for when you want to…. Continue Reading

The post How to Quickly Reset WordPress Back to Its Default State is written by Colin Newcomer and appeared first on WPKube.

10 Essential Rules for UI Design

Design never really used to matter all that much.

It’s hard to imagine now, but before Apple’s meteoric rise to global popularity, design usually took a backseat to functionality. Today, design has become a world onto itself, and the community of designers and developers have united to develop a coherent set of rules for the creative practice.

The evolution of design is constant, and there are always new things to learn and focus on to bring function and aesthetics together in one package.

To stay on top of your design game, here are 10 important rules of user interface design to remember:

1. Cater to Universal Usability

With the explosion of different device types today, one size certainly won’t fit all.

When you create your website or app, you need to make sure that you design with all screen sizes in mind. This means loading fully on both low and high bandwidth Internet connections, to formatting appropriately on both iPad and iPhones.

In the past, developers have concentrated mainly on creating a good user interface for desktop. But, just to refresh your memory, mobile usage overtook desktop usage back in 2014. So, should you now switch your focus to mobile? While it’s important to pay special attention to mobile, it’s also worth considering that desktop usage is still significantly high, with 42% share.

Therefore, the key is to create adaptive user interfaces that will give the consumer a great experience despite the display or orientation of the device they’re using.

2. Clarity

People are extremely busy, and because of this, rarely dedicate their full attention to one task. Because of this, you need to keep your design simple to understand.

Don’t make your users guess. Use language they can easily understand in terms of words, phrases and the concepts. Avoid using special system or industry terms and insist on a language familiar to the audience.

If you’re intending that the user complete certain goals, let the actions be in a sequence that has a beginning, middle and end. When they are done, use a notification to let the user know and include any next steps.

For instance, if you’re designing a page for an online banking system, you can group the actions into “Contact Details”, “Account Details” and “Profile Settings” instead of having them all in a single form.

3. Prevent Errors

Errors aren’t only anomalies and mistakes, but also big roadblocks to visitors taking desired action.

If something goes wrong or loads incorrectly, most visitors won’t wait around for a fix, they’ll just leave. Stay vigilant and stay on a lookout for errors, fixing ones you do spot as soon as possible.

Users don’t like making errors. They feel even worse if they think they are to blame for the error. If they don’t transfer this hate to you and move forward, they will abandon their accounts even before they are set up, for instance.

When designing, eliminate the possibility of an error or design a system that checks the error for them before they go on too far. For instance, let’s say you require users to create a password that’s at least 8 characters long and includes a minimum of one digit.

Will your system let the user go on creating a password that falls short, only to notify them when they’re clicking “Next” or can it notify them as they type the password? The latter is the better design.

4. Make the Interface Consistent

Consistency throughout the user interface boils down to making things continuous, predictable, and within expectations. Designing everything across the board as uniform as possible and making sure there are no surprises or unexpected results goes a long way in making things consistent.

By the Principle of Least Surprise: “If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature.”

Do users have to guess what words mean and which ones mean the same thing? Do they have to worry about clicking a certain button because they are not sure what it will do? Ensure consistency of processes, functionality, appearance and terminology.

Luckily, there’s no shortage of resources on this matter. Most of the reputable website builders will help you with this as they feature a uniform and consistent grid layout design. 

5. Context

As it’s often said today, “Context is everything”. Context is how we’re able to connect new ideas together with old ideas, building relationships and meaning in our world.

The best teacher for this lesson is probably an advertiser. Advertisers know that without context-sensitivity to the time and manner in which they present their ads, then the ads become worthless—and that’s wasted money (look at how Google AdWords determines how to present ads).

Similarly, you have to apply contextual design in your user interfaces. Contextual User Interface is the location-based, time-sensitive and situation-based design of a website or app so that it delivers the most relevant data to the user. And this hasn’t been a major concern for designers until a few years ago.

With the growth of real-time connectivity and dependence on the internet, context could be the cause of your failure or success.

Context is key to human relationships, and equally important for the basic elements of design. We expect interactive objects to be intuitive, and should design to form coherent relationships between our function and design.

6. Size and Distance

Determining the size of UI objects and the amount of whitespace between each other is crucial to making sure that the design looks balanced and predictable.

Apart from gripping the user’s attention, this also helps the users understand where the objects are, without having to look all over the place for it.

Constant testing is best for determining the best way to go about this, enlarging what needs to call for more attention and shrinking what needs to be less distracting.

7. Defaults

Developers and designers usually like customizing everything.

This allows us to have control of everything from interfaces to wallpapers to ringtones. Most people, however, don’t seem to bother with customization. Most devices and other consumer electronics purchased almost never get changed. People typically don’t adjust their factory settings, since changing them takes know-how, time and effort.

By knowing this fact, it’s important to make sure that your default settings are suitable for a large batch of users to easily understand and navigate. This means telling the user, “Hey, you can customize this, but you don’t have to.”

8. Guided Actions

People typically won’t take any action unless they’re asked. That’s why tactics like the call-to-action are so powerful to help drive conversions.

More importantly, ask them “nicely”. What does this mean? For instance, consider the timing and context. Will you ask the user to start another goal without completing the one they are currently on? Consider when a pop up asking them to check out some other stuff appears. If it doesn’t appear after they scroll to the end of the post then you’re doing it wrong.

Take note that it only works when the visitor is actually interested in something you’re offering. If you can prove that you’re providing significant value to people, then don’t hesitate to ask users to do something in return like following your social media pages or blog. This works to keep your users informed, and also to naturally increase your web traffic over time.

9. Feedback

When you walk into a dark room and flick a light switch, you expect the light to turn on. If nothing happens when you flick the switch, you might assume something went wrong. This is equally true when it comes to design.

No one likes being uncertain about their actions, so there should be feedback courtesy of tooltip messages and notifications to show visitors that their actions were successful and have been acknowledged. Feedback can be as simple as running a web survey or adding a “Complete” notification once a form is submitted, but it’s crucial when starting a blog or app.

This also emphasizes the need to not leave your visitors second guessing themselves. The system should be able to offer feedback that is relevant, fitting in importance and urgency, comprehensive and sensible and contextual.


The art of design is ever-changing, and we’ll continue to find new ways to combine function and form into UI design. We’ve been through things like minimalism and responsive design, changing and transforming as newer technologies come to the forefront.

With these ten UI rules in mind, don’t forget that some rules are made to be broken.

Testing and experimenting is how we learn new trusted techniques, but we can rely on several of these rules as our foundation.


Comics of the Week #390

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Allergic reaction

Minutes old


Subtle response

Can you relate to these situations? Please share your funny stories and comments below…


5 Ways to Use 404 Pages Well

Let’s face it, it’s happened to all of us. We clicked a link on social media or on a website to be taken to another website to see some content that we were interested in. Unfortunately, things change over time and links become broken. Pages get moved or redirected, and the inevitable happens. You get the dreaded 404 error page.

Most people are scared to death of this page. It means somewhere a link is broken or there’s an error with your website. However, if you think of it in the right light, you can use your 404 error page to your advantage. If you follow these tips, not all is lost.

1. Create a List of Your Best Content

Just because a website visitor did not find what they’re looking for, it doesn’t mean that they should just hit a dead end. If your focus is on creating quality content, then direct them to your best content.

You have a better chance of someone exploring the rest of your site if you give them suggestions of where they can go, instead of leaving it up to them. They may find the information they’re looking for on another page. This is something that’s important to do on any client’s website.

2. Give away a Freebie or an Incentive in Exchange for their Email Address

Even though a website visitor did not find what they’re looking for, that doesn’t mean you can’t convert them to a future customer. You can offer valuable information or a digital download as an incentive for entering their email address. This gives your client the opportunity to reach out to them later.

For many web design clients, the entire purpose of their website is to generate leads for their business. For some clients, like dentists, plastic surgeons, doctors and lawyers, one customer can translate into thousands of dollars in revenue. It only makes sense to make every effort possible to hold on to that website visitor and try to turn them into a customer.

3. Add a Search Box

If your client’s website is an older site, chances are that pages had been removed or redirected to another location. It only makes sense to add a search box on your client’s website’s 404 error page to make it easy for visitors to search for what they’re looking for. Even though the incoming link may be broken, if you give them a chance to search internally for their topic, the search results may point them in the right direction.

Twitter does a good job of this, directing the user to go straight into doing a site search for the intended topic.

4. Add a Direct Contact form

Many 404 error pages contain a working contact form. This serves a couple of different purposes. If your client’s website is all about generating leads, it is a great way for website visitors to reach out to the business owner directly. Even though they didn’t find the information they were searching for, it still gives your client opportunity to get their business.

Another way that adding a contact form on your 404 error page helps, is that it gives that visitor the chance to report that error. This will give you a chance to fix the error for future website visitors. This will also solve future problems because website visitors will end up where you intend them to, such as a dedicated landing page, or the content that they were looking for to begin with.

5. Don’t Add Humor

Some designers and developers suggest taking a humorous approach to your 404 error page. I’ve always advised against this, because it sends the wrong message; imagine looking for some important information, only to be sent to an error page that is made into a joke.

Most visitors don’t find a broken website to be funny at all. In reality website visitors just want to find what they’re looking for, get in and get out. They also want to do this as quickly as possible, without a lot of runaround.

While making visitors smile is a lighthearted way to handle the situation, taking a practical approach can yield better results.


The suggestions above are meant to keep website visitors from reaching a dead end. You can always turn a negative into a positive by giving users an option to try something else. With that being said, it’s important to understand that you don’t want to put all of these on your 404 error page. Your selection should be made based upon the outcome that you intend for each person that comes to your website.

If you manage your client’s website or they manage it themselves, it is important to follow up with people who experience an error. Many times, the effort of reaching out to them to make sure they found what they were looking for builds trust and rapport with that person. If a user reports an error and they are ignored, it sends a message that you don’t care about each individual user. In this situation, a little effort can go a long way. Also, your client will benefit in the long run from following up with people who experience an error on your website, because it gives you more information about that error so you can correct it properly.

404 error pages are not the end of the world. They have their purpose, too, it is our job to take that purpose and leverage it in the best way possible for our clients. If you use your 404 error pages in the right way they can be helpful, not harmful to your client’s website.


3 Ways to Pimp Shopify for Better UX

Shopify is one of the most well-known and widely used e-commerce platforms on the web. Merchants from all industries can easily use it to sell their products or services online. The platform currently boasts thousands of merchants.

Shopify’s premise is to allow users without much sophisticated tech and programming know-how to open up their own online storefronts. This has naturally been a huge part of the success of the platform, as average Joes can quit their day jobs and become successful entrepreneurs.

In the Shopify platform, the most interesting area to the user experience from a merchant’s point of view is the checkout process, as how this is designed greatly impacts conversions on a Shopify site.

Here are some stellar pointers to customize the platform’s checkout process for superior UX…

1. Tweaking the Checkout Copy

What shoppers read during the checkout process impacts a site’s cart-abandonment rate and is a factor in the friction they experience as they move to finally clicking or tapping on the final checkout call to action button.

Therefore, changing this all-important text to reduce checkout friction and promote persuasion is a necessity, and here’s how to do it:

Sometimes, a simple change makes all the difference in the world when it comes to giving accurate and clear info to shoppers. For instance, letting shoppers know what currency they’ll be paying with is essential to good UX since that eliminates unexpected surprises on the path to conversions.

In the Shopify dashboard, head to Preferences and then General.

In Adjust Your Standards and Formats, select Checkout Language, and click Inspect. You’ll see a translation screen appear. Here, provide your translation with a name (for example, what your shop is called). Find the text you wish to alter; let’s say it’s in Create Your Order. Input the text (read: the translation) that you want to show up on the cart page.

Now, scroll to the bottom of the page and select Use This for My Checkout Language.

It’s worth mentioning that Shopify only officially lets you change the language (English to Spanish, etc.) on the checkout page. However, this workaround in its platform lets you use the translation function to actually modify the specific wording of the copy on the checkout page.

2. Including a Shipping Rates Calculator

Nothing’s more frustrating to shoppers than being blindsided by the cost of shipping! In fact, a Harris poll confirms that 66% of online shoppers rank shipping costs as their worst pet peeve. Thus, having a handy shipping rates calculator on your checkout page can drastically improve the UX for your Shopify customers because they’ll be automatically given an estimate of shipping costs on the spot, eliminating hidden fees.

To do this, begin by uploading the jquery.cart.min.js to theme assets by using this JS code snippet:

* Module to add a shipping rates calculator to cart page.
* Copyright (c) 2011-2016 Caroline Schnapp (
* Dual licensed under the MIT and GPL licenses:
"object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calculate shipping",submitButtonDisabled:"Calculating...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"${{amount}}"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){_.templateSettings={evaluate:/<%([sS]+?)%>/g,interpolate:/<%=([sS]+?)%>/g,escape:/<%-([sS]+?)%>/g};var n=_.template(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response, #estimated-shipping")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(", "),t.province&&(r+=t.province+", "),,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n<e.length;n++)e[n].price=_formatRate(e[n].price)}_render({rates:e,address:r,success:!0}),jQuery("#"+_config.wrapperId+", #estimated-shipping").fadeIn()},_formatRate=function(e){function t(e,t){return"undefined"==typeof e?t:e}function r(e,r,n,a){if(r=t(r,2),n=t(n,","),a=t(a,"."),isNaN(e)||null==e)return 0;e=(e/100).toFixed(r);var i=e.split("."),o=i[0].replace(/(d)(?=(ddd)+(?!d))/g,"$1"+n),s=i[1]?a+i[1]:"";return o+s}if("function"==typeof Shopify.formatMoney)return Shopify.formatMoney(e,_config.moneyFormat);"string"==typeof e&&(e=e.replace(".",""));var n="",a=/{{s*(w+)s*}}/,i=_config.moneyFormat;switch(i.match(a)[1]){case"amount":n=r(e,2);break;case"amount_no_decimals":n=r(e,0);break;case"amount_with_comma_separator":n=r(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":n=r(e,0,".",",")}return i.replace(a,n)};return _init=function(){new Shopify.CountryProvinceSelector("address_country","address_province",{hideElement:"address_province_container"});var e=jQuery("#address_country"),t=jQuery("#address_province_label").get(0);"undefined"!=typeof Countries&&(Countries.updateProvinceLabel(e.val(),t),e.change(function(){Countries.updateProvinceLabel(e.val(),t)})),jQuery(".get-rates").click(function(){_disableButtons(),jQuery("#"+_config.wrapperId).empty().hide();var e={};"#address_zip").val()||"","#address_country").val()||"",e.province=jQuery("#address_province").val()||"",_getCartShippingRatesForDestination(e)}),_config.customerIsLoggedIn&&jQuery(".get-rates:eq(0)").trigger("click")},{show:function(e){e=e||{},jQuery.extend(_config,e),jQuery(function(){_init()})},getConfig:function(){return _config},formatRate:function(e){return _formatRate(e)}}}();

Then, select and copy all the text, open the Shopify admin in a new tab, and click Online Store and then Themes from the Shopify admin.

After you locate the theme you like, click on the ellipsis button (…); then click on Edit HTML/CSS. On the Assets folder, choose Add a new asset. When the dialog opens up, select the Create a Blank File Tab; input jquery.cart.min for the name and choose .js as the new file’s extension. Click on Add Asset. Finally, paste the contents that you copied earlier, and choose Save.

Now, you have to add to the Customize theme page.

Start by finding and clicking on Config on the Edit HTML/CSS page. On the Config folder, select the settings_schema.json file. The file now opens up in the online text editor.

Go down to the bottom of the settings_schema.json file, then add the following code prior to the last square bracket ( ] ) and after the final curly bracket ( } ):

"name": "Shipping Rates Calculator",
"settings": [
"type": "select",
"id": "shipping_calculator",
"label": "Show the shipping calculator?",
"options": [
"value": "Disabled",
"label": "No"
"value": "Enabled",
"label": "Yes"
"default": "Enabled"
"type": "text",
"id": "shipping_calculator_heading",
"label": "Heading text",
"default": "Get shipping estimates"
"type": "text",
"id": "shipping_calculator_default_country",
"label": "Default country selection",
"default": "United States"
"type": "paragraph",
"content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the  spelling to use here, refer to the first checkout page."
"type": "text",
"id": "shipping_calculator_submit_button_label",
"label": "Submit button label",
"default": "Calculate shipping"
"type": "text",
"id": "shipping_calculator_submit_button_label_disabled",
"label": "Submit button label when calculating",
"default": "Calculating..."
"type": "paragraph",
"content": "Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping  calculator to appear. You can get the snippet here: [shipping-calculator.liquid]( ."

Click Save.

It’s time to move on to the shipping-calculator snippet.

Copy this code:

{% unless settings.shipping_calculator == 'Disabled' %}
<div id="shipping-calculator">
<h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}</h3>
<p class="field">
<label for="address_country">Country</label>
<select id="address_country" name="address[country]" data-default="{% if shop.customer_accounts_enabled and customer %}{{ }}{% elsif settings.shipping_calculator_default_country != '' %}{{ settings.shipping_calculator_default_country }}{% endif %}">{{ country_option_tags }}</select>
<p class="field" id="address_province_container" style="display:none;">
<label for="address_province" id="address_province_label">Province</label>
<select id="address_province" name="address[province]" data-default="{% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %}{{ customer.default_address.province }}{% endif %}"></select>
<p class="field">
<label for="address_zip">Zip/Postal Code</label>
<input type="text" id="address_zip" name="address[zip]"{% if shop.customer_accounts_enabled and customer %} value="{{ }}"{% endif %} />
<p class="field">
<input type="button" class="get-rates btn button" value="{{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' }}" />
<div id="wrapper-response"></div>
<script id="shipping-calculator-response-template" type="text/template">
<p id="shipping-rates-feedback" <% if (success) { %> class="success" <% } else { %> class="error" <% } %>>
<% if (success) { %>
<% if (rates.length > 1) { %> 
There are <%- rates.length %> shipping rates available for <%- address %>, starting at <%= rates[0].price %>.
<% } else if (rates.length == 1) { %>
There is one shipping rate available for <%- address %>.
<% } else { %>
We do not ship to this destination.
<% } %>
<% } else { %>
<%- errorFeedback %>
<% } %>
<ul id="shipping-rates">
<% for (var i=0; i<rates.length; i++) { %>
<li><%- rates[i].name %> at <%= rates[i].price %></li>
<% } %>
<!--[if lte IE 8]> 
<style> #shipping-calculator { display: none; } </style> 
{{ '//' | script_tag }}
{{ '/services/javascripts/countries.js' | script_tag }}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'jquery.cart.min.js' | asset_url | script_tag }}
<script> {
submitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }}, 
submitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }}{% if customer %},
customerIsLoggedIn: true{% endif %},
moneyFormat: {{ shop.money_with_currency_format | json }}
} );
{% endunless %}

Open up the Shopify admin in a new tab, click on Online Store, and then select Themes.

Pick the theme you want to edit, select the ellipsis (…) button, and then select Edit HTML/CSS.

Select the Snippets folder, and choose Add a New Snippet. Name the snippet “shipping-calculator”; select Create Snippet.

Now, paste the clipboard’s content into the online code editor, and hit Save.

To show your shipping calculator in a specific spot on the page, include this snippet:

{% include 'shipping-calculator' %}

in the appropriate place. Follow these steps:

  • Select Online Store and then choose Themes from your Shopify admin.
  • When you locate the theme to edit, select the ellipses (…) button, and choose Edit HTML/CSS.
  • Click the cart.liquid file under the Templates folder to open it within the online code editor.
  • Search for the </ form> and add the above mentioned code underneath it.
  • Finally, save the changes.

All that’s left is to customize the shipping rates calculator.

Head to your Customize theme page. Look for the Shipping Rates Calculator section and customize the following:

  • Whether or not to show the calculator
  • The exact shipping text that’s shown above the calculator
  • The default country selection
  • The copy that’s going to be shown on the submit button

You’re all done!

3. Showing a Delivery Dates Picker on the Cart Page

Letting customers see when their product will be delivered isn’t just standard customer service—it’s also superb UX on a shopping site.

To include a date picker on the cart page, do the following.

Head to the Assets folder and open it. Within the Assets directory, open the theme.js or theme.js.liquid file and add this to the bottom of the file:

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +1,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
} );

Then, save the changes.

Stay on the Edit HTML/CSS page. In the Sections folder, select the cart-template.liquid file to open it inside the online code editor. Find the closing tag of your cart form, which is </ form>

Above </ form>, add this line:

<div style="width:300px; clear:both;">
<label for="date">Pick a delivery date:</label>
<input id="date" type="text" name="attributes[date]" value="{{ }}" />
<span style="display:block" class="instructions"> We do not deliver during the week-end.</span>

Save these new changes.

Look under the Layout folder: Click on the theme.liquid file to open it up inside of the online code editor.

Before the </head> tag, add this:

{{ '//' | stylesheet_tag }}
<script src="" type="text/javascript" defer="defer"></script>

Congrats! You’ll now get to see a delivery date field right on your store’s cart page. Clicking in the text field causes the date picker to appear.

A Powerful Platform, but Only as Good as Your Customized UX

Shopify is indeed a flexible and very usable platform that allows a lot of ordinary people to sell online fast with minimal technical skills. It’s a great platform for entrepreneurs doing everything from drop shipping to beginning their business empire.

However, as with any platform, the UX is, ultimately, what makes it successful. Thankfully, Shopify’s code allows for easy customizations in your store across various elements of the checkout experience: the copy or text, calculating shipping rates, and displaying delivery date selections.


12 Essential Free Sketch Plugins

As Sketch 44 exits beta, we take a look at one of Sketch’s best features: the huge selection of open source plugins.

The Sketch community is wildly supportive and you can find tons of amazing plugins that’ll radically improve your workflow. In this post I’ll cover the 12 best Sketch plugins that every designer should have.

1. Sketch Measure

Sketch Measure helps designers organize and outline their work for developers, project managers, and other team members.

But this is also incredibly useful to lone wolves who design & code all of their projects. With the Measure plugin you can outline elements showing specific width/height dimensions to get proper measurements at a glance.

This includes all page elements like buttons, text, icons, and even major parts of the artboard.

With Sketch Measure you can even export pages into HTML/CSS with page styles in-tact. Granted there are Adobe tools that can do this too. But having all this functionality right in Sketch makes your job that much easier.

2. InVision Craft

A while back the InVision team announced a new plugin Craft. But this is more like a suite of plugins where you get tons of extra features and shortcuts.

One example is the Data plugin which lets designers pull text/data straight from public APIs on the web. This way you can auto populate your app with real content & images on the fly.

InVision developers are constantly updating Craft with new plugin features to make this even more valuable to designers. And did I mention this is totally free?

So far Craft has 6 major plugin features, all of which are worth adding into your design workflow.

  • Freehand – realtime collaboration in Sketch
  • Prototype – dynamic high-fidelity prototyping
  • Sync – instant syncing between InVision prototypes & Sketch
  • Data – pull real data from the web into your Sketch mockup
  • Library – design assets in the cloud shareable with your entire team
  • Duplicate – lightning-fast UI cloning

Take a look at the Craft homepage and see what you think. Once you try it you’ll never want to go back.

3. Sketch Toolbox

Every Sketch user should know about the Sketch Toolbox. It’s an exquisite plugin manager that just makes installing/customizing your plugins a lot easier.

With this Toolbox you can browse through hundreds of Sketch plugins and choose which ones you want to install. You just click what you want and it’ll automatically download to your computer, ready to use.

And the Sketch Toolbox auto-updates plugins to keep them running smoothly.

Technically this is still in beta and it’s always receiving new updates on GitHub. But I think it’s solid enough to use in a production workflow. In fact, I’d argue a good Sketch workflow wouldn’t be complete without this incredible plugin manager.

4. Export Assets

One of the most detailed tasks of a designer is allocating resources and sharing them with developers. All the little icons, graphics, background patterns, these all need to be exported (usually by hand).

The Export Assets plugin makes this process a breeze. Just note this plug is made specifically for mobile apps where designers need to export Android/iOS interface assets. This includes retina assets for @2x and @3x screen sizes.

I haven’t seen any features related to retina web design, but you can check out the Sketch Exporter plugin too. It’s currently in beta and it’s meant to be an improved version of the original.

5. Content Generator

The Craft plugin I mentioned earlier offers content generation. But you may want something a bit simpler like this Content Generator by Timur Carpeev.

With this installed you can auto-populate multiple Sketch elements at once with related data such as:

  • User avatars
  • First & last names
  • Dummy paragraph text
  • Custom strings(geos, prices, CC card numbers, etc)

All content is pulled from open source databases like Unsplash and Uinames so you can use this on multiple projects, commercial or otherwise.


6. Looper

Photoshop has its own Actions panel where you can automate repeated actions. Sketch doesn’t have a panel like this but it does have the Looper plugin which is completely free and super easy to learn.

This is most useful for creating repeating patterns that take over the entire page. Graphic designers may find more use for this plugin than web designers, but it can save a lot of time looping through repetitive scaling/duplication tasks.

Take a peek at the Looper homepage to see what it can do. It may not be useful for everyone, but for those who can use it you’ll find yourself saving a lot of time.


7. Sketch Iconfont

Web designers love icon fonts. Great icons make UI design a lot easier and font files are generally smaller than images.

The Sketch Iconfont plugin is a complete management suite for storing, sorting, and pulling icon fonts right into Sketch. By default the plugin comes empty so you’ll need to download icon fonts locally to use them.

But this grants you complete access to work with any icon fonts you find online. There’s actually a font bundle pack made specifically for this plugin if you’re looking to fill up your iconfont folder quickly. And you can always scour the web for more as time goes on.

I absolutely recommend grabbing a copy of this plugin. Icon fonts are here to stay and they’re invaluable to modern websites.


8. Style Inventory

Whenever you start a new Sketch file you either have to re-make styles from scratch, or you need to copy/paste styles from previous mockups.

With the Style Inventory plugin you can bypass all this extra work. Just a few clicks imports all your previous styles right into your new Sketch document for easy access.

These styles include colors, text styles, and symbols, along with layer styles for certain elements.

This plugin is rarely updated but I do recommend it for merging similar mockups. You might also try the Sketch Palettes plugin for saving & importing color schemes.


9. Pixel Perfecter

Every digital designer prides themselves on pixel-perfect mockups. This task isn’t hard but it does require every design element to be perfectly aligned with the grid leaving no overlaps or imperfections.

If you ever want to check your work before exporting you can run Pixel Perfecter. This very small plugin checks all your file assets to see if any pixels overflow the traditional X/Y coordinate positions creating imperfect pixels.

Note this won’t automatically fix these offset pixel values. It’ll just find the layer(s) causing issues and highlight them so you can go in and fix them yourself. Still it saves a lot of time checking each layer manually.


10. Dynamic Button

The original dynamic button plugin was somewhat abandoned in 2015, but the newer Dynamic Button plugin is even better and compatible with Sketch 3.5+.

It automatically adds padding and button styles onto any text layer you create, and the padding is dynamic so it updates regardless of text size. This is wildly helpful for UI designers who are constantly making changes to their mockups.

This can also be used for mobile apps where buttons generally follow a fixed size/ratio. It’s not the most glamorous Sketch plugin but it does its task well.


11. Compo

If you want a button generator along with some extra features then the Compo plugin is worth testing.

Compo’s creator got the idea after using the Dynamic Button plugin for a while, eventually wanting something a little quicker. Compo auto-generates the proper button size and text size to match your exact specifications. One click and you have a working Sketch component that’s automatically sized & positioned properly.

Normally when you create a button and change the text it’ll only affect the text layer. So the underlying button would be too small. Compo automatically resizes the button and the text as if they’re one element.

You can find tons of demos on the GitHub repo along with some user guides for getting started.

12. CSSketch

Last but certainly not least is the CSSketch plugin. This is most useful for designer+developer combos who want direct access to CSS code for all the styles they create.

Any page you design can be run through this plugin to export a full stylesheet with all assets accounted for. But since this is automated you can’t expect A++ quality code.

I still prefer to code my CSS by hand, but this plugin at least offers a starting point for non-technical designers or developers who want to save a bit of time.



Wow Clients with Eversign’s Electronic Signatures

If you’re a freelance designer, or developer—heck, if you’re a globally renowned digital agency—you must not do business without binding paperwork; don’t even pick up a sketchbook unless the client is signed up and committed.

Every designer has a horror story about the client who seemed trustworthy, and then pulled a fast one. Whether it’s the client who vanishes when the invoice is due, or the client who keeps adding, and adding, and adding to the list of tasks, all clients—good and bad—can be managed with sound paperwork.

The kicker is, a designer that asks for a signed contract is one of the first things good clients look for. Good clients are not only happy to sign contracts, they want to—requesting a signed contract tells them that you’re a professional, and you know what clients want? A professional designer!

Despite the benefits to you, and the assurance it provides a client, signed paperwork isn’t always easy to arrange—especially when so many of us work remotely. It’s pretty tough to ask a client to download, print, sign, scan, and then email a contract to you.

Which is exactly where eversign comes in. eversign is a cloud-based system that enables the signing of electronic documents in a way that is legally binding and globally recognized.

To get a document signed, just upload a PDF and use eversign’s document editor to add input fields for data like names, dates, and contact details. eversign’s templates allow you to write a document once, save it as a template, and adjust it for every new client, so you can set up your documents once and reuse over and over.

eversign maintains a repository of your documents, so you’ll never lose a contract again—no more rooting around the garage for that box of files. If you want to, you can export them to your desktop for quick reference. You have the option to set them to auto-expire, so they’re only on record as long as necessary. And because security is important, you can permanently remove them from eversign’s system—not just soft-delete like some cloud storage.

Should there ever be a problem, eversign’s comprehensive audit trail will quickly clean up any misunderstandings. The record of all interactions will show names, email addresses, time stamps, and the IP address of the person accessing the document.

Actually signing a document couldn’t be easier. You can draw your signature on a touch screen or pad, type it and select one of the supplied script fonts, or upload your actual signature. However you choose to do it, once your signature is online, you can give add consent to a document in seconds.

Of course if you are meeting a client face to face, then you can still have them sign your documents. Just open the document up on your laptop, tablet, or cell. When you bump into a huge business opportunity, nothing says “ready for business” like a digital non-disclosure agreement, ready to sign on your cell phone.

Using eversign you can manage multiple business accounts, each with its own team members, contacts, and documents. You can even add branding for each business, so your clients are confident with whom they are dealing.

Going paperless in the office really has never been easier. And if this gets you excited, then eversign even has a JSON-based REST API, giving you the option to make your in-house system paperless.

eversign’s legally binding document signature system is a huge benefit to designers who want to protect themselves from bad clients. But the real benefit is the impression you leave with good clients when you can sign them up, with a few taps on a mobile device.


[– This is a sponsored post on behalf of eversign –]


How to Troubleshoot WordPress Errors and Glitches

As much as I love WordPress, I’ve certainly done my share of swearing at my computer because the WYSIWYG editor won’t load properly or when I check in on one of my websites and find the theme has decided to self-destruct or there are suddenly database connection errors all over the place. To be fair, the core code of WordPress…. Continue Reading

The post How to Troubleshoot WordPress Errors and Glitches is written by Rachel Adnyana and appeared first on WPKube.

What’s New for Designers, May 2017

This month’s collection of new tools has a theme – they are mostly time-savers. Many of these elements are small in weight but big in helpful nature. Almost everything on the list this month is free, with the exception of a few more premium typefaces. They’re sure to be useful to designers and developers, from beginners to experts.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!


Ever wonder what the exact dimensions of a certain paper type are? This happens a lot if you are working with multiple print designs and don’t have every option as a preset. PaperSizes takes the guesswork out of it with a handy tool that breaks down every size by name and specification in more than a dozen classifications.

Brand Briefer

Brand Briefer is a fun tool that’s designed to help you build a brand board, but is also an inspiration gallery of imagery, colors and style that other brands are using. Want to know exactly what McDonald’s yellow looks like (or any other color in the palette)? Brand Briefer has a file on it.

Screenshot Designer

You need a great screenshot in app store to help encourage user downloads. Screenshot Designer helps you take images of your app design and add text or neat background to make them pop in crowded digital storefronts. The tool is easy to use – select a template, drag in an image and export.


This to-do list is unlike others because it fills a meter as you cross items off the list. TodoMeter comes with a sleek design and is available for Mac, with a Windows version on the way.


BreakLock might just eat up the rest of your day. This fun little game is a hybrid of Mastermind and the Android pattern lock with three degrees of difficulty. (There’s no way you’ll only play once.)


SVGito is a small tool to help designers and developers automate improvements to SVGs that would normally require a manual code edit. The changes reduce the file size and complexity of an SVG while maintaining the visual appearance. It is primarily designed for SVG files exported from Sketch.


Framer is a tool that “detaches code from canvas for a smarter but simpler workflow,” according to the developers. The newly designed interface puts a focus on building blocks and kicks code to the background with auto-code functionality.

Responsive Periodic Table with CSS grids

The Responsive Periodic Table with CSS Grids is a neat look at a detail use of a grid system that flexes and flows with changes to screen size. And maybe not in the way you think. While the desktop version uses a periodic table style design, the responsive shapes adjust beautifully to other screen sizes.


CodeCopy adds functionality that’s been missing for a long time – the browser extension adds a copy to clipboard function to every code snippet. It works with Chrome and Firefox.

Twitter Corners

Twitter Corners is a little bit of code that adds a Twitter divot to the corner of screen based on the similar Github element.

Essential Icon Collection

This collection of line icons includes 500 free elements for commercial and personal use. The icons all have a softer rounded style and were created on a 32-pixel grid for mobile app and web project usage.

Super Tiny Social Icons

Super Tiny Social Icons are minuscule SVG versions of your favorite logos. The average size is under 500 bytes and each icon is 400×400 with a 512×512 viewbox. They will scale up and down. There are dozens of icons in the collection, all ready to use. is a conversional interface that you can embed in websites to help facilitate chat with users or customers. What’s neat about the tool is that is has a more text-like feel that users are accustomed to and doesn’t rely on static text.


Confetti is a little tool that helps you create Memphis-style confetti patterns in one-click with Sketch. You can adjust transparency, rotation, overlap, size and more to get just the pattern you need for a project.

Bot Store

The Bot Store is a directory of chatbots that you can download and use for a number of tasks. (This is one of the fastest growing areas in online customer service.) Find bot templates for surveys or scheduling and a directory of bots in action to help inspire your projects.


Typefont is an algorithm written entirely in JavaScript that recognizes the font of a text in an image using the Tesseract optical character recognition engine and some image processing libraries.


Brushability is a set of nine typefaces that provide almost every display option you can imagine. It includes script, sans serif and inline styles as well as plenty of swashes and alternate characters.

Buinton Rough

Buinton Rough is a script typeface with noble and vintage looks and is a modified version of Buinton. It has serifs at the beginnings of the strokes, swash capitals and formal design. Buinton Rough has lots of alternate characters, swashes and ligatures.

Coco Gothic

Coco Gothic is a contemporary take on the retro geometric sans serif style of early typefaces like Futura. It comes in six weights with matching italics and features an extended character set with open type support for small caps, ligatures, alternates, European languages, Greek and Cyrillic alphabets for a total of 36 fonts ready to solve your design problems. This is a premium typeface with plenty of practical uses.


Ink is a tattoo style typeface that started as a school project for the type designer. The letter style could make an interesting dropcap or other display option.


Kumu is a fun, bubble-style display typeface. It might make a fun option for a novelty headline or poster design. 

Summer Festival

Summer Festival is a clean script with plenty of characters. The light feel of the typeface is perfect for a variety of projects. The free version is for personal use only.

Zoon Hoot

Zoon Hoot is a novelty, Star Wars-inspired sans serif display face. It includes upper- and lowercase styles, numbers and basic punctuation.