Re: [WSG] Mobile sites
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
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
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
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
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
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?
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
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?
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
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 ***