Google on the go

As I’m sure everyone knows, google recently changed it’s search ranking algorithm to take ‘mobile-friendliness’ into account.  Sites that pass their test will be bumped up (or, at least, not penalized).  It seems like a good idea- and gave us the push we needed to finally start upgrading our system to play nice with today’s mobile devices.

Our system was originally created in 2002-2003, and it really is quite good.  But back then, people just didn’t (very often) view websites on their phones.  You simply didn’t (really) have to account for screen width, horizontal scrolling, etc.  It would be nice to take this opportunity to completely rewrite the layout of the system, switching to floats and divs and all that nice stuff, instead of using tables for layout (I know, we suck).  But there just isn’t time for that right now, so the order of the day shall be shoehorning media queries into the existing structure.

And it’s going ok so far.  Got the width and font size changes down, reduced image size to 100% max, and even found an easy way to reduce the size of a Google Map (many are embedded in our system’s sites) down to the correct width (just grab the css tag for iframe and make it 100% max).  We’re finishing up with a nice mobile menu that folds down/up and will integrate with the existing menu items already created (though it only works for the vertical menu option for now).

The main issue is due to the fact that we’re just too lazy to rewrite the structure to remove tables right now.  Depending on how a client has set up their site, we used php variables to determine the colspan of different table columns.  For example, if they have a logo (upper left of screen) and header (top middle/right), but are using the horizontal menu layout (which spans the full screen width), the main body text and footer both have a colspan of 2.  But switching to mobile rearranges it so everything is one column- the logo is hidden to save space and the image is moved into the header area.  Mostly works, but still leaves an odd ‘cut off’ section because the table still expects colspan=2 at that point.

Haven’t quite figured out that one yet, but once we do, we’re about home free (with stage 1, anyway).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s