Drupal 6/7: Responsible Drupal Development

UNDERSTANDING WEBSITE DEVELOPMENT (EVEN WHEN IT IS NOT YOUR RESPONSIBILITY)

Eric SembratAdvanced Computing Services (ACS)

Kennesaw State UniversityMarch 2012

Thursday, April 26, 12

GOALS FOR TODAY(AND A SHORT INTRODUCTION)

Kennesaw State University - Advanced Computing Services

OUR GOALWhat will should everyone get out of this presentation?

Understanding what makes a good website.

Detailing what a content-management-system is good for (and bad for).

Explaining how you can get the most out of your Drupal site.

Answering your questions!

WHO AM I?

Eric Sembrat

Drupal Lead Developer at Kennesaw State University

Point-of-contact for BCoE Site Redesign (2011)

BS in Computer Science - Georgia Tech (2009)

MS in Information Systems - Kennesaw State University (2011)

Who is presenting all this information to you, anyways?

WHAT MAKES A GOOD WEBSITE?

WEB DESIGN 101It’s more than just content.

Web design is composed of three main pillars:

Accessibility (can your users access content?)

Content (can your users use, read, and absorb content?)

Style (can your users appropriately navigate through and to content?)

Style takes a few forms across a website:

The actual theme itself (colors, background images, logos).

The font selected for headings, text, captions, etc.

The usage of images within specific pages.

The look and feel of dynamic elements (such as image galleries, etc.).

Accessibility answers the question: “Can users actually find content on my website?”

Making text readable and selecting appropriate images.

Constructing logical menu hierarchy and ensuring the menus are consistent.

Making sure the theme and your content do not clash.

Content concerns itself with the actual meat-and-gravy of your website.

Pages of content, attachments.

Downloadable documents.

It’s what someone comes to a website to get, which is information.

A BAD EXAMPLE An example of how to give your users a headache.

WEB DESIGN 101Bright colors hurt eyes.

What do you think makes a bad website?

Bad content?

Bad layout?

Mix-matched fonts?

Background colors?

Animated icons?

A GOOD EXAMPLEAn example of how to give your users a pleasant experience.

WEB DESIGN 101What makes classy content?

What do you think makes a good website?

Lots of images?

Stylish fonts?

Good navigation?

Flashy content?

WEB DESIGN 101Bridge into CMS.

We’ll go more in detail into each of these categories in a few minutes.

But for now, we’ll go over what makes a content-management-system (CMS) such as Drupal so helpful when designing websites.

WHAT’S A CMS GOOD FOR, ANYWAYS?

ALL CONTENT, ALL DAY.CMS - Taking theming out of your hands!

A CMS allows you to worry exclusively about content and not about presentation.

When editing pages, you should be concerned solely with what the page says and what information you want to link to.

Almost all of the styling (minus bold/italics/underline) is handled by the CMS.

WEB DESIGN 101How look and feel is handled by Drupal.

ALL CONTENT, ALL DAY.CMS - Taking theming out of your hands!

A CMS takes Theming (and parts of Accessibility) out of your hands.

Your goal then should be to ensure that the content on the site is as user-friendly as possible.

Your secondary goal should be to ensure that the accessibility of the content (menus, navigating between pages, links) are relevant, straight-forward, and helpful.

MAXIMIZING WHAT DRUPAL CAN DO FOR YOU.

ALL CONTENT, ALL DAY.Content Editing like a pro.

Good practices for content editing:

Use the built-in text-editing functionality.

Bold, italics, underline, headings 1-6, bullet points.

Don’t concern yourself with font colors, sizes, specific spacing.

Don’t try to reinvent the wheel.

COPYING FROM WORDTroubles with Word to Drupal? You’re not alone.

From previous experience, copying from Microsoft Word causes more problems than it fixes.

Microsoft Word’s formatting does not mesh well with Drupal.

Word’s formatting is often inconsistent across paragraphs.

This is doubly so when pasting items from Microsoft Excel to Drupal.

Solution?Kennesaw State University - Advanced Computing Services

COPYING FROM WORDA solution to keep you sane.

Solution - copy the text only.

Within the editor, there is a button for copying text only.

Use this to copy text only into your page, then apply formatting from Drupal to get the intended look and feel.

USE HEADERSWhy go against a uniform look?

Drupal has a feature to use Headers for segmenting and separating content.

Use these headers in place of custom fonts or font-sizes, since they are uniform across all pages on your site.

DESIGNING MENUSCreating helpful menus.

Your menu items should provide an appropriate outline of all pages on your website.

Major sections of your site should not be excluded from the menus.

Each item on your menu should have a page with content associated with it.

Your menu should act in the same way that a chapter of a book does.

DESIGNING MENUSCreating helpful menus.

Overwhelmed by menus?

Sometimes, it is easier to sit down with a blank piece of paper (or a Microsoft Word document) and catalogue each area and page on your site.

This can allow you to play around with grouping pages before actually building or assigning the content to menus.

Planning can help your site grow in the long-run.

MENUS - A GOOD EXAMPLE.Kennesaw State University front page.

MENUS - A GOOD EXAMPLE.Georgia Tech front page.

