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 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 102013

This article’s author views moving to responsive design as an opportunity to revisit your content strategy, with the caveat that this is also a requirement. Implementing responsive design, especially in the context of a CMS, has implications on the front end as well as the back end in terms of design and underlying structure. This relates to how and where your content appears which includes context and proximity of related content.

Responsive Design won’t fix Your Content

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.

Nov 052013

If your main point when selling responsive design to a client is compatibility with mobile devices then you’ll find this article eye opening. Sure, mobile compatibility is fundamentally germane but responsive design is about more than that, especially today when there really isn’t a standard monitor size. This article makes good points in the context of a case study which always helpful.

Selling Responsive Web Design To Clients | Smashing Magazine.