Responsive web design, HTML5 and CSS3 are all the rage now. New articles and posts about them appear almost every single day. It is important that new articles are not just rearrangement of words about one and the same things. There are a lot of really useful and inspiring materials: techniques, tools, experiments, tips, as well as ideas and opinions. Some of them which have been published this spring are collected in the post.

• Responsive Web Design
• HTML5
• CSS / CSS3
• JavaScript, jQuery
• Browser Compatibility
• Tools and Resources
• Opinions
• Inspiration

Responsive Web Design

1). Ethan Marcotte answers your responsive web design questions
http://www.netmagazine.com/interviews/ethan-marcotte-answers-your-responsive-web-design-questions
by Oliver Lindberg: “Ethan Marcotte, author of A Book Apart’s Responsive Web Design and the man who coined and kickstarted the whole concept, takes on your questions and covers responsive advertising, images and more.”

2). Which One: Responsive Design, Device Experiences, or RESS?
http://www.lukew.com/ff/entry.asp?1509
by Luke Wroblewski: “As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of ‘how’ comes up. Responsive Web design, separate sites, or something in between? Here’s how I’ve tried to simplify this decision.”

3). Building fast and responsive websites
http://www.netmagazine.com/tutorials/building-fast-and-responsive-websites
by Shi Chuan: “In this exclusive excerpt from his HTML5 Mobile Development Cookbook web developer Shi Chuan, co-creator of the HTML5 Boilerplate, explains how to build pages with semantic markup, use dynamic loading, make buttons with instant response and more.”

4). Build a responsive site in a week: images and video (part 3)
http://www.netmagazine.com/tutorials/build-responsive-site-week-images-and-video-part-3
by Paul Robert Lloyd: “In the third part of our responsive web design tutorial, Clearleft’s Paul Robert Lloyd looks at incorporating images and video into responsive layouts, and describes some of the problems in this area that still need solving.”

5). Build a responsive site in a week: going further (part 5)
http://www.netmagazine.com/tutorials/build-responsive-site-week-going-further-part-5
by Paul Robert Lloyd: “In the final part of our responsive web design tutorial, Clearleft’s Paul Robert Lloyd explains how there is more to a responsive design than just flexible layouts, images and media queries.”
   >>> See aslo Related Articles to this post.

6). The state of responsive images
http://www.netmagazine.com/features/state-responsive-images
by Mat Marquis: “Designer/developer Mat ‘Wilto’ Marquis takes a look at the img tag, explains why a largest-size-fits-all approach to images is untenable and discusses different solutions in this ongoing saga.”

7). Responsive Web Design: Layouts and Media Queries
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
by Stéphanie Walter: “With the growing number of Smartphone produced in the last three years and the diversity of screen sizes it’s practically impossible to ignore users that browse on a mobile device.”

8). Handling typography for responsive design
http://www.netmagazine.com/tutorials/handling-typography-responsive-design
by Val Head: “You’ve got your layout and images scaling, but you need to have your type following along as well. One size of type does not fit all line lengths or screen widths!”

9). Fanfare for the common breakpoint
http://adactio.com/journal/5425/
by Jeremy Keith: “If we’re truly taking a Content First approach then we need to ‘Start designing from the content out, rather than the canvas in.'”

10). Mobile Navigation Design & Tutorial
http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial
by Nick La: “One of the common challenges when designing responsive design for mobile is the navigation menu… Some of the design solutions and a quick tutorial on how to create a mobile navigation with jQuery.”

11). Device-Agnostic Approach To Responsive Web Design
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
by Thierry Koblentz: “This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.”

12). Beginners Intro: Considering Responsive Web Design
http://inspirationfeed.com/articles/design-articles/beginners-intro-considering-responsive-web-design/
by Harry Wiseman

13). How to Implement in Code 5 Really Useful Responsive Design Patterns
http://www.splashnology.com/article/how-to-implement-in-code-5-really-useful-responsive-design-patterns/5098/
by Softlink