ALL ABOUT TEXT DOCS.DOC versus PDF, who wins?

For text documents, the following metric should be used to determine how to upload your files:

PDF - For documents that do not require someone to type in information at their computer.

Word - For documents that require someone to type in information at their computer.

What should you use?Kennesaw State University - Advanced Computing Services

ALL ABOUT TEXT DOCS.PDF is victorious.

PDFs are the preferred choice. Why? Accessibility.

Record the amount of time it takes a user to open a PDF file versus a Word document.

Do the same for printing a PDF file versus a Word document.

Word documents are slower to open, and some users may not even have Microsoft Office installed.

ALL ABOUT TEXT DOCS.PDF is victorious.

PDF reigns victorious for accessibility:

Macintosh, Windows, and Linux have built-in viewers for PDFs.

Users don’t have to install any software to view PDFs.

Fonts do not change in PDFs depending on the Operating System - a font in a PDF on Windows looks the same on a Mac.

COMMON ISSUES

CUSTOM DEVELOPMENTThere’s a department for that!

Custom content and design can be built by the Advanced Computing Services (formerly ODG):

Custom panels

Video Galleries

Slideshows

Image Galleries

Right-Hand Navigation Boxes

CUSTOM DEVELOPMENTThere’s a department for that!

You should not be trying to build custom content layouts by yourself.

Using tables to create columns of content, for example, is bad.

This causes issues with updating, can misalign text and other elements, and is not a uniform solution.

You can request future development on your site at the ACS website.

THE LIST OF ‘DO NOTS’Headers - use what Drupal gives you.

Making your own custom headers is not recommended in most cases:

Each header you create will be unique/custom per page (and different across all College of Education sites).

Colors may not follow the KSU Style Guide.

You should instead be selecting the headers from Format.

THE LIST OF ‘DO NOTS’Colors for text.

Coloring text is not recommended for almost all cases.

Like in professional emails, text color takes away from the seriousness of the content.

It can also be distracting.

It is non-consistent.

You should be using bold, italics for important information.

THE LIST OF ‘DO NOTS’Don’t worry about page margins or the layout.

For almost all cases (except for special pages such as the College of Education front page), your page is composed of a single left sidebar and a content area.

You should not be using tables or other methods of having page-length text-formatting.

We can develop this for a page if needed, but it is not necessary.

THE LIST OF ‘DO NOTS’Pasting can be your best friend, or your worst enemy.

You should refrain from styling your text from within Microsoft Word for your Drupal page.

Pasting from Microsoft Word to Drupal will bring in styling that is often hard to remove and overrides the Drupal’s theme.

This is bad and can cause major frustration to future editing.

When in doubt, remember to Paste as Plain Text when pasting content.

THE LIST OF ‘DO NOTS’Filenames can be your biggest enemy.

Files uploaded to Drupal with special characters can cause issues for your site and lead to the file being unavailable for your visitors.

Special characters include [space], $, @, &.

Anything that is not alphanumeric or an underscore (_).

Reason?

“Hello World.doc” becomes “Hello%20World.doc” to Drupal.

The file becomes inaccessible.

CLOSING REMARKS

IN SUMMATION...Working with Drupal can be easy, if you go about it the right way.

With the transition from Dreamweaver to Drupal, the role of a site-editor has shifted to maximizing the content and accessibility on your website.

This is a major positive, as it means you no longer have to toy with layouts and worry about accidentally deleting a sidebar.

Your users will thank you.

SUPPORT GROUPWe’re here for you!

If you need help, there are a number of sources you can go to:

Ask our department!

Attend an ITS Drupal Workshop.

Read the ‘Guide for Site Editors’, provided by ITS.

DEMOS?Anyone have any specific requests for a quick demo?

Drupal can be cumbersome and a bit daunting to learn the intricate tasks of site maintenance:

Menu creation.

Page creation.

Webforms.

If you have any questions about using any of these tools, please ask!

QUESTIONS? COMMENTS?

Drupal 6/7: Responsible Drupal Development

Technology

Transcript of Drupal 6/7: Responsible Drupal Development

[Srijan Wednesday Webinar] Mastering Drupal 8 Development with Drupal Console

Best Practices: Drupal Development

The Singapore Drupal Meetup Group - April edition - Drupal and Mobile Development

Introductie Drupal development

Modernize Your Drupal Development

Drupal 8 - Corso frontend development

Lucius Drupal Development Cursus

Drupal Front End Development

Simplifying Drupal Development with Subversion · Simplifying Drupal Development with Subversion Andrew Berry: andrew@abdevelopment.ca ... • Project history ... mv ~/Drupal\ Modules/webform

Drupal 8: frontend development

Drupal Development: Local machine development versus WebEnabled

Intranet Development in Drupal 7

Pro drupal 7 development

Drupal campleuven: Secure Drupal Development

Drupal Web Development - Integrate Your Website to a Drupal Theme

Drupal 8 module development

Drupal Development Services

Drupal 8 configuration development flow

Drupal Module Development

Drupal 7 Development, 3rd...Pro Drupal 7 Development Third Edition Todd Tomlinson John K. VanDyk