Category : Responsive Web

IMG1765-L

Responsive Web Design SF, Take II

Tagged recently hosted another “Responsive Web Design SF” (RWD-SF) Meetup. It was a great turnout, as Marcos Lara (product designer and HTML5 evangelist) showed the audience how audiovroom.com was built with RWD in mind. Marcos pointed out the many benefits of RWD, and explained the tools and libraries that audiovroom.com utilizes. Very insightful, with many interesting discussions afterwards. We’re already looking forward to RWD-SF’s next meetup!

Check out more photos here on Flickr.


Marcos Lara is the co-founder of audiovroom.com. Follow him on Twitter.

Responsive Web SF Meetup @ Tagged

Tagged is hosting the launch of the Responsive Web SF Meetup Group at our HQ on Thursday, June 14, at 6 p.m. PT.

Tara Feener, Senior Experience Developer at Adobe XD, will be giving a presentation on “Intro to Responsive Web Design”.

About the talk:

Responsive Web Design at 30, 000 feet. I like to dig into a topic that interests me by covering the five W’s, and this talk is no exception. We’ll be taking a look at the who, what, where, why and when of Responsive Web Design, specifically through real, and unique, web examples.You should be able to walk away from this talk with a basic understanding of the three main principles of responsive web design, and how you can start applying it in your day-to-day web work.

About Tara:

Tara Feener is a Senior Experience Developer at Adobe.  She works across the Experience Design and Web Platform organizations, prototyping web experiences in the browser. Tara’s been working with Adobe since 2006, where she started in their Ottawa office. Originally from St. John’s, Newfoundland, Canada, she’s enjoying calling SF home for the time being where she resides in the lower haight. Outside of the office she can be found riding her bike around San Francisco, drinking copious amounts of coffee, skipping across the Internet, sketching new app ideas, or catching a show at The Independent. On twitter: @tfeener

Learn more about Responsive Web SF Meetup here.

 

Tech Talk: Responsive Web 101

At the end of each quarter, Tagged interns present a tech topic of their choosing to share with the broader team. I’ve been quite fascinated by Responsive Web Design so this is the topic I presented on in December.

 

Responsive Web Design means developing a website that A.) rearranges the layout as the screen size changes (so simple, but so cool!) and B.) supports all browsers and devices, as opposed to having a specific mobile site to support lower-end devices. Ethan Marcotte, who coined the term “Responsive Web Design,” provides an excellent foundation over at A List Apart.

What makes this approach so compelling from an engineering standpoint is that having one site that works on all devices means you have one unified code base. No duplicate code for mobile and desktop. You’re no longer forced to build features two or three times. And most importantly, Responsive Web makes for a much better user experience.

Responsive Web Design works by keeping the content and markup the same across all devices by just manipulating the layout with CSS. CSS media queries detect the size of the screen and specify how content is displayed accordingly. However, since we can’t fit everything that would fit on a desktop site onto a mobile device, we define the “main content” of the page that all devices should see and load the other modules on the page conditionally (i.e., add more modules as the screen gets bigger). Ideally the “main content” is static so that lower-end mobile devices can access it, and everything else is loaded with JavaScript so that it only loads what is needed.

This approach adds quite a bit of CSS, of course. However since we only load the modules we need, and the modules only include the CSS they need, it’s not a code load problem. Extra time spent on CSS to implement Responsive Web Design is still less time than creating duplicate code for mobile and desktop Web – well worth it in my opinion!

We’re testing this approach at Tagged and I’d love to see this approach adopted across the Web as more users access sites from multiple devices.


Amulya Sanagavarapu was a Fall 2011 intern and is studying Computer Science at the University of Waterloo.