Email us

Copyright © 2013 Allegra Media LLC

Responsive Web Design: Foundation, Textpattern and The Sharp Things

Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

RWD is a fairly new concept; Ethan Marcotte coined the term Responsive Web Design (RWD) in a May 2010 article in A List Apart.

Chatter about RWD picked up markedly during the past year, as mobile use exploded. Last month, 12% of all web site page views were on a mobile device — nearly double the percentage a year ago. Accommodating mobile devices is no longer a nice-to-have; it is fast becoming a necessity.

Last Saturday, I did what anyone in my situation would do: I Googled “how to build a responsive website” and found my way to a brief tutorial that in turn pointed me to the web site for Foundation, a free, open-source RWD framework.

Foundation’s creators, the web design agency Zurb, calls it “the most advanced responsive front-end framework in the world.” A bit much, but Zurb can be forgiven hyperbole, because Foundation is an awesome tool for building web sites.

A collection of style sheets and javascripts specifically designed for RWD applications, Foundation sweeps away the drudgery of site coding, freeing me to be more creative and deliver my clients much more value.

Using Foundation with Textpattern, the most powerful and flexible open-source content management system (the new version 4.5 is a huge leap forward for an already-excellent CMS), is an unbeatable combination. Designing and building web sites has become incredibly smooth and intuitive. I am not kidding, it’s life-changing.

For my first RWD project I chose the web site for The Sharp Things, an orchestral indie pop and rock band, in which I have played guitar for more than 15 years. We’re getting ready to release a magnum opus of four albums in 2013-2014, and returning to the public eye after three-plus years in the recording studio, so it was important that our revamped web site be killer.

The Sharp Things web site

I spent 5 hours on Saturday reviewing Foundations excellent documentation and playing around until I felt comfortable to start. After duplicating all site data onto a development subdomain, I got to work. What you see at thesharpthings.com was designed and built in 15 hours — and much of that time was spent designing the band’s new logo. All prototyping was done directly in HTML, CSS and javascript; no more slicing and dicing in Photoshop. What a pleasure! And, right out of the box, with minimal effort on my part, I built a web site that rearranges and redesigns itself for an iPad or iPhone:

The Sharp Things mobile site

The Sharp Things mobile site

I am itching to do more with Foundation, Textpattern and responsive web design. I haven’t been this excited about my work since I learned HTML back in 1994! Luckily, my good friends at Dromedary Records are in urgent need of a redesign. Check back in a few weeks!

Sineparade

Sineparade is a New York City-based art-rock band formed by Steve Pacia and Javier Hernandez Miyares. This cool, elegant site brings together all of the web services they had already been using to promote their music: Soundcloud, Flickr, Vimeo, YouTube, and Bandcamp. We added a neat service called SlideMyPics, which allows you to easily create HTML 5 slide shows from an image gallery like Flickr or Facebook, as well as a mailing list powered by MailChimp. Offloading functionality to specialist services gave Sineparade a full-function web site for very little money!

Sineparade.com

MORE NEWS