Re: [WSG] More on spam traps

2012-08-22 Thread Oliver Boermans
Hi Bob,

A few points:
- The form submission was likely posted without JavaScript
- There is no point confronting a robot with the reality of it’s existence

Look into writing a filter on your email inbox or server that can
eliminate such messages without your intervention.

Don’t give up :)
Ollie
--
@ollicle

On 22 August 2012 21:07, coder co...@gwelanmor-internet.co.uk wrote:
 I have recently attempted to 'trap' spammers who use autofilling tactics on
 the site at www.gwelanmor-internet.co.uk. This is written in html5 and uses
 a mixture of simple tests to validate the form.  However, yesterday I recvd
 a mail thus:

 

 name

 igmgrtasel

 email

 hidden

 -9

 comments

 CaWePF a href=http://ipdszgwutyvp.com/;ipdszgwutyvp/a,
 [url=http://fkpbtvpaxitv.com/]fkpbtvpaxitv[/url],
 [link=http://rtcdalwdjrkb.com/]rtcdalwdjrkb[/link], http://xsejahukjzdr.com/

 send

 send message .

 

 The script I used to validate the form is this:


 script type=text/javascript
 function validateForm()
   {
   var x=document.forms[contact][email].value;
   var atpos=x.indexOf(@);
   var dotpos=x.lastIndexOf(.);
   if (atpos1 || dotposatpos+2 || dotpos+2=x.length)
  {
  alert(This is Not a valid e-mail address);
  return false;
  }
 //
   var y=document.forms[contact][hidden].value;
if (y==null || y==)
{
return true;}
   else
{
 alert(I think you are a machine)
 return false;
}

 }
 !--// --
   function check(node)
{
 var re = new RegExp('[\[\\]]', 'g');
 document.getElementById('send').disabled = re.test(node.value);
}
 /script

 and it works locally and online. However the mail I quote from above is
 completely unaffected.  Does this mean I give up trying, or what?


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] list heading - best practice?

2012-03-07 Thread Oliver Boermans
On 6 March 2012 09:20, Dan Freeman dan.free...@lexi.com wrote:
 How about in HTML5?

 section
     headerSome Title/header
     ul
     liItem 1/li
     liItem 2/li
     liItem 3/li
     /ul
 /section

 OR:

 section
     h?Some Title/h?
     ul
     liItem 1/li
     liItem 2/li
     liItem 3/li
     /ul
 /section

How do people feel about a definition list instead for this?

dl
dtSome title/dt
ddItem 1/dd
ddItem 2/dd
ddItem 3/dd
/dl

Ollie
--
@ollicle

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Expected behaviour of links to external websites

2011-12-28 Thread Oliver Boermans
This subject and me have some history so please excuse me if I get a
little ranty. I’ll do my level best to be rational and on topic. Here
goes…

To my mind this comes down to a very simple question: What will the
user of the website (or piece of software) you are building expect to
happen when they click the link? Broadly speaking I believe if you are
providing a surprise you need a good reason to do so.

If by performing an action that causes something unexpected to happen,
an inexperienced users confidence in their ability to use and
anticipate how your software works will be eroded. When you surprise
an experienced user they are more likely to blame the software rather
than themselves for the annoyance. Either outcome is not desirable.

Surprise can be wonderful. Essential, for example, to an effective
ending to any great movie. I love useful surprises built into software
that anticipate my needs. Opening a new window automatically is hardly
a delight.

The only time I have found it useful for a window to open in fresh
browser chrome is where I have a need to see the information on both
pages simultaneously. These kind of “pop-up” windows tend to be
significantly smaller than the window that launched them. After all
the website designer couldn’t presume to know the size of my monitor!
These are the kind of utility windows are commonly seen within desktop
software. On a website they have been made largely redundant by
JavaScript libraries that make it easy to load or reveal information
or options within the page to which they have a direct relationship.

There is a different (almost opposite) reason many people want links
on their web page to open in a new window. This is the one that I find
most annoying. They want visitors clicking a link on their site to
notice the new window and read it to mean something like:
“The link I just clicked is to a website separate to that which I was
just looking at. I won’t want to linger there long. It’s a
distraction. I’ll pop my head in for a little peek. When I’m done in a
moment I can just close this new window to come back to the more
important website and continue along my way.

A little presumptuous don’t you think?

That other website may be exactly what I was looking for. If not,
consider what happens when I can’t see the first site (now concealed
under the new window) and I reach for the most useful button in my
browser – the back button. Nothing. By opening a new window have
created a new thread of browsing history for me. If I was an
experienced user I would know and understand what happened and recover
quickly. I would also know how and when to open a fresh window on my
own (I don’t need your help with the items on my desk thank-you). If I
was new to this internet thing I may not understand such
technicalities and feel needlessly frustrated.

I’d love to be able to pull out some user testing that supports my
take on this. Sadly I cannot – so take it as experienced opinion and
consider the specific context you are working in. Here’s an exception
to consider right in front of me. GMail. It is not surprising to me
that the links open in a new window because in my experience my email
application does not disappear when I click a link in an email.

To avoid the surprise you may inform us with phrase or an icon
alongside a link that will open in a new window. If in doubt, keep it
simple and do what people expect. Use a regular link. Keep the
surprises to the twists of action thrillers.

Thankfully pop-up windows don’t kill people.

Happy New Year when it comes
Ollie
--
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Using ellipsis to indicate truncated overflow content

2011-11-23 Thread Oliver Boermans
You could possibly use JavaScript to implement it in browsers that don’t 
support it.
I’ve seen a few jQuery plugins written for the purpose. For example:
http://dotdotdot.frebsite.nl/

I’ve not used it myself.
HTH
Ollie

On 23/11/2011, at 4:13 PM, Ben Buchanan w...@200ok.com.au wrote:

 text-overflow: ellipsis?
 http://www.quirksmode.org/css/textoverflow.html
 Thank you, yes, the text-overflow property is great but does not work in
 Firefox 3.6. Do you know of a work-around for Firefox.
 
 Unless you have a really massive FF 3.6 userbase that you know is
 blocked from upgrades, I'd say use it anyway.
 
 People regularly use things that don't work in IE - it doesn't stop
 being Progressive Enhancement just because Firefox was the weakest
 link in this case :)
 
 cheers,
 Ben
 
 -- 
 --- http://weblog.200ok.com.au/
 --- The future has arrived; it's just not
 --- evenly distributed. - William Gibson
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Wrapping text before float drop

