Home / Does my site look drupally in this?

Does my site look drupally in this?

No naming and shaming here, but you know you've seen it. You're browsing around and see something very "drupally" about a site. Suspiciously, you view source or look at builtwith.com just to double check. What was it that you noticed? Was it some odd styling? Can we blame this "drupaliness" on Drupal?

Making a theme in Drupal 7 is surprisingly easy. If you can go with the flow, much of what you want to do can be overridden with CSS. As Laura Scott wrote recently about the Theming Firehose "Theme with the markup you have, not with the markup you wish you had". To its credit, a "blank" Drupal theme in Drupal 7 is very pared down. You can see the results by enabling the core theme Stark. There is a little CSS just to make the page legible, for example Drupal core puts sidebars in their places; and it adds some coloring to tabs to ~make them recede. Ok, they've got a grey background. Stark in Drupal 7 isn't the height of fine design, but it's a good way to see what Drupal comes with out of the box.

The thing is, many designers just stop there, and they leave many areas of a Drupal site unaccounted for. Here are the list of offenses below. I'd like to thank the participants of my little twitter poll. @pcambra, @timmillwood, @DamienMckenna, @gusaus, , @eporama, @snyderc. You might have some additions yourself to add in the comments!

1. Neglecting to design user/register

Certainly this one is hard to argue with, Pedro Cambra agreed too.

2. Neglecting to consider all user related forms

Make sure all the user-facing forms are treated and customized.

user related forms

3. Neglecting to design for the tabs

The View/edit tabs are often forgotten, but including the design of these will help.

tabs

4. Neglecting to customize the design of output from contributed modules

If you add a contributed module, make sure you double check both the markup being output to ensure it's consistent with your theme. And of course, override the CSS classes in your own theme. Many contributed modules include *.tpl.php files to override as well.

slideshow

5. Neglecting to design for anything else your client might add

Drupal is highly flexible. You may not have expected it, but at some point your client may drop in a table of data right into a basic page. If you don't design for at least the basic HTML tags, you're client will have some really horrible browser default table design. They might make a View with a bulleted list and pop it in the sidebar, where you only expected blocks of text. How is that going to look? Don't forget to design for any new content and markup your client might add.

6. Theming a site with Garland

I'm putting this last because, why kick a theme when it's down? To be fair Garland was a decent theme. And the color module at least made it customizable. It's not a *bad* theme, but if you've got design skills and time, it looks a bit lazy. :/

sites with garland

Why is this happening? How can we stop it?

I think if a designer were to design all aspects of the site functionality from the ground up, they wouldn't forget to design how the user/register page looks. And yet, with Drupal, it's a "given". It comes that way, out of the box. So maybe it's just oversight. There are literally holes in the plans that don't get any design treatment to make it part of a cohesive whole.

- As you begin to customize, you'll find the Style Guide module super helpful http://drupal.org/project/styleguide This gives you a preview of how all markup is styled on your site.
- Read Designing for Drupal Do's and Don'ts by Amanda Luker http://www.advomatic.com/blogs/amanda-luker/designing-drupal-dos-and-donts
-Also check out Nica Lorber's templates for Drupal 6 as a guide for remembering to style away all those Drupally things. http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_appr...

Want to learn more?

If you think you'd like to learn more about designing for Drupal keep an eye out for Design 4 Drupal events http://groups.drupal.org/drupal-design

Read more about our new Drupal 7 Front End development course. We're live testing this course next week at our offices! Keep an eye out for upcoming announcements Drupal 7 Front End development courses by our partners http://training.acquia.com/events

If you'd like to find out more about our courses and training partners, contact us.

Reacties

Posted on by Erik Peterson.

I didn't mean my reply to be a knock on Garland per se. But rather, as Heather mentions, the lack of effort on changing the default theme is a dead give away as to when a site was built with Drupal. Same will probably be true of Bartik even though it's a much better theme. It is distinctive as a Drupal theme once you've seen it a hundred times.

Posted on by irma Laas.

Hey @eporama

Don'e feel bad about knocking Garland. I m sure that Garland understands and is not offended. Drupal 7 makes theming so much easier and there are so many possibilities that were almost impossible to do in the past. We all used Garland as our base and styled it from there, but those days are over. Phew. And now there aren't any excuses for our Drupal sites to look Drupally anymore. :D

I just started using omega theme and love it.

Thank you for an interesting blog @Heather. I truly enjoyed it.

Reactie toevoegen

Plain text

  • Geen HTML toegestaan.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Regels en alinea's worden automatisch gesplitst.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Toegelaten HTML-tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Regels en alinea's worden automatisch gesplitst.
Bij het indienen van dit fomulier gaat u akkoord met het privacybeleid van Mollom.