Sessions

Session Schedule

Sunday, November 9 2014

10:00am - 11:00am

Mushroom Kingdom
Design, Theme + UX
Beginner
More

As the sites we build get increasingly complicated, the wireframing phase is increasingly important. Solving high-level usability challenges early in the process is saves time and money for you and your clients! In this talk, I'll share the techniques and tools we use at Chapter Three to quickly produce high-quality wireframes and maintain your UX sanity.

WE'LL ALSO DISCUSS: 
• Why paper is the most important tool
• "New" exciting tools for producing wireframes (like Sketch)!
• How wireframing can be a vacation from designing
• Using wireframes to test the usability of your website
• Creating wireframes for responsive websites
• How you can learn to stop worrying and love Helvetica (again)

NOTE: This talk has evolved significantly since it was presented at BADcamp 2013 and at Drupalcon Austin 2014. Lots of new stuff to share and plenty of good foundational information for anyone who hasn't seen it already!

11:00am - 12:00pm

Bowser’s Castle
Design, Theme + UX
Intermediate
More

You have 9 months to make 188 university websites responsive. You have to use as much of the existing design as possible (design changes require approval) and you cannot make any changes that impact your client web editors. You should also make the sites more accessible. Go.

PS: the CMS you're using isn't Drupal.

Responsive design is complicated enough when you're starting from scratch to create a new design. What about retrofitting an existing design to make it responsive? How do take a website design that predates Apple's iPad and update it to adapt to as many devices as possible? How do you do all of this without adversely affecting your web editors, site admins or site visitors?

In this session, I'll present the challenges we faced while converting a large university web presence to a responsive design. I'll talk about the design trade-offs our team faced and how we worked through them. I'll explore the process and philosophy we used to guide us through difficult decisions on the project. On the technical side, I'll talk about how we made decisions about frameworks and dev tools, and provide an overview of the technology stack we used to develop our new web templates (SCSS all the things!). Most importantly, I'll talk about the lessons our team learned (including the hard ones) and offer my advice to any team facing a "responsive retrofit."

Remember when I said the CMS wasn't Drupal? I wasn't kidding. But fear not, I will still talk about Drupal.

1:30pm - 2:30pm

Bowser’s Castle
Design, Theme + UX
Intermediate
More

"Everyone has been talking about Sass, but I have no idea what it is or how to get started." "I’m comfortable with writing CSS and the command line is scary. Why should I learn YET ANOTHER new thing?" These are common feelings for developers who are either considering or getting started with Sass. Sass is a powerful CSS extension language for front-end developers, and it’s used in an increasing number of Drupal starter themes, including Zen and Omega. Developers love Sass because you can: -Define components once and reuse them throughout your project, rather than repeating the same CSS over and over (change your font-size or font-family in one line and it will update everywhere!) -Nest your CSS for more logical, maintainable stylesheets (use wisely!) -Perform advanced processing before your CSS is compiled, such as calculating color functions or creating image sprites Although it’s powerful, Sass can be intimidating for beginners. In this session, we’ll go over what you need to know to get started kicking boring, bloated CSS ass with Sass. We’ll also cover: -Basic Sass terminology -- mixins, variables, nesting, amp (&) and more -How to compile Sass into CSS that your browser can read -Tools and handy mixins that will make your front end development easier -Integrating Sass into your workflow and overcoming challenges

2:30pm - 3:30pm

SELECT
Design, Theme + UX
Intermediate
More

I am a user experience researcher and Drupal content strategist. Every time I present a session on UX for Drupal, half a dozen folks come up to me afterwards and say, "so, this is all really awesome stuff and I am personally fully sold on UX, but how do I get buy-in from real clients / stakeholders / my boss?"

This session is for all of you who want to include UX in your projects but need to get someone to pay for it... How to sell user experience design for Drupal projects:

✓ Understand your audience 
✓ Have a UX sales plan
✓ How to show how UX impacts the bottom line
✓ How to create a UX sales kit
✓ Demonstrating how UX solves Drupal problems
✓ Euphemisms for UX work
✓ Finding UX champions

 

3:30pm - 4:30pm

Bowser’s Castle
Design, Theme + UX
Intermediate
More

Slides: http://drupaltwig.github.io/ThemeSystemBadCamp2014

