Forms are the central component of most websites and all web applications, yet few people take the time to build them correctly. Getting it right could mean the difference between people finding your site or application useful and them leaving disappointed with the experience. In this session, design expert Aaron Gustafson explores forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling.
Learning To Love Forms (The Ajax Experience West 2007)Aaron Gustafson
Forms are the central component of most websites and all web applications, yet few people take the time to build them correctly. Getting it right could mean the difference between people finding your site or application useful and them leaving disappointed with the experience. In this session, design expert Aaron Gustafson explores forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You will learn:
• Basic form building blocks;
• Markup for common form components;
• Error, warning, and formatting messages;
• Form styling and its implications;
• Browser oddities with certain form controls;
• Best practices for form manipulation with JavaScript and Ajax.
Forms. We all have to make 'em, but few of us love 'em. Aaron Gustafson believes that this is because we don't understand them. In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling.
This talk covered:
* basic form building blocks;
* markup for common form components;
* error, warning, and formatting messages;
* form styling and its implications;
* browser oddities with certain form controls; and
The Features of Highly Effective Forms [SmashingConf NYC 2016]Aaron Gustafson
Web forms are complex beasts with many moving parts. That’s one of the reasons they're so challenging to build well. In this session, Aaron Gustafson will walk you through the process of creating a form—from planning to production—and give you sage advice for improvement. You’ll learn ways to keep forms focused, how to leverage HTML5 for better user interaction, and a variety of design techniques to enhance forms’ usability. Whether you have one form or a thousand, you’ll leave this session with a much better handle on how to take them from distressing to delightful!
Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint. In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including new HTML5 field types; validation, error messages & formatting hints; how to mark up and style forms for the greatest flexibility in responsive designs; and best practices for enhancing forms with JavaScript.
Falling in Love With Forms [An Event Apart DC 2015]Aaron Gustafson
Without forms, the web would not be what it is today, but they are challenging from a markup and styling standpoint. In this session, we'll explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including new HTML5 field types; validation, error messages & formatting hints; how to mark up and style forms for the greatest flexibility in responsive designs; and best practices for enhancing forms with JavaScript. By the end of this session you’ll be prepared to tackle whatever form-related challenges are thrown at you. You might even find yourself a little giddy over how awesome you can make them.
What is the lifespan of a website, and when is it time to redesign? Let's explore the signs your site may be dying, ways to keep it alive, and the difference between a redesign vs realign.
Learning To Love Forms (The Ajax Experience West 2007)Aaron Gustafson
Forms are the central component of most websites and all web applications, yet few people take the time to build them correctly. Getting it right could mean the difference between people finding your site or application useful and them leaving disappointed with the experience. In this session, design expert Aaron Gustafson explores forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You will learn:
• Basic form building blocks;
• Markup for common form components;
• Error, warning, and formatting messages;
• Form styling and its implications;
• Browser oddities with certain form controls;
• Best practices for form manipulation with JavaScript and Ajax.
Forms. We all have to make 'em, but few of us love 'em. Aaron Gustafson believes that this is because we don't understand them. In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling.
This talk covered:
* basic form building blocks;
* markup for common form components;
* error, warning, and formatting messages;
* form styling and its implications;
* browser oddities with certain form controls; and
The Features of Highly Effective Forms [SmashingConf NYC 2016]Aaron Gustafson
Web forms are complex beasts with many moving parts. That’s one of the reasons they're so challenging to build well. In this session, Aaron Gustafson will walk you through the process of creating a form—from planning to production—and give you sage advice for improvement. You’ll learn ways to keep forms focused, how to leverage HTML5 for better user interaction, and a variety of design techniques to enhance forms’ usability. Whether you have one form or a thousand, you’ll leave this session with a much better handle on how to take them from distressing to delightful!
Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint. In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including new HTML5 field types; validation, error messages & formatting hints; how to mark up and style forms for the greatest flexibility in responsive designs; and best practices for enhancing forms with JavaScript.
Falling in Love With Forms [An Event Apart DC 2015]Aaron Gustafson
Without forms, the web would not be what it is today, but they are challenging from a markup and styling standpoint. In this session, we'll explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including new HTML5 field types; validation, error messages & formatting hints; how to mark up and style forms for the greatest flexibility in responsive designs; and best practices for enhancing forms with JavaScript. By the end of this session you’ll be prepared to tackle whatever form-related challenges are thrown at you. You might even find yourself a little giddy over how awesome you can make them.
What is the lifespan of a website, and when is it time to redesign? Let's explore the signs your site may be dying, ways to keep it alive, and the difference between a redesign vs realign.
Falling in Love with Forms [Accessibility Summit 2014]Aaron Gustafson
Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint.
In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including
* new HTML5 field types;
* validation, error messages & formatting hints;
* how to mark up and style forms for the greatest flexibility in responsive designs; and
* best practices for enhancing forms with JavaScript.
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
Early on, Internet access was considered a luxury. Those times have passed and the Internet, especially the Web, has become a necessity. Whether your users are trying to access their money, gather health information, attend class, apply for assistance, or any of the other hundreds (if not thousands) of critical tasks people do on the web, your site needs to be prepared to meet their needs. And it needs to work, no matter what.
In this session, I discuss the many challenges to delivering critical information and services as well as the steps you can take to overcome those challenges. He’ll explore ways to make sure you can meet users on a variety of devices—and not the just the latest and greatest high end ones folks are talking about; how to make it accessible to people with disabilities; and how to load—and load quickly—on limited- bandwidth connections.
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
For the last three years, our industry has been coming to terms with Progressive Web Apps (PWAs) and what they mean for the work we do every day. Scores of articles, reams of documentation, and dozens of white papers touting the successes and failures in this space can really get your head spinning. It’s easy to get lost in the complexities of service workers, manifests, and oh so many JavaScript frameworks and toolkits. Aaron believes it’s time to take a step back and refocus our attention on what really matters: building great web experiences. In this session, you’ll learn how to apply modern web design and development best practices to your web projects. You’ll learn how to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.
Our industry is abuzz with talk about Progressive Web Apps (PWAs) and with good reason: they are a great way to improve the experiences our users have on our sites, especially when it comes to performance. Using Service Workers—a key component of PWAs—we can manage network requests and the cache to an incredibly granular degree. We can also totally abuse the privilege Service Workers grant us when it comes to writing files to disk.
In this session, Aaron Gustafson will discuss some of the potential pitfalls in implementing Service Workers, especially when it comes to managing heavy files like images and video. He’ll provide guidance on current best practices in cache management. And he’ll offer a few simple recipes you can put to use right away to deliver amazing experiences for your users that respect their data usage and disk space.
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
In this session, you'll learn how to apply modern best practices to grow your Progressive Web Apps fluidly from mobile devices all the way to large screen desktop environments. You’ll even learn how to lay the groundwork for reaching users of future form factors and “headless” UIs. We'll focus on design patterns that set you up for success on every device and across platforms and guarantee your users will be able to access your product, no matter what. Additional topics will include a primer on how your PWA can integrate more tightly with Windows 10—including how to distribute your PWA via the Store—and how to incorporate accessibility from the very beginning.
Designing the Conversation [Concatenate 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
Aaron Gustafson
Author, Adaptive Web Design
Performance as User Experience
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
More Related Content
Similar to Learning To Love Forms [The Ajax Experience East 2007]
Falling in Love with Forms [Accessibility Summit 2014]Aaron Gustafson
Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint.
In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including
* new HTML5 field types;
* validation, error messages & formatting hints;
* how to mark up and style forms for the greatest flexibility in responsive designs; and
* best practices for enhancing forms with JavaScript.
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
Early on, Internet access was considered a luxury. Those times have passed and the Internet, especially the Web, has become a necessity. Whether your users are trying to access their money, gather health information, attend class, apply for assistance, or any of the other hundreds (if not thousands) of critical tasks people do on the web, your site needs to be prepared to meet their needs. And it needs to work, no matter what.
In this session, I discuss the many challenges to delivering critical information and services as well as the steps you can take to overcome those challenges. He’ll explore ways to make sure you can meet users on a variety of devices—and not the just the latest and greatest high end ones folks are talking about; how to make it accessible to people with disabilities; and how to load—and load quickly—on limited- bandwidth connections.
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
For the last three years, our industry has been coming to terms with Progressive Web Apps (PWAs) and what they mean for the work we do every day. Scores of articles, reams of documentation, and dozens of white papers touting the successes and failures in this space can really get your head spinning. It’s easy to get lost in the complexities of service workers, manifests, and oh so many JavaScript frameworks and toolkits. Aaron believes it’s time to take a step back and refocus our attention on what really matters: building great web experiences. In this session, you’ll learn how to apply modern web design and development best practices to your web projects. You’ll learn how to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.
Our industry is abuzz with talk about Progressive Web Apps (PWAs) and with good reason: they are a great way to improve the experiences our users have on our sites, especially when it comes to performance. Using Service Workers—a key component of PWAs—we can manage network requests and the cache to an incredibly granular degree. We can also totally abuse the privilege Service Workers grant us when it comes to writing files to disk.
In this session, Aaron Gustafson will discuss some of the potential pitfalls in implementing Service Workers, especially when it comes to managing heavy files like images and video. He’ll provide guidance on current best practices in cache management. And he’ll offer a few simple recipes you can put to use right away to deliver amazing experiences for your users that respect their data usage and disk space.
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
In this session, you'll learn how to apply modern best practices to grow your Progressive Web Apps fluidly from mobile devices all the way to large screen desktop environments. You’ll even learn how to lay the groundwork for reaching users of future form factors and “headless” UIs. We'll focus on design patterns that set you up for success on every device and across platforms and guarantee your users will be able to access your product, no matter what. Additional topics will include a primer on how your PWA can integrate more tightly with Windows 10—including how to distribute your PWA via the Store—and how to incorporate accessibility from the very beginning.
Designing the Conversation [Concatenate 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
Aaron Gustafson
Author, Adaptive Web Design
Performance as User Experience
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Over time, your users will become more accustomed to and interacting with their computers on the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
So how do you design a "headless" UI? That's easy: You design the conversation.
Conversation is at the root of every interaction we have, be it with another human being, a game, or with a website. This session will discuss how to design and implement a web application that will allow you to create a web page that will allow you to create HTML documents.
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
In this talk, Aaron will discuss and dissect several adaptive interfaces and demonstrate how they smartly morph to meet their users’ needs — slow connections, older browsers, narrow screens, and even no screens at all. He’ll also introduce you to a battle-tested tool for planning, discussing, building and testing adaptive interfaces.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
Learning To Love Forms [The Ajax Experience East 2007]
1. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
cc 2007 A A RO N G U S TA F S O N E A S Y ! D E S I G N S , LLC
2. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
AARON GUSTAFSON
EASY! DESIGNS, LLC
cc 2007 A A RO N G U S TA F S O N 2/67 E A S Y ! D E S I G N S , LLC
3. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
FORMS ARE
A NECESSARY
EVIL
cc 2007 A A RO N G U S TA F S O N 3/67 E A S Y ! D E S I G N S , LLC
4. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
cc 2007 A A RO N G U S TA F S O N 4/67 E A S Y ! D E S I G N S , LLC
5. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
FORM Element <form id=quot;contact-formquot;
action=quot;/action-page.phpquot;
establishes a form method=quot;postquot;>
ACTION is the only required <!-- the rest of our form will go here -->
attribute and should always </form>
be a URI
METHOD defaults to “get”
NAME is depreciated; use ID
instead
cc 2007 A A RO N G U S TA F S O N 5/67 E A S Y ! D E S I G N S , LLC
6. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
FIEDSET Element <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
used to group related fields <legend>Send us a message</legend>
<!-- the rest of our form will go here -->
LEGEND Element </fieldset>
</form>
used to provide a caption for
a FIELDSET
cc 2007 A A RO N G U S TA F S O N 6/67 E A S Y ! D E S I G N S , LLC
7. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Containing FORM
<form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
Controls <p><!-- form control --></p>
<p><!-- form control --></p>
<p><!-- form control --></p>
P or DIV
</fieldset>
</form>
sensible choices, but not
very accurate (except in
certain instances)
<form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
OL or UL
<legend>Send us a message</legend>
<ol>
most forms are lists of <li><!-- form control --></li>
<li><!-- form control --></li>
questions or form controls, <li><!-- form control --></li>
so these are better </ol>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 7/67 E A S Y ! D E S I G N S , LLC
8. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
INPUT Text Control <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
type=quot;namequot; is a basic text <ol>
<li>Name
input field <input type=quot;textquot; name=quot;namequot;
id=quot;contact-namequot; /></li>
(also type=quot;passwordquot; for <li>Email
<input type=quot;textquot; name=quot;emailquot;
content you want hidden)
id=quot;contact-emailquot; /></li>
<li><!-- form control --></li>
NAME vs. ID
</ol>
</fieldset>
</form>
NAME is for the back end
ID is for the front end
cc 2007 A A RO N G U S TA F S O N 8/67 E A S Y ! D E S I G N S , LLC
9. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
TEXTAREA <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
a multiline text form control <ol>
<li>Name
<input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li>
<li>Email
requires ROWS and COLS <input type=quot;textquot; name=quot;emailquot; id=quot;contact-emailquot; /></li>
<li>Message
attributes!!! <textarea name=quot;messagequot;
id=quot;contact-messagequot;
rows=quot;4quot; cols=quot;30quot;></textarea></li>
</ol>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 9/67 E A S Y ! D E S I G N S , LLC
10. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Working with LABEL
<form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
this element provides to <ol>
<li><label>Name
means of associating its <input ... /></label></li>
content with a form control: ...
</ol>
</fieldset>
</form>
implicit association
LABEL wraps the form
control and the text <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
explicit association <li><label for=quot;contact-namequot;>Name</label>
LABEL's FOR attribute is an ...
<input id=quot;contact-namequot; ... /></li>
ID reference to the form </ol>
</fieldset>
control </form>
cc 2007 A A RO N G U S TA F S O N 1 0/ 67 E A S Y ! D E S I G N S , LLC
11. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Buttons
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
trigger events in a form; use <ol>
...
either INPUT or BUTTON </ol>
<input type=quot;submitquot; value=quot;Goquot; />
element </fieldset>
</form>
Common TYPEs
submit – submits the form;
default button type <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
reset – resets all form
<ol>
...
</ol>
control values back to their <button type=quot;submitquot;>Go</button>
defaults when the page </fieldset>
</form>
loaded
cc 2007 A A RO N G U S TA F S O N 1 1/ 67 E A S Y ! D E S I G N S , LLC
12. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIDEBAR:
BUTTONS
WINDOWS XP OS X
INPUT
BUTTON
Mozilla IE 6/7 IE 6/7 Opera Safari Camino Firefox IE 5 Opera
(XP) (classic)
cc 2007 A A RO N G U S TA F S O N 1 2/ 67 E A S Y ! D E S I G N S , LLC
13. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
<li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot;
name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot;
name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot;
name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 3/ 67 E A S Y ! D E S I G N S , LLC
14. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
body {
font: 62.5%
quot;Lucida Sans Unicodequot;,
quot;Lucida Grandequot;,
sans-serif;
}
ol, ul, p {
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
font-size: 1.2em; <fieldset>
line-height: 1.5; <legend>Send us a message</legend>
<ol>
} <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 4/ 67 E A S Y ! D E S I G N S , LLC
15. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form, fieldset, legend {
border: 0;
padding: 0;
margin: 0;
}
legend {
font-size: 2em;
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
} <fieldset>
form ol, form ul { <legend>Send us a message</legend>
<ol>
list-style: none; <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
margin: 0; <li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
padding: 0; <li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
} </ol>
cols=quot;30quot;></textarea></li>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 5/ 67 E A S Y ! D E S I G N S , LLC
16. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form li {
margin: 0 0 .75em;
}
label {
display: block;
}
input, textarea {
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
width: 250px; <fieldset>
} <legend>Send us a message</legend>
<ol>
<li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 6/ 67 E A S Y ! D E S I G N S , LLC
17. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form li {
clear: both;
margin: 0 0 .75em;
padding: 0;
}
label {
display: block;
float: left; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
line-height: 1.6; <legend>Send us a message</legend>
<ol>
margin-right: 10px; <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
text-align: right; <li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
width: 120px; <li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
} cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 7/ 67 E A S Y ! D E S I G N S , LLC
18. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
legend {
font-size: 2em;
line-height: 1.8;
padding-bottom: .5em;
}
button {
margin-left: 130px;
cursor: pointer; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
} <legend>Send us a message</legend>
<ol>
<li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 8/ 67 E A S Y ! D E S I G N S , LLC
19. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
label:after {
content: ':';
}
input, textarea {
background: #ddd;
width: 250px;
}
input:focus, <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
textarea:focus { <legend>Send us a message</legend>
<ol>
background: #fff; <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
} <li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
/* Some styles to get <li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
the baselines to </ol>
cols=quot;30quot;></textarea></li>
match & to unify the <button type=quot;submitquot;>Go</button>
</fieldset>
type used */ </form>
cc 2007 A A RO N G U S TA F S O N 1 9/ 67 E A S Y ! D E S I G N S , LLC
20. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
body { label:after {
font: 62.5% quot;Lucida Sans content: ':';
Unicodequot;, quot;Lucida Grandequot;, }
sans-serif; input, textarea {
SIMPLE FORM: }
ol, ul, p {
background: #ddd;
font: 1em Arial, Helvetica,
CONTACT US font-size: 1.2em;
line-height: 1.5;
sans-serif;
padding: 1px 3px;
} width: 250px;
form, fieldset, legend { }
border: 0; textarea {
margin: 0; line-height: 1.3em;
padding: 0; padding: 0 3px;
} }
legend { input:focus, textarea:focus {
font-size: 2em; background: #fff;
line-height: 1.8; }
padding-bottom: .5em; button {
} background: #ffd100;
form ol, form ul { border: 2px outset #333;
list-style: none; color: #333;
margin: 0; cursor: pointer;
padding: 0; font-size: .9em;
} font-weight: bold;
form li { letter-spacing: .3em;
clear: both; margin-left: 130px;
margin: 0 0 .75em; padding: .2em .5em;
padding: 0; text-transform: uppercase;
} }
label {
display: block;
float: left;
line-height: 1.6;
margin-right: 10px;
text-align: right;
width: 120px;
}
cc 2007 A A RO N G U S TA F S O N 2 0/ 67 E A S Y ! D E S I G N S , LLC
21. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
cc 2007 A A RO N G U S TA F S O N 2 1/ 67 E A S Y ! D E S I G N S , LLC
22. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
SELECTion Lists <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
allows selection of one or <ol>
...
more OPTIONs <li><label
for=quot;contact-subjectquot;>Subject</label>
<select id=quot;contact-subjectquot;
On OPTION elements, the name=quot;subjectquot;>
VALUE attribute is optional <option value=quot;Errorquot;>I noticed a
(contents are submitted by website error</option>
<option value=quot;Questionquot;>I have a
default)
question</option>
<option>Other</option>
</select></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 2 2/ 67 E A S Y ! D E S I G N S , LLC
23. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIDEBAR:
SELECTS
WINDOWS XP
Mozilla IE 6/7 IE 7 IE 6 Opera
(XP) (classic) (classic)
OS X
Safari Camino Firefox IE 5 Opera
cc 2007 A A RO N G U S TA F S O N 2 3/ 67 E A S Y ! D E S I G N S , LLC
24. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li><label for=quot;contact-subjectquot;>Subject</label>
<select id=quot;contact-subjectquot; name=quot;subjectquot;>
<option value=quot;Errorquot;>I noticed a website error</option>
<option value=quot;Questionquot;>I have a question</option>
<option>Other</option>
</select></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 2 4/ 67 E A S Y ! D E S I G N S , LLC
25. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
select {
background: #ddd;
width: 260px;
/* width is *usually*
the input width +
input padding +
4px */
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
} <fieldset>
input:focus, <legend>Send us a message</legend>
<ol>
textarea:focus, ...
<li><label for=quot;contact-subjectquot;>Subject</label>
select:focus { <select id=quot;contact-subjectquot; name=quot;subjectquot;>
<option value=quot;Errorquot;>I noticed a website error</option>
background: #fff; <option value=quot;Questionquot;>I have a question</option>
<option>Other</option>
} </select></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 2 5/ 67 E A S Y ! D E S I G N S , LLC
26. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
CUSTOM
SELECTS
FauxSelect
code.google.com/p/
easy-designs/wiki/FauxSelect
SELECT Something New
easy-designs.net/articles/replaceSelect/
SELECT Something New Pt. 2
easy-designs.net/articles/replaceSelect2/
cc 2007 A A RO N G U S TA F S O N 2 6/ 67 E A S Y ! D E S I G N S , LLC
27. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
cc 2007 A A RO N G U S TA F S O N 2 7/ 67 E A S Y ! D E S I G N S , LLC
28. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Nested FIELDSETs ...
<li>
a great way to organize radio <fieldset class=quot;radioquot;>
or checkbox groups <legend>I would prefer to be
contacted by</legend>
<ul>
The LEGEND is the question <li><label><input type=quot;radioquot;
or statement name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot;
Lists organize the possible name=quot;methodquot; value=quot;phonequot; />
responses (OL or UL) phone</label></li>
</ul>
implicit LABELs provide an </fieldset>
</li>
easy way to style in IE6 ...
cc 2007 A A RO N G U S TA F S O N 2 8/ 67 E A S Y ! D E S I G N S , LLC
29. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
...
<li>
<fieldset class=quot;radioquot;>
<legend>I would prefer to be contacted by</legend>
<ul>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>
cc 2007 A A RO N G U S TA F S O N 2 9/ 67 E A S Y ! D E S I G N S , LLC
30. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio legend {
font-size: 1em;
line-height: 1.5;
padding: 0 0 0 6px;
margin: 0;
}
.radio label {
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
display: inline; ...
width: auto; <li>
<fieldset class=quot;radioquot;>
margin: 0; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>
cc 2007 A A RO N G U S TA F S O N 3 0/ 67 E A S Y ! D E S I G N S , LLC
31. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio {
margin-left: 125px;
}
.radio ul {
font-size: 1em;
margin: .3em 0 0;
}
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
.radio label:after { ...
content: ''; <li>
<fieldset class=quot;radioquot;>
} <legend>I would prefer to be contacted by</legend>
<ul>
label input { <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
background: <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
transparent; </ul>
</fieldset>
width: auto; </li>
...
} </form>
cc 2007 A A RO N G U S TA F S O N 3 1/ 67 E A S Y ! D E S I G N S , LLC
32. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio li {
float: left;
margin: 0;
width: 48%;
clear: none;
}
label input {
width: auto; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
...
position: relative; <li>
<fieldset class=quot;radioquot;>
top: 2px; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>
cc 2007 A A RO N G U S TA F S O N 3 2/ 67 E A S Y ! D E S I G N S , LLC
33. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio legend {
font-size: 1em;
line-height: 1.5;
padding: 0 0 0 6px;
margin: 0;
max-width: 270px;
width: 270px;
} ...
<fieldset class=quot;radioquot;>
This is an exceedingly long
<legend>
<code>LEGEND</code> to demonstrate the odd
behavior of <code>LEGEND</code>s</legend>
<ul>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
...
cc 2007 A A RO N G U S TA F S O N 3 3/ 67 E A S Y ! D E S I G N S , LLC
34. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio legend span {
display: block;
width: 270px;
}
...
<fieldset class=quot;radioquot;>
<span>
<legend> This is an exceedingly long
<code>LEGEND</code> to demonstrate the odd behavior of
<code>LEGEND</code>s</span> </legend>
<ul>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
...
cc 2007 A A RO N G U S TA F S O N 3 4/ 67 E A S Y ! D E S I G N S , LLC
35. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
cc 2007 A A RO N G U S TA F S O N 3 5/ 67 E A S Y ! D E S I G N S , LLC
36. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
Getting organized <fieldset class=quot;datequot;>
<!-- the rest will go here -->
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 6/ 67 E A S Y ! D E S I G N S , LLC
37. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
Not really a LABEL <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<!-- the rest will go here -->
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 7/ 67 E A S Y ! D E S I G N S , LLC
38. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
Not just a SELECT <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
we need some LABELing <li>
<label for=quot;date-dayquot;>Date</label>
<select id=quot;date-dayquot; name=quot;dayquot;>
<option>01</option>
...
<option>31</option>
</select>
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 8/ 67 E A S Y ! D E S I G N S , LLC
39. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
And so on <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li>
<label for=quot;date-dayquot;>Date</label>
...
</li>
<li>
<label for=quot;date-monthquot;>Month</label>
<select id=quot;date-monthquot; name=quot;monthquot;>
<option value=quot;01quot;>January</option>
...
<option value=quot;12quot;>December</option>
</select>
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 9/ 67 E A S Y ! D E S I G N S , LLC
40. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
And so forth <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li>
<label for=quot;date-dayquot;>Date</label>
...
</li>
<li>
<label for=quot;date-monthquot;>Month</label>
...
</li>
<li>
<label for=quot;date-yearquot;>Year</label>
<select id=quot;date-yearquot; name=quot;yearquot;>
<option>2007</option>
<option>2008</option>
</select>
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 0/ 67 E A S Y ! D E S I G N S , LLC
41. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
body {
background: #54af44;
font: 62.5% quot;Lucida
Sans Unicodequot;, quot;Lucida
Grandequot;, sans-serif;
}
ol, ul, p, legend {
font-size: 1.2em; <fieldset class=quot;datequot;>
<legend>Post Date</legend>
line-height: 1.5; <ol>
<li><label for=quot;date-dayquot;>Date</label>
} ...
</li>
legend { <li><label for=quot;date-monthquot;>Month</label>
...
color: #000; </li>
<li><label for=quot;date-yearquot;>Year</label>
} ...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 1/ 67 E A S Y ! D E S I G N S , LLC
42. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date {
border: 0;
padding: 0;
}
.date ol {
list-style: none;
margin: 0 0 0 130px;
padding: 0; <fieldset class=quot;datequot;>
<legend>Post Date</legend>
} <ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 2/ 67 E A S Y ! D E S I G N S , LLC
43. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date li {
float: left;
}
<fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 3/ 67 E A S Y ! D E S I G N S , LLC
44. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date select {
background: #e2efe0;
margin: 0 .25em 0 0;
}
.date select:focus {
background: #fff;
}
<fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 4/ 67 E A S Y ! D E S I G N S , LLC
45. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date label {
position: absolute;
left: -999em;
}
<fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 5/ 67 E A S Y ! D E S I G N S , LLC
46. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date {
border: 0;
padding: 0;
position: relative;
}
.date legend span {
display: block;
line-height: 1.6; <fieldset class=quot;datequot;>
text-align: right; <legend><span> </span>
Post Date </legend>
<ol>
width: 120px; <li><label for=quot;date-dayquot;>Date</label>
...
position: absolute; </li>
<li><label for=quot;date-monthquot;>Month</label>
top: 0; ...
</li>
left: 0; <li><label for=quot;date-yearquot;>Year</label>
...
} </li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 6/ 67 E A S Y ! D E S I G N S , LLC
47. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date legend
span:after {
content: quot;:quot;;
}
<fieldset class=quot;datequot;>
<legend><span>Post Date</span></legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 7/ 67 E A S Y ! D E S I G N S , LLC
48. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MAKING
THE MOST OF
MESSAGES
cc 2007 A A RO N G U S TA F S O N 4 8/ 67 E A S Y ! D E S I G N S , LLC
49. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
cc 2007 A A RO N G U S TA F S O N 4 9/ 67 E A S Y ! D E S I G N S , LLC
50. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
What is the * anyway? <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
Well, it stands for something <p>Required fields are marked
else and in HTML, the closest to <abbr title=quot;requiredquot;>*</abbr>.</p>
that we have to convey that is <ol>
<li>
the ABBR element. <label for=quot;contact-namequot;>
Name<abbr title=quot;requiredquot;>*</abbr>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 0/ 67 E A S Y ! D E S I G N S , LLC
51. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
If you want to go all- <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
out, you can <p>Required fields are marked
<em><abbr title=quot;requiredquot;>*</abbr></em>.
but that seems like overkill
</p>
<ol>
<li class=quot;requiredquot;>
<label for=quot;contact-namequot;>
Name<em><abbr title=quot;requiredquot;>*
</abbr></em>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 1/ 67 E A S Y ! D E S I G N S , LLC
52. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<p>Required fields are marked
<abbr title=quot;requiredquot;>*</abbr>.</p>
<ol>
<li>
<label for=quot;contact-namequot;>
Name<abbr title=quot;requiredquot;>*</abbr>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 2/ 67 E A S Y ! D E S I G N S , LLC
53. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
abbr {
cursor: help;
font-style: normal;
border: 0;
}
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<p>Required fields are marked
<abbr title=quot;requiredquot;>*</abbr>.</p>
<ol>
<li>
<label for=quot;contact-namequot;>
Name<abbr title=quot;requiredquot;>*</abbr>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 3/ 67 E A S Y ! D E S I G N S , LLC
54. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
cc 2007 A A RO N G U S TA F S O N 5 4/ 67 E A S Y ! D E S I G N S , LLC
55. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
How should we ...
<li class=quot;errorquot;>
strongly emphasize
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr>
<strong class=quot;errquot;> You forgot to fill
even more important in your email</strong>
error advisories?
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
How should we
highlight the field?
cc 2007 A A RO N G U S TA F S O N 5 5/ 67 E A S Y ! D E S I G N S , LLC
56. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
...
<li class=quot;errorquot;>
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
to fill in your email</strong>
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 6/ 67 E A S Y ! D E S I G N S , LLC
57. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
strong.err {
color: #ffdfdf;
display: block;
padding-left: 5px;
text-align: left;
}
...
<li class=quot;errorquot;>
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
to fill in your email</strong>
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 7/ 67 E A S Y ! D E S I G N S , LLC
58. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
strong.err {
color: #ffdfdf;
display: block;
line-height: 1.8;
padding-left: 5px;
text-align: left;
white-space: nowrap;
position: absolute; ...
<li class=quot;errorquot;>
top: 0; <label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
left: 390px; to fill in your email</strong>
} </label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
strong.err:before { </li>
...
content: quot;<quot;
}
cc 2007 A A RO N G U S TA F S O N 5 8/ 67 E A S Y ! D E S I G N S , LLC
59. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
.error input {
border: 2px solid #b00;
background: #ffdfdf;
}
.error input:focus {
background: #fff;
}
...
<li class=quot;errorquot;>
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
to fill in your email</strong>
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 9/ 67 E A S Y ! D E S I G N S , LLC
60. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
How do we notify <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
users of errors? <div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong>
It is best to be upfront about
while trying to process this form:</p>
errors encountered and to <ol>
say, in plain language, what <li>You forgot to include <a
the user needs to do to fix it href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
and linking to the field with </div>
errors doesn't hurt <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 0/ 67 E A S Y ! D E S I G N S , LLC
61. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 1/ 67 E A S Y ! D E S I G N S , LLC
62. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors {
background: #ffdfdf;
border: 2px solid #b00;
color: #333;
margin: .5em 0 1em;
padding: 10px;
}
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 2/ 67 E A S Y ! D E S I G N S , LLC
63. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors p {
margin: 0;
padding: 0;
}
#errors ol {
list-style: disc;
margin: 0 0 0 20px;
} <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 3/ 67 E A S Y ! D E S I G N S , LLC
64. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors a {
color: #b00;
}
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 4/ 67 E A S Y ! D E S I G N S , LLC
65. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
PARTING
ADVICE
•treat forms like any other piece of (X)HTML
•be aware of browser inconsistencies & make accommodations (when possible)
•break a complex form into bite-size chunks
•look for ways to provide richer meaning/a better experience
•apply your CSS layout knowledge for the rest of the page to a form
•don't over-complicate form design
•learn to love forms
cc 2007 A A RO N G U S TA F S O N 6 5/ 67 E A S Y ! D E S I G N S , LLC
66. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
FORMS ARE
NOT
NECESSARILY
EVIL
cc 2007 A A RO N G U S TA F S O N 6 6/ 67 E A S Y ! D E S I G N S , LLC
67. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
http://slideshare.net/AaronGustafson
cc 2007 A A RO N G U S TA F S O N E A S Y ! D E S I G N S , LLC