A commentary on iron Sportsters
Blog BOM Custom Design
Garage OSARM Repair Smörg

Complete site redesign

I did a complete site redesign in 2015. I quit my job, left Silicon Valley, and moved to Florida where I can concentrate.

By SportsterPaul on October 9, 2015 6:27 AM

The first task was unpacking. I decided to record what I owned and add it to a new "Parts" category in the Garage section. The posts were displayed in the old site format, pretty much default Movable Type with a narrow header and the posts just listing down with no real format. That was January, adding 25 posts. I find myself using them every week, to see what I own. It will be most handy when I sell all the stuff on eBay, once I have my bikes all sorted.

Having worked in web groups and corporate marketing, I knew the hip and trendy thing was "Hero Banners," where the page banner takes up most of the browser window. As a writer I have a hard time with that, but I did decide that my narrow little header did not have enough gravitas, or enough information. I also decided I needed a navigation bar, even if that made the site look common. Common is good if it helps new visitors navigate.

All these years, I have tried to make the web site liquid, so it displays on a TV as well as a phone. Wikipedia tries to do this. Thing is, its really hard to have things end up where they are supposed to be on the page, just look at Wikipedia to see what I mean. So now the hip and trendy thing is called "responsive". This is more clunky, the web page kind of adapts and folds over as the screen gets narrow. I have been experimenting with this for years. So February was spent making a nice wide header, with a nave bar, and some style to it. The header is responsive. The left headline and right headline will fold under themselves, when the screen gets narrow. The navigation bar will split in half and fold in two for a narrow screen. For the background image I just carried over the existing image for the sections. I put the section headline and deck (subtitle) on the left and the site headline and deck on the right of the header. I made a nice orange "S" logo. I never use JavaScipt since that is how sites spy on us. So search was a challenge, until I realized you can do a little form HTML that uses Google search. It takes you off the page to a Google page, but all the listing are for this site. I did a section search-box on the left and a whole site search-box on the right. Google will better searches than any team of programmers I could hire. Best yet, no JavaScript. Getting the header sorted out was most of February.

One problem I have always had is that text just streams across a whole page. There is a reason newspapers and Readers Digest has columns, it make the text much easier to read. You can put in columns with CSS (cascading style sheets) on FireFox and Chrome, like this very blog, but it still does not act the way I want, since there are no real pages. A long post will have really long columns (like this post). So I bit the bullet and designed a web page that would have columns yet keep the content in separate pages. I used tables, since tables act the way you expect, unlike divs (divisions). Tables are out of favor with the hip and trendy since the 1993 readers for the blind had a hard time with them. I hope that the new readers are better. I did put in titles and text tags on the navigation images to help the blind navigate the site.

The other thing about tables is that it allows the pages to print right. Yes print. At first I wanted all the pages to print out since I am a dinosaur writer and I knew that readers might want to print out a procedure to carry into the garage. Things it, it is also very handy for maintenance, since I can keep a copy in a binder and redline it when I see mistakes or want to add something. Even with tables, different web browsers are a "herding cats" as any other technical endeavor, so this printable design lets me make a pdf of the pages, so that there is some feeble guarantee you can get a version that looks right, no matter what browser or operating system or hardware you have.

The printable feature means that there are print style sheets for all the pages. This takes off the header and search boxes and stuff. It also changes link text to black and a few other things. The combination of responsive, printable, column- and page-based design does make it hard to publish. I have the full-page and half-page columns arranged in HTML files I use as templates. As I type and add pictures in BlueGriffon, I know when to add a new column. Once I get the page looking right in BlueGriffon, I paste the deck into Movable Type body text box, and the rest of the article into the "extended" text box. I then publish with Movable Type, with the pictures at full resolution. I then make a pdf using my Firefox with Foxit. Then I go back to the BlueGriffon file and add the link to the pdf file, and change all the pictures to 512 pixel thumbnails. Then I republish this file with Moveable Type. Figuring this out, and changing some of the sections took all of March and April. There are still sections to do, like the Smörg section.

Redesigning the entry section was fairly straightforward, once I bit the bullet on how much work it was. Then I had to make new category pages, that list the various posts of a given category. This took a lot of programming in Moveable Type, and a lot of profanity. I have settled on a system that the category page can use HTML in the description you give it in Moveable Type, and then it displays a thumbnail picture, the title and the deck with a link, as well as a pdf link. For higher-level pages I figured out the programming to list the most recent post of a category, as well as a favorite post. To get that to work, I use a "favorite" tag on the post I like. Such was May.

I still had a huge technical problem with the site. The BOM (bill-of-materials) sections had so much software to build the part number tables my web-host (DreamHost) would choke and give me "Gateway Timeout." When I could hit the "publish" button 4 or 5 times, it would take 20 minutes to do a build. Dreamhost was essentially useless, like most software companies. I asked if going to a VPS (virtual private server) would solve it. They responded "We do not guarantee any performance increase with a VPS." Well why would I pay for it?

So I decided to chase my dream. It was not a great dream like Mr. Gandhi, or a noble dream like Dr. King. But it was my dream. I dreamt I could have the Movable Type installed on a machine here at home. I would have 100% use of the CPU and memory, call it an RPS, a real private server. Magically, Movable Type lets you do this. There may even be a half-solution, where you keep the SQL (structured query language) server on a web-host, but I wanted to completely disassociate myself from the host. Now all Dreamhost does is sent HTML out. It costs me 10 bucks a month.

