Web Design and Applications

Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, device APIs, and other technologies for Web Applications (“WebApps”). This section also includes information on how to make pages accessible to people with disabilities (WCAG), to internationalize them, and make them work on mobile devices.

HTML & CSS Header link

HTML and CSS are the fundamental technologies for building Web pages: HTML (html and xhtml) for structure, CSS for style and layout, including WebFonts. Find resources for good Web page design as well as helpful tools.

JavaScript Web APIs Header link

Standard APIs for client-side Web Application development include those for Geolocation, XMLHttpRequest, and mobile widgets. W3C standards for document models (the “DOM”) and technologies such as XBL allow content providers to create interactive documents through scripting.

Graphics Header link

W3C is the home of the widely deployed PNG raster format, SVG vector format, and the Canvas API. WebCGM is a more specialized format used, for example, in the fields of automotive engineering, aeronautics.

Audio and Video Header link

Some of the W3C formats that enable authoring audio and video presentations include HTML, SVG, and SMIL (for synchronization). W3C is also working on a timed text format for captioning and other applications.

Accessibility Header link

W3C’s Web Accessibility Initiative (WAI) has published Web Content Accessibility Guidelines (WCAG) to help authors create content that is accessible to people with disabilities. WAI-ARIA gives authors more tools to create accessible Web Applications by providing additional semantics about widgets and behaviors.

Internationalization Header link

W3C has a mission to design technology that works across cultures and languages. W3C standards such as HTML and XML are built on Unicode, for instance. In addition, W3C has published guidance for authors related to language tags bi-directional (bidi) text, and more.

Mobile Web Header link

W3C promotes “One Web” that is available on any device. W3C’s Mobile Web Best Practices help authors understand how to create content that provides a reasonable experience on a wide variety of devices, contexts, and locations.

Privacy Header link

The Web is a powerful tool for communications and transactions of all sorts. It is important to consider privacy and security implications of the Web as part of technology design. Learn more about tracking and Web App security.

Math on the Web Header link

Mathematics and formula are used on the Web for business reports, education materials and scientific research. W3C’s MathML enables mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this functionality for other types of content.

News Atom

Today, W3C welcomes the FIDO 2.0 Platform specifications as a Member Submission . On the Web, passwords are both an everyday inconvenience for users and a weakness against modern security threats. Users re-use passwords across different sites and password databases are irresistible targets for an enterprising attacker. W3C is committed to bringing the Web to its full potential, and that includes providing more secure and easier ways to authenticate in your browser. After our WebCrypto v.Next workshop, W3C started drafting a charter for a Web Authentication Working Group(still a draft).

But how do we “kill passwords”?  These questions are answered by the FIDO 2.0 specifications, which define a unified mechanism to use cryptographic credentials for unphishable authentication on the Web. The specifications enable a wide variety of user experiences and modalities. For example, a user may log into the web by unlocking a nearby bluetooth or NFC connected smart phone which contains the user’s cryptographic credentials. Alternately, the user may use a USB authentication device containing cryptographic credentials which he or she inserts and activates with a touch of a button.The W3C has provided technical and procedural commentson FIDO 2.0.

For more than 20 years, W3C has led the development of open standards for the Web, and one of the benefits of being a W3C Member is that any Member can suggest new standards to W3C at any time. W3C Members Google, Paypal, Microsoft, and Nok-Nok Labs have proposed three FIDO 2.0 specifications, Web APIs , Key Attestation Format , and Signature Format, and we have published these as a Member Submission on the W3C site. Publication of a Member Submission by W3C does not imply endorsement by W3C, including the W3C Team or Members. However, the high technical quality of these specifications and the expertise of the companies proposing them makes them a natural fit for consideration as part of W3C’s standards track.

As our next step, with FIDO 2.0 as an input document, we will formally propose the Web Authentication Working Groupcharter to the W3C Membership for review; W3C relies on its Members, over 400 industry leaders, to help guide the development of the Web, and their feedback will be used to improve the scope and direction of the proposed work. If the Membership supports the charter, we anticipate launching the group in January 2016.

