Aspen Road Bike Rides

These are the 6 standard road bike rides around Aspen. I did not include Independence Pass (Hwy 82) because I don’t recommend riding it with its negative roadway shoulders. If you want to ride Indy, do it when it is closed to motor traffic. This means early May when CDOT is still snow plowing over the pass or when a cycle event travels over the pass (Pro Challenge race or Ride the Rockies tour).

My riding stats start and end on Red Butte Drive near Slaughter House Bridge, not in downtown Aspen.

Notes:

  • Aspen Loop is mostly flat and makes the most of Aspen’s bike paths and bikeways. Easiest.
  • Woody Creek is an out and back ride. Many riders pit stop at the Woody Creek Tavern.
  • Castle Creek is the longest ride. Out and back ride.
  • Maroon Creek has the highest elevation. Limited car traffic. Out and back ride.
  • Owl Creek is a loop ride with some bike path segments. Juniper Hill is a steep 600’ segment. Ride the Rio Grande bike path if you want river views on the way back to Aspen or McLain Flats Road if prefer looking at the mountains of the Elk Range.
  • Owl Creek Mass Trail skips the Juniper Hill segment and some highway crossings via the Aspen Mass Trail. The route follows mostly bike path.

Developers: This uses the Ride with GPS multi route widget.

Switched to Ride with GPS

gps_widget
Custom widget

 I waited years for Strava to allow you to embed your rides into a website. But Strava’s engineers never listened, so I switched to the Ride with GPS iOS app. Not only does Ride with GPS allow embedding of the app’s ride maps (above) into websites with an iframe tag, but within your account profile they have a dynamic widget builder to create a custom widget with rides and ride details displayed as you desire. With Ride with GPS, you can also search other locales for other rider’s maps and all the related beta to those rides. Now group ride maps can be shared on  cycling websites.

Redux Parallax Module

After building a parallax in a client site, I decided that my clients might want to create or edit their own parallax. A web parallax is a vertically fluid scrolling of images and text. A parallax is easier to understand than to describe, so see this example parallax. I am using the Redux framework on the backend of a WordPress site for a content provider to easily build and configure the parallax. Here were my goals to create the parallax on a Bootstrap homepage:

  • the parallax’s position on the homepage could be changed
  • the parallax could easily be activated or removed from the homepage
  • the number and order  of parallax images needed to be adjustable and re-ordered
  • the floating parallax text blocks could be easily edited
  • the parallax could have an optional title
  • the height of parallax images could be adjusted
  • the opacity of the parallax images could be adjusted
  • there could be no client coding, only WordPress content provider skills required

What made my project really work was Redux’s slides field. This field allows the user to create any number of slides which each includes: an image, a title, and a text block, so you can create a parallax with an unlimited number of slides. The slides can also be reordered by dragging each slide to your desired sort order, the top slide displays first. I also added adjustments for the background images’ height and opacity. Making adjustments to the parallax couldn’t be easier.

Adding images and text blocks within Redux parallax module

Adding images and text blocks within the Redux homepage theme options

I was surprised how little coding was required to build a parallax. Just a little HTML/PHP, a few CSS rules and no Javascript. If you would like to learn more about the Homepage Layout Manager, I have a post that introduces the Redux homepage theme option.

See the Pen Parallax by gordo019 (@gordo019) on CodePen.

See the Pen Redux config settings by gordo019 (@gordo019) on CodePen.

Benefits of the Bootstrap Framework

I started playing around with Bootstrap in 2015 when I didn’t understand what Bootstrap was or why a web designer would build websites using Bootstrap. Since then, I have built 6 Bootstrap sites and can now give five broad reasons to choose Bootstrap as a theme/framework for building a website.

Bootstrap is more than a web site theme with a unique set of styles, fonts, and page templates. Bootstrap is a framework, which could be considered a super theme (technically a superset of HTML, CSS, and Javascript technologies). Many Bootstrap developers share and contribute to Bootstrap making it more than a theme but an entire website design framework. The Bootstrap framework is an open source (read: public) project that many developers and designers have contributed to mostly via the Github social network.

Five Benefits of Bootstrap

  1. speed of development
  2. responsiveness
  3. consistency
  4. customizable
  5. support
xxxx
Patagonia only needs one online version of their catalog–a Bootstrap website and no more expensive app(s) development

The first benefit of Bootstrap is speed of web site development. As a web designer and/or programmer, you don’t code to reinvent the wheel. Hundreds of developers have already contributed to the Bootstrap code base and all these developers share their chunks of code or design components. A web designer initially configures the web features desired, and then, the configured Bootstrap files are downloaded for initial site testing. Each configured Bootstrap site can be a unique design and each could be considered a Bootstrap theme. With all the Bootstrap resources available, the developer can quickly start creating a site structure without having to code individual site components.

The second benefit of Bootstrap is site responsiveness. Bootstrap is a mobile-first theme meaning it is designed for small smartphone screens. Bootstrap has a grid layout which scales nicely for wider screens. Bootstrap sites display correctly for almost any internet device available. As a developer, you don’t need to do as much device testing as in the past and this saves the developer even more time.

The third benefit of Bootstrap is consistency. Your Bootstrap site could be handed over to another Bootstrap experienced developer, and the web interface would remain consistent. For example, the menubar would function the same no matter which Bootstrap developer had last updated it. This consistency also relates to the many different web browsers available. The Bootstrap site responds and displays consistently when tested with most modern browsers.

The fourth benefit of Bootstrap is that it is easy to customize. The Bootstrap developer can choose any website components (buttons, sliders, date picker, popups, etc) to create the web experience that the client desires. With lots of Bootstrap components to choose from, the developer can create a unique customized theme.

The fifth benefit of Bootstrap is support. Github has over 600 developers sharing code and ideas on Bootstrap. The framework is always evolving and improving. A standard WordPress theme might be built and tested by a single developer or small team, but the worldwide community of Bootstrap developers would result in a superior theme.

When you combine the tools of faster development, device responsiveness, browser consistency, easy customization, and a good network of online support, the Bootstrap framework offers many time-saving advantages for web developers.

Some Bootstrap sites:

**Bootstrap sites I have built