Design after familiarising yourself with a platform

Take the time to get to know the platform, web technologies, and end output you’re designing for as each platform has design and functionality related limitations. If you don’t do this first, there’s always the danger that you’re going to design something that is completely wrong for the platform or cannot be coded within a reasonable amount of time. So make sure it’s possible first!

How do I do this? The easiest way to do this is to use the platform and see how it works. Being aware of what scenarios and platforms you’re designing for will help you figure out how big your sandbox is. It also means setting the right expectations for what’s possible with tech. This way, you don’t over promise to your client or product owner only to later say that a key feature you designed can’t be coded.

For example, within WordPress, get to know:

• The content pop workflow in Gutenberg and see what the output is on the frontend
• Widgets
• Custom post types
• Popular plugins like Gravity Forms, FacetWP and FooGallery

For web tech, get familiar with knowing:

• Solid responsive design knowledge from small to 4K screens
• Bootstrap components
• How social sharing works
• How designs will affect website performance

This is by no means an exhaustive list, but it should give you a good idea of what you need to know. Still unsure? Talk to a frontend (FED) and backend (BED) developer for some guidance.

Keep in mind coding effort

It’s very possible that a little bit of design will result in a lot of coding. A typical scenario I’ve encountered is when a designer has designed a seemingly simple feature in a minute, however, it ends up taking much longer to code during FED and BED. The reason for this significantly longer development time is that making designs functional may require more complex backend logic. The danger of not considering coding time and effort is that you’re designing development heavy features that are time-consuming to code which can result in your product development running behind schedule.

Say you’re designing a product sash for products on an ecommerce website. The designer has already designed several product sashes like Sold Out, Popular and On Sale that have backend logic (rules that dictates behaviour) attached so that these sashes will only appear in certain cases. For example, the backend logic for the Sold Out sash means it only appears when the product inventory is 0. Now let’s say that we want to add a new sash for “Popular”. Design and FED-wise, this would probably be pretty fast because there’s already an existing sash template for the designer to modify and existing sashes implemented from which to create a new HTML element in FED. However, the effort to backend code the Popular sash is much higher.

Track time with Toro Timer

Toro helps remote teams stay productive no matter where they are.

Get early access

In order for the BED to code the Popular sash’s backend logic, they first have to know the rules for what constitutes as “Popular”. Different versions will also take different amounts of time. For instance, one possibility is where the product owner wants the Popular sash to show if more than 20 units have been sold within the last two weeks. Alternatively, they may want to be able to manually control what is labelled as “Popular” in which case the admin can tag the product as “Popular”. So depending on these two types of BED logic, there would be a big difference in the time needed to code.

Now, developers generally do not shy away from coding (or at least we hope that they don’t!), but you have to consider how much work you’re creating for them down the line. This is especially important when you have multiple designs and products to juggle and client or colleague expectations to manage. In this light, it might be better for you to give up on this feature (for now) or coming up with a pared down version for the sake of staying on schedule and not overworking your developer.

What should I do? Think about what kind of logic would be needed to execute your design first then consult your client, product owner and friendly neighbourhood developer before proceeding with design. You may find out that what you want to do is not realistic or of low value to the end user. Alternatively, you may find that it’s easy to design, code and has great value! Either way, you’re better informed about the effect of your designs.

Design reusable UI components

It’s important to remember that designs need to be practical, not only in terms of how it will be initially coded but how it will be managed in the long term. In tech terms, this means thinking about designing UI components so they can be reused across the website or app. This adds to the longevity of a design because it can be easily maintained from a backend standpoint while still looking good on the frontend. In order to achieve this you may have to reach a compromise with your design’s aesthetic elements in favour of ease of maintenance.

Let’s explore the consequences of this in an example. You may have chosen to design a website which has varied irregular shapes (think jellybeans and splats). Though this may make for a more visually interesting design, it might become hellish for developers as variations might lead to the writing of bad or unmaintainable code. This is because every unique shape has different margin and padding requirements and the more variations there are, the more low-level coding is required to fine tune them. If the developer is inexperienced, there’s a possibility that the way it’s been coded may not be so readable, elegant or maintainable. This means that if another developer, or even the same one, comes in later, they will have trouble understanding the code and will therefore have more trouble fixing it. More design and coding variations also means that the developer cannot use a blanket fix on them and must spend more time coding a fix for each one. Another problem is that with more code comes more opportunities for older code to break. The end result? Massive headaches.

