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!
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
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.
Unlike traditional social networks, Tagged is about more than keeping in touch with your real life friends — it’s about making new friends. So technically, it’s not social networking, it’s social discovery.
Of course, building a site that scales to millions upon millions of users is no small task. There is a huge amount of infrastructure involved in powering this endeavor, from storage to servers, networking and management. So this blog is also about technically, how we handle social discovery on a global scale.
Finally, Tagged is also about a talented, dedicated, enthusiastic group of developers who are constantly innovating, trying new technologies and ideas, and dealing with the daily mission of serving billions of page views a month. We learn from others and we learn from each other. This blog is our attempt to share some of the things that we are discovering with you. Enjoy.
ABOUT US
Tagged is the social network for meeting new people. While other offerings focus almost exclusively on existing relationships, Tagged has established the category of social discovery. Tagged is the largest social discovery network in the world with over 330 million members (combined with wholly owned hi5) in 220 countries. Tagged enables anyone to meet and socialize through advanced browsing features, shared interests and more. Founded in 2004, Tagged is based in San Francisco.
Learn more about Tagged Inc.
Make One Friend or Millions! With over 300 million members and 20 million monthly visitors, Tagged is the place where people can discover hundreds of new friends or just meet that special someone.
Join in the fun on Tagged.com
Ready for a Challenge? At Tagged we’ve got engineers and product managers who love working on challenging projects. Are you interested in joining the team?
Check out our open positions
