By Dennis Clemente
Have you ever wondered how you can make your website look just as good on your laptop, as it is on your smartphone, as it is on your tablet…ad infinitum?
At least a hundred web developers and other curious seekers attended the “The Essentials to Responsive Web Design” meetup on January 22 at 632 Broadway in Manhattan to find out the new shoes they have to fill with the Internet now in various platforms.
Clarissa Peterson, a freelance web/UX designer & developer working on finishing her book on responsive design with O’Reilly, presided over the subject matter in a manner that kept both beginners and advanced HTML and CSS users interested about this new development in web design.
Peterson tempered her technical knowledge with more accessible insights as she showed one website’s responsiveness with another’s pitfalls. For those well-versed on the subject, she talked about CSS with fluid grids, flexible images and media queries that allow a site to respond to any device.
Getting into some unavoidable comparisons, Peterson showed the burdensome fixed-width layout the NYTimes (nytimes.com) and the fluid adjustable widths of the Boston Globe (boston.com). She cited inconsistencies in some with separate layouts– usa.gov on mobile is “good to look at”; the website was another thing altogether.
“Responsive design should fit any device,” says Peterson, as she emphasized the growing number and different sizes of devices with Internet access.
Beyond esthetics, Peterson cited the importance of functionality in a web design, using one Stephanie Rifer’s telling experience with her mobile phone: “I just transferred money at my desk using my phone, because logging into my banking app requires fewer steps.”
In terms of navigation, Peterson explained how the three-grid navigation on http://starbucks.com makes the site flow effectively, but she pointed out how its simplicity works for our convenience where its coding—the dirty work behind the building process–was far more complex.
The examples showed how the technology is there and that developers just need to re-think everything: the design process, content development, and making sure to have prototypes, wireframes and frameworks. Got your web design? Check if it passes the test here: http://foundation.zurb.com/. Also visit http://responsinator.com/ or try Adobe Edge.
How responsive design will work with e-commerce sites could be the most interesting challenge for developers. United Pixelworks (http://www.unitedpixelworkers.com/) is one good working example.
The Internet is changing yet again. WordPress carries some responsive themes but will need more as demand for it grows. Old browsers will need to adjust and the quick solution, Peterson suggests, is add media queries.
“A pixel is not going to be a pixel anymore,” Peterson mentions twice during her presentation. “For typography to be responsive, we’ll need to use ems.”