New HTML5 Form Elements – 10/2016

Here is a list of new form elements in HTML5:
You’re welcome!

<input>: as the most important element, can be displayed in several ways, depending on the type attribute. The input attributes are:

<input type=“text”> defines a one-line text input field.
<input type=“password”> defines a password field.
<input type=“submit”> defines a button for submitting form data to a form-handler.
<input type=“reset”> defines a reset button that will reset all form values to their default values.
<input type=“radio”> defines a radio button.
<input type=“checkbox”> defines a checkbox.
<input type=“button”> defines a button.
<input type=“number”> defines a numeric input field.You can also set restrictions on what numbers are accepted.

HTML5 added several new input types:

<input type=“color”> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.
<input type=“datetime”> is a control for entering a data and time (hour, minute, second, and fraction of a second) based on the UTC time zone.
<input type=“datetime-local”> specifies a date and time input field, with no time zone.
<input type=“email”> is used for input fields that should contain an e-mail address. Some smartphones recognize the email type, and adds “.com” to the keyboard to match email input.
<input type=“month”> allows the user to select a month and year. Depending on browser support, a date picker can show up in the input field.
<input type=“number”> defines a numeric input field. You can also set restrictions on what numbers are accepted.
<input type=“range”> is used for input fields that should contain a value within a range. Depending on browser support, the input field can be displayed as a slider control.
<input type=“search”> is used for search fields (a search field behaves like a regular text field).
<input type=“tel”> is used for input fields that should contain a telephone number.
<input type=“time”> allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.
<input type=“url”> is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted. Some smartphones recognize the url type, and adds “.com” to the keyboard to match url input.
<input type=“week”> allows the user to select a week and year. Depending on browser support, a date picker can show up in the input field.
<input type=“date”> is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field.

The form-handler is specified in the form’s action attribute. The form-handler is typically a server page with a script for processing input data.

The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data. The listattribute of the <input> element, must refer to the id attribute of the <datalist> element.

<form action=”action_page.php”>
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
</form>

<option> elements defines an option that can be selected, and is the default for the first item in a drop-down list.
<textarea> element defines a multi-line input field (a text area). The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area.
<button> element defines a clickable button.

The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> element specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. Theprivate key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
<form action=”action_page.php”>
Username: <input type=”text” name=”user”>
Encryption: <keygen name=”security”>
<input type=”submit”>
</form>

<output> element represents the result of a calculation (like one performed by a script). Example: Perform a calculation and show the result in an <output> element:

<form action=”action_page.php”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0
<input type=”range” id=”a” name=”a” value=”50″>
100 +
<input type=”number” id=”b” name=”b” value=”50″>
=
<output name=”x” for=”a b”></output>
<input type=”submit”>
</form>

Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5):

disabled – Specifies that an input field should be disabled.
max – Specifies the maximum value for an input field.
maxlength – Specifies the maximum number of character for an input field.
min – Specifies the minimum value for an input field.
pattern – Specifies a regular expression to check the input value against.
readonly – Specifies that an input field is read only (cannot be changed).
required – Specifies that an input field is required (must be filled out).
size – Specifies the width (in characters) of an input field.
step – Specifies the legal number intervals for an input field.
value – Specifies the default value for an input field.

The value attribute specifies the initial value for an input field:

The readonly attribute specifies that the input field is read only (cannot be changed).

<form action=””>
First name:
<input type=”text” name=”firstname” value=”John” readonly>
</form>

The disabled attribute specifies that the input field is disabled. A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form.

<form action=””>
First name:
<input type=”text” name=”firstname” value=”John” disabled>
</form>

The size attribute specifies the size (in characters) for the input field.

<form action=””> First name:
<input type=”text” name=”firstname” value=”John” size=”40″>
</form>

The maxlength attribute specifies the maximum allowed length for the input field.

<form action=””>
First name:
<input type=”text” name=”firstname” maxlength=”10″>
</form>

HTML5 Attributes

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

