The complete Rustler Website 3.0 design. Open in a new tab to zoom in.
0
0
For the past couple of weeks, I’ve been doing programming work on version 3 of the official Rustler website. I say version 3 because version 1 was the original, red-background non-top-menu design, version 2 was the white-background, slightly-more-modern top menu design, and now version 3 will be by far the most significant improvement to the Rustler website. Included as the featured image of this post is be the prototype image of the Figma design for the website. I’m currently working on actually building it, and so far it’s turning out very well.
At first, I was having serious problems with the top menu. The dropdown menus just wouldn’t show upon hover! However, then I realized that hover-menus wouldn’t be very accessible for phone users, so we decided to convert to a menu design that had dropdowns upon clicking. It was particularly hard to get the Products dropdown menu working since it had to be two columns. Finally, we discovered a cool CSS hack to make two columns auto-wrap and appear very nicely.
We used one of Bootstrap’s designs for the homepage, and so far it’s looking pretty similar to the actual design. The one challenge we’re having right now is getting the Featured Products area to be horizontally scrollable. I figure we’ll tackle that here this weekend. I finished a product page for PrecisionVideo, currently the latest Rustler product, complete with a pricing section with links to a modern-looking order form and a feature table. The order form is a bit wonky, and we need to hook up the Rustler order service to it, which might be tricky since the form fields are drastically different than what we have now. I’m currently tackling an issue where every new page I create and use the Bootstrap starter template with has gradient lines all the way down. It’s probably because I removed a necessary tag that Boostrap put in there.
I’ve implemented Server Side Includes on the new website as well (we converted the old website to run on SSI a few weeks ago) to make it easier to add new pages. Now, I just add the link on the include file and everything else syncs. There’s a catch, though: the really nice live server by Ritwick Dey I had been using in VS Code doesn’t support SSIs. So I had to switch to IIS Express, which allows you to run your own mini-web server that supports SSI. Unfortunately, IIS Express doesn’t automatically update the page content when you save your file in VS Code. You have to hard refresh the page.
Overall, this project is going quite well, and although there are a LOT of product pages to add and order forms to create, this shouldn’t take years and years of time, we hope. At most, I’m aiming for 5-6 months. Then we can deploy the code for the new website and take the old one private. The featured image is the master photo for the Figma design, complete with all the artboards (of course, some aspects of the real finished website are going to look different).
