SlideShare a Scribd company logo

Case Study: Building a Conference Website with Drupal

C
cspin

The case study outlines the development of a responsive conference website using Drupal by a small team of volunteers who are industry professionals. It discusses the project's themes, challenges faced, and the lean methodology adopted, as well as the importance of flexibility and real content in the process. The document highlights various technical aspects, including the use of HTML5/CSS3, and the need for customization to meet specific event requirements.

Technology
1 of 38
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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 We embraced the “lean” methodology Disclaimer
Case Study: Building a Conference Website with Drupal
who did what? Patricia: design, art direction, UX Crispin: design, site building, theming Chris: content, registration, sessions
The Concept aka the theme
Drupal = IKEA
Drupal = Prius
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Look & Feel with Style Tiles (styletil.es)
Case Study: Building a Conference Website with Drupal
UX/IA/UI • Sitemap • Wireframes • Comps / Mockups
(not from scratch) Building + Theming
Splash Page (buy some time)
Case Study: Building a Conference Website with Drupal
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, CKEditor) • Customise content types
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
Building Responsively • Theming in the browser • Lots of Menus, Blocks & Views • Testing on real devices vs simulators • Tweaking and rethinking
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
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)
Case Study: Building a Conference Website with Drupal
COD’isms
Case Study: Building a Conference Website with Drupal
“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
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
Case Study: Building a Conference Website with Drupal
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 @chrisluckhardt

More Related Content

PDF
Jumpstart Your Web App
Harvard Web Working Group
 
PPTX
Rise of the hybrids
Oron Ben Zvi
 
PDF
Psd 2 Drupal
Nicolas Borda
 
PDF
Platform Selection
Wilco van Duinkerken
 
PPTX
Css3 paul trani
Carl Ford
 
PDF
User Focused Rapid Prototyping with small budgets using Drupal
Crispin Read
 
PPTX
Designing & Developing for Content in WordPress
diane_kinney
 
PDF
How to ensure a long life span for a website?
Teemu Suoranta
 
Jumpstart Your Web App
Harvard Web Working Group
 
Rise of the hybrids
Oron Ben Zvi
 
Psd 2 Drupal
Nicolas Borda
 
Platform Selection
Wilco van Duinkerken
 
Css3 paul trani
Carl Ford
 
User Focused Rapid Prototyping with small budgets using Drupal
Crispin Read
 
Designing & Developing for Content in WordPress
diane_kinney
 
How to ensure a long life span for a website?
Teemu Suoranta
 

What's hot (7)

PDF
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
Teemu Suoranta
 
PDF
Creating Concrn's Website in 28 Hours
Jazmin Hupp
 
PPTX
Word Press Intro for Beginners
SueEllisSaller
 
PDF
Bridging the gap between UX and development - A Storybook by Marko Letic at F...
DevClub_lv
 
PPTX
Amazon
Mohammed shoaib
 
PPTX
Course outline Website Design & Development
VOvais
 
PDF
CSS3 and Advanced Design
paultrani
 
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
Teemu Suoranta
 
Creating Concrn's Website in 28 Hours
Jazmin Hupp
 
Word Press Intro for Beginners
SueEllisSaller
 
Bridging the gap between UX and development - A Storybook by Marko Letic at F...
DevClub_lv
 
Amazon
Mohammed shoaib
 
Course outline Website Design & Development
VOvais
 
CSS3 and Advanced Design
paultrani
 
Ad

Viewers also liked (20)

PPT
Pilot Oyster Restoration Data Dorchester, Massachusetts
Mass Oyster Project
 
PPT
Fracas: Case Study in Asymmetric Project Management
Ken Sitz
 
PDF
Boston Harbor Islands Brochure
ncowen
 
PPT
Chapter 3
kumarrashi
 
PDF
TPG TeamManager App
TPG The Project Group
 
PPT
Moon island long island
Mass Oyster Project
 
PDF
Case Study: TPG Project Management Solution Delivers Big Savings to Emmi Schw...
TPG The Project Group
 
PDF
Alpha Case Study - Lessons Learned Assigment Sample
Agatha Maia Duarte de Assis
 
PDF
Project Management Case Study
Upul Chanaka
 
PPTX
Company Management policy (Case study)
AMU
 
PDF
Alpha Case Study - Work Authorization - Sample
Agatha Maia Duarte de Assis
 
PPTX
Project Management Knowledge Areas
Mais Jauhary, PMP
 
PDF
Alpha Case Study - Process Improvement Plan_Sample
Agatha Maia Duarte de Assis
 
PDF
Hershey erp case_study
Natraj Sowmitri
 
PPTX
Vasco de Gama Bridge - Project Finance Case Study
Audrey Gaspard
 