When autocomplete is on, the browser automatically complete the input values based on values that the user has entered before.

Tip: It is possible to have autocomplete “on” for the form, and “off” for specific input fields, or vice versa.

The autocomplete attribute works with </form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

<form action=”action_page.php” autocomplete=”on”>
First name:<input type=”text” name=”fname”>
Last name: <input type=”text” name=”lname”>
E-mail: <input type=”email” name=”email” autocomplete=”off”>
<input type=”submit”>
</form>

The autofocus attribute specifies that the input field should automatically get focus when the page loads.

First name:<input type=”text” name=”fname” autofocus>

The form attribute specifies one or more forms an <input> element belongs to. Tip: To refer to more than one form, use a space-separated list of form ids.

<form action=”action_page.php” id=”form1″>
First name: <input type=”text” name=”fname”>
<input type=”submit” value=”Submit”>
</form>

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted. The formaction attribute overrides the action attribute of the <form> element.

The formaction attribute is used with type=”submit” and type=”image”. An HTML form with two submit buttons, with different actions:

<form action=”action_page.php”>
First name: <input type=”text” name=”fname”>
Last name: <input type=”text” name=”lname”>
<input type=”submit” value=”Submit”>
<input type=”submit” formaction=”demo_admin.asp”
value=”Submit as admin”>
</form>

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method=”post”e;). The formenctype attribute overrides the enctype attribute of the <form> element.</form>.

The formenctype attribute is used with type=”submit” and type=”image”. Send form-data that is default encoded (the first submit button), and encoded as “multipart/form-data” (the second submit button):

<form action=”demo_post_enctype.asp” method=”post”>
First name: <input type=”text” name=”fname”>
<input type=”submit” value=”Submit”>
<input type=”submit” formenctype=”multipart/form-data” value=”Submit as Multipart/form-data”>
</form>

The formmethod attribute defines the HTTP method for sending form-data to the action URL. The formmethod attribute overrides the method attribute of the <form> element.

The formmethod attribute can be used with type=”submit” and type=”image”. The second submit button overrides the HTTP method of the form:

<form action=”action_page.php” method=”get”>
First name: <input type=”text” name=”fname”>
Last name: <input type=”text” name=”lname”>
<input type=”submit” value=”Submit”>
<input type=”submit” formmethod=”post” formaction=”demo_post.asp”
value=”Submit using POST”>
</form>

The formnovalidate attribute overrides the novalidate attribute of the <form> element. The formnovalidate attribute can be used with type=”submit”.

<form action=”action_page.php”>
E-mail: <input type=”email” name=”userid”>
<input type=”submit” value=”Submit”>
<input type=”submit” formnovalidate value=”Submit without validation”>
</form>

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. The formtargetattribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type=”submit” and type=”image”.

<form action=”action_page.php”>
First name: <input type=”text” name=”fname”>
Last name: <input type=”text” name=”lname”>
<input type=”submit” value=”Submit as normal”>
<input type=”submit” formtarget=”_blank”
value=”Submit to a new window”>
</form>

The height and width attributes specify the height and width of an <input type=”image”> element.

Always specify the size of images in a form. If the browser does not know the size, the page will flicker while images load.

Define an image as the submit button, with height and width attributes:

<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element. An <input> element with pre-defined values in a <datalist>:

<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>

The min and max attributes specify the minimum and maximum values for an <input> element. The min and max attributes work with the following input types:number, range, date, datetime-local, month, time and week.

<input> elements with min and max values:
Enter a date before 1980-01-01:
<input type=”date” name=”bday” max=”1979-12-31″>
Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″>
Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element. The multiple attribute works with the following input types: email, and file. A file upload field that accepts multiple values:

Select images: <input type=”file” name=”img” multiple>

The pattern attribute specifies a regular expression that the <input> element’s value is checked against. The pattern attribute works with the following input types: text, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

An input field that can contain only three letters (no numbers or special characters):
Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format). The hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

<input type=”text” name=”fname” placeholder=”First name”>

