Design4Drupal Boston Conference

So I attended Design4Drupal conference for the first time this year. I came to learn about this event through a member I see regularly from the BostonPHP users group that I attend monthly. This had to be one of the best design camps I have ever gone to where it was not heavily code centric and design was a core subject matter with some code examples sprinkled in here and there. Plus I did not feel intimidated around others when letting them know I was new to learning Drupal and felt very welcomed. I thought the subject matter in each session was not only informative but transferable in other web development areas outside of Drupal. Here are some of my notes and resources taken from this event from some of the session tracks I went to.
URL: http://boston2014.design4drupal.org/

FRIDAY SESSIONS

I have heard parts of this years keynote from a past session at refreshboston.org a couple of years ago but still loved hearing about it again! Christine’s presentation provided and expanded on some really great real world examples of User Experience, she is an absolute authority in her field with a lot of great knowledge with her years of experience. These are some interesting points I walked away with:

• Users #1 priority is doing the thing that they are there to do. No amount of look/feel and branding can make a bad user experience.
• The response that you want from your users “Can we come back tomorrow?” From the example of GE MRI redesign for child users was an eye opener. (LINK)
• Users don’t know what they want in the future; it’s our job to find their pain points and design what they will want.
• If users hit the “back” button (aka “button of doom”) twice, your UX is sub-par if they need to use search for general content.
• If users go to your search box immediately when they come to your site, that is a sign there is a problem. (Amazon is an exception.)
• It’s about quality, not quantity. Your choice of research project matters. Identify a champion. Focus on quick wins. (refined: start small, pick a stakeholder champion and focus on quick wins.)
• Ticketing system story: http://www.acquia.com/blog/what-users-want-designing-help-acquia-customers
• Do not design your website around analytics. Focus on user intent.
• Check the analytics first to prioritize existing content. Example: 800,000 of Microsofts pages have never been loaded from the server.
• Get all McGuyver and figure out how to conduct UX research with whatever tools are at hand.
• McGuyver never picked up the phone to say “I don’t have resources” …he use what he had.
• “Know what I love about disney.com? …it NEVER gets better!”
• Simplest UX test. Give users 5 seconds to look at an image or page-design and you get instant feedback on elements or problems in a design. The test user will often be asked what key features they could remember from the website. If users can’t find their way or orient to your design immediately, then this can be an early indication the design needs improving.

ADDITIONAL RESOURCE
http://www.disambiguity.com/strategy-is-being-on-message/

Key points from this presentation:

• When marketers and web developers collaborate, they are coming from different frames of reference.
• Accept that sometimes beauty is sacrificed for utility, as painful as that is.
• Schools teach kids to be CEO’s instead of project managers. Every business schools kid will not be a CEO.
• Understand someone’s communication style and 50% of your communication problems will be solved.
• Understand your role as an assistant in generating leads for your client. Site usability is greater than beauty.
• Pay attention to who everyone listens to at a meeting -they are the true influencer, regardless of role.
• Aim for the role of web strategist over web designer -it will make you more valuable in a working relationship.
• #1 reason for contradictory client feedback -input from micromanaging supervisors.
• “If your are running a butcher shop don’t make sausage in the window” -showing too many iterations of your web design will overwhelm your client. That takes away from your authority as the expert.

Key points from this presentation:

PROPERTIES OF GREAT FEEDBACK
A checklist directed at optimizing the effectiveness of feedback given during the design phase.

• Specific
  1. Is the wording vague or too open-ended?
  2. Would someone else understand?
  3. Am I identifying a problem?
  4. Could this be an actionable to-do item?
• Goal-Oriented
  1. Why do I want to add this?
  2. How will this suggestion benefit a user?
  3. How does this help accomplish goals?
• Organized
  1. Consolidated – consolidate similar thoughts into one singular point
  2. Categorized – consider sorting feedback by location (e.g. header, nav, foot) or type (e.g. typography, colors, images)
  3. Prioritized – order by level of importance
  4. Formatted – format can increase scannability
• Relevant
  1. Is this the type of feedback requested?
  2. Am I sharing this with the right person?
  3. Is this related to the current stage of the project?