The last point is that people usually do not end up using all the bells and whistles you designed. Though the website may look fancy after you initially deploy it, your client or whoever ends up doing the content updates and maintenance may not choose to follow suit, or, may even get confused if there are too many options. They may very well end up sticking to one or two elements that they’re comfortable with for content population and forego the other options. All the other stuff you designed and coded will then be wasted effort.

What should I do? Although it is possible to use as many shapes as you like, think about how they’re actually going to be coded and maintained later. One strategy is to design UI components in a way that makes them reusable. Set a fixed number of variations e.g. 4 and stick to those only. The definition of maintainable code is that it’s code that is easy to modify, extend and debug. By designing a custom shape that you can then flip horizontally and vertically to make “new” shapes, you will get the visual variety that you need while still making it easier for the developers to write fixes if ever they break. It’ll also hopefully be simpler for whoever maintains the website in the end.

There you have it folks! Though it’s easy to create aesthetically pleasing designs and features, you have to consider the direct effect design will have on FED and BED and beyond. Remember, design isn’t just about how it looks, it’s also about how it works and what the experience is like for others that you’re working with. Talk to your developers often to discover limitations and peek into what it’ll be like to maintain the design in the future so that you design with development in mind.

The post Designing with Development in Mind appeared first on Stampede: the strategic design & technology company.

Gutenberg by default comes with a handful of block types that should cover standard web content updating needs. However, it also has a nifty Block API for adding custom block types if you need them to display specially designed components for our website. In this tutorial, you are going to add a custom Gutenberg block type so that the output is a notice box with a few predefined styles that accepts arbitrary text input from the user.

This is what you’re going for.

And here is how it looks from the admin’s side.

Alright, let’s get to coding!

Step 1: Create a plugin for the new block type

You will be creating a custom block type as a WordPress plugin. This will allow you to decouple it from any themes you are using and in case anything goes wrong, you can simply deactivate it.

So create a new folder in the WP plugins folder and let’s call it gutenberg-notice-block. In this new folder, create a plugin.php file with the following code:

/**
* Plugin Name: Gutenberg Notice Block
* Author: Shaiful
* Description: A notice box with a few predefined styles that accepts arbitrary text input.
* Version: 1.0
*/

// Load assets for wp-admin when editor is active
function shaiful_gutenberg_notice_block_admin() {
   wp_enqueue_script(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.js', __FILE__ ),
      array( 'wp-blocks', 'wp-element' )
   );

   wp_enqueue_style(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.css', __FILE__ ),
      array()
   );
}

add_action( 'enqueue_block_editor_assets', 'shaiful_gutenberg_notice_block_admin' );

// Load assets for frontend
function shaiful_gutenberg_notice_block_frontend() {

   wp_enqueue_style(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.css', __FILE__ ),
      array()
   );
}
add_action( 'wp_enqueue_scripts', 'shaiful_gutenberg_notice_block_frontend' );

Basically what this file does is initialise the plugin by loading the necessary JS and CSS files at the right place and at the right time. The code above is looking for block.js and block.css, which you will create momentarily.

At this point, you should be able to see the new plugin listed in your WP Plugins admin page. Go ahead and activate it.

Moving forward, all of your coding will be done in JavaScript with some ReactJS flavour to interact with the Gutenberg Block API.

Step 2: Register the new block type

Create a file called block.js in your custom plugin folder. This file will hold the entire logic of the custom block type for the admin-side and frontend of your website.

Start by adding the following bare-bones code.

/* block.js */
var el = wp.element.createElement;