The required attribute specifies that an input field must be filled out before submitting the form. The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Username: <input type=”text” name=”usrname” required>

The step attribute specifies the legal number intervals for an <input> element. Example: if step=”3″, legal numbers could be -3, 0, 3, 6, etc.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

<input type=”number” name=”points” step=”3″>

This seamless list of information was gathered from the W3C website.

UI – User Interface Design

ansleyuser2User Interface design requires a good understanding of user needs. There are several phases and processes in the user interface design and depend on the project whether it is for websites, applications or devices.

The first phase focuses on requirements gathering – assembling a list of the functionality required by the project to accomplish the goals of the project and the potential needs of the users.

Field research is the analysis of the potential users of the system by studying how they perform the tasks that the design must support and conducting real tests. Typical questions involve:

  • What would the user want the system to do?
  • How would the system fit in with the user’s normal workflow or daily activities?
  • How technically savvy is the user and what similar systems does the user already use?
  • What interface look and feel styles appeal to the user?

Information architecture – development of the hierarchy of the process and information flow.

Prototyping – development of wire-frames that concentrate on the interface’s hierarchy of content.

Usability inspection – letting an evaluator inspect a user interface, or conduct usability testing which should be used early on in the development process.

Heuristic evaluation (established usability principles) – is a usability inspection method that identifies usability problems. It specifically involves evaluators examining the interface and judging its compliance with these principles. These evaluation methods are now widely taught and practiced in the new media sector, where UIs are often designed in a short space of time on a budget that may restrict other types of testing. The main goal of heuristic evaluations is to identify any problems with the design of the user interface. Usually, the problems discovered are categorized – often on a numerical scale- according to their estimated impact on user performance and acceptance. The evaluation is conducted focuses on user tasks to provide feedback to the developers on the extent to which the interface is likely to be compatible with the intended users’ needs and preferences.

Heuristic evaluation is usually done by one person which reduces cost and time. Most heuristic evaluations can be accomplished quickly, but depends on the size of the project, its complexity, the purpose of the review, the nature of the usability issues that arise in the review, and the competence of the reviewers. This cuts down on design errors. Jakob Nielsen’s hueristics are probably the most-used heuristics for user interface design. His published book Usability Engineering are as follows:

  • Visibility of system status – The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
  • Match between system and the real world – The system should speak the user’s language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
  • User control and freedom – Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
  • Consistency and standards – Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
  • Error prevention – Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
  • Recognition rather than recall – Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one pat of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
  • Flexibility and efficiency of use – Accelerators – unseen by the novice user – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
  • Aesthetic and minimalistic design – Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
  • Help users recognize, diagnose, and recover from errors – Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
  • Help and documentation – Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be large.

Another set of categorized heuristics from Susan Weinschenk and Dean Barker provide the following twenty types:

  1. User Control – heuristics that check whether the user has enough control of the interface.
  2. Human limitations – the design takes into account human limitations, cognitive and sensorial, to avoid overloading them.
  3. Modal integrity – the interface uses the most suitable modality for each task: auditory, visual, or motor/kinesthetic.
  4. Accommodation – the design is adequate to fulfill the needs and behavior of each targeted user group.
  5. Linguistic Clarity – the language used to communicate is efficient and adequate to the audience.
  6. Aesthetic Integrity – the design is visually attractive and tailored to appeal to the target population.
  7. Simplicity – the design will not use unnecessary complexity.
  8. Predictability – users will be able to form a mental model of how the system will behave in response to actions.
  9. Interpretation – there are codified rules that try to guess the user intentions and anticipate the actions needed.
  10. Accuracy – there are no errors, i.e. the result of user actions correspond to their goals.
  11. Technical Clarity – the concepts represented in the interface have the highest possible correspondence to the domain they are modeling.
  12. Flexibility – the design can be adjusted to the needs and behavior of each particular user.
  13. Fulfillment – the user experience is adequate.
  14. Cultural Propriety – user’s cultural and social expectations are met.
  15. Suitable Tempo – the pace at which users works with the system is adequate.
  16. Consistency – different parts of the system have the same style, so that there are no different ways to represent the same information or behavior.
  17. User Support – the design will support learning and provide the required assistance to usage.
  18. Precision – the steps and results of a task will be what the user wants.
  19. Forgiveness – the user will be able to recover to an adequate state after an error.
  20. Responsiveness – the interface provides enough feedback information about the system status and the task completion.

