Jul 262014

This article focuses on a mobile first strategy that emphasizes good user experience which a traditional implementation of responsive design doesn’t meet in many cases. I found interesting the observation that all CSS and scripts are loaded regardless of media queries and there are steps you can take to avoid that. One approach is using javascript MATCHMEDIA (I wish the author would have gone into  some detail on this point). What’s most interesting is the behavior and latency in mobile networks. Recognizing that should cause you to adjust your approach.

I suggest giving this eye opening article a read.

You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy | Smashing Magazine.

Feb 242014

This article offers up reasons why UX designers should code wireframes in html using actual content versus using mock-up tools. It’s a worthy perspective and it’s related to the use of pattern libraries as a way of modularizing content blocks which adds great flexibility to how, where, and in what context you wish to deploy your content.

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 112014

Here’s a handy set of references on using the style panel in Dreamweaver from version 8 through CS6. Functionality across versions is similar. This is a CSS tutorial using Dreamweaver as the development tool.

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.

Dec 092013

This article effectively highlights design challenges for high resolution screens. Locking in max-width is a limiting and oftentimes detrimental approach. With responsive design one needs to consider big screen opportunities as well as small screen compatibility. How can you take advantage of high resolution? Consider content strategy and the opportunity to keep more content above the fold. The plethora of examples along with discussion on how others have utilized the big screen are what really make this article useful.

CSS3 offers two key techniques for responsive designs across resolutions. One that shows the most promise is CSS regions. Also look at CSS columns and design around a strong grid.

Surveying the Big Screen · An A List Apart Article.

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 242013

If you work with CSS then this article is a must read. It challenges the notion of using traditional sematic CSS with a reliance on contextual selectors. The author makes a strong argument for compact modular classes that can be applied anywhere. One of the benefits is the ability to move content easily without having to worry about messing up the CSS. I see one of the main benefits as the ability to maintain simple clean stylesheets.

Challenging CSS Best Practices | Smashing Coding.