14). Automatic responsive images in WordPress
http://viewportindustries.com/blog/automatic-responsive-images-in-wordpress/
by Keir Whitaker: “…we wanted to try out a few relatively new techniques on this site, the main one being the inclusion of Josh Emerson’s Responsive-Enhance script to serve resolution-dependent images.”

15). Create a responsive Drupal theme
http://www.netmagazine.com/tutorials/create-responsive-drupal-theme
by Tim Millwood: “Drupal themes enable you to change the look and feel of your site. Tim Millwood explains how to create a theme that makes it appear differently on different screen sizes.”

HTML5

1). HTML5 Best Practices for Designers
http://www.instantshift.com/2012/03/27/html5-best-practices-for-designers/
by Vail Joy: “Learning as much as you can about HTML5 and following these basic practices will help you produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade.”

2). HTML5 Bookmarks – daily news articles and bookmarks
http://html5bookmarks.com
“HTML5 Bookmarks with daily news articles and bookmarks about html, javascript, css.”

3). Using HTML5 localStorage on a form
http://www.thomashardy.me.uk/using-html5-localstorage-on-a-form
by Thomas Hardy: “HTML5 localStorage provides us with the ability to store named key/value pairs locally within a users browser, this means that the data stored in localStorage is still there even after a user has closed the browser, deleted their cookies or turned off their machine/device.”

4). Login and Registration Form with HTML5 and CSS3
http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/
by Stéphanie Walter: “A tutorial on how to create a switching login and registration form with HTML5 and CSS3.”

5). The State Of HTML5 Video
http://www.longtailvideo.com/html5/
by LongTail Video: “An overview of the browsers & devices are discussed below, with detailed links to our actual test pages for a more comprehensive look. As HTML5 Video evolves, so will this report.”

6). Get the Most Out of HTML5’s Native Audio
http://www.developerdrive.com/2012/04/get-the-most-out-of-html5s-native-audio/
by Kim S. Teeple

7). HTML5 audio and audio sprites – this should be simple
http://hacks.mozilla.org/2012/04/html5-audio-and-audio-sprites-this-should-be-simple/
by Chris Heilmann: “One thing I proposed in a lot of talks is using the idea of CSS sprites and apply them to HTML5 audio. You’ll get the same benefits – loading one file in one HTTP request instead of many, avoiding failure as files might not get loaded and so on.”

8). Learning WebGL
http://learningwebgl.com/blog/?page_id=1217
“A series of lessons on WebGL. The first ten are based on the well-known NeHe OpenGL tutorials, but I’ve diverged since then. The lessons are available in 4 languages: English, Chinese, Spanish, and Japanese.”

9). 18 Tools and Tutorials for HTML5 Canvas
http://developer.practicalecommerce.com/articles/3486-18-Tools-and-Tutorials-for-HTML5-Canvas
by Sig Ueland: “Here is a list of tools and tutorials for HTML5 canvas. There are basic tutorials and resources to get started. There are multi-part guides to learn advanced canvas functionality. And there are experiments and examples to discover further aspects of canvas.”

10). 7 Reasons to Consider SVGs Instead of Canvas
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas/
by Craig Buckler: “The HTML5 canvas element is used everywhere. From WebGL games to some amazing browser experiments, web developers are jumping on the canvas bandwagon and enjoying the ride. But are we always using the right tool for the job? In many cases, Scalable Vector Graphics (SVG) offer a better alternative but it’s easy to forget about the technology when it’s hidden beneath the wave of canvas hype. If you’re not considering SVG, perhaps the following reasons will make you think again.”

11). Using Custom Attributes in HTML5
http://www.developerdrive.com/2012/04/using-custom-attributes-in-html5/
by Sue Smith: “Custom attributes are among the most significant additions for HTML5, and can play a major role in semantic Web development. In this tutorial we’ll go through a practical example of creating and accessing HTML5 custom data attributes, including the necessary JavaScript functions.”