PPT
Project Management
m g
 
PDF
3. Project Management A Case Study Of A Successful Erp Implementation
Donovan Mulder
 
PPSX
Arvind mills case study by jayshah316
Jay Shah
 
DOCX
Arind mills case study
ashiswapnil
 
PDF
Project Management Sample
Lori Krein Studios
 
Pilot Oyster Restoration Data Dorchester, Massachusetts
Mass Oyster Project
 
Fracas: Case Study in Asymmetric Project Management
Ken Sitz
 
Boston Harbor Islands Brochure
ncowen
 
Chapter 3
kumarrashi
 
TPG TeamManager App
TPG The Project Group
 
Moon island long island
Mass Oyster Project
 
Case Study: TPG Project Management Solution Delivers Big Savings to Emmi Schw...
TPG The Project Group
 
Alpha Case Study - Lessons Learned Assigment Sample
Agatha Maia Duarte de Assis
 
Project Management Case Study
Upul Chanaka
 
Company Management policy (Case study)
AMU
 
Alpha Case Study - Work Authorization - Sample
Agatha Maia Duarte de Assis
 
Project Management Knowledge Areas
Mais Jauhary, PMP
 
Alpha Case Study - Process Improvement Plan_Sample
Agatha Maia Duarte de Assis
 
Hershey erp case_study
Natraj Sowmitri
 
Vasco de Gama Bridge - Project Finance Case Study
Audrey Gaspard
 
Project Management
m g
 
3. Project Management A Case Study Of A Successful Erp Implementation
Donovan Mulder
 
Arvind mills case study by jayshah316
Jay Shah
 
Arind mills case study
ashiswapnil
 
Project Management Sample
Lori Krein Studios
 
Ad

Similar to Case Study: Building a Conference Website with Drupal (20)

PDF
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...
Wilco Turnhout
 
PPTX
2015 WritersUA Sourcing Graphics
Mary Connor
 
PDF
Everything Old is New Again: The State of Web Design
Maria D'Amato
 
PDF
Web design training , Web Design Training In Kolkata
W3webschool
 
PDF
Getting started with dev tools (05 09-17, santa monica) upload
Thinkful
 
PDF
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Angela Byron
 
PDF
The Coding Designer's Survival Kit - Capital Camp
canarymason
 
PPTX
Building Design Systems
Burton Smith
 
PPTX
Basics for front end developer
namrataa0108
 
PPTX
Super tools to boost productivity in React dev env!
Souvik Basu
 
PPTX
Mozilla Developer Derby October 2012: Media Queries
themystic_ca
 
PDF
Modern Web Development
Robert Dawson
 
PDF
A guide to hiring a great developer to build your first app (redacted version)
Oursky
 
KEY
Why ruby and rails
Reuven Lerner
 
PDF
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
PPTX
SEF 2014 - Responsive Design in SharePoint 2013
Marc D Anderson
 
PPTX
Your Road to Communication Sites
D'arce Hess
 
PDF
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
Jon Peck
 
PPTX
Your Road to Modern Communication Sites
D'arce Hess
 
KEY
Production process presentation - drupalcamp Toronto 2010
Aidan Foster
 
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...
Wilco Turnhout
 
2015 WritersUA Sourcing Graphics
Mary Connor
 
Everything Old is New Again: The State of Web Design
Maria D'Amato
 
Web design training , Web Design Training In Kolkata
W3webschool
 
Getting started with dev tools (05 09-17, santa monica) upload
Thinkful
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Angela Byron
 
The Coding Designer's Survival Kit - Capital Camp
canarymason
 
Building Design Systems
Burton Smith
 
Basics for front end developer
namrataa0108
 
Super tools to boost productivity in React dev env!
Souvik Basu
 
Mozilla Developer Derby October 2012: Media Queries
themystic_ca
 
Modern Web Development
Robert Dawson
 
A guide to hiring a great developer to build your first app (redacted version)
Oursky
 
Why ruby and rails
Reuven Lerner
 
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
SEF 2014 - Responsive Design in SharePoint 2013
Marc D Anderson
 
Your Road to Communication Sites
D'arce Hess
 
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
Jon Peck
 
Your Road to Modern Communication Sites
D'arce Hess
 
Production process presentation - drupalcamp Toronto 2010
Aidan Foster
 

Recently uploaded (20)

PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Teaching material agriculture food technology
LiaRayya
 
A Presentation on Artificial Intelligence
memembruh336
 
Approach and Philosophy of On baking technology
30anthuong17
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
Encapsulation theory and applications.pdf
gurumoop
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 

Case Study: Building a Conference Website with Drupal