Sample Page - Standardizing Content Input With Drupal

By:

on

February 15, 2008

Since we started developing Content Management Systems (CMS) in 2000 we have wanted to give our clients control of their content. Since that time we have found that most organizations do not have very fancy formatting requirements and just need a few key systems that people can use which allow them to mark up their documents in a way that makes it easier for everyone to read.

The standards have changed in the last eight years, but the best practices today use style sheets and semantic html to attach meaning to the markup. This allows both search engines and other screen readers to evaluate what items are more or less important. Headers are the most important titles in your page, with H1 being the most important and H6 being the least. Using headers to increase the size of the fonts that you want to use is therefore a problem as it blurs the meaning.

We generally use the WYSIWYG (What You See Is What You Get) editor TinyMCE to provide an easy way for our clients to markup their text. With this we can limit wich tools are available and so strongly encourage our clients to use semantic markup when designing their sites. By default we limit the number of options that our clients have so that it provides them the best results.

 

Sample TinyMCE Buttons

 

It is useful to have a style guide like this that allows us to see the range of formatting options that we recommend for our clients..

Heading 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In facilisis, sapien et fringilla pulvinar, mauris sapien fringilla dui, at egestas risus ligula at lacus. Etiam id justo a nisl venenatis pharetra. Maecenas ullamcorper, libero et hendrerit aliquet, mi est volutpat
augue, in blandit risus purus et dolor. In leo libero, laoreet ut, convallis non, imperdiet vitae, quam. Phasellus libero. Nulla facilisi. Vivamus dapibus aliquet velit. Donec elit risus, dictum vitae, pulvinar sit amet, vehicula in, augue. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Phasellus ultricies sagittis nunc. Nunc arcu arcu, placerat eget, ultrices et, commodo ac, nulla. Vestibulum feugiat aliquet mi. Ut vel enim a ante aliquet luctus.

Heading 2

Maecenas sit amet erat quis mauris convallis facilisis. In at lorem. Ut leo. Etiam massa. Praesent interdum, lectus quis pretium ultricies, risus metus condimentum tortor, sit amet consectetuer dolor arcu vel dolor. Quisque sagittis placerat lacus. Morbi ultricies, purus at consequat sollicitudin, sem risus venenatis erat, et suscipit enim dolor vel velit. Integer at dolor. Nullam ornare lorem eget magna. Cras dui. Donec quam purus, tempor eu, condimentum a, volutpat a, magna. Cras porta commodo mi. Donec auctor diam commodo pede.

Heading 3

Vivamus vel velit. Vivamus mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi at purus. Integer at nisi. Vestibulum nec diam at massa fermentum lacinia. Duis at mauris. Suspendisse potenti. Vestibulum turpis dolor, porttitor et, imperdiet ac, eleifend quis, turpis. Cras metus nisi, rhoncus non, accumsan quis, fringilla id, ipsum. Maecenas ultrices consequat metus. Sed neque. Vestibulum sed sem. Nulla accumsan mauris id libero.
Suspendisse placerat consequat elit. Sed aliquet odio quis urna. Vestibulum sit amet sem. In hac habitasse platea dictumst. Praesent congue luctus elit.

Heading 4

Etiam posuere, eros a vulputate semper, lacus lectus rutrum sem, quis vehicula nulla nibh ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur mattis urna varius purus. Ut placerat tempor ligula. Praesent vitae risus. Nunc sapien dolor, sollicitudin in, porta a, imperdiet in, nisl. Aliquam porta nulla. Aenean at odio. Integer nunc. Phasellus accumsan. Cras et velit. Curabitur feugiat nulla in erat. Nulla molestie massa quis lectus. Etiam pede justo, scelerisque vel, nonummy vel, sollicitudin sit amet, turpis.