2011-11-03 Thread Oliver Boermans
One more:
-
Option 4 - overflow: hidden instead of float on the second div
-
http://annevankesteren.nl/2005/03/clearing-floats

Although you may need to set some form of width on the first for this to work.

On 4 November 2011 06:51, Russ Weakley r...@maxdesign.com.au wrote:

 Think of how two columns work in a table, when they have no specified width. 
 They adjust to the size of the content and the available width, and wrap 
 their content if the available width is reduced.

 This should be easy in CSS, no?


 The simple answer is that floats are not ideal in this situation.

 There are three ways you
 could solve this problem - but as Hassan mentions, they are best done without 
 using float. All three solutions may present issues in older versions of 
 IE. Without knowing exactly what you are trying to achieve, it is hard to 
 recommend one of these solutions.

 -
 Option 1 - display: table, display: table-row, display: table-cell
 -
 http://www.w3.org/TR/CSS2/visuren.html#display-prop

 For example, you could make the two containers operate like table cells. I am 
 not really a fan of this approach, but it would give you the behaviour you 
 are looking for.

 http://maxdesign.com.au/jobs/example-stevio/table.htm

 -
 Option 2 - columns
 -
 http://dev.w3.org/csswg/css3-multicol/

 -
 Option 3 - Flexible Box
 -
 As Hassan mentioned, you could use the flexible box module as a solution
 http://dev.w3.org/csswg/css3-flexbox/


 Not sure if any of these help...
 Russ





 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] a:link behaviors issues

2011-07-29 Thread Oliver Boermans
Mathew is asking the pertinent question.
There are five pseudo selectors to consider on links:

:link
:visited
:focus
:hover
:active