The Twig templating engine is in Drupal 8 and has generated a lot of excitement. Many passionate contributors have stepped up during the Drupal 8 development cycle to not only convert Drupal’s markup to Twig but also clean up and simplify the theme system as a whole. But what does all this mean to you?

This session covers the state of Drupal 8's theme system. We'll talk about what's different from Drupal 7 but also walk through some of the internals of different aspects of the theme system and how they might affect your day-to-day work with Drupal. Many parts of the session are applicable to Drupal 7's theme system as well so you can use some of the knowledge right away.

We’re going to talk a lot about code and APIs and look at plenty of PHP, so an understanding of PHP basics will be helpful.

Topics include:

  • A high-level overview of the changes to the theme system in Drupal 8.
  • Some of the goodies that are possible now that we’re using Twig as our templating engine.
  • Using theme hook suggestions to cut down on custom code and have themers thanking you.
  • Phases of the theme system and where you can step in to alter things.
Haunted Mansion
Design, Theme + UX
Beginner
More

Frontend development is becoming more critical as web development matures. As we grow our need for backend-like workflow tools increase. During our day-to-day site development in Drupal we all have to do repetitive tasks. Let's take the pain out of the process and focus on our actual work by learning how to utilize modern frontend automation tools.

In this talk, I plan on discussing various tools that help frontend developers stay consistent as they develop their drupal themes. I will focus primarily on gruntjs and bower, but will also briefly discuss Gulp.js, PhantomJS, PageSpeed, and CasperJS. I’ll show some small (pre-recorded) demos of the tools in action, and discuss how much you and your site will benefit from the use of these tools in your day-to-day work lives.

