In 2014 I redesigned the Keep In Touch (social links/icons) landing page and the area in the footer on Bass Pro Shops. If you’ve been reading this series, you can probably spot a pattern; Bass Pro did a lot of redesigning in 2014 to bring many pages up to the newest site design standards.
Category: UX/UI
Bug on currentColor and transitions in Gecko
Posted onI recently had a great discussion with Louis Hoebregts (Mamboleoo) in the CodePen devs Slack about the differences between currentColor and transitions in -webkit and Gecko browsers. Louis found what seems to be a bug in the rendering of transitions of computed values like currentColor, only we differ on which browser we think is doing it right!
About Us page – Bass Pro Shops
Posted onWhen I redesigned the About Us page for Bass Pro Shops, the requirements were easy: update the copy (provided) and add more pictures. Probably the easiest project I ever did for Bass Pro!
Dark menu from Web Developer Checklist
Posted onI love the little menu from Web Developer Checklist, so I recreated it in CodePen. Not much to say about this one!
See the Pen Dark menu from Web Developer Checklist by Smokie Lee (@xtoq) on CodePen.
Mini cart and mini account – Bass Pro Shops
Posted onIn 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 onWhen 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.
CSS Eclipse, AKA ECSS-lipse
Posted onI saw this animation on Dribbble and I fell in love with it, so of course I had to remake it in CSS. I still need to do the spark animation when the eclipse is total (well, it’s not total, it’s an annular solar eclipse actually). When I was doing it, I couldn’t figure out an elegant way to have the spark come around and paint the border the way it does in the animation, at least not with CSS. I’m still working on my animation chops here, okay? If I had realized how vital animation would be to my future career, I would have taken more animation classes when I did sound. Yeah, that degree’s totally working out for me these days…
Enjoy!
See the Pen Annular solar eclipse in CSS by Smokie Lee (@xtoq) on CodePen.
BPS Size Guides
Posted onOne 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.
Pure CSS BB-8
Posted onThere are a lot of magic numbers in this, but that’s okay. It’s not a production-level thing. I’m utilizing radial gradients to achieve the panels on his body and linear ones for the lines on his head & body. The second camera/eye is a box-shadow of the main eye.
Next up: animation! I want him to peek around the left side of the screen, roll to the center, look behind him and then dash forward. Such a complicated animation requires some thinking though, and I need to see if I can do it all in CSS/SCSS. I’m sure I can, but at what price!?
See the Pen Pure CSS BB-8 by Smokie Lee (@xtoq) on CodePen.