UNDERSTANDING WEBSITE DEVELOPMENT
(EVEN WHEN IT IS NOT YOUR RESPONSIBILITY)
Eric Sembrat
Advanced Computing Services (ACS)...
GOALS FOR TODAY
(AND A SHORT INTRODUCTION)
Kennesaw State University - Advanced Computing Services
Thursday, April 26, 12
OUR GOAL
What will should everyone get out of this presentation?
Understanding what makes a good
website.
Detailing what a...
WHO AM I?
Eric Sembrat
Drupal Lead Developer at
Kennesaw State University
Point-of-contact for BCoE Site
Redesign (2011)
B...
WHAT MAKES A GOOD WEBSITE?
Kennesaw State University - Advanced Computing Services
Thursday, April 26, 12
WEB DESIGN 101
It’s more than just content.
Web design is composed of three main
pillars:
Accessibility (can your users ac...
WEB DESIGN 101
It’s more than just content.
Style takes a few forms across a website:
The actual theme itself (colors,
bac...
WEB DESIGN 101
It’s more than just content.
Accessibility answers the question:
“Can users actually find content on my
web...
WEB DESIGN 101
It’s more than just content.
Content concerns itself with the actual
meat-and-gravy of your website.
Pages ...
A BAD EXAMPLE
An example of how to give your users a headache.
Kennesaw State University - Advanced Computing Services
Thu...
WEB DESIGN 101
Bright colors hurt eyes.
What do you think makes a bad website?
Bad content?
Bad layout?
Mix-matched fonts?...
A GOOD EXAMPLE
An example of how to give your users a pleasant experience.
Kennesaw State University - Advanced Computing ...
WEB DESIGN 101
What makes classy content?
What do you think makes a good
website?
Lots of images?
Stylish fonts?
Good navi...
WEB DESIGN 101
Bridge into CMS.
We’ll go more in detail into each of these
categories in a few minutes.
But for now, we’ll...
WHAT’S A CMS GOOD FOR,
ANYWAYS?
Kennesaw State University - Advanced Computing Services
Thursday, April 26, 12
ALL CONTENT, ALL DAY.
CMS - Taking theming out of your hands!
A CMS allows you to worry exclusively
about content and not ...
WEB DESIGN 101
How look and feel is handled by Drupal.
Kennesaw State University - Advanced Computing Services
Thursday, A...
ALL CONTENT, ALL DAY.
CMS - Taking theming out of your hands!
A CMS takes Theming (and parts of
Accessibility) out of your...
MAXIMIZING WHAT DRUPAL CAN
DO FOR YOU.
Kennesaw State University - Advanced Computing Services
Thursday, April 26, 12
ALL CONTENT, ALL DAY.
Content Editing like a pro.
Good practices for content editing:
Use the built-in text-editing
functi...
COPYING FROM WORD
Troubles with Word to Drupal? You’re not alone.
From previous experience, copying from
Microsoft Word ca...
COPYING FROM WORD
A solution to keep you sane.
Solution - copy the text only.
Within the editor, there is a button for
cop...
USE HEADERS
Why go against a uniform look?
Drupal has a feature to use Headers for
segmenting and separating content.
Use ...
DESIGNING MENUS
Creating helpful menus.
Your menu items should provide an
appropriate outline of all pages on your
website...
DESIGNING MENUS
Creating helpful menus.
Overwhelmed by menus?
Sometimes, it is easier to sit down with a
blank piece of pa...
MENUS - A GOOD EXAMPLE.
Kennesaw State University front page.
Kennesaw State University - Advanced Computing Services
Thur...
MENUS - A GOOD EXAMPLE.
Georgia Tech front page.
Kennesaw State University - Advanced Computing Services
Thursday, April 2...
ALL ABOUT TEXT DOCS.
DOC versus PDF, who wins?
For text documents, the following
metric should be used to determine how
to...
ALL ABOUT TEXT DOCS.
PDF is victorious.
PDFs are the preferred choice. Why?
Accessibility.
Record the amount of time it ta...
ALL ABOUT TEXT DOCS.
PDF is victorious.
PDF reigns victorious for accessibility:
Macintosh, Windows, and Linux have
built-...
COMMON ISSUES
Kennesaw State University - Advanced Computing Services
Thursday, April 26, 12
CUSTOM DEVELOPMENT
There’s a department for that!
Kennesaw State University - Advanced Computing Services
Custom content a...
CUSTOM DEVELOPMENT
There’s a department for that!
Kennesaw State University - Advanced Computing Services
You should not b...
THE LIST OF ‘DO NOTS’
Headers - use what Drupal gives you.
Kennesaw State University - Advanced Computing Services
Making ...
THE LIST OF ‘DO NOTS’
Colors for text.
Kennesaw State University - Advanced Computing Services
Coloring text is not recomm...
THE LIST OF ‘DO NOTS’
Don’t worry about page margins or the layout.
Kennesaw State University - Advanced Computing Service...
THE LIST OF ‘DO NOTS’
Pasting can be your best friend, or your worst enemy.
Kennesaw State University - Advanced Computing...
THE LIST OF ‘DO NOTS’
Filenames can be your biggest enemy.
Kennesaw State University - Advanced Computing Services
Files u...
CLOSING REMARKS
Kennesaw State University - Advanced Computing Services
Thursday, April 26, 12
IN SUMMATION...
Working with Drupal can be easy, if you go about it the right way.
With the transition from Dreamweaver
to...
SUPPORT GROUP
We’re here for you!
If you need help, there are a
number of sources you can
go to:
Ask our department!
Atten...
DEMOS?
Anyone have any specific requests for a quick demo?
Drupal can be cumbersome and a bit daunting to learn the intric...
QUESTIONS? COMMENTS?
Kennesaw State University - Advanced Computing Services
Thursday, April 26, 12
Upcoming SlideShare
Loading in …5
×

Drupal 6/7: Responsible Drupal Development

3,722 views

Published on

A primer on how to build intelligently in Drupal without getting lost in one of Drupals' many pitfalls.

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

  • Be the first to like this

No Downloads
Views
Total views
3,722
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal 6/7: Responsible Drupal Development

  1. 1. UNDERSTANDING WEBSITE DEVELOPMENT (EVEN WHEN IT IS NOT YOUR RESPONSIBILITY) Eric Sembrat Advanced Computing Services (ACS) Kennesaw State University March 2012 Thursday, April 26, 12
  2. 2. GOALS FOR TODAY (AND A SHORT INTRODUCTION) Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  3. 3. OUR GOAL What 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! Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  4. 4. 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? Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  5. 5. WHAT MAKES A GOOD WEBSITE? Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  6. 6. WEB DESIGN 101 It’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?) Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  7. 7. WEB DESIGN 101 It’s more than just 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.). Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  8. 8. WEB DESIGN 101 It’s more than just content. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  9. 9. WEB DESIGN 101 It’s more than just content. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  10. 10. A BAD EXAMPLE An example of how to give your users a headache. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  11. 11. WEB DESIGN 101 Bright colors hurt eyes. What do you think makes a bad website? Bad content? Bad layout? Mix-matched fonts? Background colors? Animated icons? Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  12. 12. A GOOD EXAMPLE An example of how to give your users a pleasant experience. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  13. 13. WEB DESIGN 101 What makes classy content? What do you think makes a good website? Lots of images? Stylish fonts? Good navigation? Flashy content? Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  14. 14. WEB DESIGN 101 Bridge 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  15. 15. WHAT’S A CMS GOOD FOR, ANYWAYS? Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  16. 16. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  17. 17. WEB DESIGN 101 How look and feel is handled by Drupal. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  18. 18. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  19. 19. MAXIMIZING WHAT DRUPAL CAN DO FOR YOU. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  20. 20. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  21. 21. COPYING FROM WORD Troubles 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 Thursday, April 26, 12
  22. 22. COPYING FROM WORD A 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  23. 23. USE HEADERS Why 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  24. 24. DESIGNING MENUS Creating 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  25. 25. DESIGNING MENUS Creating 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  26. 26. MENUS - A GOOD EXAMPLE. Kennesaw State University front page. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  27. 27. MENUS - A GOOD EXAMPLE. Georgia Tech front page. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  28. 28. 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 Thursday, April 26, 12
  29. 29. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  30. 30. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  31. 31. COMMON ISSUES Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  32. 32. CUSTOM DEVELOPMENT There’s a department for that! Kennesaw State University - Advanced Computing Services 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 Thursday, April 26, 12
  33. 33. CUSTOM DEVELOPMENT There’s a department for that! Kennesaw State University - Advanced Computing Services 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. Thursday, April 26, 12
  34. 34. THE LIST OF ‘DO NOTS’ Headers - use what Drupal gives you. Kennesaw State University - Advanced Computing Services 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. Thursday, April 26, 12
  35. 35. THE LIST OF ‘DO NOTS’ Colors for text. Kennesaw State University - Advanced Computing Services 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. Thursday, April 26, 12
  36. 36. THE LIST OF ‘DO NOTS’ Don’t worry about page margins or the layout. Kennesaw State University - Advanced Computing Services 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. Thursday, April 26, 12
  37. 37. THE LIST OF ‘DO NOTS’ Pasting can be your best friend, or your worst enemy. Kennesaw State University - Advanced Computing Services 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. Thursday, April 26, 12
  38. 38. THE LIST OF ‘DO NOTS’ Filenames can be your biggest enemy. Kennesaw State University - Advanced Computing Services 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. Thursday, April 26, 12
  39. 39. CLOSING REMARKS Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  40. 40. 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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  41. 41. SUPPORT GROUP We’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. Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  42. 42. 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! Kennesaw State University - Advanced Computing Services Thursday, April 26, 12
  43. 43. QUESTIONS? COMMENTS? Kennesaw State University - Advanced Computing Services Thursday, April 26, 12

×