wp.blocks.registerBlockType('shaiful-gutenberg/notice-block', {

   title: 'Notice', // Block name visible to user

   icon: 'lightbulb', // Toolbar icon can be either using WP Dashicons or custom SVG

   category: 'common', // Under which category the block would appear

   attributes: { // The data this block will be storing

      type: { type: 'string', default: 'default' }, // Notice box type for loading the appropriate CSS class. Default class is 'default'.

      title: { type: 'string' }, // Notice box title in h4 tag

      content: { type: 'array', source: 'children', selector: 'p' } /// Notice box content in p tag

   },

   edit: function(props) {
      // How our block renders in the editor in edit mode
      return null;
   },

   save: function(props) {
      // How our block renders on the frontend
      return null;
   }
});

The code above registers your new block type with the name “Notice”, using a light-bulb Dashicon and putting it under the Common Blocks panel in the Gutenberg blocks browser. You should be able to see the new block in your editor at this point.

You also specify the attributes (and their data type) that your new block will be storing which are the box type, the box title and the box content.

Lastly, there are two functions called edit() and save(). The edit() function is responsible for rendering your block in the editor while the save() function outputs your block HTML on our website’s frontend.

Let’s explore them now.

Step 3: The edit() function

The edit() function controls how the block will appear in the Gutenberg editor for the user to interact with.

For your custom Notice block type, the goal is to accomplish two things:

1. The user can select the notice box type as well as enter the box title and content.
2. Selecting different notice box types will show a simple live preview of what the box is going to look like on the frontend.

Add the following code into the edit() function.

/* block.js */
edit: function(props) {
   // How our block renders in the editor in edit mode

   function updateTitle( event ) {
      props.setAttributes( { title: event.target.value } );
   }

   function updateContent( newdata ) {
      props.setAttributes( { content: newdata } );
   }

   function updateType( event ) {
      props.setAttributes( { type: event.target.value } );
   }

   return el( 'div',
      {
         className: 'notice-box notice-' + props.attributes.type
      },
      el(
         'select',
         {
            onChange: updateType,
            value: props.attributes.type,
         },
         el("option", {value: "default" }, "Default"),
         el("option", {value: "success" }, "Success"),
         el("option", {value: "danger" }, "Danger")
      ),
      el(
         'input',
         {
            type: 'text',
            placeholder: 'Enter title here...',
            value: props.attributes.title,
            onChange: updateTitle,
            style: { width: '100%' }
         }
      ),
      el(
         wp.editor.RichText,
         {
            tagName: 'p',
            onChange: updateContent,
            value: props.attributes.content,
            placeholder: 'Enter description here...'
         }
      )
   ); // End return

},  // End edit()

Line 16-49 is the main code you will use to display the user interface in a way that allows you to update the content in your block type. The code is written in ReactJS specifically the React.createElement() function is used to create new DOM elements. Do not worry if ReactJS is unfamiliar to you. You can make use of this specific tool to compile JSX template code to React.createElement() functions.

Here is an example.

It’s a good idea to create your block.css file right now so that you can test the live preview functionality in the editor. Make sure the CSS file is saved in your plugin folder.

/* block.css */
div.notice-box {
   border: 1px LightSkyBlue solid;
   border-left-width: 5px;
   padding: 10px 15px;
   margin: 30px;
}

div.notice-box.notice-success {
  border-color: MediumSpringGreen ;
}

div.notice-box.notice-danger{
   border-color: LightCoral ;
}

div.notice-box h4 {
   font-size: 18px;
   margin:0 0 10px 0;
}
div.notice-box p {
   font-size: 16px;
   line-height: 24px;
   margin:0;
}

At this point, you should be able to add your Notice block type into the editor and see three different fields for configuring the notice box. The dropdown for selecting the notice box type should also gives you a live preview between the default (blue), success (green) and danger (red) box types.

Step 4: The save() function

The save() function for your Notice block type is pretty straightforward. You just have to construct the correct HTML structure and populate the title and content into the notice box <div>. Once again the DOM elements creation code has to be written in ReactJS.

Here is the code:

/* block.js */
save: function(props) {
   // How our block renders on the frontend

   return el( 'div',
      {
         className: 'notice-box notice-' + props.attributes.type
      },
      el(
         'h4',
         null,
         props.attributes.title
      ),
      el( wp.editor.RichText.Content, {
         tagName: 'p',
         value: props.attributes.content
      })

   ); // End return

} // End save()