By applying the font attributes to link and visited you leave the others 
undefined. You could apply the attributes to all states, although the more 
efficient solution is to only use pseudo selectors to apply attributes you wish 
to differ between these states, anything else ought to be set to the element or 
inherited from a parent.

.navbar {
font: ...
}
.navbar a {
text-decoration: none; /* applied to all link states */
}
.navbar a:link {
color: blue;
}
.navbar a:visited {
color: purple;
}


Hope that helps.
Ollie

--
@ollicle

On 28/07/2011, at 8:51 AM, Mathew Robertson mathew.blair.robert...@gmail.com 
wrote:

 This is going to sound like an odd question, but have you also applied this 
 style to the non-psuedo-selector (ie just 'a')?
 
 regards,
 Mathew Robertson
 
 On 28 July 2011 08:42, olivia antonin olivianto...@hotmail.com wrote:
 Hi ,
  
 I don't understand, my navigation bar, on my mac they behave as I want, so 
 that the font size remain the same , as well as when visited.
  
 a:link, a:visited{
 font: 13px  Myriad pro, Lucida Grande, Calibri, sans-serif;
 color:#686868;
 text-decoration: none;
 }


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


Re: [WSG] Site test?

2011-05-21 Thread Oliver Boermans
The transition is smooth and the paging buttons just big enough to hit with my 
finger on my iPad. Agree regarding the blue on blue nav. Clearly you have not 
finished so I'll leave it there.

--
@ollicle

On 22/05/2011, at 7:03 AM, Andrew Maben and...@andrewmaben.com wrote:

 Looks good on my Touch, except the blue on blue nav is a bit hard to read. 
 The transtions look great!


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] question about screen reader behavior when pulling in content via Ajax fetch

2011-03-26 Thread Oliver Boermans
Hi tee

On 26/03/2011, at 4:50 PM, tee weblis...@gmail.com wrote:

 I have a small login  popup box, and is using Ajax fetch to pull in the login 
 page. Due to the way the system works, the login page default is to use a 
 page template instead of just the chunk of login code placed in a header or 
 left/right column, though can be done too but  my view is that the login code 
 shouldn't be in every page since it's to be showed in a modal window so I 
 want it retrieves via Ajax. 
 
 I created a template, strip out dtd, body and all other areas except  the 
 code that retrieves the content area (where it will then load the login code 
 template), this all works well.  My concern is, will it be any problem for 
 screen reader read the  login page's info, enter email which the page has no 
 dtd, body and html tags?

I can't answer your question directly, but this is a familiar scenario in which 
you have some alternative approaches available to you could employ. 

Is your concern for when and if the login page is loaded directly rather than 
via Ajax?

Rather than stripping the page elements from your login page make two versions 
of the form:
One designed to be viewed as a standalone page (complete with page elements);
And another that only includes the login form portion you wish to load with 
Ajax.
Link to the first in your page in your HTML and use JavaScript to load the 
other instead when the link is clicked.

Alternatively, keep your login page as one file designed to be viewed 
independently, and use JavaScript to strip out the unneeded elements before 
inserting the form into your page. 

This is really easy with jQuery. The load method allows you to append the URL 
to the page you wish to load with a selector for the portion of the the 
requested page you wish to insert (with a space to separate them) eg: 
login.html #loginform where “lo inform” is an id on an element that contains 
your form. JQuery discards the rest. Note that the whole page is loaded even if 
it is not displayed so if you have a lot of navigation or unrelated markup in 
your page this approach may be slower to load even if it is otherwise elegant.

Broadly the term Hijax is an appealing title for this if you are looking for 
more on it.

I should also point out I have not tested the accessibility of a form loaded 
into a page in this manner, so I cannot comment on how it might behave in a 
screen reader./disclaimer

hth
Ollie
--
@ollicle

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

2011-03-06 Thread Oliver Boermans
An alternative to get the first dd in a dl:

:first-child + dd { ... }

I'm not sure how browser support for '+' compares to 'first-of-type'.

Cheers Ollie
--
@ollicle