ansleyuserUser Interface design (UI) or user interface engineering is the design of the user interface for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience. The goal of the user interface design is to make the user’s interactions as simple and efficient as possible.

Good user interface facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface. The design process must balance technical functionality and visual elements to create a system that is not only operational but also usable and adaptable to changing user needs.

Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result designers tend to specialize in certain types of projects and have skills centered on their expertise, whether that be software design, user research, web design, or industrial design.

 

 

 

 

 

What is box-sizing: border-box;?

BOX-SIZING: BORDER-BOX;

box-sizingThe “box model” in CSS looks like this:

width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box.

The border and padding values go inwards into the width/height of the box rather than expand it. Expansion of an element is always mind bending.

Block level elements – a div inside a div – the child div defaults to 100% size of the parent, without any CSS styling. If you add padding or border and declare the child to be 100% width, it will blow out of the parent from adding those values to the original width amount (default).

So that’s where the border box value (as opposed to the content-box default), which keeps the styling inside the box.

html {
box-sizing: border-box;
}
*, *before, *:after {
box-sizing: inherit;
}

According to Paul Irish, the need to state prefixes for Webkit or Moz is no longer necessary, and most browsers and devices are totally onboard.  The universal (*) selector works great, too, and is a great CSS tool.

article reference: http://css-tricks.com/box-sizing/

related article on Box-Sizing as explained by Paul Irish: www.paulirish.com/2012/box-sizing-border-fox-ftw

Opening New Tabs for External Links

tabs

WHAT’S YOUR LINKING STRATEGY?

Why make your users “backspace” their way back to your site from an external link? This is not only bad User Experience, it also hurts your Analytics.

Owners and developers of websites need to think about how to handle links. Many understand the theory behind handling links, but not everyone thinks about it, and many are so sure they know something that’s based on history, but no longer applies.

Browsers nowadays open new “tabs”, not “windows”, allowing the user to view the new page while leaving the page they left on your website available to them. Browser tabs are very easy for your visitors to use. Most users have many tabs opened when they are browsing.

If you have links that lead visitors away from your website to another’s website, why not open their site in a new tab? What if your visitor decided to X out of the page? If you didn’t set up target=”_blank”, your site is gone, too. Makes no sense. Xing out of both tabs is always an option for them, but without it, they are gone, maybe forever.

Sometimes users browse for information purposefully leaving tabs open to reference back to, and actually collect these pages to consume information as they continue to scan. When users want to go back and forth, the tabs make it easy.

You can also save resources by opening external links in new tabs and users won’t need to load your site again.

This tactic of not opening a new tab also hurts your Analytics. If your user clicks an external link in the same tab, it is saying he/she is leaving your site, when perhaps they just wanted to read the outside article, and come back to finish something on your site.

Of course, internal linking inherent to the navigation of the site, should never open in a new tab. Surfing your website should be an easy user experience. Why make your user “backspace” their way back to your site? Makes no sense.

Making your links open the right way is important for Analytics and User Experience.

List of media queries on device displays by pixel density

Target device displays using media queries:

different devices

iPhone
320 x 480

iPhone 4
640 x 960

iPad 1 & 2
768 x 1024

iPad 3
1536 x 2048

Amazon Kindle Fire
1024 x 600

Media Queries – setting the max-device-width of any screen size. Here’s a few:

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px) {
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}

/*#### iPhone 6 plus phablet ####*/
@media screen and (min-device-width: 414px) {
/* some CSS here */
}

