Create a showcase of sites built with Backdrop

[jenlampton]

We should start thinking about the showcase section of the backdropcms.org site. The following are todo items we'll need to build this out

Good examples of showcase sites we like include:

• Wordpress https://wordpress.org/showcase
• Drupal https://www.drupal.org/case-studies
• Drupal/Acquia https://www.drupal.com/showcases
• Acquia http://www.drupalshowcase.com/site-industries/Government

TODO

• [x] Look for example sites we would like to emulate, what do we like / dislike about them, and what would work well for Backdrop.
• [x] Decide what information we would like to collect about each site
• [x] Design a showcase (maybe?)
• [x] Build & theme the showcase content type
• [x] Build & theme the showcase& view
• [x] Add a link into the main navigation

Here's the design:

[wesruv]

http://www.awwwards.com/

Not a fan of the sites they showcase, but their site is slick.

[jenlampton]

Spreadsheet of content buckets from these various sites: http://bit.ly/1WYgKTW These are the ones I'd like to include:

Now:

• Screenshot(s)
• Name of site (text)
• Link to site (link)
• Short description (body)
• Industries (tags?)
• Why Backdrop was chosen

After we have reference:

• People involved
• Companies involved
• Major projects used
• Any projects contributed

[cellear]

Are there nominations for sites we can showcase? (I didn't have access to the spreadsheet above; I have requested access.)

[jenlampton]

@cellear any site can be added: https://backdropcms.org/node/add/showcase We'll go through and "promote" the fun ones, but right now we're collecing as many as possible.

[serundeputy]

@jenlampton I made a showcase node: https://backdropcms.org/showcase/journal-undergraduate-ethnography. It is not published feel free to publish if it helps for theming or anything.

[jenlampton]

Thanks @serundeputy ! :)

[Graham-72]

What should be the primary objective of our showcase? I am thinking that at this early stage the emphasis should be on the versatility of Backdrop to meet different needs and sizes of website, and the features available for site-building, both with core and with contributed modules.

It would seem too early to be a showcase of off-the-shelf themes but we can aim to demonstrate a range of different custom themes developed using the features available in Backdrop.

Also, we need to demonstrate practical examples of sites that have been migrated from Drupal to Backdrop.

We are not, I think, aiming to provide an art gallery of webdesign. Nor a sales brochure advertising the work of various webdesign agencies. Rather, we are aiming to demonstrate that Backdrop is worthy of consideration alongside other leading Content Management Systems.

These are my personal thoughts and I may well be wrong. I have just been reflecting on what I, as a web developer, would be looking for if I had not already chosen Backdrop.

[jenlampton]

Exactly :)

[Graham-72]

This being the case, I thought that http://www.drupal.org/case-studies was close to what we need. Perhaps a mock-up of a Backdrop version might be the next step, but we need more showcase sites.

[jenlampton]

We have a mockup, and I built out a layout and made the necessary theme changes last Thursday. Let me push that up to prod so you guys can take a look...

[jenlampton]

Here we go: https://backdropcms.org/showcase/americas-best-bootfitters

[jenlampton]

@serundeputy can you provide a screenshot that does not include the browser for https://backdropcms.org/showcase/journal-undergraduate-ethnography ? I added one with CSS, too.

[Graham-72]

@jenlampton thanks for this. I like what I see. Two immediate problems I have as a contributor of sites

1. Getting the hero image right for different display widths.
2. Listing the modules that are used for key features. This is something I like to see when looking at sites and thinking 'how have they done that?'

[jenlampton]

2 will be added when we get a reference type module in core (so, hopefully Jan 15th?) then we can node-reference any project on the backdrop site already :)

for 1, would it be helpful to specify a recommended set of dimensions (like we do for phone & tablet?)

[Graham-72]

Yes it would be helpful to have recommended dimensions. Would we have the possibility to provide different hero images for the main different screen sizes? Another thought I have is that the style for the background image could center it perhaps.

[jenlampton]