On 06/03/2011, at 20:33, tee weblis...@gmail.com wrote:

 http://jsbin.com/apate4/9/
 
  dt, dd { border-top:1px solid #555;float:left }
  dt:first-child {border-top:0}
dd:first-child {border-top:0}
  h2, p {background:#ddd;padding:15px;margin:5px}
  h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
 two individually as I thought maybe they can't be grouped, but it makes no 
 differences.
 
 According to the spec, it should work.
 The :first-child pseudo-class represents an element that is the first child 
 of some other element.
 http://www.w3.org/TR/css3-selectors/#first-child-pseudo
 
 Assigning a class to the element is of no help.
 
 
 tee
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] best formatting for alt text

2010-11-12 Thread Oliver Boermans
On 13 November 2010 11:33, Janice Schwarz jan...@geekartist.net wrote:
 Alt text is not formatted. You just have alt=your description here. And
 that's it.
 Janice

 On Fri, Nov 12, 2010 at 6:23 PM, cat soul cats...@thinkplan.org wrote:

 Hello;

 I am assuming that alt text will be heard and not read. If this is so, it
 need only be there and could be any size, correct?

Alt text does become visible when the image has yet to, or has failed,
to load. In which case it is most certainly worthy of consideration. I
believe (in most browsers?) this text will inherit any font attributes
assigned to the IMG tag or it’s parents.

On the other hand you have absolutely no control over the display of
the title attribute. It doesn’t even increase in size when fonts are
enlarged!

Ollie
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-29 Thread Oliver Boermans
I don't have any personal experience with this stuff but your
discussion rereminded me of a page I bookmarked recently:
http://jdbartlett.github.com/innershiv/

Sorry if it is not relevant, have not read the whole thread in detail.

Hope it helps!
--
Cheers Ollie
@ollicle

On Wednesday, September 29, 2010, Rob Crowther robe...@boogdesign.com wrote:
 On 28/09/10 23:41, Steven Tan wrote:

 Strange, I expected the innerHTML part to fail. Any idea why that works?


 Nope! I expected one or the other of the two (DOM and innerHTML) to fail as 
 surely jQuery is using one or other of them underneath?

 I haven't had time to dig in to the jQuery source and figure out what it's 
 doing, but I guess it's wrapping the DOM approach to make it look like 
 innerHTML, and something is getting lost in translation.

 Rob


 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] @import and IE7

2010-07-24 Thread Oliver Boermans
Hi Cole

On Saturday, July 24, 2010, Cole Kuryakin c...@koisis.com wrote:
 Hello All -

 I've finally decided that I'd like to link/link a single base style
 sheet (base.css) into my projects.

 The base.css would then @import various other style sheets which would
 define the dclarations for project layout, type, color, forms, etc.

I would not recommend you separate your CSS files for purely
organisational purposes. Do this _within_ your files. Less files
loaded by the browser means faster pagel loading. @import is also bad
for performance. Where you must separate your files it is better to
have multiple link elements. The other advantage of avoiding @import
is to see what CSS is being loaded into the page it is only necessary
to look in the HTML. This can save someone else a lot of time
troubleshooting your site later.

Before Firebug l would separate my CSS into a bunch of files, just to
reduce the time to navigate them. Now the inspector in Firebug makes
this so easy there isn't really a lot of organisation advantage in
doing so.

I hope this is helpful, even if I didn't really answer your question...

Cheers Ollie
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Overflow hidden and floated divs

2010-07-18 Thread Oliver Boermans
Hi Stevio

On 16 July 2010 00:41, Stevio redea...@freeuk.com wrote:
 My question is why does it do this? I have looked up what overflow hidden is
 meant to do and from what I read it sounds like the content should just get
 clipped at the right hand side and not be shown. Why is it causing the box
 to expand down the way?

Most basically overflow has a different effect depending on whether
dimensions are set or not. In your case you are not setting the height
on the same element that has the overflow set. If you want
overflow;hidden to clip the non fitting li try either moving the
height to the div or the overflow to the ul.

Cheers
Ollie
--
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] link rel=stylesheet question

2010-07-17 Thread Oliver Boermans
Hi Jody,

On Sunday, July 18, 2010, Jody Tate jodyt...@200okconsulting.com wrote:
 In a stylesheet link, does the order of rel, href and type affect how a 
 browser understands, loads, etc. a stylesheet?

No, the order of HTML attributes is not important; Unless you are
doing something invalid like repeating them within an element.

Best
Ollie
--
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] color contrast, success criterion 1.4.3

2010-05-03 Thread Oliver Boermans
Hi tee

On 3 May 2010 20:20, tee weblis...@gmail.com wrote:
 I need to pass a site for SC 1.4.3 and I was told some areas (especially link 
 texts) do not passed.

  I ran the site through Juice studios Color Contrast Analyser as well as 
 Color Checker Firefox extension and they fail in some areas that I find 
 suspicious. Example, the site has #333 for body background, but header/footer 
 sections use background images that are much lighter and I am pretty sure the 
 contrast is above 4:5:1

 I am not entirely sure if the person who assess the site uses Contrast 
 Analyser to evaluate the site and doesn't taken other factors (e.g. 
 background image)  into account.

It’s not likely to take images into account. Try setting a background
colour in addition to an image eg: background: #fff url(pic.img);

This is good practice regardless to ensure the text is legible when
images are disabled or fail to load for some reason.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Standards based Drupal WYSIWYG Editor

2010-03-01 Thread Oliver Boermans

On 01/03/2010, at 8:44 AM, Sam Dwyer dwyer@abc.net.au wrote:


Hope some of that helps.

(Hi to the mailing list by the way, this is my first post since I  
joined, look forward to engaging with you all)


Thanks Sam and welcome, great to get your perspective on TinyMCE, if  
you ever do dig into extending CKEditor please let us know if it lives  
up to your first impressions.


I'd be delighted to go down the WYSIWYM path if only to force those  
contributing content to think about the structure of it. Although it  
seems that knowledge of HTML is a prerequisite for the appreciation of  
markdown and the like.


Ollie
@ollicle 
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Background music on web pages

2010-02-28 Thread Oliver Boermans
Hi Lesley,

On 1 March 2010 00:55, Lesley Lutomski ubu...@webaflame.co.uk wrote:
 Thanks to all who have replied.

 The clients in question are a committee (first problem!), who all say Oh, I
 know nothing about computers/the internet but at the same time refuse to be
 guided.  Referring them to usability articles is a non-starter, because
 they'll just not look at them.  I've tried reducing the arguments to very
 basic, non-technical issues, but my powers of persuasion are apparently
 lacking.

Maybe they need a real world example. Next meeting you have with the
committee, before they arrive, hide a couple of portable stereos in
your reception. Have them playing 'pleasant' music, simultaneously.
Let them wait a little while before you bring them into the meeting
room where you have more music playing – don’t switch it off before
they ask you to :-)

 Given that I can't afford to turn down the work, I'll take on board the
 points folk have made here and promise to do the least-awful job on it I
 can!

Make the point that you are in the business of building websites which
leave a positive impression on the visitors and it would be negligent
on your part; to not point out the cons of music on a page. Where the
music is not the primary subject of the content anyway.

Failing that…I have not tried it - but something like this appears to
provide the control you would want to STOP the music:
http://www.happyworm.com/jquery/jplayer/

Perhaps if you added a mouseenter/focus event to a large portion of
the page which would switch it off. Once you know the visitor has had
enough of the 'ambience' of the site and is ready to learn more…

Good luck!
Ollie
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Standards based Drupal WYSIWYG Editor

2010-02-26 Thread Oliver Boermans
Hi James,

On 27 February 2010 03:30, James O'Neill freexe...@gmail.com wrote:

 I am not at all happy with the FCK editor. I am
 starting to look at Time MCE and Standard.

When you say FCK editor do you mean the current version?
Now called CKEditor.

Broadly, I’m very interested to hear comparisons or war stories from
anyone who has extensive experience with more than one of these
editors.

Cheers
Ollie


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Line wrap multiple select box

2010-02-18 Thread Oliver Boermans
Hi Paul,

On 17 February 2010 01:51, Paul Collins pauldcoll...@gmail.com wrote:
 I'm have a fixed width on a multiple select box. The problem is, some of the
 options are longer than the width and by default the lines won't wrap. I'm
 wondering if anyone has seen a way of making lines wrap using either CSS or
 JQuery. I've added a title to each option, so you can get the full content
 if you hover over an item, but really need the text to wrap.

