Responsive


The samples below illustrate different Smart Countdown layouts and configurations. Event dates have no meaning for this presentation, that is why there are no references to target dates in event titles unless it is required to explain a special setting. There is a virtually unlimited number of configurations/layouts combinations, so it’s impossible to demonstrate all of them on one page. Please, read descriptions for each sample.

It is recommended to view this page on a desktop (i.e. in a browser window wide enough), otherwise layout samples given below might have been already changed by Smart Countdown FX “responsive” feature and samples’ descriptions will not coincide with actual layouts. If you are just testing “responsive” feature, change the orientation of your handheld/phone or change the width of your browser window – you will see “responsive” in action.

Sample 1: Minimum shortcode configuration. No specific event title set. All styles have their default settings.

Shortcode used:

[smartcountdown deadline="2015-05-01 00:00:00"/]

Sample 2: Custom styles set in shortcode.

Shortcode used:

[smartcountdown deadline="2015-08-01 00:00:00" units="years,months,days,hours,minutes,seconds" layout_preset="shortcode.xml" fx_preset="Apple style folding" title_before_down="All inline layout. Custom background and styles applied." title_before_up="All inline layout. Custom background and styles applied." title_before_size="16" title_before_style="font-weight:bold;" digits_style="color:red;" digits_size="60" labels_size="18" labels_style="font-variant:small-caps;" widget_style="padding:5px 0;text-align:center;background:#ffffff url('wp-content/uploads/2015/05/small_baby_blue_bricks_seamless_pattern.gif') repeat right top;"/]

Sample 3: Column (sidebar) layout. A non-responsive layout is used, so when you change browser window width the widget below will not change its elements sizes (compare with the samples above). Also digits transition is set to “text opacity” (default is “sliding”)

Shortcode used:

[smartcountdown deadline="2017-08-01 00:00:00" layout_preset="sidebar_non-responsive.xml" fx_preset="Text_opacity.xml" units="*" title_before_down="A column layout. Typical when the widget is displayed in a sidebar. 'labels_size' attribute is set to 20px" title_before_up="A column layout. Typical when the widget is displayed in a sidebar. 'labels_size' attribute is set to 20px" title_before_size="16" labels_size="20"/]

Sample 4: Extended shortcode supports custom HTML in event title(s).

Shortcode used:

[smartcountdown deadline="2017-08-01 00:00:00"][title_before_down]
sample-cga-rates-splash-1
Images or other media can be inserted and custom formatting applied using a "WYSIWYG" editor.
[/title_before_down][title_after_down]
SOME OTHER HTML CAN GO HERE...
[/title_after_down][/smartcountdown]

(paragraph styling is not shown as it would break “preformatted” box)


Sample 5: Show only days left.

Shortcode used:

[smartcountdown deadline="2016-01-01 00:00:00" units="days" layout_preset="shortcode.xml" title_after_down="left until 2016" /]

Sample 6: Non-responsive layout. The widget below uses a custom layout preset based on “shortcode_compact.xml” but with responsive feature disabled (<responsive value=”0″ />). Counter elements are not scaled down and counter layout is not switched to vertical (column) when there is not enough horizontal space for the widget. Counter units simply wrap to the next line and the widget is still looking good.

Shortcode used:

[smartcountdown deadline="2015-01-01 00:00:00" layout_preset="shortcode_compact_non-responsive.xml" fx_preset="Growing images" digits_size="80" labels_size="18" widget_style="text-align:center;" /]

Sample 7: “Use titles for count up mode as ‘Time has arrived’ message” widget option or “hide_countup_counter” is active. The coutner block is hidden, only titles for count up mode are displayed.

Shortcode used:

[smartcountdown deadline="2000-01-01 00:00:00" hide_countup_counter="1" title_before_up="The event has started" title_after_up="Check back for new opportunities"/]

Responsive algorithm explained

On responsive adjustment Smart Countdown FX  gives priority to the layout set in widget configuration or shortcode. If desired layout doesn’t fit into the available horizontal space plugin script starts scaling widget elements down until correct layout can be displayed. After the resulting scale is calculated it is checked against scale presets listed in layout preset XML document, referred in “layout_preset” shortcode attribute or layout set in widget configuration. If a node with a greater scale value is found in preset XML widget layout is automatically updated using alternative rules from the scale node found. After the alternative layout is applied the widget is re-scaled again in order to make use of the space available.

Unless you have configured a counter with huge digits which are easily readable even if scaled down to 50% it is recommended to apply alternative layout rules starting from 80% scale and down (most built-in layout presets do it), otherwise widget elements may become too small, thus resulting in a negative viewing experience. Read more about fine-tuning layouts.

Special moments simulation

The samples below are not real countdowns, they are initialized to certain fixed values on each page refresh and serve to demonstrate plugin behavior at some special moments. Normally you will have to wait for 15 to 30 seconds before you can view the effect described, so scroll to this page bottom right away after you reload this page, otherwise you might be late for the “show”.

Crossing zero smoothly

Most plugin animations have two versions – one for countdown mode and the other for count up. If the page is open at “event moment” new animation is applied smoothly.

Hide counter after event

Plugin implements an option to hide the counter after (during) the event. The sample below counts down to zero and then hides the digits and only displays its title for count up mode – this title plays the role of a “Time has arrived!” message.

Do not allow all-zeros display

The sample below is configured not to show seconds. However when less than a minute is left before event, “0 minutes” display would be somewhat confusing: it will stay still during the whole minute before event giving an impression that event time has already arrived. The same will happen during the first minute after event if count up mode is enabled.

The widget below will show “1 minute” right after the page is reloaded but in approximately 20 seconds it will start counting down in seconds. The count up from zero will start in seconds during the first minute and finally the counter will display minutes elapsed since event time.