blog

random posts about nerdy stuff

Load More vs. Paging


Filtered product listings are easily the best way to help a customer find what they want. However, a customer might not know exactly what they're looking for or filter options might not have all the choices to help narrow a list down to just a few items. Long listing pages are a necessity that help show what your online store has to offer.

Apart from filtering a long list down to a manageable size, online stores use either paging, or a "load more" option to quickly show users one quick loading block of items at a time. Each has their benefits, yet neither solution is perfect.

Paging

If your listing has more items than you'd like to show on a single page load, showing clickable page numbers helps the user navigate through your product list.

Benefits

  • Quickly load a subset of items user can easily scroll through
  • User may recall an item they'd like to see again and can use a page number to easily jump back to that item
  • Indicates to the user the length of items in your list
  • With quick links to first and last page, user can easily manage navigating a long list of pages

Paging isn't perfect, however. Some lists might end up being more pages than would fit in a single list requiring something like this:

Example of paging

Drawbacks

  • Usually requires a refresh going from one page to another
  • Position isn't usually saved when leaving the list and coming back
  • Long paging numbers list can be cumbersome

Load More

Though paging has been around for decades, a more recent trend is to show the next page of items behind a load more button or scroll action putting all items on one page, increasing the page length as the user scrolls or clicks to load more. This makes it easier for the user to get to the next page in some cases without requiring a click. Though handy for a few pages, it does create some potential issues as well.

Example of load more

Benefits

  • User can easily keep scrolling through the end of the list
  • Depending on implementation, everything can simply load on scroll
  • User can easily get back to the first set of items simply by scrolling up

From a user's perspective, load more solves some problems, yet introduces others that paging handles better.

Drawbacks

  • When coming back to the listing page, user will most likely need to load more to get back to the view they were on before
  • After multiple load more clicks, page can become slow or unresponsive
  • Can't easily jump to the end of the list
  • Loading each new set might feel slower than a simple page refresh

Simple Next/Previous

A simpler option is to show a single button for next and previous page, or Older/Newer for time related articles. This simplifies the options assuming a user wants to click through everything available. This could be simplified further with just a next link assuming a visitor would use the browser back button.

This option doesn't give the user an easy way to go back to a certain point, however. Depending on your content and user flow, that might not be an issue.

Conclusion

As with anything online there are many ways to create intuitive navigation in a design. Sometimes doing something familiar that visitors are used to is the ideal solution, though that shouldn't limit designing something new and inventive. Hopefully, designers will consider the user when creating navigation designs to make sure it's something that looks and works well for everyone.

Handy Automator Actions


When building websites, I often have to make edits to images, filenames and other tasks that are quicker to do when automated. I use Automator to add Services to my contextual right-click menu right in the finder/desktop to perform some of these tasks. They're quick and simple to set up, and even easier to use.

Basic Image Edits

Perhaps I have some 12 megapixel JPGs that I need to upload to a CMS like Wordpress. If they're too big or the wrong format for a website, they'll need some edits before uploading. Simple solution: batch them before upload. All I have to do is right-click on the image or images and select my action from the Services menu and they're ready to go.

Resize an image to 50% it's original size

Maybe I have some photos sent to me as TIF, PSD or PNG and want them in JPG format:

Convert image to JPEG

Or PNG format:

Convert image to PNG

Or rotate one or more 180°:

Rotate image by 180°

Any of these Automator actions will make the change the original file, so be sure to make a backup first if needed.

Other Handy Actions

Let's say I have a list of files named "Screen Shot 2019-02-19 at 5.20.32 PM.png" and want them to be web-friendly (no spaces in the file name). I could rename them one at a time... or update them all with an Automator action:

Convert to Web Friendly Filenames

After that's done, all selected files are renamed to something that works better in a browser, like "Screen-Shot-2019-02-19-at-5.20.32-PM.png", which avoids those pesky %20's.

My Most Used Action

As I've noted before, I like to keep my desktop tidy. I have apps that open in the same size and position on my screen every time. If I need to move or resize it, with the following action I can easily snap it right back to where I want it.

Resize Window Postion

I have set positions for left, right, finder, chat window, among others. Each are set to an x, y, width and height to fit perfectly on my screen. You'll probably want to adjust the values for your setup/screen size. There are apps out there that do this for you, for MacOS and Windows, but I find it handy to define something more specific than "left side" and "right side".

Hope you find these actions useful. I recommend digging through the Automator app to see what other handy things it can do.

How to Create a Barebones Wordpress Site


There are many important steps when building any site that are crucial to ensure a successful end product.

  • design direction, either by a theme, comp or sample site
  • pages in the site
  • description for each page type
  • discussion with developer to determine ideal plugins to achieve scoped functionality
  • scope that brings it all together

Before development begins, the developer should know which sort of page templates may be required based on the design and scope.

Building the Barebones site