12). Let’s Talk about Semantics
http://html5doctor.com/lets-talk-about-semantics/
by Mike Robinson: “Understanding the thinking behind the naming of elements will help your markup shine.”

CSS / CSS3

1). 5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours
http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/
by Joshua Johnson: “I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.”

2). On :target
http://css-tricks.com/on-target/
by Chris Coyier: “The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.”

3). My thoughts about the latest Image Replacement techniques
http://www.css-101.org/articles/image-replacement/the_new_new_image-replacement_techniques.php
by Thierry Koblentz: “As far as I know, there has been nothing new in this field since 2010, when @necolas published ‘Improved NIR’ based on the Nash Image Replacement method which was a departure from relying on background images – an idea I introduced with my own technique in 2005.”

4). Fighting the Space Between Inline Block Elements
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
by Chris Coyier: “A series of inline-block elements formatted like you normally format HTML will have spaces in between them… We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.”

5). Code a Fantastic Animated Circular Thumbnail Gallery With CSS
http://designshack.net/articles/css/circlegallery/
by Joshua Johnson: “Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all manner of future projects.”

6). Rotating Words with CSS Animations
http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/
by Mary Lou: “In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be ‘exchanging’ certain words of that sentence using CSS animations.”

7). Refactoring >14,000 lines of CSS into Sass
http://wildbit.com/blog/2012/04/16/refactoring-14000-lines-of-css-into-sass/
by Eugene Fedorenko: “With the growth of new tools like Sass and LESS I decided to rebuild our stylesheets into something cleaner and easier to maintain, and after working with the new system for a month I’m really happy with the results.”

8). CSS Refreshers: Borders
http://digitalmofo.com/css-refreshers-borders/
by admin: “Sure, we’re all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there’s quite a few things in this article that you never knew about.”

9). The Lowdown on Absolute vs. Relative Positioning
http://designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning/
by Joshua Johnson: “One of the real revelations that I had early on was when I was finally able to wrap my head around how positioning contexts worked, especially when it came to the difference between absolute and relative positioning.”

10). How To Create Animated List View Using CSS3 Only
http://www.webstuffshare.com/2012/04/how-to-create-animated-list-view-using-css3-only/
by Hidayat Sagita: “Listing items with some optional list view is a good practice to make user more comfortable on viewing our item list and it will be more nice to add some animation when they change the list view. In this post we are going to create an animated list view using pure CSS3 only.”

11). Learning LESS: An Introduction
http://www.developerdrive.com/2012/04/learning-less-an-introduction/
by Alex Ball: “…a series of posts that will focus on LESS, the dynamic language that takes your CSS and puts it on steroids. LESS let’s you use variables, mixins, nested rules, and even functions within your CSS. It’s extremely powerful and can dramatically speed up your development. There is a little bit of a learning curve to it, but once you wrap your head around it, you won’t type CSS again without using LESS.”

12). Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap
http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/
by Roger Johansson: “A problem that has always existed but has become more common lately as more people – thanks to the popularity of responsive web design – make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.”

13). Decoupling HTML From CSS
http://coding.smashingmagazine.com/2012/04/20/decoupling-html-from-css/
by Jonathan Snook: “I’ve noticed that designers (including me) traditionally write CSS that is deeply tied to the HTML that it is designed to style. How do we begin to decouple the two for more flexible development with less refactoring?”

14). Everything You Never Knew About CSS Floats
http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/
by Joshua Johnson: “Floats can trip up even experienced developers and understanding their behavior can really set you free from many of the woes that you face with CSS. Even if you think you already know all about floats, we’ll dive deep enough that you just might learn something new!”

15). DRY CSS: Don’t Repeat Your CSS
http://www.vanseodesign.com/css/dry-principles/
by Steven Bradley

16). CSS Ribbon Menu
http://www.jacklmoore.com/notes/css3-ribbon-menu
by Jack Moore: “This uses CSS3 transitions and CSS2 pseudo-elements to create an animated navigation ribbon with minimal markup.”