• Timely
  1. When should I offer my feedback?
  2. Make sure your feedback is submitted early enough to provide time for necessary changes to be made. The sooner feedback can be provided, the better.

IDEAS FOR SUCCESSFUL COMMUNICATION

• Show Empathy
• Establish a common vocabulary
• Consider other methods (typed/spoken/visualized)
• Reread and revise
  1. Does this meet the great feedback criteria?
  2. Is my message clear?
  3. Could this be interpreted differently?
  4. Will my vocabulary make sense to everyone?
• Ask Questions

GETTING GREAT FEEDBACK

• Why?
  1. Misscommunication
  2. Limited Web Experience
  3. Personal Biases
  4. Fear
  5. Lack of Time
• Responding
  1. Analyze
  2. Ask Questions
  3. Explain
  4. Educate
  5. Encourage

ADDITIONAL NOTES

• Inspiring Quality Feedback
• Discuss Feedback in Advance
• Be Flexible

BLOG POST: http://atendesigngroup.com/blog/giving-great-feedback
SLIDES: https://speakerdeck.com/roxy/giving-and-getting-great-feedback-1

This was a pretty good session. Basically we learned the vocabulary for common things within Drupal. And then we were walked through the UI and shown how to add new pages and move the order of a links in the top navigation. From that point we then added a mobile theme and included a module (html editor) within the CMS and to then enable them.
>>> waiting for slide-deck. Additional resources were listed that I did not take down 🙁
Acquia – https://www.acquia.com/downloads

SATURDAY SESSIONS

Key points from this presentation:

• Good user experience is connecting the head and the heart. Find ways to tell the right story.
• What makes the user experience special that has them coming back! Start with the “The Golden Circle” (1) What (2) Why (3) How
• A website is a black hole without its content.
• A goal is an ideal. A principle is there to help make hard decisions. But you still have to actually make the decisions.
• “Silos are for farming, not for web design”
• History and types of design systems: FIXED vs M. vs RWD

ARTICLES
http://www.republicofquality.com/working-together/
http://www.republicofquality.com/four-talks-that-make-the-web-a-better-place/
http://bradfrostweb.com/blog/post/atomic-web-design/

ADDITIONAL RESOURCES
http://aycl.uie.com/
http://www.mobify.com/ (article on CTAs)
http://www.creativebloq.com/design/solutions-not-visuals-6126268

What are common design solutions for re-occurring issues in the real-world. Example: WD-40 and DuckTape.

Key points from this presentation about Design Patterns for the web include:
CONSTRAINED ELEMENTS
Give an element a defined width to prevent it from expanding too wide.
ROWS OF RELEVANT CONTENT
Divide the screen into rows of relevant content such that the hierarchy and content relationships are preserved across different screen sizes.
LAYOUT MODIFIERS
Follow a naming convention for classes intended to modify layout.
Example:

<div class=“l -- [modifier]”>
     <div class=“l-primary”>...</div>
     <div class=“l-secondary”>...</div>
     <div class=“l-tertiary”>...</div>
</div>

GUTTER PULL
Position an item by pulling it into the gutter established by its parent container.
MARGIN OVERFLOW
Allow an element to overflow its container by applying negative margins to both left and right sides.

.l—3-columns {
	margin-right: -2em;
	margin-left: -2em;
} 
.l—3-columns > .l-column {
	box-sizing: border-box;
	float: left;
	width: 33.333%
	padding: 0 2em;
}

INTRINSIC RATIOS
When the aspect ratio of an element is known, but the target size is not, use padding and absolute positioning to preserve the aspect ratio of an element.

<div class=“video”>
	<iframe class=“video-inner”></iframe>
</div>

.video {
	position: relative;
	padding-top: 62.25%;
	height: 0;
}
.video-inner {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
}

GRID SYSTEMS
Divide the screen into a series of vertical columns to facilitate the organization and alignment of components.
GUTTERED GRID
For each grid unit in the grid system, include a gutter to help space content.
GUTTER-LESS GRID
Exclude gutters from the grid unit. Instead, use empty columns as gutters.
SYMMETRIC GRID
Construct the grid from equal width grid units.
ASYMMETRIC GRID
Construct the grid from varied width grid units designed for content.
CLASS-BASED GRID SYSTEM
Align elements to the grid by applying a system of predefined classes to markup.