/*#### iPhone 6#### */
@media screen and (min-device-width: 375px) {
}

/*#### iPhone ####*/
@media screen and (max-device-width: 320px) {
}

 

 

Web Apps – Viewport Display Pixels vs. Device Pixels – 2 Types of Pixels

COMPUTER DISPLAY PIXELS ARE TWICE THE SIZE OF DEVICE PIXELS

screenimage

Device pixels versus Display pixels

DEVICE PIXEL

Device pixels are the actual physical dots that the device screen can display.  On the iPhone, this is 1136 x 640 (which one is width depends on how you’re holding the device).

DISPLAY PIXEL

A display pixel, also known as a device-independent pixel, a point, or a dot, is what the browser uses to display webpages.  It is also what you’re using when you specify dimensions in CSS.

ZOOM LEVEL

Depending on the zoom level, a device independent pixel may be larger or smaller than a device pixel.  You can use a ratio to show the zoom level.  For example, if you zoom in to double the size of the content, the ratio of device-independent pixels to device pixels is 2:1 (two to one).  In other words, display pixels are twice the size of device pixels.

THE VIEWPORT META TAG

You can control the size of display pixels by controlling the width of the viewport.  You do this using the viewport meta tag.  On iOS, the mobile Safari browser uses a default value of 980 points wide in either landscape or portrait mode.  In landscape mode, the browser zooms in on the page a bit to take advantage of the larger width.  The viewport size remains the same.

This 980-point-wide viewport works great if you’ve designed your site to be 980 pixels wide and your fonts are readable on a small screen.  More often, what you see by default on iOS looks great.  However, if you design your Web app to be 320 pixels wide in portrait mode, with the default viewport width (which is 980), your app won’t look good and will only take up about a third of the viewport.

To display your webpage as large as possible in mobile browsers, and to take into account that different devices have different scene sizes, you need to set the viewport equal to the width of the device screen.  You can do this with the simple Viewport HTML meta tag:

<meta name=”viewport” content=”width=device-width, initial scale=1.0″>

This tag sets the width of your viewport to the width of the device, rather than 980 points, and sets the initial scaling of your viewport to 1 – meaning that it won’t be zoomed in.

The viewport meta tag has a couple of other, less frequently used properties that you might want to know about:

  • height:  This specifies the height of the viewport.  It doesn’t really do anything and is not usually used.

  • minimum-scale:  This is the minimum amount the user can zoom out to.  On mobile Safari, it as a default value of .25, meaning that users can view content at one-quarter of the actual size.

  • maximum-scale:  Is the maximum amount the user can zoom in.  The default on mobile Safari is 1.6.

  • user-scalable:  This property has a value of yes or no.  If it’s set to no, the user won’t be able to zoom.

I hope this helps explain how pixels are viewed and used in developing Web apps.  Thanks for reading!

Creating Modern, Responsive Websites With Web Standards

Website Standards and Clean Code

It isn’t that difficult to create a modern website based on current web standards. If your website was built using the latest technology, your site will be super-fast, modern, clean and responsive.

Everyone wants their website to cost less, work better, and reach more people in today’s browsers, screen readers, and wireless devices. The inescapable technological advancements that are happening as we speak are breaking websites all over the internet. A modern website built using the latest coding practices ensures that your website will function properly across all devices and help individuals with disabilities who are using special devices to access and interact with the internet – and stand the test of time.

You don’t have to spend money on trendy, short-sighted, proprietary solutions that will end in disaster. No one can afford to piecemeal a website that will ultimately break sooner than later.

Coding several different stylesheets might have seemed like a great idea at the time, but it is not a rational solution to problems that are continuing to plague site owners and builders.

FORWARD COMPATIBILITY

WaSP (www.webstandards.org) advocates standards that reduce the cost and complexity of site creation and ensure simple, affordable access for all. Today, every browser supports web standards as a matter of course. They work with the designers of development tools such as Dreamweaver. You can find a myriad of web standards educational tools and this information can be found in most languages today.