17). Uncle Dave’s Ol’ Padded Box
http://daverupert.com/2012/04/uncle-daves-ol-padded-box/
by Dave Rupert: “I’d share a new trick I’ve been playing with in my RWD workflow.”

18). Pure CSS scrolling shadows with background-attachment: local
http://lea.verou.me/2012/04/background-attachment-local/
by Lea Verou

19). Some Practical Guidelines For Writing CSS
http://www.vanseodesign.com/css/practical-guidelines/
by Steven Bradley

JavaScript, jQuery

1). A Beginner’s Guide to jQuery
http://www.queness.com/community-news/11255/a-beginner-guide-to-jquery
by Christian Krammer: “Although it consist of pure JavaScript and everything is also possible using it alone, jQuery is much easier to handle, learn and master. So sit back and follow me through this course of everything you have to know about jQuery to get started.”

2). Ajax with jQuery: A Beginner’s Guide
http://www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
by Matt Doyle: “Explore the concept of Ajax programming, and learn how to use the jQuery JavaScript library to build Ajax-driven websites and web apps.”

3). Retina graphics for your website
http://retinajs.com
“Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.”

4). idb.filesystem.js – Bringing the HTML5 Filesystem API to More Browsers
http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api
by Eric Bidelman: “idb.filesystem.js is a well tested JavaScript polyfill implementation of the Filesystem API intended for browsers that lack native support. Right now that’s everyone but Chrome.”

5). Drag and Drop and Automatically Send to the Server
http://html5doctor.com/drag-and-drop-to-server/
by Remy Sharp: “…there are a lot of demos and tutorials that show you how to drag-and-drop a file into the browser and then render it on the page. They’re often labelled as ‘drag-and-drop and upload’, but they actually don’t upload. This tutorial will take you that final step.”

6). Understanding MVVM – A Guide For JavaScript Developers
http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/
by Addy Osmani: “MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behaviour in an application.”

7). Audio Slideshow with jPlayer
http://tympanus.net/codrops/2012/04/24/audio-slideshow-with-jplayer/
by Tyler Craft: “Today we’ll share an audio slideshow with you, i.e. a slideshow that will be synced with some audio. We are using the open source audio framework jPlayer.”

8). Techniques for creating modal windows
http://www.webdesignerdepot.com/2012/04/techniques-for-creating-modal-windows/
by Dain Miller

Browser Compatibility

1). Getting to Grips with HTML5 Browser Compatibility
http://speckyboy.com/2012/03/25/getting-to-grips-with-html5-browser-compatibility/
by Vail Joy: “HTML5 is ready for use with all modern browsers, including IE9. It has also been developed to gracefully degrade, even without help from JavaScript or CSS resets. Even still, you may be concerned about providing full backwards compatibility, or unsure of what will work in one browser and not another.”

2). The Current State of HTML5 Forms
http://wufoo.com/html5/
“Browser support for the different features of HTML5 forms is quite varied. Let’s explore.”

3). CSS Compatibility and Internet Explorer
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx

4). Browserling
http://browserling.com
“Interactive cross-browser testing.”

Tools and Resources

1). 50 fantastic tools for responsive web design
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
by Denise Jacobs and Peter Gasston: “To get started with building a responsive site, having a strong toolkit can make a world of difference. Here Denise Jacobs and Peter Gasston round up 50 great tools to aid the process of making your sites responsive.”

2). 75 top CSS and JavaScript techniques
http://www.creativebloq.com/web-design-tips/75-top-css-and-javascript-techniques-1233101/
by Sammy Maine: “A round-up of the very best CSS and JavaScript techniques from around the web, which include advice on building great websites, creating stores and designing apps.”

3). A Baseline for Front-End Developers
http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
by Rebecca Murphey: “Here are a few things that I want to start expecting people to be familiar with, along with some resources you can use if you feel like you need to get up to speed. (Thanks to Paul Irish, Mike Taylor, Angus Croll, and Vlad Filippov for their contributions.)”

