It’s a Good Time to Go to BADCamp

By Stephanie

It’s that time of year again! And boy, are we excited. BADCamp is around the corner and we’ve already got our bags packed for San Francisco. BADCamp is one of our favorite Drupal Camps out there because it’s close to home, attendance is free, and it offers a handful of great Drupal trainings for all skill levels. And, of course, there’s the Nonprofit Summit that takes place on Thursday, November 6.

We’ve been hard at work helping coordinate this summit and we’re thrilled with the day that’s come together.

We’ve lined up speakers from the Sierra Club, Kiva, and the Electronic Frontier Foundation, who will share their experience and insights into leveraging Drupal to further their mission. You’ll also be able to join a variety of discussion-style breakout sessions, led by Drupal experts and nonprofit tech leaders. Looking for a topic that’s not on the schedule? Lead a discussion of your own during the open breakout sessions!

We’ve got a jampacked schedule in addition to the Nonprofit Summit day. On Saturday and Sunday, you can find ThinkShout at booth #4 – stop by and say hi – we’d love to chat with our fellow BADCampers. Several members of our team will be speaking – check out the schedule below for a full breakdown of our presentations.

Saturday, Nov. 8

“Maps Made Easy” – Gabe Carleton-Barnes (@uncle_gcb)

Room: Rainbow Road

Time: 10:00am-11:00am

Maps are all over the web these days, and they can be extremely effective tools for finding and sharing information. Embedding a simple Google Map is easy, but what about building something that is more integrated with your content? It turns out you can build awesome integrated maps in Drupal almost entirely with point-and-click tools: all you need is the Open Source Leaflet library, Views, and a few other Contrib Modules. In this session we’ll show you how by interactively building a site with a map from a bare Drupal 7 install.

Participants will choose what type of mappable content to create, and will be asked to add content using their own devices to build a rich demonstration of the map’s capabilities.

As we assemble the required modules and configure our site, we will discuss the roles played by each module without a bunch of geospatial techno-babble. By the end of the session, we will have an interactive map displaying content that is easy for any site user to input using address data. If there is sufficient time, we will discuss how to customize the map’s “tiles”, add plugins, use proximity filtration, and other potential features for your map!

Room: Warp Zone

Time: 10:00am-10:30am

There’s no denying that a designer’s role is changing. Responsive Design has made the whole process much more complex. Designers are now expected to be equal parts artist and coder, and to use HTML, CSS & Javascript as their palette. I’ve met that challenge, and I‘ve spent the last few years working on several large, responsive Drupal sites. This talk will include a candid, real-world look at my personal evolving design process, as well as lessons from my own personal journey as a designer.

Topics include:

  • A thorough walkthrough of responsive design deliverables: Content Strategy, HTMLWireframes, Style Tiles, & Style Mocks. Examples will be shown.

  • Managing the expectations of Clients, Users and Developers

  • Keeping the focus on User Experience

  • Real world successes and failures

  • A fight to the death between Photoshop & In-Browser design

  • Creating a better iterative process

  • Bridging the gap between design and front-end development

  • Embracing the concept of Kaizen (continuous improvement) as a designer

“Responsive Image Loading with the Picture Module”– Cooper Stimson (@cooperstimson)

Room: Warp Zone

Time: 5:30pm-6:00pm

Responsive Web Design (RWD) is increasingly vital in the contemporary web landscape, where your content can be displayed on a phone, a laptop, an 84-inch 4k monitor, a refrigerator, or even a watch. In this session you will learn how to leverage the Picture module (and its dependency, the Breakpoints module) to achieve responsive image loading in Drupal 7.

The Picture Module

There is no RWD solution for images in Drupal 7 core. Luckily, a responsive image handling module called Picture will be included in Drupal 8 core, and has already been backported to Drupal 7. Picture uses the new HTML5 picture element.

This session will cover:

  • Installation and configuration of the Picture, Media, Chaos Tools Suite, and Breakpoint modules

  • Creating breakpoints and breakpoint groups

  • Configuring picture mappings

  • Setting up file type display settings

  • Applying these options to an example content type

  • Basic introduction to the picture element and media queries

Image loading is particularly important for RWD; loading an image size inappropriate to screen resolution is problematic whether you’re stretching a 100×100 thumbnail over a massive screen, or sending a ten megapixel background to a QVGA phone. In the former case you’re making a pixelated mess, and in the latter case you’re eating up both your own bandwidth and your user’s data plan on a resolution they can’t use – nobody wins.

Benefits for Your Site

There are many reasons to responsively load images on your site. A few highlights are:

  • Consistent user experience across platforms

  • Single URL per page

    • No need to code up a separate mobile version

    • SEO optimization – Don’t split your pageview count between multiple URLs

    • Improved shareability

  • Massive pageload benefits on mobile

Target Audience

This session is aimed at beginning level Drupalers who haven’t used the Picture module before.

It’s completely free to register, just sign up on the BADCamp website.

See you in San Francisco!