Accessible CSS Forms: Using CSS to Create a Two-Column Layout – replace …
Accessible CSS Forms: Using CSS to Create a Two-Column Layout – replace …
|
|
Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that …
Similar Posts
- There is not enough attention in making them usable. This could be poor validation, improper labeling of required fields, making them too long or poor form layout.
- There is not enough attention to what information is asked from the user.
- The Web Content Style Guide: The Essential Reference for Online Writers, Editors and Managers
- Quality Web Content
- Related pages / articles / posts
- Links to rich media
- Latest news / updates
- Previously viewed pages
- A contact form
- Ways to save / share the page
- Newsletter sign up
- Turning off unnecessary items such as the header, footer, navigation, search box etc…
- Changing the font to serif, increase the font size and space out the line height to make the print version more legible
- Adjust the columns or remove sidebars so that only the primary content prints out
- Are users leaving a specific page more than others? Maybe they are not finding what they are looking for and that page can bet altered
- Do you have a page where a lot of people are entering the site other than the homepage? You need to start thinking of those pages as landing pages
- Are there important pages that don’t get a lot of traffic? Figure out how you can make those pages more prominent
- You plan to bombard the user with fancy effects. It will cause the viewer to suffer from migraines.
- Your website can live without it
- Your target audience consists of elderly or disabled people.
- You are working on a login page. AJAX will essentially renders password managers useless.
- You need specific pages or content to be bookmarkable.
- Your users need to use the browser’s back button or history feature.
- You plan to use it on a web based application.
- You plan to add support for non JavaScript-enabled browsers.
- Your target audience consists of tech savvy users.
- You are creating a tool or a widget that will be used on another site.
- You need to conserve bandwidth – AJAX allows you to refresh specific content without having to load the entire page.
- Certain tasks will be finished much faster with AJAX.
- It allows you to write fast, maintainable, standards-based front end code.
- It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
- Separate structure and skin
- Separate container and content
22 Code Snippets for Creating Decent Charts
CSS Juice is a design weblog that aims to inspire creativity by sharing innovative resources and websites to bloggers, … CSS Line Graphs. Accessible Bar Chart …Don’t forget about :active
Every once in a while I remember some functionality of CSS that we have had access too for ages yet is rarely taken advantage of in creative ways. The last time I really wrote about this is when I had discovered a way to make other menu items change when you hovered on just one of them, as you can see here in the Advanced CSS Menu Trick article.
Sometimes rediscovering these capabilities are valuable for creating new ways to add creative touches, such as the parallax scrolling effect. Other times they can greatly improve the usability and user experience of our sites. In some cases they do both.
I was recently reading through “The Elements of User Experience
,” which opens with a compelling story describing why things going wrong in your day could be the fault of poor design in regards to usability. Interestingly enough one of the points covered in this section is the use of feedback as a way to notify a user that something has occurred.
Most Web Designers Fail to Take Advantage of :active
In the case in the book they mention a coffee pot beeping so you know that it was switched on. This same principal of offering a user basic feedback applies to the web, yet we rarely see it used in all instances it can.
We have had the ability to style a links :active pseudo selector since CSS1, yet when was the last time you actually used it? I will admit that I am a grand offender as well, as I couldn’t tell you. However the value of such a subtle detail can have large benefits to a users experience of the site. Not to mention it does give another avenue to enrich the interactivity of our interfaces.
An Common Example
If you have ever done any usability studies you will have probably run into a situation where things that seem incredibly simple end up taking significant amount of time. One of the most basic of these situations is that of clicking on a simple link. I have many times in my “behavior observing” career seen a user who thinks they have click on a link, despite having missed it slightly.
What follows is a long pause while they wait for the page to change, before getting frustrated and either blaming the internet, the site, or swirling the mouse to ensure the computer hasn’t locked up.
This could all be solved by simply giving the user feedback when a button is clicked. Interestingly enough flash based websites have done a better job through out history of accomplishing this than most HTML sites, done so by adding a subtle “clicking” noise as a link is clicked.
Of course I am not advocating the use of sound (as it fails on several accessibility levels among other issues), however it wouldn’t be hard to give the user some feedback to let them know the link was successfully clicked on.
What We Can Do
By using the :active selector in CSS we can give the user some feedback that a link has in fact been clicked. This way if there is any sort of delay the user knows that it is successful loading and they don’t have to reclick the link. This will make the site more usable and as more developers and designers begin to adopt this process the web itself will become more usable.
Additionally it opens up a new area for us designers to work our creativity. We can now think about what subtle design elements we can give links and buttons to indicate to the user that they have been clicked. In my example, a beveled button appears to be pushed inward.
It Isn’t Perfect
Despite the fact that it is a dramatic improvement over not having any feedback and it does give us more room to express our creativity, the functionality isn’t perfect. You may notice in the demo that if you click on a button quickly it changes so fast you might not even notice. You may not realize that there is even an effect giving you feedback.
Regardless, using :active will still enhance the user experience. Even if only 10% of your users notice it is worth the time and effort put into it. Additionally users who are less familiar with computers and the internet will be more likely to hold the mouse button down longer and thus notice the effect.
Consider Adopting it as a Regular Practice
I really advocate the adoption of it as normal standards based markup. If it becomes a convention than users will expect some sort of notification that a link was clicked and even it happens to fast on the pages that load right away, they know to look for it.
Five commonly neglected parts of a website that deserve detail
There are some great websites out there. They are well planned, well executed, well designed and simply effective. For every great website there are three that are could be great, but fall short due to a few small areas of neglect.
We as a community and as an industry have become very good at most aspects of building websites. Just looking through a few CSS Galleries clearly shows the quality of design that is being produced and how much it has improved in just a few years. If you look a layer deeper and view the source of these websites you will see beautiful and semantic XHTML/CSS. It seems the days of table based layouts is finally gone.
The amount of functionality and rich experience that sites have now day are creative, impressive and engaging. Powerful javascript libraries such as jQuery, MooTools and prototype make it easy to produce these experiences rapidly and effortlessly.
But a website is more than the design, code and effects/functionality. Sometimes we have to rethink our approach and find out what is really important. What are the sites objectives and what are our users objectives? More often than not you will find that you could improve the following areas of your websites:
1. Web forms
While they are far from the sexiest part of web design, web forms are arguably one of the most important. In almost all cases a web form also functions as a conversion point (a point where a user performs an action that accomplishes a site objective).
Here a user is going to enter in some of their personal information so that they can get something in return. This establishes interest and provides the site owner with some valuable information.
Web forms are often neglected in two ways:
You have a real opportunity to learn more about the people who use your website. That information can not only help you build a better website but also a better business. This marketing information could easily lead to R&D improvements and better products.
Do some research and learn how you can make more effective forms. Your clients, bosses and website owners will thank you many times over.
Resources
2. The Content
Content is king. In a recent study 25% of users noted that the number one reason they were to leave a website was due to “weak web copy.” The only reason anyone ever goes to any website is because of the content, yet so many website owners neglect the content. Despite it’s importance content becomes an afterthought. Appearance, search rankings and conversions tend to be the focal point of most web design projects. What we may forget is that with out great content you still have a poor appearance, you won’t rank high and no one will convert.
Rather than trying to write all of the content yourself, hire someone. It will be worth it, I promise you. If nothing else write the bulk of the copy and hire someone to make it consistent with the proper voice and tone.
Resources
3. The Footer
With a little thought it becomes painfully obvious, most website footers are absolutely useless. A user takes the time and effort to read (or scan) through an entire page, and when they reach the bottom they are rewarded with links that don’t fit anywhere else, a copyright notice and maybe an address and phone number.
The point where page content ends is a very high action zone. That means that users who get to that point have a high probability of clicking on any link that comes below it. Rather than some meaningless legal links and an address create a footer that gives the user a place to find additional content that may interest them.
This could be:
Resources
4. The Print Version
Many designers fail to realize how many people still prefer to print off websites rather than try and read them on screen. There are two significant benefits to paying attention to the print version.
The most obvious benefit is that it can improve the user experience of the site. Users who visit your site and print it out will actually read the content and are more likely to revisit the site and make an action (or conversion). If the printed version is difficult to read and work with they are highly likely to simply recycle the paper and forget they ever visited your site in the first place.
The second benefit is it could be a real competitive advantage. If a user prints off two web sites, and yours clearly has more attention to detail in the print version, they are much more likely to use your product/services over the competitors.
You can improve the print version simply by:
Resources
5. Analytics
How users behave and use a website is one of the most important factors you could possibly focus on. Despite this fact it is so commonly neglected by both website owners and website designers. Businesses need to spend more money on the analysis of user behavior and web design companies need to promote the service more heavily.
Even a website that is built using an effective strategy, user testing and best practices is a best guess at what will be most effective.
If you actually pay attention to how users behave and analyize that behavior you can discover countless ways to continually improve your website.
Resources
Writing CSS Code: Inline and/or/vs. Block | Design Intellection
Once you’ve been creating websites with CSS for a while you begin to develop … But your terms of “inline” and “block” with respect to CSS is very much mis-leading. …CSS Best, CSS Top Websites, CSS Web Galleries – Collections of CSS …
… select the best CSS websites. 734 Websites … Top 10 websites to submit your design portfolio … CSS Layouts: 40 + Tutorials, Tips, Demos and Best Practices …CSS Centre for Security Studies
The Centre for Security Studies (CSS), established in 2001, and located in … The Centre for Security Studies BiH (CSS) invites interested students to apply …Flutter, the “ultimate wordpress CMS” updated
You use WordPress as a CMS right? And you probably love it, after all what is not to love? It is simple, easy to install, has a huge community base, thousands of plugins and themes… and 2.7′s interface is simply… stunning.
WordPress is not perfect as a CMS however, and can you blame it? It was designed to be a blogging platform. They must have done something right if WordPress started as a blogging platform that simply works so well as a CMS.
This could all be part of the past now that Flutter has arrived. WordPress could easily be a fully extendable CMS with one of the best blogging platforms integrated into it. So many of the minor pitfalls wordpress previously had as a CMS are now gone.
Flutter is not a new plug in by any means. Released around wordpress 2.5, it has had time to pick up a little bit of steam. It seams it never really caught on because despite it’s useful benefits it was confusing and difficult to install and maintain. To wordpresses recent credit, it didn’t solve some of the more confusing “blog focused interface” that 2.5 and 2.6 still had.
However now coupled with 2.7 and a new release of flutter you can now create an amazing full fledged CMS capable of almost anything you can think of.
More About Flutter
Flutter was designed to combat two major issues that WordPress has when being used to administer and power web sites rather than blogs. Dealing with content that was more than just self formated text and photos, and an easy way to edit complex pages.
Custom Content Types
A typical example could be pages for the biographies of individuals. These pages likely have a specific format that all of them should adhere to. Name, Title, Skills, etc… Previously with WordPress you would create a blank page for each and have to try your best not to accidentally mess up the format. Of course you could try using the custom fields, but try explaining those to a client with out having their eyes glass over.
Now days you had better count on the fact that websites are going to be complicated enough where the simple homepage / innerpage templates are not going to be substantial. Websites will have different content types, a home listing, biography, portfolio page, etc… Flutter allows you to create custom write panels for different types of content. The write panels can have text fields, radio buttons, pictures, drop downs, etc… allowing the user to create a page exactly how they want it with out hassel or vast technical knowledge.
Edit in Place
The other example might be managing and editing pages that have both unique sidebar content and primary content. Before you would have to create a page for the sidebar, use a custom template to include that post into the sidebar before finally trying to teach a client how it all works. Very complicated right? Well it doesn’t have to be.
Flutter also lets you specifcy editable regions of a page, like the main content, title, or sidebar. Using a bit of AJAX magic useres who are logged in can navigate to the page they wish to edit through the front end, click an edit button, and begin to edit that section with out even leaving the page.
This makes the CMS almost transparent. Your typical client is more familiar with the web from a users perspective, and this allows them to edit and manage pages the way they are most comfortable.
Slightly Complicated
While the usage and learning curve of flutter has improved, you should still expect to spend an ample amount of time your first attempt at using this plugin. The documentation while available, is sparce at best (not that you can really blame the developers, who are giving the plugin for free.)
The learning curve is well worth it. You can easily expect to save more time than you spend in reduced phone calls and e-mails regarding how to perform specific functions, tasks, or edits in WordPress.
6 Reasons Not To Use AJAX … And 6 Reasons Why You Should
Having to go through tons of sumbmissions for the CSS Vault Gallery over the past few years, I have noticed a definite increase in the amount of sites that use AJAX or some form of JavaScript. There seems to be a trend where even simple 5-page websites use JavaScript to some extent, in an attempt to generate additional interest on the viewer. Sometimes they are entirely unnecessary, and there are cases when the presence of AJAX only serves to annoy or encumber the user.
AJAX technology must then be used only when necessary. I have come up with a list of reasons for this purpose.
DO NOT USE AJAX when …
DO USE AJAX when …
Object Oriented CSS
“How do you scale CSS for millions of visitors or thousands of pages?” This is the question that Nicole Sullivan tried to answer in her presentation at Web Directions North in Denver. Entitled Object Oriented CSS (OOCSS), the concept has since then garnered overwhelming response from the community.
OOCSS is more than just a tool, it is a way of thinking. There are many advantages to adapting this concept. Primarily:
OOCSS is governed by two main principles:
Take time to check out the Object Oriented CSS presentation. There are 64 slides, but it is definitely worth going through. If the text is hard to read, try viewing in Full Screen mode.
How does your design approach affect accessibility?
In an article entitled “Visual vs. Structural,” Tommy Olsson compares the two most typical – and often competing – web design approaches: visual design and structural design. The balanced and well-written article makes the point that while there are often no major differences in the code produced from one design approach or another, using a structural approach can result in more accessible sites. While I hesitate to use such loaded words as “better,” I definitely agree that structural design can contribute to a product that is more scalable, easier to maintain, and more accessible. (I say this from the perspective of someone who has employed both approaches at one time or another.) And remember, “accessibility” doesn’t just mean “blind people.” As the web moves away from being confined to the desktop computer, accessibility is as much about accommodating mobile technologies as it is about making sure content is available to disabled users.Read | Permalink | Email this | Linking Blogs | Comments