That’s it!

Your Notice block type should now work on both the admin and website’s frontend.

Here is the link to download the completed plugin.

Something to keep in mind

Looking at the save() function, you’d imagine that updating the HTML output in there would cause a global update for all instances of the Notice box that you have populated on your website. It’s natural to expect this (it is, at least from our experience with working with WP shortcodes). Unfortunately, this isn’t what happens.

Making any changes to the block HTML output would trigger a conflict with all existing instances of the blocks that have been populated. What’s worse is that the only way to fix this is by repopulating the blocks one by one. This is the caveat of static block types.

To work around this, make use of the Dynamic Blocks feature which hands over the save() function from JS to PHP to generate the block HTML output on the fly.

Final thoughts

The ability to create custom block types is very cool and opens a lot of possibilities for content customisation. After trying it out myself, I would say the basic concept is fairly easy to follow. The real challenge, however, is presenting the custom block in the best possible way to give content authors the best editing experience, especially for blocks with complex functionalities. I find that the official developer documentation for various attributes configurations or working with RichText field for example, are still lacking. It will improve surely but the best reference materials we have at this moment are online articles and the existing blocks that came out of the box with WP5.

On another note, I am personally looking forward to the Advanced Custom Fields (ACF) plugin taking on the custom block types with their own ACF Blocks for Gutenberg. This new addition should lower the barrier for WP developers to take advantage of Gutenberg block capabilities in a more intuitive way.

The post Creating a Custom Block Type for WordPress Gutenberg Editor appeared first on Stampede: the strategic design & technology company.

The standard way of embedding Google Forms is to use an iframe, which is sufficient. The more preferable way of course is by manually extracting the form’s HTML fields and re-coding it according to your theme’s HTML structure. Not only will it match your theme nicely, but you can also insert some custom JS validation on the fields as needed. Another plus is that Google Forms captures form submissions in a convenient spreadsheet format.

The Steps

The first step is to create two web pages in BigCommerce that will become our form page and success page when users submit the form. The form page is a custom template file that will contain our form HTML codes while the success page is simply a generic page. Take note of the success page URL.

Next, build our form in Google Forms with the most minimalist styling. Once tested and published, view its source to get the form codes and re-code the form into our custom template file — in the HTML structure we like while preserving the field names and the <form> action (and method). Next is some code alterations.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"style="display:none;" onload="if(submitted) {window.location='SUCCESS_PAGE_URL';}"></iframe>


<form action="https://docs.google.com/forms/d/1CsZt9s0vVegFb3-Qa3162Ri7A91ggx6S9B6qvBZcyJY/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
...your form fields...
</form>

Add line 1 and 2 right before our form tag and replace the correct success page URL in line 2.

Next, add target="hidden_iframe" onsubmit="submitted=true;" attributes to the <form> tag so that the form submits into the hidden <iframe> we created in line 2.

Finally, give it a test run. It is advisable to validate the form fields with JS to ensure the form is indeed being submitted successfully.

Although this guide is written for BigCommerce, the implementation steps are generic enough to be used on any platforms where you have HTML and JS editing access. Hope it helps.

Need help making your BigCommerce store stands out from the competition? Get in touch.

The post Embedding Forms in Bigcommerce Using Google Forms appeared first on Stampede: the strategic design & technology company.

A staple feature of e-commerce websites.

In Shopify, this feature may already comes standard with most of the themes or in an updated version of the current theme you are using, which is great. However in some cases you could be using a heavily customized theme and updating is not going to be a breeze, well, all you need is just a couple of lines of codes and you got yourself an upgraded product slideshow.

The Code

Paste the code below into the bottom of either template file product.liquid or snippet file product-form.liquid.

{% if product.variants.size > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    variantImage_count = 0;
  	//produce mapping between variant image and options
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
         variantImage_count++;
   	   }
    {% endfor %}

    $(function() {

      if (variantImage_count > 0) {
        $('select.single-option-selector').change(function() {
          var selected_color = $(this).val();
          thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
            var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
            if (typeof variantImages[image] !== 'undefined') {
              if(selected_color == variantImages[image]['option-0']) {
                //only check against the first option ['option-0'], which is Color (in my case)
              	$('.flexslider').flexslider(index);
              }
            }
		      });
        });
      }

    });
})(jQuery);
</script>
{% endif %}