NOTE: Ryan presented this session at DrupalCampColorado in July 2014 (https://2014.drupalcampcolorado.org/session/intro-frontend-ops). The BADCamp session will be an updated version of this session. 

Updated Slides

Saturday, November 8 2014

10:00am - 10:30am

Warp Zone
Design, Theme + UX
Beginner
More

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

11:00am - 12:00pm

Bowser’s Castle
Design, Theme + UX
Beginner
More

Yeoman is a powerful scaffolding tool, but we often only think about it to scaffold out a website. But Yeoman generators can be written to scaffold out just about anything, from common CSS files to advanced Sass partial structures! In this session, we'll go over how to create a Yeoman generator of your very own, how to integrate other generators, and how to use Yeoman for more than just scaffolding out full projects.

START
Design, Theme + UX
Beginner
More

Usability testing can help bridge the gap between developers, marketers, and stakeholders. Usability testing lets the design and development teams identify problems before they are coded. The earlier issues are identified and fixed, the less expensive the fixes will be in terms of both staff time and possible impact to the schedule. Usability testing is a great way to help teams prioritize website redesign efforts. In this session, we'll talk about the main types of usability tests and why it's better to usability test before deciding on making changes to the design. By conducting tests early, your team learns what to change. You'll learn what to keep. Usability testing early makes it easier to build the requirements, define the use cases, and even create QA test scripts, because you can drive all those things right off what you saw in the research. It will likely reduce your development costs because you’ll have data to make decisions, instead of driving everything off some strong-willed individual’s opinions of what users need. Pushing your user research as early as possible in the schedule is the best way to get value from your efforts.

1:30pm - 2:30pm

The Theater
Design, Theme + UX
Advanced
More

We must get the content to the user, and we must do it fast. In a world constantly moving, getting a site loaded in under 1000ms is key to keeping users on your site, and engaged with your content. This is not a new idea, and the 1000ms barrier has been written about, presented, talked about in web circles for a while now--- but how do we actually do it?

Working on a Drupal site, how can we decrease bloat on a page, to get our site delivered to the user quickly and efficiently. What steps can we take to decrease that first hit, so a page is available as soon as possible, especially for a mobile user.

This talk will go over the tech, and the basics of the TCP protocol so you understand where the lag is in presenting a web page. It will describe the modules any frontend developer can use to help in presenting their content, and frontend techniques that can be applied by advanced themes to make your site the fastest on the net.

START
Design, Theme + UX
Intermediate
More

Web accessibility has been important for non-profits, educational institutions & government agencies for ages in the USA thanks to Section 508, but it is becoming increasingly important for competitive businesses as well. Drupal 7's accessibility is still outstanding, but Drupal 8 Core is even better! Learn about some of the big improvements in Core that you'll want to be leveraging in your Drupal 8 themes & modules. Get a better understanding of WAI-ARIA and how this W3C Standard can help you remove barriers for screen-reader users. The Drupal community is striving to make our code (and sites) accessible by default. Learning what of that behavior you can leverage can save you a lot of site development time.

Haunted Mansion
Design, Theme + UX
Beginner
More

How many times have you received feedback that didn’t make any sense or just wasn’t useful? It’s pretty easy for people to get caught up in their own emotions, losing sight of what others understand and what information might be helpful for them. This is how vague feedback like “Make it pop” or “I just don’t like it” commonly results in frustration and unnecessary iterations, which have the potential to disrupt the timeline or budget of a project.

How do we make sure everyone’s thoughts and contributions are being communicated effectively? Knowing how to give solid feedback internally and encouraging useful feedback externally can solve some of these issues and make the course of a project run more smoothly.

This session will:

  • Pinpoint properties of successful feedback
  • Discuss the characteristics of a good communicator
  • Explore options to inspire clients to provide productive feedback in advance
  • Offer techniques to respond to difficult feedback

2:30pm - 3:30pm

The Theater
Design, Theme + UX
Advanced
More

There's a lot of front-end tools out there you can use with your Drupal themes that will improve your code quality and organisation, development workflow and ability for multiple people to work together on the same project.

This session will show you how you can...

  • Structure your sass
  • Use node.js' npm modules
  • Manage your external packages with bower
  • Automate your builds with Grunt.js
  • Save yourself lots of clicking by using LiveReload
  • Ensure your team is running consistent versions of tools with bundler
  • Use AngularJS templates in your theme to offload processing to the client-side

2:30pm - 3:00pm

Warp Zone
Design, Theme + UX
Intermediate
More

Design logic dictates how the browser should render content. Designers define these objective rules and developers implement them with CSS. We tell the browser things like "All links need to be underlined" or "All images should be no wider than their parent container." However, an effective design system needs to handle more complex problems than what color the links should be. What about rules like “If this image has a portrait orientation, make it 33% wide and float it to the right?” While CSS becomes more powerful with each browser release, it still can’t do everything. More complex rules need help from the server or client side to help maintaining design integrity. In this session we'll look at breaking down design systems into objective rules that can be implemented programmatically. We'll also explore the limitations of CSS logic and how it can be augmented with PHP and JS.

3:00pm - 3:30pm

Warp Zone
Design, Theme + UX
Intermediate
More

Twitter uses Drupal for its editorial content such as blogs or developer documentation.

The team has been building and improving tools to enhance editor's productivity as well as our own productivity. When I started working in the team I was surprised by the lack of a modern template engine which led me to implement Twig in our Drupal 7 environment.

We found a lot of values in migrating to Drupal 8 however as our platform supports more and more sites it would be difficult to migrate them all at once so intead we decided to migrate our platform bit-by-bit before the official release.

This session will demonstrate using concrete examples how we integrated Twig and how we leverage it. I will talk about why modern template engines are useful, why Twig is a very powerful tool and why it should get you excited about Drupal 8.

But it was not all that easy! This session will also highlight the challenges related to inconsistencies in modules, renderable arrays and security requirements to name a few.

Some basic knowledge in theming on Drupal and modern template engines will help you get the most of the presentation. Reading about template inheritance will also be helpful.

My name is Thomas Potaire, I joined Twitter last year and it is my first experience on Drupal. I previously worked with Symfony2 at CBS Interactive. I digged into some of the darkest corners of our Drupal 7 environment (caching, user module, filesystem) and immediately saw how Drupal 8 would benefit us. 

@teapot

4:00pm - 5:00pm

Bowser’s Castle
Design, Theme + UX
Beginner
More

No more Angry Themer - In Drupal8 it will be happy theming. This session will be a Live Action demo of Drupal 8. I will be demo'ing how to theme a Drupal8 site.

* Why we revolutionized the Frontend in Drupal8
* Debugging & template overwriting
* How {{ twig }} works for a themer
* Imagestyles CMI
* Theming with 25% less cursing (yup)

If you haven't looked at Drupal8 yet this session will blow your mind!

4:30pm - 5:00pm

Warp Zone
Design, Theme + UX
Beginner
More
Bundle up!

Slides: http://www.slideshare.net/dead_arm/bundler-is-the-best

Lock down which project is using which Ruby gems, on which versions, with Bundler! Gem versions can be a pain to manage, especially if you or your team members work on multiple projects simultaneously, or if you work with contractors, temps, etc. Case in point: projects stall, people leave, and hand-offs often don’t include robust documentation.

Using Bundler is a great practice if you aren’t going to be working on a project forever and someone else will have to pick up where you left off, if you are working on one legacy project and one bleeding edge project, or if you frequently come back to projects after not working on them for some amount of time. Additionally, it can be difficult to get the right gems (dependencies on specific versions) if you have multiple versions on your system. Setting up, managing, and updating your ruby gem environment is a tedious task. Bundler can help!

http://bundler.io/

https://github.com/bundler/bundler

 

5:00pm - 6:00pm

The Theater
Design, Theme + UX
Advanced
More

In the face of bewildering advancements in the front end, it's useful to take a step back and take stock of where the fundamentals are headed: namely HTML and CSS. These two lowly languages have been largely left by the wayside as we front-enders scream ahead with abstractions and frameworks. But where are HTML and CSS headed exactly? This session examines progress working groups have made to the existing standards, techniques that are already or will soon be available for developers, and some of the proposals being floated around the standards.

We'll devote our attention to the following questions: How far have HTML and CSS come? What upcoming techniques or proposed additions are most relevant to us as Drupalists? What does the future of HTML and CSS look like in terms of cross-browser compatibility, programmatic approaches, and more extensive possibilities? What are Web Components and the Shadow DOM? How can we prepare for the approaching future of HTML and CSS?

Just some of what we will delve into:

  • A brief retrospective: Where are we now?
  • The current rendering engine landscape
  • Vendor prefixes: Dead but not extinct
  • New selectors, combinators, and pseudo-classes
  • Flexbox, Grid, and other layout
  • CSS backgrounds, borders, and gradients
  • CSS variables and extensions
  • Web Components and the Shadow DOM
  • Custom elements, HTML imports, and CSS scope
  • General implications for Drupal
  • ... and much more

This session is geared toward front-end developers, themers, and designers interested in a robust crash course in where HTML and CSS are headed in the short and long term. This session also assumes an advanced understanding of modern HTML and CSS. Though some of these techniques are still unavailable for general use, this session will give you the tools to engage in the discussion and to plan for the future of markup and style.

About me

Preston So has designed websites since 2001 and discovered Drupal in 2007. He is a Software Engineer at Time Inc. and also co-founded the Southern Colorado User Group. Since 2008, Preston has spoken at conferences and camps across the U.S. and on two continents (most recently DrupalCon Amsterdam 2014 and DrupalCon Portland 2013) on topics such as design, theming, usability, responsive design, and cutting-edge CSS.

Note: This session is an updated version of the DrupalCon Amsterdam session The Future of HTML and CSS. It is also a sequel to Frontiers of CSS (BADCamp 2012, DrupalCamp NJ 2013, DrupalCamp CT 2012).

5:00pm - 5:30pm

Warp Zone
Design, Theme + UX
Beginner
More

Design is at the core of every project Aten takes on. We believe good design starts with a good content strategy. Join Aten’s Joel Steidl, Lead Architect, and Christine Coughlan, Information Architect, as they share practical tips for breaking down and organizing content for projects of any size.

Starting with a well-thoughtout architecture leads to flexibility in design. Creating custom content types assembled from distinct fields allows content to adapt appropriately to different contexts. Joel and Chris will explain how breaking content into smaller pieces can enhance your design and create content that adapts to different views and devices. They will share case studies to reinforce the theory and practice behind adaptive content and best practices for implementing in Drupal and other platforms.

What we hope you'll walk away with:

  • Know the visual benefits of structured content over content created using a WYSIWYG editor only.
  • Learn what adaptive content means.
  • Add design consistency between similar content on your site.
  • How front-end developers can use view-modes for adaptive content.
  • How to improve the publishing experience using straight forward content entry forms.

This session was also presented at Design4Drupal 2014 in Boston.