One way to have Movable Type locally was to just turn one of my old XP computers into a Linux box, and install the Apache web server, the Perl programming language that Movable Type needs, and mySQL database that Movable Type uses. My Linux buddies encouraged me. But I feared having to get a 4-year computer science degree to use Linux, it is really arcane. Instead, I installed XAMPP on my Lenovo laptop that is my day-to-day machine. XAMPP stands for X, Apache, mySQL, PHP, and Perl. You can install it on Windows, Linux or Mac. Despite XAMPP installing Perl, when I tried to install Movable Type it said there was no Perl. So I also installed the Windows version of Strawberry Perl. This was a month's work, but now the BOM section publishes in 2 minutes. Yeah, Perl is that that slow.

A very real benefit of publishing the website locally is that it creates its very own stage server. I can look at the page on my local machine and make sure I am happy with it. Then, I can upload the images and HTML file to Dreamhost. You can set Movable Type up so that despite it publishing to the C:/ drive, all the links are for the web-host www.open-sport, not file///C/. Fantastic, thank you unsung coder at Movable Type, now out of work since the Japanese bought it and removed the open-source version. I use 5.2. It works great, and oh, that is the huge huge added benefit of publishing locally. There can be no security risk since Movable Type is not installed on a public web site, nor is the database. All this took up the month of June, and the XAMPP-Movable Type procedure I used is here.

Now that I can publish the BOM, I did a redesign of that section, so that the category pages now make a nice table with thumbnail pictures, and after that I put the part number tables that used to crash Dreamhost. In order to test the system, and to do some work that actually displayed to the public, I filled out the transmission section of the BOM, using my parts books and some trannys that I had in the parts stash.

Heartened by my success in the local installation, I went back to the Repair section and converted all the posts to the new design. I also did this for the Garage section, the Design section, and the Customization section. I wrote new long landing pages for those sections, and also did a big new landing page for the Smörg section. I still have to convert all the posts in the Smörg section to the responsive design. The Smörg category pages also need a new design. I hope to get this by the end of the year. I loved doing this new content, I am a writer after all, and that took up July.

As part of recovering from the PTSD that Silicon Valley gave me, I started participating in Sportster and K-model forums. This inspired me to make a table of the major changes in the bikes that I use for the BOM landing page lede. For these wide tables I make the pdf file on a 11x17 tabloid, or B-sized page. It was a lot of work to get the table to fit, and that is the best thing about print-- it forces you to be concise. I also whipped out a table for handlebars, but that will be up-revved and incorporated in the normal BOM category page next year. For now I want to concentrate on the engine parts. The BOM updates took up August.

Meanwhile I had been doing a ton of Solidworks to polish the design of my replacement Sportster motor. I had been calling this HARM, for Harley aftermarket replacement motor. Since the fine lawyers at Harley might take exception to that, I have changed the project to OSARM, Open-Sport aftermarket replacement motor. Its always smart to stay on the good side of the people that invented this bike. I have not posted the design yet, I figure to do that in 2016. But I did add a landing page for that section, as opposed to just linking back to the contents page, which was pretty sketchy behavior.

So by Fall I had a new header, new responsive design, a local publishing system, and new content. I have been working from the bottom up. First I fixed the publish system, then the design, and then the content. So in September I prepared for this roll-out by doing a new home page, a new contents page, a new Archive page design, and a big post about Sportster problems in the maintenance category of the Repair section. That took up the better part of September, and there was always going back to fix dozens of mistakes and oversights in things I had already done.

Those new top-level pages and content brings us to October, and I am ready to set the new home page out. I have written this post to support that, as well as the aforementioned Sportster problems post. There is still much work to do, I expect to spend the rest of the year getting the whole site conforming to the new design, and to making things consistent across sections. The best thing is, once these design and back-end problems are done, I can get back to content. There are dozens of repair procedures I have done over the years, ready for that section. A huge part of my hard drive is full of design studies. I have my voltage regulator design, and the test rig that goes with it. I want to roll out OSARM to get feedback, before I spend the $100k on getting the machining done. By Christmas I hope to have the whole site patched up, and I will be able to do content in 2016.

I hve an Open-Sport source directory on my hard drive. One of the great joys of next year will be taking stuff out of that directory and putting it on the website. When that happens, I will be "caught up" with all things I did not have the time to do when I had a day job. Another thing I have been working on in 2015 is setting up a video studio in living room. This allows me to work on a motorcycle restoration in air-conditioned comfort. The arched ceiling is perfect for mounting the lights, and I have been doing video presentation for years, and I learned video production in 2014 at my last corporate job. So in 2016 I hope to launch a YouTube channel, and that will help monetize this site. I also hope to get set up as an Amazon Affiliate, so I can bring in some cash that way. I might look at displaying Google adds on the pages, but that requires JavaScript so I am resiting that temptation.

So thanks to all my programmer buddies that helped, and thanks to all the great folk on the Sportster and K-model forums, and thanks to my mechanical engineering pals that taught me engine design and thanks to all the mechanics that taught me Sportsters, and thanks to those big corporations that let me save up enough money so I can chase my dream. I will try to post what is going on more often here, if only to let you folks know what is new on the site.

This post is in these categories:

border bar
Bottom of first column This is the end.