Redesigning a Web site for a Remote Wellness Retreat, On Site!

Drupal in the jungle

By Malcolm van Delst

Talk Map1. Intro2. Who I am3. Project, intro4. Process

a. Research, project and site orientation, project planningb. Design and development

i. Setting up development environmentii. Upgrade from 6 to 7iii. Design and development

5. Key modules and other tools6. Workshop content type7. Glossary

1. IntroAloha! I've just spent 6 months at a remote Hawaiian wellness retreat redesigning and updating the retreat's Drupal 6 web site. I will present a case study of this project that covers:•upgrading a fairly simple but large site from Drupal 6 to 7•including • new architecture and • new design• mobile device compatibility• different home pages for local and remote audiences• building a class calendar with options for cancellations and changes on a per day basis, that is easy

for a non-technical administrator to use• module upgrading• encrypted forms to accept credit cards

•working from loose specification and design documents.

•I will discuss some of the challenges presented by the environment, like spotty internet connections, moist and salt-permeated air, and working with a volunteer team who's members change continually, and who's members have varying degrees of technical knowledge and experience.

2. Who am I?•I make

communication tools for awesome clients.•Mainly

freelance since about 2000, though maybe not anymore.•Consulting,

design, direction and development. •I work for

people and projects I support. This usually means creative, challenging work and/or projects that are good for humans and their environment.

•Regarding Drupal, I’ve worked with the software since 2005. My first project was helping port GranvilleIsland.com, with Agentic.

•I’m often a one-lady show, or, working on small teams in a loose front-end dev capacity.

•Projects of about 50k +.

•http://cutelab.com

3. Project, intro•Craigslist ad•My pre-

project status: • Wellable.ca (Wordpress farm – templated sites- for the wellness industry).• past client, Massage Therapy Assoc. of BC, asked me if I wanted to provide

low cost sites for their members. I thought doing a Wordpress farm would be perfect and continue the good times we had. I was wrong! • Building a business is haarrrdddd work! • Hawaii for 3 months to rebuild a Drupal site for a wellness retreat: "perfect!”

•client had graphic designer, content writer/editor and php guy to help

•Drupal 6 site•new site was

designed

3. Project, intro (cont.)Project (cont.)•*Home page, and the Workshop display page were designed• only had paper and low res pdf versions of these designs due to a computer

crash• Architecture *changed several times throughout the project - is

this something everyone experiences? *Menus/architecture have to be malleable. - Malcolm, make note of this and keep in mind on next project!

•PHP guy was also the centre’s (Visual Basic) database programmer. He had made a navigation block prior to my arrival. We used that, but he was mainly preoccupied with his own work and didn’t have a lot of time to help with web site tasks.

(…c0nt.)

3. Project, intro (cont.)Project (cont.)•The centre was in the midst of organization rehaul, • founder/ED stepping aside and a new ED stepping in• Accounting systems (and database) being overhauled• Shift to a more business-like mode of existence, while remaining a US

registered non-profit.Web sites:•http://kalani.com - existing•http://beta-kalani.com - new

4. Processa. Research, project and site orientation, project

planningb. Design and development

i. setting up development environmentii. upgradeiii. design and development

4. Processa. Research, project and site orientation, project

planning• [TECHNICAL] Review/research:• existing site's modules to see if they have been upgraded for D7• how to upgrade

• twitter was great - DUG was great - Dale and Renee suggest installing and setting up D7 site, then migrating content, using Migrate module, into new site; also talked to original site developers

• mobile and mobile tourism sites - want to do mobile first - twitter and Gregory Heller• existing site and client notes with regard to possible structure and content presentation

improvements; ie. views, grids for room display, weekly calendar, etc.• sales stats with regard to target market

• 33/33/33 split between guests, workshop participants and (including payment and labour provided) volunteers

• Google Analytics data• interesting that there was such heavy Mac/Safari usage:• Browser use, across mobile and desktop• 35% of visitors use Safari• 21% IE (mainly IE 8 and 9; 10% 7)• 22% Firefox• 18% Chrome

4. Process (cont.)a. Research, project and site orientation, project

planning (cont.)• (set up Wordpress site for Puna Music Festival)• [T] GIT set up attempt • [T] Set up local and remote installs of drupal 7 to familiarize myself with

the processes - I had never worked with Hostgator nor D7 before • [T] got beta-kalani.com url on new account – 2 accounts under the

kalani.com url made it difficult to set up beta.kalani.com on newest, development account.

