Retrofitting Our “Mobile First” Strategy –

Retrofitting our Mobile First strategy to an existing site.“Mobile First” is the battle cry for pretty much every design/development team; with today’s ever increasing mobile traffic across the entire web, it’s no surprise either.

BUT, what if a client has an existing site that they like, that they want to keep? Except, they also want it to ‘just work on mobile devices too’. When a client does make these sorts of request, it’s not necessary to drone on about what comprises a proper, mobile-friendly site. What is important is that you provide them with a site that IS mobile-friendly, even if that means retro-fitting some responsive code, like a CSS grid and some media queries, into an existing design.

I’d never actually done this before – taken a site that was already several years old, designed by someone else, and essentially broke it apart and rewrote huge swaths of HTML and CSS so keep the existing desktop design and also ensure that the site displayed optimally on any handheld screen. So when Kreck Design Inc. called me about taking part in the project, I didn’t know what to expect.

What I did learn, relatively quickly, was that it was going to be easier to re-write the existing layout with integrated mobile friendly grids, than it would be to attempt to just squeeze in some grid work within the existing code. This actually presented us with a great opportunity to take advantage of some new CSS3 methods that hadn’t existed when the site was first launched several years earlier. We stripped out a lot of the images that were being used in the layout and replaced them with CSS rules that exactly matched the effect the images had produced. CSS loads faster than images, so we always try to limit our image usage to contextual, content images, and we do as much of the layout as possible using only HTML and CSS (and sometimes some javascript for a bit of dynamism).

As always, working with the consummate professionals at Kreck Design Inc. made this entire experience a treat and now I’ve got another unique concept notched onto my developer belt; the re-coding of an existing site/design, to implement a mobile first strategy.

This entry was posted in Blog, Projects, Responsive Web Design. Bookmark the permalink. Trackbacks are closed, but you can post a comment.
    • |
    • |