Friday, November 22, 2013

Principles of Accessible Design

Below you will find a list of some key principles of accessible design. Most accessibility principles can be implemented very easily and will not impact the overall "look and feel" of your web site.

Provide appropriate alternative text
Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.
Provide appropriate document structure
Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
Provide headers for data tables
Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the
> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.

Ensure users can complete and submit all forms
Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.
Ensure links make sense out of context
Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.
Caption and/or provide transcripts for media
Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient. 
Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content.
In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.
Allow users to skip repetitive elements on the page
You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page.
Do not rely on color alone to convey meaning
The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.
Make sure content is clearly written and easy to read
There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.
Make JavaScript accessible
Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.
Design to standards
HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.
This list does not present all accessibility issues, but by addressing these basic principles, you will ensure greater accessibility of your web content to everyone. 

Wednesday, November 28, 2012

Webkit CSS properties

What Makes a Mobile Webapp?


If you write a typical HTML4/XHTML/HTML5 webpage it will render pretty well on mostly all the modern cell phones. However it will be displayed as a website where users can generally pinch and zoom into areas. This is perfectly acceptable for most instances, except for responsive websites and mobile web applications.
Additionally you need to offer your visitors a quick way to access your webapp. Mobile Safari is always an option – but what about launching from the homescreen? All of the App Store applications will launch from their home icon, and this is also possible inside a mobile web app. Although we can run through a few of the required tags first.
Device Viewport
Whether your layout is built flexible or hard-coded to a set width(ex: 320px for iPhone) does not ultimately matter. To generate a webapp view we need the meta viewport tag added in-between your website’s section. This can setup any number of important options for how our webpage is rendered on a mobile screen.

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
This example above should be perfect for any typical boilerplate application. It will set all the default views to 1.0 scale and the user cannot re-size any part of the site, although they can still scroll vertical and horizontal. Within the content attribute are many other values you can toy around with. The Mozilla dev team has written an article on the viewport tag with full explanations and a couple of examples.

If anything, it’s super important to set your width value the same as device-width. This will force the layout to adjust as your visitors may switch from portrait into landscape view. It’s also necessary if you’re running JavaScript which parses for the current window size.
Mobile Safari Tags
The Apple online documentation section has a piece for Safari mobile apps. This includes a reference to each of their proprietary meta tags and how they should be used on your website. But in truth there are really only 2 more aside from the viewport.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

By setting the web-app-capable meta tag Safari can detect that your website is able to run as an application. So when users go to save your website onto their device it will launch without the URL bar or any other Safari trimmings.

If you are familiar with iOS apps you’ll also recognize the top bar section of the device screen. By default this is setup with a white/gray gradient, but you may also choose between black and black-translucent. Neither of these values should affect your webapp in any major way other than the color scheme for the top toolbar.
iOS App Icons
There are two important pieces you can mimic in relation to a native iOS app. The first is a home screen icon, and the second is a featured launch png image. The code is very sensitive and you’ll need to use these exact values for rel and sizes. Although feel free to rename your image files anything(or even .jpg should work fine).
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-startup-image" href="/splash-startup.png">
 
Although it isn’t stated outright the sizes variable only accepts these two values. 114px is for iPhone retina and 7px for iPad displays. As far as I know there is no new size value for iPad retina displays.

The startup splash image should be sized exactly 320×460 pixels. For some reason the Apple guidelines do not offer a retina version of this splash screen. I have tried setting sizes=”640×920″ and the whole splash image feature just stops working! So this attribute appears to be very touchy, and I’m hoping Apple will touch up some of these features soon.
Quirks with Internet Explorer
Internet Explorer has surprisingly been getting a lot better with web standards. The developers at Microsoft have been adapting with new Internet technologies both on desktop and with their mobile phones. Meta tags for setting the rendering engine are common – using the MS http-equiv value for example.

But a recent tag X-UA-Compatible had caught my attention. It’s useful for setting browser engines back to keep your current code backwards-compatible. This is usually the case the Internet Explorer, although in some cases you can reset an older IE to the latest version. That would be using this code below:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
There have been some validation issues when checking your code against an HTML/XHTML parser. I believe this tag is setup through Microsoft and has been slowly leaked throughout the mobile web. This is really a personal choice to work with or not. If you’d like to learn more check this MSDN Blog post regarding X-UA-Compat and pick up on the details of the syntax.
Other Important Tags
There are some other meta tags you do not need to include, but certainly wouldn’t hurt anything if you did. Unfortunately there are just so many standards it would be impossible to list all the options. But you may consider working with just a couple more tags.
<meta name="HandheldFriendly" content="true">
HandheldFriendly was originally created by Palm and BlackBerry devices for managing mobile websites. It is still somewhat useful although not exactly the highest market share among mobile devices. I’ve found a small blog post discussing this meta tag and the viewport content.

