Feb 242014

I previously referenced an article in this blog on CSS regions which are a way of controlling the flow of content in a specified order via   containing block elements a.k.a. CSS regions. This allows for artificially (if you will) controlling content flow vs a more organic approach using native CSS3 multi-column layouts.  The purpose of CSS regions is to more precisely control content flow in responsive designs.

I suggest reading both articles for an excellent point counterpoint perspective. The implications impact semantic markup and responsive design. The author of this article is sympathetic to the concept of CSS regions while pointing out real problems with implementation.

CSS Regions Considered Harmful ∙ An A List Apart Blog Post.

Feb 052014

I’ve been having fun putting up screencast tutorials for the courses I teach using responsive video that resizes with the viewport. The only problem is distortion on resize: quality not aspect ratio. The trick with this type of screencast is that viewers are usually working on tasks while viewing so screen space is limited. Not everyone has the benefit of multiple monitors, therefore, you really need flexible media that retains quality on resize. Chris Coyer offers up some creative solutions in his post that should address the problem. I’ll do an update as soon as I give them a try.

Rundown of Handling Flexible Media | CSS-Tricks.

Dec 112013

This is a handy reference for HTML5 form validation as well as fallback methods for unsupported browsers. You will also find articles and examples on ccs3 transforms, animation and more

placeholder="Enter a valid email address"

via HTML5 Form Validation Examples < HTML | The Art of Web.

Nov 132013

CSS regions have a lot of potential for managing content flow in responsive designs. Typically, containers collapse and move and the content goes with them. This can be detrimental to the flow of your pages and negatively impact user experience. By using regions you can control exactly how, where, and if particular content appears. Furthermore, you control how it flows and displays between regions. This article includes specific codepen examples and a detailed explanation to get you started.

Killer Responsive Layouts With CSS Regions | Smashing Coding.

Oct 072013

Here’s a link to the latest DZone Refcard which provides a good overview of key CSS3 features and how to code them. Refcardz in general are well done handy references. Here’s an index of all Refcardz. In order to download Refcardz you will need to create a basic account, but don’t worry, you will only receive emails when new Refcardz are released. It’s well worth it.

CSS3: Basics Cheat Sheet from DZone Refcardz – Free, professional tutorial guides for developers.

Sep 252013

I like to keep handy time saving code generators a click away. The code is usually simple enough to write in notepad but it saves time to click, enter a few values, then copy/paste instead. This is especially the case for complex CSS3 rules like animation, transitions, text rotation and shadows.

Dynamic Drive’s email riddler is more than mere code generator as it provides handy encryption for those who want to put email addresses on websites without causing heaps of spam for recipients.