Skip to main content

Are You Using CSS3 Appropriately?

 

Advertise here with BSA

Are You Using CSS3 Appropriately?

CSS3 is exciting. When it was introduced, it seemed like the untapped potential of Web Design was finally unlocked.

It proposes speedier web page response times due to the reduction of images needed for things such as text effects and web buttons for our UIs.

It cuts back our dependency on JavaScript for visual presentation purposes such as animation effects, not only resulting in less code (always a good thing) but also equating to even better web page performance.

It promises less reliance on expensive graphics software like Photoshop.

But has anything, in the broader scheme of visual design, really changed? We’re still dealing with the same users, the same content and the same user-centered design philosophy.

The new CSS3 capabilities should be treated just like any other web technology we work with: It should always support user-centered design and the site’s goals and purpose. And if CSS3 is applied in any other way than that, then it becomes a dispensable component within our website production process.

CSS3 Does Not Change Design

In terms of design principles and visual presentation best practices, nothing has been altered by CSS3, even when we’ve been given fancy transitions, transforms and typography effects to play with. These are all superficial tools in web design, and we’ve had these things even before CSS3.

From the user’s perspective — which is always the most important viewpoint — these new cosmetic CSS3 properties matter even less. Most users, we must remember, won’t notice the subtle effects we put in our designs, like links changing colors smoothly instead of immediately. These are on the aesthetic level, and shouldn’t get in the way of the user experience.

The real paradigm shift comes in the new way of approaching and carrying out our website design process.

For example, with better support for media queries, we can now more easily produce flexible and responsive web designs that optimize the user experience depending on what browsing device they use. That’s huge, and introduces plenty of new concepts in our traditional site-building methodology.

With the new CSS3 selectors, we now have a much better ability of targeting HTML elements and carrying out animation effects without the use of JavaScript or a web development/Ajax library like jQuery.

CSS3 isn’t about fancy text shadows and gradients; that’s only at the surface of it. It should be about enhancing the user experience and being able to produce better sites in a more efficient manner.

Using CSS3 Appropriately

Now that we have more tools at our disposal, we can design interactions more naturally. We can use these new features to our advantage by applying them where usability and the user experience is improved.

Or we can use CSS3 to our detriment, where we focus on the new superficial CSS3 features, loading up our work with extraneous text shadows, color gradients and fancy rotation effects simply because we can.

When we decide to use CSS3 in our work, we should always keep in mind that function is more important than form. There is an important line between a beautiful design and a good design.

As a rule, only use CSS3 when there’s a good reason to do so. For example, you might use the text-shadow CSS3 property to create a good visual hierarchy, pulling greater attention to more important textual elements. But if everything has text shadows for no other reason than because it looks cool and is out of the ordinary at the expense of readability, then it is definitely not a good use this new web technology.

We have to put usability, accessibility and the user experience at the forefront of the design process. Everything else comes second.

The Bifter is an example of heavy reliance on gratuitous CSS3. The site looks great on a CSS3/HTML5-supporting browser like Google Chrome.

Unfortunately, it almost falls apart in IE7.

In this instance, the experience of users with browsers that do not support CSS3 was neglected for form. The same look could’ve have been created using older web design techniques (e.g. no CSS3, no HTML5, using a PNG fix for alpha transparency, etc.) without sacrificing the user experience of IE7 (and below) web users.

Using CSS3 should:

  • Support — and never hinder — usability, accessibility and UX
  • Improve web performance
  • Speed up website development

If, however, you find yourself in a situation that doesn’t achieve any of the above, then is CSS3 really the right tool for the job?

Conclusion

We’ve been given a lot of power, and thankfully, we’ve been fairly responsible with it so far. As a whole, our web designs haven’t taken a step back because of CSS3. We’re using the new features smartly, pushing the envelope without neglecting the overarching goals of Web Design, which is to support the needs of users.

So long as we continue in this vein and we’re keeping it simple, I don’t think we have to worry about CSS3 being an issue in Web Design.

Related Content
About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

Are You Using CSS3 Appropriately?
Jacob Gube
Tue, 04 Oct 2011 10:00:39 GMT

Popular posts from this blog

Apple Launches Web Tool to Deregister Phone Numbers from iMessage

Apple today released a new web tool for users to deregister their phone number from iMessage in the event they switched to a non-Apple device. To deregister a phone number from iMessage, users simply enter their phone number in Apple's web tool, receive a free text message containing a code, and submit the code to complete the process. Users who still have their original iPhone can also transfer their SIM card back to the device and go to Settings -> Messages to turn iMessage off. 


Users switching from an iPhone to another device were often unable to receive SMS messages from another iPhone due to their phone number still being linked to iMessage. These specific errors with iMessage have been a well-known issue since 2011, which is when the messaging service debuted with iOS 5. They were also made even more apparent this past May, where a server glitch caused widespread message delivery problems. Apple was even sued over the matter in a California court, although the company cla…

Microsoft acquires iPhone email app Acompli

After accidentally announcing it a little early, Microsoft is officially confirming it has acquired email startup Acompli. The surprise acquisition means Microsoft is picking up a powerful email client for iPhone and Android in another move that further cements CEO Satya Nadella’s focus on cross-platform technologies. The Verge’s Casey Newton called Acompl "the Outlook for iPhone that Microsoft hasn’t yet built," and it seems Microsoft was equally impressed with the powerhouse email app. "We’re excited about what’s possible as we build on the app’s success and bring it together with work currently in progress by the Outlook team," the company said in a statement. "Our goal is to deliver fantastic cross-platform apps that support the variety of email services people use today and help them accomplish more." Recode first reportedthat Microsoft would make its latest acquisition official today; the company is said to be paying over $200 million for Acompli. A…

iOS 10.3.2 now available to download on iPhone and iPad

Nearly a month and a half after iOS 10.3.1 rolled out to the public, Apple has now officially released iOS 10.3.2 on iPhone, iPad and iPod touch. We're still waiting on detailed release notes from Apple, but the update screen reveals that the new version of iOS focuses on bug fixes and security improvements.
Continue reading...
Trending right now:
WannaCry: Everything you need to know about the global ransomware attackTim Cook's refusal to help FBI hack iPhone is validated by 'WannaCry' ransomware attackNetflix is testing a price hike that would be pure evil

http://bgr.com/2017/05/15/iphone-ipad-update-ios-10-3-2-download-install/