[Pro] HUGE ADVICE NEEDED (not a problem)...

Barry_Hoffman · March 3, 2013, 5:18am

An aspect I first chose for my site 1 year ago I am now reconsidering…

Because the site is for kids and has so many useful icons, I made it so that when you mouse over the icons, up above uses a target/show hide rollover action that shows 1 sentence about what that “zone” is before the person clicks. I think it is perfect and what was needed… no one has ever really commented on it though.

However tonight I realized while using an ipad that touching the icons did not work well because the user has to click the icon twice because of the non-working rollover on an ipad… This confused me and I just thought the site felt off using it on an ipad…

Took me very long to realize this…

Anyway… my dilemma is…

Should I keep it as is with great informational rollover for the icons, or with more ipad users, get rid of the rollover so it feels right with single click on icons but with no info? Not sure if there is even another creative idea…

Very stuck with what is best to do.
Thanks for any thoughts…

I guess you have to see it to understand…

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 3, 2013, 5:26am

just found this excerpt…

One of the biggest" problems with Apple’s iPad and iOS is that it is entirely touch-based. Not that this is a problem, but iPads are mainly used for Internet browsing and some websites aren’t touch-friendly. Spry menus, rollover text, rollover images, Adobe Flash… These are all tools that work great on a desktop browser but are completely incompatible with touch-based interfaces.

Adapting your website for touch interfaces isn’t one of those “accessibility” parts of web design… It’s a necessity of web design. Approximately 21% of 1 Tech Portal viewers use either an iPhone, iPod touch, iPad, Android smartphone or tablet, or a Windows Phone. All of these devices are touch-based and will not be able to process rollover effects, drop-down menus, and even though Android can run Flash Player, it can’t take advantage of every feature."

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 3, 2013, 8:14am

what I realize now, is that the glowing rollover on the icon is fine. When on laptop and mouse over, the glow rollover appears and on ipad 1 click opens hyperlink (and glows at same time).

The problem is clearly the TARGET/SHOW/HIDE that appears in another part of the page.

I wish there was a way on IPADS to just click icon once and go to link, but if on laptop, etc when mouseover on icon, shows text, then click to go to hyperlink

I think I am getting closer but not sure…

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 3, 2013, 8:15am

i need a show/hide text that acts like a rollover!!!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Richard · March 3, 2013, 11:06pm

If you want text to behave like a rollover, you need it to respond to an action like a rollover. And you already know … iPad does not respont to that, it doesn’t use a graphic cursor. So …

You really need to figure out whenever you want to create a separate site for iPad or not.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · March 3, 2013, 11:56pm

You really need to figure out whenever you want to create a separate site for iPad or not.

Not necessarily a separate site.

Why not use the mobile redirect to take iOS users to a different index page that doesn’t utilise rollovers/show/hide etc - just straightforward links.

And if you do that then they wont see that annoying “Welcome to Hoffkids…” every time they visit!

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 4, 2013, 12:17am

those icons are on every page not just index.

Dave… why is it that an icon that is hyperlinked on my page which has a GLOW rollover does this

on non-ipad when mouse-over it glows, then when clicked goes into link
on ipad when you click once it glows fast and goes in to link

All is good BUT

when I also have that same icon have a TARGET SHOW/HIDE action with text connected to it… now on ipads they have to click it twice.

Can I get the needed info text to be like a rollover instead of mouse over (not sure if that makes sense)

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · March 4, 2013, 12:36am

those icons are on every page not just index.

True - but once they have seen/experienced them on the index page then they know what they are/do.

Because Rollover and Click are 2 separate events on a Desktop machine but iOS captures the Rollover as a Click.

On an iPad/iPhone/touch page you could have the show/hide triggered by a Click but then you lose the Click as a linking method.

Rollover and MouseOver are the same thing.

I am afraid that you have found that there are things that are not directly translatable between Desktop and touch.

Your biggest advantage is that you have largely a captive audience - your students, who are visiting often, dont need to have it reinforced what your icons mean/do.

Ask your users - is it an issue for them?

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 4, 2013, 12:45am

Dave,

interesting that you ask about them… I made a 4q question survey in survey monkey and here are the results…

when asked if they ever noticed the descriptive text above when mouseover
60% yes
40 % no
for those that saw it, I asked if it helped them to know more about an area without going in…
75% yes
25% no
when asked if they use an ipad
50% YES 10 kids
50% NO 10 kids
asked if their parents use an ipad (FYI… more parents are using the site so the descriptions are needed more than you may think- you mentioned earlier the kids get the idea what the zones are but parents need help too)

parents use ipads
80% yes
20% no

I am taking all this to mean I better fix something soon.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · March 4, 2013, 12:57am

I am taking all this to mean I better fix something soon.

Surveys only give you answers to the questions you ask.

You should really be asking more/different questions.

Do you need the descriptive text to navigate the site?

Does the interactive experience with iPad/touch devices make the site more difficult to navigate?

On subsequent visits do you require the descriptive text to help you navigate?

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 4, 2013, 1:12am

On my android (touch device) when I click the icon, 3 things happen at once

it glows (rollover)
the target text shows (millisecond)
the hyperlink works