4). Duckett’s HTML & CSS: A Beginner’s Web Dev Book You Can Actually Read
http://designshack.net/articles/reviews/ducketts-html-css-a-beginners-web-dev-book-you-can-actually-read/
by Joshua Johnson: “Read on to find out how Duckett is changing the way we think about web development books and why it’s hands down the best book I’ve ever read experienced on introductory HTML & CSS.”

5). 3 Questions to Web Design Pros: Resources for Mastering HTML/CSS Coding
http://www.htmlcut.com/blog/psd-to-html-coding-resources.html
“In this post we have interviewed web designers who are known in the web community and whose recommendations can be helpful to both beginners and experienced web designers when they master HTML/CSS coding.”

6). 30 HTML5 Tutorials You Cannot Resist
http://www.webblog360.com/2012/04/30-html5-tutorials-you-cannot-resist/
by Asma Abbas

7). 35 Best HTML5 CSS3 and jQuery Tutorials of 2012 (So Far)
http://www.multyshades.com/2012/04/35-best-html5-css3-and-jquery-tutorials-of-2012-so-far/
by Muhammad Haroon: “Today we’ll also discuss on these hot web design and development topics: HTML5, CSS3, and jQuery to cover some new features.”

8). Creative Ajax Tutorials for Designers
http://www.tutoriallounge.com/2012/04/creative-ajax-tutorials-for-designers/
by Ayelet Zurer

Opinions

1). Responsive Web Design: Missing the Point
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
by Brad Frost: “Do you really need to serve your ‘mobile’ visitors a different layout based on your current content? Short answer: no.”

2). Why We Shouldn’t Make Separate Mobile Websites
http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
by Bruce Lawson

3). Designers respond to Nielsen on mobile
http://www.netmagazine.com/news/designers-respond-nielsen-mobile-121892
by Tanya Combrinck: “Nielsen’s recommendation that publishers build separate mobile sites has been met with astonishment from the industry.”

4). Nielsen responds to mobile criticism
http://www.netmagazine.com/interviews/nielsen-responds-mobile-criticism
by Tanya Combrinck: “The usability pro answers critics who have described his recent mobile recommendations as ‘backward’.”

5). Progressive enhancement is a barrier to progress
http://www.netmagazine.com/opinions/progressive-enhancement-barrier-progress
by Drew Neil: “HTML5 makes it possible to build applications in the browser that were previously unimaginable. Drew Neil believes that to do so, we must first abandon progressive enhancement.”

6). Progressive enhancement is more relevant than ever
http://www.netmagazine.com/opinions/progressive-enhancement-more-relevant-ever
by Jim Newbery: “Jim Newbery argues that the diversification in web technologies and devices we’ve seen in recent years makes it a more relevant and useful perspective than ever.”

7). Is Responsive Web Design the Right Path to Minimalism?
http://www.1stwebdesigner.com/design/is-responsive-web-design-right-path-minimalism/
by Jamal: “The question going to be answered here is whether minimalism was rejuvenated by Responsive Web Design, or not?”

8). End tags, semi-colons and maintainable code
http://www.456bereastreet.com/archive/201204/end_tags_semi-colons_and_maintainable_code/
by Roger Johansson

9). About HTML semantics and front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
by Nicolas Gallagher: “A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.”

10). Big question: should we design in the browser from the start?
http://www.netmagazine.com/features/big-question-should-we-design-browser-start
by y Tanya Combrinck: “Our panel of experts discuss the advantages and disadvantages of designing in the browser as opposed to Photoshop.”

11). A Vote for CSS Variables
http://css.dzone.com/articles/vote-css-variables
by Ian Muir

Inpiration

1). 15 fabulous responsive sites for your inspiration
http://www.netmagazine.com/features/15-fabulous-responsive-sites-your-inspiration
by Antony and Jerome Ribot

2). Awesome HTML5 and CSS3 Website Inspirations
http://designerves.com/article/awesome-html5-css3-website-inspirations/
by ahda