HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Wysiwyg stuck on ipad

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#94262 (In Topic #18800)
Avatar

Community saint

Hi,
I am using the latest 9.0.4 version of OCP and trying my site out on a range of devices.

So first off are iPad 3 and iPhone 4S both on iOS 6

On the iPhone if I add a new forum topic (in non mobile mode) then I get the full wysiwyg menus. If I select the insert link to image icon then I get a horrible half a window to the right, I have to zoom to it to use it - any plans to improve that ?

Using the same account on the iPad the wysiwyg menu is not there at all when adding a forum topic, just the block, Comcode etc - any idea why? Tried clearing the cache etc.

Is there anyway to reduce what is on the wysiwyg menu - there are items that would just confuse a lot of my users.

Cheers
Ade
Back to the top
 
Posted
Rating:
#94270
Avatar

Right…

Regarding the iPhone, you're literally asking for trouble if you choose to not use mobile mode on a mobile device ;). It won't fit well.

Regarding the iPad… because this isn't set to run mobile mode (in the sense of mobile meaning small screen), there is a separate block explicitly disable WYSIWYG. This is because iOS did not support WYSIWYG for a long time. I can see this is no longer the case, and CKEditor has provided support since 3.6.2, so I will post a hotfix for that.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Important!
Posted
Rating:
#94271
Avatar

Automated fix message

Lhasadreams said

Hi,
I am using the latest 9.0.4 version of OCP and trying my site out on a range of devices.

So first off are iPad 3 and iPhone 4S both on iOS 6

On the iPhone if I add a new forum topic (in non mobile mode) then I get the full wysiwyg menus. If I select the insert link to image icon then I get a horrible half a window to the right, I have to zoom to it to use it - any plans to improve that ?

Using the same account on the iPad the wysiwyg menu is not there at all when adding a forum topic, just the block, Comcode etc - any idea why? Tried clearing the cache etc.

Is there anyway to reduce what is on the wysiwyg menu - there are items that would just confuse a lot of my users.

Cheers
Ade
This issue has been filed on the tracker as issue #954, with a fix.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Important!
 
Posted
Rating:
#94272
Avatar

Is there anyway to reduce what is on the wysiwyg menu - there are items that would just confuse a lot of my users.

Since v9 we have a WYSIWYG_SETTINGS template, which is where the CKEditor configuration is defined.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#94275
Avatar

Community saint

Cheers Chris, will try both later.

Thanks for supporting me so quickly on a Sunday as well !!
Back to the top
 
Posted
Rating:
#94301
Avatar

Community saint

Hi Chris,
I applied the patch and it works fine on the iPad now.

I have to disagree with you on the mobile device usage - most smartphones have a screen with a pixel density that rivals many desktop machines.

Using OCP on a smartphone in non mobile mode really needs sorting out - in the main it works fine just some niggles like this one.
Back to the top
 
Posted
Rating:
#94302
Avatar

There's no bug here though, because this was not designed to work. It sounds like a resolution problem to me; I could be wrong though and another possibility is that non-mobile mode will also assume that normal operations like dragging, independent scrolling, and hovering available, which may not be available without a mouse. It also sounds like it is an issue in CKEditor rather than ocPortal itself.

I'm sure things could be improved to tune things more carefully to new devices, but someone would need to contribute a patch or sponsor the extra development. This changes too fast for doing within development cycles. Ideally we'd have specialised iOS and Android apps, but the cost there would be very high.

It would probably be better to tune your theme to allow it to display more like you want to on your current popular mobile devices, on mobile mode – that's the default mode, and you still have full control over styling that how you want to. You can use "responsive design" techniques in your CSS for instance.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#94307
Avatar

Community saint

I do hear what you are saying Chris - but the bottom line is that mobile be it in the form of a smartphone or tablet accounts for a huge proportion of users on all forums today.

People expect the same experience on all platforms - such is the pace of technology :-)

I know as a club we would be happy to contribute to some development funding for this…

Perhaps you can put this on your backlog and discuss it at your next sprint meeting ?

I will be looking at making the mobile version a little better than it is - I have had good and bad comments about how it is now - basically the only thing that I have changed is the header, I have just let OCP render it for the smaller screen.

