Re: [WSG] Mobile sites

2012-05-16 Thread Phil Archer
I think it's worth noting that there is a lot of commonality between 
accessibility and mobile optimisation. When the W3C Mobile Web Best 
Practices Group began its work (way back in June 2005 - I'm feeling old) 
our starting point was WCAG. They're not the same, of course, but the 
ways of thinking do share a lot. Designing accessible sites means making 
very few, if any, assumptions that given features will be available to 
all your users and therefore coding to offer various 
fallbacks/alternatives. On mobile, you're targeting devices that *may* 
be restricted in their capabilities.


Others have advocated looking at logs to see which devices your users 
are accessing the site with. That's always an important data point of 
course, but beware: if the only mobile devices accessing your site are 
top end smartphones that could be telling you that those are the only 
mobile devices that *can* use your site, not that others (the majority) 
are not interested in what you have to offer.


I agree the RWD gets you a long way - we advocate and teach it on the 
W3C Mobile Web course that Frances de Waal and I run - but it only 
answers style adaptation. A properly mobile-friendly site is likely to 
offer (slightly) different content too. At a simple level this means 
different sized images but it's deeper than that. Mobile users will 
often have different priorities than those browsing on a desktop and 
that can affect what you present as well as how you present it.


My mantra is content adaptation should be done server side, style 
adaptation is done client side. Do it right and you almost certainly do 
not need a separate mobile site. More ramblings at 
http://philarcher.org/diary/2011/mobilecontentandstyle/


HTH

Phil.

--


Phil Archer
W3C eGovernment
http://www.w3.org/egov/

http://philarcher.org
@philarcher1


On 16/05/2012 03:43, grant_malcolm_bai...@westnet.com.au wrote:

Hello,

I was wondering whether having a dedicated mobile site represents an 
improvement with regard to accessibility and standards, or whether it is 
acceptable to have a single site that is adaptable to different screen widths 
(e.g. by means of CSS media queries). Of course, setting up a separate mobile 
site requires additional work and therefore expense.

I would be grateful for comments.

Thank you and regards,

Grant Bailey

***
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
***



[WSG] Re: WSG Digest

2012-05-16 Thread Dominic Hey
Hi Grant,

You could have a dedicated mobile site (using a sub-domain and server-side
client detection, for instance) with zero regard paid to accessibility
*or*standards.
Responsive design (using media queries, for instance) follow the DRY
principle - Don't Repeat Yourself. Rather than think about mobiles/desktops
I prefer to think of responsive design as catering to any number of devices
(think forward a few years to when we see 3G/web browsers built in to car
dashboards etc., or as the browsers built into televisions improve). For a
lot of websites (e.g. Skysports.com) the cost to integrate responsive
design into their existing templating system far exceeds the cost of
creating a dedicated mobile sub-domain. There should still only be one data
source however, for both implementations.

Regards,

Dominic


On 16 May 2012 13:48, wsg@webstandardsgroup.org wrote:

 *
 WEB STANDARDS GROUP MAIL LIST DIGEST
 *


 From: grant_malcolm_bai...@westnet.com.au
 Date: Wed, 16 May 2012 10:43:03 +0800 (WST)
 Subject: Mobile sites

 Hello,

 I was wondering whether having a dedicated mobile site represents an
 improvement with regard to accessibility and standards, or whether it is
 acceptable to have a single site that is adaptable to different screen
 widths (e.g. by means of CSS media queries). Of course, setting up a
 separate mobile site requires additional work and therefore expense.

 I would be grateful for comments.

 Thank you and regards,

 Grant Bailey

 **
 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
***

[WSG] positioning help, please

2012-05-16 Thread ron zisman
http://ricochet.org/new_floradise/arrangements.html

http://ricochet.org/new_floradise/plants.html

hey all,

i'm having trouble positioning a background image. on the arrangements page, 
the two arrows have a blue border.

the first problem i'm having is that bbedit, safari, firefox and opera (on a 
mac) all position it in a different location (#pre-nex).

the desired result is to align with the left margin of the text above it.

i would truly appreciate an explanation of where i'm going wrong.

rgds,
ron


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



Re: [WSG] positioning help, please

2012-05-16 Thread Mladen Barac
simple

you must put something like this:
border:none

for example
if image is link, then:
*
*
*a img {border: none; }*

or:

*a:link {border:none}*
*
*
*I hope this could be helpful. Try!*
*
*
On Wed, May 16, 2012 at 7:00 PM, ron zisman ronzis...@mac.com wrote:

 http://ricochet.org/new_floradise/arrangements.html

 http://ricochet.org/new_floradise/plants.html

 hey all,

 i'm having trouble positioning a background image. on the arrangements
 page, the two arrows have a blue border.

 the first problem i'm having is that bbedit, safari, firefox and opera (on
 a mac) all position it in a different location (#pre-nex).

 the desired result is to align with the left margin of the text above it.

 i would truly appreciate an explanation of where i'm going wrong.

 rgds,
 ron


 ***
 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] positioning help, please

2012-05-16 Thread ron zisman

On May 16, 2012, at 1:32 PM, Mladen Barac wrote:

 simple
 
 you must put something like this:
 border:none
 
 for example
 if image is link, then:
 
 a img {border: none; }
 
 or:
 
 a:link {border:none}
 
 I hope this could be helpful. Try!