The code is a combination of Liquid template tags and JS. It is based on the customization provided by Shopify for enabling customers to select a product variant by clicking its image and modified to work the other way around.

Line 10-30 produces the mapping between variants image and options in a JSON object that is used for comparison against the product thumbnails in the select box event handler function as seen in line 35-46. Line 42 is the actual code that tells the slideshow to jump to a specific slide. As you might have guessed, the code is unique to Flexslider slideshow plugin. You need to determine what slideshow plugin you are using and then figure out how to jump to a specific slide using its API.

I hope you find this guide useful. If you have questions/feedback, let me know in the comments.

Have a nice day!

The post Showing Selected Product Variant Image in Shopify Product Slideshow appeared first on Stampede: the strategic design & technology company.

Or you simply don’t want to use Bootstrap 3 dropdown menu on mobile because the menu is just too tall?

Bootstrap 3 Mobile Menu

Well, why don’t you try to use push menu for mobile instead?

Bootstrap 3 Mobile Push Menu

For this responsive bootstrap push menu tutorial, I’m using Takien’s jPushMenu. The tutorial shall require all the three big guns – HTML, CSS & Javascript to make the push menu happen.

Before jumping to the tutorial, why don’t you check out these demos for Left Overlay, Left Push, RightOverlay, or Right Push?.

Responsive Bootstrap Push Menu – HTML

Here I am using default Bootstrap Navbar with additional classes for push menu to work.

<pre>
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Brand</a></div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse">
<ul class="nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form">
<div class="form-group"><input class="form-control" type="text" placeholder="Search" /></div>

<button class="btn" type="submit">Submit</button></form>
<ul class="nav">
<li><a href="#">Link</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>

<!-- /.navbar-collapse --></div>

<!-- /.container-fluid --></nav>
</pre>

Based on the above html, added classes can be found on line 05 (toggle-menu menu-left push-body) and line 15 (cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left).

The post Responsive Bootstrap Push Menu Tutorial appeared first on Stampede: the strategic design & technology company.

Nowadays, there are quite a number of font icons provider out there. To name a few, they are Font Awesome, IcoMoon and Typeicons. Most of them provided different icon packs.

Out of all font icons available, I’ll easily pick Fontello as my favourite in the pack.

Why Fontello?

I found out that out of all font icons out there, Fontello provides most of the icons from other providers such Fontalico, Font Awesome, Entypo, etc. This gives me a lot of icons variations for use, and I am not the one who believes in the saying do not be spoiled by choice.

With Fontello service, I can even use my own icon as well. What I need to do is just create a svg format icon and drag it on the section provided. Easy peasy.

Another part of Fontello that I love is that the ability to choose just the icons you need. 

Other font icon providers come with CSS that include all icons. Whilst using Fontello, I just need to choose only the icon(s) that I will need to use.

Let’s also say if I need to add new icons in the future, I just need to import config.json (this comes with the file that you’ve downloaded from Fontello) on Fontello and it will highlight the icon that I have chosen on particular project.

Best of all, Fontello is also highly customisable. You can easily change class for your icons and use your own font name with Fontello, as shown in these examples – changing class name followed by changing font name.

What do you think? Do you also prefer Fontello over other font icons or are there some font icons out there that caught your fancy? I am interested to hear all about it. Comments below!

The post Fontello As My Favourite Font Icon Service appeared first on Stampede: the strategic design & technology company.

What is this CSS sprite technique & why?

CSS sprite, as interesting as it is called, is also an interesting CSS method itself. This approach involves changing an image to another different image, or the same image but different colour scape (greyscale, sephia etc.) upon hover.

The advantage of using the using css sprite technique is that the web page will automatically load all images at once, instead of one by one. This will speed up the loading time and there will be not much delay for users with slow Internet connection.

But how?

When we hover on the block, the background image will change smoothly to second image. If we use separate image for hover effect it will take time for website to load that image from server thus, will create ± 1 second empty space on hover. This will be a problem for user with slow internet connection.

Interesting. Show me how.

Here we go. Take a seat.

First of all, get any images or sprite to start. I would suggest an image with transparent background. In this tutorial I am going to use this Ninja Sprite from 36peas. Choose any two images – one for normal state and another for hover. Save them on some canvas by side or top and bottom.

Before we start, it’s a good idea to show some simple css background code.

Single line css background code in correct order would be:

background: color position size repeat origin clip attachment image;

In this image, each ninja will have width:227px and height:298px.

Total width for both ninjas in one canvas would be width:454px and height:298px.

In this tutorial we will only need a combination of three css background codes. Width and height set will just be for one image.

On hover, just change position of the image. Background image in this tutorial I put straight to image file. So the code should be like this:

Normal state:

display:block;
height:297px;
width:227px;
background-position:0 0;
background-repeat:no-repeat;
background-image:url('ninja.
png');

Hover state:

background-position:-227px 0;

Normal state in shortcut css:

display:block;
height:297px;
width:227px;
background:0 0 no-repeat url('ninja.png');

Hover state in shortcut background css:

background:-227px 0 no-repeat url('ninja.png');

or

background-position:-227px 0;

If you would like to see how it looks like, you may view the demo links here:

• normal/regular method
• shortcut background css

Correct syntax for shortcut background css :

background: color position size repeat origin clip attachment image;

For background-position, always remember all browser read css background position code from x-axis to y-axis. In these examples:

• background-position:(x-axis)px (y-axis)px;
• background-repeat: By default, all browser will use value ‘repeat’. To make it one image simply put ‘no-repeat’.

There are some bits of notes about background-image: – back during my first time doing css background, it was a bit confusing to do relative path if the file images are in different folder.

Here are some examples to show what I meant:

The location for the html file.

The location for images and CSS folder.

The location for the image file.

By default, the browser will find image in same folder where we save the CSS file. The solution for this problem would be that we have to jump outside the CSS folder by typing  ‘ ../ ‘ which means going back to one folder:

Here is an example based on my local html and css folder.

background-image:url('../art/ninja.png');

Here are some links for you to play around:

• background-position:
• background-repeat: 
• background-image:

Awesome! I am going to try now!

Yay! And if you do have some questions, suggestions or examples, do drop them links in the comment.

(Thanks W3C for being my main point of references.)

The post CSS Sprite Technique appeared first on Stampede: the strategic design & technology company.

Sample of product sashes.

In BigCommerce, exclusive product sash features are not built-in but they can be added using some clever jQuery tricks. Specifically, we need to tell jQuery to read the page for certain “triggers” or “conditions” and show the appropriate sash based on them. The key to product sashes is they have to appear in product listing pages (like category, homepage, search result) and the product details page. This means the “triggers” have to be present in all these pages for jQuery to detect.

On Sale Sash

In the following example, I am going to show how to add the most common of all product sashes, On Sale. Firstly, we need to set the discounted price for the appropriate products. If this was done right, the products will show up in the shop with a strike-through line on their original retail price. This element will become the “trigger” for the On Sale sash. So we just have to tell jQuery, if this element exists, show the On Sale sash. Below are Javascript codes for the category and product details pages.

Product Category Page

$("#CategoryContent .ProductList li .RetailPriceValue").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
});

Product Details Page

if($('.DetailRow.RetailPrice').is(':visible')) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
}

Any Miscellaneous Sashes

A slightly trickier scenario is to show product sashes like Bestseller and New, which we don’t really have a way to configure via the BC admin. Even though BC has product tags and custom fields, these data don’t show up in the product category pages. Fortunately, we have something else to use, the main image alternate text. In BC admin, it’s the Description box of the main product image. You need to enter a unique identifying keyword in the Description box and thanks to jQuery, reading the presence of this keyword is a breeze. This method will allow you to show any kinds of product sashes.

Enter the keyword into the Description field of the main image.

For showing a Bestseller sash, enter the keyword Bestseller. I personally prefer to enter the actual product name followed by the keyword to keep the semantics right, like 5ft Christmas Tree – Bestseller. Here’s the code for showing the Bestseller product sash.

