The Fastest Way to a Drupal Site: Think it, Plan it, Build it.

Transcription

1 The Fastest Way to a Drupal Site: Think it, Plan it, Build it. Introduction Whether you ve been building static web pages, managing hosted blogs, or are new to web development altogether building a dynamic, content managed website may seem daunting. With literally thousands of modules to choose from, and an expandable architecture, an open source framework like Drupal can be intimidating. Fortunately, there is a solution that can provide all of the benefits of a content management system, without the steep learning curve you might expect. If you re interested in building sites that take advantage of cutting-edge web 2.0 features, or have been wary of diving into an open source CMS, this white paper is for you. With illustrated diagrams and easy to follow instructions, this white paper will take you through set-up, site administration, and even content organization. Using Drupal Gardens, the do it yourself online tool for building and theming Drupal sites, this white paper will have you launching your next web project today. Note: The Drupal Gardens export is 100% un-hacked Drupal. No kittens were killed during the making of your site. 1 1 Sites exported from Drupal Gardens mirror the state of the Drupal Gardens code base at the time of export. Drupal Gardens may include patched or developer versions of modules and other code that is still under consideration for, but not yet part of, the official releases downloaded from drupal.org. Exported Drupal Gardens sites are compatible with Drupal 7 core and modules and fully upgradeable. MSKU#:

2 2 The Fastest Way to a Drupal Site Think it You need to know what your site should do before you can build it quickly and efficiently. I like to start with a list of ideas and needs that I then turn into wireframes simple graphic mockups of the main pages of my site. Seeing the pages laid out helps me keep track of the details. However you do it, you ll need to list all of the pages of your site and what you need on them. Group them into main and subpages to get a feeling for what your site navigation will need to look like. For this white paper, I planned a site for an ice cream parlor using the Drupal Gardens Product site template. This template activates and configures a bunch of modules, content types and blocks for me. I only used a small selection of the functionality available in Drupal Gardens and only a few of the block regions available in the standard Drupal Gardens theme layout: Plan it Apply the following formula to every element on every page of your site: Ask yourself the following questions: Source Interaction Display Source: Where does this come from? Some combination of user roles, permissions and module configuration usually answers these questions. A site administrator?

3 3 The Fastest Way to a Drupal Site A contributor? An automated feed A module Site visitors? Interaction: Who interacts with this and how? These questions are very similar to the previous set (source) and can usually also be answered with a different combination of user roles, permissions and module configuration. Who can see it? Drupal Gardens FAQ How is Drupal Gardens Drupal? Or open source? Drupal Gardens is a new kind of product: OSSaaS (Open Source Software as a Service) built on Drupal. Along the way, Acquia has put thousands of hours of thought and work into the Drupal core and many contributed modules. Who can change it? Who can add to it? Display: Where and how is this displayed? The answers to these questions lie in the configuration of blocks, selection and presentation of content in views, menu- and module configuration, and so on. Just to be clear, by display I mean the functional aspects of your site like pages and block regions, not 200 pixels wide and blue setting the look and appearance of your site is called theming in Drupal. Where on the page does this appear Is it in a block? In which region and on which pages Is it a link? Is it a menu item? Is it a teaser or a full node? With a bit of practice and experience building sites, this formula should become second nature and make you feel confident you are covering all the relevant aspects of each page element on your site. Do I own my data? Yes. Export your Drupal Gardens site at any time and run it on any Drupal-compatible hosting. The export is 100% unhacked Drupal. No kittens were killed during the making of your site. What modules are available in Drupal Gardens? Create a site today at and go to the Modules page of your new site to find out! What if I want to add more modules to my site? Export it. You can then add compatible modules and get development help from 1000s of Drupal service providers around the world. Build it: From wireframe to site Let s look at my wireframes and run through the practical application of Source- Interaction-Display on part of my overall site plan.

4 4 The Fastest Way to a Drupal Site As you go through the Source Interaction Display process on your own sites, you ll start hitting more and more elements you ve already covered. This should give you some peace of mind that you are covering all the bases. Here s the plan for my front page: This shows my site s sub-pages and how my main menu will work:

5 5 The Fastest Way to a Drupal Site Two important choices The really important part of the products page (see below) is the list of flavors that s what we really want to know about an ice cream place, right? It is the result of two choices you need to understand to really be able to leverage Drupal s power and flexibility: When should I make new content types and why? When should I make static versus dynamic pages? Static and Dynamic Understanding what static and dynamic pages (and blocks) are and when you should use each can help you plan and run your site. Static pages and blocks - There are a few pages or blocks on most sites that don t change much like the welcome text on my ice cream parlor s front page. The Drupal Basic page content type is perfect for pages like this. Add menu links to the main or sub-menus where visitors should find them and you re good to go. A custom block is a great way to present short, important information like the store hours block on my site. Dynamic pages and blocks Building and maintaining complex pages by hand is laborious. You should let Drupal assemble them for you. As your site grows and changes, those pages change for you automatically. Some of these dynamic pages and blocks come with Drupal and its modules: The Blog module lists all blog posts, newest first. If you have two blog authors, there ll also be two other pages, each with a single author s entries. Drupal can display a page of all site content tagged with any given taxonomy term. Blocks like Recent [comments/new members/blog posts/gallery images] and Who s new. Most of us can probably use a couple other dynamic pages that aren t built in to Drupal. That s where modules like Views and Simple Views come in. They give you a variety of powerful options to make the rules called views to build dynamic pages and blocks.

