Skip navigation

Category Archives: Responsive Web Design (RWD)

The first programming I ever did was on an HP programmable calculator with a 49-step program memory. Despite the limit, I was able to program the classic “Lunar Lander” and artillery games.

Ever since then, I’ve had an abiding interest in writing efficient programs and (when the Internet came along) websites. For a while, I was out of step with the industry, as fast PCs and broadband connections made the search for efficiency seem almost quaint.

But the Wheel turns, and everything old is new again. In particular, as mobile phone data plans have gone from unlimited 3G to metered 4G connections, there is a renewed need to get the most design bang for the least bandwidth buck.

Responsive Web Design (RWD) often relies on Javascript libraries to provide the best browsing experience available at a given screen size, but these Javascript libraries (which have to be transmitted to the end-user’s device in order to work their magic) can be quite large.

Filament Group (a web design firm based in Boston, MA) posted about some tips and tricks to “…make RWD sites load fast as heck“.

Well, I say “tips and tricks”. What I mean is “seriously technical hacks and optimizations.”

Filament Group’s approach boils down to “embed as much CSS and Javascript in the HTML to make the page as usable as possible while not exceeding 14kb for the compressed page.”

Simply stated, but difficult in practice. In particular, the hacking needed to get the necessary CSS and especially Javascript into the <HEAD> of the page warms the cockles of my old HP25-programming heart.

How do you deal with PDFs and large tables responsively?

Inspired Magazine suggests one approach: treat them like maps.

Vitaly Friedman, one of the co-founders of Smashing Magazine, presented a talk on Real-Life Responsive Web Design.

I’ve had this Copyblogger short article open in a tab in my web browser for, well, months (!) – Mobile Responsive Design 101.

It’s a quick read and gives the basics of Responsive Design for mobile-ready sites.

In the previous incarnation of EvolvingCodeMonkey.com, one of the blogs I followed was Chris Coyier’s CSS-Tricks.

My EvolvingCodeMonkey blog went away for a while, but CSS has continued to evolve — and Chris Coyier has been plugging away at his blog.

Screencast #133: Figuring Out Responsive Images (Vimeo) addresses recent developments in making inline web images responsive.