The Palm Leaf Grasshopper

Posted by: u/rolandroflz

I thought this was pretty cool!

This is a palm leaf grasshopper! There’s much discussion in the Reddit thread about the material, origin, and proper Japanese nomenclature. Typical and to be expected of any high-quality Reddit post honestly — however, one user in particular commented a web archive link to something extraordinary.

An old, MS-painted tutorial on how to make such a grasshopper out of palm leaves:

A real treasure.

Balance Biking

I learned something interesting the other day.

Learning to ride a bike with training wheels are apparently, a bad idea. Learning to ride a bike with balance bikes, are a better idea. Personally, I like to call it a butt-scooter, but I digress. (Note to reader: I’m not an expert on this whatsoever, links to real experts are below)

The general hypothesis is, learning to a ride a bike is all about splitting up the problem into parts. You really only have two issues any newcomer has to iron out:

  1. Balancing
  2. Pedaling

Which really comes down to two different learning models:

  1. Learn to balance on a balance bike (playing with a butt-scooter)
  2. Then one learns to pedal on a real bike (multi-tasking pedaling and balancing)

Breaking the problem into two steps seems easy… too easy.

Basically, step one is: trick kids into learning how to balance (it’s a butt-scooter for christ’s sake) on their own before he/she learns how to pedal. A child falling over on a balance is less likely to happen as well. Their feet always hang off the side, ready to catch themselves. There’s no pedals, so you they can only ride as fast as they can waddle with the butt-scooter in hand.

Balancing on any bike is basically all about inertia and movement. So just leave that up the children to decide what feels comfortable.

If you throw training-wheels on a bike and hand it off, a child immediately loses the ability to feel the inertia of the bike and more importantly — they lose the ability to correct. Which could be dangerous when it comes time to remove the training wheels. While they’re learning all about pedaling and multi-tasking with training-wheels on, it becomes super apparent why it’s not ideal to take those training wheels off. Because, well… gravity.

The poor kids that had training wheels have never experienced it before! No wonder kids fall down when you take them off!

A typical balance bike

Balance bikes are an absolutely brilliant idea. The additional upshot with these little inventions (apart from saving your kids knees and elbows from certain duress) is kids can begin playing with balance bikes at a much younger age bicycles with training wheels. That’s just my opinion. The example above is very tiny. Designed for children of 2 years aged, at the earliest. Given its construction, it could even be used indoors on carpet. Because, I mean — c’mon lets be honest. Balance bikes are basically just butt scooters for kids.

Again, I’m not a parent (yet) and nor am I an expert on how to raise kids. But there are seasoned authors out there who are. Such as CyclingUK, which has a great blog post on where to start with balance bikes and when to transition to pedals.

Web Design and The Z-Layout

Introduction

The state of Web Design continues to evolve every single day. It has always been in a constant state of flux — pretty much since the iPhone was released in 2007. The iPhone was a doozy, because it forced developers and designers to find workarounds with Flash. Steve and Apple were not intent on bringing flash to mobile users. However, the web really became an exciting place when Google Chrome overtook Internet Explorer sometime in between 2011-2012. It signaled a shift in usage, technology and design thinking — and that just about brings us to now.

 

Layouts

When designing a layout, it’s important to keep an objective in mind. For example, Stripe is a product for developers and web-stores so their main objective is to completely wow developers from all walks of life (Stripe.com has some insanely cool cutting edge Front-end CSS). Another example is Lyft, whose primary goal is to convert visitors into users. What it really comes down to, what is this layout supposed to do for us and for visitors?

Even though we all know above-the-fold is kind of bullshit, it’s still important. Just so we’re all on the same page, we’ll call anything above-the-fold, The Hero. Designing a Hero component of a webpage can be really fun!

First, we figure out an objective: e.g. convert visitors into customers, signup users for a newsletter, or maybe there is no objective at all. Second, we need to figure out a design strategy. This is where the Z-Layout comes in.

 

Z-Layout Design Variations

Let’s take a look at some classic examples. If you are the head of product for an app, or wish to drive visitors to a specific page elsewhere on the website — chances are you want to go with a Z-Layout optimized to move customers around. Let’s look at some variations on this theme.

Slack – The E-mail replacement app has a lighthearted design, and aims to convert visitors into users.

 

Lyft – No paragraphs of copy, just high contrast, a simple form to become a driver and that’s it. If half of your visitors just want to become a driver, or a customer — make it easy for them.

 

Asana – Project management can be a hard sell, but communicating a simple product can be more effective than talking about bells-and-whistles.

 

Southwest – This airline gets an honorable mention. It’s not very sexy, and booking a flight itself is not fun here. But it is important to note that a vast majority of visitors here probably go straight to the booking form — so at the risk of being annoying to repeat users, it seems Southwest values their reward program over actual ticket sales. In fairness, this Hero area above the form likely changes all the time for various promotions and deals.

 

Coinbase, Caviar, Medium and Blue Bottle Coffee – more examples of Z-Layouts (yeah yeah some are stretching it) that promote engagement (e.g. interacting with a form or scrolling down). A single input on the form is key here. If there’s more than one, such as First Name and Last Name… forget about it. Medium is the exception because the product is reading. If you’re not into scrolling and reading, you’re probably not an ideal user for the platform.

 

Various – Above are some examples of heroes that are designed to convert visitors into customers. Key takeaways here on these, high contrast, elements along a “Z” path for eyeball scanning, and a button. The button is very important to driving engagement. It is 100x easier to just click a button than fill out a form.

 