6 6 The Fastest Way to a Drupal Site Making content types work for you When should you create and use new content types? I use two strategies when planning a site: organization and access. The organization strategy Making content types that fit your data helps in collecting, organizing and presenting it. You could use a simple content type like Basic page which is only a title, and a body text for everything on your site, but it s like throwing a bunch of colored toy blocks into an open box: The information might all be there, but it s hard to sort the products from the staff members from anything else. If you tag your content, you can at least leverage Drupal to show things tagged product on one page, but it won t be sortable. One product might be described one way and another completely differently. You ll lose sales if it s difficult for visitors to sort and compare your products. Custom-tailoring (new) content types by adding numerical, text or other fields to them means no matter who adds new products on your site, it will be done in a standardized format. This also lets you take advantage of views to make dynamic, sortable products pages, while still only having to enter each product a single time. Example: The Ice cream custom content type on my site includes a name and text body plus fields like: short description (text field), calories per serving (numerical field); photo (image field); popularity; ingredients list; allergens list; etc. The access strategy Limit content contributors access to only creating and changing content of one or more specific content types. Site administrators retain full access to the back end, but restrict non-technical users, improving security and reducing administrative headaches. Example: Three groups of users need to add and change content on a school website: the school administration, the PTA, and the after school program. Make a user role for each

7 7 The Fastest Way to a Drupal Site Make two simple content types (title and body text only), PTA page and After School page, along with anything else you need. PTA and After School are only assigned permissions to create, edit and delete pages of their own content types. School administration users are permitted to create, edit and delete all content and blocks on the site. Here are two important sub-pages, the contact page and my products page:

8 8 The Fastest Way to a Drupal Site Source-Interaction-Display - element by element Theming Drupal Planning every element of every page pays off in reduced build and configuration time. Due to space constraints, I am not able to do that here. Below are some highlights to give you the idea: Items marked with an asterisk (*) are included in the Drupal Gardens template I chose for the site. This white paper does not cover developing the look and feel of your site, known as theming in Drupal (there is an article in this issue, PSD To Drupal 7 Theme that covers some Drupal theming basics). Site name*, Site slogan* SOURCE: Site administrator. Set via Configuration > Site information INTERACTION/DISPLAY: Visible in the header region by default. It would take a lot more space that I have here to even begin to cover all of the possibilities in this rapidly evolving area from in-browser WYSIWYG tools like the Drupal Gardens ThemeBuilder to templating Logo* SOURCE/DISPLAY: Site administrator. Actually a theme element, set using the Drupal Gardens ThemeBuilder (via Appearance > Brand > Logo). Set your site s favicon while you are there. Menus (main*, footer, products page sub-menu) SOURCE: Site administrator. Add main menu links while creating the various pages. Add links to sub-pages as children of their respective parent menu items. Create and configure custom Footer and Product page menus via Structure > Menus > + Add menu. languages, tools, modules, base themes, theme families and systems. Remember that we use a content management system like Drupal to separate theming from functionality. Choose a solid, flexible base theme; make your site work right (access, dynamic pages, links, etc.), then make it pretty. INTERACTION: Menu items that link to parts of your site that a given user does not have permission to see will not be shown to that user. DISPLAY: Menus are blocks in Drupal. Set their display regions and pages via Structure > Blocks. Footer menu block placed in the Footer first region, Product page menu block placed in the Sidebar A region and displayed only on the Products page via Structure > Blocks. Main menu displayed in the Navigation region by default. Rotating banner* SOURCE: Site administrator. The rotating banners in Drupal Gardens are blocks. Create and configure via Structure > Blocks. INTERACTION: Images can link to any URL. DISPLAY: Displayed by default in the banner block on the front page only.