thank you mladen. i put the border on to better see the position. it is 
positioning that i'm having trouble with.

rgds,
ron
 
 
 On Wed, May 16, 2012 at 7:00 PM, ron zisman ronzis...@mac.com wrote:
 http://ricochet.org/new_floradise/arrangements.html
 
 http://ricochet.org/new_floradise/plants.html
 
 hey all,
 
 i'm having trouble positioning a background image. on the arrangements page, 
 the two arrows have a blue border.
 
 the first problem i'm having is that bbedit, safari, firefox and opera (on a 
 mac) all position it in a different location (#pre-nex).
 
 the desired result is to align with the left margin of the text above it.
 
 i would truly appreciate an explanation of where i'm going wrong.
 
 rgds,
 ron
 
 
 ***
 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
 ***



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

RE: [WSG] positioning help, please

2012-05-16 Thread Kepler Gelotte
 the first problem i'm having is that bbedit, safari, firefox and opera (on
 a mac) all position it in a different location (#pre-nex).

Hi,

Try 'position: relative' for #main (the containing div of #pre_nex).

Best regards,

Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904




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



[WSG] Related content labelling and styling?

2012-05-16 Thread Rick Hill
We have a feature in our CMS that allows users to add a spotlight box of 
related content to the right of the main content. This is not a right column 
(which we also allow) but a floated block of content. Visually this works well 
and the user base wants the feature. Unfortunately, there are accessibility 
issues as it is now implemented. First, in order to get the content div to 
float right, it must appear above the content it is related to in the HTML. 
Second, content block starts with a header 3. As a result, the resulting HTML 
markup ends up tagged incorrectly. The H3 ends up in the middle of the main 
content and all of the main content below is therefore associated with the h3.

The ideal would be to position  the related content at the bottom of the 
associate main content and then position it at the top right of the main 
content. So visually it would look the same but the HTML reading order and 
header nesting would be correct. We cannot find and CSS solution that will do 
that. Anyone?

Assuming that is the case, is there a way to have this content appear above the 
main content that it is related to, but NOT apply a header yet label it in  
semantic fashion that indicates its relationship to the document? ARIA? div  
role=complementary 

There are some limitations to what we can provide given this is a CMS system 
that services many sites. However, we have reasonable control of how the output 
is generated and would prefer to provide this feature yet make some reasonable 
concessions for accessibility.

A sample page using this spotlight feature is at 
http://cms.ucdavis.eduhttp://cms.ucdavis.edu/
–––
Rick Hill, Web CMS Administrator
University Communications, UC Davis
–––
Rick Hill, Web CMS Administrator
University Communications, UC Davis
(530) 752-9612
http://cms.ucdavis.edu
–––
Web CMS assistance at cmsh...@ucdavis.edumailto:cmsh...@ucdavis.edu
–––



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


Re: [WSG] positioning help, please

2012-05-16 Thread ron zisman

On May 16, 2012, at 2:11 PM, Kepler Gelotte wrote:

 the first problem i'm having is that bbedit, safari, firefox and opera (on
 a mac) all position it in a different location (#pre-nex).
 
 Hi,
 
 Try 'position: relative' for #main (the containing div of #pre_nex).
 
 Best regards,

mercy, mercy..brought everything in line. thanks much.

ron
 
 Kepler Gelotte
 Neighbor Webmaster, Inc.
 156 Normandy Dr., Piscataway, NJ 08854
 www.neighborwebmaster.com
 phone/fax: (732) 302-0904
 
 
 
 
 ***
 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] Related content labelling and styling?

2012-05-16 Thread Russ Weakley
On 17/05/2012, at 4:23 AM, Rick Hill wrote:

 The ideal would be to position  the related content at the bottom of the 
 associate main content and then position it at the top right of the main 
 content. So visually it would look the same but the HTML reading order and 
 header nesting would be correct.  We cannot find and CSS solution that will 
 do that. Anyone?
 

Isn't this a simple matter of playing with the containers and floats.

Here is an example where four containers (col1, col2, col2a and col2b) match 
the nesting of yours, but the right column (in your case the column where you 
want the highlighted info) is last in the source order:

http://maxdesign.com.au/jobs/example-rick/

This is easily achieved by floating both col2a and col2b to the left

HTH
Russ



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



[WSG] Re: WSG Digest

2012-05-16 Thread Vicki Taylor
Hi, Grant,

I'd recommend you have a look at this:  http://cssgrid.net/

Do it once, do it well, make it flexible.   :-)

V.


On 16 May 2012 22:48, wsg@webstandardsgroup.org wrote:

 *
 WEB STANDARDS GROUP MAIL LIST DIGEST
 *


 From: grant_malcolm_bai...@westnet.com.au
 Date: Wed, 16 May 2012 10:43:03 +0800 (WST)
 Subject: Mobile sites

 Hello,

 I was wondering whether having a dedicated mobile site represents an
 improvement with regard to accessibility and standards, or whether it is
 acceptable to have a single site that is adaptable to different screen
 widths (e.g. by means of CSS media queries). Of course, setting up a
 separate mobile site requires additional work and therefore expense.

 I would be grateful for comments.

 Thank you and regards,

 Grant Bailey

 **
 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
***