There is also mention of another tag called MobileOptimized. This was originally designed for mobile Internet Explorer and will be carried over for WMP. It’s also known as the meta layout tag from the Microsoft developer docs.
<meta name="MobileOptimized" content="width">
Note that “width” should be changed to whatever your natural display should be on Windows Mobile Phone. This can be tricky to setup, and it may be worthwhile to ignore this tag altogether. The suggested default is 240 pixels for tablet PC and mobile IE devices. But there are definitely other tags related to IE which serve a greater purpose.
Conclusion
I hope these tricky meta tags can be of use to any interested mobile web developers. iPhones and Android devices have changed the way we access the Internet and modern-era websites. And now webmasters are forced to adapt their layouts to suit a changing marketplace.
This is not an exhaustive list of mobile-based meta tags. But it does cover all of the big boys you’ll need in a typical webapp. This should get you started on the right path for mobile web dev, and you can even setup a blank HTML5 template with many of these meta tags initialized. If you have similar ideas or questions on the code please share with us in the post discussion area.

Wednesday, December 28, 2011

Fun with CSS3 animation

Solar system animation by CSS3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

html, body {background:#000;}

.solarsystem {width:800px; height:800px; margin:5% auto;/* border: solid 2px #66a5da;*/ position:relative;}
.sun { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#fff132), color-stop(100%,#e5c824));-webkit-box-shadow: 1px 0px 50px #ffe042;width:50px; height:50px; border-radius:50px;}
.mercury { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#e79f04), color-stop(100%,#d28f00));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:10px; height:10px; border-radius:10px; margin-left:18px; }
.venus { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#c79f4a), color-stop(100%,#a38036));/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:15px; height:15px; border-radius:15px; margin-left:35px; }
.earth { background:#30a0ff;/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:20px; height:20px; border-radius:20px; margin-left:60px; }
.moon { background:#fff;/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:6px; height:6px; border-radius:6px; }
.mars { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#c35214), color-stop(100%,#ad3f03));/*-webkit-box-shadow: 1px 0px 5px #c35214;*/width:19px; height:19px; border-radius:19px; margin-left:80px; }
.astoriods { background:url(../images/astorieds.png) no-repeat; width:368px; height:368px; position:absolute; top:220px; left:215px;}
.jupiter { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#e79f04), color-stop(100%,#d28f00));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:28px; height:28px; border-radius:28px; margin-left:95px; }
.saturn { background: url(../images/saturn.png) no-repeat; width:40px; height:40px; margin-left:100px;}
.uranus { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#62b7ff), color-stop(100%,#319ffd));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:18px; height:18px; border-radius:18px; margin-left:155px;}
.pluto { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#6b8ca8), color-stop(100%,#8dafcb));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:8px; height:8px; border-radius:8px; margin-left:208px;}


.sun_position { position:absolute; top:375px; left:375px;}
.mercury_orbit { width:100px; height:100px; border: solid 2px #66a5da; position:absolute; top:350px; left:350px; border-radius:160px; -webkit-animation-name:rotate; -webkit-animation-duration:8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.venus_orbit { width:160px; height:160px; border: solid 2px #66a5da; position:absolute; top:320px; left:320px; border-radius:100px; -webkit-animation-name:rotate; -webkit-animation-duration:20s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.earth_orbit { width:240px; height:240px; border: solid 2px #66a5da; position:absolute; top:280px; left:280px; border-radius:240px; -webkit-animation-name:rotate; -webkit-animation-duration:25s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.moon_orbit {width:30px; height:30px; border-radius:30px; position:absolute; margin-top:-5px; margin-left:-5px; -webkit-animation-name:rotate; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.mars_orbit {width:300px; height:300px; border-radius:300px; position:absolute; top:250px; left:250px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:22s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.jupiter_orbit {width:360px; height:360px; border-radius:360px; position:absolute; top:220px; left:220px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:35s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.astoriods.animate { -webkit-animation-name:rotate; -webkit-animation-duration:100s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.saturn_orbit {width:420px; height:420px; border-radius:420px; position:absolute; top:190px; left:190px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:25s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.uranus_orbit {width:480px; height:480px; border-radius:480px; position:absolute; top:160px; left:160px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:55s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.pluto_orbit {width:540px; height:540px; border-radius:540px; position:absolute; top:130px; left:130px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:70s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}



@-webkit-keyframes rotate {from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) }}
</style>
</head>

<body>
<div class="solarsystem">
<div class="sun sun_position"></div>
<div class="mercury_orbit">
<div class="mercury"></div>
</div>
<div class="venus_orbit">
<div class="venus"></div>
</div>
<div class="earth_orbit">
<div class="earth">
<div class="moon_orbit">
<div class="moon"></div>
</div>
</div>
</div>
<div class="mars_orbit">
<div class="mars"></div>
</div>
<div class="astoriods animate"></div>
<div class="jupiter_orbit">
<div class="jupiter"></div>
</div>
<div class="saturn_orbit">
<div class="saturn"></div>
</div>
<div class="uranus_orbit">
<div class="uranus"></div>
</div>
<div class="pluto_orbit">
<div class="pluto"></div>
</div>
</div>
</body>
</html>

Monday, June 20, 2011

Browser Hacks

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}


/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }


/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */