Author: Steve Puddick

Optimization Techniques for Video Listing Pages

Embedding videos (such as from YouTube) in webpages is very common on websites.

You may not be aware, but embedding videos can cause web pages to load slower. If you embed 1 video on a webpage you likely won’t notice much of a difference. However, if you were to create a video listing page (even with as little as 4 embedded videos) you can really start to see a big difference in how long your page takes to load.

A technique I like to use in cases like this is to display the preview image of the video rather than the full embedded ‘iframe’ HTML tag. YouTube provides video thumbnails at different resolutions at these URLs:

  • https://img.youtube.com/vi//0.jpg
  • https://img.youtube.com/vi//1.jpg
  • https://img.youtube.com/vi//2.jpg
  • https://img.youtube.com/vi//3.jpg

Images load significantly faster than iframes. In this technique, it also features a floating play button in the centre of them to make them look like videos. When clicked, the embedded video iframe is loaded behind the scenes and the video plays. A couple sample pages have been set up to show the difference in page load time between the embedded iframe version and the image version:

Traditional embedded iframe: https://webrockstar.net/optimizing-video-listing-page-iframe/

Image preview: https://webrockstar.net/optimizing-video-listing-page-images/

Here are some more details with some screenshots with Chrome Developer Tools open. You will notice the load time displayed on the page is approximate. The load time displayed in the Chrome Developer Tools is more accurate.

There is one caveat with the image approach. On touch devices the videos will require 1 extra click (or touch) to play the video since videos cannot autoplay on touch devices. I do not see this as a ‘deal breaker’ for this approach though. In some cases it may be desirable to not accidentally play a video on a webpage when you really intended to scroll or do another action.

Take a look at the code on CodePen to see how it all works.

Web Rockstar Website Adjustments

I have made a few adjustments to webrockstar.net recently. When I first launched the new redesign a few years ago I just got the MVP up and running. I found some time to do the next round of adjustments and enhancements:

  • created a new post type for 'free plugins' and 'pro plugins' rather than just a category of posts
  • reworked the home page hero to showcase the 3 main post types
  • reworked the front page template to show the 3 main post types of webrockstar.net: posts, free plugins, pro plugins
  • removed the author line (it will always be me!)
  • reworked the archive templates to show cards rather than the full listing of posts
  • improved the markup with proper HTML5 semantic elements

I built this latest version of webrockstar.net with FoundationPress (A WordPress starter theme based on the Foundation Framework). When it comes to front end web frameworks there is basically Bootstrap and Foundation. I like the Foundation framework for projects that are more on the 'website' side of the spectrum rather than 'web application'. I feel Foundation gives more flexibility with branding and visual uniqueness. Branding and visual uniqueness have more importance on a 'website'. On the other hand Bootstrap has more pre built components that come in handy with projects that are more of a 'web application'. FoundationPress is good and you may want to check it out. But for my next project I plan on checking out JointsWP. It still uses the Foundation framework as it's base but give more of a 'bare bones' starting point which is what I like.

Take a look at the old home page for comparison:

The home page before the adjustments.

Notes Widget Wrapper PRO Launched!

Notes Widget Wrapper PRO is now available! Featuring shortcodes and more!

Coming Soon – Notes Widget Wrapper PRO

Stay tuned for Notes Widget Wrapper PRO launching soon!

The PRO version includes the highly requested shortcodes. You will be able to embed notes with free form content directly in your posts and pages. Take a look at some screenshot previews. Sign up on the mailing list to be notified when it is launched.

The original, free version of Notes Widget Wrapper is still available in WordPress plugin repository.

The 'Add Note Wrapper' button (located above the content editor) can be clicked to open the shortcode editor modal window.

Choose from the various options to configure the shortcode as desired.

Example 1 of the front end rendering of the shortcode.

Example 1 of the shortcode settings.

Example 2 of the front end rendering of the shortcode.

Example 2 of the shortcode settings.

Example 3 of the front end rendering of the shortcode.

Example 3 of the shortcode settings.

The widget settings in the inactive state.

The widget settings in the active state.

The front end rendering of a widget using the Note Widget Wrapper styling.

PayPal Payments Now Available

By popular demand, the PayPal payment gateway has now been added as a payment option for WP Notes Widget PRO. Stay tuned for more plugin news including Notes Widget Wrapper PRO!

Sticky Footer

If your website contains a very short page (shorter than the height of the browser window) you will probably notice a gap at the bottom.

Gap at bottom of web page

In many cases this gap does not look nice visually. You may want to make some HTML/CSS adjustments to make pages with short content look nicer.

Approach 1: Adjust Body Background

This approach involves setting the body background to same as the footer background. This is a very simply solution and ‘minimally invasive’ to your code. In some cases, the underlying reason a ‘floating footer’ looks bad is because it stands out so much from the body background. Rather than trying to adjust the footer component, adjusting the styling of the body element could be a suitable fix. Here is the same page depicted above, but with adjustments to the body background to make it seamless with the footer component. Naturally this works with dynamic footer heights too.

Approach 2: JavaScript Adjustments on Resize

This approach is good for when you want to apply a sticky footer to an existing codebase that is not using (or can’t use due to browser requirements) CSS flexbox.
This approach should only be used if it would be a considerable amount of work to rework the CSS of an existing website to use flexbox (or grid if you are reading this ~6 months from now :)). If you are starting a new project I would highly recommend the flexbox approach to implementing a ‘sticky footer’. The approach discussed here will get the job done, but is not as elegant or efficient.

Here are the characteristics of this approach:

  • works with dynamic heights
  • has additional benefit of allowing you to choose which element (incliding child elements) should expand to fill the extra space when needed

Take a look at this example on CodePen to see it in action.

Officially A WordPress Core Contributor

