Inching Along

Over the last few weeks at work, I’ve been tackling revamping the look and feel of our web pages to bring them out of the 1990s and up to modern standards.

Right now, the most, or at least one of the most, popular and easy-to-implement look-and-feel design templates (called a “framework”) is Bootstrap, created by Twitter.

It has a ton of benefits for lazy people (like me), technically disabled people (like me), and people who want things to look good (like me). So, I chose that one.

It took a few days for me to get the hang of doing what’s called “bootstrapping” my pages. I have to add a bunch of HTML elements to the page so the styling can be applied. I have to download the design files – called “Cascading Style Sheets” – from the website. And then I have to figure out what I want to use and where.

It’s a super-comprehensive system. Like all modern web design frameworks, Bootstrap alters its appearance based on the viewport displaying the page. This is called “Responsive Design” by those jargon-happy web people, and it means the page will shift how it’s laid out depending on how big of a screen you use.

Not a big deal for us, but I wanted to be able to leave the product (our intranet site) better than I found it (mobile-friendly and modern-looking and generally pleasing to the eye). So I downloaded the Bootstrap start-up files to our servers (both the test and production servers), and have meticulously gone through the major pages in the test site, slowly adding and adjusting the look and feel until I’m happy with it.

The one problem I’ve had over the last couple of years in trying to figure out this whole thing is, Bootstrap provides a “collapsing navbar” feature which basically means when your screen is too small for the navigation menu, you get a hamburger menu instead. (That’s the three stacked lines you see in a web page on your tablet or phone, and sometimes just on your computer, which will show you the menu when you click it.) But I’ve never gotten it to work.

For the longest time (and by “longest,” I mean the last four of my five years here), I’ve been hamstrung by Internet Explorer version 8. However, Microsoft finally put their foot down and forced companies clinging to it to press forward to Internet Explorer version 11, which much better complies to modern web design and programming standards.

On the upside, it means I can do more and better things with our website than I could before. On the downside, it means now I’m hamstrung by our server technology more than the desktop technology, but I’m still hamstrung. Never mind that, though, that’s a post for another day.

So now I have a better design basis (and trying to make this thing cross-browser friendly is a chore) and technology to implement it, and one of the things I have to try using is JavaScript, the de facto standard web development programming language.

At any rate, I figured I’d try the collapsing menu thing again today. And I couldn’t get it to work. No matter what I did, it worked on the Bootstrap web site example page, but wouldn’t work in mine. I read the documentation which indicated the JavaScript (or js) for Bootstrap would be all-inclusive. So the js to make the navigation collapse should have worked, but didn’t. No matter how I worked it around.

A quick Google search showed me the problem; I have manually include a special JavaScript library called JQuery in my files to make that function come alive. When I did, voila! The menu does what it should. (FYI, it changed to a hamburger menu fine, but wouldn’t open when clicked.)

So I’ve downloaded and included the JQuery library into my home page to facilitate that functionality. But now I have eleven more pages to update with this if I want it available across all the pages I’ve updated, and there are more to come. That doesn’t even begin to account for the hoop-jumping I’ll have to do to update the ASP.NET web applications I’ve written. A couple of those are in that eleven-page update, but I have to re-update them, I guess, for this. And I’m not sure it would work, so that’s another test.

So learning as you go is fun, but also costly sometimes. *Sigh*

Meanwhile, I have to sit around waiting for the service provider to finish working on our phone system. Yeah, that’s still going on, and yeah, it’s still my problem somehow. But nothing yet, and it’s almost 1 p.m. my time.

I really do like my job. Most of the time.

-jdt-