The W3C is an open standards body. All W3C members and Invited Experts will be welcome to participate and all standardization will be done in the open and publicly archived, with the final W3C standards being licensed under the W3C Royalty-Free Patent Policy.

Announcements about the launch of the Web Authentication Working Group and publication of its specifications will be made on the W3C home page.

As the Web works across all devices, the Open Web Platform is the perfect platform to drive future standardization across all other platforms. W3C and FIDO Alliance will continue to work together to help make secure multi-factor authentication a ‘built-in’ feature on all platforms. If FIDO, W3C, and the rest of the tech industry are successful, future generations may not even know what a password is.

The articlewas updated to using HTML5 markup, and to use HTML5 terminology for character references. Various links and parts of the content were also updated.

German, Spanish, Portuguese, Russian and Ukrainian translators are invited to update their translations.

This video  explains what Linguistic Linked Data is and summarizes the outcomes of the  LIDER project . This includes best practices for working with Linguist Linked Data, a reference architecture and a roadmap for future activities around Linguistic Linked Data. The video has been produced by the LIDER project and has been published during the  European Data Forum 2015 event.

With our growing success in W3Cx , our edX’s MOOC platform, W3C is launching a new LinkedIn groupas a way for Web developers to showcase their Web technologies skills.

This W3Cx Verified Students group is available to all W3Cx students who have earned a W3Cx Verified Certificate. This group provides a way to recognize the students skills in W3C Web technologies.  You are welcome to use this group as a discussion forum to post job offers, information about interesting startups that these learners should keep an eye on, and also new Web technology developments.

The W3Cx coursesare meant to empower you to become the next leaders and innovators on the Web.

The Internationalization Working Group has published a First Public Working Draft of Internationalization Best Practices for Spec Developers.

This document provides a checklist of internationalization-related considerations when developing a specification. Most checklist items point to detailed supporting information in other documents. Where such information does not yet exist, it can be given a temporary home in this document. The dynamic page Internationalization Techniques: Developing specificationsis automatically generated from this document.

The current version is still a very early draft, and it is expected that the information will change regularly as new content is added and existing content is modified in the light of experience and discussion.

A Proposed Update of UTR #50 is now available for public review and comment. The UTR is being reissued with a set of data updated to the character repertoire of Unicode Version 8.0. In this revision, four characters are added to the arrows tailoring set. For details on the proposed changes in the data, please refer to the Modificationssection in the UTR.

For information about how to discuss this Public Review Issue and how to supply formal feedback, please see the PRI #309page.

web payment workshop logo Work on payments at W3C was supported in part by the HTML5Apps project, and today, the project’s team is pleased to announce that W3C just launched the Web Payments Working Groupto make payments easier and more secure on the Web.

The Web payments Working Group is charteredto develop standards to support a wide array of existing and future payment methods. Standard APIs will allow users to register payment instruments (such as credit cards or payment services) and select the right payment type through the browser, making payments faster, more secure, and easier, particularly on mobile devices. The standards should also make it easier for Web developers to integrate existing and new payment flows into their applications.

The Web Payments Interest Group, under the leadership of co-chairs Erik Anderson (Bloomberg) and David Ezell (NACS), will continue to identify additional areas for future standardization.

W3C invites organizations to participate in the new Working Group. W3C Members, including Bloomberg, Deutsche Telekom, Digital Bazaar, ETA, Federal Reserve Bank, Ingenico Labs, MAG, NACS, Qihoo360, Rabobank, Ripple and WorldPay have already announced their support.

Filed under: Payment , Standardization

CSSOM.js is a CSS parser written in JavaScript. (Open Source)

Last week a new charter for the Web Content Accessibility Guidelines (WCAG) Working Group (WG)was formally approved by W3C after having been reviewed by the W3C Member organizations. For the first time since the finalization of WCAG 2.0 in 2008, this charter allows the Working Group to explore ways to provide guidelines beyond WCAG 2.0.

