nathanielbartlett.com SOURCE FILES

WEBSITE ETHOS

Fast

• The website is ~1.5MB and will load in well under 1s on a good connection.
• No irritating slow transitions, just snappy performance.

Clean

• The raw, minimal design does not detract from the main feature of the website: audio files.
• The design cleanly adapts to any screen size.

Dense Layout of Information

• The one-page design presents as much information in as little space as possible.
• All my work is presented in one place, with no hard-to-find additional pages.

MAIN COMPONENTS

Original "Dot Matrix" Audio Player

• This audio file interface allows for easy and quick navigation of even very large files (40 min +) on large and small screens.
• When a play box in the discography secion is clicked, the audio file will load and play. Each dot represents 10s, and as the file plays, the dots lose their opacity in proportion to the passage of time. Click on a dot and the audio file will skip to that location in time.
• Click the "-" button and the player will minimize in the lower left corner. If a file is playing, it will continue to play, allowing the user to navigate around the site while listening.

Dog Ear Navigation Menu Button

• This triangular button takes up very little space (top left corner).
• The 45 degree angle is a nice contrast to all the horizonal and vertical elements.
• The button uses 80% opacity to reduce visual footprint, especially on small mobile devices.
• The Entire triangular button area is active, not just the menu bars, giving a big target for mouse pointer and fingers.

Side-Toggle text Boxes

• Once opened, the text boxes have a toggle strip on the right side so you can close the box at any time. There is no need to scroll back to the top, which is a huge hassle for very tall boxes.
• If you have scrolled down so the top of the box is aboce the top of the screen, chicking the toggle bar will colapse the box and bring the top of the text box right to where you clicked.

Discography Grid Responsive to Screen Width

• As the screen / window gets smaller, the items in the discography section move from four columns to three, to two, to one.
• Items are arranged in descending chronological order with no gaps in the columns.

Title Page

• The background photo scales to the window size.
• The SVG text logo scales to either 100% vertical or horiziontal, depending on the screen dimensions.