HTML5 & CSS3 Web Standards

You don’t have to be a web standards aficionado to appreciate how the updated HTML5 and CSS3 specifications benefit website performance — and relieve headaches for those who craft them. Although practical use of some features has been inhibited by the high percentage of users still surfing with outdated browsers, others have been making it mainstream and can safely be used today. Even on Internet Explorer.

HTML5: what’s new?

The biggest difference between HTML5 and everything that came before it is the focus on accessibility. If the web standards landscape of the past was like the wild west, then HTML5 is a socialist state: backwards compatibility, agreed-upon browser standards, even clearly defined error handling.

Beyond a change in philosophy, HTML5 brings a lot of fun tools to the table. Let’s take a look.

Elements enabling web apps

You’re right to be excited if client-side form validation sounds amazing. In HTML5, logic can happen on the user’s end, meaning they can even interact with forms (and apps in general) offline.

The introduction of native video and audio elements is also a huge step forward, especially with these media being largely under the domain of proprietary softwares like Flash — in spite of the astronomical chunk of web traffic they account for.

Drag and drop? You can make any element draggable; it’s as simple as setting “draggable=‘true’” within the tag.

Eyeing the future, experimentation is already underway towards native 3D image manipulation. For the meantime, the <canvas> tag lets you manipulate graphics on a 2D bitmap via javascript. CodePen (http://codepen.io/) is overflowing with cool implementations.

If you’re unsure how safe an element is, check this database. (http://html5please.com).

Semantic elements

Inspired by the unofficial convention of organizing content semantically via class name, HTML5 gives us tags like <header>, <footer> and <aside> that have actual structural meaning.

This gives both browsers and human readers a hint at the intention for the content, and ends the headache of unclear closing tags — not to mention the need for messy-looking inline commentary.

CSS3: changes and improvements

Millennial coders may take rounded corners and transition effects for granted, but it wasn’t so long ago that most visual styling was left to the devices of background images and javascript hacks. Remember Flash intros? I hope not. At least these days when somebody kicks off their landing page with an animation it doesn’t crash your browser or demand that you update your proprietary software.

Modular structure

In an attempt to step around the need for dramatic specification upgrades, CSS3 is designed as a series of twenty or so modules which evolve independently based on developer needs. This has allowed more practical modules like transitions and media queries to leap quickly into common use, while less critical ones like flexible box layouts have languished in a development zone.

Transitions and animations

Easily the most common current use for CSS3 is transitions and animations. Controlling consistent site-wide details like hover styles with CSS makes updating brand identity a breeze (or at least much more practical), not to mention speeding up load times. Animations allow for life-like movements that make the experience more intuitive, even if the user happens to disable javascript.

Media queries

The function of media queries seems simple on the surface: find out how wide a viewport is, and serve up a different chunk of CSS based on the answer.

Yet beyond simply encouraging a flexible design outlook, media queries encourage the developer to make fewer assumptions about what device a user will happen to log in with; you could say that media queries lie at the heart of the “mobile first” design revolution.

As quickly as new and exciting ways to surf the web roll out these days (think smartwatches), this is an important shift of viewpoint — we no longer live in a world where it’s either a desktop computer or a phone, with nothing in between. The screen size is unpredictable. It’s why mobile sites fell out of fashion.

Where it’s all going

Looking forward, we can expect that HTML5 will continue to evolve, allowing us to structure pages in an increasingly device-agnostic manner. Semantic soup and CSS floats won’t be missed. Beyond that, increased support for client-side logic has much to promise in the realm of web apps.

Given the trend of adopting developer practices into the official W3C recommendations, it also seems likely that features used in code preprocessors like SASS will soon enter the CSS3 specification, allowing increasingly flexible and logic-driven presentation. In fact, “hard programming” concepts like variables and blocks are already being drafted into CSS3 as we speak.

What does it all mean? Faster development time. And faster apps.

Share on facebook
Facebook
Share on email
Email
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pocket
Pocket
Colby Albarado

Colby Albarado

Colby is a fullstack developer

Back to Home Page

Colby Albarado

Full Stack Developer

A full stack developer is an engineer who can develop client & server side applications. As well as administration of databases & servers.

Languages

  • PHP
  • JavaScript
  • MySQL
  • HTML/CSS

Frameworks

  • Vue JS
  • Laravel

CMS

  • WordPress
  • WooCommerce

Web Dev

Web Development is a process. The creation of a plan to construct something virtual or actual. Websites, graphics and other forms of media require a strong design foundation to be effective.

Capabilities

  • WordPress Plugins
  • Custom JavaScript Apps
  • Front End Development
  • Custom Programming

Contact Me

SEO

SEO Ranking in any search engine requires a persistent endeavor to improve user experience and online visibility, while creating especially relevant content for your audience. Boosting organic traffic to your website can be achieved through relevant content creation, keywords, link building, monitoring and data testing.

Capabilities

  • Local SEO Ranking
  • Organic Search Ranking
  • OnPage SEO Implementation
  • Analytic Reporting
  • Traffic Analysis

Contact Me

WordPress

WordPress is extremely user friendly and flexible. It powers over 75 million sites worldwide. We are WordPress experts and can handle brand new sites, complete redesigns and overhaul and custom plugins for the WordPress system.

Capabilities

  • New Websites
  • Managed Hosting
  • WordPress Updates
  • Plugin Development
  • WordPress Management

Contact Me

Video

I provide full scale post production video services. Social media & promotional video. On-screen graphics, special effects and professional voice-overs are just a few of the services provided.

Capabilities

  • Post Production
  • Social Media Videos
  • Motion Graphics
  • Animation

Demo Reel Coming Soon!

Contact Me

GuyGlassesIcon

Contact

Submit this form to make contact about your project

Clients

I’ve worked with a variety of clients that range in size and industry

Feedback

Holly Lynn-Cope
Moncus Park
Read More
Colby at Eyebox Media has not only created a gorgeous website for us at Moncus Park, but he has also made it so easy for a WordPress novice like myself to update our website.
Michelle Morales
Punch Point Tools
Read More
I have been working with Colby for a few years now, and he has helped me with everything I asked of him. He has designed my website twice and understood exactly what I wanted each time. Very easy to work with and looking forward to working with him again.
Michael Olivier
CrossFit Amis
Read More
Colby is a highly qualified professional website builder and marketing consultant. He works to resolve issues quickly. I have complete confidence in Colby and am absolutely satisfied with our finished product, a complete website overhaul.
Scott Hutchinson
Hutco Inc
Read More
Created a unique marketing plan that was executed timely and affordable. Very satisfied.
Laurie Driggs-Fontenot
Ninety-Two West
Read More
Colby is professional, thorough, and knowledgeable. Would work with him again!
Brandon Chatham
Blast Tech
Read More
Excellent support and very responsive when we need to add functionality. I would recommend them to anyone!

Message Sent!

Thanks! I'll be in Touch Soon!