I’ve used this jquery plugin successfully in the past:
http://www.givainc.com/labs/linkselect_jquery_plugin.htm

Haven’t tried this one:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Once I wrote some simple JavaScript which made the select wider upon
focus if necessary in Internet Explorer. Even with some absolute
positioning to ensure the surrounding layout wasn’t broken, the effect
was effective but a bit weird.

HTH
Ollie
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] Minimal forms or marking up a search field

2010-01-30 Thread Oliver Boermans
A practical distraction for the standardistas and accessibility gurus…

Hoping tap your brain for an alternative perspective on the simple and
common HTML scenario of a site search form.
fieldset
legendSearch this site/legend
label for=searchKeyword/s/label
input type=text id=search name=search /
input type=submit value=Search /
/fieldset

As far as I understand it this mark-up meets the requirements demanded
of such a form.
Although, in striving for simplicity, there may be significant redundancy.

My question regards the HTML and text used:
How much mark-up can be removed without breaking it?

- FIeldset / legend combination are required to meet HTML standards
and provides valuable context to my mind.
Am I missing anything?

- Sacrifice the label and add a title attribute on the text input?
fieldset
legendSearch this site/legend
input type=text id=search name=search title=Keyword/s /
input type=submit value=Search /
/fieldset

- Once supported, will the new HTML5 placeholder attribute make the
label redundant
fieldset
legendSearch this site/legend
input type=text id=search name=search placeholder=Keyword/s /
input type=submit value=Search /
/fieldset

- How many users know that they can use the Enter key to submit the form?
fieldset
legendSearch this site/legend
input type=text id=search name=search placeholder=Keyword/s /
/fieldset

- The future?
fieldset
legendSearch this site/legend
input type=search id=search name=search placeholder=Keyword/s 
/
/fieldset

Editable mark-up here
http://fixee.org/paste/bxmsvue/#url=bxmsvue

Redundancy can be a good thing, but where do you draw the line?
Looking forward to your considered thoughts and relevant experiences.

Cheers
Ollie
--
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Minimal forms or marking up a search field

2010-01-30 Thread Oliver Boermans
On 31 January 2010 13:45, Thierry Koblentz thierry.koble...@gmail.com wrote:
 You do not need fieldset nor a legend as they are intended for
 grouping form fields on more complex forms.

 I agree.
 I'd just use a DIV to wrap these form controls.

Thanks guys, I’m glad I asked this question. I was carrying around the
idea that the required element around any inputs inside a form element
was a fieldset. Seems I was wrong, any block element will satisfy the
spec.

So presuming we do away with the legend:
div id=searchform
   label for=searchKeyword/s/label
   input type=text id=search name=search /
   input type=submit value=Search /
/div

…and assuming there are no other 'search' fields in the page we need
to distinguish from. I’d like to test some further assumptions:

- Some people don’t know how to submit the query without a 'Search'
(or 'Go') button?
div id=searchform
   label for=searchKeyword/s/label
   input type=text id=search name=search /
/div
Apple seems to believe the the submit input is unnecessary
http://www.apple.com

- Now that the legend is gone I should use the label to describe the
purpose of the text field rather than what one should enter in it?
Everyone knows you put keywords in a search field, right?
div id=searchform
   label for=searchSearch/label
   input type=text id=search name=search /
/div

- Is including the keywords hint in the title attribute useful to anyone?
div id=searchform
   label for=searchSearch/label
   input type=text id=search name=search title=Keyword/s /
/div

- Does everyone agree this is taking simplicity too far?
div id=searchform
   input type=text id=search name=search title=Search /
/div

Thanks for indulging my hairsplitting.

Ollie
--
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Accessibility does not matter!

2010-01-29 Thread Oliver Boermans

On 30/01/2010, at 11:04 AM, Peter Mount i...@petermount.com wrote:

Even with closed systems like intranets you're playing with fire  
if you don't have regard for accessibility.


Agreed. Web applications built ‘for' closed intranets are the reason  
so many corporates still have IE6 installed. There are perfectly good  
selfish reasons why companies ought to consider accessibility. It's  
about ensuring things just work.