The WCAG 2.0standard continues to be the preeminent reference for web accessibility.  A growing number of national and organizational policies around the world reference WCAG 2.0, including Canada, Australia, Japan, India, and the United States. WCAG 2.0 holds up well today despite significant changes in technology.

There have been some changes to the technology landscape, however, that were not fully anticipated in the development of WCAG 2.0. Changes in how people access the Web on mobile devices require success criteria that address those situations more specifically. Users with cognitive and learning disabilities and users with low vision have suggested ways in which success criteria could better address their requirements. In recent years the WCAG Working Group formed task forces on mobile , cognitive , and low visionaccessibility to define requirements and candidate success criteria for these three areas. New technologies on the horizon and the rapid evolution of the underlying technologies for user interaction on the Web are likely to continue to drive the need for new guidance.

To address these needs, the WCAG Working Group has begun to develop a framework for WCAG 2.0 extensions. These would be separate guideline documents, to increase the amount of coverage on particular accessibility needs. Authors and policy-makers would be able to choose to meet the guidelines with one or more extensions, which inherently meet the base WCAG 2.0 guidelines, while organizations that have policies built around WCAG 2.0 alone would not be impacted by the extensions.

The WCAG charter just approved will serve as bridge to begin work on extensions now while we continue to define what the next generation of WAIguidelines will look like. The Working Group is gathering requirements that may lead to the creation of an updated version of WCAG, or a new set of accessibility guidelines altogether, or both. In order to better integrate the components of web accessibility into a single set of guidelines, the Working Group is exploring the possibility of merging with the Authoring Tool Accessibility Guidelines and User Agent Accessibility Guidelines Working Groups. The Authoring Tool Accessibility Guidelines Working Group (ATAG WG) has just published the completed Authoring Tool Accessibility Guidelines (ATAG) 2.0 ; and the User Agent Accessibility Guidelines Working Group (UAWG) has just published an updated working draft, rolling in comments from browser vendors and others, and will be publishing the User Agent Accessibility Guidelines (UAAG) 2.0as a Working Group Note soon.

WCAG 2.0 extensions and setting the stage for next-generation accessibility guidelines means this is an excellent time to join the WCAG Working Group!

The HTML5Apps continues its series of interviews of European SMEs. Today, we go to Germany, where the Cocomoreheadquarters are located. The discussion was held with Alejandro Leiva, based in the Cocomore Spanish office in Seville, is the technical lead of mobile and emerging technologies, and with Christian Winter, Head of Frontend Development in Frankfurt, specialized in responsive Web design and the optimization of interactive Web applications for mobile devices.
Hello! Would you please describe your company, its mission/vision and its customer audience?
Cocomore is an international agency for Marketing and IT services with 140 employees at our head office in Frankfurt, and in Geneva and Seville. We are developing integrated communication and IT solutions with best practices in crossmedia, branding, CRM, marketing automation and e-commerce.

Our mission and our promise are measurable results in these particular areas, achieved using creativity and technology. Our main focus is on projects where it comes not only to appeal to customers, but also to create a long-term customer relationship. Therefore, data and IT is important but above all, you need content which is appealing, entertaining and useful for communication with customers.

That is why Cocomore has not only designers and creative directors, but also editors. On the basis of our four values, which are innovation, tradition, progress and responsibility, our agency is trusted by leading clients including: the European Union, Lilly, Nestlé, Procter & Gamble, Merz, RTL and Sanofi. Our customer relationships usually grow from year to year and are long-term based.

Can you tell us more about cross-platform mobile applications you have worked on?
Cocomore has extensive experience in the implementation of native and cross-platform apps.

Recently, we have accomplished a project regarding a cross-platform mobile application for Germany’s largest drugstore chain: dm. We developed a game app, named “Mission Morgen” to support communication around sustainability topics. After the functional concept phase was completed, we looked at which technological approach would be best to implement the app; in particular, we evaluated which of a pure native or hybrid app would fit the project. For reasons of cost, time, supported devices and the required features, we decided to go with an hybrid app.