Conclusion

Before I get destroyed in the comments, a layout is not a blueprint. If you’re a product designer looking to spice up your homepage or wish to drive customers to a sale happening at your webstore — look to the examples above for inspiration. The basic rule of this layout is this: simply align elements along a Z-shaped path above-the-fold. The secondary objective is: keep it simple. The less copy, the better. High contrast helps a lot. Make sure to check your colors for accessibility’s sake. And lastly, add your objective last along the Z-path (e.g. a button, form, or link). I hope this helps anyone in need of inspiration or direction!

If you have any questions, feedback or comments drop me a line below 🙂

How to Add Advanced Custom Fields to AMP by Automattic

Want to add your ACF’s to your AMP’s?

If you’re unfamiliar with AMP (Accelerated Mobile Pages) by Google. It’s basically a new way to serve super fast, lightweight compiled versions of a webpage to mobile users. It has its own validation spec. Really really huge honking websites like Polygon, Washington Post and The Verge all use AMP on their news articles.

Which is super awesome, because nothing sucks more than an article taking more than 15 seconds to load over “Transit Wi-fi” on the G Train. These super powered articles are literally instant, taking no more than 1 second to load — even over 4G speeds. Even after all of those pro’s Google takes it one step higher by giving search result priority to AMP powered-articles and pages for mobile searches.

So the first thing you need to do is declare in your functions.php file that you want to use a custom AMP template. Mine looks like this:

  ...
  <?php
  add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );
  function xyz_amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type ) {
      $file = dirname( __FILE__ ) . '/templates/template-amp.php';
    }
    return $file;
  }
  ?>
  ...

Then create a template file in your theme called template-amp.php. Mine is in a directory named templates.

Copy the amp-wp single.php template from the Github master for the latest codebase.

Once you’ve done that, you can add your ACF field in the template as usual! The caveat are ACF image fields which need some AMP-validating like so:

  ...
  <div class="amp-wp-article-content">
    <?php echo $this->get( 'post_amp_content' ); // amphtml content;?>
    <?php if( have_rows('editorial_flexible_components') ): ?>
      <?php while ( have_rows('editorial_flexible_components') ) : the_row(); ?>
        <?php if( get_row_layout() == 'paragraph' ): ?>
          <?php $paragraph_text = get_sub_field('paragraph_text'); ?>
        <?php elseif( get_row_layout() == 'image' ): ?>
          <?php // Grab the Image ID from the ACF ?>
          <?php $the_image = get_sub_field('the_image'); ?>
          <?php $image_url_array = wp_get_attachment_image_src($the_image, 'full', true); ?>
          <?php $image_url = $image_url_array[0]; ?>
          <?php // Displaying a ACF Image field that will validate ?>
          <img class="i-amphtml-fill-content i-amphtml-replaced-content" src="<?= $image_url; ?>" alt="" />
        <?php endif; ?>
      <?php endwhile; ?>
    <?php endif; ?>
  </div>
  ...

And now, the AMP will deliver your ACF content! Obviously I used Flexible Content fields in my example, but you can use any ACF field in the template-amp.php file, just make sure it validates.

Before (left), and after (right):

Photoshop Template iOS Play Button

At Six Flags, we deliver an immense amount of newsletters.

Each park has several thousand subscribers. Every so often, the parks have videos they would like to share in their newsletters. We discovered an issue with these thumbnails that have an overlaid play button.  It either distorted the image, or it was too dark or too light. So we did some research on who reads our newsletters, and what devices/browsers are normally visiting sixflags.com from the newsletters.

Turns out we have mostly iOS users (with Android shortly behind) that were the highest openers. So it was discussed we could use the iOS play button on the thumbnails since most users would be seeing the newsletter in on an iOS device. Besides we weren’t a fan of emulating Android Chrome’s play button due to the fact the play button might get lost in our thumbnails.

android-play
Not exactly the most legible. Image: Android Central

So, I went to imgur.com and found a .gifv of Homer on my iPhone.

Aye Homer! Cheer up bud!
Aye Homer! Cheer up bud!

With that out of the way I started to replicate the gaussian blur in Photoshop. Here’s the setup:

setup

We got our Artboard, a Group containing all our stuff suffixed with .jpg so Generate Assets will do its thing, and Icon Group and a Smart Object containing our source photo and just a nice background because aesthetics.

icon-group

In the Icon Group, we have a Play Icon, and Play Circle. Each containing a duplicated copy of the Smart Object source photo. This is pretty nifty, because when we save changes in the Smart Object it is updated everywhere else in our document. 😌 Both of which are a clipping mask, and have their corresponding shapes underneath (i.e. Ellipse and Triangle) Each Object also have a Gaussian Blur Smart Filter whose value is set to 8px.

blur

I also added Color Overlays to the shapes to distinguish one from the other. The Ellipse which was rgba(255, 255, 255, 0.5) and the Triangle is set to rgba(0, 0, 0, 0.6 Now if you edit the Smart Object, Save and return to the Document, you have yourself a nice little iOS Play Button thumbnail image! Enjoy!

iOS-Safari-Play-Button

[button type=”primary” size=”lg” link=”https://www.dropbox.com/s/xcjjb9kcl3qzwai/20160630-Play-Template.psb?dl=0″] Download the Template [/button]

Topics:

/