Start with a fresh, local Wordpress installation and create a child theme. A child theme builds upon the parent theme and can be updated separate from the child. If an override file does not exists in the child theme, it'll fall back on the parent theme's code. For this doc, we’ll assume the site will be demosite.com for naming conventions.

Child Theme

  • Create a new folder in wp-contentthemes/ called ‘demosite’. This is where all of the base theme overrides will exist. Anything not overwritten in the child theme will use the parent theme’s code template.
  • Within that new folder, create an EMPTY style.css file, meaning there’s no other CSS in there, with the following CSS comment:
/*
 Theme Name:   DemoSite.com
 Description:  Twenty Seventeen Child Theme
 Author:       [ primary developer name ]
 Author URI:   http://yourwebsite.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-seventeen-child
*/
  • If the design is set, also create a screenshot.png file of the homepage in the child theme folder so that it shows up in the wp-admin > themes area
  • Log into the Wordpress admin and select the the theme. You are now using the demosite child theme on the front end.

Child Theme Directory Structure

As with any site, it’s best to keep code organized. I like to follow the standard organization structure that groups CSS, JavaScript and Images in their own folders.

Keeping code organized not only helps making things easier to find, but is handy when multiple developers are working on the same codebase to avoid two people working on the same file.

/css - unique CSS file for each major group. Plugin will combine and minify for us. Ideally, the child theme's style.css file is ONLY used for the theme setup comments as described above. Do not use @import unless a web font requires it.

  • demosite.css - primary CSS
  • responsive.css - media queries for all breakpoints
  • grid.css - whichever grid system is being used, e.g. bootstrap, skeleton, etc
  • forms.css - formidable styles
  • whatever.css - set of CSS for a particular widget or plugin element that should be self contained

/js - unique JS files

  • jquery.functions.js - the custom JS for this particular site
  • jquery.whatever.js - some third party element, widget or plugin

/images - all non Media images used in the template / theme the admin doesn’t need to manage. Good place for placeholder / fallback images and layout assets.

Copy code from the parent theme directory to modify as the site requires, which will include things like:

  • functions.php - site wide functions, admin limiting functions, define extra function files (more on that below), helpers, etc. Note, you should start with an empty functions.php
  • header.php
  • footer.php
  • page.php
  • 404.php
  • single.php

Organizing Functions and Shortcodes

Functions.php can become a huge file when not organized well. To better handle large amounts of code, I create a functions folder in the theme directory for things like:

  • rewrite.php
  • hooks.php
  • shortcodes.products.php - for product related shortcodes, others for each unique set of shortcodes

The functions.php file would include the main functions and require() lines for each of the functions/* files that are included in the site.

Building the HTML

As with any site, you are in full control over the front-end HTML and CSS. Just build it like you would any other site.

Pick a Grid system

Popular grid systems such as Skeleton: Responsive CSS Boilerplate, Grid by Example, Bootstrap · The world’s most popular mobile-first and responsive front-end framework., or my favorite Generate your own Grid with the Responsive Grid System calculator. can help get you started with a responsive CSS grid framework. All of these options let you customize the number of columns, margins and responsive breakpoints so that you can build the design as per comp. For the Grid System Calculator, I like using the :not(‘responsive’) CSS attribute to retain columns at mobile breakpoints.

Though it’s ideal that there’s only one grid system in use, some plugins might have their own. Be sure to review these plugins before use to reduce CSS bloat.

Plan your HTML

Throughout the site, there will be common elements that should be structured consistently to share CSS classes. It’s a waste of time to build unique CSS for elements that look and function the same across multiple places, all it takes is good planning to make sure the CSS file is organized and short.

For common elements that are close, but not exact across pages, use CSS subclasses for page-specific instances. Example, homepage might have a news listing grid where the title is 16px, but on a news detail page those boxes have 14px size titles. Simply have a main news-listing title CSS and a news-listing.subclass title subclass to handle those variants.

Build your HTML

However works best for you, build out your HTML comp cutups. You may prefer to do this directly within the Wordpress environment or as standalone .html files (my preference so that I can responsive test before implementation). Keep in mind that blocks of HTML should be written in such a way that they can be converted into shortcodes when pulling in dynamic Wordpress content.

Though a comp or expected design might have limited placeholder content, the client can always increase or decrease the amount of actual content. A responsive site design should be able to accommodate dynamic amounts of content and imagery.

Integrate with Wordpress

Take your header, footer, code blocks and page templates and get them into Wordpress.

  • header.php
  • footer.php
  • page-template.php
  • functions/shortcodes.whatever.php
  • etc.

Page Templates

Each page that might require a unique layout should be set up as a page template. Page templates are able to be selected by the admin on a per-page basis and are added to the codebase by creating a PHP file with a unique name and custom PHP comment at the top of the page.

That's all there is to it. Easy, right?

OlderNewer