Apple’s latest WebKit based Safari browser, which powers the iPhone’s web browser, Mozilla powered Firefox, Opera, the WebKit based Google Chrome, and Microsoft Internet Explorer 7+ understand and correctly support XHTML, CSS3, JavaScript, and the DOM.
*Internet Explorer 6 does not support many of the latest web standards, and we can only hope that everyone has moved passed this version of IE. Developers know that we can fix IE6 to some degree, but there comes a time when you have to move forward and not look back. We’ve stopped overkill fixes because newer phones are equipped with the latest browsers and it just doesn’t warrant the extra time and expense anymore to work out ALL the fixes needed for IE6 to view properly.

WHAT IS WEB STANDARDS COMPLIANT?

javascript

JavaScript creates action.  JavaScript is the bomb. This language has given us the ability to create action!
In a perfect world, browsers perfect their support for every single standard. Considering that most software doesn’t come out bug-free, and standards are sophisticated and complex, cross-browser support is actually pretty solid enough that we do develop using the latest standards. HTML5, more accessibility, CSS3, structured markup and deeper DOM and JavaScript function calls are becoming the progressive-enhancement that is pushing the internet into the future. All the big companies such as Apple, MSN, Wikipedia, and WordPress have embraced web standards. Of course, they don’t always achieve perfect validation or pure semantic markup, but a trained developer can make these markup fixes very quickly, and let’s face it, modern browsers are lenient.

STANDARDS ARE THE TOOLS WITH WHICH ALL OF US CAN DESIGN AND BUILD SOPHISTICATED, BEAUTIFUL SITES THAT WILL WORK TODAY AND TOMORROW.

OLD BROWSERS ARE INCOMPETENT, INCOMPLETE, AND HAZARDOUS TO THE HEALTH OF THE WEB.

GARBAGE IN, GARBAGE OUT.

More than 90% of all websites are obsolete. They might look good on desktop browsers, but outside of that, the symptoms of decay are starting to appear. Carefully constructed layouts have begun to fall apart, and expensively engineered behaviors have stopped working. As browsers evolve, site performance continues to deteriorate.

Modern browsers are not merely newer versions of the same old thing. They differ fundamentally from their predecessors, and in many cases, they’ve been rebuilt from the ground up. They have a new job: to comply as well as possible with the web standards. As the newer browsers comply with web standards, they are becoming increasingly intolerant of broken code and markup.

THE KNOWLEDGE OF WEB STANDARDS IS A NECESSITY FOR ANYONE WHO DESIGNS OR PRODUCES WEBSITES

BEST WEBSITE NOW ENSURES THAT SITES DESIGNED TODAY WILL CONTINUE TO WORK IN TOMORROW’S BROWSERS AND DEVICES – INCLUDING DEVICES NOT EVEN BUILT OR IMAGINED YET

We believe in “write once, publish everywhere”. It isn’t wishful thinking. We are proud of the fact that our mission statement is “Because it matters”. Our mission follows some basic rules:

Control layout, placement, and typography in desktop browsers while allowing users to modify the presentation to suit their needs.
Develop and support sophisticated behaviors that work across multiple browsers and platforms.
Comply with accessibility laws and guidelines without sacrificing beauty, performance, or sophistication.
Redesign quickly – reducing costs and eliminating unnecessary work.
Support emerging devices from wireless gadgets and smart phones to Braille output devices and screen readers used by those with disabilities with one website.
Offer sophisticated printed versions of any web page.
Stay educated and ahead of the curve to always use real semantic markup.

PAGE RANKING AND SEO

iStock_000022200278Large

SEO and Analytics go hand-in-hand.  Believe it or not, companies do not have to spend a lot of money for SEO or Analytics. Well thought out SEO makes your website findable. Content is king. Focus on lean, keyword-rich, buzzword-free content that’s relevant to your customers, and use semantic markup. Copy, CSS layout and HTML5’s latest coding practices are the golden keys to findability.