Ollie 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] How to resolve z-index problem for select box in IE 6

2010-01-28 Thread Oliver Boermans
On 28 January 2010 17:32, Brajesh Patel brajeshpate...@gmail.com wrote:
 I am getting Z-index problem in IE 6.
 back ground select box are displaying on the popup when popup appear, it's
 working fine on the firefox but getting problem in IE 6,
 Please suggest solution this is major issue for  me.

Iframes are the accepted solution for covering select elements in IE 6.

JavaScript is recommended to prevent burdening newer browsers with the
fudgy mark-up.

Something like this makes it easier:
jquery.bgiframe docs [jquery plugin]
http://brandonaaron.net/jquery/plugins/bgiframe/docs/

[the above link it timing out for me right now - should be good though
- maybe worth trying tomorrow if it still doesn’t work]

hth
Ollie


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS off button

2010-01-27 Thread Oliver Boermans
On 27 January 2010 17:55, Jayachandran Kandasamy
jayachandran.kandas...@gmail.com wrote:
  $(document).ready(function(){
   $(input.offButt).click(function() {
    if($(head:has(style))  $(head:has(link))){
 $(head:has(style)).remove();
 $(head:has(link)).remove();
    }
   });
  });

I’m pretty sure this will remove the head element and everything in it.
Link elements are also used for more than just loading CSS so you
wouldn’t want to remove them without checking the type or rel
attribute too.

Regarding the JavaScript
http://api.jquery.com/
http://forum.jquery.com/

Cheers
Ollie


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS off button

2010-01-22 Thread Oliver Boermans
Hi Kevin

On 23 January 2010 06:52, Erickson, Kevin (DOE)
kevin.erick...@doe.virginia.gov wrote:
 Could anyone please tell me if there is a right way to put a clickable
 button in a web page that will turn off all CSS?

Why do you want to switch off CSS?
Reasons aside, the simplest method that jumps to my mind is to use an
empty alternate stylesheet and some JavaScript to switch between it
and the default [presuming you have all your style in the one external
CSS file].

This rather old article explains the concept
http://www.alistapart.com/articles/alternate/

If you have the option, a server-side approach as Paul suggests would
be more reliable as it would work without JavaScript.

Comes back to why!?

Hope that helps
Ollie


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] 8 invites for Google Wave

2009-12-03 Thread Oliver Boermans
30 wave invites spare.

Don’t reply here!

If you would like one email me directly or DM me on twitter:

Ollie
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] site feedback

2009-11-12 Thread Oliver Boermans
Hi Marvin

2009/11/12 Marvin Hunkin startrekc...@gmail.com:
 here'sthe current version and hopefully the final version.
 now from a accessibility view point, and a layout and content viewpoint.
 what do you think?

It has a plain and unsophisticated look but there’s a certain honesty
that comes with that may prove to be appropriate to the business of
selling fresh produce.

I believe the home page would benefit from a descriptive paragraph
which introduces the business and what Joe has to offer, This would
make the most sense near the top of the home page with the first
image. A summary of the content that appears on the history page would
be appropriate. I’d include a read more link to the history page at
the end of this text. Actually I would suggest you rename the history
page to 'About Joe’s'.

The banana icons used on the main navigation are too complex to be
used on every link. Their repetition draws attention away from the
links themselves rather than helping people visually distinguish
between them. If you are willing to do some additional work, I would
suggest you only place the icon in front of the link to the current
page. The best way to distinguish this link from the others is to not
have it linked at all. Instead of the [a] use a [span] or [strong] for
emphasis. This will also provide a usability improvement by preventing
the confusion that is created when one follows links to a page already
loaded.

Are the specials going to change? If so you’ll need to be careful to
prevent too much text being added to the description of each special.
This is a potential problem because you are setting the height of the
specials divs – additional content may be obscured if it doesn’t fit
in this height. If this content is going to be regularly changed ask
this list about alternative layout techniques you could use to avoid
this problem.

One more point regarding the navigation. Personally I don’t think it
is necessary to repeat the navigation at the top and bottom of the
page. The 'Top of page' link ought to be adequate for those looking
for the navigation in the footer. It would be better I think to split
the navigation into two sets to provide the most important links in
the site more emphasis. Very few visitors to the site will be looking
for Copyright or Credits information so take these out of the
navigation at the top of the page and put them in the footer.
Similarly, as Nathanael suggested, the links to other Fruit and Veg
sites is another candidate for the footer unless you really see this
being a core reason people will visit Joe’s web page.

I hope you find my criticisms constructive.
Ollie
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] strange behavior in IE7

2009-11-10 Thread Oliver Boermans
Hi Ido

2009/11/10 Ido dekkers idekkers@gmail.com:
 I'm having trouble with this table which is part of a page not shown:
 http://test3.dekkers.net/test.htm

 in IE7 only when hovering over the table different cells get colored red?
 now i know the first css rule causes it. what i don't know is why ??
 it has nothing to do with the table and is targeting a different element in
 the page..

Weird indeed!
I would put that down to general IE bugginess.

As an alternative approach you should use TH instead of TD for the
cells you wish to style differently.

tbody th {color:red;}

Or you could try COL/COLGROUP as a means to distinguish them.

hth

Ollie
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Is pressing Enter to submit (or not) on forms an accessability issue? [SEC=UNCLASSIFIED]

2009-10-21 Thread Oliver Boermans
2009/10/21 Chris Vickery chris.vick...@privacy.gov.au:
 In this case it’s for an input field, not a textarea, and enter will still
 not submit (unless you tab out) so in this case makes it contrary to ‘native
 browser behaviour’.

This would potentially create annoyance to users of Safari on an
iPhone or iPod Touch.
When you have a text input focused (in contrast to a textarea) Mobile
Safari displays a big blue [ Go ] button in the bottom right corner
which one would expect will submit the form (equivalent to hitting
Enter).
If Enter does not submit the form it will be necessary for Mobile
Safari users to leave the 'form mode' by clicking [Done] and then
manually tap the submit button. I would consider this unexpected
behaviour a usability issue at very least.

Cheers Ollie
--
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [Spam] :Re: More than one H1? (was [WSG] Out of Office AutoReply: WSG Digest)

2009-10-16 Thread Oliver Boermans
2009/10/16 Adam Martin ajmartin...@gmail.com:
 Again the logo is usually only the most important thing to the owner - not
 the customer - the customer will recognise if they are on the right site or
 not.

I believe it”s appropriate to represent the logo as a h1 on a site’s
home page, unless you are using a positioning statement in the page
title of home page. In which case it would be best to apply the h1 to
that within the page. HTH
--
Ollie Boermans
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Re: More than one H1?

2009-10-16 Thread Oliver Boermans
2009/10/16 Jason Grant ja...@flexewebs.com:
 Ollie you are threading a dangerous ground there.
 Explained here why you are
 wrong: http://www.flexewebs.com/semantix/semantic-uses-of-h1-h2-h6-html-tags/

Good link for this thread Jason. Although I don’t understand why the
company name would be inappropriate semantically to use as the h1 on
the home page.

The home page represents the company. If I Google for a company with
it’s name as a keyword I would expect to find their home page. Using
it on every page of the site is a different matter.

For this to work the 'logo' would be text which would be styled with
CSS to look like the logo in a browser. As an alternative I expect the
alt text of an image would likely suffice (not so sure on this one).

To put on my hat with horns to present a possible issue with my own
suggestion; I would point out that using a different structure between
pages of a site can be confusing for a screenreader user; But then,
home pages often are a different structure to topic-specific sub pages
anyway so I don’t expect anyone would get upset about it.

I’ve been doing this for a few years now so if I’m wrong I’m keen to
be corrected!

…

The defence for using two h1 elements in a page makes some sense to me
from the same perspective that it makes sense to put the company name
in every page title alongside the subject of the page eg: [title]SEO
and semantics - WSG blog[/title].

You have to draw the line somewhere though, as too much emphasis is no
emphasis at all.

Interesting discussion - thanks to those at WDS09 who introduced me to
this group!
--
Ollie Boermans
@ollicle


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***