mind hum

Pickle your fancy

Upcycling

Our local billy cart derby is nearly upon us. Competitors bring their own home-grown carts to the circuit and the design stakes are just as heated.

Hot tip: you can use any old cardboard box if you prime it first with gesso. It gives your acrylic paints something to grip onto, and, with opaque white behind it, your colour seems brighter.

Sea creature safety factor

Insurance companies care about what color cars are the safest, but seem to have conflicting research. To me, it’s not so much a question of colour, as it is contrast with the background, which can vary.  The location and intensity of the sun affects the reflectivity of a surface (albedo), and the color of a car could appear differently on the shaded side. If other drivers can’t see a car coming at a glance, this increases the chance of collision.

Now, consider the octopus (stay with me). They are a master of disguise with the ability to change colour, pattern, shape and texture. Once, while snorkelling, I encountered one hunting on the edge of a reef. It changed from pale white to a dark mottled pattern almost instaneously. It positioned in a hole, and crumpled its upwardly raised tentacles to look like seaweed. Incredible!

Shape and texture aside, the key to their colour and contrast change is specialized skin cells called chromatophores. These are essentially layered pigments that can be individually stretched to create a different density of a particular colour. To the eye, the different colors mix like the RGB of TV screens (additive colour). Combined with a reflective background that shows through in varying degrees, they can camouflage or display themselves with an amazing mastery.

Not your average flow chart

RESPONSIVE EMAILS (part 2 of 2) - Robust and responsive

Following on from previous post:

THE PROBLEM: The browser bundled with Android 4.4 doesn't allow a responsive technique that has worked on other versions of Android. The TDs won't stack because the doctype declaration is being stripped out, which effectively invalidates media queries in this case.

THINKING IT THROUGH: In the spirit of object oriented thinking, we may want to treat any HTML element like an object, but considering some elements are specialised to behave differently by default, we can encounter issues trying to reliably override properties with CSS.

These tds need to be wrapped in a div (a more generic HTML element) with the display property set to display:inline-block. This will allow them to occupy the next available space. But let's not forget we're dealing with table elements (specialised HTML elements). The table cells will want to behave as such, adhering to columns and rows. This is great for an immutable layout, but we're trying to make it responsive. SO we need to treat each column's content like a tile.

SOLUTION? Nested tables. With each one wrapped in a div with display set to inline-block. Now width should be 100% to fill available space on small screens, and a max-width set to allow side by side on wide screens. Table elements can be set to width of 100% so that they respond to the width of their parent element, and contentment can be centred using inline attributes. So this is responsive design without media queries (you can still include them); makes use of tables for robust layout; but compensates for their immutability with a fully stylable parent DIV.

RESPONSIVE EMAILS (part 1 of 2) - TD stacking Emails are a valuable component of a good communications or engagement strategy. Tables and their associated elements have long been required in eDMs to ensure a robust layout, but the tradeoff is the flexibility of a liquid layout, particularly useful in a world of mobile devices.

Responsive design techniques have been a boon for anyone serving up screen-based layouts and, in the context of emails, the use of media queries to adjust layout for small screens has allowed for the TD stacking technique to handle multiple columns.

Put simply, several table cells (denoted TD for table data) are displayed side by side (in columns), but if the screen (or viewport) is small (like on a mobile phone), the table cells stack (in one column). The best of both worlds, right?

So, you check it in testing platform previews (Litmus, et al) and all views are good - except one! The layout breaks on Android 4.4 (aka KitKat)!! Previous versions of Android are not affected by this, so what gives?!

I like to moo-vit

Blue steel

Category Winner!

The Pizza Experience

buttons to UI