Forms are incredibly important for the web. People enter data into them and the data goes to a server (via HTTP and a page reload, into a frame, or via XHR).
Entering forms is annoying and frustrating as in many cases you need to look up data elsewhere (your credit card number, itinerary numbers…). This is why you main goal should be to create a working form that needs the least amount of information labeled in an understandable fashion. The look of the form is less important than that – this pleases us and our clients but a pretty form that isn’t understandable is not good for your users
A form that points nowhere is not a form. Have an action attribute that points to a server-side script and a submit button to enable sending the form by hitting enter. If and when there is a JS error, people can still send the data which is what you want.
Label elements are incredibly important. They tell assistive technology what a certain input element is and they allow users to click the label instead of clicking on the small checkbox. This is very important on touch devices (ever tried to check-in at the British Airways boarding pass on your phone? The checkbox is under a link. Guess what I click in 99% of the cases). There are two ways to connect input elements and labels:
You can just embed the input in the label:
<label>Your web site
Every input element needs a label (arguably the submit button doesn’t – if you have an action forms can be sent by hitting enter), this can be annoying with radio boxes, but you want them to be understandable, don’t you? Also, adding a label gives you a handle to create elements with CSS using ::before and ::after. As input elements are replaced elements that doesn’t work on them.
Labels without for attributes or input elements in them are pointless.
If you replace input element with your own styled elements (using image replacement techniques) think of the following:
What happens when the image/icon font can’t be loaded?
How does it look when you zoom into the page?
Is there enough contrast to the background and is it obvious that this is an input element?
It is very easy to replace forms with “nicer” things. It is also too easy to block out a lot of users when you do.
I just got asked to provide a few answers for a survey amongst “mobile web experts” and thought it’d be good to re-use those here. So here goes:
What is the difference between a web site and a web application?
There are a few differences. On a very basic level applications are catered for doing things whereas web sites are more catered for offering content for consumption. Web sites started as structured, interlinked academical documents. Later on we added multimedia content to make them much more engaging but all in all they are fixed in their state.
Applications are more dynamic. They allow for customisation of the interface and store the state of what happens so that when you get back to it you can go on from where you left off.
The use case of an app should always be to do something with it. This could be as simple as voting on a how much you like a kitten photo and go as far as editing video content live in your browser or on your device. Basic examples would be a webmail client as an application and a pure image gallery to click through as a web site.
Web sites are static whereas web applications have atomic updates and in of themselves have a very small footprint as most of the content gets loaded subsequently and changes every time you use it.
All in all it is a sliding scale though as for example an image gallery can easily become an application if it allows you to upload your own images or edit and remix the existing ones in your browser. That is one of the main benefits of web technology – it is very flexible and allows for quick and simple changes to the final product without being hindered by a complex compilation, packaging and deployment process.
What kind of features should a web site have to be qualified as a web application?
Again, there are many things to consider. One main thing is that an app does one thing and one thing well. It is there to help you do something.
Technically it should behave like the fat client apps of old: it should retain my state and settings, allow me to customise the interface to my needs and it needs to work offline. The latter is not a technical necessity in terms of definition but to me crucial usability. Seeing how flaky our connections are – I am writing this on a plane – our apps should make people as effective as possible and this means we shouldn’t be dependent on a connection. The interface should be usable whilst we are off the grid and sync as soon as we go online.
Customisation and personalisation of the interface and interactivity to me make an application. This could just mean a game where I can change my character and get extras the more I play. A proper “web” application to me also should use the web whenever it can. For example I am very frustrated with playing a game on my phone and when I go to my tablet playing the same game my score and achievements aren’t synced although the device knows who I am. Why be online then?
A lot of badly designed web apps are just wrappers for content like a news feed. For example turning a blog into an app is a pointless exercise. It just adds the overhead of having to install the wrapper, update and uninstall it when I am fed up with the blog but doesn’t give me the “do something” part that defines an app.
If I don’t interact with it other than reading there is no point in making it an app. You lose a lot of the flexibility of the web when packaging HTML as native apps with the most important thing being opaque updates. An app that is hosted on the web can be patched and upgraded without the end user having to download megabytes of data. That is incredibly useful on slow or flaky connections. Instead of the whole app you only download the changes.
What is the difference between a mobile-friendly site and a mobile web app?
A mobile-friendly site is a web site that detects the capabilities of the device it is displayed on and doesn’t make assumptions about how big my screen is and that I have a mouse and keyboard or not. It runs in the browser of the device and is thus hindered by its limitations – which in the case of older Android devices are quite limited indeed. It caters to the mobile space in terms of display changes – single column display, larger fonts, larger buttons.
A mobile web app is an application built with web technologies running in an own, full-screen wrapper and not inside a browser. It takes advantage of all the things the current environment allows for. For example it stores content and itself locally instead of having to be online and requesting everything new every time you open it. It can access the special features of certain environments like swipe gestures, accelerometer for interaction or accessing the camera to get content in. Its purpose is for me to do things with it and not just visit it like I visit a web site.
What would you consider is the key feature that made HTML5 (as opposed to Flash and Java) the number 1 choice for developing mobile web apps?
Flexibility is the super power of HTML5. It is easy to make an HTML5 app adapt to a new environment and to make an interface that shows and hides content and functionality dependent on the capability of the device or environment. Both Java and Flash are not “web native”, meaning you need to initiate and execute an own code environment inside a browser before you see the results. This hinders interactivity of the containing document and the content of the Flash movie or Java Applet. Whilst both Java and Flash have incredibly good development tools and capabilities once they are available they are very demanding to the hardware they run on. That’s why iOS devices don’t have Flash. There is already a fully capable environment available – the browser – and executing another one inside it means using a lot of resources. On mobile devices this means shorter battery life and the device heating up quickly.
With HTML5 we have the opportunity to improve what mobile, web enabled devices already have to have – a browsing environment. These are available open source and for free (Firefox, Chromium and others) and developers can build apps without needing to sign up for one company and get their SDK to get started.
All environments have their uses and there are things that are better done in Flash than in HTML5. Betting on open technologies and browsers means though that you are very likely to be flexible enough to cater to the next environment around the corner. The web has always evolved and mutated around the needs of the market. That’s why multimedia in HTML5 is just another element of the document and not a black hole that can not interact with the rest of the browser or the document.
Where would you say the mobile web is heading? Do you see a future for the mobile web?
There is no mobile web. There is the web. Right now we start consuming it more and more on mobile devices. That is cool. And the web is totally ready for that as it is flexible enough to adapt.
If you use web standard technologies to build applications that expect a certain device, a fixed size of a screen, a special way of user interaction or expect a fast connection you are building a very limited and very quickly outdated piece of software.
Over the last years we should have learned that hardware is a commodity and susceptible to very sudden change. An amazing piece of hardware that is the hot new thing now can tomorrow be embarrassingly outdated.
When you build your web apps to only cater for that you try to be native code and that is a race you can not win. A lot of native apps are built to promote a new piece of hardware and to get people to upgrade. That is a very old technique of selling more products called in-built obsolescence.
Web apps should be beyond this. Our job is to give end users the best possible experience on the current devices but not make them a necessity. We did this mistake in the past which is why you see web applications that tell you that you need a “modern browser like Internet Explorer 6” and “at least 800×600 resolution”.
Native apps on high-end devices are doing really well right now, but I can foresee that people will get bored of having to buy a new phone every year just to get new functionality that is not that important when you consider the cost. The web will stay and always be the open alternative for those who want to consume and create on their own terms instead of being dependent on the success or goals of a certain company.
Web Professional Trends for 2013 – “Web Project Management” Interview with Tonya Price
In this sixteen minute interview with Tonya Price, Web consultant and Web project Management instructor we learn from her perspective on the topic of Web Professional Trends for 2013 as it relates to Web Project Management.
Specifically we learn:
• How companies are postponing hiring of the Web project “leaders” due to the pressures of a tight economy
• How the net result of this is the shift of the project management job function to Web Designers and Web Developers
• About the “Web Project Management Essentials” Course offering on the Weprofessionals.org website
• How Web project management is becoming of particular interest to the Web Designer and Web Developer
• How Web Designers and Developers have an increased interest in accessing Web project management training gain access to the training
• How Web projects are changing too fast for the “typical project manager”
• How Web project management is different than that of typical project management
• How traditional project managers want to manage Web teams but they don’t understand the terminology or technology
• How traditional project managers need Web design and Web development training
• About the “Web Project Management Essentials” Course offering on the Weprofessionals.org website
More about Tonya Price
Tonya Price advises holds an MBA in Marketing and Finance from Cornell University’s Johnson School of Management and teaches the Website Project Management Essentials course WebProfessionals.org. She has over 20 years’ experience managing high tech and Internet company Technical Support and Web Development teams ranging in size from five to over one hundred and fifty staff members. She runs a Web Project Management blog at www.tonyaprice.com/blog and posts the Web Project Management Tip of the Day on twitter www.twitter.com/tdprice.
She started her career as a programmer and founded the web firm, StrategicIdeas in 1996, which was acquired by the Internet Service Provider, UltraNet Communications (later acquired by RCN.) She has consulted with a variety of companies across numerous industries and served as Director of Web Services and Web Operations for start-ups to Fortune 500 companies. As Director of Marketing and Web Operations at Worcester Polytechnic Institute, she oversaw the successful Project Management of a 40,000 page redesign of the university Web site and Red Dot CMS integration
Winners of the 2012 #WorldSkills Americas Web Design Competition Announced
WorldSkills Americas – Sao Paulo Brazil.
November 18, 2012. More than 20 countries participated in the 2nd WorldSkills Americas competitions this week in Sao Paulo, Brazil.
Web Design students from Brazil, Colombia, Paraguay, Dominican Republic and the USA battled it out in a head-to-head week long competition for the honor of taking home the prestige and medals.
According to the conference organizer, Web Design is a fairly new profession incorporating building and maintaining web pages. Web Designers use computer programmes to produce pages which include links to other pages, graphical elements, text and photographs. The layout of these elements can be presented as a script or drawings on paper. Computer software is used for technical implementation. In their work, designers and builders must pay attention to copyright laws and ethical questions.
* Nayara Namorato, Brazil
* Gustavo Adolfo Rodriguez Quinayas, Colombia
* Emanuel Bisono, Dominican Republic
* Michael Angel, USA placed 4th place
* Marcelo Leguizamon Munoz, Paraguay placed in 5th place
Challengers documented their progress as they demonstrated their skills in Web Programming (HTML, XHTML and CSS), Web graphics, Web site design, Web accessibility and usability, Web site management, programming, Web multimedia and equally important professionalism.
The Web Design Contest provides quality education experiences for students in leadership, teamwork, citizenship and character development. It builds and reinforces self-confidence, work attitudes and communications skills. It emphasizes total quality at work, high ethical standards, superior work skills, life-long education and pride in the dignity of work.
Web Design Competitors: (left to right) * Michael Angel, USA * Emanuel Bisono, Dominican Republic * Nayara Namorato, Brazil * Marcelo Leguizamon Munoz, Paraguay * Gustavo Adolfo Rodriguez Quinayas, Colombia
Web Design experts.(left to right) * Bill Cullifer, USA * Gabriel Lopes, Brazil * Julio Prado, Columbia * Wilfredo Oreu, Paraguay * Manuel Ramirez, Dominican Republic
Web Professional Trends for 2013 – “Web Development” Interview with Chris Wilson, Developer Advocate at Google
In this twelve minute interview Chris Wilson, Developer Advocate at Google, we learn about Chris’s perspective on the topic of Web Professional Trends for 2013 as it relates to Web Development trends, Web standards and the Open Web.
Specifically we learn:
•About the benefits and current trends of Encapsulation and Reuse
•The component model for the Web (also known as Web Components)
•Chris’s thoughts on a focus for developing for the user and how tools have made life much easier the for the Web developer
•Now is a great time to be a Web Professional
•Access to real world to the Web platform (audio and video inputs)
•Advice for aspiring Web developers and those that teach
•About Chris’s personal interest in audio and the Web audio API and his exciting efforts to support open standards for the WebRTC, (Web Real-Time Communication) an API definition that is being supported by Chris and others the World Wide Web Consortium (W3C) to enable browser to browser applications for voice calling, video chat and P2P file sharing without plugins.
More about Encapsulation
According to Wikipedia, in programming language, encapsulation is used to refer to one of two related but distinct notions, and sometimes to the combination thereof:
A language mechanism for restricting access to some of the object’s components.
A language construct that facilitates the bundling of data with the methods (or other functions) operating on that data.
Some programming language researchers and academics use the first meaning alone or in combination with the second as a distinguishing feature of object oriented programming, while other programming languages which provide lexical closures view encapsulation as a feature of the language orthogonal to object orientation.
The second definition is motivated by the fact that in many OOP languages hiding of components is not automatic or can be overridden; thus, information hiding is defined as a separate notion by those who prefer the second definition.
As information hiding mechanism
Under this definition, encapsulation means that the internal representation of an object is generally hidden from view outside of the object’s definition. Typically, only the object’s own methods can directly inspect or manipulate its fields. Some languages like Smalltalk and Ruby only allow access via object methods, but most others (e.g. C++, C# or Java) offer the programmer a degree of control over what is hidden, typically via keywords like public and private. It should be noted that the ISO C++ standard refers to private and public as “access specifiers” and that they do not “hide any information”. Information hiding is accomplished by furnishing a compiled version of the source code that is interfaced via a header file.
Hiding the internals of the object protects its integrity by preventing users from setting the internal data of the component into an invalid or inconsistent state. A benefit of encapsulation is that it can reduce system complexity, and thus increases robustness, by allowing the developer to limit the interdependencies between software components.
More about Web Components
According to the W3c, the component model for the Web (also known as Web Components) consists of four pieces designed to be used together to let web application authors define widgets with a level of visual richness not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.
These pieces are:
templates, which define chunks of markup that are inert but can be activated for use later;
decorators, which apply templates to let CSS affect rich visual and behavioral changes to documents;
custom elements, which let authors define their own elements, including new presentation and API, that can be used in HTML documents; and
shadow DOM which defines how presentation and behavior of decorators and custom elements fit together in the DOM tree.
Both decorators and custom elements are called components. For additional information visit http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html
More about WebRTC
According to WebRTC.org, the WebRTC (Web Real-Time Communication) is an API definition being drafted by the World Wide Web Consortium (W3C) to enable browser to browser applications for voice calling, video chat and P2P file sharing without plugins.
According to Wikipedia, a project known as WebRTC, for browser based realtime communication, was open sourced by Google . This has been followed by on going work to standardise the relevant protocols in the IETF and browser APIs in the W3C
The Web Real-Time Communications Working Group expects this specification to evolve significantly based on:
The outcomes of ongoing exchanges in the companion RTCWEB group at IETF to define the set of protocols that, together with this document, will enable real-time communications in Web browsers.
Privacy issues that arise when exposing local capabilities and local streams.
Technical discussions within the group, on implementing data channels in particular.
Experience gained through early experimentations.
Feedback received from other groups and individuals.
As of March 2012 the IETF WebRTC Codec and Media Processing Requirements draft requires implementations to provide PCMA/PCMU (RFC 3551), Telephone Event as DTMF (RFC 4733), and Opus (RFC 6716), along with a number of video codec minimum capabilities. The Peerconnection, Data channels and a media capture browser APIs are detailed in the W3C.
Web Audio API
The introductory section covers the motivation behind this specification.
This API is designed to be used in conjunction with other APIs and elements on the web platform, notably: XMLHttpRequest (using the responseType and response attributes). For games and interactive applications, it is anticipated to be used with the canvas 2D and WebGL 3D graphics APIs.
For additional information visit https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
More about Chris Wilson
Chris Wilson, is a Developer Advocate at Google, Chris is a Web browser guy since 1993. Chris grew up in the Chicago, Il area.
Chris spent 15 years at Microsoft Co-wrote NCSA Mosaic for Windows, wrote IE’s original CSS implementation, worked on lots of standards. Chris Wilson was the group program manager for Internet Explorer Platform and Security at Microsoft. He began working on web browsers in 1993 when he co-authored the first Windows versions of NCSA Mosaic, the first mass-market WWW browser. This was also when he inflicted overlapping tags on the world. After leaving NCSA in 1994 and spending a year working on the web browser for SPRY, Inc., he joined Microsoft’s Internet Explorer team as a developer in 1995.
In the course of five years on the IE team, Chris has participated in many standards working groups, in particular helping develop standards for Cascading Style Sheets, HTML, the Document Object Model and XSL through the W3C working groups. He also developed the first implementations of CSS in Internet Explorer. Beginning in 2001, he spent a few years working on the Avalon project, but rejoined the IE team a year and a half ago to lead the IE Platform and Security team.
Chris resides in Seattle. In his free time, he enjoys photography and hiking with his wife and daughter, and scuba diving in the chilly waters of Puget Sound as a PADI Divemaster. With any free money, he replaces the cameras he’s destroyed by taking them underwater for dive photography.
Lastly, according to Chris, he builds cool stuff, and even more importantly, help other people build cool stuff and help Chrome build the right platform for people to build cool stuff on.
A special shout out to Chris, a super nice and gracious guy for taking the time to talk with us!
Preferred Resources Saint Louis, MO Job description: …development*Experience gathering and documenting business requirements*A successful background in web development with hands-on experience*Experience with database-driven internet application development*Experience with Systems Development Methodologies in support of the Systems Development Life…
View full post on Dice.com – Web Application
A group of “cyber vigilantes” have teamed up to expose the people behind LulzSec, a group of hackers who have successfully infiltrated and defaced government and large corporation websites in the past months.