<div class=“row”>
	<div class=“small-2 large-4 columns”>…</div>
	<div class=“small-4 large-4 columns”>…</div>
	<div class=“small-6 large-4 columns”>…</div>
</div>

SEMANTIC GRID SYSTEM
Align elements to the grid by applying layout properties to selectors using a grid framework.

// Singularity - http://singularity.gs/
.l--sidebar-after {
	.l-primary   { @include grid-span(8, 1, 12); }
	.l-secondary { @include grid-span(4, 9, 12); }
}

FLOAT LAYOUT
Create columns by floating a series of elements with defined widths.

.l—3-columns > .l-column {
	width: 33.333%;
	float:left;
	box-sizing:border-box;
	padding: 0 2em;
} 
<div class=“1–3-columns”>
	<div class=“l-column l-secondary”>…</div>
	<div class=“l-column l-primary”>…</div>
	<div class=“l-column l-tertiary”>…</div>
</div>

ISOLATION LAYOUT
Given a series of floated elements, give each a negative trailing margin in order to reset the orientation of the following element.

DRUPAL LAYOUTS

• Regions that are editable:  page.tpl.php, node.tpl.php, user-profile.tpl.php
• Learn to love “theme hooks”
• CTool Layouts: Panels, Display Suite, Omega 4.x
• When creating your own layout:
  • sidebar_after.inc, sidebar_after.png, sidebar_after.css, sidebar_after.tpl.php

PATTERNS OUT IN THE WILD
http://ui-patterns.com/
http://www.lukew.com/ff/entry.asp?1514
http://bradfrostweb.com/blog/web/responsive-nav-patterns/

ADDITIONAL RESOURCES:
(BOOK) A Pattern Language by Christopher Alexander
(BOOK) Design Patters – Elements of Reusable Object-Oriented Software by Erich Gamma
(BOOK) Ordering Disorder – Grid Principles of Web Design by Khoi Vinh
(BOOK) A Practical Guide to Designing for the Web (Yellow Cover)
(BOOK) A Pattern Language – Towns – Buildings – Construction by Christopher Alexander

“Design Patters are not designed. Design Patterns are observed.”
“Be Mindful of feel good code. Make it Repeatable. Share it with others.”

SLIDES: http://pixelwhip.github.io/layout-design-patterns/#/title-slide

Key points from this presentation:
Themeing files to modify layout: note-full.php + css
If it’s hard to build your design systems, could use improvement?

ADDITIONAL RESOURCES
http://www.palantir.net/blog/platonic-content
http://www.youtube.com/watch?v=ITr9hHYPjBA – tutorial from PSD to Drupal (also look-up another video by Dan Rose)

SLIDES: http://www.palantir.net/presentations/d4dboston2014-design-systems/#/

Key points from this presentation:
Google Web Starter Kit – includes boilerplate and tools inspired by HTML5 Boiler and Yeoman.
Node.js, Ruby & SASS are the underlying technologies written for tools in resources.
Gulpjs.com generates content upon setup.
DOWNLOAD TOOLS
https://developers.google.com/web/fundamentals/
https://developers.google.com/web/starter-kit/

Why BrowserSynch is the best tool:

• Synchronizes click events, scrolls, and forms across many devices.
• Helps with form fields that are multi-page. Don’t need to cycle through action to see changes manually.
• Great during meetings. All decision makers can pull up pages on device and provide immediate feedback.

DOWNLOAD TOOL: http://www.browsersync.io/

ARTICLES – “GIT For Designers”
http://code.tutsplus.com/tutorials/git-for-designers–pre-54689
http://www.webdesignerdepot.com/2009/03/intro-to-git-for-web-designers/

1. Security first and always.
2. Follow Drupal standards. Religiously.
   • consistent within project
   • should not have any other opinion about source code style.
   • run the “coder” module, provides print out of bad things!
