Case Study
Building a Conference Website with Drupal
in a short amount of time,
with a small team, using Drupal
How to make a responsive
conference/event site
Introductions
Patricia Rodriguez, Substance
Crispin Bailey, Substance
Chris Luckhardt, Motionblur Studios
We all volunteered to make this website
We all work with Drupal professionally
We’re happy to give back to the community
W...
who did what?
Patricia: design, art direction, UX
Crispin: design, site building, theming
Chris: content, registration, se...
The Concept
aka the theme
Drupal = IKEA
Drupal = Prius
Look & Feel
with Style Tiles
(styletil.es)
UX/IA/UI
• Sitemap
• Wireframes
• Comps / Mockups
(not from scratch)
Building + Theming
Splash Page
(buy some time)
Base theme
Why AT?
• Responsive, mobile-first
• HTML5/CSS3
• Accessible (#D7AX)
• Familiar
COD
(Conference Organising Distribution)
Oh COD
• Bloated with unwanted features
• Old code (modules & themes)
• Useless default Views
• Riddled with errors
Some assembly required
• Add and update contrib modules
• Update core base theme
• Add libraries (Superfish, Flexslider, CK...
Cutting edge stuff
• Dev version of AT theme (for mobile menu)
• Dev version of Superfish (for drop-down menu)
• CSS3 (butt...
Building Responsively
• Theming in the browser
• Lots of Menus, Blocks & Views
• Testing on real devices vs simulators
• T...
Theming Challenges
• Bugs in contrib modules (Superfish bug on iOS)
• Responsive tables (just didn't work)
• Funky font ren...
COD’isms
“If your event is different and you have specific
needs, you will probably spend some time
tweaking COD.”
- usecod.com
• concerns about management decisions
• distro constantly in a state of flux
• public communication
• documentation
Advice
• Use real content
• Give yourself lots of time
• Keep it simple
• Be flexible
Thanks!
Contact
patricia@substancedesign.ca
crispin@substancedesign.ca
chris@motionblurstudios.com
@pattycake
@cspin
@chrisluckhar...
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Upcoming SlideShare
Loading in...5
×

Case Study: Building a Conference Website with Drupal

415

Published on

How to make a responsive conference/event site in a short amount of time, with a small team, using Drupal 7 and COD (the Conference Organising Distribution).

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
415
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Case Study: Building a Conference Website with Drupal"

  1. 1. Case Study Building a Conference Website with Drupal
  2. 2. in a short amount of time, with a small team, using Drupal How to make a responsive conference/event site
  3. 3. Introductions Patricia Rodriguez, Substance Crispin Bailey, Substance Chris Luckhardt, Motionblur Studios
  4. 4. We all volunteered to make this website We all work with Drupal professionally We’re happy to give back to the community We embraced the “lean” methodology Disclaimer
  5. 5. who did what? Patricia: design, art direction, UX Crispin: design, site building, theming Chris: content, registration, sessions
  6. 6. The Concept aka the theme
  7. 7. Drupal = IKEA
  8. 8. Drupal = Prius
  9. 9. Look & Feel with Style Tiles (styletil.es)
  10. 10. UX/IA/UI • Sitemap • Wireframes • Comps / Mockups
  11. 11. (not from scratch) Building + Theming
  12. 12. Splash Page (buy some time)
  13. 13. Base theme
  14. 14. Why AT? • Responsive, mobile-first • HTML5/CSS3 • Accessible (#D7AX) • Familiar
  15. 15. COD (Conference Organising Distribution)
  16. 16. Oh COD • Bloated with unwanted features • Old code (modules & themes) • Useless default Views • Riddled with errors
  17. 17. Some assembly required • Add and update contrib modules • Update core base theme • Add libraries (Superfish, Flexslider, CKEditor) • Customise content types
  18. 18. Cutting edge stuff • Dev version of AT theme (for mobile menu) • Dev version of Superfish (for drop-down menu) • CSS3 (buttons, backgrounds, rounded corners) • Google web fonts + Symbolset icon font
  19. 19. Building Responsively • Theming in the browser • Lots of Menus, Blocks & Views • Testing on real devices vs simulators • Tweaking and rethinking
  20. 20. Theming Challenges • Bugs in contrib modules (Superfish bug on iOS) • Responsive tables (just didn't work) • Funky font rendering (Chrome bold, iOS size) • Surprise browser updates (Firefox v.25 Flexbox) • CSS caching bug with AT • Colour contrast (#a11y)
  21. 21. COD’isms
  22. 22. “If your event is different and you have specific needs, you will probably spend some time tweaking COD.” - usecod.com
  23. 23. • concerns about management decisions • distro constantly in a state of flux • public communication • documentation
  24. 24. Advice • Use real content • Give yourself lots of time • Keep it simple • Be flexible
  25. 25. Thanks!
  26. 26. Contact patricia@substancedesign.ca crispin@substancedesign.ca chris@motionblurstudios.com @pattycake @cspin @chrisluckhardt

×