Our technology selection has proven to be the right one: the combination of ngCordova, AngularJS and Ionic allowed us to focus on the important tasks as we did not need to spend much time on the development of basic functions. Especially ionic provides an optimal basis. With the use of AngularJS, we were able to divide the tasks clearly and to scale optimally the frontend team. In addition, thanks to this technological choice, we have retained over the entire duration of the project a good code base and we were able to integrate new modules quickly and with high quality in the existing app. The backend development was realized on top of Drupal. The resulting free application is available for smart phones with the operating system iOS or Android.

As another example, Cocomore developed a pure native mobile application for Pampers. We are currently evaluating relaunching it as a hybrid app. Our goal is to provide updates with new features or extensions several times a year. Regularly, we provide information with the dynamic newsfeed on the homepage of the app about current actions on the Web site and on Facebook (competitions, new craft instructions, new stories to download). The Web site and the mobile app are optimally matched: there is no duplication of content, the app features complement the Web site features.

Initially, when we first developed the app, we wanted to target as many mobile devices as possible, so we designed two native apps, one for Android an one for iOS. We have now decided to re-launch as a hybrid app since this means a smaller development cost and the opportunity to operate on more mobile devices.

Cocomore has realized many other mobile projects, e.g. an iPad app for our client Fresenius. This app teaches health care professionals in an entertaining way about the benefits of the product OsvaRen. It is a very visual app with embedded videos and an in-app game.

We also developed a guided product tour for the medical device company Spine Art. It shows to surgeons the product range of implants, how-to-videos and animated 3D visualizations of their products.

Other projects included a career app for the HR department of a large pharmaceutical client, a recipe database targeted at diabetes patients to easily monitor calory intake, an ecommerce app allowing consumers to shop diapers when waiting for the bus or tram. And many more.

What are your views on native vs Web apps?
A native app needs to be developed in specific programming language which is determined by the operating system such as Objective C, Swift, Java, C ++, C #, XAML. For that you need a programmer who has knowledge of all development methods (IDE’s development tools, emulators, debuggers, SDK’s, etc.) in addition to the programming language or more software developers for each varying operating system.

Web apps are very different in this regard: they can be programmed by an experienced Web developer for several different smartphone operating systems without having unique knowledge about the device-specific development methods. For us, with our strong existing engineering skills in Web development, this is a huge benefit.

Moreover, native applications are designed for an operating system such as iOS, Windows Phone or Android, which means they run only on these devices. Here, the different operating system versions have to be considered, so that the correct functionality is ensured. When a new version of the operating system is introduced, the native app must be updated.

This does not affect Web apps. Web applications are specially programmed HTML5 sites that recognize the mobile device and optimize the content for representing, they run on all Web-enabled devices.

The big drawback of Web apps is their lack of access to phone specific functionalities like camera, microphone. Since Web apps run in the browser of the device access to phone hardware is very limited.

Cocomore deliberately focuses on cross-platform mobile applications (also called hybrid apps), which help bridge the gap between native and Web apps. This kind of application consists of a Web app, i.e. a backend and frontend running on a server. Thereby, the app can also be accessed by desktop browser. It is then displayed as a normal Web site.

The second component is an app container which can be uploaded to the various app stores. This container allows the access to the smartphone hardware and it draws its content from the Web app. Thereby it combines the advantages of both types of apps. In fact those hybrid apps are build using Web technologies and with some native code, so they can be converted via framework in a native app container very easily. But due to their architecture leveraging the many advantages of the Web applications, such as the cross browser compatibility and the cost benefit, the future could be these hybrid apps. The most important factor being here the availability of all the native features.

Ultimately, which considerations drive your choices between native or Web?
Depending on the individual requirements, each of these applications can be a better choice. If you want to create an app that makes very advanced use of the hardware and has high performance demands (execution speed, processing speed, output speed / graphics), a native app will be the better choice. The same applies if a high level of integration in the operating system such as look and feel of the UI elements or interaction with other applications is required. Also if the app should be executable without an internet connection, the native app is a better fit.

