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.

Jun 022014

This article does a good job comparing different ways in which desktop and mobile users approach tasks and how that effects behavior, needs, and the interface: desktop vs. mobile. For that alone it’s a worthy read.

Code examples are included if you’re wondering how to program specific functions  such as techniques for local storage, avoiding a browser crash when waking from sleep mode, and keeping data refreshed while preserving bandwidth.

The context is a case study on mobile efficiency and user experience.

Streamlining Mobile Interactions | Smashing Magazine.

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.

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.

Oct 302013

Basic design elements can impact usability quite dramatically. Users often ignore the right column or right-rail on a page because it’s typically a place for ads or irrelevant information. As a result, if there are elements that appear “ad-like” at a glance it will cast a banner blindness spell over your right column causing it to be ignored. This article from the Nielsen group offers valuable tips and examples to help keep all columns of multi-column designs in the visual field of your visitors.

Fight Against “Right-Rail Blindness”.

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.

Oct 072013

This is one of those catch-all articles that lines up seemingly disparate tips and tricks from different areas that are aimed at speeding up your workflow as a designer. Some may be time savers but several are just really cool techniques. All are linked to “how to” resources and some are better than others. Here are a few standouts.

  • Rounded Corners Done Right
  • Favicons Next to External Links
  • Speed Up CSS Prototyping
  • Doodle meeting scheduler
  • ColorBlendy

There are several resources on JavaScript and JQuery as well.

Powerful Workflow Tips, Tools And Tricks For Web Designers | Smashing Magazine.

Sep 272013

Question: what are CSS sprites?
Answer: a single image file containing a composite of several images.
Question: how are they used?
Answer: a common application is navigation where different sections of an image are revealed based on menu item states e.g. static, hover, selected.
If you’re not familiar with CSS sprites then this article is a great primer. Sprites are a powerful tool for front end designers. Learn about their advantages and how to use them.

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Smashing Coding.

Sep 182013

Using max-width:100% in responsive design is problematic in a number of scenarios. This article explains the problem and provides an excellent detailed solution in the form of a case study on the redesign of Aftonbladet, a popular Swedish news site. If you work with images in responsive design you’ll find this article informative and useful.

Addressing The Responsive Images Performance Problem: A Case Study | Smashing Mobile.