9 9 The Fastest Way to a Drupal Site Custom blocks (Contact page message, Flavor of the month*, Store hours*, Copyright & thanks) SOURCE: Site administrator. Create custom blocks via Structure > Blocks. INTERACTION: Block texts include links to relevant pages. DISPLAY: Flavor of the month block placed in Sidebar A, Store hours block in Sidebar B, Copyright & thanks block in the Copyright region, displayed on all pages via Structure > Blocks. The Got something to tell us? block is displayed in the Highlighted Content region on the Contact page only. Module generated blocks* Twitter feed* SOURCE: Aggregator module. Site administrators configure the Twitter feed and Overheard on Twitter block via Configuration > Feed aggregator. Get the feed URLs from your account page at Mailing list* SOURCE: Mailing List module. Site administrators can create lists and set subscription confirmation messages via Structure > Mailing lists. Mailing list* INTERACTION: All site visitors can enter their name and an address. Site administrators can see and download all submissions for use elsewhere. DISPLAY: Set display at Structure > Blocks. Front page welcome message* SOURCE: Basic page node created by site administrators. INTERACTION: Comments deactivated. Drupal jargon, a microglossary Attribution: sourced in part and inspired by node/ See this white paper s Further reading section for links to more references online. Node - The basic unit of content in Drupal. All nodes are of a given content type (page, blog entry, etc.). All nodes have a title; most have a text body. Block, Region - Pages on your Drupal site are laid out in regions. Blocks (including menus, module output, views or static content) are displayed within those regions. Module - A set of code that enables specific functionality on your site. Most create a set of permissions when activated. Some make new blocks and menu items available when they are activated. DISPLAY: Save this node with the following Publishing options (via the content creation page): Published (visible to site visitors) Promoted to front page (displayed on front page) Sticky at top of lists (no matter what else might appear on the page, this will be displayed at the top). Other Basic page static content on the site includes: Where to buy, Wholesales, About us* & How to find us pages. Users, Permissions, Roles - The combination of roles assigned to a user and the permissions assigned to those rolls determine what a site visitor can see and do on your site. All unregistered site visitors have the anonymous user role. All registered and logged-in users have the authenticated user role and any other roles they ve been assigned.

10 10 The Fastest Way to a Drupal Site Contact form* SOURCE: Site administrator. Add contact categories, admin recipient addresses, and custom auto-reply messages to the contact form via Structure > Contact form. Drupal Gardens adds a Contact menu item to the main menu by default. INTERACTION: The Use the site-wide contact form permission is given by default to all users. Restrict access to the contact form by removing the Use the sitewide contact form permission from one or more roles via People > Permissions > Permissions. DISPLAY: The contact page and menu links to it will not be displayed to users who do not have access to it. Products page flavor list SOURCE: Site administrator. A sorted view of all ice cream flavors showing the teaser display (name, photo, short description) of the Icecream content type. INTERACTION: When visitors click on the name of the flavor, they are taken to its full page. DISPLAY: The view is built to show Icecream nodes as teasers. Site administrators could also expose some of the view s filters, allowing visitors to sort the view based on the exposed filters (name, popularity, dairy content, etc.). Other dynamic pages Staff & Events pages - built like the Products page as a view of a custom content type. The Upcoming event on the front page is a node promoted to the front page, but not sticky at the top of lists. It also appears on the Events page. Blog* - Blog entries, newest first, generated by the Blog module FAQ* - View of FAQ item content. This content type, page and menu link are preconfigured by the Drupal Gardens FAQ feature. Pictures* - Landing page displaying all media galleries. Generated by the Gallery module that drives the Drupal Gardens Media Gallery feature. Each gallery also generates a configurable preview block. Pro tips for the road Here are a couple things I like to remind myself of when I am building a site: Set these before you start creating real production content. Going back and updating content later is a real hassle.

11 11 The Fastest Way to a Drupal Site Author and submission time display - Decide and set for each content type (via Structure > Content types > edit) which ones should display this information (good for blog posts and press releases) and which should not (products, staff biographies, and the like). Comments on content The same goes for which content types site visitors should be allowed to comment on. After activating comments, set the comment permissions (post comments is the critical one) via People > Permissions. Want more than a mailing list? You might want to know more that a name and an address. Make a powerful webform instead to collect s along with multiple choice, free text and other kinds of questions, using the Webform module (the engine behind the Drupal Gardens Forms feature. Links - When you add links to other pages within your site by hand, format the link like this: <a href= /contact >Contact page</a>, Drupal will fill in the rest of your site URL for you! Or just go for it! Think of your Drupal Gardens site it as a living wireframe. Thanks to its site templates, features and ease of repeatability (you can copy and reuse whole sites and themes), Drupal Gardens lets you get away with a little less planning up front and a little more experimentation along the way. Just think Source Interaction Display every time you want to add something new. About Acquia Acquia empowers enterprises with the open-source content-management system Drupal. Co-founded by Drupal s creator in 2007, Acquia helps customers manage their growth and scale their online properties with confidence. Acquia s software, consultation, cloud infrastructure, and services enable companies to realize the full power of Drupal while minimizing risk, as it s done for Examiner.com, Al Jazeera, and over 700 others. See who s using Drupal at and learn more at Further Reading If getting a Drupal Gardens site online has whetted your appetite, here are a few great references on Drupal.org: Understanding Drupal : General concepts - Terminology - Acronyms and expressions used on drupal.org is informative, fun, and will help you communicate more effectively with other Drupalistas: Copyright 2011, Acquia, Inc. Acquia, Inc. 25 Corporate Drive, 4th Floor Burlington, MA USA sales@acquia.com