Product Category Page

$("#CategoryContent .ProductList li .ProductImage a img[alt*='Bestseller']").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
});

Product Details Page

if(ProductImageDescriptions[0] && ProductImageDescriptions[0].indexOf("Bestseller") >= 0) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
}

The examples I provide here only contain the necessary jQuery code snippets to make the product sash works. It’s not really a step-by-step beginners tutorial. You would need CSS to style the product sash nicely. Don’t forget about the sash graphics too, they are transparent PNGs. I can also foresee that my codes are totally template-dependent. However, if you are familiar with jQuery selectors I am sure you will be able to understand the gist and tweak the codes accordingly to fit your templates.

Give it a try and post your feedback below!

The post Add Product Sash/Ribbon in BigCommerce Using jQuery appeared first on Stampede: the strategic design & technology company.

Real quick, both services offer a wide array of base themes to get user started. It’s also worth mentioning that half of the themes on Shopify are premium themes.

The Common Traits

Both platforms use a system where the template HTML files are organized into views such as layout or snippets. They use different naming conventions but the general idea is layouts are the skeleton of the whole page and snippets are the bits of content loaded into the page. For example, a layout file could be for homepage or product category page, while a snippet is another file controlling the product loop that can be called from both layout files. Each platform has its own syntax for invoking these files and user can add new layouts and snippets. This system makes it easy to reuse repetitive codes and keeping your code tidy. Making little modifications like adding an FB Like box or a Mailchimp signup form is a piece of cake.

Both platforms also has a built-in HTLM/CSS code editor with basic key features such as a file browser and list of recently opened file. However, the BigCommerce editor has an extra handy feature which lists all the files dependent to the currently viewed file for quick access.

Now we shall compare them.

BigCommerce (BC) vs Shopify

Before we go any further, let me just break the news that Shopify hit a home run with this one. The winning formula is Shopify themes are made to be customized in the first place. Two key features that stood out are Theme Settings extension and Liquid programming language.

Theme Settings extension is fairly interesting. It allows the theme developer to tweak the settings or configuration fields of any themes. As an example, if the shop owner decided he needs to use an alternative logo when the website is viewed on a mobile phone, the theme developer can simply add a new upload field into the settings page in addition to the default logo upload field. The new variable will automatically be accessible in the template and the alternative logo can be output and controlled using CSS.

While BC templates only contain static calls to other template files, Shopify has its own template programming language called Liquid. Liquid comes with basic programming functions such as variables assignments, for-loops, conditional statements as well as a handful of cool helper functions. The code can be used both in HTML and CSS files. Here is a very nice cheat sheet.

With Liquid, a certain degree of logic can be implemented into the template such as giving different CSS class to elements based on the page currently in view. A little more advanced example is using product tags to put ribbon/sash on products in category pages. In my recent project, I tagged products with bestseller and used the following code to produce a Bestseller sash. While this can be implemented in BC using clever Javacsript tricks, I found that the tags system in BC to be a bit limited.

{% for mytag in product.tags %}
   {% if mytag == 'bestseller' %} 
      <span class="circle sd-bestseller">Bestseller</span>
   {% endif %}
{% endfor %}

Custom Bestseller product sash. On Sale was built-in.

The next thing I love about Shopify is the dedicated manager for Menus or Navigation in the admin panel. Admins can create as many menu groups as they like in addition to the default Main Menu. Then simply use the Liquid for-loop in the appropriate template file to render the menu (also in any way they like). This is how it looks in its simplest form. Of course, with a little bit more code you can also highlight the active menu item.

