File Under: Responsive Design

Give the Web a Responsive-Design Facelift With ‘Responsive Retrofitting’

Show your favorite sites how the small screen is done. (testing responsive sites with Adobe Shadow). Photo: Adobe

Responsive Retrofitting is a fun little project that allows anyone to create a responsive design for any website.

All you need to do is head over to GitHub and install the bookmarklet in a WebKit browser. Now visit one of the supported sites, like Apple.com. Resize your browser window to be very narrow and click the bookmarklet. The result is what Apple.com might look like were the company to create a responsive website (Update: the Apple CSS retrofit is the work of developer Phillip Zastrow, who has more details about the process over on his blog).

Responsive Retrofitting was created by developer Ben Callahan, who cautions that it is “very much in alpha form.” (As such it, regrettably, only supports WebKit browsers for now.) The bookmarklet is an experiment in responsive retrofitting, writes Callahan, adding “it’s a positive response to more negative (but still much needed) critiques of the mobile web like Brad Frost’s WTF Mobile Web.”

Alpha or no, you can contribute your responsive redesigns for your favorite, non-responsive sites — head on over to the Github repo for more info on how to add your own designs.