Using a grid based layout in practice

[smotsie]

Hi guys,

This is a general question not related to a specific CMSMS version. I am starting to use 960 grid system a lot but always have problems getting end users to understand how to create divs within divs and select the right classes.

Micro tiny just doesn't cut it as an editor for this purpose, and TinyMCE has it's problems too. Has anyone got any experience of either adding to / fixing TinyMCE so it is easier to layout the block elements, or alternatively is there another editor that can do the job better? I've been looking at the forthcoming TinyMCE V4 and it doesn't seem to add anything that would make HTML5 / CSS3 / 960 Grid work any easier. Maybe there are some people out there who could create a rival editor, because as far as I have seen there aren't any systems which tackle this way of working, and at least to my mind it makes such sense, with responsive support being so much easier if a grid is used.

Ideas please!

Simon

[uniqu3]

A client or end user should not really work on layout, a WYSIWYG editor is not intended for layout tasks but for content.
Create a proper logic so client doesn't have to enter any "div" at all.

[Wishbone]

You can use multiple content blocks for each div. If that content block is empty, have your template not create the div.

[smotsie]

Hi Uniqu3,

Thank you for your reply, but I am not sure I understand how your solution is presented to the user. Do you mean that you put multiple content blocks in the editor which map to sections of the page? I have done this with some sites but it is very complex for the user to understand, when a content block isn't the right size for where it will end up on the page, especially if they want to add images into some blocks.

What I really would love would be for my users (for example) to be able to drag a marker across the page and define a 3 column area, which snaps to the columns I defined then becomes one line height. They start typing in it and it grows length wise to fit their content. They then draw another 6 columns wide, drop in a picture and resize it to 2 columns exactly, type some text which flows around the picture, then finally drag in the right hand area to fill the remaining columns and put some content in there. Or perhaps they only get 8 of the columns to play with because the others are filled with sidebar, nav, other pre-ordained content.

I suspect I am being a bit too ambitious, but I know I would love to show my users such a system and as far as I know it doesn't exist out there... yet!

Cheers
Simon

[TraslochiVarese]

Hi smotsie,

the task you are speaking is simple to reach adding some jQuery code to the page.

In my past I developed a site in which the site owner can login like admin then, next to the text it would edit, it can see an "edit button". By clicking this button a jQuery window opens and it has inside a tinyMCE editor. While my customer build the text you can see the changement in realtime on the site.

You can build this with few lines of jQuery and tinyMCE

[smotsie]

Hi TraslochiVarese,

Not sure how that would answer the question. These will be CMSMS sites and I don't wish to re-invent all the wonderful features already in the system. I just want to make the page editor as Grid-960 block-friendly as is possible with the end user being able to choose some of the layout (this is a 2 column section, the next 3 column etc.) within constraints set by me as the designer / editor. Creating N-column wide divs in TinyMCE is difficult and often doesn't show on screen as you would want it to. One other "nice to have" would be that the bit the user is editing is "normal" colours, the rest of the page is greyed out with a three-level z-index like we all use in image galleries such as fancybox.

So, any more takers? I just wish I had enough time to start coding such an editor, but my skills are limited and I have 6 children (no, really! although one is grown up) so time is limited even more so.

Cheers

Simon

[Dr.CSS]

I don't use grid systems but I did make a template that will take 8 layouts depending on which combination of the 3 edit/content boxes are used...

http://themes.multiintech.com/8in1-flex.html

[applejack]

A client or end user should not really work on layout, a WYSIWYG editor is not intended for layout tasks but for content.
Create a proper logic so client doesn't have to enter any "div" at all.

Quite, and if they want it different then charge them for it. It is a service you are providing not a free lunch.

It is unrealistic and increasingly so with responsive design, to expect a client who is able to do everything required in terms of updating their site especially when it comes to graphics.

See it as a revenue opportunity rather than a problem. A client has their own business to run without also having to learn coding, if they are serious about it they will pay for professional help.

[smotsie]

(snipped) ...See it as a revenue opportunity rather than a problem. A client has their own business to run without also having to learn coding, if they are serious about it they will pay for professional help.

OK now THAT is an argument I understand! If they want a professional site then use a professional. It being difficult for them to do just reinforces why they pay me. So I help them to understand how to change a phone number without my help (because they don't like paying even 15 minutes at a reasonable rate to type 01234 567 890 instead of 09876 543210) but if they want a new page with 3 columns here and 2 columns there, then they either learn to code or pay me. Now all I need to do is to make it as easy for me as I choose it to be.

Thanks AppleJack! (Oh, and Uniqu3 too!)

[Dr.CSS]

You could make a template for each of the number of columns, 3 column, 2 column, etc...

[applejack]

You could make a template for each of the number of columns, 3 column, 2 column, etc...

And you could go home hungry....

[Dr.CSS]

@applejack

Say what..?