I don't think it should center, since the text is left-justified. If it centered then what would work with the text on full-screen images may not work with the text on smaller screen sizes. If we Leave it left aligned then the same image is more likely to work on all devices.

There is something really weird about the positioning of the text though - I'll see if I can fix that now.

[Graham-72]

It is very difficult to choose one hero image that suits all circumstances,

[jenlampton]

It can be, but this is not a unique situation. with the hero block in core we solve the problem with background-size: cover; which is what I've also done here. I've also added the center alignment you recommended, and it seems to be working okay.

[Graham-72]

Thanks. Those changes seem to work well. Can we get the text to show a bit more clearly where the background is light, perhaps by having a translucent grey background for the text, as often done with film subtitles?

[jenlampton]

that's a good idea! :) I was wondering how to handle that situation...

[serundeputy]

@jenlampton updated desktop image sans browser.

[jenlampton]

looks great, thanks @serundeputy !

@Graham-72 I added a gray background to the title/subtitle area. What do you think? https://backdropcms.org/showcase/catherine-larner https://backdropcms.org/showcase/deben-rowing-club

[mikemccaffrey]

What should be the primary objective of our showcase?

I'm thinking that it should be showing the (hopefully) broad adoption of Backdrop. We want to show that is (hopefully) being used for lots of sites, and that those sites (hopefully) look exciting and different from each other.

Perhaps we should have a featured block with a really impressive example, followed by an endless scroll of additional sites that have been created.

[jenlampton]

Sounds great. But how are we going to get all that content?

[Graham-72]

I added a gray background to the title/subtitle area. What do you think?

It certainly makes the text show up better.

But for smaller displays (i.e. phone) it looks a bit odd to have 90% (portrait) or 50% (landscape) of the hero image appearing darker. Perhaps for these sizes it would be best to make the whole hero image darker? Or just always use a darker image? @jenlampton how do you feel about the look of https://backdropcms.org/showcase/americas-best-bootfitters on a phone?

[jenlampton]

For me on mobile 100% of the hero image is darkened, only on tablet or desktop does the text bottom-align with the background behind it darkened. Perhaps the CSS cache wasn't cleared last time you looked (sorry about that!). Can you check again?

[Graham-72]

Yes, its now looking fine on my mobile when in portrait. When in landscape it is not so good (in my opinion), see screenshots (photos) below. and

[jenlampton]

I think your phone is larger than mine. It still looks good on my phone when in landscape. I used the same breakpoints for this as we use on the rest of the site.

I was thinking it might be time to change some things about the site, in particular:

• https://github.com/backdrop-ops/backdropcms.org/issues/304 replace custom layouts
• https://github.com/backdrop-ops/backdropcms.org/issues/305 update Menu & drawer handling

Perhaps the fix on these babies can happen in conjunction with that, adopting the standard breakpoints from bootstrap?

[Graham-72]

Understood. I do have great difficulty using the site navigation on a mobile so will welcome these changes.

Do you want any more sites added to the showcase?

[jenlampton]

Yes, I'd love to see as many as possible - assuming they look good and have compelling testimonials, of course.

[Graham-72]

How are we going to encourage others to add their sites to the Showcase? There must be several out there. Can people recommend, perhaps here, any they come across?

[olafgrabienski]

In the issue referenced by @jenlampton there was asked in a comment if there is some styling missing from the Showcase page. I have the same question.

While the individual showcase pages look good, the overview page looks quite raw (see screenshot in the comment mentioned above). Do we still want to design the overview page like the screenshot in the description of this issue?

[jenlampton]

We have the design @olafgrabienski. Yesterday I posted a screenshot of it into the original issue above. This ticket is still open because we need to implement that design. What's showing on that page now is temporary - and that's why it's not linked in the site navigation yet.

[ghost]

While we wait for a reference feature/module to get into core, can we use one of the existing contrib modules so we can add information about the people/companies who built each site?

[jenlampton]

Yeah, that's a good idea. I think we can use the reference module as it does most of what is usually needed. And where it doesn't we'll be motiviated to build that :)