3. Internal style guides.
4. No site-wide functionality.
5. A bare minimum of php in the .tpl file.
6. Anything that should be a variable MAKE IT a variable.
7. Code Reviews.
8. Small pieces, loosely coupled.
9. Work with Drupal, not against it!
10. Relax. Learn. Enjoy. “Be obsessed with, but not consumed by the work!”
11. Contribute back.
12. Create an API for your theme!
13. Documentation matters.
14. ALL file in GIT
15. No CSS in a module.
16. Microcopy matters.
17. Be comprehensive (https://www.drupal.org/style-guide)
18. Minimize technical debt (AKA – bad code that works now.)
19. Not short tags.
20. When in doubt WWCD (What would core do?)
21. Architect, Architect, Architect, Architect
    • future proofing
    • create the junk folder directory (if it looks “theme-y put it in there”)
    • who could have predicted the rise of responsive?
    • make code reusable

I’m not entirely sure whether I would want to use this tool since breakpoint media queries are the current thing to use and you can accomplish pretty much some of the same tasks with one less script.
However here are some key points I got from this presentation:

• Browser detects what it can and cannot do.
• We use to use browser sniffing agents which did not have enough information to decipher what device a user is using.
• Modernizr adds properties to the class attribute of the HTML element once it identifies what it can handle.
• In the chrome browser goto: chrome://flags
  • does some interesting things to force the browser to handle certain actions.

ADDITIONAL RESOURCES
files: http://bit.do/modernizr-playground
article: https://www.drupal.org/node/1252178

SUNDAY SESSIONS

This was a discussion session with the presenter and organizer of Design4Drupal conference. It was rather an interesting session to hear how UX design and strategy should be handled in the Drupal community. Although I am too new to understanding Drupal I really cannot provide my own feedback.

This provided some insight on:

• What value can designers get from contributing to the Drupal project?
• What can be done to make it easier to contribute design?
• How does the process work today, and how must it change in the future?

Example of UI design customization: https://www.drupal.org/node/2281763

ADDITIONAL RESOURCES
https://www.drupal.org/community

Key points from this presentation:
http://drupalladder.org/
http://cms.about.com/od/drupal-learning/g/What-Is-The-Drupal-Ladder.htm

MENTORING
For mentoring use IRC chat. (https://www.drupal.org/irc)
By the way “druplicon” in the chat is a computer!!
Mentors to ping: kay_v, leslieg, scor, sceo
There is a 2-hr window (12 noon or 10PM) with other users that can help: http://drupal.org/core-office-hours
Follow on twitter: @drupalmentoring

UNDERSTANDING THE ISSUE QUEUE
handbook –https://www.drupal.org/node/317
how to write good issues – https://www.drupal.org/node/73179
all issues – https://www.drupal.org/project/issues/

NOVICE CONTRIBUTORS
https://www.drupal.org/node/1319140
http://webchick.net/node/96
https://www.drupal.org/project/issues/search?projects=&status%5B%5D=Open&issue_tags=Novice

Before filing a new issue:

• Try troubleshooting first.
• Do not duplicate an issue (search records first)
• Do not file security issues in the normal queue
• When filing do not create a new “tag” unless you are the project maintainer or have been asked to.
• When writing a summary use a template: https://www.drupal.org/issue-summaries

TOOLS
http://www.simplytest.me
https://dreditor.org
https://chrome.google.com/webstore/detail/drupal-qa-notifier/fcgjigcnkbhpjdhimnhlieoplnpoojhi

SLIDES: https://docs.google.com/presentation

---

OTHER SESSIONS 
Slides from other sessions that I did not get to attend but found through twitter.

• RWD (RESPONSIVE WEB DESIGN) ON A BUDGET
• DESIGNING FOR EVERYONE
• ENHANCING DESIGN WITH ADAPTIVE CONTENT
• FRONT-END PERFORMANCE
• THINKING INSIDE THE BOX INSIDE THE BOX INSIDE THE BOX
• COOPERATIVES AND COLLECTIVES – THINK OUTSIDE THE BOX
• MY JOB IS HARDER THAN YOURS
• RETHINKING YOUR DESIGN THINKING
• USER RESEARCH WHEN YOU CAN’T REACH YOUR USERS
• LICENSING DEMYSTIFIED

MORE RESOURCES

• BOSTON CHAPTER
• BOSTON DRUPAL EVENTS
• MIT TECH TV (VIDEO)