A Web app is particularly advantageous regarding total cost of ownership and implementation time. It bears comparably low development costs and short development periods. This technology is directly accessible via a link, so it has the ability to run on many mobile devices and operating systems and runs on each smartphone without installation.

In practice, the approach we currently recommend to our customers is to have a mobile Web portal for general information sharing, and a cross-platform hybrid app for more interactive / engaging content.

What is missing to do the interactive content from within the browser, rather than going through an hybrid app?
There are various considerations that makes a browser-based approach less attractive:
  • Our customers don’t necessarily accept that a browser-based approach can give good enough results in terms of performance and UI,
  • They tend to see also a “real” app as a better marketing/communication channel,
  • The app tend to be for shorter-term campaign, with often a gamification aspect, and it’s not obvious to end-users that you would obtain a game or game-like experience from within the browser,
  • On the Web, our quality expectations require good results on a much wider set of platforms that we would target with our hybrid apps (i.e. mostly iOS and Android), and thus the more interactive you make the Web app, the more likely you’ll encounter bugs in older or less advanced mobile platforms.
How do you deal with adapting the user interfaces of the apps across devices and platforms?
For adapting the app across devices of various sizes and shapes, we’ve found that using responsive design via the Ionic framework lets us deal quite well with the huge diversity of devices on the market, from smartphones to tablets. There are some issues when dealing with older Web views (esp. on Android), but it remains overall quite manageable.

With regard to the specific native look and feel of each platform, we usually recommend to use a single UI paradigm across platforms, without trying to customize it. Once you start customizing the UI, and taking into account e.g. the inconsistent availability of a hardware back-button between iOS and Android, it makes maintaining the whole app workflow much more difficult.

As an SME, what are your needs in terms of Web standards? Which Web standard(s) are you waiting for specifically?
The arrival of the Push API is very exciting for us! Clearly this will make the offering of browser-based content a lot more attractive to many of our customers, even for the simple mobile portal. We can’t wait to see it adopted in more browsers, and we already know we’ll use it in our projects in the upcoming few months.

An area where we’ve found we had to rely on specific Cordova plugins in our hybrid developments is for media playback; for instance, we’ve found that playing an audio file in loop using the basic audio capabilities of a Web view wouldn’t work well on mobile, and that’s a pretty fundamental issue e.g. in a game.

We’ve also had issues with using Web sockets in some older Web views, but this had more to do with implementation bugs than issues in the standard from what we’ve determined.

We’ve struggled for a while with storing data — localStorageproved unreliable as the stored data could be wiped out by the OS; but we’ve now switched to Indexed Database which seems to solve that issue well enough for us.

Any other business related to mobile, Web and standards?
We are an agency for marketing and IT. We help our clients with state-of-the-art technology serving a marketing purpose. This can be CRM system implementation, Web and app development, e-commerce platform development, data management, social media and the like. In most of those projects, and in today’s world, systems are no longer independent. A very big issue is the creation of interfaces in order to connect systems creating a technological ecosystem. Standards around communication interfaces between systems are a very important topic. Being in a position to shape and apply standards is one of our motivations of being a W3C member.

Thank you!

Filed under: html5apps

Events Header link

  • 2015-12-01 ( 1 DEC) 2015-12-29 (29 DEC)

    HTML5 Part 2: Advanced Techniques for Designing HTML5 Apps


    Sharpen your design skills to deliver innovative applications in HTML5!

  • 2015-12-10 (10 DEC)

    /dev/var/ meet-up

    Toulon, France

    Hosted by La Cantine by TVT

    Guillaume Baudusseau will present at the December /dev/var/ meet-up our newly introduced W3C Developers Avenue, one-stop place for information and tools Web Developers need to learn, build, get involved, and move the web forward. Guillaume will give tips on how Web developers can join the Web standards community, and will introduce Friends, our new gratitude program.

  • 2016-04-04 ( 4 APR) 2016-04-06 ( 6 APR)

    Web Audio Conference

    Atlanta, USA

    Hosted by Georgia Tech

    The 2nd Annual Web Audio Conference,

See full list of W3C Events.