Site building process with concrete5 - designer view
Permalink 1 user found helpful
I've spent the last week or so, very pleased with Concrete5, the possibilities it gives me. I've only been learning web design for about 5 months, and what I love most about it is seeing my code turn into a living, breathing web page/site.
Until now, I have resisted using a large CMS, I've used small ones like Unify which can really do a job, if your needs are simple.
I don't want to use Wordpress as my sites in the main are not blogs, Joomla has always left me feeling cold. Concrete5 is nice and seems to have been built in the right way...
Now the problem!
How to style my website in a way whereby it looks like how I want and yet the end user can still add sections and blocks without ruining the look of the whole thing.
Should all the content be styled by the designer from within c5? This is the conclusion I'm coming to. Yet it is not what I, as a designer, feel comfortable with.
I have yet to discover how to set up a simple editable area on a page. I don't want a new block to be added there, I want the title I wrote to be editable by the client.
On my static pages, I have content and sidebar boxes, each having a different colour. I have used Designer Content to create foolproof content blocks for the client and I must say that without add-on, life would be pretty difficult. But even with this, it feels a little counter-intuitive as a designer. How can the user define the background-color of these content blocks?
If the client wants to add a content block in the sidebar. The end result having used the editor is often very unprofessional looking. Should we be styling the default C5 blocks?
I guess the advantage of the tiny content editors like Unify is that the client is only editing the content within your own styling, but I really want to harness all the huge advantages of C5 - like the robustness, the extensibility.
I understand it could be hard to answer all my specific questions but could anyone let me know their design process? Am I missing something obvious? How to you get your static designs into C5, and make them look good even when the client has had their fun?
Thanks for any ideas
Until now, I have resisted using a large CMS, I've used small ones like Unify which can really do a job, if your needs are simple.
I don't want to use Wordpress as my sites in the main are not blogs, Joomla has always left me feeling cold. Concrete5 is nice and seems to have been built in the right way...
Now the problem!
How to style my website in a way whereby it looks like how I want and yet the end user can still add sections and blocks without ruining the look of the whole thing.
Should all the content be styled by the designer from within c5? This is the conclusion I'm coming to. Yet it is not what I, as a designer, feel comfortable with.
I have yet to discover how to set up a simple editable area on a page. I don't want a new block to be added there, I want the title I wrote to be editable by the client.
On my static pages, I have content and sidebar boxes, each having a different colour. I have used Designer Content to create foolproof content blocks for the client and I must say that without add-on, life would be pretty difficult. But even with this, it feels a little counter-intuitive as a designer. How can the user define the background-color of these content blocks?
If the client wants to add a content block in the sidebar. The end result having used the editor is often very unprofessional looking. Should we be styling the default C5 blocks?
I guess the advantage of the tiny content editors like Unify is that the client is only editing the content within your own styling, but I really want to harness all the huge advantages of C5 - like the robustness, the extensibility.
I understand it could be hard to answer all my specific questions but could anyone let me know their design process? Am I missing something obvious? How to you get your static designs into C5, and make them look good even when the client has had their fun?
Thanks for any ideas
Thanks Mesuva for an incredibly in-depth reply!
I think you're right in that I have to be a bit more creative with my CSS.
I'm used to static sites so I could get away with a lot more as I would change the look of things often on a div by div basis.
I have just discovered the power of adding preset styles to blocks, yet I seem to be doind a lot of work in the CMS as opposed to in the code and I suppose it's something I'll get used to over time.
Custom block templates, custom attributes and the like I haven't been able to find any simple explanations on how to make them, though I'm sure developers will find this second nature.
Is there a way that you know of to just make an area editable ie content, not type, or would that be in the realms of content blocks?
I think you're right in that I have to be a bit more creative with my CSS.
I'm used to static sites so I could get away with a lot more as I would change the look of things often on a div by div basis.
I have just discovered the power of adding preset styles to blocks, yet I seem to be doind a lot of work in the CMS as opposed to in the code and I suppose it's something I'll get used to over time.
Custom block templates, custom attributes and the like I haven't been able to find any simple explanations on how to make them, though I'm sure developers will find this second nature.
Is there a way that you know of to just make an area editable ie content, not type, or would that be in the realms of content blocks?
I guess the thing to remember is that CSS is there to save you work. Use broader class classes and IDS to style your site first, then only use specific block styles where needed.
The style presets can be useful, but they should only be used for exception cases in your content, not for building a site. Your site edits should really just be about placing content.
Here's some info on the block templates:
http://www.concrete5.org/documentation/how-tos/designers/customize-...
For the custom attributes, that's a bit more involved, but I would suggest looking at one of the 'cheat sheet' lists for some hints:
http://www.concrete5.org/community/forums/documentation_efforts/the...
http://www.weblicating.com/c5/cheat-sheet/... - this is awesome, read the whole thing
I do know what you asking in your question about the content being editable, but I can't really think of a strong example where you would work that way. Again, you can either look at using custom page attributes, or do something like use an html block as that is effectively just text only. You could also create a very simple block that just has a single text/textarea field if you really wanted.
The style presets can be useful, but they should only be used for exception cases in your content, not for building a site. Your site edits should really just be about placing content.
Here's some info on the block templates:
http://www.concrete5.org/documentation/how-tos/designers/customize-...
For the custom attributes, that's a bit more involved, but I would suggest looking at one of the 'cheat sheet' lists for some hints:
http://www.concrete5.org/community/forums/documentation_efforts/the...
http://www.weblicating.com/c5/cheat-sheet/... - this is awesome, read the whole thing
I do know what you asking in your question about the content being editable, but I can't really think of a strong example where you would work that way. Again, you can either look at using custom page attributes, or do something like use an html block as that is effectively just text only. You could also create a very simple block that just has a single text/textarea field if you really wanted.
Thanks again, for the reply.
Would you mind just looking at a page from my static site and perhaps just tell me how you would go about (in a broad sense!) preparing that for a C5 end user?
I have found that using Designer Content for the content blocks, then omitting the background color in CSS and setting presets from within C5 for the different colours...
Is that the way you would also go about this or am I looking at it back-to-front?!
http://www.golfhotelmontpellier.com/restaurants.html...
Thanks
Would you mind just looking at a page from my static site and perhaps just tell me how you would go about (in a broad sense!) preparing that for a C5 end user?
I have found that using Designer Content for the content blocks, then omitting the background color in CSS and setting presets from within C5 for the different colours...
Is that the way you would also go about this or am I looking at it back-to-front?!
http://www.golfhotelmontpellier.com/restaurants.html...
Thanks
I can see with the different styled blocks on your site why you might be finding it a bit fiddly. There might be not a huge amount you can do to make it easier, as I'm thinking making this fully controllable by a client is going to be tricky is any CMS.
But perhaps one idea is that you create a custom block that allows you to put in a heading, pick three images, an area of text content and either a link or a button (or nothing). You could also have a drop down for the custom block where they can pick the background colour of the block. Perhaps you've already done this!
But perhaps one idea is that you create a custom block that allows you to put in a heading, pick three images, an area of text content and either a link or a button (or nothing). You could also have a drop down for the custom block where they can pick the background colour of the block. Perhaps you've already done this!
I think mesuva's response is *excellent* and I couldn't agree more with his take on it. When you're a designer building a website for a client, you really should be restricting your users to pre-defined designs as much as possible. This is totally my own biased opinion, but I believe that a big part of design is making decisions and providing constraints, and the attitude of "let the client pick how they want" is actually doing them a disservice, as you are shrugging off your responsibility as a designer to make these decisions for them. Again, just my opinion, not fact (and I know some clients are more "demanding" than others).
That being said, here's a couple of specific answers to some of your questions:
* For the title that you want the user to be able to change, you might want to make an area in the page type template, and set a "block limit" of 1 (which means there can't be more than 1 block in the area). You can do this with the following code:
...then in the Page Defaults for that page type, add a content block with something like "PAGE TITLE GOES HERE". Now when the user adds a new page, that block will be there and it will be obvious that they should click on it to edit it, but they won't be able to add more blocks to that area.
This isn't perfect because the client could delete that block and add a different one, but it's as good a solution as I've ever found (I use this technique on the sites I build a lot).
* Custom template: if you want to create custom templates for a block, go into that block's directory (if it's a designer content block, it's in YOURSITE/blocks/your_block_handle/), and make a new folder called "templates". Then copy the block's "view.php" file into that new "templates" folder. Now change the name of the new copy in the templates folder to something else, like "blue_background.php", then edit the file to add a new <div> or a different class or something around the content output code.
Now when the user adds one of these blocks to a page, they can click on the block and choose "Custom Template" from the popup menu, and "Blue Background" (or whatever you called that new template file) will be available as a choice. You can have as many custom templates as you want, too -- just keep making more copies of the original view.php file and put them into the block's "templates" directory (giving each file a different name of course).
Hope that helps you out a little more!
-Jordan
That being said, here's a couple of specific answers to some of your questions:
* For the title that you want the user to be able to change, you might want to make an area in the page type template, and set a "block limit" of 1 (which means there can't be more than 1 block in the area). You can do this with the following code:
<?php $a = new Area('Title'); $a->setBlockLimit(1); $a->display($c); ?>
...then in the Page Defaults for that page type, add a content block with something like "PAGE TITLE GOES HERE". Now when the user adds a new page, that block will be there and it will be obvious that they should click on it to edit it, but they won't be able to add more blocks to that area.
This isn't perfect because the client could delete that block and add a different one, but it's as good a solution as I've ever found (I use this technique on the sites I build a lot).
* Custom template: if you want to create custom templates for a block, go into that block's directory (if it's a designer content block, it's in YOURSITE/blocks/your_block_handle/), and make a new folder called "templates". Then copy the block's "view.php" file into that new "templates" folder. Now change the name of the new copy in the templates folder to something else, like "blue_background.php", then edit the file to add a new <div> or a different class or something around the content output code.
Now when the user adds one of these blocks to a page, they can click on the block and choose "Custom Template" from the popup menu, and "Blue Background" (or whatever you called that new template file) will be available as a choice. You can have as many custom templates as you want, too -- just keep making more copies of the original view.php file and put them into the block's "templates" directory (giving each file a different name of course).
Hope that helps you out a little more!
-Jordan
Thanks Mesuva, thanks Jordan,
I actually am using your add-on Jordan to make custom blocks and just not adding a background color in the CSS, then going into the existing blocks and changing color and adding it as a preset.
Are there any differences between setting a design preset on a block and make a custom template like you suggested?
Also thanks for the idea about adding an editable area.
I guess I would like to do as much of my work in my editor as the more time I spend within the actual system, the less I feel like a designer and the more I feel like a client could be doing this themselves!
I actually am using your add-on Jordan to make custom blocks and just not adding a background color in the CSS, then going into the existing blocks and changing color and adding it as a preset.
Are there any differences between setting a design preset on a block and make a custom template like you suggested?
Also thanks for the idea about adding an editable area.
I guess I would like to do as much of my work in my editor as the more time I spend within the actual system, the less I feel like a designer and the more I feel like a client could be doing this themselves!
If you can make your design options work with a design preset, then there's not any functional difference between that and custom templates (the only difference becomes a UI one -- whichever of those two features you think will be easiest for your client to use).
In some other situations, though, the design presets don't work (for example, if you actually need different HTML markup, or different class names) -- but if it's working for you then by all means keep doing it.
In some other situations, though, the design presets don't work (for example, if you actually need different HTML markup, or different class names) -- but if it's working for you then by all means keep doing it.
you've got lots of different thoughts/questions in your post, that's cool... I might not myself be able to address all of them though!
I don't think you are missing anything obvious, I think you're just considering how much control do you give to clients.
- From my opinion as a web developer, I'm not there to create a system that gives my clients huge amounts of control over the look of their site; I'm there to create a robust system that allows them to make the edits and updates they need to make quickly and easily, whilst keeping the design of the site consistant. This might feel a bit weird, as you may feel you are removing control... but most people just want to spend their time running businesses and making good use of their website, not being creative with web designs.
- My thoughts are that the end user shouldn't really have to worry about design too much. Marking up content with headings, emphasis, bold, etc, yes, but not things like font choice (!), background colours or things like spacing. I go as far as removing quite a few options from the TinyMCE editor - I've had no complaints, but client added content has remained neater. Sometimes I'll create a custom block specifically to force content to be formatted consistently and without fuss.
- I think several of your concerns sound like you aren't perhaps using CSS to its full potential. The great thing about C5 is that you can set it up so that clients CAN add content freely, without the site turning into a styling mess. When you say users can add blocks that ruin the look, this is what you should aim to prevent happening using well crafted CSS.
- I think to answer your question about 'should we be styling default C5 blocks', my answer to this would be yes-ish, but more-so styling for common HTML tags. If you are adding something to a sidebar and it looks messy, you are either missing some needed CSS or your styles aren't broad enough to cover the options that a client has for adding content. If I have a testimonial block for example, I would expect that it looks well styled in both a main content area and any sidebars.
Just some other little notes that might help while I'm rambling:
- Things like page titles and other pieces of text can be set up as page attributes, so instead of them being a block on a page, they are simply displayed. I often set that up as the H1 or H2 on a page, to automatically display a page title. Why would a client know to pick a header 1 or header 2 for a page title? They often just see them as a big and less big, and don't know what was selected on other pages.
- Concrete5 has the ability to restrict certain block types from being used in particular areas. I can't quite remember, but I think this might only be available when advanced permissions is on.
- Have you found the design option when you click on a block? (in the same menu list as where it says edit, move, delete, etc). This gives you a way to add some additional in-page styling. If you really want to do something specific on a block (like a background colour), this can come in handy.
- Another thing to look at if you haven't already is how you can override the output of blocks using custom block templates. Sometimes it's great to just strip things back to only the basic contents you need. You can also do some more advanced tricks like making a block add/remove classes depending on factors like being logged in or a block being in a particular area.
- If you do need to give clients different styling options, give them presets in the form of page types, or classes they can apply to blocks, or custom block templates (that would just change a div class). In this way, they have some creative control, whilst not having styling options that can cause problems.
I think your post got me reflecting! Hope that helps a bit.