• [DESIGN AND ARCHITECTURE] Review site architecture with Marketing Coordinator

• [PROJECT ORGANIZATION] Write project plan• [DA] Create site map (tree structure) from flip chart

a. Research, project and site orientation, project planning (cont.)

• [PO] discussion with client - doesn't want to do mobile first because desktop site is most necessary• [T] Review migrate module• [T] Watch screencast re. technical aspects of d6 to 7 migration• [T] Using the migrate module seemed difficult and unnecessary for

this site, which, though largish, was pretty straightforward so instead chose to copy live site to dev server, and upgrade that to D7.

4. Process (cont.)

4. Process b. Design and developmenti. Setting up development environment

1. [T] Pull down existing d6 site to laptop (localhost); db with phpmyadmin - cannot install because it's "too big"; download and install back up and migrate – doesn’t work either

2. [T] troubleshoot mysql errors • On Mac, use Applications/Utilities/Console

1. [T] complete db import on laptop2. [T] review d6 install3. [T] move localhost install to remote: • move files (ie. Sites/name-of-folder-drupal-install-lives-in) - via ftp or cpanel • export/import db, • adjust settings.php file,

4. Process b. Design and developmenti. Setting up development environment (cont.)

6.[T] move files from kalani.com to beta-kalani.com• search and replace file paths on sql file• back up existing db before uploading new one• error message "Notice: unserialize() [function.unserialize]: Error at offset 2

of 131 bytes in variable_initialize() (line 943 of /home/kalani/public_html/beta-kalani.com/includes/bootstrap.inc)." - research error - no solution - restore old db and start again, • contact hostgator re. php globals – they had to turn on• reverse db, clear caches, run update.php, re-upload db with paths reset, • install variablecheck module (update.php, clear caches) and use to address

variables error - success!, finish removing "kalani6" from paths in db and upload,

4. Process b. Design and developmentiii. Upgrade from 6 to 7On localhost:1.[T] upgrade all modules to most recent d6 versions2.[T] turn off modules3.[T] upgrade core from 6 to 74.[T] upgrade modules• troubleshoot xml sitemap upgrade errors• search and replace "/drupal/sites/default" with "/kalani6/sites/default"

on db and reload• update views - add fields which haven't imported with the upgrade,

adjust filters - press and events views• images not showing up in press view - review D7 image handling

1.[T] review pages, menu by menu, for issues after upgrade

iv. Design and development 1.[PO] redo architecture per marketing coordinator, Drew2.[T] install Omega and create sub theme3.[T] review Omega functions4.[T] download and install modules on local site, 5.[PO] site description document • decide to use design mockup and existing site as site description document.

Maybe not the best decision, but writing those documents is just not my thing.

1.[DA] update site architecture doc2.[T] remove migrate module3.[T] install node sym links (to create duplicate menu items with different page aliases)

4. Process b. Design and development

iv. Design and development (cont.)9.[DA] design secondary pages, using graphic designer, Jai's home page design10.[DA] research how to turn Jai's design into a mobile version11.[T] add content from Cameron, content writer's, docs12.[DA] work out path strategy - path auto still has issues - http://t.co/Se8taFWp, so set paths to be only 2 menu levels deep - in the end, we just used page titles as paths instead of menu based paths 13.[DA] [T] adjust blog categories per Cameron - used Term Merge module14.[T] create glossary content type and view (using Drupal's default glossary view, and sorting alphabetically)

4. Process b. Design and development

iv. Design and development (cont.)15.[T] set up delta/contexts (templates) for local and distant homepages, 16.[T] install and configure ip reading (ip geolocation and smart ip) modules – to serve local or distance home page - register for key and input, 17.[T] push work to remote site

• major issues - Administration menu bar disappeared, Omega sub theme stopped working, links to images stopped working, seems that permissions for images changed so that going directly to image in url gives a Forbidden, research "Forbidden" message - server issue? - check apache log - apache is denying drupal access to many files

• apache error “[client ::1] client denied by server configuration:... “ returned after updating to OS 10.7.4.

• Fixed by changing the “Allow from 127.0.0.1” I added to the sites/.htaccess file to resolve the issue the first time, to “Allow from localhost”.

15.[T] convo with Pathauto creator re. menu paths for path auto - install DEV version, and set menu path

4. Process b. Design and development

iv. Design and development (cont.)19.[T] theme headers and home page • home page slideshow: • taxonomy to tag content for home page• add block to home page, • add 2 dummy slides, configure fade, enable and test controls to see what can be rethemed to create numbers at