I am happy to be part of a worldwide community of WordPress enthusiasts and professionals that made the 4.9 release possible. Thanks to everyone for their hard work and effort!

WP Notes Widget PRO Launched

WP Notes Widget PRO has been launched and is available for purchase and download! WP Notes Widget PRO is the premium version of WP Notes Widget.

Responsive HTML Tables

If you have ever built a webpage that includes a wide HTML table, you have likely ran into the problem of how to make it display in a usable way on various common view port sizes. I have researched ideas to solve this but I haven’t been 100% happy with the solutions I have found. Usually there is some facet of a good webpage that is not being satisfied such as semantics, accessibility, or usability. I also don’t like to install additional JavaScript libraries unless absolutely necessary.

I have come up with my own solution that to the best of my knowledge I haven’t seen elsewhere. The following solution discussed is specific to WordPress but the concept can easily be adapted to other platforms.

Summary/Details of Solution:

  • On the template itself in PHP, it outputs 2 copies of the table. One for large view and another for small. The small view is actually a series of individual tables.
  • The large and small table displays are visible based on the visibility classes of whatever front end framework you happen to be using. In my case I am using Foundation 6, but this can easily be adapted for use with Bootstrap. Custom visibility classes can also be used too.
  • I feel the small view of the table display presents a more semantically correct HTML table structure compared to some of the other solutions I found online
  • If images are being displayed in table cells there is no concern for images being downloaded twice (once for the large table view and again for the small view). Once the browser downloads the image the first time, it will be cached in the browser and won’t be downloaded again (as long as the file paths are the same)
  • No need for additional front end libraries to handle responsive tables
  • This approach does have time complexity (on server side PHP code) of O(2n). On the server side, ‘the loop’ for the table data is being executed twice (once for the large table output and again for the small). It is not exactly double the execution time though. Once the WP_Query object fetches the data results, the data will be cached for the second iteration of the loop.
  • This approach does result in additional HTML being sent to the web browser. This is pure HTML text and will have a negligible effect on page load time in most cases
  • This approach can also be adapted for static tables.

Here is the template code. This shows a simple example and can be adapted for your specific needs:

<h3>Responsive Table</h3>
<div class="show-for-small-only" >
  <!-- 'show-for-small-only' is a utility class for the foundation 6 framework which only displays on small view ports -->

  <?php
    
    $args = array(
      'post_type'      => array('post'),
      'posts_per_page' => -1,
    );                  
    
    $post_query = new WP_Query( $args );

    if ( $post_query->have_posts() ) {
      while ( $post_query->have_posts() ) {
        $post_query->the_post();
        ?>
          <table>
            <caption><?php the_title(); ?></caption>
            <tr>
              <th>Post Date</th>
              <td><?php the_Date(); ?></td>
            </tr>
            <tr>
              <th>Post Status</th>
              <td><?php echo get_post_status(); ?></td>
            </tr> 
            <tr>
              <th>Post Type</th>
              <td>
                <?php echo get_post_type(); ?>
              </td>
            </tr>
            <tr>
              <th>Featured Image</th>
              <td><?php the_post_thumbnail(); ?></td>
            </tr>                           
          </table>
        <?php
      }
    } else {
      ?>
        <p>No posts to display.</p>
      <?php
    }

    $post_query->rewind_posts();

  ?>
</div>
<div class="hide-for-small-only">
  <!-- 'hide-for-small-only' is a utility class for the foundation 6 framework which only displays on view ports larger than small -->
  
  <div class="" style="max-width: 100%;overflow-x: auto;" >
    <!-- The 'large view' table is wrapped in a horizontally scrollable div. This accounts for any edge cases where the table is wider than the container, but the small view port hasn't been triggered yet. -->
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Post Date</th>
          <th>Post Status</th>
          <th>Post Type</th>
          <th>Featured Image</th>
        </tr>
      </thead>
      <tbody>
        <?php
          if ( $post_query->have_posts() ) {
            while ( $post_query->have_posts() ) {
              $post_query->the_post();
              ?>
                <tr>
                  <td>
                    <?php the_title(); ?>
                  </td>
                  <td>
                    <?php the_Date(); ?>
                  </td>
                  <td>
                    <?php echo get_post_status(); ?>
                  </td>
                  <td>
                    <?php echo get_post_type(); ?>
                  </td>
                  <td>
                    <?php the_post_thumbnail(); ?>
                  </td>
                </tr>
              <?php
            }
          } else {
            ?>
              <tr>
                <td colspan="6" >
                  No posts to display.
                </td>
              </tr>
            <?php
          }
        ?>          
      </tbody>
    </table>
  </div>
  <?php
    wp_reset_query();
  ?>
</div>

And here is the output it produces in this table about Web Rockstar posts. Try resizing the window to see the responsiveness in action:

Responsive Table

Optimization Techniques for Video Listing Pages
Post Date November 23, 2018
Post Status publish
Post Type post
Featured Image
Web Rockstar Website Adjustments
Post Date August 3, 2018
Post Status publish
Post Type post
Featured Image
Notes Widget Wrapper PRO Launched!
Post Date April 23, 2018
Post Status publish
Post Type post
Featured Image
Coming Soon – Notes Widget Wrapper PRO
Post Date February 25, 2018
Post Status publish
Post Type post
Featured Image
PayPal Payments Now Available
Post Date January 19, 2018
Post Status publish
Post Type post
Featured Image
Title Post Date Post Status Post Type Featured Image
Optimization Techniques for Video Listing Pages November 23, 2018 publish post
Web Rockstar Website Adjustments August 3, 2018 publish post
Notes Widget Wrapper PRO Launched! April 23, 2018 publish post
Coming Soon – Notes Widget Wrapper PRO February 25, 2018 publish post
PayPal Payments Now Available January 19, 2018 publish post