Using Architect’s device adaptive settings

  • Contents

  • Architect 1.2 introduced an exceptionally powerful handling of device specific design.

    Normally in responsive design, you build one site fits all and then make it squish, squeeze or stretch in response to the device it is displayed. Companies with lots of money usually build a separate mobile site, after prefixed with an m, e.g. m.companyweb.com

    With Architect you can now have the best of both worlds. You can still have the elasticity of responsive design,  but you can now design specifically for the device type: Phone, tablet and others (desktops/laptops), that is, they will adapt to the device.

    These are the three dominant device types. Each has it’s own myriad of screen sizes to cause us endless headaches in design.

    But now Architect makes it simple. You simply set a Blueprint to display for any or all of the three device types. You only set the primary one, and phones and tablets will use it.  Likewise you can just set the primary and the phone, and tablets will use the primary.

    The following shows you screenshots from the various methods and how easy it is.

     

    Headway

    Headway

     

    Shortcode

    Shortcode

    e.g. [ architect blueprint="testimonials" phone="testimonials-slider"]

    Architect Builder

    Architect Builder

    Widget

    Widget

    Template Tag

    Template Tag

    pzarchitect (blueprint,overrides,tablet,phone)

    blueprint : (string) The short name of the main Blueprint to display

    overrides : (array) Array keys are: ids, tax, terms. All are optional. If you're not using this parameter, but are including tablet or phone Blueprint parameter, use null for it

    tablet: (string) The short name of the Blueprint to display on tablets. If you're not using this parameter, but are including the phone Blueprint parameter, use null for it

    phone: (string) The short name of the Blueprint to display on phones

    Beaver Builder

    Beaver Builder

    Coming soon!!

    Seeing it in action

    Seeing it in action

    And now, let's look at an example in action

    Desktop

    Desktop

    On the desktop, the primary Blueprint is used. It's a two column grid

    Tablet

    Tablet

    The tablet also displays the same Blueprint; however, because of the responsive settings in the Blueprint, it displays only one column in the portrait mode of the table.

    Phone

    Phone

    And the phone, rather than having the viewer scroll through a long one column grid, we display a slider, which they can then flick left or right.

    Conclusion

    Conclusion

    What makes this work is the assumption that people don't radically change their screen sizes on a single device. I know we all test responsive by grabbing the sides of our browser and shrinking it right down, in general usage, on the desktop, we keep our browsers broad.

    On phones and tablets, the only time we change the screen width is when we change the orientation. Which isn't that big a change and is easily handled by the responsiveness of Architect.

    What this means is, you can't just resize your browser to see the adaptive Blueprints in action. You will have to refresh the page.