bottom of images, • add "Slideshow Order" field to Workshop content type; add sorting via this field to Featured Programs

(slideshow) view, • trying out video slideshow extras – don’t use• configure pagers

• install exclude node title module to remove home page title,19.[T] research mac not opening .gz (site back up files)• attempt to use Unarchiver (install and test) - end up changing backup and migrate settings to

".zip" instead of .gz 19.[T] Recent posts block - how to deal with images - review how they are added and options for displaying inline images smaller20.[T] setting up Upcoming Workshops - troubleshooting Views paths not working - find workaround; update Workshop path aliases

4. Process b. Design and development

iv. Design and development (cont.)23.[T] create custom date format and setting up grouping of Upcoming Workshops view

• *after making a custom date format (admin/config/regional/date-time/formats/add – it’s easy via http://www.php.net/manual/en/function.date.php!), don't forget to add it to your system at admin/config/regional/date-time

23.[T] home page quotations: views-block and content type 24.[T] menu: client wanted exact functionality - PHP guy had already built a module to do it. I did some basic research re. doing what client wanted with menu views; menu minipanels and om maximenus - both White Screened the site , though the white-screening proved to be the result of a php/server error; not the result of either of the modules - tried Suckerfish menu - same as Nice Menus - tried Context - sort of getting there - back to Nice Menus and jquery rollovers, review jquery options - left to finish rest of site 25.[T] left sidebar features: create taxonomy tags and view, create image crop/resize dimensions and functions (at admin/config/media/image-styles), add Sidebar Tall fields to content types

4. Process b. Design and development

iv. Design and development (cont.)27.[T] Workshop pages - context? Go with simple cck blocks - wsod upon enabling • increase php limit in php.ini to 192mb, uninstall d6 modules (dormant modules)- getting lots of

errors, unzip d6 cck modules, uninstall others, check error logs, create my.cnf file and up max packet size - doesn't fix - google, attempt to install coder module and address dead cck modules, thinking they might be reason - cannot install coder - google - uninstall Quotations module - allows me to install cck blocks module, but stii cannot install panels - google, http://bogdan.org.ua/2008/12/25/how-to-fix-mysql-server-has-gone-away-error-2006.html

• drupal 7 wsod upon enabling module, removing modules from sites/all/modules and running update.php brings site back – CREATED my.cnf file in MAMP/conf/my.cnf. Set permissions to read only (otherwise MAMP will ignore it), add “[mysqld] max_allowed_packet = 128M”. Increase until error goes away. Can also try adding “wait_timeout = 600” and increasing until error goes away, if you need.• Changing parameters in my.cnf file - quit Mamp, instead of just stopping/restarting servers - file not

being read because permissions allow "everyone" to write to it - change permissions - re-enable modules - problem solved

• set up sidebar blocks for workshop pages - enable cck blocks, adjust workshop fields, add pic field, adjust displays to move fields to sidebar blocks, add blocks and configure - facilitator fields need to be grouped AND editor must be allowed to add several facilitators to a workshop - install field collection module, set up field collections and blocks for left sidebars of workshops,

• create page-room-teaser tpl file to add Learn More link to rooms' grid• use "Integer" field type in room field collection, so I can add $ prefix

4. Process b. Design and development

iv. Design and development (cont.)28.[T] set up Weekly Calendar view- "Calendar plugin is missing" - need to set up specialized date fields for D7- add specialized field to Event content type and test view, add filters,- block working on non-templated view, but filter is not; filter working on templated view but block is not -29.[T] theme workshops pages, add facilitator names to main page area - cannot parse out names from facilitator field collection -

• research, find module patch & apply- adjust field display to show only facilitator names, finish less framework setup, theme workshops page,

28.[T] theme home page - site is squished in IE - research - adjust settings from "Narrow" to "Normal", set up Footer map and theme, 29.[T] footer menu: try a variety of things, but none look good nor allow for easy theming - menu mini-panels, footer site map, Site Map, - settle on footer map module30.[DA] [T] sketched out plan for Accommodations page as it relates to Workshop pricing grid, looked at Relations and node reference (references for D7) modules, create list of fields for Room content type, 31.[T] create Room content type, fields and field display, 32.[DA] [T] add room reference field to Workshop and configure, look at existing workshops to see what kind of options they need,

4. Process b. Design and development

iv. Design and development (cont.)35.[T] adjust fields for Workshop and display of fields - create field collection for Rooms and pricing, create template file and adjust for teaser view of Room content type, theme,

36.[DA] [T] design and theme Workshop Workshop Fees section, adjust template file and css, change text on Read More link, • per Marketing Coordinator, add Double/Single Occupancy and pre/post table comments and style,

35.[T] make rooms and theme

36.[T] grid layout for Rooms on Workshops' pages: field collection, node reference

37.[DA] [T] create and design workshops listings page

4. Process b. Design and development

iv. Design and development (cont.)40.[T] Weekly Schedule - how to create it? Create Class content type, with default fields and "Cancellations and Changes" fields to overwrite default fields, if they are present•Class content type: add date type• max timeout error on repeating date field - repeating dates still buggy in D7• look at using Google calendar, but client wants class schedule to look like site -

doesn't like look of Google calendar• research contextual filters• more timeout errors• try date repeat instance module but it breaks site• try to add popups, but wonky - cannot access controls with Rubik theme and

admin menu for popups throws errors - abandon•theme Weekly calendar

4. Process b. Design and development

iv. Design and development (cont.)41.[DA] [T] organize Resource Centre (blog), following structure of another popular wellness retreat’s resource centre section• create view that uses taxonomy, not content • design and theme section home page, sub-section home pages and blog

post pages41.[T] research ways to import/export content only -node export module is buggy; could only get it to export/import one node at a time - *someone suggested RSS feeds, but noted that they are not simple to set up42.[T] theme pager for resource centre (blog) pages 43.[T] checking user permissions for editors - * did I remake or did they come over with import? (they came over)44.[DA] [T] design and theme resource centre pages45.[T] set up context for resource centre

4. Process b. Design and development

iv. Design and development (cont.)47.[T] SEO modules: Seo Compliance Checker, SEO Tools andSEO checklist; add AddThis code to a block and add to pages (way faster than using AddThis module); 48.[T] install Boost to help with site speed/Weekly calendar issues 49.[T] install Path Redirect Import module to help bring over all paths from old site to new, grab csv files from live site for path redirects and url aliases - compare paths to new site, adjust new site's menu system and paths to architecture-v4 document 50.[T] review all pages and notate path issues on spreadsheet51.[T] review url aliases and paths and map to new site via spreadsheet, test import ability - it works!52.[DA] [T] create Access Denied page and add login block to page, remove Add This links on Page not Found and Access Denied pages,

4. Process b. Design and development

iv. Design and development (cont.)53.[T] check rest of wysiwig styles and adjust,54.theme accommodations and rooms pages 55.[T] update Reservation form with encrypted fields, add encrypted credit card fields to Application form and theme, set up ssl certificate per Hostgator (we got it free with business acct; otherwise, you might have to pay), 56.[T] create contexts to put sidebar menus on different sections 57.[DA] [[T] review Workshop forms, adjust and add descriptions, make field groupings collapsible, to reduce clutter/aid usability, 58.[T] install secure pages and apply core patches to support secure pages - backup site beforehand - backup and migrate not working - research error - update back up and migrate to most recent version, works - back up site - getting redirect errors - contact hostgator,

4. Process b. Design and development

iv. Design and development (cont.)59.[T] test reservation and volunteer application forms, down/upload volunteer forms to beta-kalani.com60.[T] troubleshooting path auto issues to no avail 61.[T] adjust Workshops' rooms grid for IE62.[T] remove legacy (no longer in use) pricing fields from Workshops' admin pages63.[T] issue with php globals and inability to run update.php - contact hostgator - they fix64.[T] turn off management and navigation blocks for editors,65.[DA] [[T] design sidebar menus: add contexts for each section• design and theme sidebar menus• Adjust background image for charitable programming section which uses both one

menu and two menus in places,

4. Process b. Design and development

iv. Design and development (cont.)67.[DA] [[T] adjust colours and size of leaf background on sidebar menus, 68.research navigation best practices, • make top 3 nav items clickable, • add Contact and Reservations to top header, • sit with Jim as he navigates site and make notes,• [DA] [T] go through top menu and add pages, • fix broken links and • make names of pages consistent with menu items,

67.[T] review site in IE - menu adjustments for IE, theme Contact/Reservations in header,68.[T] adding menus to individual blog pages

• detangle conflicts between community section and resource center contexts' blocks

4. Process b. Design and development

5. Highlighted modules and other tools

6. Workshop Content type

7. Glossary[T] Technical[DA] Design and architecture[PO] Project organization