Phasellus massa. Aliquam interdum, nisi ut condimentum ultricies, orci arcu laoreet lorem, sed tincidunt lacus risus tempor arcu. Nulla felis. Sed ligula. Aliquam ac magna non sapien sodales feugiat. Praesent scelerisque pretium nisl. Fusce vulputate, risus porttitor elementum blandit, massa arcu iaculis odio, molestie pretium felis urna sed sapien. Cras odio arcu, lacinia ac, venenatis et, vulputate ut, mauris. Pellentesque vitae mi. Quisque felis tellus, posuere eget, tristique ut, sollicitudin laoreet, mauris. Nulla elit dolor, venenatis et, varius at, ultricies ut, leo. Cras ut odio.

Heading 5

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam ipsum. Sed gravida. Pellentesque luctus viverra odio. Proin vestibulum justo et dolor. Sed euismod, neque sed ullamcorper porttitor, ante dui semper tortor, in molestie erat urna non ligula. Sed urna. Etiam tempus odio a tellus. Aenean a nibh. Praesent vulputate. Sed fermentum. Proin mauris mi, euismod a, tempor nec, sodales ut, augue. Quisque euismod.

Nulla facilisi. Sed volutpat metus a elit. Vivamus vel est et neque lacinia dictum. Vivamus porttitor cursus elit. Sed id pede. Duis velit. Integer massa dolor, facilisis sed, pharetra eget, suscipit id, massa. Nam elementum. Proin at orci. Nulla venenatis mollis elit. Curabitur
dignissim. Nullam quam. Phasellus mauris est, mattis nec, luctus in, congue non, justo. Sed lorem quam, auctor nec, viverra vitae, congue eget, nunc. Vestibulum leo ipsum, malesuada id, rhoncus sit amet, pretium a, mauris. Etiam a elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst.

Heading 6

Vestibulum dictum velit in ante. Phasellus pellentesque facilisis enim. Pellentesque vulputate dignissim lacus. Ut orci. Nulla accumsan, quam ut ornare mollis, risus elit congue arcu, at iaculis lectus libero eu dolor. Vestibulum ante arcu, mollis ac, condimentum vitae, suscipit nec, erat. Nullam massa sapien, aliquam at, convallis eu, sollicitudin malesuada, nibh. Sed eu sapien non elit pellentesque hendrerit. Nunc ullamcorper est nec pede. Cras mollis condimentum odio. Ut blandit ipsum sed ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh nibh, facilisis et, tincidunt sed, malesuada vulputate, sem. Ut fermentum convallis felis. Nunc condimentum.

Organization

Street Address

City, Province, Postal Code

Preformatted Text ...
Goes Here

Unordered Lists

Ordered Lists

  1. Vivamus sed lectus a massa ornare condimentum.
  2. Fusce in sapien nec pede porttitor ultrices.
    1. Quisque consectetuer ultricies sapien.
    2. Proin tristique quam quis nibh.
    3. Aliquam feugiat interdum odio.
  3. Fusce lacinia elementum felis.
  4. Donec quis neque sit amet justo imperdiet ornare.
Header 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Header 3

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

  1. Sed feugiat diam eu odio.
  2. Ut non nisi quis dolor feugiat scelerisque.
    1. Sed vel est eget est faucibus tempor.
  3. Donec fringilla hendrerit dui.

Header 4

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Header 5

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

 

Header 6

Lorem ipsum dolor sit amet.

  • Quisque interdum blandit risus.
  • Curabitur a mi sit amet augue sodales consequat.
    • Ut ornare condimentum tortor.
    • Donec commodo odio eget nunc.
  • Aenean pellentesque auctor metus.
  • Aliquam a enim sit amet massa iaculis pellentesque.
  • Nulla luctus nisl sit amet enim imperdiet mattis.
  • Aenean laoreet eros eu urna.

 

Organization

Street Address

City, Province, Postal Code

Preformatted Text
...
Goes Here

About The Author

Mike Gifford is the founder of OpenConcept Consulting Inc, which he started in 1999. Since then, he has been particularly active in developing and extending open source content management systems to allow people to get closer to their content. Before starting OpenConcept, Mike had worked for a number of national NGOs including Oxfam Canada and Friends of the Earth.