Announcement

Collapse
No announcement yet.

Adaptive mobile design breakpoints server side

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Adaptive mobile design breakpoints server side

    Here is some code to set a cookie with a JSON array on the client then parse the cookie and set breakpoints server side.

    I am using jquery.cookie and toolbelt but you can do it with vanilla.js or store morph.

    Set a cookie clientside, in the head section add:

    Code:
    // requires jquery
    // requires jquery.cookie
    
    jQuery(document).ready(function($){
    var ui_features = new Object();
    ui_features.width = $(window).width();
    ui_features.height = $(window).height();
    $.cookie("ui_features", JSON.stringify(ui_features));
    });
    In the HTML Profile tab, before the <html> tag, add the following code:

    Code:
    <mvt:item name="ry_toolbelt" param="cookie|load|g.ui_features" />
    <mvt:item name="ry_toolbelt" param="assign|g.ui_features|da(g.ui_features)" />
    <mvt:item name="ry_toolbelt" param="assign|ui_features|Json_Parse(g.ui_features, 0)" />
    <mvt:if expr="g.ui_features:width LT 480">
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-xs-min'" />
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'1'" />
    <mvt:elseif expr="(g.ui_features:width GT 479) AND (g.ui_features:width LT 768)">
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-hs-min'" />
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'2'" />
    <mvt:elseif expr="(g.ui_features:width GT 767) AND (g.ui_features:width LT 992)">
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-sm-min'" />
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'3'" />
    <mvt:elseif expr="(g.ui_features:width GT 991) AND (g.ui_features:width LT 1200)">
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-md-min'" />
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'4'" />
    <mvt:else>
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-lg-min'" />
    <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'5'" />
    </mvt:if>
    You can now serve content based on screen size. Example:

    Code:
    <mvt:if expr="g.ui_breakpoint:value GT 3" >
    <div class="row">
    <div class="col-sm-12">This is breakpoint medium 3 or more</div>
    </div>
    </mvt:if>
    You can build out on the code to add other window features or stringify a modernizer array.

    Unfortunately you will not know the client screen size on their first visit because they have not yet set a cookie. That's just the way it rolls.
    Last edited by alphabet; 07-27-14, 12:04 PM. Reason: typo
    http://www.alphabetsigns.com/

    #2
    Re: Adaptive mobile design breakpoints server side

    Adaptive design helps control the file size you are serving over mobile bandwidth.

    For example, you can serve smaller and better proportion images based on the size of the clients screen.

    Code:
    
    <mvt:if expr="g.ui_breakpoint:screen EQ 'screen-xs-min'" >
    <img src="graphics/00000001/[email protected]" alt="something">
    <elseif expr="g.ui_breakpoint:screen EQ 'screen-hs-min'" >
    <img src="graphics/00000001/[email protected]" alt="something">
    <elseif expr="g.ui_breakpoint:screen EQ 'screen-sm-min'" >
    <img src="graphics/00000001/[email protected]" alt="something">
    <elseif expr="g.ui_breakpoint:screen EQ 'screen-md-min'" >
    <img src="graphics/00000001/[email protected]" alt="something">
    <mvt:else>
    <img src="graphics/00000001/[email protected]" alt="something">
    </mvt:if>
    http://www.alphabetsigns.com/

    Comment

    Working...
    X