all with one touch.

It is only iphone/ipad that the user would have to click twice and this is my problem. When I was checking it out on ipad I did not know if the icon was broken or had to click twice. annoying.

My dilemma is I know I need a slight description (due to the nature of the site and how the icons are unique, But I also know I need 1 click to go to the link on ipads.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 4, 2013, 2:21am

Hi guys,

I think I have a solution… what about this…

On my graphic icon, I make a rollover graphic. In that rollover graphic it describes the icon.

On non-ipads, when they mouseover it will show and tell what the icon is about.

On ipads with one click it will go right to the hyperlink.

Sounds like I got around it. I was not trying to get the info rollover to work on ipad-just did not want to eliminate it.

Here is my example. Click the picture of David Guetta on ipad) or mouse over.

http://www.hoffkids.com/practice.html

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

david.ledger · March 4, 2013, 10:02am

At 19:45 -0500 3/3/13, Barry Hoffman wrote:

Dave,

interesting that you ask about them… I made a 4q question survey in
survey monkey and here are the results…

In case it helps I include here a post from the Mac-L list that gives
one independent user’s view of mobile sites in general.

David

At 18:44 -0700 2/3/13, Warren Michelsen wrote:

It seems that more web sites are running a version for “mobile”
devices and they are not very friendly to iPad.

Instead of he normal web site at spectator.org, I’m redirected
automatically to mobile.spectator.org. The mobile site scrolls
side-to-side breaking up the visited page into multiple smaller
pages instead of scrolling down the entire length of the normal
page. That might not be too bad but it is impossible to pinch to
enlarge the text**, the text cannot be selected and I cannot hold
down on a link to get the pop-up menu allowing me to open the link
in a new tab. All-in-all, a BIG step down in functionality.

Then today while visiting ABC news, I find them doing the same thing
– redirecting me to a lame mobile version that scrolls sideways and
which does not allow me to pinch to enlarge text.

In desktop Safari, there is a development menu that allows me to set
the User-Agent so Safari can masquerade as another browser. Is there
any similar thing in IOS Safari? I’d really prefer that web sites
ignore the fact that I’m on a mobile device. Whatever mobile devices
these mobile sites are designed for must be pretty limited.

**
Actually, you can enlarge the text by pinching but it reverts when
you remove your fingers. So I have to hold my fingers on the screen,
partially obscuring the text I’m trying to read. That and, for some
inexplicable reason, the page contents rotate if I don’t keep my
fingers just-so.

–
David Ledger - Freelance Unix Sysadmin in the UK.
email@hidden
www.ivdcs.co.uk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · March 4, 2013, 2:13pm

How about this: instead of coach-text for each element on mouseover, add a help button on the page somewhere that exposes those everywhere when requested. Look at the interface of GarageBand on the iPad or iPhone – it’s a powerful, and space-saving trick.

Draw your coach-text elements as individual layered HTML boxes. Give each one the classname ‘help’ (use the AddSelector Action or the Item / Extended dialog for this step). As a shortcut, make one, set the classname, then duplicate it to make all the others.

Finally, make your help button (?) somewhere, and note the name that Freeway (or you) assign to it in the Name/ID field of the Inspector.

Apply Protaculous 2 to the page, and in the DOM Loaded Observer function editor, add this tiny script:

var help = $$('.help').invoke('hide');
$('yourHelpButtonId').observe('click', function(evt){
	help.invoke('toggle');
});

This does two things: first, hides all of your help labels when the page loads, second, responds to clicks on the help button (graphic) and toggles (shows or hides, depending on initial visibility) the coach text elements, all at once.

Walter

On Mar 3, 2013, at 9:21 PM, Barry Hoffman wrote:

Hi guys,

I think I have a solution… what about this…

On my graphic icon, I make a rollover graphic. In that rollover graphic it describes the icon.

On non-ipads, when they mouseover it will show and tell what the icon is about.

On ipads with one click it will go right to the hyperlink.

Sounds like I got around it. I was not trying to get the info rollover to work on ipad-just did not want to eliminate it.

Here is my example. Click the picture of David Guetta on ipad) or mouse over.

http://www.hoffkids.com/practice.html

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 4, 2013, 2:18pm

I am excited to try this Walt, because right now the only thing I know is

i really want to include the helper texts for my site
I cannot keep it as is for ipad users.

My other idea was much much simpler. It was to make the icons have ROLLOVERS (instead of target show/hie) and then when the mouse rollsover on non-ipads, would show the text and then click once for link.

On ipads one click would get them into the link. I do not care about text info for ipads just need 1 click.

Will try yours tonight!

I’ll keep you updated.
Thanks so much.

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry_Hoffman · March 5, 2013, 7:14am

Walt, I have my wife’s ipad now… is garage band on there to check out what you mentioned? Does it come installed?

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · March 5, 2013, 2:03pm

No, it’s a $10 app, IIRC.

Walter

On Mar 5, 2013, at 2:14 AM, Barry Hoffman wrote:

Walt, I have my wife’s ipad now… is garage band on there to check out what you mentioned? Does it come installed?

Barry

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options