<ul>
   {% for link in linklists['footermenu1'].links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
</ul>

Once the menu structures are implemented in the template this way, it will be very easy for store admins to add or remove menu links without having to alter the template file directly.

Another feature that works very well with the menu manager is Smart Collection. A collection is Shopify’s way of saying category. A smart collection is somewhat a dynamic category where products are automatically assigned based on the rules defined to the category for example, if a product has a specific tag or if it falls between a specific price range. A menu can be made to link to the smart collection which gives a “product filter” sense of interaction when it is placed strategically on the page.

The next exciting feature Shopify has to offer is Apps to extend the functionality of your online store. There are hundreds of them but a particular one that has proved to be essential is the meta fields app, which allows the user to define additional generic text fields to products. Outputting these extra text can be done effortlessly using simple template tags. With custom meta fields, designers would have far more design flexibility when customizing the theme.

BC’s Redeeming Features

The one limitation of Shopify that I noticed is the checkout pages are off-limits to HTML modifications. Therefore, you won’t be able to place any special text or move the layout around. This could be due to the fact that a code mistake can cause the whole checkout process to break. CSS changes is still permitted though. BC on the other hand allows their checkout pages HTML structure to be modified.

One little bonus feature of BC is the template files can be accessed via FTPS or WebDAV. This can be really useful in circumstances where you need to make a directory-wide search or batch search and replace task using your local IDE.

Final Words

Working with BC and Shopify have been a great learning experience. But if I had to choose which one I enjoyed more, it has to be Shopify!

The post Customizing BigCommerce and Shopify appeared first on Stampede: the strategic design & technology company.

Quoting a blogpost about a research:

Researchers led by Dr. Gitte Lindgaard at Carleton University in Ontario wanted to find out how fast people formed first impressions. They tested users by flashing web pages for 500 milliseconds and 50 milliseconds onto the screen, and had participants rate the pages on various scales. The results at both time intervals were consistent between participants, although the longer display produced more consistent results. Yet, in as little as 50 milliseconds, participants formed judgments about images they glimpsed. The “halo effect” of that emotional first impression carries over to cognitive judgments of a web site’s other characteristics including usability and credibility.

Try clearing your browser cache and refresh your website, how long does it take to fully load? 2 seconds? 30 seconds?

If you are running a business on your site, potential customers might have already been turned off by the page load time. This might affect sales.

So what can you do to speed up your site?

Thankfully, there are a lot of great tools and solutions out there to help you optimize your site. For this post, I’ll introduce three techniques that I know of.

Use a Content Delivery Network (CDN)

Traditional server architecture is having your web hosting provider’s server serve up your website to the world wide web. Your website might load fast for users located near the server. But what if your most targeted customers or users span all across the other continents?

This is where CDN comes into play. CDN is a delivery network service. It is a service provider whereby they allow you to cache your site on their network of servers, at an affordable cost (some comes free) all over the world.

Big boys’ sites like Google and Facebook have the power and funds to buy servers and have them setup personally all across the world. For personal or small business sites, CDN services are the way to go. Now you do not have to worry about choosing a hosting provider that is closer to home.

These CDN services also come with additional perks like analytics and security. Some claimed that the analytics data are more accurate than script-embedded services because CDN are the ones that serve the site. Also, you are protected up to the latest threats since your site is under their wing of networks.

Minify all the things!

It is okay for your source code to have proper indentation and spacings during development phase. But in production environment, you’d better off getting your source code and asset files like CSS and javascripts minified to reduce their file size down to a significant level. This will not only save you on bandwidth cost but also speed up the site for first time visitor.

It is also advisable not to change your source code too often in production environment because visitors will have to load up new versions of the source code each time you make a small change. So unless we are talking about critical bugs in the site, update the site by a huge batch of changes. Make use of the browser caching ability.

Analyze your site and further improve

There are a couple of tools out there that can help you analyze your site and suggest ways on how to improve your site like Yahoo!’s YSlow. For me I use Google’s PageSpeed extension. Install it and start analyzing your site today – it is free. I was able to score up to 99/100 points in my recent optimization attempt.

The one point missing is from third party fonts that I have no control on improving.

One thing to note is that even though the analyzer is a great way on improving your site, you still need to consider each suggestion that were thrown at you carefully. Each site is built differently so 100 points should be an ideal target but not a must-attainable score.

That is it!

With the three solutions that I suggested, that should give you a general idea on how and why you should speed up your website. If you have any other alternatives, do comment below. I would love to hear about your optimization techniques. Best siot!

The post Speed Matters appeared first on Stampede: the strategic design & technology company.