Would OCP be prepared to take on the mobile layout re-design, using the techniques you mention - perhaps work closer with me over an extended period to get it done faster ? (paid for of course).

Expect a lot more from me as the users get to grips with the new setup !!

Cheers,
Ade
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#94368
Avatar

People expect the same experience on all platforms

It won't happen literally though, because a mobile device has fundamental differences to a desktop device. Part of the mobile mode is that it makes some changes to try and accomodate for that, it's not purely to do with screen size. For example, the problem you reported with username autocompletion was because the iPhone can't do list fields, only drop-down fields, and therefore Javascript events fired differently and confused ocPortal. As it happens I actually fixed that via using a new HTML5 input control where available (for Android) and a specific workaround targeted to iPhone. So actually I didn't target that to mobile mode at all, so it's not a great example – but it is an example to show the experiences are different because the mobile browser UIs and input modes vary in some interesting places.

Okay, so you're right really in that resolution is the main differentiator for the mobile mode, because most other things are handled without the need for it. But it still looks like the issue you found is to do with insufficient resolution on your device, so I'm also right – if it won't fit in desktop mode, it won't fit, and we're not trying to make it do so because that's not the optimised route we've mapped out. The desktop mode assumes a 1024x768 minimum, and the iPhone retina display has 640 width.

It'd be a lot of work to make the desktop mode display with 640, probably around a week if we were efficient and it goes smoothly. I still take issue with that approach though: the point of retina displays isn't really to fit more on, it's to add crispness. You don't want to be staring at the small screen trying to see the detail that is theoretically there, but really tiny, nor do you want to be zooming in and out and accidentally triggering links or buttons while doing so. So a more suitable thing would be to add high-definition icons and generally continue to optimise the mobile mode to make it neater (right now it works, but it really could use at least a few weeks of professional redesign to make it great).

(Responsive design could be used instead of ocPortal's mobile mode, but the end is the same – different layouts for different devices – responsive design is a bit limited because it relies on the ability of CSS to specify and layout for fixed HTML, and in practice that's not as easy as people say)

So you see, I don't quite see it as you do. I think the mobile mode is important, the correct vessel for targeting smartphones. But it's also a huge amount of work, at the very least many thousands of dollars, to optimise dozens of screens.

(On a related note, v10 will include a little responsive design, to make the default theme look better on tablets, basically disabling desktop-style fixed width for them, and mapping the configured fixed width to the width of the device)


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#94374
Avatar

Community saint

Your reply makes perfect sense - thank you for taking the time to write it.

The support of varying devices and their screen sizes is a tricky one that many developers are starting to face. I work for a little company called IBM in their software group and they have launched a tool called workplace to address that developing web apps in HTML 5 that render as apps on the device - great for non games apps.

I need to read up on responsive design, not something that I have looked at. Any book or site pointers ?

Cheers
Ade
Back to the top
 
Posted
Rating:
#94382
Avatar

workplace

Google tells me it is Worklight ;). IBM Workplace seems to be something else.

I need to read up on responsive design

I don't have any particular tutorial on hand. It's quite simple in theory, it's just that CSS can now define rules that target different display widths. A good example is what we're doing in 10 – if the browser width is close to the site's defined fixed width, our new CSS removes the margin/shadow/border. Because iPad scales to fit content, our new rule automatically will trigger itself on iPads, and make ocPortal precisely fit the iPad display.

A lot of people are now using it to make the same design work on desktop, tablet, and phone, by targeting customised rules against a set of widths. It's a very nice system, but it does depend on CSS being expressive enough, and CSS isn't always that good (impressive demos often hide the difficulties real life presents).

The real complex thing about phone and tablet layouts is the concept of virtual pixels. Because they do a lot of zooming, including an initial zoom to fit content to the screen, there's a difference between actual pixels on the physical screen, and on the web page. That is obvious of course. But what isn't so obvious is that fonts and images are rendered with high fidelity. So for example, you might have a mobile design that fits onto 320px width, and target that to phones, but you might make your images have higher resolution than their dedicated pixels within that 320px – 'retina' displays will display the extra fidelity, because they are capable of doing so (displaying only 320 virtual pixels across the actual 640px screen width means they are zoomed in, and if they see more pixels in the source imagery, they'll use it). It takes some time to get your head around that.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: