Text Effects Sass functions & mixins

Posted on

CSS has come a long damned way from the days of having to use tables because positioning wasn’t available. (Sure, dating myself a bit, but as they say: you’re only young once but you can be immature forever.) Time was that if one wanted any sort of effect on text – and we’re talking system installed fonts here, nothing fancy – you had to create an image. Once the semantic web was encouraged, you then had to replace a heading tag with said image to get the best SEO as well as have the creative look. Of course, every browser had different support for the technique so there were dozens of image replacement hacks. (If you’re interested in a history lesson, CSS-Tricks has an entire page dedicated to the different techniques.) Nowadays CSS can do a helluva lot of basic text effects directly in the browser, with fantastic cross-browser support.

Windowfy Sass Mixin

Posted on

In my travels around the internet, I see many interesting portfolios for both designers and developers. Often these portfolios include images of the web site or application as it would look in a desktop window, usually an OSX (Mac) window. I really liked the effect, and I wanted to recreate it in CSS. Once I had done that I thought it was pretty cool, and I wanted to share it so I made a Sass mixin, which proved to be more enlightening that I had originally anticipated.

Product page redesign (unused) – Bass Pro Shops

Posted on

NOTE: This is an incomplete piece and was never officially presented to Bass Pro Shops for consideration.

In 2014, while working on optimizing the CSS (a project that got postponed indefinitely) I started envisioning a product page redesign for Bass Pro Shops. The current product page was created in 2012 when the big site redesign happened, and while it was acceptable for that time and place, it wasn’t holding up well under evolving user needs. Since this wasn’t a requested project I had an open canvas for design, which was quite rare.

Mini cart and mini account – Bass Pro Shops

Posted on

In 2011, Bass Pro Shops had a cart that was called a “windowshade” which basically dropped down from the top of the screen, then pulled back up when you clicked close. From both a development standpoint and a user experience standpoint, this was a nightmare. No one really enjoyed this feature, but of course you can’t change a large website quickly so it took a few years to change things up. This feature was live from 2011 until 2013.

Store Map – Bass Pro Shops

Posted on

When I was hired as by Bass Pro Shops as a web developer in 2010, one of my first assignments (before the size guides redesign) was to redesign the store map or the store locator. This map showed current Bass Pro Shops stores around the United States and Canada with basic contact information and a link to their respective store pages with much more information, as well as showing the locations where future stores would be located. The old store map was dated and hadn’t been updated with the website redesign in 2009, and was an entirely manual process to update the map information every time something changed. The needs were deceptively simple: make the new map larger to fit our new website format (before responsive design kids!), update the design to match the new branding, and integrate it into our homegrown backend CMS for easier updating.

BPS Size Guides

Posted on

One of the first projects I was assigned when I started working at Bass Pro Shops was to redesign the size guides for apparel. The current guides were outdated and no longer included correct information. Originally, the business users wanted the ability to use our product management system to populate the information as well as host the information on the product page itself, but this was moved to phase 2 as upgrades to the backend had to be completed first. We decided that phase 1 would be the redesign and information update, while creating as much of a template for later integration into other systems as possible.