Codex Tag: responsive

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.

Goal: A 3×3 grid of excerpts The goal of this tutorial is a three by three grid of excerpts, using the dummy content type as shown. Create a new Blueprint 1: Create a new BlueprintArchitect provides two means of creating a new Blueprint. For this tutorial, we are going to start with a blank Blueprint, rather…