SiteAvenger Design Change: Progressive Interactivity

Posted on 09/15/2014 at 01:49 pmViewed 4,810 times

Progressive enhancement and user interactivity has proven to be the way of the future for the internet. Sites are moving in one direction: towards a better experience for the user. So, what can we do to get on board? Well, we've introduced a few changes to our backend.

What Has Been Added:

A custom integrated scrolling system to allow for faster content navigation, with the ability to turn it off
The ability to resize your list of Super Powers, to allow for user-customization on our backend
A dropdown for icon size, for those with visual issues
Buttons for quick changes between Super Power sets
Account settings for color and size

Custom Integrated Scrolling System

Original Plugin

To create our custom version of this plugin, all that was done was minor CSS updates, and some jQuery tweaking on the calls.

The final product:

Super Power Resizing

Resizable API

All that was done with the jQuery UI: Resizable plugin was instantiation. It took care of absolutely everything else.

Icon Size Dropdown

What was done with this is:

A size is looked for, and does not require one at start
A size is determined whether you have chosen one or not
Changing the size will change the amount of icons, the size of the icons, and the size of the text
After changing the size, the system will remember your choice for a full day. Each time you change it, it updates the change for another full day

Quick Change Buttons

These buttons merely allow you to change between Super Power sections without having to use the dropdown at the top of the page.

Another feature that has been added, is the ability to close the Super Power list. Clicking the button shown below will cause an arrow to appear on the left side, to re-open the Super Power list.

Close Button:

Open Button:

Account Settings

For account changes, we have added the option to change from the Classic Site Avenger interface to the New interface, change between an orange overlay or a grey overlay, and whether or not you would like to use the custom scrolling system.