COMPANIES THAT KNOW THE SIMPLICITY OF GREAT SEO ARE PROSPERING. THOSE THAT DON’T ARE FALLING BEHIND.

ACCESSIBILITY – THE HEART OF WEB STANDARDS…

Accessibility makes sure your content can be read and your site can be used by everyone, no matter what device they browse with, and regardless of physical ability. Innovation is the soul of accessibility. Accessibility is legal standard for judging and enforcing the accessibility of sites. This is great news because the world is being pushed into one single standard.

If you use standards-based designing principles, you not only make your content easy for search engines to find, it will also enable visually disabled people who use screen readers to navigate your websites content.

Screen reader users navigate web pages by tabbing from h2 to h2 and from section to section, just like sighted users navigate by visually scanning. When structuring your site semantically, pay particular attention to forms and tables. Provide keyboard access for those who are unable to use a mouse. Keyboards and assistive devices are the gateway to online user experience.

WELCOME MILLIONS OF VISITORS TO YOUR SITE WHO ARE LOCKED OUT – YES – THERE ARE MILLIONS OF DISABLED PEOPLE IN THE WORLD WHO HAVE ACCESS TO THE INTERNET

iStock_000020458543XSmall
Google web crawlers look for relevancy of content when a user types in an inquiry.
Think of web crawlers as blind users – Google is the biggest blind user on the web. Dish out appropriate content, well written and well structured, and you not only serve the blind folks in your audience, you also attract millions of sighted ones.

It wouldn’t be smart to exclude disabled Americans. This demographic would take up a city the size of Los Angeles or New York City. Millions!

If you think blind people don’t buy products online is missing the point and the boat. Don’t be blind yourself to the true nature of the audience you reject – you are still reaching the non-disabled populace this way by conforming to access guidelines and many others who would have ordered your products over the phone if only your site let them.

Section 508

Section 508 requires all websites under its jurisdiction to provide “equal or equivalent access to everyone” to accommodate the visually impaired, the hearing impaired, the physically disabled, and people who have photosensitive epilepsy and it spells out what accessibility really means. This law covers computers, fax machines, copiers, telephones, transaction machines, and kiosks, as well as other equipment used for transmitting, receiving, or storing information. It also covers many websites. Section 508 became U.S. law in 2001 and applies to the following:

  • Federal departments and agencies (including the U.S. Postal Service)
  • Deliverables from contractors who serve them
  • Activities sponsored or funded by the Federal government
  • Activities sponsored by states that have adopted the regulations
  • This is just skimming the surface and you can find plenty of resources to explain what the exact standards are and how to apply them along with specific things to do to make your site 508 compliant.

The bottom line is that if you design with web standards and follow the guidelines, your site should be accessible to screen readers, Lynx, mobile devices, and old browsers as it is to modern, compliant browsers. Standards and accessibility converge in agreeing that one web document should serve all readers and users. Even Flash and PDF’s can now be made accessible.

MYTH: ACCESSIBILITY IS EXPENSIVE

Most tasks to bring a website to its best take minutes to accomplish. Simple tasks like adding a label to your web form or writing a table summary. Type a brief alt text for each image – which is a no-brainer. High level conformance is going to obviously fall under another category and will cost more. If you want to author closed captions for web videos or to caption live streaming media news feeds in real time see Joe Clark’s “Best Practices in Online Captioning” . (www.joeclark.org/access/captioning/bpoc)

I highly recommend the following cited book for anyone who builds things for the internet. Web Standards is such an exciting concept that ties us all together. Where we go from here who knows, but right now we are accomplishing a great thing using Web Standards, and this book is a must have.

You can find the latest Standards and beta versions of some brilliant new concepts existing on the W3C website. Their HTML5 Validator is a great place to find semantic errors within your page. Go to http://validator.W3.org/ for the latest information.

Jeffrey Zeldman with Ethan Marcotte (2010). Designing with Web Standards, Third Edition. Berkeley, CA. New Riders.