The Most Complicated Responsive Conversion

So I need to start writing down my thoughts, lest they escape me. I read it online, so it must be true. Also, I’m a very avid reader of technical documents, so I know it’s true. Information that is consumed but not properly digested is quickly forgotten.

There are a few ways to make sure that knowledge isn’t so fleeting. One of the best is by recalling it. We recall things when we use them, remember them at a later date, teach them. A good experiment if you don’t believe me, read for 20-30 minutes, something heavy, but not so heavy that you don’t feel as if you understand it. After the 20-30 minutes are up, sit back and think about everything you learned. Talk about the ideas expressed in the text inside your own head… it should be easier to do then it actually is. I’m sure you will succeed, but imagine you had waited 24 hours to sit back and think about the text, what about a week?

So I need to start writing down my thoughts, lest they escape me. I read it online, so it must be true. Also, I’m a very avid reader of technical documents, so I know it’s true. Information that is consumed but not properly digested is quickly forgotten.

There are a few ways to make sure that knowledge isn’t so fleeting. One of the best is by recalling it. We recall things when we use them, remember them at a later date, teach them. A good experiment if you don’t believe me, read for 20-30 minutes, something heavy, but not so heavy that you don’t feel as if you understand it. After the 20-30 minutes are up, sit back and think about everything you learned. Talk about the ideas expressed in the text inside your own head… it should be easier to do then it actually is. I’m sure you will succeed, but imagine you had waited 24 hours to sit back and think about the text, what about a week?

Supposedly 50% of material we read and don’t take the time to recall we lose. It’s a trick we play on ourselves, confusing understanding with memorization. So my goal from here on out is to blog about various parts of my day. I’m always reading new material, but I also usually don’t take the time to recall all I’ve read, so this will be an interesting experiment. For me, at least.

I’ve been working on making a website responsive. I was given the job with 1 condition, I couldn’t change any files on the server. Blah! that is sort of crazy. I had to take the job of coarse. It sounded interesting.

So, it turned out the website was a .NET site. Blah double time, not a fan, sorry. On top of this, the site has already utilized its own grid like system using none other then hundreds of clearfixes! Triple Blah! Oh well. I have an idea. Oh.. wait wait, Quadruple Blah! The header and the background color of the main part of the page are actually part of the background image! This is how people developed websites only a few years ago.

Horrible HTML with inline styles

So here’s the jig. I’m going to dynamically tweety bootstrap this sucker. It’s running on jQuery 1.4, and since there’s absolutely no touching allowed I’m going to have to load a second copy of jQuery from a CDN if I want to run BS3. I’m not going to go crazy with this thing, but I want it to be nice. It’s very unfortunate that the majority of elements on the site have inline CSS, I don’t want to make this into a gorilla patch, so I won’t walk every branch looking for style tags to drop, I’m just going to target a few major areas of the page that look wild with inline CSS and overwrite their style attributes with an empty string.

Since I can’t change any of the files on the site, I’ll just remove the main css file using my 1 JavaScript file and then inject my own CSS file that is essentially the main css file prepended by Bootstrap CSS, stripped of any hazards and !importants, and then appended with any CSS that I write. I will use my JavaScript file to remove and change classes to suit the layout for bootstrap. Then I will take the long nav menu on the site with nested menus and using JavaScript, take only the first level of links, create and dynamically insert a mobile dropdown navigation menu with a hide/show button, and remove the regular full width menu when the screen is less than 1199px.

This is the page after removing the background image. The main content loses it

This is the page after removing the background image. The main content loses it’s bg color and the header dissapears. There is more to this then just all this straight forward work, but this should address the bulk of most issues. From there I should only need to tweak things over and over and over and over until the whole site is responsive.

This isn’t the way I would ever suggest making a site responsive. I doubt many people will ever be in this same situation, but you never know. It is cheaper not to have to buy a new site, but it’s also irresponsible if you own a website to continue bandaging it in this way. Why the owner of this site doesn’t have access to change their own html, css and JavaScript, I don’t know, but the techniques above will help turn any website responsive, regardless the limitations.