Entries Tagged as “CSS”
Applications to help you create more accessible designs
Back in May, I wrote an article on tips for improving your web design. One small piece of that article discussed converting your design to greyscale so that you can get an idea of your color contrast ratio. Though I believe this is important to do, it is a bit time consuming when your in a design grove, and speed is of importance. Sometimes I just want a quick preview to see where I was going or how I was doing thus far in my process.
I remember seeing an online contrast analyzer and decided to look it up to see what it was about. My search turned up quite a few helpful tools that I just had to share with the rest of you. Before I get to the tools, let me take a minute to explain why we would want tools for testing contrast ratios in our designs.
→ Respond NowTags: Design · Freebies · Software · usability · CSS · Accessibility
iPhone Detection Scripts
With iPhones being all the rage these days, I am wondering if mobile versions of your pages might be useful. Viewing a site on an iPhone looks exactly as it does on your desktop. This is all well and good, but sometimes pages can be bloated with images, javascript libraries, and other markup that is not as important to your visitors. I am also a bit upset that the iPhone ignores the css media type of handheld. I wish there were an option to force Safari to render handheld styles as default, but I could not find any option for it. So I set out on a quest to find some alternatives for my iPhone experience.
Coldfusion – I was sure there was a way to get something from the cgi.http_user_agent but not sure if it would just read the agent as webkit. I didn't want to kill Safari desktop users, that would be bad. The Awesome Coldfusion Jedi Ray Camden already had a solution so here it is: (Sorry for the comments around the actual code. Seams that MangoBlog wants to parse the code and run it causing an error. So remove the comments from the cfif statement to make it work. I hope to get a fix for this soon)
<!--- detect iphone --->
<!---
<cfif findNoCase("iphone", cgi.http_user_agent)>
<cflocation url="iphone.html" addToken="false">
</cfif>
--->
Javascript, PHP, and MVC – I ran across a site called iPhone Toolbox that has a ton-o-info on developing for the iphone. (I will be spending some time here for sure.) There is a set of scripts linked up there dealing with how to detect an iPhone users that pretty much covers the rest of the developers. Here is that code
Client-side (javascript):
if (navigator.userAgent.indexOf('iPhone') != -1) {
/* iPhone user */
}
Server-side (example is PHP):
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
/* iPhone user */
}
For sites that use an MVC coding pattern where the programming logic code is separate from the template, the following example is useful:
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
$template = 'home/iphone.html';
}
else {
$template = 'home/index.html';
}
If you have any other cool resources, I would love to hear about them. I did run into another site with some code to detect iPhone's and iPod's, but I couldn't make it work, so I have no idea if you have to detect them separately or not. It does speak to the reason why Apple should have an option in the settings pane to make an iPhone or iPod use a handheld stylesheet. But for now at least there is a work around.
→ Respond NowTags: Code · General · CSS · ColdFusion
Text Selection Color
CSS3 brings some cool new features to the web. Some features are highly discussed like rounded corners, borders, and layout control. I am really looking forward to these items becoming standard in the near future. However, I am happy that my two favorite browsers Firefox and Safari already support many of the CSS3 specs. This gives me the ability to use some lesser known items without killing my design for IE. I enjoy some of the simpler things, like the ability to change the text color and background color when text is selected on the page. IE does not currently support this but thats ok… I don't care that much for IE anyway.
Want to add this effect to your site? It's simple. Add this code to your css stylesheet.
*::-moz-selection { background:#FFFFCC; } /* FOR MOZILLA */
*::selection { background:#FFFFCC; } /* FOR SAFARI */
If you want to know more about this tag check out quirksmode.org for additional info and examples. A word of caution must be noted here, If you must validate for css level 2.1 then you will want to forgo this trick as it's not CSS2 compliant.
→ Respond NowTags: Code · General · CSS
Form Mark-Up: Are Lists Appropriate?
Recently Mike Robinson of www.akamike.net posted a response to another article on noupe.com asking for opinions on using list with forms. I'm not trying to single anyone person out. Mike is not alone in his thoughts, and I am simply using his post Form Mark-Up: Are Lists Appropriate? as a "for example" on the kinds of articles that I am reading more frequently on various blogs. I'm not trying to pick on Mike but rather raise awareness to an increasing problem that I see.
One of the trends that I see more frequently, is to place all your content in a list. Ordered Lists, Unordered Lists, and Definition Lists. It doesn't seem to matter anymore. This "all inclusive tag" is being packaged and sold as semantic markup. Frankly I feel it's just bad marketing. Yes it does validate. So does a table. Validating is not a true measure of semantics. A list of any kind is meant for one thing. Listing content. It's not semantic to use a list for layout. This is still bending the rules for layout purposes. In fact I would say it's worse in some cases, and less semantic than using a table. I'm not saying "use tables" I am merely saying it's not any better. Lets take a look at the two practices and compare them to plain old HTML. I have laid out three forms below with the same elements. One is in an ordered list, the other uses a table, and the last one is plain old html.
See how these three choices stack up against one another.
→ Respond NowTags: usability · CSS · Accessibility
List Abuse or Best Practice
I am researching the practical use or abuse of unordered/ordered lists on web pages. I have started using the JAWS screen reader to assist me in producing better solutions for my websites. I have also spent some time surfing other peoples websites with JAWS to get a feel for what works well.
I made an alarming discovery that I felt was not acceptable. It seems that the latest trends for semantic markup is to place the entire website in a huge unordered list. One term to describe this approach is called "divless" and is quoted as:
"DIVless is W3C friendly and was designed to give developers another method to create website layouts in a standards-friendly fashion."
Divless means very piece of content is in a list. Everything from navigation menus, sidebar content, paragraphs, to footers. In my experience this made JAWS read out every list level and nested lists level on a page. This process took a long time to go through. This also had a side effect of causing JAWS to progressively slow down it's speech rate. Items near the bottom of the page were reading back so slow that I stopped the screen reader and went to another site. It was just plain painful.
The argument I read most often in favor of this method is that older browsers understand the unordered list element and therefore render better. I have tested this theory and the older browsers do not support the level of css required to render a layout of this complexity and will simply render a massive list of items that don’t belong in a list.
I feel that the degraded visual appearance of a div based layout looks vastly better to a user of an older browser. It also does not adversely effect a screen readers ability to parse your pages content.
During my research, I found an article that says just about everything I wanted to say in this article. Rather than restating what’s already been said, I urge you to read this article titled "Are Lists Becoming the New Tables?" by Mike Cherim He goes into other issues with this methodology that I had not yet discovered. His argument is better than mine and has more facts to support up his philosophy.
I think that lists are better served to do what they were intended. Make lists. Not replace tables.
So my question to you all. Are divless websites the best method for presenting content? just because it's semantic and validates does that make it more accessible or more usable? Until I can see evidence that points to the contrary, I am in the camp that divs are better suited for markup than a list.
→ Respond NowTags: usability · CSS · Accessibility
