Using Architect’s device adaptive settings
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.
This document can be viewed online at: https://architect4wp.com/codex/architect-tutorial-using-device-adaptive-settings/
Headway
Shortcode
e.g. [ architect blueprint="testimonials" phone="testimonials-slider"]
Architect Builder
Widget
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
Coming soon!!
Seeing it in action
And now, let's look at an example in action
Desktop
On the desktop, the primary Blueprint is used. It's a two column grid
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
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
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.